[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_311":312,"_313":314},"routes/_app.x.$handle.$name",{"_111":110,"_38":51,"_120":97,"_33":121,"_13":14,"_122":-5,"_11":123,"_124":125,"_126":127,"_128":129,"_130":131,"_26":-5,"_132":133,"_134":135,"_136":31,"_137":138,"_139":66,"_140":-5,"_141":-5,"_142":143},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":61,"_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",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","3b279cda-4bf7-49a0-b93a-fb2b4500c867","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":26,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":39,"_40":26,"_41":42},"deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","019f76c9-48ec-747c-8230-3664e187b632","name","index.html","fileType","content","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n","\n\n \n \n \n Todos\n \n \n \n \n

\n \n \n \n","createdAt",["D",1784404418940],"branchVersion","branchId","a232f2f5-e74e-4b08-815d-f2388bec3492","id","96de70b5-cf69-4373-88be-fba56284d53f","todo-app",["D",1784404330602],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Production-ready todo app with React + Hono + SQLite","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789559999&sig=919739a563bb9acb90fc6bc4f6c1789207958a7e1bd397d82b192d76e7e11de2","23d6c179-74ab-40bf-910d-c9f38f237b3e","pinnedFileId","019f76c9-48ec-747c-8230-47d98cf8330e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f76c7-863b-76f6-960c-e9095bbf0cf4","tursoName","96de70b5cf69437388befba56284d53f","tursoHostname","96de70b5cf69437388befba56284d53f-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789472446807],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_111":110,"_119":115},"org",{"_111":110,"_112":113,"_114":115,"_19":62,"_116":117,"_118":31},"branch",{"_13":96,"_38":97,"_49":48,"_98":50,"_99":100,"_101":102,"_103":56,"_104":105,"_106":107,"_108":51,"_109":110},"isOwned",10,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","sammitbadodekar","handle","displayName","Sammit Badodekar","avatar","https://lh3.googleusercontent.com/a/ACg8ocIQo7pgMGin8u5Xt1nd4WrJ3iSmUTsxwqbXj1smuSwPDnHPDUXn=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":306,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":61,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":307,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":308,"_91":309,"_93":310,"_95":31},"tree",[205,207,216,218,219],"files",[205,206,207,208,209,210,211,212,213,214,215,216,217,218,219],"counts",{"_195":70,"_196":166,"_197":70,"_198":199,"_200":201},"contents",[155,156,157,158,159],"upstreamProject",{"_49":105,"_38":151,"_58":152,"_60":61,"_55":56,"_89":153},"upstreamBranch",{"_49":100,"_44":144,"_145":146,"_38":97,"_98":105,"_13":147,"_99":-5,"_101":-5,"_148":149,"_53":-5,"_95":31,"_55":56,"_109":150,"_71":107,"_108":151},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_111":150,"_119":154},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789559999&sig=5c07b77d973a9a7831cc1779f4bd4ec152796753863d0aeae4088e1e0ae03921",{"_49":189,"_38":190,"_36":191,"_162":-5,"_47":48,"_46":192,"_164":66,"_44":193,"_13":70,"_40":182,"_41":-5,"_30":31,"_169":-5,"_33":194},{"_49":184,"_38":185,"_36":186,"_162":-5,"_47":48,"_46":166,"_164":66,"_44":187,"_13":70,"_40":182,"_41":-5,"_30":31,"_169":-5,"_33":188},{"_49":177,"_38":178,"_36":179,"_162":-5,"_47":48,"_46":180,"_164":66,"_44":181,"_13":70,"_40":182,"_41":-5,"_30":31,"_169":-5,"_33":183},{"_49":171,"_38":172,"_36":173,"_162":-5,"_47":48,"_46":166,"_164":31,"_44":174,"_13":70,"_40":26,"_41":175,"_30":31,"_169":-5,"_33":176},{"_49":160,"_38":161,"_36":64,"_162":-5,"_47":48,"_46":163,"_164":66,"_44":165,"_13":166,"_40":167,"_41":168,"_30":31,"_169":-5,"_33":170},"6fc46c5f-7704-4ab3-b6d7-b36618fbf576","index.ts","parentId",4,"latest",["D",1784404372218],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport * as db from \"./backend/db.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// Serve shared types for the frontend\napp.get(\"/shared/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ---- Todos API ----\n\nconst MAX_TEXT_LENGTH = 500;\n\nfunction validateText(text: unknown): string | null {\n if (typeof text !== \"string\") return null;\n const trimmed = text.trim();\n if (trimmed.length === 0 || trimmed.length > MAX_TEXT_LENGTH) return null;\n return trimmed;\n}\n\nfunction parseId(raw: string): number | null {\n const id = Number(raw);\n return Number.isInteger(id) && id > 0 ? id : null;\n}\n\napp.get(\"/api/todos\", async (c) => {\n const todos = await db.listTodos();\n return c.json(todos);\n});\n\napp.post(\"/api/todos\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const text = validateText(body?.text);\n if (!text) {\n return c.json(\n { error: `text is required (1-${MAX_TEXT_LENGTH} chars)` },\n 400,\n );\n }\n const todo = await db.createTodo(text);\n return c.json(todo, 201);\n});\n\napp.patch(\"/api/todos/:id\", async (c) => {\n const id = parseId(c.req.param(\"id\"));\n if (!id) return c.json({ error: \"invalid id\" }, 400);\n\n const body = await c.req.json().catch(() => null);\n if (!body || typeof body !== \"object\") {\n return c.json({ error: \"invalid body\" }, 400);\n }\n\n const fields: { text?: string; completed?: boolean } = {};\n if (\"text\" in body) {\n const text = validateText(body.text);\n if (!text) {\n return c.json(\n { error: `text must be 1-${MAX_TEXT_LENGTH} chars` },\n 400,\n );\n }\n fields.text = text;\n }\n if (\"completed\" in body) {\n if (typeof body.completed !== \"boolean\") {\n return c.json({ error: \"completed must be a boolean\" }, 400);\n }\n fields.completed = body.completed;\n }\n\n const todo = await db.updateTodo(id, fields);\n if (!todo) return c.json({ error: \"todo not found\" }, 404);\n return c.json(todo);\n});\n\napp.delete(\"/api/todos/:id\", async (c) => {\n const id = parseId(c.req.param(\"id\"));\n if (!id) return c.json({ error: \"invalid id\" }, 400);\n const deleted = await db.deleteTodo(id);\n if (!deleted) return c.json({ error: \"todo not found\" }, 404);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/todos/clear-completed\", async (c) => {\n const cleared = await db.clearCompleted();\n return c.json({ cleared });\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","label",[161],"9a64e876-ea28-40e4-adbe-defeac61d38c","README.md","019f76c9-48ec-747c-8230-43f68aa2cb1a",["D",1784404330602],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[172],"3be65090-91e1-4d70-9ae5-c96d783baa9b","shared","328bcb98-fcc7-4755-a03b-b14a85ac6061",2,["D",1784404344892],"directory",[178],"89f3b209-221b-44b6-ab94-610eff048f3e","frontend","019f76c9-48ec-747c-8230-3feb2342c717",["D",1784404330602],[185],"e0f9aee7-2e17-4ac4-bd25-dd16ba86c183","backend","bae2d9a3-6411-466b-a8b2-8da9bfef0d43",3,["D",1784404353689],[190],"pulls","branches","forks","envVars",{"_202":70,"_204":70},"connections",{"_202":70,"_203":70},"count","unfilledCount","emptyCount",{"_49":189,"_38":190,"_36":191,"_162":-5,"_47":48,"_46":192,"_164":66,"_44":303,"_13":70,"_40":182,"_41":-5,"_30":31,"_169":-5,"_221":304,"_33":305},{"_49":296,"_38":297,"_36":298,"_162":191,"_47":48,"_46":192,"_164":66,"_44":299,"_13":70,"_40":231,"_41":300,"_30":31,"_169":-5,"_221":301,"_33":302},{"_49":184,"_38":185,"_36":186,"_162":-5,"_47":48,"_46":166,"_164":66,"_44":293,"_13":70,"_40":182,"_41":-5,"_30":31,"_169":-5,"_221":294,"_33":295},{"_49":289,"_38":265,"_36":259,"_162":186,"_47":48,"_46":166,"_164":66,"_44":290,"_13":70,"_40":182,"_41":-5,"_30":31,"_169":-5,"_221":291,"_33":292},{"_49":281,"_38":282,"_36":283,"_162":259,"_47":48,"_46":284,"_164":66,"_44":285,"_13":166,"_40":231,"_41":286,"_30":31,"_169":-5,"_221":287,"_33":288},{"_49":274,"_38":275,"_36":276,"_162":259,"_47":48,"_46":166,"_164":31,"_44":277,"_13":70,"_40":231,"_41":278,"_30":31,"_169":-5,"_221":279,"_33":280},{"_49":266,"_38":267,"_36":268,"_162":259,"_47":48,"_46":269,"_164":66,"_44":270,"_13":70,"_40":231,"_41":271,"_30":31,"_169":-5,"_221":272,"_33":273},{"_49":256,"_38":257,"_36":258,"_162":259,"_47":48,"_46":260,"_164":66,"_44":261,"_13":70,"_40":231,"_41":262,"_30":31,"_169":-5,"_221":263,"_33":264},{"_49":249,"_38":250,"_36":251,"_162":186,"_47":48,"_46":166,"_164":66,"_44":252,"_13":70,"_40":26,"_41":253,"_30":31,"_169":-5,"_221":254,"_33":255},{"_49":245,"_38":39,"_36":37,"_162":186,"_47":48,"_46":14,"_164":66,"_44":246,"_13":166,"_40":26,"_41":43,"_30":31,"_169":-5,"_221":247,"_33":248},{"_49":238,"_38":239,"_36":240,"_162":186,"_47":48,"_46":166,"_164":66,"_44":241,"_13":70,"_40":231,"_41":242,"_30":31,"_169":-5,"_221":243,"_33":244},{"_49":177,"_38":178,"_36":179,"_162":-5,"_47":48,"_46":180,"_164":66,"_44":235,"_13":70,"_40":182,"_41":-5,"_30":31,"_169":-5,"_221":236,"_33":237},{"_49":227,"_38":228,"_36":229,"_162":179,"_47":48,"_46":180,"_164":66,"_44":230,"_13":70,"_40":231,"_41":232,"_30":31,"_169":-5,"_221":233,"_33":234},{"_49":171,"_38":172,"_36":173,"_162":-5,"_47":48,"_46":166,"_164":31,"_44":224,"_13":70,"_40":26,"_41":175,"_30":31,"_169":-5,"_221":225,"_33":226},{"_49":160,"_38":161,"_36":64,"_162":-5,"_47":48,"_46":163,"_164":66,"_44":220,"_13":166,"_40":167,"_41":168,"_30":31,"_169":-5,"_221":222,"_33":223},["D",1784404372218],"children",[],[161],["D",1784404330602],[],[172],"134e0c1a-5bfe-40c2-9bf5-2b750d398217","types.ts","32a3c1ce-82e2-11f1-9ce7-1607ee4eb77e",["D",1784404344892],"script","export interface Todo {\n id: number;\n text: string;\n completed: boolean;\n createdAt: string;\n}\n\nexport type Filter = \"all\" | \"active\" | \"completed\";\n",[],[178,228],["D",1784404344892],[217],[178],"197d34ae-8cac-4cc6-87e5-b3388ea9a01e","index.tsx","019f76c9-48ec-747c-8230-38243d5ac0dc",["D",1784404330602],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[185,239],"49e20246-bd39-4f5d-8e8d-fa2976543ef8",["D",1784404418940],[],[185,39],"034b04ff-51bf-42d5-a1ad-e1c7d334e8b0","favicon.svg","019f76c9-48ec-747c-8230-30a96bf481c2",["D",1784404330602],"\n",[],[185,250],"92c760e2-8423-4a18-9a9e-5db1a68d10b2","TodoItem.tsx","4ff57344-82e2-11f1-8733-1607ee4eb77e","019f76c9-48ec-747c-8230-2dcaac3b7e51",6,["D",1784404394083],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Todo } from \"../../shared/types.ts\";\n\ninterface Props {\n todo: Todo;\n onToggle: (todo: Todo) => void;\n onDelete: (id: number) => void;\n onEdit: (id: number, text: string) => Promise;\n}\n\nexport function TodoItem({ todo, onToggle, onDelete, onEdit }: Props) {\n const [editing, setEditing] = useState(false);\n const [draft, setDraft] = useState(todo.text);\n\n async function commitEdit() {\n const trimmed = draft.trim();\n if (!trimmed) {\n setDraft(todo.text);\n setEditing(false);\n return;\n }\n if (trimmed !== todo.text) {\n await onEdit(todo.id, trimmed);\n }\n setEditing(false);\n }\n\n return (\n

