\n \n \n`;\n\nexport default function (req: Request): Promise | Response {\n const { pathname } = new URL(req.url);\n\n // view-source link → redirect to this val\n if (pathname === \"/source\") {\n return new Response(null, {\n status: 302,\n headers: { Location: parseVal().links.self.val },\n });\n }\n\n // serve any val file (transpiled to JS for .ts/.tsx) so the browser can run\n // the client bundle and its relative imports (./app.tsx, ../mod.ts, ...).\n if (pathname.endsWith(\".ts\") || pathname.endsWith(\".tsx\")) {\n return serveFile(pathname, import.meta.url);\n }\n\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n",[18,78],"1f6f5113-5d5c-4414-8c31-22b09c724e2c",["D",1784075151835],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Preview } from \"./app.tsx\";\n\nconst root = document.getElementById(\"root\")!;\ncreateRoot(root).render();\n",[18,90],"45e0b33e-c9bc-4020-b63f-fc16d05cf07c",["D",1784076371562],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\n\n// The real library — imported, never modified.\nimport {\n Button,\n cn,\n Heading,\n KylaProvider,\n Text,\n type TextTone,\n tw,\n useKylaMode,\n} from \"../mod.ts\";\nimport {\n COLOR_TOKENS,\n FONT_WEIGHT_STEPS,\n RADIUS_STEPS,\n SPACE_STEPS,\n TYPE_STEPS,\n} from \"../src/theme/tokens.ts\";\nimport type { Mode } from \"../src/theme/provider.tsx\";\n\nconst VARIANTS = [\"primary\", \"subtle\", \"ghost\", \"danger\"] as const;\nconst SIZES = [\"sm\", \"md\", \"lg\"] as const;\nconst HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;\nconst TONES: TextTone[] = [\"fg\", \"fg-muted\", \"accent\", \"danger\"];\n\n/** A titled section on an elevated card. */\nfunction Section({\n title,\n subtitle,\n children,\n}: {\n title: string;\n subtitle?: string;\n children: ReactNode;\n}) {\n return (\n \n

\n {title}\n

\n {subtitle && (\n

\n {subtitle}\n

\n )}\n

{children}

\n \n );\n}\n\n/** Small monospace label. */\nfunction Tag({ children }: { children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\n/** Light / dark / system switcher, driven by the library's own mode hook. */\nfunction ModeSwitcher() {\n const { mode, setMode } = useKylaMode();\n const modes: Mode[] = [\"light\", \"dark\", \"system\"];\n return (\n

\n Mode\n \n {modes.map((m) => (\n setMode(m)}\n className={cn(\n \"rounded-md px-3 py-1 text-sm font-medium capitalize transition\",\n m === mode\n ? cn(tw.bg(\"accent\"), tw.text(\"accent-fg\"))\n : cn(tw.text(\"fg\"), tw.bg(\"elevated\", \"hover\")),\n )}\n >\n {m}\n \n ))}\n

\n \n );\n}\n\nfunction ButtonMatrix() {\n return (\n

\n {/* variants × sizes */}\n {VARIANTS.map((variant) => (\n

\n \n {variant}\n \n variant=\"{variant}\"\n

\n {SIZES.map((size) => (\n \n ))}\n \n

\n ))}\n

\n );\n}\n\n/** A labelled row inside a matrix: what it is, and the prop that produced it. */\nfunction Row({\n label,\n children,\n}: {\n label: ReactNode;\n children: ReactNode;\n}) {\n return (\n

\n {label}\n {children}\n

\n );\n}\n\nfunction HeadingMatrix() {\n return (\n

\n {HEADING_LEVELS.map((level) => (\n \n Heading level {level}\n \n ))}\n

\n );\n}\n\nfunction TextMatrix() {\n return (\n

\n \n

\n {TYPE_STEPS.map((size) => (\n \n {size} — the quick brown fox jumps over the lazy dog\n \n ))}\n

\n \n\n \n

\n {FONT_WEIGHT_STEPS.map((weight) => (\n \n {weight} — the quick brown fox jumps over the lazy dog\n \n ))}\n

\n \n\n \n

\n {TONES.map((tone) => (\n \n {tone} — the quick brown fox jumps over the lazy dog\n \n ))}\n

\n \n

\n );\n}\n\nfunction TokenSwatches() {\n return (\n

\n {COLOR_TOKENS.map((token) => (\n \n \n

\n {token}\n

\n --kyla-{token}\n

\n ))}\n \n );\n}\n\nfunction StructuralScaleSummary() {\n return (\n

\n \n Structural scales\n \n

\n Spacing: {SPACE_STEPS.join(\", \")} (4px base) · Radius:{\" \"}\n {RADIUS_STEPS.join(\", \")} (8px base) · Type: {TYPE_STEPS.join(\", \")}\n

\n );\n}\n\nfunction WipBanner() {\n return (\n \n

\n 🚧 Preview / work in progress. This page renders the\n {\" \"}\n current{\" \"}\n Kylä UI surface — Text, Heading, and Button, plus the shipped theme,\n AA-checked palette, and structural scales. More components are on the\n way.\n

\n \n );\n}\n\nexport function Preview() {\n return (\n \n \n

\n {/* header */}\n

\n Kylä UI\n

\n Consistently styled components for Val Town apps. (Kylä ·\n Finnish for “village”.)\n

\n \n

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

\n alert(\"Saved! (from Kylä Button)\")}\n >\n Save\n \n \n \n \n

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

\n ✅ In place\n

Styling core — cn / tw / variants
KylaProvider + light / dark / system mode
Semantic design tokens
Real AA-checked palette
Spacing / radius / type scales
Button
Text / Heading

\n 🔜 To come\n

The rest of the v1 component set
Radix-backed components (e.g. Dialog)

\n \n\n \n Preview is illustrative — not a stable API.\n \n view source\n \n \n

\n \n \n );\n}\n",[18,96],"pulls","branches",7,"forks","envVars",{"_92":26,"_226":26},"connections",{"_92":26,"_225":26},"unfilledCount","emptyCount",{"_35":785,"_13":493,"_76":488,"_45":-5,"_37":38,"_195":42,"_196":24,"_39":786,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":787,"_17":788},{"_35":781,"_13":752,"_76":747,"_45":488,"_37":38,"_195":42,"_196":24,"_39":782,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":783,"_17":784},{"_35":774,"_13":775,"_76":776,"_45":747,"_37":38,"_195":42,"_196":24,"_39":777,"_41":26,"_79":21,"_198":778,"_81":30,"_199":-5,"_308":779,"_17":780},{"_35":767,"_13":768,"_76":769,"_45":747,"_37":38,"_195":42,"_196":24,"_39":770,"_41":26,"_79":21,"_198":771,"_81":30,"_199":-5,"_308":772,"_17":773},{"_35":760,"_13":761,"_76":762,"_45":747,"_37":38,"_195":42,"_196":24,"_39":763,"_41":26,"_79":21,"_198":764,"_81":30,"_199":-5,"_308":765,"_17":766},{"_35":753,"_13":754,"_76":755,"_45":747,"_37":38,"_195":42,"_196":24,"_39":756,"_41":26,"_79":21,"_198":757,"_81":30,"_199":-5,"_308":758,"_17":759},{"_35":744,"_13":745,"_76":746,"_45":747,"_37":38,"_195":42,"_196":24,"_39":748,"_41":26,"_79":21,"_198":749,"_81":30,"_199":-5,"_308":750,"_17":751},{"_35":740,"_13":725,"_76":720,"_45":488,"_37":38,"_195":42,"_196":24,"_39":741,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":742,"_17":743},{"_35":733,"_13":734,"_76":735,"_45":720,"_37":38,"_195":42,"_196":24,"_39":736,"_41":26,"_79":21,"_198":737,"_81":30,"_199":-5,"_308":738,"_17":739},{"_35":726,"_13":727,"_76":728,"_45":720,"_37":38,"_195":42,"_196":24,"_39":729,"_41":26,"_79":21,"_198":730,"_81":30,"_199":-5,"_308":731,"_17":732},{"_35":717,"_13":718,"_76":719,"_45":720,"_37":38,"_195":42,"_196":24,"_39":721,"_41":26,"_79":21,"_198":722,"_81":30,"_199":-5,"_308":723,"_17":724},{"_35":713,"_13":712,"_76":707,"_45":488,"_37":38,"_195":42,"_196":24,"_39":714,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":715,"_17":716},{"_35":704,"_13":705,"_76":706,"_45":707,"_37":38,"_195":42,"_196":24,"_39":708,"_41":26,"_79":21,"_198":709,"_81":30,"_199":-5,"_308":710,"_17":711},{"_35":700,"_13":515,"_76":551,"_45":488,"_37":38,"_195":42,"_196":24,"_39":701,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":702,"_17":703},{"_35":696,"_13":683,"_76":678,"_45":551,"_37":38,"_195":42,"_196":24,"_39":697,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":698,"_17":699},{"_35":692,"_13":515,"_76":687,"_45":678,"_37":38,"_195":42,"_196":24,"_39":693,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":694,"_17":695},{"_35":684,"_13":685,"_76":686,"_45":687,"_37":38,"_195":42,"_196":24,"_39":688,"_41":26,"_79":21,"_198":689,"_81":30,"_199":-5,"_308":690,"_17":691},{"_35":676,"_13":508,"_76":677,"_45":678,"_37":38,"_195":42,"_196":24,"_39":679,"_41":26,"_79":21,"_198":680,"_81":30,"_199":-5,"_308":681,"_17":682},{"_35":672,"_13":645,"_76":640,"_45":551,"_37":38,"_195":42,"_196":24,"_39":673,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":674,"_17":675},{"_35":668,"_13":515,"_76":649,"_45":640,"_37":38,"_195":42,"_196":24,"_39":669,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":670,"_17":671},{"_35":661,"_13":662,"_76":663,"_45":649,"_37":38,"_195":42,"_196":24,"_39":664,"_41":26,"_79":21,"_198":665,"_81":30,"_199":-5,"_308":666,"_17":667},{"_35":654,"_13":655,"_76":656,"_45":649,"_37":38,"_195":42,"_196":24,"_39":657,"_41":26,"_79":21,"_198":658,"_81":30,"_199":-5,"_308":659,"_17":660},{"_35":646,"_13":647,"_76":648,"_45":649,"_37":38,"_195":42,"_196":24,"_39":650,"_41":26,"_79":21,"_198":651,"_81":30,"_199":-5,"_308":652,"_17":653},{"_35":638,"_13":508,"_76":639,"_45":640,"_37":38,"_195":42,"_196":24,"_39":641,"_41":26,"_79":21,"_198":642,"_81":30,"_199":-5,"_308":643,"_17":644},{"_35":634,"_13":607,"_76":602,"_45":551,"_37":38,"_195":42,"_196":24,"_39":635,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":636,"_17":637},{"_35":630,"_13":515,"_76":611,"_45":602,"_37":38,"_195":42,"_196":24,"_39":631,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":632,"_17":633},{"_35":623,"_13":624,"_76":625,"_45":611,"_37":38,"_195":42,"_196":24,"_39":626,"_41":26,"_79":21,"_198":627,"_81":30,"_199":-5,"_308":628,"_17":629},{"_35":616,"_13":617,"_76":618,"_45":611,"_37":38,"_195":42,"_196":24,"_39":619,"_41":26,"_79":21,"_198":620,"_81":30,"_199":-5,"_308":621,"_17":622},{"_35":608,"_13":609,"_76":610,"_45":611,"_37":38,"_195":42,"_196":24,"_39":612,"_41":26,"_79":21,"_198":613,"_81":30,"_199":-5,"_308":614,"_17":615},{"_35":600,"_13":508,"_76":601,"_45":602,"_37":38,"_195":42,"_196":24,"_39":603,"_41":26,"_79":21,"_198":604,"_81":30,"_199":-5,"_308":605,"_17":606},{"_35":596,"_13":562,"_76":557,"_45":551,"_37":38,"_195":42,"_196":24,"_39":597,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":598,"_17":599},{"_35":592,"_13":515,"_76":566,"_45":557,"_37":38,"_195":42,"_196":24,"_39":593,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":594,"_17":595},{"_35":585,"_13":586,"_76":587,"_45":566,"_37":38,"_195":42,"_196":24,"_39":588,"_41":26,"_79":21,"_198":589,"_81":30,"_199":-5,"_308":590,"_17":591},{"_35":578,"_13":579,"_76":580,"_45":566,"_37":38,"_195":42,"_196":24,"_39":581,"_41":26,"_79":21,"_198":582,"_81":30,"_199":-5,"_308":583,"_17":584},{"_35":571,"_13":572,"_76":573,"_45":566,"_37":38,"_195":42,"_196":24,"_39":574,"_41":26,"_79":21,"_198":575,"_81":30,"_199":-5,"_308":576,"_17":577},{"_35":563,"_13":564,"_76":565,"_45":566,"_37":38,"_195":42,"_196":24,"_39":567,"_41":26,"_79":21,"_198":568,"_81":30,"_199":-5,"_308":569,"_17":570},{"_35":555,"_13":508,"_76":556,"_45":557,"_37":38,"_195":42,"_196":24,"_39":558,"_41":26,"_79":21,"_198":559,"_81":30,"_199":-5,"_308":560,"_17":561},{"_35":550,"_13":516,"_76":510,"_45":551,"_37":38,"_195":42,"_196":24,"_39":552,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":553,"_17":554},{"_35":546,"_13":515,"_76":520,"_45":510,"_37":38,"_195":42,"_196":24,"_39":547,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":548,"_17":549},{"_35":539,"_13":540,"_76":541,"_45":520,"_37":38,"_195":42,"_196":24,"_39":542,"_41":26,"_79":21,"_198":543,"_81":30,"_199":-5,"_308":544,"_17":545},{"_35":532,"_13":533,"_76":534,"_45":520,"_37":38,"_195":42,"_196":24,"_39":535,"_41":26,"_79":21,"_198":536,"_81":30,"_199":-5,"_308":537,"_17":538},{"_35":525,"_13":526,"_76":527,"_45":520,"_37":38,"_195":42,"_196":24,"_39":528,"_41":26,"_79":21,"_198":529,"_81":30,"_199":-5,"_308":530,"_17":531},{"_35":517,"_13":518,"_76":519,"_45":520,"_37":38,"_195":42,"_196":24,"_39":521,"_41":26,"_79":21,"_198":522,"_81":30,"_199":-5,"_308":523,"_17":524},{"_35":507,"_13":508,"_76":509,"_45":510,"_37":38,"_195":42,"_196":24,"_39":511,"_41":26,"_79":21,"_198":512,"_81":30,"_199":-5,"_308":513,"_17":514},{"_35":503,"_13":502,"_76":497,"_45":488,"_37":38,"_195":42,"_196":24,"_39":504,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":505,"_17":506},{"_35":494,"_13":495,"_76":496,"_45":497,"_37":38,"_195":107,"_196":24,"_39":498,"_41":214,"_79":21,"_198":499,"_81":30,"_199":-5,"_308":500,"_17":501},{"_35":485,"_13":486,"_76":487,"_45":488,"_37":38,"_195":42,"_196":24,"_39":489,"_41":26,"_79":21,"_198":490,"_81":30,"_199":-5,"_308":491,"_17":492},{"_35":194,"_13":18,"_76":114,"_45":-5,"_37":38,"_195":42,"_196":24,"_39":482,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":483,"_17":484},{"_35":212,"_13":96,"_76":95,"_45":114,"_37":38,"_195":107,"_196":24,"_39":479,"_41":214,"_79":91,"_198":215,"_81":30,"_199":-5,"_308":480,"_17":481},{"_35":208,"_13":90,"_76":89,"_45":114,"_37":38,"_195":42,"_196":24,"_39":476,"_41":26,"_79":91,"_198":210,"_81":30,"_199":-5,"_308":477,"_17":478},{"_35":204,"_13":78,"_76":77,"_45":114,"_37":38,"_195":42,"_196":24,"_39":473,"_41":26,"_79":80,"_198":206,"_81":30,"_199":-5,"_308":474,"_17":475},{"_35":469,"_13":360,"_76":370,"_45":-5,"_37":38,"_195":42,"_196":24,"_39":470,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":471,"_17":472},{"_35":465,"_13":443,"_76":438,"_45":370,"_37":38,"_195":42,"_196":24,"_39":466,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":467,"_17":468},{"_35":458,"_13":459,"_76":460,"_45":438,"_37":38,"_195":42,"_196":24,"_39":461,"_41":26,"_79":91,"_198":462,"_81":30,"_199":-5,"_308":463,"_17":464},{"_35":451,"_13":452,"_76":453,"_45":438,"_37":38,"_195":107,"_196":24,"_39":454,"_41":214,"_79":91,"_198":455,"_81":30,"_199":-5,"_308":456,"_17":457},{"_35":444,"_13":445,"_76":446,"_45":438,"_37":38,"_195":107,"_196":24,"_39":447,"_41":42,"_79":91,"_198":448,"_81":30,"_199":-5,"_308":449,"_17":450},{"_35":435,"_13":436,"_76":437,"_45":438,"_37":38,"_195":107,"_196":24,"_39":439,"_41":42,"_79":91,"_198":440,"_81":30,"_199":-5,"_308":441,"_17":442},{"_35":431,"_13":430,"_76":425,"_45":370,"_37":38,"_195":214,"_196":24,"_39":432,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":433,"_17":434},{"_35":422,"_13":423,"_76":424,"_45":425,"_37":38,"_195":107,"_196":24,"_39":426,"_41":42,"_79":91,"_198":427,"_81":30,"_199":-5,"_308":428,"_17":429},{"_35":418,"_13":382,"_76":377,"_45":370,"_37":38,"_195":42,"_196":24,"_39":419,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":420,"_17":421},{"_35":411,"_13":412,"_76":413,"_45":377,"_37":38,"_195":42,"_196":24,"_39":414,"_41":26,"_79":91,"_198":415,"_81":30,"_199":-5,"_308":416,"_17":417},{"_35":404,"_13":405,"_76":406,"_45":377,"_37":38,"_195":42,"_196":24,"_39":407,"_41":26,"_79":91,"_198":408,"_81":30,"_199":-5,"_308":409,"_17":410},{"_35":397,"_13":398,"_76":399,"_45":377,"_37":38,"_195":107,"_196":24,"_39":400,"_41":214,"_79":91,"_198":401,"_81":30,"_199":-5,"_308":402,"_17":403},{"_35":390,"_13":391,"_76":392,"_45":377,"_37":38,"_195":107,"_196":24,"_39":393,"_41":214,"_79":91,"_198":394,"_81":30,"_199":-5,"_308":395,"_17":396},{"_35":383,"_13":384,"_76":385,"_45":377,"_37":38,"_195":42,"_196":24,"_39":386,"_41":26,"_79":91,"_198":387,"_81":30,"_199":-5,"_308":388,"_17":389},{"_35":374,"_13":375,"_76":376,"_45":377,"_37":38,"_195":42,"_196":24,"_39":378,"_41":26,"_79":91,"_198":379,"_81":30,"_199":-5,"_308":380,"_17":381},{"_35":369,"_13":361,"_76":355,"_45":370,"_37":38,"_195":42,"_196":24,"_39":371,"_41":26,"_79":115,"_198":-5,"_81":30,"_199":-5,"_308":372,"_17":373},{"_35":362,"_13":363,"_76":364,"_45":355,"_37":38,"_195":42,"_196":24,"_39":365,"_41":26,"_79":91,"_198":366,"_81":30,"_199":-5,"_308":367,"_17":368},{"_35":352,"_13":353,"_76":354,"_45":355,"_37":38,"_195":42,"_196":24,"_39":356,"_41":26,"_79":91,"_198":357,"_81":30,"_199":-5,"_308":358,"_17":359},{"_35":345,"_13":346,"_76":347,"_45":-5,"_37":38,"_195":42,"_196":24,"_39":348,"_41":26,"_79":21,"_198":349,"_81":30,"_199":-5,"_308":350,"_17":351},{"_35":339,"_13":340,"_76":341,"_45":-5,"_37":38,"_195":42,"_196":24,"_39":342,"_41":26,"_79":21,"_198":336,"_81":30,"_199":-5,"_308":343,"_17":344},{"_35":332,"_13":333,"_76":334,"_45":-5,"_37":38,"_195":42,"_196":24,"_39":335,"_41":26,"_79":21,"_198":336,"_81":30,"_199":-5,"_308":337,"_17":338},{"_35":325,"_13":326,"_76":327,"_45":-5,"_37":38,"_195":107,"_196":24,"_39":328,"_41":214,"_79":21,"_198":329,"_81":30,"_199":-5,"_308":330,"_17":331},{"_35":318,"_13":319,"_76":320,"_45":-5,"_37":38,"_195":42,"_196":24,"_39":321,"_41":26,"_79":21,"_198":322,"_81":30,"_199":-5,"_308":323,"_17":324},{"_35":311,"_13":312,"_76":313,"_45":-5,"_37":38,"_195":42,"_196":24,"_39":314,"_41":26,"_79":21,"_198":315,"_81":30,"_199":-5,"_308":316,"_17":317},{"_35":303,"_13":304,"_76":305,"_45":-5,"_37":38,"_195":107,"_196":24,"_39":306,"_41":214,"_79":91,"_198":307,"_81":30,"_199":-5,"_308":309,"_17":310},"4def3fda-1765-4d81-bec4-1c62c9e7de82","mod.ts","019f632a-69d4-710e-80e2-cd9f72b88c81",["D",1784076371562],"/**\n * Kylä UI — public barrel for the zero-dependency core.\n *\n * Radix-backed components (e.g. Dialog) are intentionally NOT re-exported here;\n * they live behind their own import paths so Radix only loads when used (ADR-0002).\n */\n\n// Components\nexport { Button, type ButtonProps } from \"./src/components/button.tsx\";\nexport {\n Heading,\n type HeadingLevel,\n type HeadingProps,\n Text,\n type TextProps,\n type TextTone,\n} from \"./src/components/text.tsx\";\nexport { KylaProvider, type Mode, useKylaMode } from \"./src/theme/provider.tsx\";\nexport {\n type ColorToken,\n type FontWeightToken,\n type RadiusToken,\n type SpaceProperty,\n type SpaceToken,\n type State,\n tw,\n type TypeToken,\n} from \"./src/theme/tw.ts\";\nexport { cn } from \"./src/utils/cn.ts\";\nexport { variants } from \"./src/utils/variants.ts\";\n","children",[],[304],"079ed122-62c9-4baa-b243-8ea35082022e","deno.json","019f632a-69d4-710e-80e2-cb2ae713e438",["D",1784075151835],"{\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n },\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-sloppy-imports\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true\n },\n \"fmt\": {\n \"exclude\": [\".vt/\"]\n },\n \"lint\": {\n \"include\": [\"mod.ts\", \"preview/\", \"src/\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-import-prefix\"]\n }\n },\n \"tasks\": {\n \"fmt\": \"deno fmt\",\n \"fmt:check\": \"deno fmt --check\",\n \"lint\": \"deno lint\",\n \"typecheck\": \"deno check --allow-import=esm.town,www.val.town,esm.sh,jsr.io mod.ts preview src\",\n \"test\": \"deno test --allow-import=esm.town,www.val.town,esm.sh,jsr.io\",\n \"check\": \"deno task fmt:check && deno task lint && deno task typecheck && deno task test\"\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}\n",[],[312],"2adcb6c4-3db3-446f-ad45-99bb741f7c46","README.md","019f632a-69d4-710e-80e2-c76f50b01210",["D",1784075151835],"# Kylä UI\n\nA component library for building **consistently styled** web apps on Val Town.\nKylä is Finnish for \"village.\"\n\nMost Val Town apps are assembled fast and without a designer, so they end up\nlooking inconsistent. Kylä gives you opinionated, on-system components so your\napp looks coherent by default. Accessibility (semantic HTML, label association,\nvisible focus, AA contrast) is a quiet guarantee underneath.\n\nBuilt for Val Town's reality: **no build step**. Components are React, styled\nwith runtime [Twind](https://twind.style) + semantic CSS-variable tokens, and\nconsumed by import — no bundler, no codegen.\n\n## Quick start\n\n1. Your HTML shell must load Twind (it has to be present before first paint):\n\n ```html\n \n ```\n\n2. Wrap your app in `KylaProvider` (it injects the design tokens and owns\n light/dark mode), then use components:\n\n ```tsx\n /** @jsxImportSource https://esm.sh/react@18.2.0 */\n import {\n Button,\n KylaProvider,\n } from \"https://esm.town/v/nbbaier/kyla-ui/mod.ts\";\n\n export function App() {\n return (\n \n \n \n );\n }\n ```\n\nTo pin a version, append `?v=NNN` to the import URL; the unpinned URL always\ntracks the latest release (see\n[ADR-0004](docs/adr/0004-version-pinned-upgrade-contract.md)).\n\n## Status\n\nEarly. The styling foundation (`cn`, `tw`, `variants`, `KylaProvider`), real\nAA-checked palette, structural spacing/radius/type scales, and first component\n(`Button`) are in place. The rest of the v1 component set is still to come.\n\n## Components\n\n- `Button` — `variant`: `primary | subtle | ghost | danger`, `size`:\n `sm | md | lg`.\n\n## Project docs\n\n- [`CONTEXT.md`](CONTEXT.md) — the glossary / shared language.\n- [`docs/roadmap.md`](docs/roadmap.md) — the dependency-ordered plan to v1 +\n status.\n- [`docs/adr/`](docs/adr/) — architecture decision records.\n\nThe substrate (Radix + Twind + tokens + Provider on Val Town) is proven in a\nseparate spike val, `nbbaier/kyla-ui-spike`.\n",[],[319],"e6bd7c35-e130-4d9d-97a2-5d95337aba29","CONTEXT.md","019f632a-69d4-710e-80e2-c25ffa618701",["D",1784076371562],"# Kylä UI — Context\n\nA glossary of the core terms in this project. Implementation details live in\ncode and ADRs, not here.\n\n> \"Kylä\" is Finnish for \"village.\"\n\n## Glossary\n\n### Kylä UI\n\nThe component library itself: a Val Town val (`nbbaier/kyla-ui`) that exports\nReact components, a styling system, and any helpers needed to build consistently\nstyled web apps. It is **consumed by import**\n(`import { ... } from \"https://esm.town/v/nbbaier/kyla-ui/...\"`), not by\nremixing. This val is the source of truth for visual consistency across apps. It\n**also serves its own Gallery** (docs) at its HTTP route — the library documents\nitself, co-located with its source.\n\n### Starter\n\nA separate, remixable demo val (`kyla-ui-starter` or similar) that shows\nidiomatic _end-to-end_ use of Kylä UI: a tiny but genuine **todo app** with a\nreal HTTP route and `std/sqlite`, a working app shell, Provider + hydration\nwiring, and view-source link. A new app begins by remixing the Starter, then\nediting. The Starter **depends on** Kylä UI; the library never depends on the\nStarter. (Component reference/docs live in the library's Gallery, not the\nStarter.)\n\n### Gallery\n\nThe library's self-hosted documentation surface: an HTTP route on `kyla-ui` that\nrenders every component in its variants and Modes, with the Mode toggle. It is\nboth living docs and the in-browser proof that the stack renders correctly on\nVal Town (Twind + CSS-var tokens, Provider mode, Radix `Dialog` hydration). The\nseed of a fuller docs site later.\n\n### Release\n\nA blessed version of Kylä UI, produced by merging a development branch into\n`main`. `main` is the stable line: raw development never happens on it, so\nHEAD-of-`main` is always a Release. Each Release corresponds to a concrete Val\nTown version number (`?v=NNN`). A consumer tracks Releases by importing the\nunpinned URL (always latest Release) or freezes onto one by pinning its\n`?v=NNN`, which the README's release table maps by name.\n\n### Consumer\n\nA web app (a val) built with Kylä UI. Gets visual consistency by importing the\nlibrary rather than copying its code.\n\n### Semantic Token\n\nA named, intent-based design value (e.g. \"base surface,\" \"default foreground,\"\n\"line/border,\" \"danger\") rather than a raw value (e.g. \"blue-500\"). Components\nreference semantic tokens only; they never hard-code raw colors. Tokens are the\nunit of visual consistency and the surface through which a Theme is applied.\n(Modeled on Cloudflare Kumo's semantic-token system.)\n\nCanonical token vocabulary (CSS custom properties, all prefixed `--kyla-`):\n\n- **Surfaces** (hierarchy): `base` → `elevated` → `recessed`\n- **Foreground:** `fg`, `fg-muted`\n- **Borders:** `line`, `hairline`\n- **Accent:** `accent`, `accent-fg`, `accent-ring`, `accent-text`\n- **Status:** `danger`, `danger-fg`, `danger-text`, `success`, `success-fg`\n- **Shape:** `radius`\n\nThe default theme's values conform to the Val Town UI style guide (see\n[ADR-0005](docs/adr/0005-val-town-visual-language-default-theme.md)); Kylä keeps\nits own richer surface hierarchy over VT's palette.\n\nOf these, the consumer-facing Override Surface for v1 is exactly\n`--kyla-accent`, `--kyla-radius`, and `--kyla-font`; the rest are structural and\noutside the supported theme override surface.\n\n### Theme\n\nA complete set of values bound to the Semantic Tokens, producing a coherent\nlook. A consumer switches the active theme without touching component code.\nLight/dark is one axis of theming; brand/variant overrides are another.\n\nFor v1, Kylä ships **one opinionated theme** with automatic light/dark, and\nexposes a deliberately small **Override Surface**: consumers may redefine\n`--kyla-accent`, `--kyla-radius`, and `--kyla-font` (with the graduated radius\ntokens deriving directly from `--kyla-radius`). Everything else is structural\nand fixed as the supported consumer contract: the surface hierarchy, foreground\nand border roles, status roles, spacing scale, type sizes and line-heights, and\nfont weights. Because these values are CSS custom properties, consumers can\ntechnically redefine them, but doing so is an unsupported escape hatch rather\nthan part of the Theme API. That stable contract _is_ the consistency. A fuller\nnamed-theme system (multiple consumer-defined Themes, à la Kumo's theme configs)\nis a deliberate later step, not a v1 feature.\n\n### Variant\n\nA named, typed dimension of a component's appearance exposed as a prop (e.g.\n`variant=\"primary\"`, `size=\"sm\"`, `tone=\"danger\"`). Variants map to Semantic\nTokens internally; they are the consumer's primary, discoverable means of\nvarying a component while staying on-system. An escape-hatch `className` always\nmerges last, letting an app deviate locally without forking. For v1 the public\nsurface is finished components plus a `cn()` helper and the Provider — the\nunderlying Headless Primitives stay internal.\n\n### Mode\n\nThe light/dark axis of a Theme. Modeled as\n`data-mode=\"light\" | \"dark\" | \"system\"`, where `system` falls through to the OS\npreference via CSS `light-dark()` (zero JS). Mode is **owned by the Provider** —\nit sets `data-mode` and exposes a hook to read/set it (persistence opt-in) — so\napps get a first-class light/dark toggle without hand-rolling one (a common\nsource of inconsistency and flash-of-wrong-theme bugs).\n\n### Headless Primitive\n\nThe behavior-and-accessibility layer of an interactive component (focus\nmanagement, keyboard nav, ARIA), independent of its visual styling. For the hard\ninteractive components (Dialog, Popover, Menu, Tabs), Kylä builds on a\nthird-party headless primitive library rather than hand-rolling. Simple visual\ncomponents (Button, Card, Stack, Text, Input, Badge) have no separate Headless\nPrimitive — they are styled directly.\n",[],[326],"80c65449-8268-4624-b5fd-01b38fd2419c","CLAUDE.md","019f632a-69d4-710e-80e2-bdf01bdc686a",["D",1784075151835],"## Working on changes\n\nDevelopment happens on a Val Town **val branch**, never directly on `main`.\n`main` is the stable release line — HEAD-of-`main` is always a Release (a\nconcrete `?v=NNN`), so raw work never lands on it. Branch off `main`, do the\nwork on the branch, and land it by merging the branch into `main`, which cuts\nthe next Release. See\n[ADR-0004](docs/adr/0004-version-pinned-upgrade-contract.md) for the rationale\nand the consumer-facing pinning contract.\n\n**Exception: docs-only changes push straight to `main`.** Changes confined to\n`docs/**` (specs, ADRs, roadmap, reference docs) carry no code/version surface,\nso they don't need a branch + merge cycle — push them directly. Any change that\ntouches `src/`, `mod.ts`, or other shipped code still follows the branch flow\nabove.\n\n### Val Town branch workflow\n\n- Before starting, verify the checkout with `vt status`, then branch from the\n stable line with `vt checkout main` followed by\n `vt checkout -b -NN-`; use a short prefix derived from\n the spec/feature (for example, `scales-03-type-scale-and-font`).\n- Keep implementation work on that branch. `vt push` is the Val Town commit for\n the branch; finish by running `vt status` and confirming local state matches\n remote state.\n- A ticket is not landed when it is merely pushed to a work branch. Merge the\n branch into `main` to cut the next Release, then record the `Landed: vNNN`\n version and `Status: done` in the issue file.\n\n## Agent skills\n\n### Issue tracker\n\nIssues and specs live as local markdown files under\n`docs/issues//`; no external tracker. See\n`docs/agents/issue-tracker.md`.\n\n### Triage labels\n\nUses the default five-role label vocabulary unchanged (`needs-triage`,\n`needs-info`, `ready-for-agent`, `ready-for-human`, `wontfix`). See\n`docs/agents/triage-labels.md`.\n\n### Domain docs\n\nSingle-context layout: `CONTEXT.md` + `docs/adr/` at the repo root. See\n`docs/agents/domain.md`.\n",[],[333],"bc67344f-63c2-4b41-b1d4-216d27d3609f","AGENTS.md","019f632a-69d4-710e-80e2-b84842d73487",["D",1784075151835],[],[340],"11731f08-1734-4460-a3ca-4f177abb3fd3",".vtignore","019f632a-69d4-710e-80e2-b766669d1e53",["D",1784075151835],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[],[346],"12e5b37f-834f-45a3-b385-90eb49da0de2","variants.ts","019f632a-69d4-710e-80e2-ab7e297b283f","019f632a-69d4-710e-80e2-af72c74dc25d",["D",1784075151835],"import { cn } from \"./cn.ts\";\n\ntype VariantShape = Record>;\ntype Selection = { [K in keyof V]?: keyof V[K] };\n\n/**\n * Minimal cva-style helper: maps typed variant props to token-based class strings.\n *\n * Hand-rolled to avoid an external dependency (per ADR-0002's keep-the-common-case\n * dependency-free posture). Supports a `base` string, `variants` maps, optional\n * `defaultVariants`, and a trailing `className` escape hatch (merged last via cn()).\n *\n * Example:\n * const button = variants({\n * base: cn(tw.radius(\"md\"), \"px-4 py-2 font-medium\"),\n * variants: {\n * variant: { primary: cn(tw.bg(\"accent\"), tw.text(\"accent-fg\")), ... },\n * size: { sm: \"text-sm px-3 py-1.5\", md: \"text-base\" },\n * },\n * defaultVariants: { variant: \"primary\", size: \"md\" },\n * });\n * button({ variant: \"primary\", size: \"sm\", className });\n */\nexport function variants(config: {\n base?: string;\n variants?: V;\n defaultVariants?: Selection;\n}) {\n return (props: Selection & { className?: string } = {}): string => {\n const selected: Selection = props;\n const classes: string[] = [];\n if (config.base) classes.push(config.base);\n if (config.variants) {\n for (const key in config.variants) {\n const chosen = selected[key] ?? config.defaultVariants?.[key];\n if (chosen != null) {\n const cls = config.variants[key][chosen];\n if (cls) classes.push(cls);\n }\n }\n }\n return cn(...classes, props.className);\n };\n}\n",[],[360,361,353],"src","utils","a2c1e616-91ba-4d35-9f30-025145cf6b4a","cn.ts","019f632a-69d4-710e-80e2-a77aa45c734a",["D",1784075151835],"import { type ClassValue, clsx } from \"npm:clsx@2.1.1\";\nimport { twMerge } from \"npm:tailwind-merge@3.6.0\";\n\n/**\n * Merge class strings with conflict resolution.\n *\n * `clsx` flattens conditionals/arrays and drops falsy values; `twMerge` keeps only\n * the winning class when two conflict. This matters on Val Town: Twind injects CSS\n * rules in first-seen order, so source order — not className order — would otherwise\n * decide a tie. `cn()` resolves the conflict *in the class string itself*, so the\n * outcome is deterministic regardless of Twind's injection order. The\n * `[color:var(--…)]` hint our token utilities carry (ADR-0001) is also what lets\n * twMerge group and dedupe background/text/border *colors* independently of\n * size/width utilities — verified empirically on the Val Town runtime.\n *\n * Call order is the contract: a component passes its own classes FIRST and the\n * caller's escape-hatch `className` LAST — `cn(componentClasses, className)` — so\n * the caller reliably overrides. Versions are pinned so merge behavior is\n * reproducible (bare `npm:` specifiers resolve to \"latest\" and could shift).\n */\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n",[],[360,361,363],"fffe5f38-8d2f-4040-a44f-697048265241","019f632a-69d4-710e-80e2-b2cc015d94f6",["D",1784075151835],[294,295],[360,361],"97eabf3a-275f-4cbd-bd37-69f8ef3623db","tw_test.ts","019f632a-69d4-710e-80e2-9d4d228a57d6","019f632a-69d4-710e-80e2-a33741cd7dfc",["D",1784075151835],"import { assertEquals } from \"jsr:@std/assert@1\";\nimport { tw } from \"./tw.ts\";\n\nDeno.test(\"spacing accessors emit bare arbitrary-value classes\", () => {\n assertEquals(tw.space(\"4\"), \"p-[var(--kyla-space-4)]\");\n assertEquals(tw.space(\"p\", \"4\"), \"p-[var(--kyla-space-4)]\");\n assertEquals(tw.space(\"gap\", \"6\"), \"gap-[var(--kyla-space-6)]\");\n assertEquals(tw.space(\"space-x\", \"2\"), \"space-x-[var(--kyla-space-2)]\");\n});\n\nDeno.test(\"radius accessors emit derived bare arbitrary-value classes\", () => {\n assertEquals(tw.radius(\"sm\"), \"rounded-[var(--kyla-radius-sm)]\");\n assertEquals(tw.radius(\"md\"), \"rounded-[var(--kyla-radius-md)]\");\n assertEquals(tw.radius(\"lg\"), \"rounded-[var(--kyla-radius-lg)]\");\n assertEquals(tw.radius(), \"rounded-[var(--kyla-radius-md)]\");\n});\n\nDeno.test(\"type accessors bundle size and line-height\", () => {\n assertEquals(\n tw.type(\"sm\"),\n \"text-[length:var(--kyla-text-sm)] leading-[var(--kyla-text-sm-line-height)]\",\n );\n assertEquals(\n tw.type(\"3xl\"),\n \"text-[length:var(--kyla-text-3xl)] leading-[var(--kyla-text-3xl-line-height)]\",\n );\n});\n\nDeno.test(\"weight accessors emit bare arbitrary-value classes\", () => {\n assertEquals(\n tw.weight(\"semibold\"),\n \"font-[weight:var(--kyla-font-weight-semibold)]\",\n );\n});\n\n// These calls intentionally verify that the accessor arguments are unions.\n// @ts-expect-error \"7\" is not one of the fixed spacing steps.\ntw.space(\"7\");\n// @ts-expect-error \"xl\" is not one of the graduated radius roles.\ntw.radius(\"xl\");\n// @ts-expect-error \"4xl\" is not one of the fixed type steps.\ntw.type(\"4xl\");\n// @ts-expect-error \"black\" is not one of the fixed font weights.\ntw.weight(\"black\");\n",[],[360,382,375],"theme","9aa72636-50a2-4b28-a557-4c6681394eca","tw.ts","019f632a-69d4-710e-80e2-990d6582e072",["D",1784075151835],"/**\n * Token utilities — the only sanctioned way to apply semantic colors.\n *\n * Authors compose styles from these instead of hand-writing `[color:var(--…)]`,\n * which makes the silent \"forgot the color: hint\" failure (see ADR-0001 — a bare\n * `bg-[var(--…)]` is type-ambiguous and Twind emits nothing) structurally\n * impossible. The TypeScript union also makes a typo'd token a compile error.\n *\n * Each color builder takes an optional state prefix so prefixed utilities keep the\n * hint too — `tw.bg(\"recessed\", \"hover\")` → `hover:bg-[color:var(--kyla-recessed)]`.\n */\nimport type {\n COLOR_TOKENS,\n FONT_WEIGHT_STEPS,\n RADIUS_STEPS,\n SPACE_STEPS,\n TYPE_STEPS,\n} from \"./tokens.ts\";\n\nexport type ColorToken = (typeof COLOR_TOKENS)[number];\n\n/** Common interaction states a token utility may be scoped to. */\nexport type State = \"hover\" | \"focus\" | \"focus-visible\" | \"active\" | \"disabled\";\n\n/** Fixed spacing steps, each representing a multiple of the 4px base unit. */\nexport type SpaceToken = (typeof SPACE_STEPS)[number];\n\n/** The graduated radius roles derived from `--kyla-radius`. */\nexport type RadiusToken = (typeof RADIUS_STEPS)[number];\n\n/** Fixed type steps, each paired with its intended line-height. */\nexport type TypeToken = (typeof TYPE_STEPS)[number];\n\n/** Fixed font weights from the Val Town typography scale. */\nexport type FontWeightToken = (typeof FONT_WEIGHT_STEPS)[number];\n\n/**\n * Twind spacing utilities that consume a spacing token. Component dimensions\n * such as width and height are intentionally outside this accessor contract.\n */\nexport type SpaceProperty =\n | \"p\"\n | \"px\"\n | \"py\"\n | \"pt\"\n | \"pr\"\n | \"pb\"\n | \"pl\"\n | \"m\"\n | \"mx\"\n | \"my\"\n | \"mt\"\n | \"mr\"\n | \"mb\"\n | \"ml\"\n | \"gap\"\n | \"gap-x\"\n | \"gap-y\"\n | \"space-x\"\n | \"space-y\";\n\nconst color = (prop: string, name: ColorToken, on?: State): string =>\n `${on ? `${on}:` : \"\"}${prop}-[color:var(--kyla-${name})]`;\n\nconst length = (prop: string, family: string, name: string): string =>\n `${prop}-[var(--kyla-${family}-${name})]`;\n\nconst typeScale = (step: TypeToken): string =>\n [\n // `text-*` is shared by color and font-size utilities, so the length hint\n // makes the CSS variable's intended role explicit to Twind.\n `text-[length:var(--kyla-text-${step})]`,\n length(\"leading\", \"text\", `${step}-line-height`),\n ].join(\" \");\n\nfunction space(step: SpaceToken): string;\nfunction space(prop: SpaceProperty, step: SpaceToken): string;\nfunction space(\n propOrStep: SpaceProperty | SpaceToken,\n step?: SpaceToken,\n): string {\n const prop = step === undefined ? \"p\" : propOrStep as SpaceProperty;\n const token = step ?? propOrStep as SpaceToken;\n return length(prop, \"space\", token);\n}\n\n/**\n * Token class builders. Usage: `cn(tw.bg(\"elevated\"), tw.border(\"line\"), \"p-6\")`.\n * Color builders emit the required `color:` hint (optionally state-prefixed).\n * Length builders intentionally emit bare arbitrary-value classes: lengths\n * are unambiguous to Twind and do not need the color hint.\n */\nexport const tw = {\n bg: (t: ColorToken, on?: State) => color(\"bg\", t, on),\n text: (t: ColorToken, on?: State) => color(\"text\", t, on),\n border: (t: ColorToken, on?: State) => color(\"border\", t, on),\n ring: (t: ColorToken, on?: State) => color(\"ring\", t, on),\n ringOffset: (t: ColorToken, on?: State) => color(\"ring-offset\", t, on),\n /**\n * Fixed spacing token. With one argument it emits padding for the token;\n * pass a Twind spacing property first for other uses, e.g.\n * `tw.space(\"gap\", \"4\")`.\n */\n space,\n /** border-radius token (a length — no `color:` hint needed) */\n radius: (t: RadiusToken = \"md\") => length(\"rounded\", \"radius\", t),\n /** type token — always applies the paired size and line-height */\n type: typeScale,\n /** fixed font-weight token */\n weight: (t: FontWeightToken) => `font-[weight:var(--kyla-font-weight-${t})]`,\n} as const;\n",[],[360,382,384],"3a8417f5-3861-4fc2-a462-5ef0f6a6de9b","tokens_test.ts","019f632a-69d4-710e-80e2-97622aca861d",["D",1784076371562],"/**\n * The repo's first test harness — the load-bearing AA-contrast guarantee.\n *\n * It parses the token stylesheet, enumerates every *sanctioned* foreground /\n * surface pairing, and asserts each meets its WCAG AA threshold in **both** light\n * and dark mode. A future palette edit that breaks contrast fails here rather than\n * shipping. Kept a plain `deno test` so later scale slices reuse the pattern.\n */\nimport { assert, assertAlmostEquals, assertEquals } from \"jsr:@std/assert@1\";\nimport { contrastRatio } from \"./contrast.ts\";\nimport {\n COLOR_TOKENS,\n FONT_WEIGHT_STEPS,\n RADIUS_STEPS,\n SPACE_STEPS,\n tokenCSS,\n TYPE_STEPS,\n} from \"./tokens.ts\";\n\ntype Mode = \"light\" | \"dark\";\ntype Palette = Record>;\n\n/** Parse `--kyla-NAME: light-dark(, );` declarations into a palette. */\nfunction parsePalette(css: string): Palette {\n const re =\n /--kyla-([\\w-]+):\\s*light-dark\$\\s*(#[0-9a-fA-F]{3,6})\\s*,\\s*(#[0-9a-fA-F]{3,6})\\s*\$/g;\n const palette: Palette = {};\n for (const [, name, light, dark] of css.matchAll(re)) {\n palette[name] = { light, dark };\n }\n return palette;\n}\n\nconst palette = parsePalette(tokenCSS);\nconst MODES: Mode[] = [\"light\", \"dark\"];\n\n// WCAG AA: 4.5:1 for body text. Every sanctioned pairing here is text-on-surface.\nconst AA_BODY = 4.5;\n\n/**\n * The sanctioned foreground/surface pairings (PRD §Palette): body text and\n * secondary text on every surface, the status/accent *text* roles on every\n * surface, and ink on each colored fill. Anything not listed here is not a\n * promised pairing and is intentionally not asserted.\n */\nconst SURFACES = [\"base\", \"elevated\", \"recessed\"] as const;\nconst PAIRINGS: Array<{ fg: string; bg: string; min: number }> = [\n ...SURFACES.map((bg) => ({ fg: \"fg\", bg, min: AA_BODY })),\n ...SURFACES.map((bg) => ({ fg: \"fg-muted\", bg, min: AA_BODY })),\n ...SURFACES.map((bg) => ({ fg: \"accent-text\", bg, min: AA_BODY })),\n ...SURFACES.map((bg) => ({ fg: \"danger-text\", bg, min: AA_BODY })),\n { fg: \"accent-fg\", bg: \"accent\", min: AA_BODY },\n { fg: \"danger-fg\", bg: \"danger\", min: AA_BODY },\n { fg: \"success-fg\", bg: \"success\", min: AA_BODY },\n];\n\nDeno.test(\"contrastRatio returns the correct WCAG ratio for known pairs\", () => {\n assertAlmostEquals(contrastRatio(\"#000000\", \"#ffffff\"), 21, 0.05);\n assertAlmostEquals(contrastRatio(\"#ffffff\", \"#ffffff\"), 1, 0.001);\n // #767676 on white is the canonical WCAG AA boundary example (~4.54:1).\n assertAlmostEquals(contrastRatio(\"#767676\", \"#ffffff\"), 4.54, 0.05);\n // Order-independent.\n assertAlmostEquals(\n contrastRatio(\"#052f4a\", \"#00bcff\"),\n contrastRatio(\"#00bcff\", \"#052f4a\"),\n 0.001,\n );\n});\n\nDeno.test(\"every sanctioned fg/surface pairing meets AA in both modes\", () => {\n for (const mode of MODES) {\n for (const { fg, bg, min } of PAIRINGS) {\n assert(palette[fg], `missing token --kyla-${fg}`);\n assert(palette[bg], `missing token --kyla-${bg}`);\n const ratio = contrastRatio(palette[fg][mode], palette[bg][mode]);\n assert(\n ratio >= min,\n `${fg} on ${bg} (${mode}) is ${ratio.toFixed(2)}:1, below AA ${min}:1`,\n );\n }\n }\n});\n\nDeno.test(\"palette expands the color vocabulary with the new semantic tokens\", () => {\n for (const name of COLOR_TOKENS) {\n assert(palette[name], `expected --kyla-${name} in the token stylesheet`);\n }\n});\n\nDeno.test(\"dark-mode base uses the sanctioned slate-950 softening, not true black\", () => {\n assert(palette.base, \"missing --kyla-base\");\n assertEqualsHex(palette.base.dark, \"#020618\");\n assert(\n palette.base.dark.toLowerCase() !== \"#000000\",\n \"dark base must be softened slate-950, not true black\",\n );\n});\n\nfunction assertEqualsHex(actual: string, expected: string): void {\n assert(\n actual.toLowerCase() === expected.toLowerCase(),\n `expected ${expected}, got ${actual}`,\n );\n}\n\ntype LengthScale = Record;\n\nfunction parsePixelScale(css: string, family: string): LengthScale {\n const scale: LengthScale = {};\n const re = new RegExp(\n `--kyla-${family}-([\\\\w-]+):\\\\s*([0-9]+)px\\\\s*;`,\n \"g\",\n );\n for (const [, name, value] of css.matchAll(re)) {\n scale[name] = Number(value);\n }\n return scale;\n}\n\nDeno.test(\"spacing scale is the fixed monotonic 4px-based step set\", () => {\n const spacing = parsePixelScale(tokenCSS, \"space\");\n assertEquals(Object.keys(spacing), [...SPACE_STEPS]);\n\n let previous = -1;\n for (const step of SPACE_STEPS) {\n const value = spacing[step];\n assert(value >= 0, `space-${step} must be non-negative`);\n assert(value >= previous, `space-${step} must be monotonic`);\n assertEquals(value, Number(step) * 4);\n previous = value;\n }\n});\n\nDeno.test(\"radius scale derives sm/md/lg from the overridable base\", () => {\n assert(\n /--kyla-radius:\\s*8px\\s*;/.test(tokenCSS),\n \"expected an 8px overridable base radius\",\n );\n\n assertEquals(RADIUS_STEPS.length, 3);\n\n const expectedDerivations: Record<(typeof RADIUS_STEPS)[number], string> = {\n sm: \"calc(var(--kyla-radius) * 0.5)\",\n md: \"var(--kyla-radius)\",\n lg: \"calc(var(--kyla-radius) * 1.5)\",\n };\n for (const step of RADIUS_STEPS) {\n assert(\n tokenCSS.includes(\n `--kyla-radius-${step}: ${expectedDerivations[step]};`,\n ),\n `radius-${step} must derive from --kyla-radius`,\n );\n }\n});\n\ntype TypeScale = Record;\n\nfunction parseTypeScale(css: string): TypeScale {\n const scale: TypeScale = {};\n for (const step of TYPE_STEPS) {\n const size = css.match(\n new RegExp(`--kyla-text-${step}:\\\\s*([0-9.]+)rem\\\\s*;`),\n );\n const lineHeight = css.match(\n new RegExp(`--kyla-text-${step}-line-height:\\\\s*([^;]+);`),\n );\n if (size && lineHeight) {\n scale[step] = { size: Number(size[1]), lineHeight: lineHeight[1].trim() };\n }\n }\n return scale;\n}\n\nDeno.test(\"type scale is the fixed monotonic VT size and line-height set\", () => {\n const typeScale = parseTypeScale(tokenCSS);\n assertEquals(Object.keys(typeScale), [...TYPE_STEPS]);\n\n let previousSize = 0;\n for (const step of TYPE_STEPS) {\n const pair = typeScale[step];\n assert(pair.size > previousSize, `text-${step} must be monotonic by size`);\n assert(pair.lineHeight.length > 0, `text-${step} must have a line-height`);\n previousSize = pair.size;\n }\n});\n\nDeno.test(\"font and weight tokens expose the VT typography foundation\", () => {\n assert(\n tokenCSS.includes(\n '--kyla-font: \"IBM Plex Sans\", -apple-system, sans-serif;',\n ),\n \"expected the overridable IBM Plex Sans font token\",\n );\n\n for (const [index, name] of FONT_WEIGHT_STEPS.entries()) {\n const value = String(400 + index * 100);\n assert(\n tokenCSS.includes(`--kyla-font-weight-${name}: ${value};`),\n `expected --kyla-font-weight-${name}`,\n );\n }\n});\n\nconst OVERRIDE_TOKENS = [\"accent\", \"radius\", \"font\"] as const;\n\nconst STRUCTURAL_TOKENS = [\n // Semantic palette roles other than the overridable accent.\n \"base\",\n \"elevated\",\n \"recessed\",\n \"fg\",\n \"fg-muted\",\n \"line\",\n \"hairline\",\n \"accent-fg\",\n \"accent-ring\",\n \"accent-text\",\n \"danger\",\n \"danger-fg\",\n \"danger-text\",\n \"success\",\n \"success-fg\",\n // Direct radius derivations remain structural even though the base is not.\n ...RADIUS_STEPS.map((step) => `radius-${step}`),\n ...SPACE_STEPS.map((step) => `space-${step}`),\n ...TYPE_STEPS.flatMap((step) => [\n `text-${step}`,\n `text-${step}-line-height`,\n ]),\n ...FONT_WEIGHT_STEPS.map((weight) => `font-weight-${weight}`),\n] as const;\n\nDeno.test(\"override surface and structural token names are all present\", () => {\n for (const name of OVERRIDE_TOKENS) {\n assert(\n tokenCSS.includes(`--kyla-${name}:`),\n `expected overridable token --kyla-${name}`,\n );\n }\n\n for (const name of STRUCTURAL_TOKENS) {\n assert(\n tokenCSS.includes(`--kyla-${name}:`),\n `expected structural token --kyla-${name}`,\n );\n }\n});\n",[],[360,382,391],"befa7636-c335-4a84-b715-af5e3314b551","tokens.ts","019f632a-69d4-710e-80e2-928d94afaf12",["D",1784076371562],"/**\n * The Kylä token stylesheet, as a string the Provider injects at runtime.\n *\n * Semantic design values as CSS custom properties (ADR-0001). `light-dark()`\n * resolves against the CSS `color-scheme` property, so toggling `color-scheme`\n * via `data-mode` flips every token at once — no `dark:` variants.\n *\n * Surface hierarchy (conventional): in light mode `elevated` is the *brightest*\n * (cards lift toward the light), `base` is the page, `recessed` is an inset well;\n * dark mode inverts brightness.\n *\n * Palette: the real Val Town values, ported (not invented) from the VT UI style\n * guide and AA-verified in both modes (ADR-0005; see\n * docs/reference/val-town-style-guide.md §6–§7). The AA guarantee is enforced by\n * tokens_test.ts — a pairing that regresses fails the suite. The one sanctioned\n * deviation from VT is the dark-mode `base`: `slate-950 #020618`, a deliberate\n * softening of VT's true-black `#000` to cut glare.\n *\n * Structural scales: spacing is fixed as Kylä's supported consumer contract\n * on the Val Town/Tailwind 4px base unit. \"Fixed\" means these values are not\n * supported theme override inputs; because they are CSS custom properties, a\n * consumer can still redefine them at their own risk.\n * The radius scale is derived from the one consumer-overridable base so the\n * proportions remain intact when a consumer changes --kyla-radius. The\n * consumer override surface is exactly --kyla-accent, --kyla-radius, and\n * --kyla-font (plus the direct radius derivations). Every other token below —\n * surfaces, foregrounds, borders, status roles, spacing, type sizes/leading,\n * and font weights — is structural and outside the supported override surface.\n */\nexport const COLOR_TOKENS = [\n \"base\",\n \"elevated\",\n \"recessed\",\n \"fg\",\n \"fg-muted\",\n \"line\",\n \"hairline\",\n \"accent\",\n \"accent-fg\",\n \"accent-ring\",\n \"accent-text\",\n \"danger\",\n \"danger-fg\",\n \"danger-text\",\n \"success\",\n \"success-fg\",\n] as const;\n\nexport const SPACE_STEPS = [\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"8\",\n \"10\",\n \"12\",\n \"16\",\n \"20\",\n \"24\",\n] as const;\n\nexport const RADIUS_STEPS = [\"sm\", \"md\", \"lg\"] as const;\n\nexport const TYPE_STEPS = [\n \"xs\",\n \"sm\",\n \"base\",\n \"lg\",\n \"xl\",\n \"2xl\",\n \"3xl\",\n] as const;\n\nexport const FONT_WEIGHT_STEPS = [\n \"normal\",\n \"medium\",\n \"semibold\",\n \"bold\",\n \"extrabold\",\n] as const;\n\nexport const tokenCSS = `\n:root {\n color-scheme: light dark;\n\n /* surfaces — base (page) / elevated (cards) / recessed (wells) */\n --kyla-base: light-dark(#ffffff, #020618);\n --kyla-elevated: light-dark(#ffffff, #0f172b);\n --kyla-recessed: light-dark(#f1f5f9, #1d293d);\n\n /* foreground */\n --kyla-fg: light-dark(#000000, #ffffff);\n --kyla-fg-muted: light-dark(#4a5565, #d1d5dc);\n\n /* borders */\n --kyla-line: light-dark(#e2e8f0, #314158);\n --kyla-hairline: light-dark(#f1f5f9, #1d293d);\n\n /* accent */\n /* consumer-overridable; all other palette roles are structural */\n --kyla-accent: light-dark(#00bcff, #0069a8);\n --kyla-accent-fg: light-dark(#052f4a, #ffffff);\n --kyla-accent-ring: light-dark(#00a6f4, #00a6f4);\n --kyla-accent-text: light-dark(#00598a, #b8e6fe);\n\n /* status — danger / success */\n /*\n * danger is a fill; danger-text is danger on a surface, the counterpart to\n * accent-text. The fill is far too pale in light mode to double as text\n * (rose-300 on white is 1.4:1), so the two roles cannot share one token.\n */\n --kyla-danger: light-dark(#ffa1ad, #a50036);\n --kyla-danger-fg: light-dark(#4d0218, #ffffff);\n --kyla-danger-text: light-dark(#a50036, #ffc9d4);\n --kyla-success: light-dark(#00d492, #007a55);\n --kyla-success-fg: light-dark(#002c22, #ffffff);\n\n /*\n * Typography — --kyla-font is consumer-overridable. The type sizes, their\n * paired line-heights, and weights are structural so components share one\n * hierarchy. Values are the VT style-guide scale (§4).\n */\n --kyla-font: \"IBM Plex Sans\", -apple-system, sans-serif;\n --kyla-text-xs: 0.75rem;\n --kyla-text-xs-line-height: 1rem;\n --kyla-text-sm: 0.875rem;\n --kyla-text-sm-line-height: 1.25rem;\n --kyla-text-base: 1rem;\n --kyla-text-base-line-height: 1.5rem;\n --kyla-text-lg: 1.125rem;\n --kyla-text-lg-line-height: 1.75rem;\n --kyla-text-xl: 1.25rem;\n --kyla-text-xl-line-height: 1.75rem;\n --kyla-text-2xl: 1.5rem;\n --kyla-text-2xl-line-height: 2rem;\n --kyla-text-3xl: 1.875rem;\n --kyla-text-3xl-line-height: 2.25rem;\n\n --kyla-font-weight-normal: 400;\n --kyla-font-weight-medium: 500;\n --kyla-font-weight-semibold: 600;\n --kyla-font-weight-bold: 700;\n --kyla-font-weight-extrabold: 800;\n\n /*\n * Structural spacing — fixed supported contract on a 4px base, following the\n * compact VT/Tailwind steps used by the component style guide. These are not\n * supported theme overrides, though CSS custom properties remain mutable.\n */\n --kyla-space-0: 0px;\n --kyla-space-1: 4px;\n --kyla-space-2: 8px;\n --kyla-space-3: 12px;\n --kyla-space-4: 16px;\n --kyla-space-5: 20px;\n --kyla-space-6: 24px;\n --kyla-space-8: 32px;\n --kyla-space-10: 40px;\n --kyla-space-12: 48px;\n --kyla-space-16: 64px;\n --kyla-space-20: 80px;\n --kyla-space-24: 96px;\n\n /*\n * Shape — --kyla-radius is the one consumer-overridable base. The graduated\n * values are direct derivations, so changing the base preserves\n * the 4px / 8px / 12px proportions used by the VT style guide.\n */\n --kyla-radius: 8px;\n --kyla-radius-sm: calc(var(--kyla-radius) * 0.5);\n --kyla-radius-md: var(--kyla-radius);\n --kyla-radius-lg: calc(var(--kyla-radius) * 1.5);\n}\n\n/* data-mode overrides the OS preference by pinning color-scheme */\n[data-mode=\"light\"] { color-scheme: light; }\n[data-mode=\"dark\"] { color-scheme: dark; }\n[data-mode=\"system\"] { color-scheme: light dark; }\n\nhtml, body {\n margin: 0;\n font-family: var(--kyla-font);\n}\n`;\n",[],[360,382,398],"54e7f57a-a05b-4c7f-a3ce-61a09de9145b","provider.tsx","019f632a-69d4-710e-80e2-8e5dfad917e8",["D",1784075151835],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n createContext,\n type ReactNode,\n useContext,\n useEffect,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { tokenCSS } from \"./tokens.ts\";\n\n/**\n * The Kylä root. Guarantees the styling substrate is present and owns Mode.\n *\n * - Injects the token stylesheet into at runtime (idempotent). Twind itself\n * must live in the HTML shell since it has to load before first paint (ADR-0001);\n * the Provider injects tokens and the default IBM Plex Sans stylesheet.\n * - Owns Mode via `data-mode` on and exposes `useKylaMode()`. `system`\n * falls through to the OS preference via `light-dark()` (zero JS).\n */\nexport type Mode = \"light\" | \"dark\" | \"system\";\n\nconst ModeContext = createContext<{ mode: Mode; setMode: (m: Mode) => void }>({\n mode: \"system\",\n setMode: () => {},\n});\n\nexport function useKylaMode() {\n return useContext(ModeContext);\n}\n\nconst TOKENS_ID = \"kyla-tokens\";\nconst FONT_STYLESHEET_ID = \"kyla-font-stylesheet\";\nconst FONT_STYLESHEET_HREF =\n \"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap\";\n\nexport function KylaProvider({\n children,\n defaultMode = \"system\",\n}: {\n children: ReactNode;\n defaultMode?: Mode;\n}) {\n const [mode, setMode] = useState(defaultMode);\n\n // Inject the token stylesheet once. Idempotent: guards against double-inject.\n useEffect(() => {\n if (!document.getElementById(TOKENS_ID)) {\n const style = document.createElement(\"style\");\n style.id = TOKENS_ID;\n style.textContent = tokenCSS;\n document.head.appendChild(style);\n }\n\n if (!document.getElementById(FONT_STYLESHEET_ID)) {\n const link = document.createElement(\"link\");\n link.id = FONT_STYLESHEET_ID;\n link.rel = \"stylesheet\";\n link.href = FONT_STYLESHEET_HREF;\n document.head.appendChild(link);\n }\n }, []);\n\n // Reflect Mode onto the document so `data-mode` selectors take effect.\n useEffect(() => {\n document.documentElement.setAttribute(\"data-mode\", mode);\n }, [mode]);\n\n return (\n \n {children}\n \n );\n}\n",[],[360,382,405],"246b0c29-0d3a-4cb0-8981-9d6f02a4a7c9","contrast.ts","019f632a-69d4-710e-80e2-8991cede6c9d",["D",1784075151835],"/**\n * Pure WCAG contrast utilities over resolved sRGB colors — no DOM, no browser.\n *\n * This is the natural seam for the palette's AA guarantee: \"AA holds\" is a\n * property of the resolved color values, computable without a browser. The token\n * stylesheet resolves each semantic token to a concrete hex per mode (via\n * `light-dark()`); these helpers turn those hexes into WCAG contrast ratios so a\n * test can assert every sanctioned foreground/surface pairing stays legible.\n */\n\n/** An sRGB color as integer channels in the range 0–255. */\nexport type RGB = [r: number, g: number, b: number];\n\n/** Parse a `#rgb` or `#rrggbb` hex string into sRGB channels (0–255). */\nexport function parseHex(hex: string): RGB {\n const h = hex.trim().replace(/^#/, \"\");\n const full = h.length === 3\n ? h\n .split(\"\")\n .map((c) => c + c)\n .join(\"\")\n : h;\n if (!/^[0-9a-fA-F]{6}$/.test(full)) {\n throw new Error(`Invalid hex color: ${hex}`);\n }\n return [\n parseInt(full.slice(0, 2), 16),\n parseInt(full.slice(2, 4), 16),\n parseInt(full.slice(4, 6), 16),\n ];\n}\n\n/** WCAG relative luminance of an sRGB color (0 = black, 1 = white). */\nexport function relativeLuminance([r, g, b]: RGB): number {\n const linear = (channel: number): number => {\n const s = channel / 255;\n return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n };\n return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);\n}\n\n/**\n * WCAG contrast ratio between two colors (hex strings), in the range 1–21.\n * Order-independent: `contrastRatio(a, b) === contrastRatio(b, a)`.\n */\nexport function contrastRatio(a: string, b: string): number {\n const la = relativeLuminance(parseHex(a));\n const lb = relativeLuminance(parseHex(b));\n const lighter = Math.max(la, lb);\n const darker = Math.min(la, lb);\n return (lighter + 0.05) / (darker + 0.05);\n}\n",[],[360,382,412],"9fc9fbd9-8d33-4fdf-be13-df6567af6429",["D",1784075151835],[287,288,289,290,291,292],[360,382],"6a527f9a-af4a-4905-a1d9-a2081880b9af","render.ts","f8a7897e-7fe4-11f1-8217-1607ee4eb77e","f8537f78-7fe4-11f1-a5ab-1607ee4eb77e",["D",1784076371562],"/**\n * The render-to-HTML seam for component tests.\n *\n * Components are asserted through their *external* output — the semantic element\n * they emit, the token classes they carry, and their accessibility wiring — never\n * through their internal `variants()`/`cn()` calls. Server-rendering to a string\n * is the highest seam that still sees all of that, and it is uniform across the\n * whole component set.\n *\n * Asserting the emitted class string also guards ADR-0001's silent Twind failure:\n * a token utility that loses its `color:`/`length:` hint emits no CSS at all, which\n * surfaces here as an absent class rather than as an invisible styling bug.\n */\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\nimport { renderToStaticMarkup as render } from \"https://esm.sh/react-dom@18.2.0/server?deps=react@18.2.0&no-dts\";\n\n/**\n * Render an element to a static HTML string.\n *\n * The runtime import is `no-dts` (react-dom/server ships types Deno can't resolve\n * over esm.sh), so the signature is restored by annotation at this one boundary\n * instead of at every call site.\n */\nexport const renderToStaticMarkup: (element: ReactNode) => string = render;\n",[],[360,430,423],"testing","3740eb2e-fdce-4b2f-a913-f85b2b0a1ae0",["D",1784075682034],[285],[360,430],"bc23a988-2544-44fe-88f4-ce939daf4f4f","text_test.ts","f867b3da-7fe4-11f1-a5ab-1607ee4eb77e","019f632a-69d4-710e-80e2-8704f8ef7051",["D",1784076371562],"import {\n assert,\n assertMatch,\n assertNotMatch,\n assertStringIncludes,\n} from \"jsr:@std/assert@1\";\nimport { createElement } from \"https://esm.sh/react@18.2.0\";\nimport { FONT_WEIGHT_STEPS, TYPE_STEPS } from \"../theme/tokens.ts\";\nimport { renderToStaticMarkup } from \"../testing/render.ts\";\nimport { Heading, Text, type TextTone } from \"./text.tsx\";\n\nDeno.test(\"Text renders a paragraph by default and honors the polymorphic `as`\", () => {\n assertMatch(renderToStaticMarkup(createElement(Text, null, \"Body\")), /^

