`, 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","frontend/components/WhoPicker.tsx","project",{"_33":328,"_13":14,"_46":329,"_330":-5,"_331":54,"_332":333,"_334":333,"_335":336,"_337":-5,"_338":339,"_340":67,"_341":45,"_342":-5,"_343":-5,"_344":87,"_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",[59,60,61,62,63,64],"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","4e234467-3a33-4f6f-acb7-4e080ce3495d","WhoPicker.tsx","fileId","9d9905f0-afb2-11f1-8e16-1607ee4eb77e","parentId","01a09c76-d794-7474-b4e3-554c0e384659","branchId","2b7f7d5b-efff-44e5-9962-373315ac0749","branchVersion",27,"latest",true,"createdAt",["D",1789333870539],1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\nimport type { Person } from \"../../shared/people.ts\";\nimport { PEOPLE } from \"../people.ts\";\nimport { Sticker } from \"./Sticker.tsx\";\n\ninterface Props {\n current: Person | null;\n onPick: (p: Person) => void;\n onClose?: () => void;\n children?: ReactNode;\n}\n\nexport function WhoPicker({ current, onPick, onClose, children }: Props) {\n return (\n

Kto korzysta z tego telefonu?

\n Wybór zostanie zapamiętany na tym urządzeniu. Zmienisz go, dotykając imienia u góry ekranu.\n

\n {PEOPLE.map((p) => (\n onPick(p)}\n >\n \n {p}\n \n ))}\n

\n {children}\n {onClose && (\n \n )}\n

\n );\n}\n","deleted",false,"label",[57,58,35],"frontend","components",{"_33":283,"_13":284,"_36":285,"_38":-5,"_40":41,"_42":171,"_44":45,"_46":286,"_17":87,"_49":95,"_51":-5,"_53":54,"_55":-5,"_72":287,"_18":288},{"_33":114,"_13":57,"_36":115,"_38":-5,"_40":41,"_42":48,"_44":45,"_46":116,"_17":87,"_49":95,"_51":-5,"_53":54,"_55":-5,"_72":117,"_18":118},{"_33":91,"_13":92,"_36":93,"_38":-5,"_40":41,"_42":79,"_44":45,"_46":94,"_17":87,"_49":95,"_51":-5,"_53":54,"_55":-5,"_72":96,"_18":97},{"_33":83,"_13":84,"_36":85,"_38":-5,"_40":41,"_42":48,"_44":45,"_46":86,"_17":87,"_49":24,"_51":88,"_53":54,"_55":-5,"_72":89,"_18":90},{"_33":75,"_13":76,"_36":77,"_38":-5,"_40":41,"_42":43,"_44":45,"_46":78,"_17":79,"_49":24,"_51":80,"_53":54,"_55":-5,"_72":81,"_18":82},{"_33":65,"_13":66,"_36":67,"_38":-5,"_40":41,"_42":43,"_44":45,"_46":68,"_17":69,"_49":70,"_51":71,"_53":54,"_55":-5,"_72":73,"_18":74},"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",[],[66],"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",[],[76],"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