${title}

${subtitle}

${msg}

`;\n}\n\nasync function hashPattern(color:string, pattern:string) {\n const bytes = new TextEncoder().encode(`SAMI.TECH|${color}|${pattern}`);\n const digest = await crypto.subtle.digest('SHA-256', bytes);\n return Array.from(new Uint8Array(digest)).map(b => b.toString(16).padStart(2,'0')).join('');\n}\nfunction validPattern(pattern:string) {\n const parts = pattern.split('-');\n return parts.length >= 4 && parts.length <= 9 && parts.every(x => /^[1-9]$/.test(x)) && new Set(parts).size === parts.length;\n}\n\nconst html = `\nSAMI.TECH\n

☰ PARAMÈTRES

EN LIGNE

✓ ENREGISTRÉ

SCAN QR COLIS

Sélectionnez une couleur, scannez le QR puis entrez le montant du colis.

COLIS

ENVOYER LA LOCALISATION DU BUREAU

Saisissez le numéro puis appuyez sur WhatsApp ou Entrée.

SCAN QR

TRACKING : AUCUN

CADREZ LE QR CODE

Présentez le QR code du colis dans le cadre bleu.

MONTANT DU COLIS

TÉLÉPHONE CLIENT

SCHÉMA

Dessinez votre schéma.

HISTORIQUE DU JOUR

Sélectionnez une couleur.

$\"1984$

