[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_265":266,"_267":268},"routes/_app.x.$handle.$name",{"_110":109,"_38":51,"_118":96,"_33":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_26":-5,"_130":131,"_132":133,"_134":55,"_135":136,"_137":31,"_138":-5,"_139":-5,"_140":141},"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":55,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":31,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":55},"version",6,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","86e57a47-0015-4938-83fd-ac5cd95e8422","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",true,"deletedHere","path","frontend/components/Counter.tsx","latestPath","fileId","019e46bb-f73a-762f-bb0e-89e0621d5970","name","Counter.tsx","fileType","script","content","/** @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","createdAt",["D",1779303208053],"branchVersion","branchId","21e766da-547d-11f1-8572-ee650bb23af1","id","21e0591c-547d-11f1-8572-ee650bb23af1","crm-kanban",["D",1779303184101],"deletedAt","legacyEnvVars",false,"privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019e46bb-f73a-762f-bb0e-a7f8367f8ef9","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","21e0591c547d11f18572ee650bb23af1","tursoHostname","21e0591c547d11f18572ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789676511826],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_110":109,"_117":113},"org",{"_110":109,"_111":-5,"_112":113,"_19":62,"_114":115,"_116":55},"branch",{"_13":95,"_38":96,"_49":48,"_97":50,"_98":99,"_100":101,"_102":57,"_103":104,"_105":106,"_107":51,"_108":109},"isOwned",7,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",88,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":260,"_53":-5,"_54":55,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":31,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":261,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":262,"_90":263,"_92":264,"_94":55},"tree",[189,197,198],"files",[189,190,191,192,193,194,195,196,197,198],"counts",{"_179":69,"_180":162,"_181":69,"_182":183,"_184":185},"contents",[153,154,155],"upstreamProject",{"_49":104,"_38":149,"_59":60,"_61":150,"_56":57,"_88":151},"upstreamBranch",{"_49":99,"_44":142,"_143":144,"_38":96,"_97":104,"_13":145,"_98":-5,"_100":-5,"_146":147,"_53":-5,"_94":55,"_56":57,"_108":148,"_70":106,"_107":149},"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","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789714570&sig=b64648c53d7cd1c4b58138de853c6cbccd582f1804cf146b92ea0d4d6a61af98",{"_110":148,"_117":152},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789714570&sig=111ef386a44b48481ae8fe9493697788e7df9281e6557709234b05c8e41ba5cc",{"_49":173,"_38":174,"_36":175,"_158":-5,"_47":48,"_46":162,"_160":31,"_44":176,"_13":69,"_40":177,"_42":-5,"_30":55,"_165":-5,"_33":178},{"_49":167,"_38":168,"_36":169,"_158":-5,"_47":48,"_46":162,"_160":55,"_44":170,"_13":69,"_40":26,"_42":171,"_30":55,"_165":-5,"_33":172},{"_49":156,"_38":157,"_36":64,"_158":-5,"_47":48,"_46":159,"_160":31,"_44":161,"_13":162,"_40":163,"_42":164,"_30":55,"_165":-5,"_33":166},"26e25514-547d-11f1-9a83-ee650bb23af1","index.ts","parentId",2,"latest",["D",1779303192500],1,"http","import { parseVal, serveFile } 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\";\n\nconst app = new Hono();\n\n// Initialize database with demo data\nasync function initDatabase() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS deals (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n company TEXT NOT NULL,\n status TEXT NOT NULL,\n amount INTEGER NOT NULL,\n createdAt TEXT NOT NULL\n )\n `);\n\n // Check if demo data exists\n const result = await sqlite.execute(\"SELECT COUNT(*) as count FROM deals\");\n const count = (result.rows[0] as any)?.count || 0;\n\n if (count === 0) {\n // Insert demo data\n await sqlite.batch([\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Website Redesign\", \"Acme Corp\", \"lead\", 15000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"API Integration\", \"TechStart Inc\", \"lead\", 8000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Analytics Dashboard\", \"DataFlow Ltd\", \"qualified\", 25000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"CRM Implementation\", \"Global Logistics\", \"qualified\", 45000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Support Package\", \"FinServ Solutions\", \"proposal\", 12000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Enterprise License\", \"BigBank Group\", \"proposal\", 75000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Migration Services\", \"RetailCo\", \"negotiation\", 35000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Annual Renewal\", \"TechStart Inc\", \"won\", 18000, new Date().toISOString()],\n },\n ]);\n }\n}\n\n// Initialize on startup\nawait initDatabase();\n\n// API Routes\napp.get(\"/api/deals\", async (c) => {\n const result = await sqlite.execute(\"SELECT * FROM deals ORDER BY createdAt DESC\");\n return c.json(result.rows);\n});\n\napp.post(\"/api/deals/:id/status\", async (c) => {\n const id = c.req.param(\"id\");\n const { status } = await c.req.json() as { status: string };\n await sqlite.execute(\"UPDATE deals SET status = ? WHERE id = ?\", [status, id]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/deals\", async (c) => {\n const { name, company, amount } = await c.req.json() as { name: string; company: string; amount: number };\n await sqlite.execute(\n \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n [name, company, \"lead\", amount, new Date().toISOString()]\n );\n return c.json({ ok: true });\n});\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// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[157],"21ee0c88-547d-11f1-8572-ee650bb23af1","README.md","019e46bb-f73a-762f-bb0e-a19784aad05b",["D",1779303184101],"# 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**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",[168],"21ee0b02-547d-11f1-8572-ee650bb23af1","frontend","019e46bb-f73a-762f-bb0e-9e54a584da61",["D",1779303184101],"directory",[174],"pulls","branches","forks","envVars",{"_186":69,"_188":69},"connections",{"_186":69,"_187":69},"count","unfilledCount","emptyCount",{"_49":173,"_38":174,"_36":175,"_158":-5,"_47":48,"_46":162,"_160":31,"_44":257,"_13":69,"_40":177,"_42":-5,"_30":55,"_165":-5,"_200":258,"_33":259},{"_49":253,"_38":236,"_36":230,"_158":175,"_47":48,"_46":162,"_160":31,"_44":254,"_13":69,"_40":177,"_42":-5,"_30":55,"_165":-5,"_200":255,"_33":256},{"_49":245,"_38":246,"_36":247,"_158":230,"_47":48,"_46":248,"_160":31,"_44":249,"_13":162,"_40":41,"_42":250,"_30":55,"_165":-5,"_200":251,"_33":252},{"_49":237,"_38":238,"_36":239,"_158":230,"_47":48,"_46":240,"_160":31,"_44":241,"_13":69,"_40":41,"_42":242,"_30":55,"_165":-5,"_200":243,"_33":244},{"_49":227,"_38":228,"_36":229,"_158":230,"_47":48,"_46":231,"_160":31,"_44":232,"_13":69,"_40":41,"_42":233,"_30":55,"_165":-5,"_200":234,"_33":235},{"_49":220,"_38":221,"_36":222,"_158":175,"_47":48,"_46":162,"_160":31,"_44":223,"_13":69,"_40":26,"_42":224,"_30":55,"_165":-5,"_200":225,"_33":226},{"_49":213,"_38":214,"_36":215,"_158":175,"_47":48,"_46":162,"_160":31,"_44":216,"_13":69,"_40":26,"_42":217,"_30":55,"_165":-5,"_200":218,"_33":219},{"_49":206,"_38":207,"_36":208,"_158":175,"_47":48,"_46":162,"_160":31,"_44":209,"_13":69,"_40":41,"_42":210,"_30":55,"_165":-5,"_200":211,"_33":212},{"_49":167,"_38":168,"_36":169,"_158":-5,"_47":48,"_46":162,"_160":55,"_44":203,"_13":69,"_40":26,"_42":171,"_30":55,"_165":-5,"_200":204,"_33":205},{"_49":156,"_38":157,"_36":64,"_158":-5,"_47":48,"_46":159,"_160":31,"_44":199,"_13":162,"_40":163,"_42":164,"_30":55,"_165":-5,"_200":201,"_33":202},["D",1779303192500],"children",[],[157],["D",1779303184101],[],[168],"21ee06ac-547d-11f1-8572-ee650bb23af1","index.tsx","019e46bb-f73a-762f-bb0e-99416623d600",["D",1779303184101],"/** @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();",[],[174,207],"21ee0152-547d-11f1-8572-ee650bb23af1","index.html","019e46bb-f73a-762f-bb0e-968bd286cb8d",["D",1779303184101],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[174,214],"21edfe3c-547d-11f1-8572-ee650bb23af1","favicon.svg","019e46bb-f73a-762f-bb0e-901d3f516ac9",["D",1779303184101],"\n",[],[174,221],"2da747a6-547d-11f1-ac51-ee650bb23af1","Kanban.tsx","2da74a12-547d-11f1-ac51-ee650bb23af1","019e46bb-f73a-762f-bb0e-8d34aea2a6b3",4,["D",1779303203863],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { DealCard } from \"./DealCard.tsx\";\n\ninterface Deal {\n id: number;\n name: string;\n company: string;\n status: string;\n amount: number;\n}\n\ninterface KanbanProps {\n deals: Deal[];\n onUpdateStatus: (dealId: number, newStatus: string) => void;\n}\n\nconst STAGES = [\n { id: \"lead\", label: \"Lead\", color: \"from-blue-500 to-blue-600\" },\n { id: \"qualified\", label: \"Qualified\", color: \"from-purple-500 to-purple-600\" },\n { id: \"proposal\", label: \"Proposal\", color: \"from-orange-500 to-orange-600\" },\n { id: \"negotiation\", label: \"Negotiation\", color: \"from-pink-500 to-pink-600\" },\n { id: \"won\", label: \"Won\", color: \"from-green-500 to-green-600\" },\n];\n\nexport function Kanban({ deals, onUpdateStatus }: KanbanProps) {\n const [draggedCard, setDraggedCard] = useState(null);\n\n const dealsByStatus = STAGES.reduce(\n (acc, stage) => ({\n ...acc,\n [stage.id]: deals.filter((d) => d.status === stage.id),\n }),\n {} as Record\n );\n\n const handleDragStart = (dealId: number) => {\n setDraggedCard(dealId);\n };\n\n const handleDrop = (status: string) => {\n if (draggedCard !== null) {\n onUpdateStatus(draggedCard, status);\n setDraggedCard(null);\n }\n };\n\n return (\n

\n {STAGES.map((stage) => (\n e.preventDefault()}\n onDrop={() => handleDrop(stage.id)}\n >\n

{stage.label}

\n \n {dealsByStatus[stage.id].length}\n \n

\n\n

\n {dealsByStatus[stage.id].length === 0 ? (\n

No deals

\n ) : (\n dealsByStatus[stage.id].map((deal) => (\n handleDragStart(deal.id)}\n class={`cursor-move transition-opacity ${\n draggedCard === deal.id ? \"opacity-50\" : \"\"\n }`}\n >\n \n

\n ))\n )}\n

\n\n

\n ${dealsByStatus[stage.id].reduce((sum, d) => sum + d.amount, 0).toLocaleString()}\n

\n ))}\n \n \n );\n}\n",[],[174,236,228],"components","2f2b42c6-547d-11f1-ac51-ee650bb23af1","DealCard.tsx","2f2b43b6-547d-11f1-ac51-ee650bb23af1",5,["D",1779303206409],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface Deal {\n id: number;\n name: string;\n company: string;\n status: string;\n amount: number;\n}\n\nexport function DealCard({ deal }: { deal: Deal }) {\n return (\n

{deal.name}

{deal.company}

${deal.amount.toLocaleString()}

\n );\n}\n",[],[174,236,238],"29c1303e-547d-11f1-9a83-ee650bb23af1","App.tsx","019e46bb-f73a-762f-bb0e-8457ebbac640",3,["D",1779303197310],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Kanban } from \"./Kanban.tsx\";\n\ninterface Deal {\n id: number;\n name: string;\n company: string;\n status: string;\n amount: number;\n}\n\nexport function App() {\n const [deals, setDeals] = useState([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const fetchDeals = async () => {\n try {\n const res = await fetch(\"/api/deals\");\n const data = await res.json();\n setDeals(data);\n } catch (err) {\n console.error(\"Failed to fetch deals\", err);\n } finally {\n setLoading(false);\n }\n };\n\n fetchDeals();\n }, []);\n\n const updateDealStatus = async (dealId: number, newStatus: string) => {\n try {\n await fetch(`/api/deals/${dealId}/status`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status: newStatus }),\n });\n setDeals(deals.map((d) => (d.id === dealId ? { ...d, status: newStatus } : d)));\n } catch (err) {\n console.error(\"Failed to update deal\", err);\n }\n };\n\n return (\n

Sales Pipeline

Drag deals across stages to update their status

\n\n {loading ? (\n

Loading deals...

\n ) : (\n \n )}\n\n

\n View source\n

\n );\n}\n",[],[174,236,246],"21edfcc0-547d-11f1-8572-ee650bb23af1",["D",1779303184101],[191,192,193],[174,236],["D",1779303184101],[190,194,195,196],[174],["D",1779303184101],["D",1789676511826],{"_110":109,"_117":113},{"_110":109,"_111":-5,"_112":113,"_19":62,"_114":115,"_116":55},{"_13":95,"_38":96,"_49":48,"_97":50,"_98":99,"_100":101,"_102":57,"_103":104,"_105":106,"_107":51,"_108":109},"ctx",{"_88":-5,"_139":298,"_299":300,"_301":302,"_303":55,"_304":55,"_305":55,"_306":31,"_307":-5,"_308":-7,"_309":-7,"_310":69,"_311":55,"_312":55,"_313":-5,"_314":55,"_315":55,"_316":55,"_317":-5},"ENV",{"_269":270,"_271":272,"_273":96,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v6