[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_646":647,"_648":649},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_17":18,"_51":-7,"_244":-5,"_19":245,"_246":247,"_248":249,"_250":251,"_252":253,"_21":254,"_255":-5,"_256":-5,"_257":24,"_258":259,"_260":202,"_261":-5,"_262":-5,"_263":264},"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":24,"_30":-5},"handle","pikachu","name","Quickstart-Full-Stack","branchName","main","path","frontend/pages/features/page-ui.tsx","project",{"_45":188,"_13":14,"_49":189,"_190":-5,"_191":24,"_192":193,"_194":193,"_195":196,"_197":198,"_30":80,"_199":200,"_201":202,"_203":-5,"_204":-5,"_205":206,"_53":54,"_207":208,"_209":210,"_211":212,"_213":-5,"_214":215,"_216":215,"_217":218,"_219":218,"_220":218,"_221":215,"_222":215,"_64":223,"_224":225,"_226":227,"_228":24},"file",{"_74":75,"_13":76,"_77":78,"_79":24,"_187":-5},"isDirectory",false,"page",0,"history",[31,32,33,34,35,36,37,38,39,40,41,42,43,44],"hasNext","userId",{"_45":179,"_47":48,"_49":180,"_51":181,"_53":54,"_55":182,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":183,"_21":184,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":185},{"_45":171,"_47":48,"_49":172,"_51":173,"_53":54,"_55":174,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":175,"_21":176,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":177},{"_45":163,"_47":48,"_49":164,"_51":165,"_53":54,"_55":166,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":167,"_21":168,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":169},{"_45":155,"_47":48,"_49":156,"_51":157,"_53":54,"_55":158,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":159,"_21":160,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":161},{"_45":147,"_47":48,"_49":148,"_51":149,"_53":54,"_55":150,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":151,"_21":152,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":153},{"_45":139,"_47":48,"_49":140,"_51":141,"_53":54,"_55":142,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":143,"_21":144,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":145},{"_45":131,"_47":48,"_49":132,"_51":133,"_53":54,"_55":134,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":135,"_21":136,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":137},{"_45":123,"_47":48,"_49":124,"_51":125,"_53":54,"_55":126,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":127,"_21":128,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":129},{"_45":115,"_47":48,"_49":116,"_51":117,"_53":54,"_55":118,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":119,"_21":120,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":121},{"_45":107,"_47":48,"_49":108,"_51":109,"_53":54,"_55":110,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":111,"_21":112,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":113},{"_45":99,"_47":48,"_49":100,"_51":101,"_53":54,"_55":102,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":103,"_21":104,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":105},{"_45":91,"_47":48,"_49":92,"_51":93,"_53":54,"_55":94,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":95,"_21":96,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":97},{"_45":83,"_47":48,"_49":84,"_51":85,"_53":54,"_55":86,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":87,"_21":88,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":89},{"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":65,"_21":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72},"id","096da61c-4c96-11f1-b50e-ee650bb23af1","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","createdAt",["D",1778434271084],"version",130,"orgId","019df771-9af8-7238-99a4-541e39355038","parentId","0964b53e-4c96-11f1-b531-ee650bb23af1","incomingCommitId","aiChatMessageId","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},"pull","merge","revert","multiple","commits",[73],{"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":65,"_21":66,"_67":-5,"_68":-5,"_69":-5},"fileId","096c17b6-4c96-11f1-b50e-ee650bb23af1","page-ui.tsx","fileType","script","deleted","173e7424-8658-428f-a3bc-ae4faeaabd1c","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/22c8ba37-42c8-4af4-8daf-8cdd2f5f1800/square512?exp=1789538399&sig=21cdba23f818845c8391e88088eb5ea9255dbc43e05efe79e25bd70ab9ddb43a","f0bb3c08-4cac-11f1-a15b-ee650bb23af1",["D",1778444107821],152,"f0a07044-4cac-11f1-8c2c-ee650bb23af1",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[90],{"_45":83,"_47":48,"_49":84,"_51":85,"_53":54,"_55":86,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":87,"_21":88,"_67":-5,"_68":-5,"_69":-5},"2e993668-4caf-11f1-8df1-ee650bb23af1",["D",1778445070935],165,"2e90e706-4caf-11f1-8c7b-ee650bb23af1",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[98],{"_45":91,"_47":48,"_49":92,"_51":93,"_53":54,"_55":94,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":95,"_21":96,"_67":-5,"_68":-5,"_69":-5},"7c168a1e-4cb2-11f1-8afd-ee650bb23af1",["D",1778446489121],200,"7bccf372-4cb2-11f1-a924-ee650bb23af1",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[106],{"_45":99,"_47":48,"_49":100,"_51":101,"_53":54,"_55":102,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":103,"_21":104,"_67":-5,"_68":-5,"_69":-5},"7d41c59c-4cb3-11f1-b66c-ee650bb23af1",["D",1778446920787],213,"7d383e32-4cb3-11f1-b5b2-ee650bb23af1",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[114],{"_45":107,"_47":48,"_49":108,"_51":109,"_53":54,"_55":110,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":111,"_21":112,"_67":-5,"_68":-5,"_69":-5},"e9c49978-4f02-11f1-b19a-ee650bb23af1",["D",1778700935549],223,"e9bb32d4-4f02-11f1-9c16-ee650bb23af1",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[122],{"_45":115,"_47":48,"_49":116,"_51":117,"_53":54,"_55":118,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":119,"_21":120,"_67":-5,"_68":-5,"_69":-5},"772d3196-7aa2-4d38-9fc7-4700d1067721",["D",1788104437495],251,"ce8b5245-2969-495f-aac7-a1105be8031d",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[130],{"_45":123,"_47":48,"_49":124,"_51":125,"_53":54,"_55":126,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":127,"_21":128,"_67":-5,"_68":-5,"_69":-5},"92b09adc-0801-4e4e-9c3c-a6034c117775",["D",1788116690172],265,"5185de5b-03ae-4b2f-958b-32d5b4407ba1",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[138],{"_45":131,"_47":48,"_49":132,"_51":133,"_53":54,"_55":134,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":135,"_21":136,"_67":-5,"_68":-5,"_69":-5},"1ec45a87-0e1a-4a91-b739-d144ce0d0475",["D",1788120654374],290,"d1988990-f53e-4770-b8ad-7ca523677633",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[146],{"_45":139,"_47":48,"_49":140,"_51":141,"_53":54,"_55":142,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":143,"_21":144,"_67":-5,"_68":-5,"_69":-5},"54cc67bc-3767-4dcb-9d71-f0d14234e2d3",["D",1788124293524],311,"abf4ec33-de67-480f-8fb0-fa7de63592f2",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[154],{"_45":147,"_47":48,"_49":148,"_51":149,"_53":54,"_55":150,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":151,"_21":152,"_67":-5,"_68":-5,"_69":-5},"d2705718-0537-4235-a6f0-ce6c2917f778",["D",1788124407783],314,"16bcd365-4568-4b0e-88e3-8681831be0db",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[162],{"_45":155,"_47":48,"_49":156,"_51":157,"_53":54,"_55":158,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":159,"_21":160,"_67":-5,"_68":-5,"_69":-5},"b7efeaee-0739-450f-b35c-994ef04b0de3",["D",1788132304387],322,"1b74f2f2-4a6d-4d33-8366-52205f0211f0",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[170],{"_45":163,"_47":48,"_49":164,"_51":165,"_53":54,"_55":166,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":167,"_21":168,"_67":-5,"_68":-5,"_69":-5},"8e2d125a-0cd3-4ff8-9f8f-589e9879553e",["D",1788210557407],357,"253bf394-2345-48f7-b529-9c37e4b2ba2a",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[178],{"_45":171,"_47":48,"_49":172,"_51":173,"_53":54,"_55":174,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":175,"_21":176,"_67":-5,"_68":-5,"_69":-5},"4d740a13-4e5d-41b2-94ff-0b4a5de2e780",["D",1788212990994],371,"f995a9ee-82fa-462e-bc44-8ebf5c60d3f8",{"_45":80,"_53":54,"_11":12,"_81":82},{"_74":75,"_13":76,"_77":78,"_79":24},[186],{"_45":179,"_47":48,"_49":180,"_51":181,"_53":54,"_55":182,"_57":-5,"_58":-5,"_59":-5,"_60":-5,"_61":-5,"_62":-5,"_63":-5,"_64":183,"_21":184,"_67":-5,"_68":-5,"_69":-5},"deletedAtVersion","5a09ae54-4895-11f1-80ec-42b51c65c3df",["D",1777994172310],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","An elegant template for an elegant single-person full stack app.","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3ed9401e-3850-4a69-dec2-1bdd924c0900/square512?exp=1789538399&sig=8ded5b974bfebef9817e2fbdffe4de4e1704e0d4cab9518c811db2594c0af107","pinnedFileId","e1c705aa-4b18-11f1-b4ae-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"tursoName","5a09ae54489511f180ec42b51c65c3df","tursoHostname","5a09ae54489511f180ec42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789511441255],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_243":82},"org",{"_11":12,"_238":239,"_81":82,"_30":80,"_240":241,"_242":24},"branch",{"_51":229,"_13":16,"_45":48,"_230":188,"_231":-5,"_232":-5,"_233":-5,"_234":-5,"_235":-5,"_236":14,"_237":12},"isOwned",384,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Minion","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_45":188,"_13":14,"_49":641,"_190":-5,"_191":24,"_192":193,"_194":193,"_195":196,"_197":198,"_30":80,"_199":200,"_201":202,"_203":-5,"_204":-5,"_205":206,"_53":54,"_207":208,"_209":210,"_211":642,"_213":-5,"_214":215,"_216":215,"_217":218,"_219":218,"_220":218,"_221":215,"_222":215,"_64":643,"_224":644,"_226":645,"_228":24},"tree",[288,296,318,321,322,323,324,325,326],"files",[288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326],"counts",{"_278":26,"_279":206,"_280":206,"_281":282,"_283":284},"contents",[],{"_45":265,"_13":76,"_74":75,"_55":266,"_47":48,"_267":181,"_268":202,"_49":269,"_51":270,"_77":78,"_271":272,"_79":24,"_273":-5,"_17":274},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},"9c962aa1-25ae-4852-90d7-03e829326273","39a158b8-a580-11f1-a64f-1607ee4eb77e","branchVersion","latest",["D",1788212990994],13,"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

History · page-ui.tsx