\n\n`;\n\napp.get(\"/\", async (c) => {\n c.header('Cache-Control','no-store, no-cache, must-revalidate');\n c.header('Pragma','no-cache');\n const state = await rootAccessState(c.req.header('cookie') || '');\n if (!state.configured) return c.html(accessPage('setup'));\n if (!state.valid) return c.html(accessPage('login'));\n return c.html(html);\n});\napp.get(\"/health\", (c) => c.json({ ok: true }));\n\napp.post(\"/api/access/setup\", async (c) => {\n if (await accessConfigured()) return c.redirect('/',303);\n const body = await c.req.parseBody();\n const code = String(body?.code || '').trim();\n const confirm = String(body?.confirm || '').trim();\n if (!/^[0-9]{4,8}$/.test(code)) return c.html(accessPage('setup','Le code doit contenir de 4 à 8 chiffres.'),400);\n if (code !== confirm) return c.html(accessPage('setup','Les deux codes ne correspondent pas.'),400);\n const salt = randomHex(16);\n const codeHash = await hashText(salt+'|'+code);\n await sqlite.execute({sql:'INSERT INTO app_access (id,salt,code_hash,updated_at) VALUES (1,?,?,?)',args:[salt,codeHash,Date.now()]});\n const token = randomHex(32);\n const tokenHash = await hashText(token);\n const expiresAt = Date.now() + 12*60*60*1000;\n await sqlite.execute({sql:'INSERT INTO access_sessions (token_hash,expires_at) VALUES (?,?)',args:[tokenHash,expiresAt]});\n const res = c.redirect('/',303);\n res.headers.append('Set-Cookie',`sami_session=${encodeURIComponent(token)}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=43200`);\n return res;\n});\n\napp.post(\"/api/access/login\", async (c) => {\n if (!(await accessConfigured())) return c.redirect('/',303);\n const now = Date.now();\n const key = clientKey(c);\n const failed = await sqlite.execute({sql:'SELECT attempts,locked_until FROM access_failures WHERE client_key=?',args:[key]});\n let attempts = failed.rows.length ? Number((failed.rows[0] as any).attempts || 0) : 0;\n let lockedUntil = failed.rows.length ? Number((failed.rows[0] as any).locked_until || 0) : 0;\n if (lockedUntil > now) {\n const seconds = Math.max(1,Math.ceil((lockedUntil-now)/1000));\n return c.html(accessPage('login','Trop de tentatives. Réessayez dans '+seconds+' seconde(s).'),429);\n }\n if (lockedUntil > 0 && lockedUntil <= now) attempts = 0;\n const body = await c.req.parseBody();\n const code = String(body?.code || '').trim();\n const cfg = await sqlite.execute('SELECT salt,code_hash FROM app_access WHERE id=1 LIMIT 1');\n const salt = String((cfg.rows[0] as any).salt || '');\n const expected = String((cfg.rows[0] as any).code_hash || '');\n const actual = await hashText(salt+'|'+code);\n if (!/^[0-9]{4,8}$/.test(code) || actual !== expected) {\n attempts += 1;\n const newLock = attempts >= 5 ? now + 5*60*1000 : 0;\n const storedAttempts = attempts >= 5 ? 0 : attempts;\n await sqlite.execute({sql:'INSERT INTO access_failures (client_key,attempts,locked_until,updated_at) VALUES (?,?,?,?) ON CONFLICT(client_key) DO UPDATE SET attempts=excluded.attempts,locked_until=excluded.locked_until,updated_at=excluded.updated_at',args:[key,storedAttempts,newLock,now]});\n return c.html(accessPage('login',attempts >= 5 ? 'Accès bloqué pendant 5 minutes.' : 'Code incorrect.'),401);\n }\n await sqlite.execute({sql:'DELETE FROM access_failures WHERE client_key=?',args:[key]});\n await sqlite.execute({sql:'DELETE FROM access_sessions WHERE expires_at<=?',args:[now]});\n const token = randomHex(32);\n const tokenHash = await hashText(token);\n const expiresAt = now + 12*60*60*1000;\n await sqlite.execute({sql:'INSERT INTO access_sessions (token_hash,expires_at) VALUES (?,?)',args:[tokenHash,expiresAt]});\n const res = c.redirect('/',303);\n res.headers.append('Set-Cookie',`sami_session=${encodeURIComponent(token)}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=43200`);\n return res;\n});\n\napp.post(\"/api/access/logout\", async (c) => {\n const token = readCookie(c.req.header('cookie') || '','sami_session');\n if (token) await sqlite.execute({sql:'DELETE FROM access_sessions WHERE token_hash=?',args:[await hashText(token)]});\n const res = c.redirect('/',303);\n res.headers.append('Set-Cookie','sami_session=; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=0');\n return res;\n});\n\napp.use('/api/*', async (c,next) => {\n const path = new URL(c.req.url).pathname;\n if (path.startsWith('/api/access/')) return next();\n if (!(await validSession(c.req.header('cookie') || ''))) return c.json({success:false,error:'Accès verrouillé'},401);\n await next();\n});\n\napp.get(\"/api/admin/settings-status\", async (c) => {\n const cfg = await sqlite.execute('SELECT 1 FROM settings_access WHERE id=1 LIMIT 1');\n return c.json({configured:cfg.rows.length > 0});\n});\n\napp.post(\"/api/admin/settings-setup\", async (c) => {\n try {\n const existing = await sqlite.execute('SELECT 1 FROM settings_access WHERE id=1 LIMIT 1');\n if (existing.rows.length) return c.json({success:false,error:'Le code PARAMÈTRES est déjà configuré.'},409);\n const body = await c.req.json();\n const appCode = String(body?.appCode || '').trim();\n const settingsCode = String(body?.settingsCode || '').trim();\n if (!/^[0-9]{4,8}$/.test(appCode) || !/^[0-9]{4,8}$/.test(settingsCode)) return c.json({success:false,error:'Les codes doivent contenir de 4 à 8 chiffres.'},400);\n if (appCode === settingsCode) return c.json({success:false,error:'Le code PARAMÈTRES doit être différent du code de l’application.'},400);\n const appCfg = await sqlite.execute('SELECT salt,code_hash FROM app_access WHERE id=1 LIMIT 1');\n if (!appCfg.rows.length) return c.json({success:false,error:'Code d’accès application non configuré.'},409);\n const appActual = await hashText(String((appCfg.rows[0] as any).salt || '')+'|'+appCode);\n if (appActual !== String((appCfg.rows[0] as any).code_hash || '')) return c.json({success:false,error:'Code application incorrect.'},401);\n const salt = randomHex(16);\n const codeHash = await hashText(salt+'|'+settingsCode);\n await sqlite.execute({sql:'INSERT INTO settings_access (id,salt,code_hash,updated_at) VALUES (1,?,?,?)',args:[salt,codeHash,Date.now()]});\n return c.json({success:true});\n } catch (_) {\n return c.json({success:false,error:'Impossible de créer le code PARAMÈTRES.'},500);\n }\n});\n\napp.post(\"/api/admin/settings-unlock\", async (c) => {\n try {\n const cfg = await sqlite.execute('SELECT salt,code_hash FROM settings_access WHERE id=1 LIMIT 1');\n if (!cfg.rows.length) return c.json({success:false,setupRequired:true,error:'Code PARAMÈTRES non configuré.'},409);\n const body = await c.req.json();\n const code = String(body?.code || '').trim();\n if (!/^[0-9]{4,8}$/.test(code)) return c.json({success:false,error:'Code PARAMÈTRES incorrect.'},401);\n const now = Date.now();\n const key = 'settings:'+clientKey(c);\n const failed = await sqlite.execute({sql:'SELECT attempts,locked_until FROM access_failures WHERE client_key=?',args:[key]});\n let attempts = failed.rows.length ? Number((failed.rows[0] as any).attempts || 0) : 0;\n let lockedUntil = failed.rows.length ? Number((failed.rows[0] as any).locked_until || 0) : 0;\n if (lockedUntil > now) {\n const seconds = Math.max(1,Math.ceil((lockedUntil-now)/1000));\n return c.json({success:false,error:'PARAMÈTRES bloqués. Réessayez dans '+seconds+' seconde(s).'},429);\n }\n if (lockedUntil > 0 && lockedUntil <= now) attempts = 0;\n const actual = await hashText(String((cfg.rows[0] as any).salt || '')+'|'+code);\n if (actual !== String((cfg.rows[0] as any).code_hash || '')) {\n attempts += 1;\n const newLock = attempts >= 5 ? now + 5*60*1000 : 0;\n const storedAttempts = attempts >= 5 ? 0 : attempts;\n await sqlite.execute({sql:'INSERT INTO access_failures (client_key,attempts,locked_until,updated_at) VALUES (?,?,?,?) ON CONFLICT(client_key) DO UPDATE SET attempts=excluded.attempts,locked_until=excluded.locked_until,updated_at=excluded.updated_at',args:[key,storedAttempts,newLock,now]});\n return c.json({success:false,error:attempts >= 5 ? 'PARAMÈTRES bloqués pendant 5 minutes.' : 'Code PARAMÈTRES incorrect.'},401);\n }\n await sqlite.execute({sql:'DELETE FROM access_failures WHERE client_key=?',args:[key]});\n return c.json({success:true});\n } catch (_) {\n return c.json({success:false,error:'Impossible de vérifier le code PARAMÈTRES.'},500);\n }\n});\n\napp.post(\"/api/admin/change-access-code\", async (c) => {\n try {\n const body = await c.req.json();\n const currentCode = String(body?.currentCode || '').trim();\n const newCode = String(body?.newCode || '').trim();\n if (!/^[0-9]{4,8}$/.test(currentCode)) return c.json({success:false,error:'Code actuel incorrect.'},401);\n if (!/^[0-9]{4,8}$/.test(newCode)) return c.json({success:false,error:'Le nouveau code doit contenir de 4 à 8 chiffres.'},400);\n if (currentCode === newCode) return c.json({success:false,error:'Le nouveau code doit être différent du code actuel.'},400);\n const cfg = await sqlite.execute('SELECT salt,code_hash FROM app_access WHERE id=1 LIMIT 1');\n if (!cfg.rows.length) return c.json({success:false,error:'Code d’accès non configuré.'},409);\n const salt = String((cfg.rows[0] as any).salt || '');\n const expected = String((cfg.rows[0] as any).code_hash || '');\n const actual = await hashText(salt+'|'+currentCode);\n if (actual !== expected) return c.json({success:false,error:'Code actuel incorrect.'},401);\n const settingsCfg = await sqlite.execute('SELECT salt,code_hash FROM settings_access WHERE id=1 LIMIT 1');\n if (settingsCfg.rows.length) {\n const sameAsSettings = await hashText(String((settingsCfg.rows[0] as any).salt || '')+'|'+newCode);\n if (sameAsSettings === String((settingsCfg.rows[0] as any).code_hash || '')) return c.json({success:false,error:'Le code de l’application doit être différent du code PARAMÈTRES.'},400);\n }\n const newSalt = randomHex(16);\n const newHash = await hashText(newSalt+'|'+newCode);\n const now = Date.now();\n await sqlite.execute({sql:'UPDATE app_access SET salt=?,code_hash=?,updated_at=? WHERE id=1',args:[newSalt,newHash,now]});\n await sqlite.execute('DELETE FROM access_sessions');\n await sqlite.execute('DELETE FROM access_failures');\n const token = randomHex(32);\n const tokenHash = await hashText(token);\n const expiresAt = now + 12*60*60*1000;\n await sqlite.execute({sql:'INSERT INTO access_sessions (token_hash,expires_at) VALUES (?,?)',args:[tokenHash,expiresAt]});\n const res = c.json({success:true});\n res.headers.append('Set-Cookie',`sami_session=${encodeURIComponent(token)}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=43200`);\n return res;\n } catch (_) {\n return c.json({success:false,error:'Impossible de modifier le code d’accès.'},500);\n }\n});\n\napp.get(\"/api/pattern/status\", async (c) => {\n const color = String(c.req.query('color') || '').trim().toUpperCase();\n if (!['ANIS','RACIM','VERT','JAUNE','ROSE'].includes(color)) return c.json({configured:false,error:'Couleur invalide'},400);\n const result = await sqlite.execute({sql:'SELECT 1 FROM color_patterns WHERE color=? LIMIT 1',args:[color]});\n return c.json({configured:result.rows.length > 0});\n});\napp.post(\"/api/pattern/verify\", async (c) => {\n try {\n const body = await c.req.json();\n const color = String(body?.color || '').trim().toUpperCase();\n const pattern = String(body?.pattern || '').trim();\n if (!['ANIS','RACIM','VERT','JAUNE','ROSE'].includes(color) || !validPattern(pattern)) return c.json({success:false},400);\n const result = await sqlite.execute({sql:'SELECT pattern_hash FROM color_patterns WHERE color=?',args:[color]});\n if (!result.rows.length) return c.json({success:false,configured:false},200);\n const expected = String((result.rows[0] as any).pattern_hash || '');\n const actual = await hashPattern(color,pattern);\n return c.json({success:actual === expected,configured:true},200);\n } catch (err) {\n return c.json({success:false,error:err instanceof Error ? err.message : String(err)},500);\n }\n});\napp.post(\"/api/admin/pattern/set\", async (c) => {\n try {\n const body = await c.req.json();\n const color = String(body?.color || '').trim().toUpperCase();\n const pattern = String(body?.pattern || '').trim();\n if (String(body?.confirm || '') !== 'SET') return c.json({success:false,error:'Confirmation invalide'},400);\n if (!['ANIS','RACIM','VERT','JAUNE','ROSE'].includes(color)) return c.json({success:false,error:'Couleur invalide'},400);\n if (!validPattern(pattern)) return c.json({success:false,error:'Schéma invalide'},400);\n const patternHash = await hashPattern(color,pattern);\n await sqlite.execute({sql:'INSERT INTO color_patterns (color,pattern_hash,updated_at) VALUES (?,?,?) ON CONFLICT(color) DO UPDATE SET pattern_hash=excluded.pattern_hash,updated_at=excluded.updated_at',args:[color,patternHash,Date.now()]});\n return c.json({success:true});\n } catch (err) {\n return c.json({success:false,error:err instanceof Error ? err.message : String(err)},500);\n }\n});\napp.post(\"/api/admin/reset-dedup\", async (c) => {\n return c.json({success:true,deleted:0,localOnly:true});\n});\napp.post(\"/api/reserve\", async (c) => {\n try {\n const body = await c.req.json();\n const user = String(body?.user || \"\").trim().toUpperCase();\n let value = String(body?.value || \"\").trim();\n if (body?.manualPhone) {\n let phone = value.replace(/[^0-9]/g,'');\n if (phone.startsWith('00')) phone = phone.slice(2);\n if (/^213[5-7][0-9]{8}$/.test(phone)) phone = '0' + phone.slice(3);\n else if (/^[5-7][0-9]{8}$/.test(phone)) phone = '0' + phone;\n value = phone;\n }\n const scanId = String(body?.id || '').trim();\n if (!['ANIS','RACIM','VERT','JAUNE','ROSE'].includes(user)) return c.json({success:false,error:'Utilisateur invalide'},400);\n if (!value) return c.json({success:false,error:'Numéro vide'},400);\n if (!scanId) return c.json({success:false,error:'scan_id manquant'},400);\n return c.json({success:true,reserved:true,synced:false,localOnly:true},200);\n } catch (err) {\n return c.json({success:false,error:err instanceof Error ? err.message : String(err)},200);\n }\n});\n\napp.post(\"/api/scan\", async (c) => {\n try {\n const body = await c.req.json();\n const user = String(body?.user || \"\").trim().toUpperCase();\n let value = String(body?.value || \"\").trim();\n if (body?.manualPhone) {\n let phone = value.replace(/[^0-9]/g,'');\n if (phone.startsWith('00')) phone = phone.slice(2);\n if (/^213[5-7][0-9]{8}$/.test(phone)) phone = '0' + phone.slice(3);\n else if (/^[5-7][0-9]{8}$/.test(phone)) phone = '0' + phone;\n value = phone;\n }\n const scanId = String(body?.id || '').trim();\n if (!['ANIS','RACIM','VERT','JAUNE','ROSE'].includes(user)) return c.json({success:false,error:'Utilisateur invalide'},400);\n if (!value) return c.json({success:false,error:'Numéro vide'},400);\n if (!scanId) return c.json({success:false,error:'scan_id manquant'},400);\n\n const form = new URLSearchParams();\n form.set('user', user);\n form.set('color', user === 'ANIS' ? 'BLEU' : user === 'RACIM' ? 'ORANGE' : user);\n form.set('tracking', value);\n form.set('phone', String(body?.phone || ''));\n form.set('amount', String(body?.amount || ''));\n form.set('scan_id', scanId);\n form.set('timestamp', String(body?.timestamp || Date.now()));\n form.set('timezone', String(body?.timezone || 'Africa/Algiers'));\n\n const r = await fetch(GOOGLE_SCRIPT_URL, {\n method: 'POST',\n headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},\n body: form.toString(),\n redirect: 'follow'\n });\n const text = await r.text();\n let data:any;\n try { data = JSON.parse(text); } catch { throw new Error('Réponse Google invalide'); }\n if (!data?.success) throw new Error(data?.error || 'Échec Google Sheets');\n return c.json(data);\n } catch (err) {\n return c.json({success:false,error:err instanceof Error ? err.message : String(err),debug:true},200);\n }\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","fileType","http",353,"parentId","createdAt",["D",1789170706130],"branchVersion",354,"label","sami",[19],{"_33":80,"_13":81,"_37":82,"_44":-5,"_35":36,"_47":67,"_56":57,"_45":83,"_17":69,"_41":84,"_39":-5,"_59":60,"_49":-5,"_61":85,"_18":86},{"_33":73,"_13":74,"_37":75,"_44":-5,"_35":36,"_47":67,"_56":57,"_45":76,"_17":69,"_41":24,"_39":77,"_59":60,"_49":-5,"_61":78,"_18":79},{"_33":64,"_13":65,"_37":66,"_44":-5,"_35":36,"_47":67,"_56":57,"_45":68,"_17":69,"_41":24,"_39":70,"_59":60,"_49":-5,"_61":71,"_18":72},{"_33":34,"_13":19,"_37":38,"_44":-5,"_35":36,"_47":48,"_56":57,"_45":58,"_17":43,"_41":42,"_39":40,"_59":60,"_49":50,"_61":62,"_18":63},"latest",true,["D",1789170706130],"deleted",false,"children",[],[19],"83f92fb4-f268-4793-95ef-f4f4d62fcd1d","README.md","01a08325-c3d5-76d8-a1f2-6ce5083410b7",1,["D",1788906685327],0,"# 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",[],[65],"6a77602d-e02e-49c0-b11c-55682dcef565","CHANGELOG.md","01a08325-c3d5-76d8-a1f2-6baabc9a4774",["D",1788906685327],"# 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