hoisting silently\n drops all content when given multiple children (e.g. an\n expression plus a trailing string). */\n }\n <title>{`${props.appName}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":112,"_113":114},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","pikachu","name","Quickstart-Full-Stack","path","frontend/app.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":58,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/pikachu/Quickstart-Full-Stack/code/frontend/app.tsx","extension","id","8bd31934-db50-46e1-b576-4d696dea9d01","app.tsx","fileId","48f1fc50-4b21-11f1-aeb4-ee650bb23af1","parentId","85f9d6f8-4951-11f1-a16a-42b51c65c3df","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","branchVersion",376,"latest",true,"createdAt",["D",1788212990994],"version",18,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// app.tsx — SSR root: one Astryx AppShell, one page per request, no client\n// router. Theme mode is resolved from a cookie server-side — zero-FOUC, no JS.\n\nimport { AppShell, neutralTheme, renderToString, Theme } from \"./astryx/components.ts\";\nimport { AppSideNav } from \"./astryx/shell.tsx\";\nimport { clientJs } from \"./client.ts\";\nimport type { AppProps } from \"./types.ts\";\nimport { HomePage } from \"./pages/home.tsx\";\nimport { RemindersPage } from \"./pages/features/page-reminders.tsx\";\nimport { DocsOverviewPage } from \"./pages/docs/page-overview.tsx\";\n// File names deliberately avoid the \"http\"/\"cron\"/\"email\" substrings — vt's\n// trigger inference scans the full path of every .ts/.tsx file and would\n// otherwise register these as live HTTP/Cron/Email entry points. See\n// vals/AGENTS.md \"Trigger Filename Inference\".\nimport { HttpPage } from \"./pages/docs/page-routes.tsx\";\nimport { SqlitePage } from \"./pages/docs/page-sqlite.tsx\";\nimport { CronPage } from \"./pages/docs/page-schedule.tsx\";\nimport { EmailPage } from \"./pages/features/page-mail.tsx\";\nimport { BlobPage } from \"./pages/features/page-blob.tsx\";\nimport { AdminPage } from \"./pages/features/page-admin.tsx\";\nimport { DesignPage } from \"./pages/features/page-ui.tsx\";\n\n// \"vt\" monogram favicon, matches Astryx's neutral-theme ink.\nconst FAVICON =\n `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23171717'/%3E%3Ctext x='16' y='22' font-family='monospace' font-size='14' font-weight='bold' fill='%23fff' text-anchor='middle'%3Evt%3C/text%3E%3C/svg%3E`;\n\n// Exact-version CSS pinned to the versions declared in astryx/components.ts.\nconst ASTRYX_VERSION = \"0.5.2\";\nconst CSS_HREFS = [\n `https://cdn.jsdelivr.net/npm/@astryxdesign/core@${ASTRYX_VERSION}/src/reset.css`,\n `https://cdn.jsdelivr.net/npm/@astryxdesign/core@${ASTRYX_VERSION}/dist/astryx.css`,\n `https://cdn.jsdelivr.net/npm/@astryxdesign/theme-neutral@${ASTRYX_VERSION}/dist/theme.css`,\n];\n\nconst PAGES: Record React.ReactNode> = {\n home: HomePage,\n reminders: RemindersPage,\n docs: DocsOverviewPage,\n http: HttpPage,\n sqlite: SqlitePage,\n cron: CronPage,\n email: EmailPage,\n blob: BlobPage,\n admin: AdminPage,\n ui: DesignPage,\n};\n\nfunction App(props: AppProps) {\n const Page = PAGES[props.page] ?? HomePage;\n return (\n \n \n \n \n \n {\n /* Single expression child only — React 19's hoisting silently\n drops all content when given multiple children (e.g. an\n expression plus a trailing string). */\n }\n <title>{`${props.appName} · Val Town`}\n \n {CSS_HREFS.map((href) => )}\n {\n /* Utility CSS Astryx doesn't ship, or can't reach without a build\n step: .hidden — client.ts toggles it to show/hide demo tables\n before their first successful fetch; .field-input — styles the\n native elements used in place of Astryx's\n TextInput/Field (which crash under Deno SSR, see\n astryx/ssr-shims.ts) so they still match the design system's\n field radius, border, background, and focus-ring tokens instead\n of looking like unstyled browser chrome; .astryx-side-nav /\n .astryx-side-nav-item — Astryx's own stable component classes\n (see `astryx theme targets side-nav`), given real padding/gap\n here because neither is exposed as a SideNav prop and this repo\n has no `astryx theme build` step to compile a defineTheme\n component override into static CSS; .page-shell — caps every\n page's reading width (see pages/kit.tsx's PageShell); .theme-*\n — the sidebar's theme-mode

dropdown (see\n shell.tsx's ThemeForm) styled to match Button/Card chrome. */\n }\n \n \n \n \n \n }\n mobileNav={false}\n contentPadding={8}\n >\n \n \n \n