`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_523":524,"_525":526},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_386":-5,"_20":387,"_22":388,"_389":390,"_391":392,"_26":393,"_24":394,"_395":-5,"_396":-5,"_397":54,"_398":399,"_400":45,"_401":-5,"_402":-5,"_403":404},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","dominik1","name","lista-zakupow","branchName","main","version","path","backend/db.ts","project",{"_33":328,"_13":14,"_46":329,"_330":-5,"_331":54,"_332":333,"_334":333,"_335":336,"_337":-5,"_338":339,"_340":66,"_341":45,"_342":-5,"_343":-5,"_344":86,"_345":346,"_347":348,"_349":350,"_351":352,"_353":-5,"_354":355,"_356":355,"_357":358,"_359":358,"_360":358,"_361":355,"_362":355,"_363":364,"_365":366,"_367":368,"_369":54},"tree",[58,59,60,61,62,63],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"contents",[],"upstream","pull","ahead","behind","envVars","id","d5da89f2-37c4-4c78-af43-9ba4b283e073","db.ts","fileId","8ade08fc-afb2-11f1-8e1c-1607ee4eb77e","parentId","3b059627-8b90-4bc3-aa9f-68c1803f7f50","branchId","2b7f7d5b-efff-44e5-9962-373315ac0749","branchVersion",27,"latest",true,"createdAt",["D",1789333870539],1,"fileType","script","content","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { isPerson, type Person } from \"../shared/people.ts\";\nimport { type Item, keyOf, type Op, SHOPPING_TTL_MS, type Shopping, type State } from \"../shared/types.ts\";\n\nconst ITEMS = \"zakupy_items\";\nconst HISTORY = \"zakupy_history\";\nconst SHOPPING = \"zakupy_shopping\";\nconst PUSH = \"zakupy_push\";\nconst LOGIN_FAILS = \"zakupy_login_fails\";\n\nconst DAY_MS = 24 * 60 * 60 * 1000;\n\n// What applying ops changed, used to decide who gets a notification\nexport interface Effects {\n added: { by: Person; name: string }[];\n startedShopping: Person[];\n}\n\nexport interface PushSubscriptionRow {\n endpoint: string;\n p256dh: string;\n auth: string;\n}\n\nexport async function initDb() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS ${ITEMS} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n uid TEXT,\n name TEXT NOT NULL,\n name_key TEXT NOT NULL,\n added_by TEXT NOT NULL,\n created_at INTEGER NOT NULL,\n bought_by TEXT,\n bought_at INTEGER\n )`,\n args: [],\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS ${HISTORY} (\n name_key TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n uses INTEGER NOT NULL DEFAULT 0,\n last_at INTEGER NOT NULL\n )`,\n args: [],\n },\n { sql: `CREATE TABLE IF NOT EXISTS ${SHOPPING} (person TEXT PRIMARY KEY, since INTEGER)`, args: [] },\n {\n sql: `CREATE TABLE IF NOT EXISTS ${PUSH} (\n endpoint TEXT PRIMARY KEY,\n person TEXT NOT NULL,\n p256dh TEXT NOT NULL,\n auth TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n args: [],\n },\n { sql: `CREATE TABLE IF NOT EXISTS ${LOGIN_FAILS} (ip TEXT NOT NULL, at INTEGER NOT NULL)`, args: [] },\n ]);\n\n // The first version addressed items by numeric id; give those rows stable uids\n try {\n await sqlite.execute(`ALTER TABLE ${ITEMS} ADD COLUMN uid TEXT`);\n } catch {\n // column already exists\n }\n await sqlite.batch([\n { sql: `UPDATE ${ITEMS} SET uid = 'legacy-' || id WHERE uid IS NULL`, args: [] },\n { sql: `CREATE UNIQUE INDEX IF NOT EXISTS zakupy_items_uid ON ${ITEMS} (uid)`, args: [] },\n ]);\n}\n\n// ---------- list state ----------\n\nfunction toItem(r: Record): Item {\n return {\n uid: String(r.uid),\n name: String(r.name),\n added_by: r.added_by as Person,\n created_at: Number(r.created_at),\n bought_by: (r.bought_by ?? null) as Person | null,\n bought_at: r.bought_at == null ? null : Number(r.bought_at),\n };\n}\n\nasync function listItems(): Promise {\n const { rows } = await sqlite.execute(\n `SELECT uid, name, added_by, created_at, bought_by, bought_at FROM ${ITEMS} ORDER BY created_at, id`,\n );\n return rows.map(toItem);\n}\n\n// Most frequently added products, used for quick-add suggestions\nasync function listHistory(): Promise {\n const { rows } = await sqlite.execute(\n `SELECT name FROM ${HISTORY} ORDER BY uses DESC, last_at DESC LIMIT 60`,\n );\n return rows.map((r) => String(r.name));\n}\n\nexport async function getShopping(): Promise {\n const { rows } = await sqlite.execute(`SELECT person, since FROM ${SHOPPING}`);\n const cutoff = Date.now() - SHOPPING_TTL_MS;\n const shopping: Shopping = { Aga: null, Dominik: null };\n for (const r of rows) {\n const since = r.since == null ? null : Number(r.since);\n if (isPerson(r.person) && since != null && since > cutoff) shopping[r.person] = since;\n }\n return shopping;\n}\n\nexport async function getState(): Promise {\n const [items, history, shopping] = await Promise.all([listItems(), listHistory(), getShopping()]);\n return { items, history, shopping };\n}\n\n// Names still on the list that a person added since a moment in time\nexport async function namesAddedSince(by: Person, since: number): Promise {\n const { rows } = await sqlite.execute({\n sql: `SELECT name FROM ${ITEMS} WHERE added_by = ? AND created_at >= ? AND bought_at IS NULL\n ORDER BY created_at LIMIT 10`,\n args: [by, since],\n });\n return rows.map((r) => String(r.name));\n}\n\n// ---------- ops ----------\n\nexport async function applyOps(ops: Op[]): Promise {\n const effects: Effects = { added: [], startedShopping: [] };\n const now = Date.now();\n\n for (const op of ops) {\n // client clocks can be off; keep timestamps within a sane range\n const at = Math.min(Math.max(op.at, now - 30 * DAY_MS), now);\n\n switch (op.type) {\n case \"add\": {\n const key = keyOf(op.name);\n const { rows } = await sqlite.execute({\n sql: `SELECT uid, bought_at FROM ${ITEMS} WHERE uid = ? OR name_key = ? LIMIT 2`,\n args: [op.uid, key],\n });\n if (rows.some((r) => r.uid === op.uid)) break; // retried request\n const history = {\n sql: `INSERT INTO ${HISTORY} (name_key, name, uses, last_at) VALUES (?, ?, 1, ?)\n ON CONFLICT(name_key) DO UPDATE SET uses = uses + 1, name = excluded.name, last_at = excluded.last_at`,\n args: [key, op.name, at],\n };\n const existing = rows[0];\n if (existing) {\n // already on the list: no duplicate, just bring it back if it was bought\n await sqlite.batch([\n {\n sql: `UPDATE ${ITEMS} SET bought_by = NULL, bought_at = NULL WHERE uid = ?`,\n args: [String(existing.uid)],\n },\n history,\n ]);\n if (existing.bought_at != null) effects.added.push({ by: op.by, name: op.name });\n } else {\n await sqlite.batch([\n {\n sql: `INSERT INTO ${ITEMS} (uid, name, name_key, added_by, created_at) VALUES (?, ?, ?, ?, ?)`,\n args: [op.uid, op.name, key, op.by, at],\n },\n history,\n ]);\n effects.added.push({ by: op.by, name: op.name });\n }\n break;\n }\n\n case \"set_bought\":\n await sqlite.execute({\n sql: `UPDATE ${ITEMS} SET bought_by = ?, bought_at = ? WHERE uid = ?`,\n args: op.bought ? [op.by, at, op.uid] : [null, null, op.uid],\n });\n break;\n\n case \"delete\":\n if (op.uids.length === 0) break;\n await sqlite.execute({\n sql: `DELETE FROM ${ITEMS} WHERE uid IN (${op.uids.map(() => \"?\").join(\", \")})`,\n args: op.uids,\n });\n break;\n\n case \"shopping\":\n if (op.on) {\n if (at < now - SHOPPING_TTL_MS) break; // queued offline so long ago it no longer applies\n const current = await getShopping();\n await sqlite.execute({\n sql: `INSERT INTO ${SHOPPING} (person, since) VALUES (?, ?)\n ON CONFLICT(person) DO UPDATE SET since = excluded.since`,\n args: [op.by, at],\n });\n if (current[op.by] == null) effects.startedShopping.push(op.by);\n } else {\n await sqlite.execute({\n sql: `UPDATE ${SHOPPING} SET since = NULL WHERE person = ?`,\n args: [op.by],\n });\n }\n break;\n }\n }\n\n return effects;\n}\n\n// ---------- push subscriptions ----------\n\nexport async function saveSubscription(endpoint: string, p256dh: string, auth: string, person: Person) {\n await sqlite.execute({\n sql: `INSERT INTO ${PUSH} (endpoint, person, p256dh, auth, created_at) VALUES (?, ?, ?, ?, ?)\n ON CONFLICT(endpoint) DO UPDATE SET person = excluded.person, p256dh = excluded.p256dh, auth = excluded.auth`,\n args: [endpoint, person, p256dh, auth, Date.now()],\n });\n}\n\nexport async function deleteSubscription(endpoint: string) {\n await sqlite.execute({ sql: `DELETE FROM ${PUSH} WHERE endpoint = ?`, args: [endpoint] });\n}\n\nexport async function subscriptionsFor(people: Person[]): Promise {\n if (people.length === 0) return [];\n const { rows } = await sqlite.execute({\n sql: `SELECT endpoint, p256dh, auth FROM ${PUSH} WHERE person IN (${people.map(() => \"?\").join(\", \")})`,\n args: people,\n });\n return rows.map((r) => ({ endpoint: String(r.endpoint), p256dh: String(r.p256dh), auth: String(r.auth) }));\n}\n\n// ---------- PIN attempts ----------\n\nexport async function countLoginFails(ip: string, since: number) {\n const { rows } = await sqlite.execute({\n sql: `SELECT COUNT(*) AS total, COALESCE(SUM(CASE WHEN ip = ? THEN 1 ELSE 0 END), 0) AS mine\n FROM ${LOGIN_FAILS} WHERE at >= ?`,\n args: [ip, since],\n });\n return { total: Number(rows[0]?.total ?? 0), mine: Number(rows[0]?.mine ?? 0) };\n}\n\nexport async function recordLoginFail(ip: string) {\n const now = Date.now();\n await sqlite.batch([\n { sql: `DELETE FROM ${LOGIN_FAILS} WHERE at < ?`, args: [now - DAY_MS] },\n { sql: `INSERT INTO ${LOGIN_FAILS} (ip, at) VALUES (?, ?)`, args: [ip, now] },\n ]);\n}\n\nexport async function clearLoginFails(ip: string) {\n await sqlite.execute({ sql: `DELETE FROM ${LOGIN_FAILS} WHERE ip = ?`, args: [ip] });\n}\n","deleted",false,"label",[57,35],"backend",{"_33":289,"_13":57,"_36":39,"_38":-5,"_40":41,"_42":171,"_44":45,"_46":290,"_17":86,"_49":94,"_51":-5,"_53":54,"_55":-5,"_71":291,"_18":292},{"_33":113,"_13":114,"_36":115,"_38":-5,"_40":41,"_42":48,"_44":45,"_46":116,"_17":86,"_49":94,"_51":-5,"_53":54,"_55":-5,"_71":117,"_18":118},{"_33":90,"_13":91,"_36":92,"_38":-5,"_40":41,"_42":78,"_44":45,"_46":93,"_17":86,"_49":94,"_51":-5,"_53":54,"_55":-5,"_71":95,"_18":96},{"_33":82,"_13":83,"_36":84,"_38":-5,"_40":41,"_42":48,"_44":45,"_46":85,"_17":86,"_49":24,"_51":87,"_53":54,"_55":-5,"_71":88,"_18":89},{"_33":74,"_13":75,"_36":76,"_38":-5,"_40":41,"_42":43,"_44":45,"_46":77,"_17":78,"_49":24,"_51":79,"_53":54,"_55":-5,"_71":80,"_18":81},{"_33":64,"_13":65,"_36":66,"_38":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":68,"_49":69,"_51":70,"_53":54,"_55":-5,"_71":72,"_18":73},"6f33b684-bb7c-4eb0-a541-0dfe822a393d","index.ts","01a09c76-d795-72a1-be82-f37a11bb083f",["D",1789333870539],8,"http","import { immutableFileUrl, readFile, serveFile, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { login, requireSession } from \"./backend/auth.ts\";\nimport { applyOps, getState, initDb, saveSubscription } from \"./backend/db.ts\";\nimport { ICONS } from \"./backend/icons.ts\";\nimport { parseOps } from \"./backend/ops.ts\";\nimport { notifyEffects } from \"./backend/push.ts\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { isPerson } from \"./shared/people.ts\";\nimport type { State } from \"./shared/types.ts\";\n\nawait initDb();\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\napp.get(\"/favicon.svg\", () => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\napp.get(\"/icons/:name\", (c) => {\n const base64 = ICONS[c.req.param(\"name\")];\n if (!base64) return c.notFound();\n const bytes = Uint8Array.from(atob(base64), (ch) => ch.charCodeAt(0));\n return c.body(bytes, 200, { \"Content-Type\": \"image/png\", \"Cache-Control\": \"public, max-age=604800\" });\n});\n\n// Lets the list be installed on the phone's home screen\napp.get(\"/manifest.webmanifest\", (c) =>\n c.json({\n name: \"Zakupy\",\n short_name: \"Zakupy\",\n lang: \"pl\",\n start_url: \"/\",\n display: \"standalone\",\n // dark by default: a dark status bar keeps the clock readable in both themes;\n // once the page loads, its theme-color meta follows the system theme\n theme_color: \"#0e1411\",\n background_color: \"#0e1411\",\n icons: [\n { src: \"/icons/icon-192.png\", sizes: \"192x192\", type: \"image/png\" },\n { src: \"/icons/icon-512.png\", sizes: \"512x512\", type: \"image/png\" },\n { src: \"/icons/icon-maskable-512.png\", sizes: \"512x512\", type: \"image/png\", purpose: \"maskable\" },\n ],\n }, 200, { \"Content-Type\": \"application/manifest+json\" }));\n\n// The service worker has to be served from the root to control the whole app.\n// The version stamp changes its bytes on every deploy, so phones pick up updates.\napp.get(\"/sw.js\", async (c) => {\n const source = await readFile(\"/frontend/sw.js\", import.meta.url);\n const version = immutableFileUrl(\"/frontend/sw.js\").split(\"/\")[2];\n return c.body(`const VERSION = ${JSON.stringify(version)};\\n${source}`, 200, {\n \"Content-Type\": \"text/javascript; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n });\n});\n\n// ---------- API ----------\n\napp.post(\"/api/login\", login);\napp.use(\"/api/*\", requireSession);\n\nconst withPushKey = (state: State) => ({ ...state, vapidPublicKey: Deno.env.get(\"VAPID_PUBLIC_KEY\") ?? null });\n\napp.get(\"/api/state\", async (c) => c.json(withPushKey(await getState())));\n\napp.post(\"/api/ops\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const ops = parseOps(body?.ops);\n if (!ops) return c.json({ error: \"Nieprawidłowe zmiany.\" }, 400);\n const effects = await applyOps(ops);\n try {\n await notifyEffects(effects);\n } catch (err) {\n // a failed notification must not make the phone resend its changes\n console.error(\"Notifications failed\", err);\n }\n return c.json(withPushKey(await getState()));\n});\n\n// Only real push services, so the server never posts to arbitrary URLs\nconst PUSH_HOST =\n /^(fcm\\.googleapis\\.com|android\\.googleapis\\.com|updates\\.push\\.services\\.mozilla\\.com|[\\w.-]+\\.push\\.apple\\.com|[\\w.-]+\\.notify\\.windows\\.com)$/;\n\napp.post(\"/api/push\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const endpoint = body?.subscription?.endpoint;\n const p256dh = body?.subscription?.keys?.p256dh;\n const auth = body?.subscription?.keys?.auth;\n let validHost = false;\n try {\n const url = new URL(endpoint);\n validHost = url.protocol === \"https:\" && PUSH_HOST.test(url.hostname);\n } catch {\n // not a URL\n }\n if (!validHost || typeof p256dh !== \"string\" || typeof auth !== \"string\" || !isPerson(body?.by)) {\n return c.json({ error: \"Nieprawidłowa subskrypcja powiadomień.\" }, 400);\n }\n await saveSubscription(endpoint, p256dh, auth, body.by);\n return c.json({ ok: true });\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[65],"83a36678-ba87-4a70-8aaa-b75c0fcc44b0","README.md","01a09c76-d794-7474-b4e3-6ff2da2d6b8a",["D",1789333870539],2,"# Zakupy — wspólna lista Agi i Dominika\n\nMobilna lista zakupów (Android, instalowana jako aplikacja) synchronizowana między telefonami.\n\n- **PIN** — lista otwiera się dopiero po wpisaniu PIN-u; telefon pamięta go przez rok od ostatniego użycia.\n- Dotknięcie produktu = kupione (przekreślenie w kolorze osoby, która kupiła).\n- **Cofnij** — usunięcie produktu lub „Usuń kupione” można cofnąć przez 5 sekund.\n- **Jestem w sklepie** — druga osoba widzi status na górze listy i dostaje powiadomienie.\n- **Powiadomienia push** — gdy ktoś jest w sklepie, a druga osoba dopisze produkty.\n- **Offline** — aplikacja startuje bez sieci, a zmiany czekają w kolejce na telefonie i wysyłają się same po powrocie połączenia.\n\n## Zmienne środowiskowe\n\n- `LISTA_PIN` — PIN do listy. Zmiana wylogowuje wszystkie telefony.\n- `SESSION_SECRET` — klucz do podpisywania ciasteczka sesji.\n- `VAPID_PUBLIC_KEY`, `VAPID_PRIVATE_KEY` — klucze Web Push. Zmiana wymaga ponownego włączenia powiadomień na telefonach.\n\n👉 Add LISTA_PIN here: https://www.val.town/x/dominik1/lista-zakupow/environment-variables?key=LISTA_PIN\n\n## Struktura\n\n- `index.ts` — serwer Hono: strona, manifest, ikony, service worker, API\n- `backend/db.ts` — SQLite (lista, historia, status zakupów, subskrypcje push, próby PIN-u)\n- `backend/auth.ts` — PIN i ciasteczko sesji\n- `backend/ops.ts` — walidacja zmian przysyłanych z telefonów\n- `backend/push.ts` — powiadomienia Web Push\n- `shared/` — typy i logika zmian wspólna dla serwera i przeglądarki\n- `frontend/sync.ts` — kolejka zmian offline i synchronizacja\n- `frontend/sw.js` — service worker (praca offline, powiadomienia)\n- `frontend/components/` — interfejs React\n",[],[75],"8dcda787-8b81-4f00-856a-887038e54765","CHANGELOG.md","01a09c76-d794-7474-b4e3-6a43e57cbd5c",["D",1789331428995],0,"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n