{\n const html = renderToStaticMarkup(\n createElement(Text, { size: \"lg\" }, \"Body\"),\n );\n\n assertStringIncludes(html, \"text-[length:var(--kyla-text-lg)]\");\n assertStringIncludes(html, \"leading-[var(--kyla-text-lg-line-height)]\");\n});\n\nDeno.test(\"Text maps weight to a font-weight token\", () => {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { weight: \"bold\" }, \"Body\")),\n \"font-[weight:var(--kyla-font-weight-bold)]\",\n );\n});\n\nDeno.test(\"Text covers every step of the type and weight scales\", () => {\n // The props' unions derive from these constants, so a step added to a scale\n // without a matching variant entry would type-check and then emit nothing at\n // all — `variants()` skips an unknown key silently.\n for (const size of TYPE_STEPS) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { size }, \"Body\")),\n `text-[length:var(--kyla-text-${size})]`,\n );\n }\n\n for (const weight of FONT_WEIGHT_STEPS) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { weight }, \"Body\")),\n `font-[weight:var(--kyla-font-weight-${weight})]`,\n );\n }\n});\n\nDeno.test(\"Text tones resolve to the text-on-surface color tokens\", () => {\n const toneToken: Record = {\n \"fg\": \"fg\",\n \"fg-muted\": \"fg-muted\",\n // `accent`/`danger` are *fill* tokens; text tones must use the AA-verified\n // text-on-surface roles instead, or they render unreadably on a surface.\n \"accent\": \"accent-text\",\n \"danger\": \"danger-text\",\n };\n\n for (\n const [tone, token] of Object.entries(toneToken) as [TextTone, string][]\n ) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { tone }, \"Body\")),\n `text-[color:var(--kyla-${token})]`,\n );\n }\n});\n\nDeno.test(\"Text emits its size and its tone together\", () => {\n // `text-*` is shared by font-size and color utilities. Without the\n // `length:`/`color:` hints (ADR-0001) twMerge would treat these as conflicting\n // and silently drop one, so assert both survive the same render.\n const html = renderToStaticMarkup(\n createElement(Text, { size: \"sm\", tone: \"fg-muted\" }, \"Body\"),\n );\n\n assertStringIncludes(html, \"text-[length:var(--kyla-text-sm)]\");\n assertStringIncludes(html, \"text-[color:var(--kyla-fg-muted)]\");\n});\n\nDeno.test(\"Text className wins over the component's own conflicting tone\", () => {\n const html = renderToStaticMarkup(\n createElement(\n Text,\n { tone: \"fg\", className: \"text-[color:var(--kyla-accent-text)]\" },\n \"Body\",\n ),\n );\n\n assertStringIncludes(html, \"text-[color:var(--kyla-accent-text)]\");\n assertNotMatch(html, /text-\\[color:var\$--kyla-fg\$\\]/);\n});\n\nDeno.test(\"Text forwards rest props to the underlying element\", () => {\n const html = renderToStaticMarkup(\n createElement(Text, { id: \"intro\", \"data-testid\": \"t\" }, \"Body\"),\n );\n\n assertStringIncludes(html, 'id=\"intro\"');\n assertStringIncludes(html, 'data-testid=\"t\"');\n});\n\nDeno.test(\"Heading renders the heading tag for its level\", () => {\n for (const level of [1, 2, 3, 4, 5, 6] as const) {\n assertMatch(\n renderToStaticMarkup(createElement(Heading, { level }, \"Title\")),\n new RegExp(`^ {\n assertMatch(\n renderToStaticMarkup(createElement(Heading, null, \"Title\")),\n /^

{\n const sizes = ([1, 2, 3, 4, 5, 6] as const).map((level) => {\n const html = renderToStaticMarkup(\n createElement(Heading, { level }, \"Title\"),\n );\n const match = html.match(/text-\\[length:var\$--kyla-text-([\\w-]+)\$\\]/);\n assert(match, `h${level} emitted no type-scale size`);\n return match[1];\n });\n\n assert(\n new Set(sizes).size === sizes.length,\n `each level needs its own step, got ${sizes.join(\", \")}`,\n );\n assertStringIncludes(sizes[0], \"3xl\");\n});\n\nDeno.test(\"Heading is semibold by default and lets an explicit weight win\", () => {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Heading, null, \"Title\")),\n \"font-[weight:var(--kyla-font-weight-semibold)]\",\n );\n assertStringIncludes(\n renderToStaticMarkup(\n createElement(Heading, { weight: \"normal\" }, \"Title\"),\n ),\n \"font-[weight:var(--kyla-font-weight-normal)]\",\n );\n});\n\nDeno.test(\"Heading keeps its semantic level when size is overridden\", () => {\n // A small h1 is still an h1 — styling must not rewrite the document outline.\n const html = renderToStaticMarkup(\n createElement(Heading, { level: 1, size: \"base\" }, \"Title\"),\n );\n\n assertMatch(html, /^

(\n steps: readonly T[],\n toClass: (step: T) => string,\n): Record =>\n Object.fromEntries(steps.map((step) => [step, toClass(step)])) as Record<\n T,\n string\n >;\n\nconst textClasses = variants({\n variants: {\n size: perStep(TYPE_STEPS, tw.type),\n weight: perStep(FONT_WEIGHT_STEPS, tw.weight),\n tone: {\n \"fg\": tw.text(\"fg\"),\n \"fg-muted\": tw.text(\"fg-muted\"),\n \"accent\": tw.text(\"accent-text\"),\n \"danger\": tw.text(\"danger-text\"),\n },\n },\n defaultVariants: { size: \"base\", weight: \"normal\", tone: \"fg\" },\n});\n\ntype TextOwnProps = {\n size?: TypeToken;\n weight?: FontWeightToken;\n tone?: TextTone;\n className?: string;\n};\n\nexport type TextProps =\n & { as?: T }\n & TextOwnProps\n & Omit, keyof TextOwnProps | \"as\">;\n\n/** A polymorphic component keeps `as`'s element type flowing into its rest props. */\ntype PolymorphicText = (\n props: TextProps & { ref?: Ref },\n) => ReactElement;\n\nconst TextImpl = forwardRef(\n (\n { as, size, weight, tone, className, ...rest }: TextProps,\n ref: Ref,\n ) => {\n const Component = (as ?? \"p\") as ElementType;\n return (\n \n );\n },\n);\nTextImpl.displayName = \"Text\";\n\nexport const Text = TextImpl as PolymorphicText;\n\n/** Heading levels, each mapping to its own semantic tag. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * Each level's default step on the type scale. `level` drives the semantics;\n * `size` is a separate prop so a consumer can down-size an `h1` without\n * demoting it in the document outline.\n */\nconst LEVEL_SIZE: Record = {\n 1: \"3xl\",\n 2: \"2xl\",\n 3: \"xl\",\n 4: \"lg\",\n 5: \"base\",\n 6: \"sm\",\n};\n\nexport type HeadingProps =\n & { level?: HeadingLevel }\n & TextProps;\n\ntype PolymorphicHeading = (\n props: HeadingProps & { ref?: Ref },\n) => ReactElement;\n\nconst HeadingImpl = forwardRef(\n (\n { level = 2, as, size, weight, ...rest }: HeadingProps,\n ref: Ref,\n ) => (\n \n ),\n);\nHeadingImpl.displayName = \"Heading\";\n\nexport const Heading = HeadingImpl as PolymorphicHeading;\n",[],[360,443,445],"facb4c9a-c5c8-4b7a-841b-6380d61bda2e","button_test.ts","019f632a-69d4-710e-80e2-820ce5cba237",["D",1784076371562],"import { assertStringIncludes } from \"jsr:@std/assert@1\";\nimport { createElement } from \"https://esm.sh/react@18.2.0\";\nimport { renderToStaticMarkup } from \"../testing/render.ts\";\nimport { Button } from \"./button.tsx\";\n\nDeno.test(\"Button uses the accent-ring token for its visible focus ring\", () => {\n const html = renderToStaticMarkup(createElement(Button, null, \"Save\"));\n\n assertStringIncludes(\n html,\n \"focus-visible:ring-[color:var(--kyla-accent-ring)]\",\n );\n});\n\nDeno.test(\"danger Button uses the danger foreground token\", () => {\n const html = renderToStaticMarkup(\n createElement(Button, { variant: \"danger\" }, \"Delete\"),\n );\n\n assertStringIncludes(\n html,\n \"text-[color:var(--kyla-danger-fg)]\",\n );\n});\n\nDeno.test(\"Button markup consumes structural spacing tokens\", () => {\n const html = renderToStaticMarkup(\n createElement(Button, { size: \"lg\" }, \"Continue\"),\n );\n\n assertStringIncludes(html, \"gap-[var(--kyla-space-2)]\");\n assertStringIncludes(html, \"px-[var(--kyla-space-6)]\");\n // Fixed control heights are component dimensions, outside the spacing scale.\n assertStringIncludes(html, \"h-11\");\n});\n",[],[360,443,452],"bb44445f-22f5-4035-9da3-31d1834285b6","button.tsx","019f632a-69d4-710e-80e2-7c6e7076c93d",["D",1784075151835],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n type ButtonHTMLAttributes,\n forwardRef,\n} from \"https://esm.sh/react@18.2.0\";\nimport { cn } from \"../utils/cn.ts\";\nimport { tw } from \"../theme/tw.ts\";\nimport { variants } from \"../utils/variants.ts\";\n\n/**\n * Button — the first zero-dependency component, and the reference for how every\n * component is authored: typed variant props mapped to token classes via\n * `variants()`, a semantic `

History · preview