[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_113":114,"_115":116},"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/features/page-ui.tsx","project",{"_22":50,"_11":12,"_35":51,"_52":-5,"_53":44,"_54":55,"_56":55,"_57":58,"_59":60,"_61":62,"_63":64,"_65":34,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":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/features/page-ui.tsx","extension","id","9c962aa1-25ae-4852-90d7-03e829326273","page-ui.tsx","fileId","096c17b6-4c96-11f1-b50e-ee650bb23af1","parentId","39a158b8-a580-11f1-a64f-1607ee4eb77e","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","branchVersion",371,"latest",true,"createdAt",["D",1788212990994],"version",13,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// page-ui.tsx — Design System: how Astryx theming works + a component showcase.\n// Replaces the old hand-rolled Gruvbox palette page — Astryx ships its own\n// token system (color/spacing/radius CSS vars per theme), so this page now\n// explains *that* system instead of inventing another one.\n\nimport {\n Avatar,\n Badge,\n Banner,\n Button,\n ButtonGroup,\n CodeBlock,\n Divider,\n EmptyState,\n Heading,\n HStack,\n Link,\n StatusDot,\n Table,\n TableBody,\n TableCell,\n TableHeader,\n TableHeaderCell,\n TableRow,\n Text,\n VStack,\n} from \"../../astryx/components.ts\";\nimport { PageShell, Panel } from \"../kit.tsx\";\nimport type { CodeSnippet } from \"../../types.ts\";\n\nconst THEME_SNIPPET: CodeSnippet = {\n filename: \"app.tsx — how mode switching works\",\n code: `// Astryx's neutral theme CSS uses light-dark() gated on ancestor\n// color-scheme — so dark/light mode is \"free\": set two attributes\n// server-side and the browser does the rest, zero client JS.\n\n\n ...\n \n }>{page}\n \n`,\n};\n\nconst LAYER_ROWS: {\n layer: string;\n variant: \"purple\" | \"info\" | \"success\";\n sets: string;\n controlledBy: string;\n}[] = [\n {\n layer: \"Theme package\",\n variant: \"purple\",\n sets: \"Every color/spacing/radius/typography CSS variable\",\n controlledBy: \"@astryxdesign/theme-neutral\",\n },\n {\n layer: \"data-theme attribute\",\n variant: \"info\",\n sets: \"Which theme package's variables are active\",\n controlledBy: \"Server, from the mode cookie\",\n },\n {\n layer: \"color-scheme\",\n variant: \"success\",\n sets: \"Whether light-dark() resolves to light or dark values\",\n controlledBy: \"Same attribute, browser-native\",\n },\n];\n\nexport function DesignPage() {\n return (\n \n \n Design System\n \n This template's UI is built entirely on{\" \"}\n Astryx\n , Meta's open-source React + StyleX design system — no hand-rolled CSS, no custom palette.\n A theme is a package of CSS variables; switching mode just flips an HTML attribute.\n \n \n\n \n How theming works\n \n \n \n Layer\n Sets\n Controlled by\n \n \n \n {LAYER_ROWS.map((r) => (\n \n \n \n \n {r.sets}\n {r.controlledBy}\n \n ))}\n \n

\n \n \n\n \n Component showcase\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n