`, 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 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","label",[159,160,69],"frontend","components","pulls","branches","forks","envVars",{"_168":170,"_171":26},"connections",{"_168":26,"_169":26},"count","unfilledCount",4,"emptyCount",{"_32":313,"_13":159,"_67":270,"_42":-5,"_34":35,"_152":39,"_153":89,"_36":314,"_38":26,"_70":257,"_155":-5,"_72":24,"_157":-5,"_197":315,"_17":316},{"_32":309,"_13":160,"_67":151,"_42":270,"_34":35,"_152":39,"_153":89,"_36":310,"_38":26,"_70":257,"_155":-5,"_72":24,"_157":-5,"_197":311,"_17":312},{"_32":301,"_13":302,"_67":303,"_42":151,"_34":35,"_152":115,"_153":89,"_36":304,"_38":305,"_70":71,"_155":306,"_72":24,"_157":-5,"_197":307,"_17":308},{"_32":150,"_13":69,"_67":68,"_42":151,"_34":35,"_152":39,"_153":89,"_36":298,"_38":26,"_70":71,"_155":156,"_72":24,"_157":-5,"_197":299,"_17":300},{"_32":291,"_13":292,"_67":293,"_42":270,"_34":35,"_152":39,"_153":89,"_36":294,"_38":26,"_70":21,"_155":295,"_72":24,"_157":-5,"_197":296,"_17":297},{"_32":284,"_13":285,"_67":286,"_42":270,"_34":35,"_152":39,"_153":89,"_36":287,"_38":26,"_70":71,"_155":288,"_72":24,"_157":-5,"_197":289,"_17":290},{"_32":276,"_13":277,"_67":278,"_42":270,"_34":35,"_152":279,"_153":89,"_36":280,"_38":39,"_70":71,"_155":281,"_72":24,"_157":-5,"_197":282,"_17":283},{"_32":267,"_13":268,"_67":269,"_42":270,"_34":35,"_152":271,"_153":89,"_36":272,"_38":263,"_70":71,"_155":273,"_72":24,"_157":-5,"_197":274,"_17":275},{"_32":260,"_13":261,"_67":262,"_42":-5,"_34":35,"_152":263,"_153":89,"_36":264,"_38":26,"_70":257,"_155":-5,"_72":24,"_157":-5,"_197":265,"_17":266},{"_32":255,"_13":231,"_67":226,"_42":-5,"_34":35,"_152":212,"_153":89,"_36":256,"_38":26,"_70":257,"_155":-5,"_72":24,"_157":-5,"_197":258,"_17":259},{"_32":248,"_13":249,"_67":250,"_42":226,"_34":35,"_152":212,"_153":89,"_36":251,"_38":26,"_70":71,"_155":252,"_72":24,"_157":-5,"_197":253,"_17":254},{"_32":240,"_13":241,"_67":242,"_42":226,"_34":35,"_152":243,"_153":89,"_36":244,"_38":26,"_70":71,"_155":245,"_72":24,"_157":-5,"_197":246,"_17":247},{"_32":232,"_13":233,"_67":234,"_42":226,"_34":35,"_152":235,"_153":89,"_36":236,"_38":26,"_70":71,"_155":237,"_72":24,"_157":-5,"_197":238,"_17":239},{"_32":223,"_13":224,"_67":225,"_42":226,"_34":35,"_152":170,"_153":89,"_36":227,"_38":26,"_70":71,"_155":228,"_72":24,"_157":-5,"_197":229,"_17":230},{"_32":216,"_13":217,"_67":218,"_42":-5,"_34":35,"_152":39,"_153":89,"_36":219,"_38":26,"_70":21,"_155":220,"_72":24,"_157":-5,"_197":221,"_17":222},{"_32":207,"_13":208,"_67":209,"_42":-5,"_34":35,"_152":210,"_153":89,"_36":211,"_38":212,"_70":21,"_155":213,"_72":24,"_157":-5,"_197":214,"_17":215},{"_32":200,"_13":201,"_67":202,"_42":-5,"_34":35,"_152":39,"_153":89,"_36":203,"_38":26,"_70":21,"_155":204,"_72":24,"_157":-5,"_197":205,"_17":206},{"_32":190,"_13":191,"_67":87,"_42":-5,"_34":35,"_152":192,"_153":89,"_36":193,"_38":194,"_70":195,"_155":196,"_72":24,"_157":14,"_197":198,"_17":199},"4c33056e-0985-4078-b0ac-c3a4ef6d591d","index.ts",216,["D",1789223635380],61,"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 { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\nconst PUBLIC_ORIGIN = \"https://orla-oficinas.val.run\";\nconst ADMIN_USER_ID = \"71b54de0-4546-11f0-a91c-91c3b3e067f4\";\nconst HOLD_MINUTES = 45;\n\ntype Workshop = {\n slug: string;\n title: string;\n date: string;\n dateLabel: string;\n timeLabel: string;\n price: number | null;\n capacity: number;\n deposit: number;\n free: boolean;\n notionPageId: string;\n accent: string;\n soldOut?: boolean;\n};\n\nconst WORKSHOPS: Workshop[] = [\n {\n slug: \"massas-escola-chefs\",\n title: \"Massas com a Escola Chefs\",\n date: \"2026-09-11T18:30:00-03:00\",\n dateLabel: \"11 de setembro\",\n timeLabel: \"18h30\",\n price: 250,\n capacity: 12,\n deposit: 60,\n free: false,\n notionPageId: \"3c7a8360-c2ba-80e1-af17-e0782e8ac5dc\",\n accent: \"rose\",\n soldOut: true,\n },\n {\n slug: \"ceramica-fria\",\n title: \"Cerâmica Fria\",\n date: \"2026-09-12T14:00:00-03:00\",\n dateLabel: \"12 de setembro\",\n timeLabel: \"14h\",\n price: 180,\n capacity: 12,\n deposit: 60,\n free: false,\n notionPageId: \"3c4a8360-c2ba-8029-92d1-e9bdb5861d05\",\n accent: \"amber\",\n },\n {\n slug: \"cinema-no-orla\",\n title: \"Cinema no Orla\",\n date: \"2026-09-18T18:30:00-03:00\",\n dateLabel: \"18 de setembro\",\n timeLabel: \"18h30\",\n price: 0,\n capacity: 17,\n deposit: 0,\n free: true,\n notionPageId: \"3c4a8360-c2ba-809e-b6d4-da34374ed686\",\n accent: \"rose\",\n },\n {\n slug: \"kokedama\",\n title: \"Kokedama\",\n date: \"2026-09-19T09:30:00-03:00\",\n dateLabel: \"19 de setembro\",\n timeLabel: \"9h30\",\n price: 210,\n capacity: 12,\n deposit: 60,\n free: false,\n notionPageId: \"3c7a8360-c2ba-803e-8e3e-e04501ac2069\",\n accent: \"emerald\",\n },\n {\n slug: \"velas-aromaticas\",\n title: \"Velas Aromáticas\",\n date: \"2026-09-19T15:00:00-03:00\",\n dateLabel: \"19 de setembro\",\n timeLabel: \"15h\",\n price: 210,\n capacity: 12,\n deposit: 60,\n free: false,\n notionPageId: \"3c4a8360-c2ba-807e-bcf4-e2a461ce1d56\",\n accent: \"violet\",\n },\n {\n slug: \"termina-aquela-coisa\",\n title: \"Termina aquela coisa!\",\n date: \"2026-09-23T15:00:00-03:00\",\n dateLabel: \"23 de setembro\",\n timeLabel: \"15h às 17h\",\n price: 0,\n capacity: 12,\n deposit: 0,\n free: true,\n notionPageId: \"3cba8360-c2ba-805a-b19e-e935f295671f\",\n accent: \"amber\",\n },\n {\n slug: \"paint-and-sip-aperol-spritz\",\n title: \"Paint & Sip — Aperol Spritz\",\n date: \"2026-09-26T15:00:00-03:00\",\n dateLabel: \"26 de setembro\",\n timeLabel: \"15h\",\n price: 230,\n capacity: 20,\n deposit: 60,\n free: false,\n notionPageId: \"3c4a8360-c2ba-802a-8c3f-e830b490c67a\",\n accent: \"orange\",\n },\n];\n\nasync function ensureSchema() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS registrations (\n id TEXT PRIMARY KEY,\n workshop_slug TEXT NOT NULL,\n quantity INTEGER NOT NULL,\n status TEXT NOT NULL,\n created_at TEXT NOT NULL,\n expires_at TEXT,\n deposit_total REAL NOT NULL DEFAULT 0,\n mp_preference_id TEXT,\n mp_payment_id TEXT,\n notion_synced INTEGER NOT NULL DEFAULT 0\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS participants (\n id TEXT PRIMARY KEY,\n registration_id TEXT NOT NULL,\n full_name TEXT NOT NULL,\n phone TEXT NOT NULL,\n age INTEGER NOT NULL,\n created_at TEXT NOT NULL\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS notion_participant_links (\n participant_id TEXT PRIMARY KEY,\n notion_page_id TEXT NOT NULL,\n created_at TEXT NOT NULL\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS registration_checkout_urls (\n registration_id TEXT PRIMARY KEY,\n checkout_url TEXT NOT NULL,\n created_at TEXT NOT NULL\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS waitlist (\n id TEXT PRIMARY KEY,\n workshop_slug TEXT NOT NULL,\n full_name TEXT NOT NULL,\n phone TEXT NOT NULL,\n created_at TEXT NOT NULL\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS analytics_counters (\n event_type TEXT NOT NULL,\n workshop_slug TEXT NOT NULL DEFAULT '',\n count INTEGER NOT NULL DEFAULT 0,\n updated_at TEXT NOT NULL,\n PRIMARY KEY (event_type, workshop_slug)\n )`,\n },\n { sql: \"CREATE INDEX IF NOT EXISTS idx_reg_workshop ON registrations(workshop_slug, status, expires_at)\" },\n { sql: \"CREATE INDEX IF NOT EXISTS idx_participants_reg ON participants(registration_id)\" },\n { sql: \"CREATE UNIQUE INDEX IF NOT EXISTS idx_waitlist_workshop_phone ON waitlist(workshop_slug, phone)\" },\n ]);\n}\n\nfunction workshopBySlug(slug: string) {\n return WORKSHOPS.find((w) => w.slug === slug);\n}\n\nasync function usedSeats(slug: string) {\n const now = new Date().toISOString();\n const result = await sqlite.execute({\n sql: `SELECT COALESCE(SUM(quantity), 0) AS used\n FROM registrations\n WHERE workshop_slug = ?\n AND (status = 'confirmed' OR (status = 'held' AND expires_at > ?))`,\n args: [slug, now],\n });\n return Number(result.rows[0]?.used ?? 0);\n}\n\nfunction publicWorkshop(w: Workshop, used: number) {\n return {\n ...w,\n remaining: w.soldOut ? 0 : Math.max(0, w.capacity - used),\n notionPageId: undefined,\n };\n}\n\nfunction normalizePhone(value: unknown) {\n return String(value ?? \"\").replace(/\\D/g, \"\");\n}\n\nasync function notifyNewRegistration(workshop: Workshop, quantity: number) {\n const topic = Deno.env.get(\"NTFY_TOPIC\");\n if (!topic) return;\n try {\n await fetch(\"https://ntfy.sh\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n topic,\n title: \"Nova inscrição no Orla\",\n message: `${workshop.title} · ${quantity} ${quantity === 1 ? \"vaga confirmada\" : \"vagas confirmadas\"}`,\n priority: 4,\n click: `${PUBLIC_ORIGIN}/admin`,\n }),\n });\n } catch (error) {\n console.error(\"Notification error\", error);\n }\n}\n\nconst NOTION_VERSION = \"2026-03-11\";\nconst NOTION_CLIENTS_DATA_SOURCE_ID = \"306a8360-c2ba-8054-8f11-000b8c438310\";\n\nasync function notionRequest(path: string, init: RequestInit = {}) {\n const token = Deno.env.get(\"NOTION_API_KEY\");\n if (!token) throw new Error(\"Notion não configurado\");\n const response = await fetch(`https://api.notion.com${path}`, {\n ...init,\n headers: {\n Authorization: `Bearer ${token}`,\n \"Notion-Version\": NOTION_VERSION,\n \"Content-Type\": \"application/json\",\n ...(init.headers || {}),\n },\n });\n const data = await response.json();\n if (!response.ok) {\n console.error(\"Notion API error\", response.status, JSON.stringify(data));\n throw new Error(data?.message || `Notion respondeu ${response.status}`);\n }\n return data;\n}\n\nasync function syncRegistrationToNotion(registrationId: string) {\n const token = Deno.env.get(\"NOTION_API_KEY\");\n if (!token) return false;\n\n const regResult = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, status, notion_synced FROM registrations WHERE id = ?\",\n args: [registrationId],\n });\n if (!regResult.rows.length) return false;\n const reg = regResult.rows[0] as Record;\n if (String(reg.status) !== \"confirmed\") return false;\n if (Number(reg.notion_synced) === 1) return true;\n\n const workshop = workshopBySlug(String(reg.workshop_slug));\n if (!workshop) throw new Error(\"Oficina não encontrada para sincronizar com o Notion\");\n\n const participantsResult = await sqlite.execute({\n sql: \"SELECT id, full_name, phone, age FROM participants WHERE registration_id = ? ORDER BY created_at ASC\",\n args: [registrationId],\n });\n\n const notionParticipantIds: string[] = [];\n for (const row of participantsResult.rows as Record[]) {\n const participantId = String(row.id);\n const existingLink = await sqlite.execute({\n sql: \"SELECT notion_page_id FROM notion_participant_links WHERE participant_id = ?\",\n args: [participantId],\n });\n\n let notionPageId = existingLink.rows.length ? String(existingLink.rows[0]?.notion_page_id) : \"\";\n if (!notionPageId) {\n const created = await notionRequest(\"/v1/pages\", {\n method: \"POST\",\n body: JSON.stringify({\n parent: { type: \"data_source_id\", data_source_id: NOTION_CLIENTS_DATA_SOURCE_ID },\n properties: {\n Name: {\n title: [{ type: \"text\", text: { content: String(row.full_name) } }],\n },\n Text: {\n rich_text: [{\n type: \"text\",\n text: { content: `WhatsApp: ${String(row.phone)} · Idade: ${String(row.age)}` },\n }],\n },\n },\n }),\n });\n notionPageId = String(created.id);\n await sqlite.execute({\n sql: \"INSERT OR REPLACE INTO notion_participant_links (participant_id, notion_page_id, created_at) VALUES (?, ?, ?)\",\n args: [participantId, notionPageId, new Date().toISOString()],\n });\n }\n notionParticipantIds.push(notionPageId);\n }\n\n const eventPage = await notionRequest(`/v1/pages/${workshop.notionPageId}`);\n const currentRelation = Array.isArray(eventPage?.properties?.Alunas?.relation)\n ? eventPage.properties.Alunas.relation.map((item: any) => String(item.id))\n : [];\n const mergedIds = Array.from(new Set([...currentRelation, ...notionParticipantIds]));\n\n await notionRequest(`/v1/pages/${workshop.notionPageId}`, {\n method: \"PATCH\",\n body: JSON.stringify({\n properties: {\n Alunas: {\n relation: mergedIds.map((id) => ({ id })),\n },\n },\n }),\n });\n\n await sqlite.execute({\n sql: \"UPDATE registrations SET notion_synced = 1 WHERE id = ?\",\n args: [registrationId],\n });\n return true;\n}\n\nasync function adminAuthorized(c: any) {\n const session = await getOAuthUserData(c.req.raw);\n return session?.user?.id === ADMIN_USER_ID;\n}\n\nasync function removeRegistrationFromNotion(registrationId: string) {\n const regResult = await sqlite.execute({\n sql: \"SELECT workshop_slug FROM registrations WHERE id = ?\",\n args: [registrationId],\n });\n if (!regResult.rows.length) return;\n const workshop = workshopBySlug(String(regResult.rows[0]?.workshop_slug));\n if (!workshop || !Deno.env.get(\"NOTION_API_KEY\")) return;\n\n const linked = await sqlite.execute({\n sql: `SELECT l.notion_page_id\n FROM participants p\n JOIN notion_participant_links l ON l.participant_id = p.id\n WHERE p.registration_id = ?`,\n args: [registrationId],\n });\n const removeIds = new Set(linked.rows.map((row: any) => String(row.notion_page_id)));\n if (!removeIds.size) return;\n\n const eventPage = await notionRequest(`/v1/pages/${workshop.notionPageId}`);\n const currentRelation = Array.isArray(eventPage?.properties?.Alunas?.relation)\n ? eventPage.properties.Alunas.relation.map((item: any) => String(item.id))\n : [];\n const remainingIds = currentRelation.filter((id: string) => !removeIds.has(id));\n\n await notionRequest(`/v1/pages/${workshop.notionPageId}`, {\n method: \"PATCH\",\n body: JSON.stringify({\n properties: {\n Alunas: { relation: remainingIds.map((id: string) => ({ id })) },\n },\n }),\n });\n}\n\nasync function mercadoPagoPreference(\n registrationId: string,\n workshop: Workshop,\n quantity: number,\n participants: Array<{ fullName: string; phone: string; age: number }>,\n) {\n const token = Deno.env.get(\"MERCADOPAGO_ACCESS_TOKEN\");\n if (!token) throw new Error(\"Mercado Pago não configurado\");\n\n const participantNames = participants.map((person) => person.fullName);\n const participantLabel = participantNames.join(\" + \");\n const itemTitle = `${participantLabel} — ${workshop.title}`.slice(0, 256);\n const itemDescription =\n `${quantity} ${quantity === 1 ? \"vaga\" : \"vagas\"} · Participantes: ${participantNames.join(\" | \")}`.slice(0, 256);\n const paymentExpires = new Date(Date.now() + 30 * 60 * 1000).toISOString();\n const response = await fetch(\"https://api.mercadopago.com/checkout/preferences\", {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${token}`,\n \"Content-Type\": \"application/json\",\n \"X-Idempotency-Key\": registrationId,\n },\n body: JSON.stringify({\n items: [\n {\n id: workshop.slug,\n title: itemTitle,\n description: itemDescription,\n currency_id: \"BRL\",\n quantity,\n unit_price: workshop.deposit,\n },\n ],\n external_reference: registrationId,\n notification_url: `${PUBLIC_ORIGIN}/api/mercadopago/webhook`,\n back_urls: {\n success: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=success`,\n pending: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=pending`,\n failure: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=failure`,\n },\n auto_return: \"approved\",\n expires: true,\n expiration_date_to: paymentExpires,\n metadata: {\n registration_id: registrationId,\n workshop_slug: workshop.slug,\n participant_names: participantNames.join(\" | \"),\n participant_count: quantity,\n },\n }),\n });\n\n const data = await response.json();\n if (!response.ok || !data?.init_point) {\n console.error(\"Mercado Pago preference error\", response.status, JSON.stringify(data));\n throw new Error(\"Não foi possível iniciar o pagamento\");\n }\n return { preferenceId: String(data.id), checkoutUrl: String(data.init_point) };\n}\n\nasync function fetchPayment(paymentId: string) {\n const token = Deno.env.get(\"MERCADOPAGO_ACCESS_TOKEN\");\n if (!token) throw new Error(\"Mercado Pago não configurado\");\n const response = await fetch(`https://api.mercadopago.com/v1/payments/${encodeURIComponent(paymentId)}`, {\n headers: { Authorization: `Bearer ${token}` },\n });\n if (!response.ok) throw new Error(`Pagamento ${paymentId} não encontrado`);\n return await response.json();\n}\n\nfunction participantSignatures(participants: Array<{ fullName: string; phone: string; age: number }>) {\n return participants\n .map((person) => `${person.fullName}\\u0000${person.phone}\\u0000${person.age}`)\n .sort();\n}\n\nasync function replayExistingRegistration(\n c: any,\n registrationId: string,\n workshop: Workshop,\n cleanParticipants: Array<{ fullName: string; phone: string; age: number }>,\n) {\n let row: Record | null = null;\n let existingParticipants: Array<{ fullName: string; phone: string; age: number }> = [];\n let checkoutUrl = \"\";\n\n for (let attempt = 0; attempt < 40; attempt += 1) {\n const regResult = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, quantity, status, expires_at FROM registrations WHERE id = ?\",\n args: [registrationId],\n });\n if (!regResult.rows.length) return null;\n row = regResult.rows[0] as Record;\n\n const participantResult = await sqlite.execute({\n sql: \"SELECT full_name, phone, age FROM participants WHERE registration_id = ?\",\n args: [registrationId],\n });\n existingParticipants = (participantResult.rows as Record[]).map((person) => ({\n fullName: String(person.full_name),\n phone: String(person.phone),\n age: Number(person.age),\n }));\n\n if (!workshop.free) {\n const checkoutResult = await sqlite.execute({\n sql: \"SELECT checkout_url FROM registration_checkout_urls WHERE registration_id = ?\",\n args: [registrationId],\n });\n checkoutUrl = checkoutResult.rows.length ? String(checkoutResult.rows[0]?.checkout_url || \"\") : \"\";\n }\n\n const participantsReady = existingParticipants.length === Number(row.quantity);\n const responseReady = workshop.free || Boolean(checkoutUrl) || String(row.status) === \"cancelled\";\n if (participantsReady && responseReady) break;\n await new Promise((resolve) => setTimeout(resolve, 100));\n }\n\n if (!row) return null;\n if (String(row.workshop_slug) !== workshop.slug || Number(row.quantity) !== cleanParticipants.length) {\n return c.json({ error: \"Esta chave de envio já foi usada para outra inscrição.\" }, 409);\n }\n\n const originalPeople = participantSignatures(existingParticipants);\n const requestedPeople = participantSignatures(cleanParticipants);\n if (originalPeople.length !== requestedPeople.length || originalPeople.some((value, index) => value !== requestedPeople[index])) {\n return c.json({ error: \"Esta chave de envio já foi usada com dados diferentes.\" }, 409);\n }\n\n c.header(\"X-Idempotent-Replay\", \"true\");\n\n if (String(row.status) === \"cancelled\") {\n return c.json({ error: \"Esta tentativa de inscrição já foi cancelada. Atualize a página e tente novamente.\" }, 409);\n }\n\n if (workshop.free) {\n return c.json({\n ok: true,\n free: true,\n registrationId,\n confirmationUrl: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=free`,\n replayed: true,\n });\n }\n\n if (!checkoutUrl) {\n return c.json({ error: \"Sua inscrição já está sendo processada. Tente novamente em alguns segundos.\" }, 409);\n }\n\n return c.json({\n ok: true,\n free: false,\n registrationId,\n checkoutUrl,\n expiresAt: row.expires_at ? String(row.expires_at) : null,\n replayed: true,\n });\n}\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/confirmacao\", (c) => c.html(Root()));\napp.get(\"/admin\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.redirect(\"/auth/login\");\n if (session.user.id !== ADMIN_USER_ID) return c.text(\"Acesso restrito à conta administrativa do Orla.\", 403);\n return c.html(Root());\n});\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.post(\"/api/analytics\", async (c) => {\n await ensureSchema();\n const body = await c.req.json().catch(() => ({}));\n const eventType = String(body?.eventType || \"\");\n const allowedEvents = new Set([\"site_visit\", \"workshop_open\", \"reservation_click\"]);\n if (!allowedEvents.has(eventType)) return c.json({ error: \"Evento inválido\" }, 400);\n\n const workshopSlug = eventType === \"site_visit\" ? \"\" : String(body?.workshopSlug || \"\");\n if (eventType !== \"site_visit\" && !workshopBySlug(workshopSlug)) {\n return c.json({ error: \"Oficina inválida\" }, 400);\n }\n\n await sqlite.execute({\n sql: `INSERT INTO analytics_counters (event_type, workshop_slug, count, updated_at)\n VALUES (?, ?, 1, ?)\n ON CONFLICT(event_type, workshop_slug)\n DO UPDATE SET count = count + 1, updated_at = excluded.updated_at`,\n args: [eventType, workshopSlug, new Date().toISOString()],\n });\n return c.body(null, 204);\n});\n\napp.get(\"/api/admin/registrations\", async (c) => {\n if (!(await adminAuthorized(c))) return c.json({ error: \"Acesso administrativo não autorizado\" }, 401);\n await ensureSchema();\n\n const regs = await sqlite.execute({\n sql: `SELECT id, workshop_slug, quantity, status, created_at, expires_at,\n deposit_total, mp_payment_id, notion_synced\n FROM registrations\n ORDER BY created_at DESC`,\n });\n const participants = await sqlite.execute({\n sql: `SELECT id, registration_id, full_name, phone, age, created_at\n FROM participants\n ORDER BY created_at ASC`,\n });\n const waitlist = await sqlite.execute({\n sql: `SELECT id, workshop_slug, full_name, phone, created_at\n FROM waitlist\n ORDER BY created_at ASC`,\n });\n const analyticsRows = await sqlite.execute({\n sql: `SELECT event_type, workshop_slug, count\n FROM analytics_counters`,\n });\n const analyticsCounters = new Map(\n (analyticsRows.rows as Record[]).map((row) => [\n `${String(row.event_type)}:${String(row.workshop_slug)}`,\n Number(row.count || 0),\n ]),\n );\n const analyticsCount = (eventType: string, workshopSlug = \"\") =>\n analyticsCounters.get(`${eventType}:${workshopSlug}`) || 0;\n const workshopAnalytics = Object.fromEntries(WORKSHOPS.map((workshop) => [\n workshop.slug,\n {\n opens: analyticsCount(\"workshop_open\", workshop.slug),\n reservationClicks: analyticsCount(\"reservation_click\", workshop.slug),\n },\n ]));\n\n const peopleByRegistration = new Map();\n for (const person of participants.rows as Record[]) {\n const registrationId = String(person.registration_id);\n const list = peopleByRegistration.get(registrationId) || [];\n list.push({\n id: String(person.id),\n fullName: String(person.full_name),\n phone: String(person.phone),\n age: Number(person.age),\n createdAt: String(person.created_at),\n });\n peopleByRegistration.set(registrationId, list);\n }\n\n const workshopSummaries = await Promise.all(WORKSHOPS.map(async (workshop) => {\n const used = await usedSeats(workshop.slug);\n return {\n slug: workshop.slug,\n title: workshop.title,\n date: workshop.date,\n dateLabel: workshop.dateLabel,\n timeLabel: workshop.timeLabel,\n capacity: workshop.capacity,\n used,\n remaining: workshop.soldOut ? 0 : Math.max(0, workshop.capacity - used),\n free: workshop.free,\n };\n }));\n\n return c.json({\n analytics: {\n siteVisits: analyticsCount(\"site_visit\"),\n totalWorkshopOpens: WORKSHOPS.reduce((total, workshop) => total + analyticsCount(\"workshop_open\", workshop.slug), 0),\n totalReservationClicks: WORKSHOPS.reduce((total, workshop) => total + analyticsCount(\"reservation_click\", workshop.slug), 0),\n workshops: workshopAnalytics,\n },\n workshops: workshopSummaries,\n registrations: (regs.rows as Record[]).map((row) => ({\n id: String(row.id),\n workshopSlug: String(row.workshop_slug),\n quantity: Number(row.quantity),\n status: String(row.status),\n createdAt: String(row.created_at),\n expiresAt: row.expires_at ? String(row.expires_at) : null,\n depositTotal: Number(row.deposit_total || 0),\n hasPayment: Boolean(row.mp_payment_id),\n notionSynced: Number(row.notion_synced) === 1,\n participants: peopleByRegistration.get(String(row.id)) || [],\n })),\n waitlist: (waitlist.rows as Record[]).map((row) => ({\n id: String(row.id),\n workshopSlug: String(row.workshop_slug),\n fullName: String(row.full_name || \"\"),\n phone: String(row.phone),\n createdAt: String(row.created_at),\n })),\n });\n});\n\napp.post(\"/api/admin/registrations/:id/cancel\", async (c) => {\n if (!(await adminAuthorized(c))) return c.json({ error: \"Acesso administrativo não autorizado\" }, 401);\n await ensureSchema();\n const id = c.req.param(\"id\");\n\n const reg = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, status, mp_payment_id FROM registrations WHERE id = ?\",\n args: [id],\n });\n if (!reg.rows.length) return c.json({ error: \"Inscrição não encontrada\" }, 404);\n\n const row = reg.rows[0] as Record;\n const previousStatus = String(row.status);\n if (previousStatus !== \"cancelled\") {\n await sqlite.execute({\n sql: \"UPDATE registrations SET status = 'cancelled', expires_at = NULL WHERE id = ?\",\n args: [id],\n });\n }\n\n let notionWarning = \"\";\n try {\n await removeRegistrationFromNotion(id);\n } catch (error) {\n console.error(\"Notion admin cancellation sync error\", error);\n notionWarning = \"A vaga foi liberada no site, mas não conseguimos remover a pessoa do Notion automaticamente.\";\n }\n\n const workshopSlug = String(row.workshop_slug);\n const workshop = workshopBySlug(workshopSlug);\n const remaining = workshop ? Math.max(0, workshop.capacity - await usedSeats(workshopSlug)) : null;\n\n return c.json({\n ok: true,\n previousStatus,\n status: \"cancelled\",\n remaining,\n hadPayment: Boolean(row.mp_payment_id),\n notionWarning,\n refundPerformed: false,\n });\n});\n\napp.get(\"/api/workshops\", async (c) => {\n await ensureSchema();\n c.header(\"Cache-Control\", \"no-store, no-cache, must-revalidate\");\n const items = await Promise.all(WORKSHOPS.map(async (w) => publicWorkshop(w, await usedSeats(w.slug))));\n return c.json({ month: \"Setembro 2026\", workshops: items });\n});\n\napp.get(\"/api/registrations/:id\", async (c) => {\n await ensureSchema();\n const id = c.req.param(\"id\");\n const reg = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, quantity, status, created_at, expires_at, deposit_total, notion_synced FROM registrations WHERE id = ?\",\n args: [id],\n });\n if (!reg.rows.length) return c.json({ error: \"Inscrição não encontrada\" }, 404);\n const row = reg.rows[0] as Record;\n if (String(row.status) === \"confirmed\" && Number(row.notion_synced) !== 1) {\n try {\n await syncRegistrationToNotion(id);\n row.notion_synced = 1;\n } catch (error) {\n console.error(\"Notion sync retry error\", error);\n }\n }\n const workshop = workshopBySlug(String(row.workshop_slug));\n return c.json({\n registration: row,\n workshop: workshop ? { title: workshop.title, dateLabel: workshop.dateLabel, timeLabel: workshop.timeLabel, price: workshop.price, free: workshop.free } : null,\n });\n});\n\napp.post(\"/api/waitlist\", async (c) => {\n await ensureSchema();\n let body: any;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Dados inválidos\" }, 400);\n }\n\n const workshop = workshopBySlug(String(body?.workshopSlug ?? \"\"));\n if (!workshop) return c.json({ error: \"Oficina não encontrada\" }, 404);\n\n const fullName = String(body?.fullName ?? \"\").trim();\n if (fullName.length < 3 || !fullName.includes(\" \")) {\n return c.json({ error: \"Preencha seu nome completo\" }, 400);\n }\n\n const phone = normalizePhone(body?.phone);\n if (phone.length < 10 || phone.length > 13) {\n return c.json({ error: \"Preencha um WhatsApp válido com DDD\" }, 400);\n }\n\n const remaining = Math.max(0, workshop.capacity - await usedSeats(workshop.slug));\n if (!workshop.soldOut && remaining > 0) {\n return c.json({ error: \"Ainda há vagas disponíveis para essa oficina\", remaining }, 409);\n }\n\n try {\n await sqlite.execute({\n sql: \"INSERT INTO waitlist (id, workshop_slug, full_name, phone, created_at) VALUES (?, ?, ?, ?, ?)\",\n args: [crypto.randomUUID(), workshop.slug, fullName, phone, new Date().toISOString()],\n });\n } catch (error) {\n const message = String((error as any)?.message || error);\n if (message.includes(\"UNIQUE\") || message.includes(\"constraint\")) {\n return c.json({ ok: true, alreadyThere: true, message: \"Esse WhatsApp já está na lista de espera.\" });\n }\n throw error;\n }\n\n return c.json({ ok: true, message: \"Pronto! Seu WhatsApp entrou na lista de espera.\" });\n});\n\napp.post(\"/api/register\", async (c) => {\n await ensureSchema();\n let body: any;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Dados inválidos\" }, 400);\n }\n\n const workshop = workshopBySlug(String(body?.workshopSlug ?? \"\"));\n if (!workshop) return c.json({ error: \"Oficina não encontrada\" }, 404);\n\n if (workshop.soldOut) return c.json({ error: \"Essa atividade está esgotada\" }, 409);\n\n const participants = Array.isArray(body?.participants) ? body.participants : [];\n const quantity = participants.length;\n if (quantity < 1 || quantity > workshop.capacity) return c.json({ error: \"Quantidade de vagas inválida\" }, 400);\n\n const cleanParticipants = participants.map((p: any) => ({\n fullName: String(p?.fullName ?? \"\").trim(),\n phone: normalizePhone(p?.phone),\n age: Number(p?.age),\n }));\n\n for (const p of cleanParticipants) {\n if (p.fullName.length < 3) return c.json({ error: \"Preencha o nome completo de todas as pessoas\" }, 400);\n if (p.phone.length < 10 || p.phone.length > 13) return c.json({ error: \"Preencha um WhatsApp válido com DDD para todas as pessoas\" }, 400);\n if (!Number.isInteger(p.age) || p.age < 1 || p.age > 120) return c.json({ error: \"Preencha uma idade válida para todas as pessoas\" }, 400);\n }\n\n const idempotencyKey = String(c.req.header(\"Idempotency-Key\") || \"\").trim();\n if (!/^[A-Za-z0-9._:-]{8,200}$/.test(idempotencyKey)) {\n return c.json({ error: \"Chave de envio inválida. Atualize a página e tente novamente.\" }, 400);\n }\n\n const registrationId = idempotencyKey;\n const existingReplay = await replayExistingRegistration(c, registrationId, workshop, cleanParticipants);\n if (existingReplay) return existingReplay;\n\n const now = new Date().toISOString();\n const expiresAt = workshop.free ? null : new Date(Date.now() + HOLD_MINUTES * 60 * 1000).toISOString();\n const status = workshop.free ? \"confirmed\" : \"held\";\n const depositTotal = workshop.deposit * quantity;\n\n let inserted;\n try {\n inserted = await sqlite.execute({\n sql: `INSERT INTO registrations (id, workshop_slug, quantity, status, created_at, expires_at, deposit_total)\n SELECT ?, ?, ?, ?, ?, ?, ?\n WHERE (\n SELECT COALESCE(SUM(quantity), 0)\n FROM registrations\n WHERE workshop_slug = ?\n AND (status = 'confirmed' OR (status = 'held' AND expires_at > ?))\n ) + ? <= ?`,\n args: [\n registrationId,\n workshop.slug,\n quantity,\n status,\n now,\n expiresAt,\n depositTotal,\n workshop.slug,\n now,\n quantity,\n workshop.capacity,\n ],\n });\n } catch (error) {\n const message = String((error as any)?.message || error);\n if (message.includes(\"UNIQUE\") || message.includes(\"PRIMARY KEY\") || message.includes(\"constraint\")) {\n const replay = await replayExistingRegistration(c, registrationId, workshop, cleanParticipants);\n if (replay) return replay;\n }\n throw error;\n }\n\n if (!inserted.rowsAffected) {\n const remaining = Math.max(0, workshop.capacity - await usedSeats(workshop.slug));\n return c.json({ error: remaining ? `Restam apenas ${remaining} vagas` : \"Essa atividade acabou de esgotar\", remaining }, 409);\n }\n\n await sqlite.batch(cleanParticipants.map((p) => ({\n sql: \"INSERT INTO participants (id, registration_id, full_name, phone, age, created_at) VALUES (?, ?, ?, ?, ?, ?)\",\n args: [crypto.randomUUID(), registrationId, p.fullName, p.phone, p.age, now],\n })));\n\n if (workshop.free) {\n try {\n await syncRegistrationToNotion(registrationId);\n } catch (error) {\n console.error(\"Notion sync error (free registration)\", error);\n }\n await notifyNewRegistration(workshop, quantity);\n return c.json({\n ok: true,\n free: true,\n registrationId,\n confirmationUrl: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=free`,\n });\n }\n\n try {\n const payment = await mercadoPagoPreference(registrationId, workshop, quantity, cleanParticipants);\n await sqlite.batch([\n {\n sql: \"UPDATE registrations SET mp_preference_id = ? WHERE id = ?\",\n args: [payment.preferenceId, registrationId],\n },\n {\n sql: \"INSERT OR REPLACE INTO registration_checkout_urls (registration_id, checkout_url, created_at) VALUES (?, ?, ?)\",\n args: [registrationId, payment.checkoutUrl, new Date().toISOString()],\n },\n ]);\n return c.json({\n ok: true,\n free: false,\n registrationId,\n checkoutUrl: payment.checkoutUrl,\n expiresAt,\n });\n } catch (error) {\n await sqlite.execute({ sql: \"UPDATE registrations SET status = 'cancelled' WHERE id = ?\", args: [registrationId] });\n console.error(error);\n return c.json({ error: \"Não conseguimos abrir o pagamento agora. Tente novamente em instantes.\" }, 502);\n }\n});\n\napp.post(\"/api/mercadopago/webhook\", async (c) => {\n await ensureSchema();\n const url = new URL(c.req.url);\n let body: any = {};\n try {\n const text = await c.req.text();\n body = text ? JSON.parse(text) : {};\n } catch {\n body = {};\n }\n\n const paymentId = String(body?.data?.id ?? url.searchParams.get(\"data.id\") ?? url.searchParams.get(\"id\") ?? \"\");\n const type = String(body?.type ?? url.searchParams.get(\"type\") ?? url.searchParams.get(\"topic\") ?? \"\");\n if (!paymentId || (type && type !== \"payment\")) return c.json({ ok: true });\n\n try {\n const payment = await fetchPayment(paymentId);\n const registrationId = String(payment?.external_reference ?? payment?.metadata?.registration_id ?? \"\");\n if (!registrationId) return c.json({ ok: true });\n\n const reg = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, quantity, status, deposit_total FROM registrations WHERE id = ?\",\n args: [registrationId],\n });\n if (!reg.rows.length) return c.json({ ok: true });\n\n const row = reg.rows[0] as Record;\n const expected = Number(row.deposit_total ?? 0);\n const paid = Number(payment?.transaction_amount ?? 0);\n const paymentStatus = String(payment?.status ?? \"\");\n const previousStatus = String(row.status ?? \"\");\n\n if (paymentStatus === \"approved\" && paid + 0.001 >= expected) {\n await sqlite.execute({\n sql: \"UPDATE registrations SET status = 'confirmed', mp_payment_id = ? WHERE id = ?\",\n args: [paymentId, registrationId],\n });\n try {\n await syncRegistrationToNotion(registrationId);\n } catch (error) {\n console.error(\"Notion sync error (paid registration)\", error);\n }\n if (previousStatus !== \"confirmed\") {\n const workshop = workshopBySlug(String(row.workshop_slug));\n if (workshop) await notifyNewRegistration(workshop, Number(row.quantity || 1));\n }\n } else if ([\"rejected\", \"cancelled\", \"refunded\", \"charged_back\"].includes(paymentStatus)) {\n await sqlite.execute({\n sql: \"UPDATE registrations SET status = 'cancelled', mp_payment_id = ? WHERE id = ?\",\n args: [paymentId, registrationId],\n });\n }\n } catch (error) {\n console.error(\"Mercado Pago webhook error\", error);\n }\n return c.json({ ok: true });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default oauthMiddleware(app.fetch);\n","children",[],[191],"9d5bbfa2-85a7-4fa8-bc70-a3dfb4e2e6e8","README.md","01a02acc-a95e-76ab-8b59-762812ade588",["D",1787424450826],"# 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",[],[201],"95c96cf8-94da-4c64-8df1-447944042a4e","Images.md","d029011c-a028-11f1-972f-1607ee4eb77e",75,["D",1788214176194],2,"![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/71fc09ea-3c0b-43af-1988-67e3ca7d0100/public)\n\n![termina aquela coisa.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/cff9ca1f-98a4-47ef-d949-66978c266600/public)\n\n![1.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5a1052c5-a766-46e0-422f-6d5a61be9300/public)\n\n![2.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8fe86df6-4397-4f40-6e21-50c5e263d600/public)\n\n![3.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a5b8d9de-70dd-48d1-c806-062de39cc900/public)\n\n![4.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a8c169c3-109a-4b9f-83de-8151db1a9500/public)\n\n![5.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6838b57e-c73b-4eb3-95da-ab029a793900/public)\n\n![6.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f367e951-9a10-4cb8-f1df-251251ab0000/public)",[],[208],"649f0183-4bf2-4fc1-8eac-3a6419eab101","CHANGELOG.md","01a02acc-a95e-76ab-8b59-70355aa0da37",["D",1787424450826],"# 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

History · Counter.tsx