[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_112":113,"_114":115},"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/astryx/shell.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":63,"_64":34,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":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/astryx/shell.tsx","extension","id","3682c6cc-1fd6-4e70-adef-e5583188ba24","shell.tsx","fileId","abd853b8-a4a5-11f1-b7f1-1607ee4eb77e","parentId","ab9b8c1c-a4a5-11f1-acf3-1607ee4eb77e","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","branchVersion",368,"latest",true,"createdAt",["D",1788210558256],"version",6,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// shell.tsx — Side navigation, user section, and the theme-mode switcher.\n// Real navigation (server-rendered, per-route) — no client router.\n\nimport {\n Avatar,\n Badge,\n Button,\n Divider,\n HStack,\n SideNav,\n SideNavHeading,\n SideNavItem,\n SideNavSection,\n Text,\n VStack,\n} from \"./components.ts\";\nimport type { ThemeMode, UserInfo } from \"../types.ts\";\n\n// Flat top-level nav: this App's five features, one link each — no grouping,\n// scanned in one glance. Reference material lives below, in titled sections.\nconst NAV = [\n { page: \"home\", label: \"Home\", href: \"/\" },\n { page: \"reminders\", label: \"Reminders\", href: \"/reminders\" },\n { page: \"email\", label: \"Email Inbox\", href: \"/email\" },\n { page: \"blob\", label: \"Blob Storage\", href: \"/blob\" },\n { page: \"admin\", label: \"Admin\", href: \"/admin\" },\n { page: \"ui\", label: \"Design System\", href: \"/ui\" },\n];\n\n// Docs — three small titled sections instead of one collapsible tree. This\n// page has zero React hydration (see app.tsx), and Astryx's SideNavItem\n// collapse toggle is driven by internal onClick state — a collapsed group\n// would render a toggle that does nothing when clicked. SideNavSection is\n// always-expanded and purely static, so it's the only grouping primitive\n// that's guaranteed to work here; three of them stacked reads as the \"group\n// of groups\" this section wants without any dead click risk.\nconst DOCS_SECTIONS: { title: string; items: { page: string; label: string; href: string }[] }[] = [\n { title: \"Docs\", items: [{ page: \"docs\", label: \"Overview\", href: \"/docs\" }] },\n {\n title: \"Triggers\",\n items: [\n { page: \"http\", label: \"HTTP Trigger\", href: \"/http\" },\n { page: \"cron\", label: \"Cron Trigger\", href: \"/cron\" },\n ],\n },\n { title: \"Data\", items: [{ page: \"sqlite\", label: \"SQLite\", href: \"/sqlite\" }] },\n];\n\nconst MODES: { value: ThemeMode; label: string }[] = [\n { value: \"system\", label: \"Auto\" },\n { value: \"light\", label: \"Light\" },\n { value: \"dark\", label: \"Dark\" },\n];\n\n// ── UserSection ───────────────────────────────────────────────────────────────\n// Signed out: a real primary Button (not a bare link) — the sidebar's single\n// most important action when there's no session yet.\n// Signed in: an AvatarUserCard-style identity row (Avatar + name + role chip),\n// with \"Sign out\" as a full-width ghost button below it — declared full-width\n// on purpose via the `width` prop, unlike the accidental Badge-stretch bug\n// this fixed elsewhere (see fix/astryx-badge-stretch history).\n\nfunction UserSection({ user }: { user: UserInfo | null }) {\n if (!user) {\n return (\n