`, 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",{"_340":341,"_342":343},"routes/_app.x.$handle.$name",{"_107":106,"_38":52,"_116":97,"_33":117,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_26":-5,"_128":-5,"_129":-5,"_130":31,"_131":132,"_133":66,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":31},"version",14,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","d23aafb7-1a20-4a77-9913-b7610c9f6db4","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","frontend/components/BadgeCard.tsx","latestPath","fileId","47a7bec6-a660-11f1-b76b-1607ee4eb77e","name","BadgeCard.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type Badge, cardSize } from \"../../shared/types.ts\";\n\nfunction initials(name: string) {\n return name.trim().split(/\\s+/).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? \"\").join(\"\") || \"?\";\n}\n\nfunction Photo({ badge, size, square }: { badge: Badge; size: number; square?: boolean }) {\n return (\n \n {badge.photoUrl\n ? $\"\"$ \n : (\n \n {initials(badge.name)}\n \n )}\n \n );\n}\n\nfunction Logo({ badge, height, onDark }: { badge: Badge; height: number; onDark?: boolean }) {\n if (badge.logoUrl) {\n return $\"\"$ ;\n }\n return (\n \n {(badge.company.trim()[0] ?? \"•\").toUpperCase()}\n \n );\n}\n\n/** Decorative barcode derived deterministically from the employee ID. */\nfunction Barcode({ value, color, height = 18 }: { value: string; color: string; height?: number }) {\n let seed = 7;\n for (const ch of value || \"0\") seed = (seed * 31 + ch.charCodeAt(0)) >>> 0;\n const bars: number[] = [];\n for (let i = 0; i < 46; i++) {\n seed = (seed * 1103515245 + 12345) & 0x7fffffff;\n bars.push((seed % 3) + 1);\n }\n return (\n

\n {bars.map((w, i) => (\n

\n ))}\n

\n );\n}\n\nfunction Identity({ badge, align = \"center\", scale = 1 }: { badge: Badge; align?: \"center\" | \"left\"; scale?: number }) {\n return (\n

{badge.name}

\n {badge.title}\n

\n {badge.department && (\n \n {badge.department}\n

\n )}\n

\n );\n}\n\nfunction Footer({ badge, color }: { badge: Badge; color: string }) {\n return (\n

\n {badge.showBarcode && }\n

\n {badge.employeeId}\n

\n {badge.footer && (\n

{badge.footer}

\n )}\n

\n );\n}\n\nexport function BadgeCard({ badge, id }: { badge: Badge; id?: string }) {\n const landscape = badge.orientation === \"landscape\";\n const size = cardSize(badge.orientation);\n const shell: React.CSSProperties = {\n ...size,\n background: badge.bg,\n color: badge.text,\n borderRadius: 10,\n overflow: \"hidden\",\n display: \"flex\",\n flexDirection: \"column\",\n fontFamily: \"ui-sans-serif, system-ui, sans-serif\",\n boxShadow: \"0 1px 3px rgba(0,0,0,0.18)\",\n WebkitPrintColorAdjust: \"exact\",\n printColorAdjust: \"exact\",\n };\n\n return (\n

\n {badge.template === \"classic\" && }\n {badge.template === \"modern\" && }\n {badge.template === \"minimal\" && }\n

\n );\n}\n\nfunction Classic({ badge, landscape }: { badge: Badge; landscape: boolean }) {\n return (\n <>\n \n \n

\n {badge.company}\n

\n \n \n \n \n \n

\n \n );\n}\n\nfunction Modern({ badge, landscape }: { badge: Badge; landscape: boolean }) {\n return (\n

\n \n \n \n

\n \n

\n {badge.company}\n

\n \n

Diff · v14