Offline-first notes (idb demo)

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_240":241,"_242":243},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_182":-5,"_20":183,"_22":184,"_185":186,"_187":188,"_26":189,"_24":190,"_191":-5,"_192":-5,"_193":51,"_194":195,"_196":43,"_197":-5,"_198":-5,"_199":200},"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","nbbaier","name","idb-demo","branchName","main","version","path","README.md","project",{"_33":125,"_13":14,"_44":126,"_127":-5,"_128":51,"_129":130,"_131":130,"_132":133,"_134":-5,"_135":136,"_137":70,"_138":43,"_139":-5,"_140":-5,"_141":46,"_142":143,"_144":145,"_146":147,"_148":149,"_150":-5,"_151":152,"_153":152,"_154":155,"_156":155,"_157":155,"_158":152,"_159":152,"_160":161,"_162":163,"_164":165,"_166":51},"tree",[54,55,56,57],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","33079ccd-67d3-4542-9ad8-676e04ca6903","fileId","fc9c4b0a-a9bf-11f1-a072-1607ee4eb77e","parentId","branchId","dcfef49f-d845-444e-a67f-f09d3ad79626","branchVersion",11,"latest",true,"createdAt",["D",1788677746700],0,"fileType","content","# 📝 Offline-First Notes (idb demo)\n\nA client-side demo of **IndexedDB with usability** — the [`idb`](https://github.com/jakearchibald/idb)\nlibrary (by Jake Archibald). Notes are written straight to IndexedDB in the\nbrowser, so the app works **offline**, then a manual **Sync** pushes local\nchanges to a server and pulls anything new back.\n\n**Try it:** [https://idb-demo.val.run/](https://idb-demo.val.run/)\n\n## What it demonstrates\n\n| idb feature | Where |\n| --- | --- |\n| `openDB` schema + `upgrade` migration | `frontend/db.ts` |\n| Typed `DBSchema` autocompletion | `frontend/db.ts` |\n| Shortcut methods (`db.put`, `db.get`, `db.getAll`) | `frontend/db.ts` |\n| Indexes (`getAllFromIndex`) | `frontend/db.ts` |\n| Async iterators over a cursor `index.iterate` | `frontend/db.ts` |\n| Transaction lifetime + `tx.done` | `frontend/db.ts` (sync) |\n\nThe sync protocol is deliberately simple (teaching-grade, not production):\neach note carries `updatedAt` and a `deleted` tombstone, and merges use\n**last-write-wins**.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"idb CRUD (offline)\"| IDB[\"IndexedDB
store: notes + meta\"]\n Browser -->|\"POST /api/sync (push)\"| API[\"index.ts
Hono + SQLite\"]\n Browser -->|\"GET /api/notes?since=… (pull)\"| API\n API -->|upsert| DB[(\"SQLite
notes table\")]\n```\n\nThe same note record lives in IndexedDB (client, offline) *and* SQLite\n(server, shared) — nice symmetry for a demo.\n\n## Layout\n\n```\nindex.ts ← Hono backend: serves frontend + sync API (SQLite)\nfrontend/\n root.tsx ← HTML shell (immutable asset URLs, Twind, std/catch)\n index.ts ← client entry — vanilla DOM UI\n db.ts ← idb wrapper: schema, CRUD, sync\n favicon.svg\n```\n\n## How to demo it\n\n1. Open the app, add a few notes, then hit **✕** on one — all offline, nothing sent yet.\n2. Watch the status: **\"online / N unsynced changes\"**.\n3. Click **Sync** → the badge drops to zero and a server round-trip happens.\n4. To see the offline story for real, open DevTools → Network → **Offline**, add\n more notes (badge shows **offline**, everything still works), go back online, Sync.\n5. Open the same app in a second tab/device and Sync — changes merge over since `lastSyncAt`.\n\n## API\n\n- `GET /api/notes?since=` — pull server notes newer than `since`.\n- `POST /api/sync` — atomically upsert a batch of local notes.\n\n## Env vars\n\nNone — the SQLite database is the val's built-in project-scoped database\n(`std/sqlite/main.ts`).\n","deleted",false,"label",[19],{"_33":81,"_13":82,"_35":83,"_37":-5,"_38":39,"_40":84,"_42":43,"_44":85,"_17":46,"_47":86,"_48":-5,"_50":51,"_52":-5,"_65":87,"_18":88},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":78,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_65":79,"_18":80},{"_33":68,"_13":69,"_35":70,"_37":-5,"_38":39,"_40":71,"_42":43,"_44":72,"_17":73,"_47":74,"_48":75,"_50":51,"_52":14,"_65":76,"_18":77},{"_33":58,"_13":59,"_35":60,"_37":-5,"_38":39,"_40":61,"_42":43,"_44":62,"_17":46,"_47":63,"_48":64,"_50":51,"_52":-5,"_65":66,"_18":67},"b02fcba9-45cc-4b9d-a06d-ccf8b17442c6","main.ts","f6a5deac-a9b8-11f1-b7cf-1607ee4eb77e",1,["D",1788674730216],"script","","children",[],[59],"3e8e31ee-eafa-4a73-b8cd-911dc0654786","index.ts","01a07558-b189-763e-acb8-dac8c5ab98a7",21,["D",1788679251846],7,"http","import {\n parseVal,\n serveImmutableFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Schema is idempotent — runs on cold start.\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS notes (\n id TEXT PRIMARY KEY,\n text TEXT NOT NULL,\n updated_at INTEGER NOT NULL,\n deleted INTEGER NOT NULL DEFAULT 0\n)`);\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\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Row shape shared with the client's Note type\nfunction toNote(r: Record) {\n return {\n id: r.id as string,\n text: r.text as string,\n updatedAt: r.updated_at as number,\n deleted: !!r.deleted,\n };\n}\n\n// PULL: server rows changed since the client's last sync\napp.get(\"/api/notes\", async (c) => {\n const since = Number(c.req.query(\"since\") ?? 0);\n // Snapshot the clock BEFORE querying: any row written after this point is\n // guaranteed a timestamp strictly greater than the cursor we hand back, so\n // the next pull (updated_at > cursor) can never miss it.\n const cursor = Math.max(lastServerTs, Date.now());\n const res = await sqlite.execute({\n sql: \"SELECT * FROM notes WHERE updated_at > ? ORDER BY updated_at\",\n args: [since],\n });\n const notes = res.rows.map(toNote);\n return c.json({ notes, now: cursor });\n});\n\n// Server-authoritative clock. Client clocks can be skewed, so every stored\n// row gets its updated_at from here. Monotonic within this isolate: never\n// repeats or goes backwards, even for rapid successive writes.\nlet lastServerTs = 0;\nfunction nextServerTs(): number {\n let t = Date.now();\n if (t <= lastServerTs) t = lastServerTs + 1;\n lastServerTs = t;\n return t;\n}\n\n// PUSH: batched upserts of local changes, atomic. The client's updatedAt is\n// accepted for validation but the row is stamped with the server clock —\n// ordering of synced changes is decided by the server, not device clocks.\napp.post(\"/api/sync\", async (c) => {\n const body = await c.req.json<{\n notes: { id: string; text: string; updatedAt: number; deleted: boolean }[];\n }>();\n const incoming = body?.notes ?? [];\n for (const n of incoming) {\n if (\n !n ||\n typeof n.id !== \"string\" ||\n typeof n.text !== \"string\" ||\n typeof n.updatedAt !== \"number\"\n ) {\n return c.json({ error: \"invalid note\" }, 400);\n }\n }\n const statements = incoming.map((n) => ({\n sql: `INSERT INTO notes (id, text, updated_at, deleted) VALUES (?, ?, ?, ?)\n ON CONFLICT(id) DO UPDATE SET text = excluded.text,\n updated_at = excluded.updated_at, deleted = excluded.deleted\n WHERE excluded.updated_at > notes.updated_at`,\n args: [n.id, n.text, nextServerTs(), n.deleted ? 1 : 0],\n }));\n let applied = 0;\n if (statements.length > 0) {\n const results = await sqlite.batch(statements);\n applied = results.reduce((sum, r) => sum + r.rowsAffected, 0);\n }\n return c.json({ ok: true, applied, now: lastServerTs });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;",[],[69],["D",1788677746700],[],[19],"9cea4bd4-7948-4fd9-b028-5d3add266753","frontend","01a07558-b18a-757a-bfc1-98c496b6a60d",2,["D",1788675142029],"directory",[89,90,91,92],[82],{"_33":116,"_13":117,"_35":118,"_37":83,"_38":39,"_40":119,"_42":43,"_44":120,"_17":121,"_47":63,"_48":122,"_50":51,"_52":-5,"_65":123,"_18":124},{"_33":109,"_13":110,"_35":111,"_37":83,"_38":39,"_40":84,"_42":43,"_44":112,"_17":46,"_47":24,"_48":113,"_50":51,"_52":-5,"_65":114,"_18":115},{"_33":102,"_13":69,"_35":103,"_37":83,"_38":39,"_40":104,"_42":43,"_44":105,"_17":84,"_47":63,"_48":106,"_50":51,"_52":-5,"_65":107,"_18":108},{"_33":93,"_13":94,"_35":95,"_37":83,"_38":39,"_40":96,"_42":43,"_44":97,"_17":98,"_47":63,"_48":99,"_50":51,"_52":-5,"_65":100,"_18":101},"600eb8e0-119f-4cfb-9525-0512d31a4349","root.tsx","01a07558-b18a-757a-bfc1-9e116a2223b9",15,["D",1788678410889],3,"/** @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(\"\")}\n \n \n \n \n Offline-first notes (idb demo)\n