\n onToggle(todo)}\n aria-label={todo.completed ? \"Mark as active\" : \"Mark as completed\"}\n class={`w-6 h-6 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors cursor-pointer ${\n todo.completed\n ? \"bg-emerald-500 border-emerald-500 text-white\"\n : \"border-gray-300 hover:border-indigo-400 text-transparent\"\n }`}\n >\n ✓\n \n\n {editing\n ? (\n setDraft(e.target.value)}\n onBlur={commitEdit}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") commitEdit();\n if (e.key === \"Escape\") {\n setDraft(todo.text);\n setEditing(false);\n }\n }}\n autoFocus\n class=\"flex-1 px-2 py-1 rounded border border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400\"\n />\n )\n : (\n setEditing(true)}\n title=\"Double-click to edit\"\n class={`flex-1 cursor-text break-words min-w-0 ${\n todo.completed ? \"line-through text-gray-400\" : \"text-gray-800\"\n }`}\n >\n {todo.text}\n \n )}\n\n onDelete(todo.id)}\n aria-label=\"Delete todo\"\n class=\"opacity-0 group-hover:opacity-100 focus:opacity-100 text-gray-300 hover:text-red-500 transition-all text-xl leading-none cursor-pointer px-1\"\n >\n ×\n \n

\n );\n}\n",[],[185,265,257],"components","4d06a363-5284-4530-9465-6e9ef3f9c8e2","TodoInput.tsx","4a6dd7ae-82e2-11f1-98d1-1607ee4eb77e",5,["D",1784404384799],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Props {\n onAdd: (text: string) => Promise;\n disabled?: boolean;\n}\n\nexport function TodoInput({ onAdd, disabled }: Props) {\n const [text, setText] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n\n async function handleSubmit(e: { preventDefault: () => void }) {\n e.preventDefault();\n const trimmed = text.trim();\n if (!trimmed || submitting) return;\n setSubmitting(true);\n try {\n await onAdd(trimmed);\n setText(\"\");\n } finally {\n setSubmitting(false);\n }\n }\n\n return (\n

