Offline-first notes (idb demo)

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_235":236,"_237":238},"routes/_app.x.$handle.$name",{"_106":105,"_38":52,"_114":96,"_33":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_26":-5,"_126":-5,"_127":-5,"_128":31,"_129":130,"_131":66,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":31},"version",22,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","301e97d2-fe36-4997-89fd-7fd0bf1342fe","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","frontend/db.ts","latestPath","fileId","1811265e-a9ba-11f1-9ea6-1607ee4eb77e","name","db.ts","fileType","script","content","// idb wrapper: schema, CRUD shortcuts, and offline-first sync logic.\n// All of this runs in the browser — IndexedDB is the local, offline source of truth.\n\nimport {\n type DBSchema,\n type IDBPDatabase,\n openDB,\n} from \"https://cdn.jsdelivr.net/npm/idb@8/+esm\";\n\nexport interface Note {\n id: string; // uuid, same on client & server\n text: string;\n updatedAt: number; // epoch ms, last-write-wins\n deleted: boolean; // tombstone so deletes propagate on sync\n}\n\ninterface NotesDB extends DBSchema {\n notes: {\n key: string;\n value: Note;\n indexes: { \"by-updated\": number };\n };\n meta: {\n key: string;\n value: number | string;\n };\n}\n\nconst DB_NAME = \"notes-app\";\nconst DB_VERSION = 1;\nexport const LAST_SYNC_KEY = \"lastSyncAt\";\n\nlet dbPromise: Promise> | null = null;\n\nexport function getDB() {\n if (!dbPromise) {\n dbPromise = openDB(DB_NAME, DB_VERSION, {\n upgrade(db) {\n const notes = db.createObjectStore(\"notes\", { keyPath: \"id\" });\n notes.createIndex(\"by-updated\", \"updatedAt\");\n db.createObjectStore(\"meta\");\n },\n blocked() {\n console.warn(\n \"openDB blocked: close other tabs with an older version open\",\n );\n },\n });\n }\n return dbPromise;\n}\n\n// --- CRUD (idb's shortcut methods — no manual transactions needed) ---\n\nexport async function addNote(text: string): Promise {\n const note: Note = {\n id: crypto.randomUUID(),\n text,\n updatedAt: Date.now(),\n deleted: false,\n };\n const db = await getDB();\n await db.put(\"notes\", note);\n return note;\n}\n\nexport async function updateNote(\n id: string,\n text: string,\n): Promise {\n const db = await getDB();\n const note = await db.get(\"notes\", id);\n if (!note || note.deleted) return undefined;\n note.text = text;\n note.updatedAt = Date.now();\n await db.put(\"notes\", note);\n return note;\n}\n\nexport async function deleteNote(id: string): Promise {\n const db = await getDB();\n const note = await db.get(\"notes\", id);\n if (!note) return;\n // Tombstone instead of hard delete so the delete can sync.\n note.deleted = true;\n note.updatedAt = Date.now();\n await db.put(\"notes\", note);\n}\n\nexport async function getAllNotes(): Promise {\n const db = await getDB();\n const all = await db.getAll(\"notes\");\n return all.filter((n) => !n.deleted).sort((a, b) =>\n b.updatedAt - a.updatedAt\n );\n}\n\nexport async function getPendingCount(): Promise {\n const db = await getDB();\n const since = (await db.get(\"meta\", LAST_SYNC_KEY)) as number | undefined;\n const tx = db.transaction(\"notes\");\n const index = tx.store.index(\"by-updated\");\n let count = 0;\n for await (\n const cursor of index.iterate(IDBKeyRange.lowerBound(since ?? 0, true))\n ) {\n if (!cursor.value.deleted || cursor.value.updatedAt > (since ?? 0)) count++;\n }\n return count;\n}\n\n// --- Sync ---\n\nexport async function sync(): Promise<{ pushed: number; pulled: number }> {\n const db = await getDB();\n const lastSync =\n ((await db.get(\"meta\", LAST_SYNC_KEY)) as number | undefined) ?? 0;\n\n // PUSH: everything changed since last sync. Collect first, then one\n // readwrite transaction — never await a fetch while a transaction is open\n // (it would auto-close mid-flight; see the idb README's transaction lifetime note).\n const toPush = (await db.getAllFromIndex(\n \"notes\",\n \"by-updated\",\n IDBKeyRange.lowerBound(lastSync, true),\n ))\n .filter((n) => !n.deleted || n.updatedAt > lastSync);\n\n let pushed = 0;\n if (toPush.length > 0) {\n const res = await fetch(\"/api/sync\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ notes: toPush, since: lastSync }),\n });\n if (!res.ok) throw new Error(`push failed: ${res.status}`);\n pushed = toPush.length;\n }\n\n // PULL: server rows changed since our last sync; merge last-write-wins.\n const pullRes = await fetch(`/api/notes?since=${lastSync}`);\n if (!pullRes.ok) throw new Error(`pull failed: ${pullRes.status}`);\n const { notes: serverNotes, now } = (await pullRes.json()) as {\n notes: Note[];\n now: number;\n };\n\n let pulled = 0;\n if (serverNotes.length > 0) {\n const tx = db.transaction(\"notes\", \"readwrite\");\n await Promise.all(\n serverNotes.map(async (server) => {\n const local = await tx.store.get(server.id);\n // server wins only if strictly newer, or local is absent\n if (!local || server.updatedAt > local.updatedAt) {\n await tx.store.put(server);\n pulled++;\n }\n }),\n );\n await tx.done;\n }\n\n // Record the sync point in the meta store.\n await db.put(\"meta\", now, LAST_SYNC_KEY);\n return { pushed, pulled };\n}","// idb wrapper: schema, CRUD shortcuts, and offline-first sync logic.\n// All of this runs in the browser — IndexedDB is the local, offline source of truth.\n\nimport {\n type DBSchema,\n type IDBPDatabase,\n openDB,\n} from \"https://cdn.jsdelivr.net/npm/idb@8/+esm\";\n\nexport interface Note {\n id: string; // uuid, same on client & server\n text: string;\n updatedAt: number; // epoch ms, last-write-wins\n deleted: boolean; // tombstone so deletes propagate on sync\n}\n\ninterface NotesDB extends DBSchema {\n notes: {\n key: string;\n value: Note;\n indexes: { \"by-updated\": number };\n };\n meta: {\n key: string;\n value: number | string;\n };\n}\n\nconst DB_NAME = \"notes-app\";\nconst DB_VERSION = 1;\nexport const LAST_SYNC_KEY = \"lastSyncAt\";\n\nlet dbPromise: Promise> | null = null;\n\nexport function getDB() {\n if (!dbPromise) {\n dbPromise = openDB(DB_NAME, DB_VERSION, {\n upgrade(db) {\n const notes = db.createObjectStore(\"notes\", { keyPath: \"id\" });\n notes.createIndex(\"by-updated\", \"updatedAt\");\n db.createObjectStore(\"meta\");\n },\n blocked() {\n console.warn(\n \"openDB blocked: close other tabs with an older version open\",\n );\n },\n });\n }\n return dbPromise;\n}\n\n// --- CRUD (idb's shortcut methods — no manual transactions needed) ---\n\nexport async function addNote(text: string): Promise {\n const note: Note = {\n id: crypto.randomUUID(),\n text,\n updatedAt: Date.now(),\n deleted: false,\n };\n const db = await getDB();\n await db.put(\"notes\", note);\n return note;\n}\n\nexport async function updateNote(\n id: string,\n text: string,\n): Promise {\n const db = await getDB();\n const note = await db.get(\"notes\", id);\n if (!note || note.deleted) return undefined;\n note.text = text;\n note.updatedAt = Date.now();\n await db.put(\"notes\", note);\n return note;\n}\n\nexport async function deleteNote(id: string): Promise {\n const db = await getDB();\n const note = await db.get(\"notes\", id);\n if (!note) return;\n // Tombstone instead of hard delete so the delete can sync.\n note.deleted = true;\n note.updatedAt = Date.now();\n await db.put(\"notes\", note);\n}\n\nexport async function getAllNotes(): Promise {\n const db = await getDB();\n const all = await db.getAll(\"notes\");\n return all.filter((n) => !n.deleted).sort((a, b) =>\n b.updatedAt - a.updatedAt\n );\n}\n\nexport async function getPendingCount(): Promise {\n const db = await getDB();\n const since = (await db.get(\"meta\", LAST_SYNC_KEY)) as number | undefined;\n const tx = db.transaction(\"notes\");\n const index = tx.store.index(\"by-updated\");\n let count = 0;\n for await (\n const cursor of index.iterate(IDBKeyRange.lowerBound(since ?? 0, true))\n ) {\n if (!cursor.value.deleted || cursor.value.updatedAt > (since ?? 0)) count++;\n }\n return count;\n}\n\n// --- Sync ---\n\nexport async function sync(): Promise<{ pushed: number; pulled: number }> {\n const db = await getDB();\n const lastSync =\n ((await db.get(\"meta\", LAST_SYNC_KEY)) as number | undefined) ?? 0;\n\n // PUSH: everything changed since last sync. Collect first, then one\n // readwrite transaction — never await a fetch while a transaction is open\n // (it would auto-close mid-flight; see the idb README's transaction lifetime note).\n const toPush = (await db.getAllFromIndex(\n \"notes\",\n \"by-updated\",\n IDBKeyRange.lowerBound(lastSync, true),\n ))\n .filter((n) => !n.deleted || n.updatedAt > lastSync);\n\n let pushed = 0;\n if (toPush.length > 0) {\n const res = await fetch(\"/api/sync\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ notes: toPush, since: lastSync }),\n });\n if (!res.ok) throw new Error(`push failed: ${res.status}`);\n pushed = toPush.length;\n }\n\n // PULL: server rows changed since our last sync; merge last-write-wins.\n const pullRes = await fetch(`/api/notes?since=${lastSync}`);\n if (!pullRes.ok) throw new Error(`pull failed: ${pullRes.status}`);\n const { notes: serverNotes, now } = (await pullRes.json()) as {\n notes: Note[];\n now: number;\n };\n\n let pulled = 0;\n if (serverNotes.length > 0) {\n const tx = db.transaction(\"notes\", \"readwrite\");\n await Promise.all(\n serverNotes.map(async (server) => {\n const local = await tx.store.get(server.id);\n // Server rows carry server-clock timestamps, so trust them on ties\n // too (>=): anything we just pushed in this same sync comes back with\n // its authoritative server timestamp, reconciling our local copy and\n // immune to device clock skew.\n if (!local || server.updatedAt >= local.updatedAt) {\n await tx.store.put(server);\n pulled++;\n }\n }),\n );\n await tx.done;\n }\n\n // Record the sync point in the meta store.\n await db.put(\"meta\", now, LAST_SYNC_KEY);\n return { pushed, pulled };\n}","createdAt",["D",1788679265204],"branchVersion","branchId","dcfef49f-d845-444e-a67f-f09d3ad79626","id","562ec6ce-e2cf-4f4d-b6c3-1d4dec8138d7","idb-demo",["D",1788674730176],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Offline-first notes demo — IndexedDB via idb, synced to SQLite","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","01a07558-b189-763e-acb8-dac8c5ab98a7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","562ec6cee2cf4f4db6c31d4dec8138d7","tursoHostname","562ec6cee2cf4f4db6c31d4dec8138d7-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789456888508],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_19":62,"_110":111,"_112":31},"branch",{"_13":14,"_38":96,"_50":49,"_97":51,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":52,"_104":105},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_50":51,"_38":52,"_45":230,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":231,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":232,"_91":233,"_93":234,"_95":31},"tree",[181,186,187,188],"files",[181,182,183,184,185,186,187,188],"counts",{"_171":70,"_172":144,"_173":70,"_174":175,"_176":177},"contents",[136,137,138,139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":164,"_38":165,"_36":166,"_143":-5,"_48":49,"_47":167,"_145":66,"_45":168,"_13":70,"_40":169,"_42":-5,"_30":31,"_147":-5,"_33":170},{"_50":157,"_38":158,"_36":159,"_143":-5,"_48":49,"_47":160,"_145":66,"_45":161,"_13":70,"_40":26,"_42":162,"_30":31,"_147":-5,"_33":163},{"_50":149,"_38":150,"_36":64,"_143":-5,"_48":49,"_47":151,"_145":66,"_45":152,"_13":153,"_40":154,"_42":155,"_30":31,"_147":52,"_33":156},{"_50":140,"_38":141,"_36":142,"_143":-5,"_48":49,"_47":144,"_145":66,"_45":146,"_13":70,"_40":41,"_42":115,"_30":31,"_147":-5,"_33":148},"b02fcba9-45cc-4b9d-a06d-ccf8b17442c6","main.ts","f6a5deac-a9b8-11f1-b7cf-1607ee4eb77e","parentId",1,"latest",["D",1788674730216],"label",[141],"3e8e31ee-eafa-4a73-b8cd-911dc0654786","index.ts",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;",[150],"33079ccd-67d3-4542-9ad8-676e04ca6903","README.md","fc9c4b0a-a9bf-11f1-a072-1607ee4eb77e",11,["D",1788677746700],"# 📝 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",[158],"9cea4bd4-7948-4fd9-b028-5d3add266753","frontend","01a07558-b18a-757a-bfc1-98c496b6a60d",2,["D",1788675142029],"directory",[165],"pulls","branches","forks","envVars",{"_178":70,"_180":70},"connections",{"_178":70,"_179":70},"count","unfilledCount","emptyCount",{"_50":164,"_38":165,"_36":166,"_143":-5,"_48":49,"_47":167,"_145":66,"_45":227,"_13":70,"_40":169,"_42":-5,"_30":31,"_147":-5,"_190":228,"_33":229},{"_50":222,"_38":39,"_36":37,"_143":166,"_48":49,"_47":14,"_145":66,"_45":223,"_13":224,"_40":41,"_42":44,"_30":31,"_147":-5,"_190":225,"_33":226},{"_50":215,"_38":216,"_36":217,"_143":166,"_48":49,"_47":167,"_145":66,"_45":218,"_13":70,"_40":26,"_42":219,"_30":31,"_147":-5,"_190":220,"_33":221},{"_50":208,"_38":150,"_36":209,"_143":166,"_48":49,"_47":210,"_145":66,"_45":211,"_13":167,"_40":41,"_42":212,"_30":31,"_147":-5,"_190":213,"_33":214},{"_50":199,"_38":200,"_36":201,"_143":166,"_48":49,"_47":202,"_145":66,"_45":203,"_13":204,"_40":41,"_42":205,"_30":31,"_147":-5,"_190":206,"_33":207},{"_50":157,"_38":158,"_36":159,"_143":-5,"_48":49,"_47":160,"_145":66,"_45":196,"_13":70,"_40":26,"_42":162,"_30":31,"_147":-5,"_190":197,"_33":198},{"_50":149,"_38":150,"_36":64,"_143":-5,"_48":49,"_47":151,"_145":66,"_45":193,"_13":153,"_40":154,"_42":155,"_30":31,"_147":52,"_190":194,"_33":195},{"_50":140,"_38":141,"_36":142,"_143":-5,"_48":49,"_47":144,"_145":66,"_45":189,"_13":70,"_40":41,"_42":115,"_30":31,"_147":-5,"_190":191,"_33":192},["D",1788674730216],"children",[],[141],["D",1788679251846],[],[150],["D",1788677746700],[],[158],"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

Diff · v22