[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_242":243,"_244":245},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":91,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":60,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a03bb4-ad03-72f9-9867-7188600c45c0","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect,useState } from \"https://esm.sh/react@18.2.0\";\ntype Car={id:number;name:string;year:string;discipline:string;status:string;detail:string;next_ready:string;accent:string};\ntype Event={id:number;title:string;event_date:string;location:string;discipline:string;car_name?:string;capacity:number;status:string;description:string;booked:number};\ntype Data={cars:Car[];events:Event[];stats:{members:number;reservations:number;ready_cars:number}};\nconst fmt=(d:string)=>new Date(d+\"T12:00:00\").toLocaleDateString(\"en-US\",{month:\"short\",day:\"numeric\",year:\"numeric\"});\nconst accent:any={red:\"bg-[#ef3b2d]\",blue:\"bg-[#2364aa]\",amber:\"bg-[#f0a202]\",green:\"bg-[#16835a]\"};\n\nfunction Mark(){return

MLC

MIATA LIFE CRISIS

Social motorsport club

}\nfunction Header({view,go}:{view:string;go:(v:string)=>void}){const tabs=[[\"home\",\"How it works\"],[\"events\",\"Events\"],[\"fleet\",\"The fleet\"],[\"join\",\"Join\"],[\"desk\",\"Club desk\"]];return

{tabs.map(([id,t])=>)}

}\n\nfunction Home({go}:{go:(v:string)=>void}){const steps=[[\"01\",\"Join the club\",\"Tell us what you want to try. Newcomers are genuinely welcome.\"],[\"02\",\"Pay quarterly dues\",\"Dues cover the real costs—not somebody's profit margin.\"],[\"03\",\"Pick an experience\",\"We match demand, car readiness, and member experience.\"],[\"04\",\"Show up & send it\",\"The car arrives prepared. You get coaching, seat time, and friends.\"]];return <>

🏁 Cars are expensive. Friends are priceless.

A little
crisis.
A lot of life.

A collectively funded fleet for people who want to drift, race, and wrench—without buying a dedicated car alone.

SHARED CARS ✦ QUARTERLY EVENTS ✦ PROFESSIONAL MAINTENANCE ✦ MORE SEAT TIME ✦ LESS GARAGE GUILT ✦ SHARED CARS ✦ QUARTERLY EVENTS

The pitch

Own the access,
not the headache.

Miata Life Crisis is social ownership for specialized motorsport. The collective maintains a small fleet centrally and deploys each car just in time for the experiences members choose.

This is not a rental counter and not an investment. It is a cost-sharing club built to make a ridiculous, joyful pastime more accessible and more social.

{steps.map(([n,t,d],i)=>

{n}

{t}

{d}

)}

ONE EVENT.
EVERY QUARTER.

{[[\"🌀\",\"Drift\",\"Car control and big stupid grins.\"],[\"🏎️\",\"GT / Track\",\"Coached pace on a real circuit.\"],[\"⛰️\",\"Off-road, soon\",\"Rallycross is on the roadmap.\"]].map(([e,t,d])=>

{e}

{t}

{d}

)}

}\n\nfunction Events({events,pick}:{events:Event[];pick:(e:Event)=>void}){return

{events.map((e,i)=>

{e.discipline}{e.status}

{e.title}

{e.description}

When{fmt(e.event_date)}

Where{e.location}

Car{e.car_name||\"Bring your stories\"}

Seats{Number(e.booked)}/{e.capacity} claimed

)}

}\nfunction Page({eyebrow,title,intro,children}:any){return

{eyebrow}

{title}

{intro}

{children}

}\nfunction Fleet({cars}:{cars:Car[]}){return

{cars.map(c=>

{c.discipline}

{c.name}

{c.year}

{c.status}

Garage note{c.detail}

Ready{c.next_ready}

)}

}\n\nfunction Join({reload}:{reload:()=>void}){const [f,setF]=useState({name:\"\",email:\"\",experience:\"\",interests:[] as string[]});const [msg,setMsg]=useState(\"\");const [busy,setBusy]=useState(false);const toggle=(x:string)=>setF({...f,interests:f.interests.includes(x)?f.interests.filter(i=>i!==x):[...f.interests,x]});async function submit(e:any){e.preventDefault();setBusy(true);const r=await fetch(\"/api/members\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify(f)});const j=await r.json();setMsg(j.message||j.error);setBusy(false);if(r.ok)reload()}return

Membership application

Bring your curiosity.

No race résumé required. We use this to match people with a safe, satisfying first experience.

Quarterly dues

Shared transparently across actual operating costs.

One event per quarter

Additional seats open after every member has a chance.

Member voice

Vote on the calendar, fleet, and priorities.

{[[\"name\",\"Your name\",\"Paul Chin Jr.\"],[\"email\",\"Email\",\"you@example.com\"]].map(([k,l,p])=>{l}setF({...f,[k]:e.target.value})} className=\"mt-2 w-full border-2 border-[#191919] rounded-xl p-3 bg-[#f4efe4]\" placeholder={p}/>)}

What sounds fun?

{[\"Drift\",\"GT / track\",\"Autocross\",\"Off-road\",\"Garage days\"].map(x=>)}

Driving experience{msg&&

{msg}

}

This prototype does not collect payment. Dues and operating rules would be approved by founding members.

}\n\nfunction Desk({data}:{data:Data}){return

Member workflow

{i+1}{x}

Just-in-time fleet planning

{data.cars.map(c=>

{c.name}

{c.discipline}

{c.status}

)}

}\nfunction Stat({n,label,blue,red}:any){return

{n}

{label}

}\n\nfunction Modal({event,close,reload}:{event:Event;close:()=>void;reload:()=>void}){const [email,setEmail]=useState(\"\");const [msg,setMsg]=useState(\"\");async function submit(e:any){e.preventDefault();const r=await fetch(\"/api/events/\"+event.id+\"/join\",{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify({email})});const j=await r.json();setMsg(j.message||j.error);if(r.ok)reload()}return

e.stopPropagation()}>

{event.discipline}

{event.title}

{fmt(event.event_date)} · {event.location}

}\n\nexport function App(){const [view,setView]=useState(location.hash.slice(1)||\"home\");const [data,setData]=useState({cars:[],events:[],stats:{members:0,reservations:0,ready_cars:0}});const [pick,setPick]=useState(null);const load=()=>fetch(\"/api/dashboard\").then(r=>r.json()).then(setData);useEffect(load,[]);const go=(v:string)=>{setView(v);location.hash=v;scrollTo(0,0)};return

{view===\"home\"&&} {view===\"events\"&&} {view===\"fleet\"&&} {view===\"join\"&&} {view===\"desk\"&&}

{pick&&setPick(null)} reload={load}/>}

}","createdAt",["D",1787708422613],"branchVersion","branchId","deb63916-95c3-4389-b9d3-b76b7f2e6f65","id","39ce0c14-ff21-409b-88eb-7823ab8d5d9d","miata-life-crisis",["D",1787708091556],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Socially owned motorsport experiences","imageUrl","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","01a03bb4-ad04-7558-b577-f8ab6dcd8446","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","39ce0c14ff21409b88eb7823ab8d5d9d","tursoHostname","39ce0c14ff21409b88eb7823ab8d5d9d-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789533091345],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":56,"_105":106,"_107":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",18,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pchinjr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":237,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":238,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":239,"_85":240,"_87":241,"_89":25},"tree",[174,181,182,183],"files",[174,175,176,177,178,179,180,181,182,183],"counts",{"_164":64,"_165":141,"_166":64,"_167":168,"_169":170},"contents",[131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":158,"_32":159,"_30":160,"_137":-5,"_42":43,"_41":141,"_139":60,"_39":161,"_13":64,"_34":162,"_36":-5,"_24":25,"_144":-5,"_27":163},{"_44":152,"_32":153,"_30":154,"_137":-5,"_42":43,"_41":141,"_139":60,"_39":155,"_13":64,"_34":20,"_36":156,"_24":25,"_144":-5,"_27":157},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":141,"_139":60,"_39":149,"_13":64,"_34":20,"_36":150,"_24":25,"_144":-5,"_27":151},{"_44":135,"_32":136,"_30":58,"_137":-5,"_42":43,"_41":138,"_139":25,"_39":140,"_13":141,"_34":142,"_36":143,"_24":25,"_144":46,"_27":145},"f83df03b-c4c5-4ce6-ba39-b87eff7ae6c8","index.ts","parentId",4,"latest",["D",1787708416216],1,"http","import { parseVal, serveImmutableFile } 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\nasync function setup() {\n await sqlite.batch([\n { sql: `CREATE TABLE IF NOT EXISTS members (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT NOT NULL,email TEXT NOT NULL UNIQUE,interests TEXT NOT NULL,experience TEXT NOT NULL,status TEXT NOT NULL DEFAULT 'pending',joined_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP)` },\n { sql: `CREATE TABLE IF NOT EXISTS cars (id INTEGER PRIMARY KEY,name TEXT NOT NULL,year TEXT NOT NULL,discipline TEXT NOT NULL,status TEXT NOT NULL,detail TEXT NOT NULL,next_ready TEXT,accent TEXT NOT NULL)` },\n { sql: `CREATE TABLE IF NOT EXISTS events (id INTEGER PRIMARY KEY,title TEXT NOT NULL,event_date TEXT NOT NULL,location TEXT NOT NULL,discipline TEXT NOT NULL,car_id INTEGER,capacity INTEGER NOT NULL,status TEXT NOT NULL,description TEXT NOT NULL)` },\n { sql: `CREATE TABLE IF NOT EXISTS bookings (id INTEGER PRIMARY KEY AUTOINCREMENT,member_id INTEGER NOT NULL,event_id INTEGER NOT NULL,status TEXT NOT NULL DEFAULT 'confirmed',created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,UNIQUE(member_id,event_id))` },\n { sql: \"INSERT OR IGNORE INTO cars VALUES (1,?,?,?,?,?,?,?)\", args: [\"Red Five\",\"1999 Mazda MX-5\",\"Drift\",\"Ready\",\"Fresh fluids · 80% tires · aligned\",\"Now\",\"red\"] },\n { sql: \"INSERT OR IGNORE INTO cars VALUES (2,?,?,?,?,?,?,?)\", args: [\"Blue Monday\",\"2001 Mazda MX-5\",\"Track\",\"Ready\",\"Track inspection passed · new pads\",\"Now\",\"blue\"] },\n { sql: \"INSERT OR IGNORE INTO cars VALUES (3,?,?,?,?,?,?,?)\", args: [\"Dad Bod\",\"1994 Mazda MX-5\",\"Autocross\",\"Service\",\"Cooling refresh in progress\",\"Sep 8\",\"amber\"] },\n { sql: \"INSERT OR IGNORE INTO cars VALUES (4,?,?,?,?,?,?,?)\", args: [\"Long Way Round\",\"2006 Mazda MX-5\",\"Off-road pilot\",\"Planning\",\"Rallycross setup under evaluation\",\"2027\",\"green\"] },\n { sql: \"INSERT OR IGNORE INTO events VALUES (1,?,?,?,?,?,?,?,?)\", args: [\"Drift School: First Slide\",\"2026-09-19\",\"Virginia International Raceway\",\"Drift\",1,8,\"Open\",\"A low-pressure day for learning weight transfer, initiating a slide, and laughing at your first spin.\"] },\n { sql: \"INSERT OR IGNORE INTO events VALUES (2,?,?,?,?,?,?,?,?)\", args: [\"GT Pace: Full Course\",\"2026-10-17\",\"Dominion Raceway\",\"Track\",2,6,\"Open\",\"Lead-follow laps, coaching, and a properly prepared car without owning a trailer or a torque wrench collection.\"] },\n { sql: \"INSERT OR IGNORE INTO events VALUES (3,?,?,?,?,?,?,?,?)\", args: [\"Parking Lot Hero\",\"2026-11-08\",\"Hampton Roads Autocross\",\"Autocross\",3,10,\"Waitlist\",\"Cones, timing lights, and friendly competition. The purest dollar-to-grin ratio in motorsport.\"] },\n { sql: \"INSERT OR IGNORE INTO events VALUES (4,?,?,?,?,?,?,?,?)\", args: [\"Quarterly Garage Social\",\"2026-12-05\",\"The Shared Garage · Norfolk\",\"Social\",null,30,\"Open\",\"Meet the members, see the fleet, vote on next quarter, and help set maintenance priorities.\"] }\n ]);\n}\napp.get(\"/\", async c => { await setup(); return c.html(Root()); });\napp.get(\"/__immutable/*\", c => serveImmutableFile(c.req.path));\napp.get(\"/source\", c => c.redirect(parseVal().links.self.val));\napp.get(\"/api/dashboard\", async c => {\n await setup();\n const [cars,events,counts] = await Promise.all([\n sqlite.execute(\"SELECT * FROM cars ORDER BY id\"),\n sqlite.execute(`SELECT e.*,c.name car_name,COUNT(b.id) booked FROM events e LEFT JOIN cars c ON c.id=e.car_id LEFT JOIN bookings b ON b.event_id=e.id AND b.status='confirmed' GROUP BY e.id ORDER BY e.event_date`),\n sqlite.execute(`SELECT (SELECT COUNT(*) FROM members) members,(SELECT COUNT(*) FROM bookings) reservations,(SELECT COUNT(*) FROM cars WHERE status='Ready') ready_cars`)\n ]);\n return c.json({cars:cars.rows,events:events.rows,stats:counts.rows[0]});\n});\napp.post(\"/api/members\", async c => {\n await setup(); const b=await c.req.json();\n const name=String(b.name||\"\").trim(), email=String(b.email||\"\").trim().toLowerCase();\n const interests=Array.isArray(b.interests)?b.interests.join(\", \"):\"\", experience=String(b.experience||\"\");\n if(!name||!email.includes(\"@\")||!interests||!experience)return c.json({error:\"Please complete every field.\"},400);\n try { await sqlite.execute({sql:\"INSERT INTO members(name,email,interests,experience) VALUES(?,?,?,?)\",args:[name,email,interests,experience]}); return c.json({ok:true,message:\"You're on the founding member list.\"},201); }\n catch(err){ if(String(err).includes(\"UNIQUE\"))return c.json({error:\"That email is already on the member list.\"},409); throw err; }\n});\napp.post(\"/api/events/:id/join\", async c => {\n await setup(); const eventId=Number(c.req.param(\"id\")); const b=await c.req.json(); const email=String(b.email||\"\").trim().toLowerCase();\n const member=await sqlite.execute({sql:\"SELECT id FROM members WHERE email=?\",args:[email]});\n if(!member.rows.length)return c.json({error:\"Apply for membership first, then reserve your event.\"},404);\n const event=await sqlite.execute({sql:`SELECT e.capacity,e.status,COUNT(b.id) booked FROM events e LEFT JOIN bookings b ON b.event_id=e.id AND b.status='confirmed' WHERE e.id=? GROUP BY e.id`,args:[eventId]});\n if(!event.rows.length)return c.json({error:\"Event not found.\"},404);\n const row:any=event.rows[0]; const status=row.status===\"Waitlist\"||Number(row.booked)>=Number(row.capacity)?\"waitlist\":\"confirmed\";\n try { await sqlite.execute({sql:\"INSERT INTO bookings(member_id,event_id,status) VALUES(?,?,?)\",args:[Number((member.rows[0] as any).id),eventId,status]}); return c.json({ok:true,message:status===\"confirmed\"?\"Your spot is reserved.\":\"You're on the waitlist.\"},201); }\n catch(err){ if(String(err).includes(\"UNIQUE\"))return c.json({error:\"You're already registered for this event.\"},409); throw err; }\n});\napp.onError(err=>Promise.reject(err));\nexport default app.fetch;","label",[136],"e93ca4d6-3d1b-4f47-be68-a915258e0c74","README.md","01a03bb4-ad04-7558-b577-f661a8929c18",["D",1787708091556],"# 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",[147],"866b0aaf-14cc-4ced-bf06-af0ebb6336e2","CHANGELOG.md","01a03bb4-ad04-7558-b577-f25405a25147",["D",1787708091556],"# 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