\n setText(e.target.value)}\n placeholder=\"What needs to be done?\"\n maxLength={500}\n disabled={disabled || submitting}\n autoFocus\n class=\"flex-1 px-4 py-3 rounded-xl border border-gray-200 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent placeholder-gray-400 disabled:opacity-50\"\n />\n \n Add\n \n \n );\n}\n",[],[185,265,267],"12165770-b65e-49fa-b855-66b67e618d2e","Counter.tsx","019f76c9-48ec-747c-8230-2ae578d09fe4",["D",1784404330602],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[185,265,275],"2f8af389-17b6-49d5-a012-62205912cdab","App.tsx","019f76c9-48eb-72d8-ad33-f2fdd02bc82a",7,["D",1784404418188],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Filter, Todo } from \"../../shared/types.ts\";\nimport { TodoInput } from \"./TodoInput.tsx\";\nimport { TodoItem } from \"./TodoItem.tsx\";\n\nasync function api(path: string, options?: RequestInit): Promise {\n const res = await fetch(path, {\n headers: { \"Content-Type\": \"application/json\" },\n ...options,\n });\n if (!res.ok) {\n const body = await res.json().catch(() => ({}));\n throw new Error(body.error || `Request failed (${res.status})`);\n }\n return res.json();\n}\n\nconst FILTERS: Filter[] = [\"all\", \"active\", \"completed\"];\n\nexport function App() {\n const [todos, setTodos] = useState([]);\n const [filter, setFilter] = useState(\"all\");\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n function showError(message: string) {\n setError(message);\n setTimeout(() => setError(null), 4000);\n }\n\n async function refresh() {\n try {\n setTodos(await api(\"/api/todos\"));\n setError(null);\n } catch (e) {\n showError(e instanceof Error ? e.message : \"Failed to load todos\");\n } finally {\n setLoading(false);\n }\n }\n\n useEffect(() => {\n refresh();\n }, []);\n\n async function addTodo(text: string) {\n try {\n const todo = await api(\"/api/todos\", {\n method: \"POST\",\n body: JSON.stringify({ text }),\n });\n setTodos((prev) => [todo, ...prev]);\n } catch (e) {\n showError(e instanceof Error ? e.message : \"Failed to add todo\");\n throw e;\n }\n }\n\n async function toggleTodo(todo: Todo) {\n // Optimistic update, roll back on failure\n setTodos((prev) =>\n prev.map((t) => t.id === todo.id ? { ...t, completed: !t.completed } : t)\n );\n try {\n await api(`/api/todos/${todo.id}`, {\n method: \"PATCH\",\n body: JSON.stringify({ completed: !todo.completed }),\n });\n } catch (e) {\n setTodos((prev) => prev.map((t) => t.id === todo.id ? todo : t));\n showError(e instanceof Error ? e.message : \"Failed to update todo\");\n }\n }\n\n async function editTodo(id: number, text: string) {\n const previous = todos;\n setTodos((prev) => prev.map((t) => t.id === id ? { ...t, text } : t));\n try {\n await api(`/api/todos/${id}`, {\n method: \"PATCH\",\n body: JSON.stringify({ text }),\n });\n } catch (e) {\n setTodos(previous);\n showError(e instanceof Error ? e.message : \"Failed to edit todo\");\n }\n }\n\n async function deleteTodo(id: number) {\n const previous = todos;\n setTodos((prev) => prev.filter((t) => t.id !== id));\n try {\n await api<{ ok: boolean }>(`/api/todos/${id}`, { method: \"DELETE\" });\n } catch (e) {\n setTodos(previous);\n showError(e instanceof Error ? e.message : \"Failed to delete todo\");\n }\n }\n\n async function clearCompleted() {\n const previous = todos;\n setTodos((prev) => prev.filter((t) => !t.completed));\n try {\n await api<{ cleared: number }>(\"/api/todos/clear-completed\", {\n method: \"POST\",\n });\n } catch (e) {\n setTodos(previous);\n showError(e instanceof Error ? e.message : \"Failed to clear completed\");\n }\n }\n\n const visible = todos.filter((t) =>\n filter === \"all\" ? true : filter === \"active\" ? !t.completed : t.completed\n );\n const activeCount = todos.filter((t) => !t.completed).length;\n const completedCount = todos.length - activeCount;\n\n return (\n

