[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_490":491,"_492":493},"routes/_app.x.$handle.$name",{"_103":102,"_33":47,"_112":93,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":-5,"_125":-5,"_126":25,"_127":128,"_129":62,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",265,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":25},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",false,"deletedHere","path","frontend/pages/page-ui.tsx","latestPath","frontend/pages/features/page-ui.tsx","fileId","096c17b6-4c96-11f1-b50e-ee650bb23af1","name","page-ui.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n// page-ui.tsx — UI & Themes: gruvbox theory, live palette, component showcase.\n\nimport { Badge, CodeBlock, PageHeader, SectionTitle } from \"../ui/components.tsx\";\nimport { THEMES } from \"../ui/theme.ts\";\n\n// ── Snippets ──────────────────────────────────────────────────────────────────\n\nconst THEME_SNIPPET = {\n filename: \"frontend/ui/theme.ts — CSS architecture\",\n code: `// 1. :root defines the default palette (light-medium gruvbox).\n// 2. A media query overrides :root when the OS is in dark mode (\"auto\").\n// 3. An explicit [data-theme=\"X\"] attribute always wins — set by JS.\n// JS only writes one attribute. CSS does the rest.\n\n:root { /* light defaults */ }\n@media (prefers-color-scheme:dark) { :root:not([data-theme]) { /* dark defaults */ } }\n[data-theme=\"dark-hard\"] { /* hard-contrast dark */ }\n[data-theme=\"dark\"] { /* medium dark */ }\n[data-theme=\"dark-soft\"] { /* soft dark */ }\n[data-theme=\"light-soft\"] { /* soft light */ }\n[data-theme=\"light\"] { /* medium light */ }\n[data-theme=\"light-hard\"] { /* hard light */ }`,\n};\n\n// ── Live palette chip ---------------------------------------------------------\n// Uses CSS vars directly — updates instantly when the active theme changes.\n\nfunction PaletteChip({ varName, label }: { varName: string; label: string }) {\n return (\n

{label}

{varName}

\n );\n}\n\nconst ACCENT_VARS = [\n { varName: \"--red\", label: \"red\" },\n { varName: \"--green\", label: \"green\" },\n { varName: \"--yellow\", label: \"yellow\" },\n { varName: \"--orange\", label: \"orange\" },\n { varName: \"--purple\", label: \"purple\" },\n { varName: \"--aqua\", label: \"aqua\" },\n { varName: \"--blue\", label: \"blue\" },\n { varName: \"--gray\", label: \"gray\" },\n];\n\nconst SURFACE_VARS = [\n { varName: \"--bg\", label: \"bg\" },\n { varName: \"--bg1\", label: \"bg1\" },\n { varName: \"--bg2\", label: \"bg2\" },\n { varName: \"--bg3\", label: \"bg3\" },\n { varName: \"--fg4\", label: \"fg4\" },\n { varName: \"--fg3\", label: \"fg3\" },\n { varName: \"--fg2\", label: \"fg2\" },\n { varName: \"--fg\", label: \"fg\" },\n];\n\nfunction LivePalette() {\n return (\n

\n {ACCENT_VARS.map((v) => )}\n

\n {SURFACE_VARS.map((v) => )}\n

\n These chips read live CSS variables — switch themes to see them update instantly.\n

\n );\n}\n\n// ── Theme preview cards ───────────────────────────────────────────────────────\n\nfunction ThemeCard({ themeKey, dark }: { themeKey: string; dark: boolean }) {\n const p = THEMES[themeKey];\n const barGrad = dark\n ? `linear-gradient(90deg,${p.yellow},${p.orange},${p.red})`\n : `linear-gradient(90deg,${p.orange},${p.yellow},${p.green})`;\n return (\n

{p.label}

\n {p.bg}\n

\n );\n}\n\n// ── Page ──────────────────────────────────────────────────────────────────────\n\n/** ⚠️ I am a poorly written function... Please refactor me ⚠️ */\nexport function UiPage() {\n const darkKeys = Object.keys(THEMES).filter((k) => k.startsWith(\"dark\"));\n const lightKeys = Object.keys(THEMES).filter((k) => k.startsWith(\"light\"));\n\n return (\n

\n \n\n How themes work\n

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

Layer	What it sets	Who controls it
	red · green · yellow · orange · purple · aqua · blue · gray	Fixed per dark/light family
	bg → bg1 → bg2 → bg3 (darkest to lightest background)	Varies by contrast (hard/medium/soft)
	fg → fg2 → fg3 → fg4 (strongest to muted text)	Flips between dark/light families
	--brand · --link · --border · --card · --muted	Derived from the above — no hard-coding

\n\n Live palette — current theme\n \n\n Dark variants\n

\n {darkKeys.map((k) => )}\n

\n\n Light variants\n

\n {lightKeys.map((k) => )}\n

\n\n CSS architecture\n \n\n Component showcase\n

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

\n \n \n

\n Tip: Click any theme card above or use the dropdown in the sidebar. The URL updates so themed links are shareable.\n

\n );\n}\n","/** @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 Card,\n CodeBlock,\n Divider,\n EmptyState,\n Heading,\n HStack,\n StatusDot,\n Table,\n TableBody,\n TableCell,\n TableHeader,\n TableHeaderCell,\n TableRow,\n Text,\n VStack,\n} from \"../astryx/components.ts\";\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

Diff · v265