`, 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",{"_295":296,"_297":298},"routes/_app.x.$handle.$name",{"_111":110,"_38":56,"_120":101,"_33":121,"_13":14,"_122":-5,"_11":123,"_124":125,"_126":127,"_128":129,"_130":131,"_27":-5,"_132":-5,"_133":-5,"_134":31,"_135":136,"_137":70,"_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",{"_54":55,"_38":56,"_42":57,"_58":-5,"_59":31,"_60":61,"_62":61,"_63":64,"_65":-5,"_19":66,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":31},"version",5,"changes",[25,26],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","bd6465bb-b051-4a68-a0a8-02253e300879","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_27":47,"_29":-7,"_30":31,"_32":31,"_33":48,"_35":48},{"_27":28,"_29":-7,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":-5,"_42":43,"_44":14,"_45":46,"_30":31},"previous","deleted",false,"deletedHere","path","server","latestPath","fileId","5c27b29b-f289-4386-8c91-f92f50dc4466","name","fileType","directory","content","createdAt",["D",1788720422744],"branchVersion","branchId","9da8d75d-5b67-4db9-bfe9-96a9f922df07",{"_36":49,"_38":50,"_39":51,"_41":52,"_42":53,"_44":14,"_45":46,"_30":31},"server/text.ts","5984a61a-aa23-11f1-9fe8-1607ee4eb77e","text.ts","script","/**\n * Text segmentation + Canadian case metadata extraction.\n * All detection is best-effort and honest: anything not confidently found is\n * returned as `confidence: \"not-detected\"` (value null). We never invent metadata.\n */\nimport type { CaseMetadata, MetadataField, Paragraph } from \"../types.ts\";\n\nconst nd = (): MetadataField => ({ value: null, confidence: \"not-detected\" });\nconst det = (value: string): MetadataField => ({ value: value.trim(), confidence: \"detected\" });\n\nexport function emptyMetadata(): CaseMetadata {\n return {\n styleOfCause: nd(),\n neutralCitation: nd(),\n court: nd(),\n decisionDate: nd(),\n judges: nd(),\n docket: nd(),\n fileNumber: nd(),\n };\n}\n\nconst norm = (s: string) => s.replace(/\\s+/g, \" \").trim();\n\n/** Split raw text into paragraphs, preserving numbers and marking headings. */\nexport function splitParagraphs(text: string): Paragraph[] {\n // Prefer double-newline blocks; fall back to single newlines if too few.\n let blocks = text.split(/\\n\\s*\\n/).map((b) => b.trim()).filter(Boolean);\n if (blocks.length < 3) {\n blocks = text.split(/\\n/).map((b) => b.trim()).filter(Boolean);\n }\n const paragraphs: Paragraph[] = [];\n let seq = 0;\n for (const block of blocks) {\n let num = \"\";\n let body = block;\n // Leading explicit number, e.g. \"[1]\" \"1.\" \"¶ 3\" \"para. 5\" \"1.\"\n let m = body.match(/^\\[?(\\d{1,4})\\]?[\\.\\:)\\u2014\\s]\\s*/);\n if (!m) m = body.match(/^(\\d{1,4})\\.?\\s*/);\n if (m) {\n num = m[1].replace(/^0+/, \"\");\n body = body.slice(m[0].length);\n }\n if (!num) num = String(++seq);\n\n const oneLine = norm(body);\n const heading =\n oneLine.length > 0 &&\n oneLine.length < 90 &&\n (!oneLine.includes(\" \" + \" \") || true) &&\n (isAllCapsHeading(oneLine) || /^(REASONS|COURT OF|CITATION|DATED|BETWEEN|AND:|IN THE|SUPERIOR|PROVINCIAL|FEDERAL|SUPREME)/i.test(oneLine)) &&\n !oneLine.toLowerCase().includes(\"appellant\") === false;\n\n paragraphs.push({ index: paragraphs.length, num, heading, text: body });\n }\n return paragraphs;\n}\n\nfunction isAllCapsHeading(s: string): boolean {\n if (s.length < 4 || s.length > 80) return false;\n const words = s.split(/\\s+/);\n if (words.length < 2) return false;\n if (!/^[A-Z'&.,\\-\\/ ]+$/.test(s)) return false;\n for (const w of words) {\n if (w.length > 3 && /[AEIOU]/.test(w) && !/[a-z]/.test(w) === false) return false;\n }\n // plain conservative: all letters uppercase, at least one multi-letter word\n return words.some((w) => w.length > 3) && words.every((w) => !/[a-z]/.test(w));\n}\n\n/** Bank of known Canadian neutral-citation court codes (non-exhaustive). */\nconst COURT_CODES: Record = {\n SCC: \"Supreme Court of Canada\",\n FCA: \"Federal Court of Appeal\",\n FC: \"Federal Court\",\n TCC: \"Tax Court of Canada\",\n ONCA: \"Court of Appeal for Ontario\",\n ONSC: \"Superior Court of Justice (Ontario)\",\n ONDC: \"Ontario Court of Justice\",\n BCCA: \"Court of Appeal for British Columbia\",\n ABCA: \"Court of Appeal of Alberta\",\n QCCA: \"Court of Appeal of Quebec\",\n SCCA: \"Court of Appeal for Saskatchewan\",\n MBCA: \"Court of Appeal of Manitoba\",\n NSCA: \"Nova Scotia Court of Appeal\",\n NBCA: \"Court of Appeal of New Brunswick\",\n NLCA: \"Court of Appeal of Newfoundland and Labrador\",\n PECA: \"Prince Edward Island Court of Appeal\",\n YKCA: \"Court of Appeal of Yukon\",\n NWTCA: \"Court of Appeal for the Northwest Territories\",\n NUCA: \"Nunavut Court of Appeal\",\n};\n\nconst KNOWN_COURT_LINES = [\n \"supreme court of canada\",\n \"court of appeal for ontario\",\n \"ontario court of appeal\",\n \"court of appeal for british columbia\",\n \"court of appeal of alberta\",\n \"federal court of appeal\",\n \"federal court of canada\",\n \"superior court of justice\",\n \"court of king's bench\",\n \"court of appeal for saskatchewan\",\n \"court of queen's bench\",\n \"provincial court\",\n \"supreme court of nova scotia\",\n \"supreme court of british columbia\",\n];\n\nexport function extractMetadata(text: string, paragraphs: Paragraph[]): CaseMetadata {\n const meta = emptyMetadata();\n const headStart = Math.min(paragraphs.length, 60);\n\n const head = paragraphs.slice(0, headStart).map((p) => p.text).join(\"\\n\").slice(0, 9000);\n\n // Neutral citation: [YYYY] CODE NNN — optionally (CanLII), C.A., etc.\n const cit = text.match(/\\[\\d{4}\\]\\s+([A-Z]+)\\s+\\d+\\s*\$?[^)]*\$?/);\n if (cit) {\n const code = cit[1];\n meta.neutralCitation = det(norm(cit[0]));\n if (COURT_CODES[code]) meta.court = det(COURT_CODES[code]);\n }\n\n // Court name from a header-style line.\n if (meta.court.confidence === \"not-detected\") {\n for (const p of paragraphs.slice(0, headStart)) {\n const ln = p.text.toLowerCase();\n for (const known of KNOWN_COURT_LINES) {\n if (ln.includes(known)) {\n meta.court = det(p.text.trim().replace(/^in |\\bthe\\b/, \"\").toUpperCase() === p.text.toUpperCase() ? p.text.trim().toUpperCase() : known.toUpperCase());\n break;\n }\n }\n if (meta.court.confidence === \"detected\") break;\n }\n }\n\n // Decision date: \"Date: YYYY-MM-DD\" / \"Date: Month D, YYYY\" / DATED ... this DD day of Month, YYYY\n let dm = text.match(/[Dd]ate[:\\-]?\\s*(\\d{4}[-/]\\d{1,2}[-/]\\d{1,2})/) ??\n text.match(/[Dd]ate[:\\-]?\\s*([A-Z][a-z]+ \\d{1,2}, \\d{4})/) ??\n text.match(/[Dd]ated[^.]{0,60}?this \\d{1,2} day of ([A-Z][a-z]+),? (\\d{4})/);\n if (dm) {\n let v = dm[1];\n if (/^[A-Z][a-z]+$/.test(v)) v = `${v} ${dm[2]}`;\n meta.decisionDate = det(v);\n }\n\n // Judges: finished by J.A. / J.J.A. / C.J. / J. / J.S.C. etc. Keep 2-3 distinct.\n const judgeNames: string[] = [];\n for (const name of text.matchAll(/([A-Z][A-Za-z'\\-]+(?:\\s+[A-Z][A-Za-z'\\-]+)?)\\s+(?:J\\.A\\.|J\\.J\\.A\\.|C\\.J\\.(?:\\.|$)|J\\.C\\.A\\.|J\\. C\\. A\\.| J\\.S\\.C\\.|J\\.)/g)) {\n const full = name[1].trim();\n if (full.length > 2) judgeNames.push(full);\n if (judgeNames.length >= 6) break;\n }\n // Prefer a \"X J.A.\" line near the reasons, then dedupe.\n const seen = new Set();\n const judges: string[] = [];\n for (const j of [findJudgeLine(head), ...judgeNames]) {\n if (j && !seen.has(j)) {\n seen.add(j);\n judges.push(j);\n }\n }\n if (judges.length) meta.judges = det(judges.slice(0, 3).join(\"; \"));\n\n // Docket / court file number\n const dock = text.match(/(?:Docket|Court File No\\.?|File No\\.?|No\\.?)\\s*[:#\\-]?\\s*([A-Za-z0-9]{2,3}[\\-\\s0-9A-Za-z]{2,15})/i) ??\n text.match(/\\b([A-Z]{2,3}-?\\d{2}-?\\d{2,6})\\b/);\n if (dock) meta.docket = det(norm(dock[1]));\n\n // Style of cause: between BETWEEN:/AND: markers, or deducible from citation parties.\n const soc = extractStyleOfCause(text);\n if (soc) meta.styleOfCause = det(soc);\n\n return meta;\n}\n\nfunction findJudgeLine(head: string): string | null {\n // \"BENNETT J.A.\" alone on a line before reasons, or \"By: ... J.A.\"\n const m = head.match(/(?:BY:|BEFORE:|PROFILE|THE COURT)\\s*[:]?\\s*([A-Z][A-Za-z'\\-]+(?:\\s+[A-Z][A-Za-z'\\-]+)?\\s+(?:J\\.A\\.|J\\.J\\.A\\.|C\\.J\\.|J\\.))/i) ||\n head.match(/\\n\\s*([A-Z][A-Za-z'\\-]+(?:\\s+[A-Z][A-Za-z'\\-]+)?)\\s+J\\.A\\.\\s*(\\n|$)/);\n return m ? m[1].replace(/\\s+/g, \" \").trim() : null;\n}\n\nfunction extractStyleOfCause(text: string): string | null {\n const btwn = text.indexOf(\"BETWEEN:\");\n const entre = text.search(/\\b(ENTRE|AND:)\\b/);\n if (btwn >= 0 && entre > btwn) {\n const seg = text.slice(btwn, entre).split(\"\\n\").map((l) => l.trim()).filter(Boolean);\n const partyLines = seg.filter((l) => !/appellant|respondent|applicant|plaintiff|defendant|demander|intim(e|é)$/i.test(l));\n if (partyLines.length) {\n const names = partyLines.slice(0, 2).map(norm).filter(Boolean);\n if (names.length) return names.join(\" and \");\n }\n }\n // Fallback: first two capitalized lines near the top containing a person-like pair.\n return null;\n}\n",["D",1788720422744],"id","98a438e2-e86c-4387-8e64-73a6f374b982","caselens-canada",["D",1788720339103],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Canadian judgment analyzer, highlights citation-worthy passages","imageUrl","436e5f36-a2ba-4a6a-a643-a30cb32bc6d0","pinnedFileId","01a0780a-5903-77b6-aac8-7b10e8bcd475","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a07805-dad2-708b-ba9b-d68c374aef77","tursoName","98a438e2e86c43878e6473a6f374b982","tursoHostname","98a438e2e86c43878e6473a6f374b982-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789504908499],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_111":110,"_119":115},"org",{"_111":110,"_112":113,"_114":115,"_19":66,"_116":117,"_118":31},"branch",{"_13":100,"_38":101,"_54":46,"_102":55,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":-5,"_108":56,"_109":110},"isOwned",28,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","justinstevens","handle","displayName","Justin Stevens","avatar","https://lh3.googleusercontent.com/a/ACg8ocKLKYD-xizVJxt8-uDEezaNk_hNn0G1pUiiV0LSrwEU1mcm1qa4=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_54":55,"_38":56,"_42":290,"_58":-5,"_59":31,"_60":61,"_62":61,"_63":64,"_65":-5,"_19":66,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":74,"_75":76,"_77":78,"_79":80,"_81":291,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":292,"_95":293,"_97":294,"_99":31},"tree",[195,204,206,207,208,209],"files",[195,196,197,198,199,200,201,202,203,204,205,206,207,208,209],"counts",{"_185":74,"_186":160,"_187":74,"_188":189,"_190":191},"contents",[142,143,144,145,146,147],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_54":180,"_38":181,"_36":182,"_151":-5,"_45":46,"_44":160,"_153":70,"_42":183,"_13":74,"_39":40,"_41":-5,"_30":31,"_156":-5,"_33":184},{"_54":177,"_38":34,"_36":37,"_151":-5,"_45":46,"_44":14,"_153":70,"_42":178,"_13":74,"_39":40,"_41":-5,"_30":31,"_156":-5,"_33":179},{"_54":171,"_38":172,"_36":173,"_151":-5,"_45":46,"_44":160,"_153":70,"_42":174,"_13":74,"_39":27,"_41":175,"_30":31,"_156":-5,"_33":176},{"_54":165,"_38":166,"_36":167,"_151":-5,"_45":46,"_44":160,"_153":31,"_42":168,"_13":74,"_39":27,"_41":169,"_30":31,"_156":-5,"_33":170},{"_54":158,"_38":159,"_36":68,"_151":-5,"_45":46,"_44":160,"_153":31,"_42":161,"_13":74,"_39":162,"_41":163,"_30":31,"_156":-5,"_33":164},{"_54":148,"_38":149,"_36":150,"_151":-5,"_45":46,"_44":152,"_153":70,"_42":154,"_13":74,"_39":51,"_41":155,"_30":31,"_156":-5,"_33":157},"9b30d97f-8b98-4c48-9a4d-868ad6d9c5e0","types.ts","49c0a90e-aa23-11f1-8352-1607ee4eb77e","parentId",2,"latest",["D",1788720396299],"/**\n * Shared types for CaseLens Canada — used by both the server pipeline\n * (server/*.ts) and the client SPA (frontend/**).\n */\n\nexport type CategoryKey =\n | \"ratio\"\n | \"rule\"\n | \"application\"\n | \"fact\"\n | \"credibility\"\n | \"procedural\"\n | \"remedy\"\n | \"obiter\"\n | \"definition\";\n\nexport interface LegendEntry {\n key: CategoryKey;\n label: string;\n short: string;\n /** what a lawyer typically calls this kind of passage */\n explanation?: string;\n bg: string; // highlight background (hex)\n text: string; // readable foreground / accent (hex)\n solid: string; // strong accent (hex)\n}\n\n/** The category legend — a single source of truth for filters, colors, labels. */\nexport const LEGEND: LegendEntry[] = [\n { key: \"ratio\", label: \"Ratio / core holding\", short: \"Ratio\", bg: \"#dbeafe\", text: \"#1e3a8a\", solid: \"#2563eb\", explanation: \"Ratio decidendi — the binding principle on which the decision turns.\" },\n { key: \"rule\", label: \"Legal test / governing rule\", short: \"Rule / test\", bg: \"#e0e7ff\", text: \"#3730a3\", solid: \"#4f46e5\", explanation: \"A statement of a legal test, standard, or rule the court applies.\" },\n { key: \"application\", label: \"Application / reasoning\", short: \"Application\", bg: \"#ccfbf1\", text: \"#115e59\", solid: \"#0d9488\", explanation: \"Reasoning applying the law to the facts of the case.\" },\n { key: \"fact\", label: \"Key factual finding\", short: \"Finding of fact\", bg: \"#fef3c7\", text: \"#92400e\", solid: \"#d97706\", explanation: \"An established or asserted fact the court relies on.\" },\n { key: \"credibility\", label: \"Credibility / evidentiary finding\", short: \"Credibility\", bg: \"#ffedd5\", text: \"#9a3412\", solid: \"#ea580c\", explanation: \"A determination about reliability, credibility, or the weight of evidence.\" },\n { key: \"procedural\", label: \"Procedural ruling\", short: \"Procedural\", bg: \"#ede9fe\", text: \"#4c1d95\", solid: \"#7c3aed\", explanation: \"A ruling about procedure, jurisdiction, standing, or admissibility.\" },\n { key: \"remedy\", label: \"Remedy / disposition / order\", short: \"Remedy / order\", bg: \"#d1fae5\", text: \"#065f46\", solid: \"#059669\", explanation: \"The remedy granted, disposition, or operative order.\" },\n { key: \"obiter\", label: \"Notable obiter\", short: \"Obiter\", bg: \"#ffe4e6\", text: \"#881337\", solid: \"#e11d48\", explanation: \"A comment made in passing that is not necessary to the decision — persuasive, not binding.\" },\n { key: \"definition\", label: \"Important definition / interpretation\", short: \"Definition\", bg: \"#cffafe\", text: \"#164e63\", solid: \"#0891b2\", explanation: \"A definition or statutory/language interpretation the court adopts.\" },\n];\n\nexport const categoryInfo = (key: CategoryKey): LegendEntry =>\n LEGEND.find((l) => l.key === key) ?? LEGEND[0];\n\nexport interface Paragraph {\n /** 0-based index, stable anchor within the analysis */\n index: number;\n /** Paragraph number shown in the margin (from the document when detected, else sequential) */\n num: string;\n /** True for heading/part labels — never highlighted */\n heading: boolean;\n /** Exact text of the paragraph */\n text: string;\n}\n\nexport interface MetadataField {\n value: string | null;\n confidence: \"detected\" | \"not-detected\";\n}\n\nexport interface CaseMetadata {\n styleOfCause: MetadataField;\n neutralCitation: MetadataField;\n court: MetadataField;\n decisionDate: MetadataField;\n judges: MetadataField;\n docket: MetadataField;\n fileNumber: MetadataField;\n}\n\nexport type LegalType =\n | \"ratio decidendi\"\n | \"legal test / rule\"\n | \"application of law to facts\"\n | \"key factual finding\"\n | \"credibility finding\"\n | \"procedural holding\"\n | \"remedy / order\"\n | \"notable obiter\";\n\nexport interface Highlight {\n id: string;\n /** exact, verbatim quote from the uploaded text (normalized whitespace) */\n exactQuote: string;\n paragraphIndex: number;\n paragraphNumber: string;\n /** character offsets into the ORIGINAL paragraph text for precise highlight rendering */\n startChar: number;\n endChar: number;\n category: CategoryKey;\n legalType: LegalType;\n importance: number; // 0–1\n confidence: number; // 0–1\n whatJudgeIsSaying: string;\n whyMatters: string;\n legalProposition: string; // \"Suggested proposition\"\n citationUse: string; // how to use/cite\n contextSummary: string;\n // user state (client-side)\n status?: \"saved\" | \"not-useful\";\n userNote?: string;\n}\n\nexport interface Analysis {\n source: \"ai\" | \"heuristic\";\n model?: string;\n engineLabel: string;\n metadata: CaseMetadata;\n paragraphs: Paragraph[];\n highlights: Highlight[];\n}\n\nexport type ProgressStage =\n | \"idle\"\n | \"Uploading\"\n | \"Extracting text\"\n | \"Identifying key passages\"\n | \"Building explanations\"\n | \"Ready\";\n","label",[149],"553ac37a-a1c0-4d0a-b738-636ba3fb77de","index.ts",1,["D",1788720339103],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\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\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\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",[159],"362d2787-1892-450e-a045-b1158ca752a2","README.md","01a0780a-5903-77b6-aac8-7592d4e98454",["D",1788720339103],"# 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[\"root.tsx\"]\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 root.tsx ← HTML shell (stamps immutable asset URLs)\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/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and 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\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[166],"3ba147c7-9d07-4444-9b21-71b45cae8c00","CHANGELOG.md","01a0780a-5903-77b6-aac8-70166b5b6141",["D",1788720339103],"# 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

Diff · v5