\n ✅ Todos\n

\n {activeCount} {activeCount === 1 ? \"task\" : \"tasks\"} remaining\n

\n\n {error && (\n \n {error}\n

\n )}\n\n \n\n

\n {FILTERS.map((f) => (\n setFilter(f)}\n class={`px-3 py-1 rounded-lg capitalize transition-colors cursor-pointer ${\n filter === f\n ? \"bg-indigo-100 text-indigo-700 font-medium\"\n : \"text-gray-500 hover:bg-gray-100\"\n }`}\n >\n {f}\n \n ))}\n

\n {completedCount > 0 && (\n \n Clear completed ({completedCount})\n \n )}\n

\n\n {loading\n ?

Loading…

\n : visible.length === 0\n ? (\n

\n {todos.length === 0\n ? \"No todos yet. Add one above! 🎉\"\n : `No ${filter} todos.`}\n

\n )\n : (\n

\n ))}\n

\n )}\n\n \n \n );\n}\n",[],[185,265,282],"1f35f3e6-6deb-4bcf-be5d-4586c6af4f7e",["D",1784404330602],[209,210,211,212],[185,265],["D",1784404330602],[208,213,214,215],[185],"71051082-14a9-4218-8526-23fa0f80018a","db.ts","37e20f6a-82e2-11f1-838b-1607ee4eb77e",["D",1784404353689],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Todo } from \"../shared/types.ts\";\n\nconst TABLE = \"todos_v1\";\n\n// Idempotent schema setup\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n completed INTEGER NOT NULL DEFAULT 0,\n created_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ', 'now'))\n)`);\n\nfunction rowToTodo(row: Record): Todo {\n return {\n id: Number(row.id),\n text: String(row.text),\n completed: Boolean(row.completed),\n createdAt: String(row.created_at),\n };\n}\n\nexport async function listTodos(): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLE} ORDER BY completed ASC, created_at DESC`,\n );\n return result.rows.map(rowToTodo);\n}\n\nexport async function createTodo(text: string): Promise {\n const result = await sqlite.execute({\n sql: `INSERT INTO ${TABLE} (text) VALUES (?) RETURNING *`,\n args: [text],\n });\n return rowToTodo(result.rows[0]);\n}\n\nexport async function updateTodo(\n id: number,\n fields: { text?: string; completed?: boolean },\n): Promise {\n const sets: string[] = [];\n const args: (string | number)[] = [];\n if (fields.text !== undefined) {\n sets.push(\"text = ?\");\n args.push(fields.text);\n }\n if (fields.completed !== undefined) {\n sets.push(\"completed = ?\");\n args.push(fields.completed ? 1 : 0);\n }\n if (sets.length === 0) return getTodo(id);\n args.push(id);\n const result = await sqlite.execute({\n sql: `UPDATE ${TABLE} SET ${sets.join(\", \")} WHERE id = ? RETURNING *`,\n args,\n });\n return result.rows.length ? rowToTodo(result.rows[0]) : null;\n}\n\nexport async function getTodo(id: number): Promise {\n const result = await sqlite.execute({\n sql: `SELECT * FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n return result.rows.length ? rowToTodo(result.rows[0]) : null;\n}\n\nexport async function deleteTodo(id: number): Promise {\n const result = await sqlite.execute({\n sql: `DELETE FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n return result.rowsAffected > 0;\n}\n\nexport async function clearCompleted(): Promise {\n const result = await sqlite.execute(\n `DELETE FROM ${TABLE} WHERE completed = 1`,\n );\n return result.rowsAffected;\n}\n",[],[190,297],["D",1784404353689],[206],[190],["D",1784404330602],["D",1789472446807],{"_111":110,"_119":115},{"_111":110,"_112":113,"_114":115,"_19":62,"_116":117,"_118":31},{"_13":96,"_38":97,"_49":48,"_98":50,"_99":100,"_101":102,"_103":56,"_104":105,"_106":107,"_108":51,"_109":110},"ctx",{"_89":-5,"_141":344,"_345":346,"_347":348,"_349":31,"_350":31,"_351":31,"_352":66,"_353":-5,"_354":-7,"_355":-7,"_356":70,"_357":31,"_358":31,"_359":-5,"_360":31,"_361":31,"_362":31,"_363":-5},"ENV",{"_315":316,"_317":318,"_319":97,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v8