[{"_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/pages/kit.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/pages/kit.tsx","extension","id","648a9ccd-3103-46c2-bb22-5c49b983052e","kit.tsx","fileId","addfd5a0-a4a5-11f1-b768-1607ee4eb77e","parentId","08e43bac-4c96-11f1-9b18-ee650bb23af1","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","branchVersion",378,"latest",true,"createdAt",["D",1788212991535],"version",5,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// kit.tsx — Small shared pieces reused across every info page: the top-level\n// page layout (PageShell/Panel), a reference link row, and a \"try the live\n// API\" card (button + output area wired by client.ts via id convention\n// `${id}-btn` / `${id}-out`).\n\nimport { Button, Card, Heading, HStack, Link, Text, VStack } from \"../astryx/components.ts\";\n\n/**\n * Every page's root return uses this instead of a bare VStack. Caps reading\n * width at 1120px and centers it — AppShell's content area spans the full\n * window between the sidebar and the screen edge, which reads as\n * un-anchored on wide monitors. Vertical rhythm between a page's top-level\n * blocks lives here too (gap=10), so no page reinvents it.\n */\nexport function PageShell({ children }: { children: React.ReactNode }) {\n return (\n

\n {children}\n

\n );\n}\n\n/**\n * Framed content block for interactive consoles — forms, live tables. This\n * replaces Astryx's own `Section`: it applies a negative inset that cancels\n * out *any* ancestor padding, so its own box renders flush with the page's\n * un-padded edge rather than lining up with its siblings (confirmed via\n * getBoundingClientRect — every page here nests it inside a padded\n * container, so every Section-framed block sat ~20-30px left of everything\n * around it). `Card` doesn't have this bug.\n */\nexport function Panel({ children, id }: { children: React.ReactNode; id?: string }) {\n return (\n \n {children}\n \n );\n}\n\nexport function PageLinks({ links }: { links: { href: string; label: string }[] }) {\n return (\n \n {links.map((l) => (\n \n {l.label}\n \n ))}\n \n );\n}\n\n/**\n * Link to a file in this val's public code browser. Every Val Town HTTP val\n * is browsable source regardless of privacy — but the browser URL needs the\n * *owner's* username, and the platform has no runtime API for that. Falls\n * back to a plain path when VAL_TOWN_USERNAME isn't set (see\n * backend/shared.ts and val.yml).\n */\nexport function SourceLink(\n { valTownUsername, appName, path }: { valTownUsername: string; appName: string; path: string },\n) {\n if (!valTownUsername) return code/{path};\n return (\n \n {path}\n \n );\n}\n\nexport function SourceLinkList(\n { valTownUsername, appName, files }: {\n valTownUsername: string;\n appName: string;\n files: readonly { path: string; desc: string }[];\n },\n) {\n return (\n \n {files.map((f) => (\n \n \n {f.desc}\n \n ))}\n \n );\n}\n\n/**\n * Fork CTA — the single most important button on a demo you want people to\n * copy. Points at Val Town's fork flow for this val; degrades to a plain\n * \"view on Val Town\" link when VAL_TOWN_USERNAME isn't set, same fallback\n * shape as SourceLink above.\n */\nexport function ForkButton(\n { valTownUsername, appName, size }: {\n valTownUsername: string;\n appName: string;\n size?: \"sm\" | \"md\" | \"lg\";\n },\n) {\n if (!valTownUsername) {\n return (\n \n );\n }\n return (\n \n );\n}\n\nexport function DemoBox(\n { id, title, label, endpoint }: { id: string; title: string; label: string; endpoint: string },\n) {\n return (\n \n \n {title}\n {endpoint}\n \n