[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_383":384,"_385":386},"routes/_app.x.$handle.$name",{"_96":95,"_31":43,"_104":86,"_26":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":24,"_119":120,"_121":24,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":24},"version",50,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","src/theme","latestPath","fileId","56fb5e2e-6b54-11f1-95d4-1607ee4eb77e","name","theme","fileType","directory","content","createdAt",["D",1781814540580],"branchVersion","branchId","687a9437-44a8-49ca-94d7-3277b6842513","id","a2eea118-e17c-4a68-9fa4-155c6cf32150","kyla-ui",["D",1781804868537],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Components for consistently styled web apps on Val Town","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","a2eea118e17c4a689fa4155c6cf32150","tursoHostname","a2eea118e17c4a689fa4155c6cf32150-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789701064442],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":85,"_31":86,"_41":40,"_87":42,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":43,"_94":95},"isOwned",269,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":378,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":379,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":380,"_80":381,"_82":382,"_84":24},"tree",[211,218,228,229,230,231,232,233,234],"files",[211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234],"counts",{"_200":59,"_201":202,"_203":142,"_204":205,"_206":207},"contents",[126,127,128,129,130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":194,"_31":195,"_29":196,"_138":-5,"_39":40,"_38":197,"_140":184,"_36":198,"_13":59,"_33":34,"_35":-5,"_23":24,"_145":-5,"_26":199},{"_41":188,"_31":189,"_29":190,"_138":-5,"_39":40,"_38":191,"_140":184,"_36":192,"_13":59,"_33":34,"_35":-5,"_23":24,"_145":-5,"_26":193},{"_41":180,"_31":181,"_29":182,"_138":-5,"_39":40,"_38":183,"_140":184,"_36":185,"_13":142,"_33":20,"_35":186,"_23":24,"_145":-5,"_26":187},{"_41":173,"_31":174,"_29":175,"_138":-5,"_39":40,"_38":176,"_140":24,"_36":177,"_13":169,"_33":20,"_35":178,"_23":24,"_145":-5,"_26":179},{"_41":166,"_31":167,"_29":168,"_138":-5,"_39":40,"_38":169,"_140":24,"_36":170,"_13":142,"_33":20,"_35":171,"_23":24,"_145":-5,"_26":172},{"_41":159,"_31":160,"_29":161,"_138":-5,"_39":40,"_38":162,"_140":24,"_36":163,"_13":142,"_33":20,"_35":164,"_23":24,"_145":-5,"_26":165},{"_41":152,"_31":153,"_29":154,"_138":-5,"_39":40,"_38":155,"_140":24,"_36":156,"_13":142,"_33":20,"_35":157,"_23":24,"_145":-5,"_26":158},{"_41":147,"_31":148,"_29":149,"_138":-5,"_39":40,"_38":142,"_140":24,"_36":150,"_13":59,"_33":143,"_35":105,"_23":24,"_145":-5,"_26":151},{"_41":135,"_31":136,"_29":137,"_138":-5,"_39":40,"_38":139,"_140":24,"_36":141,"_13":142,"_33":143,"_35":144,"_23":24,"_145":-5,"_26":146},"210cf36c-68cd-496d-a8ce-a92f398b6e53","mod.ts","92255786-6b52-11f1-8262-1607ee4eb77e","parentId",39,"latest",["D",1781814189001],1,"script","/**\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 */\nexport { cn } from \"./src/cn.ts\";\nexport { type ColorToken, type State, tw } from \"./src/theme.ts\";\nexport { variants } from \"./src/variants.ts\";\nexport { KylaProvider, type Mode, useKylaMode } from \"./src/provider.tsx\";\n\n// Components\nexport { Button, type ButtonProps } from \"./src/button.tsx\";\n","label",[136],"4230de32-5649-499d-aa10-24a52c073266","main.ts","d1fffa9c-6b3d-11f1-a8da-1607ee4eb77e",["D",1781804868548],[148],"5dfdaa24-b105-402d-9d10-36b545ece0ac","deno.json","47d67822-6b3e-11f1-bad1-1607ee4eb77e",8,["D",1781805628403],"{\n\t\"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n\t\"compilerOptions\": {\n\t\t\"lib\": [\n\t\t\t\"dom\",\n\t\t\t\"dom.iterable\",\n\t\t\t\"dom.asynciterable\",\n\t\t\t\"deno.ns\",\n\t\t\t\"deno.unstable\"\n\t\t],\n\t\t\"noImplicitAny\": false,\n\t\t\"strict\": false,\n\t\t\"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n\t},\n\t\"experimental\": {\n\t\t\"unstable-node-globals\": true,\n\t\t\"unstable-sloppy-imports\": true,\n\t\t\"unstable-temporal\": true,\n\t\t\"unstable-worker-options\": true\n\t},\n\t\"lint\": {\n\t\t\"files\": {\n\t\t\t\"include\": [\"deno:/https/esm.town/**/*\"]\n\t\t},\n\t\t\"rules\": { \"exclude\": [\"no-explicit-any\"] }\n\t},\n\t\"lock\": false,\n\t\"nodeModulesDir\": \"auto\",\n\t\"imports\": {\n\t\t\"@biomejs/biome\": \"npm:@biomejs/biome@2.5.0\"\n\t}\n}\n",[153],"c74adb8c-16a0-4216-9ecf-edc4e22537b5","biome.json","47e1e748-6b3e-11f1-8b36-1607ee4eb77e",9,["D",1781805628422],"{\n \"$schema\": \"https://biomejs.dev/schemas/2.5.0/schema.json\",\n \"vcs\": { \"enabled\": true, \"clientKind\": \"git\", \"useIgnoreFile\": true },\n \"files\": { \"ignoreUnknown\": false },\n \"formatter\": { \"enabled\": true, \"indentStyle\": \"tab\" },\n \"linter\": { \"enabled\": true, \"rules\": { \"recommended\": true } },\n \"javascript\": { \"formatter\": { \"quoteStyle\": \"double\" } },\n \"assist\": {\n \"enabled\": true,\n \"actions\": { \"source\": { \"organizeImports\": \"on\" } }\n }\n}",[160],"2e06ce19-f677-4c33-9b42-7238549a5681","README.md","ec9dd180-6b3d-11f1-89a3-1607ee4eb77e",3,["D",1781804941550],"# Kylä UI\n\nA component library for building web apps on Val Town.",[167],"c0337397-a3af-4f93-884e-f82ce0cfb4e8","CONTEXT.md","bce56486-6b46-11f1-8898-1607ee4eb77e",23,["D",1781813006665],"# Kylä UI — Context\n\nA glossary of the core terms in this project. Implementation details live in code 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 React components, a styling system, and any helpers needed to build consistently styled web apps. It is **consumed by import** (`import { ... } from \"https://esm.town/v/nbbaier/kyla-ui/...\"`), not by remixing. This val is the source of truth for visual consistency across apps. It **also serves its own Gallery** (docs) at its HTTP route — the library documents itself, co-located with its source.\n\n### Starter\n\nA separate, remixable demo val (`kyla-ui-starter` or similar) that shows idiomatic *end-to-end* use of Kylä UI: a tiny but genuine **todo app** with a real HTTP route and `std/sqlite`, a working app shell, Provider + hydration wiring, and view-source link. A new app begins by remixing the Starter, then editing. The Starter **depends on** Kylä UI; the library never depends on the Starter. (Component reference/docs live in the library's Gallery, not the Starter.)\n\n### Gallery\n\nThe library's self-hosted documentation surface: an HTTP route on `kyla-ui` that renders every component in its variants and Modes, with the Mode toggle. It is both living docs and the in-browser proof that the stack renders correctly on Val Town (Twind + CSS-var tokens, Provider mode, Radix `Dialog` hydration). The seed of a fuller docs site later.\n\n### Release\n\nA blessed version of Kylä UI, produced by merging a development branch into `main`. `main` is the stable line: raw development never happens on it, so HEAD-of-`main` is always a Release. Each Release corresponds to a concrete Val Town version number (`?v=NNN`). A consumer tracks Releases by importing the unpinned URL (always latest Release) or freezes onto one by pinning its `?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 library rather than copying its code.\n\n### Semantic Token\n\nA named, intent-based design value (e.g. \"base surface,\" \"default foreground,\" \"line/border,\" \"danger\") rather than a raw value (e.g. \"blue-500\"). Components reference semantic tokens only; they never hard-code raw colors. Tokens are the unit of visual consistency and the surface through which a Theme is applied. (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 / status:** `accent`, `danger` (and siblings as needed)\n- **Shape:** `radius`\n\nOf these, the consumer-facing Override Surface for v1 is intentionally small (e.g. `--kyla-accent`, `--kyla-radius`, font); the rest are structural and stay fixed.\n\n### Theme\n\nA complete set of values bound to the Semantic Tokens, producing a coherent look. A consumer switches the active theme without touching component code. Light/dark is one axis of theming; brand/variant overrides are another.\n\nFor v1, Kylä ships **one opinionated theme** with automatic light/dark, and exposes a deliberately small **Override Surface** — a few tokens (e.g. accent, radius, font) a consumer may redefine to express brand. Structural tokens (surface hierarchy, spacing, borders) stay fixed; that fixedness *is* the consistency. A fuller named-theme system (multiple consumer-defined Themes, à la Kumo's theme configs) is 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. `variant=\"primary\"`, `size=\"sm\"`, `tone=\"danger\"`). Variants map to Semantic Tokens internally; they are the consumer's primary, discoverable means of varying a component while staying on-system. An escape-hatch `className` always merges last, letting an app deviate locally without forking. For v1 the public surface is finished components plus a `cn()` helper and the Provider — the underlying Headless Primitives stay internal.\n\n### Mode\n\nThe light/dark axis of a Theme. Modeled as `data-mode=\"light\" | \"dark\" | \"system\"`, where `system` falls through to the OS preference via CSS `light-dark()` (zero JS). Mode is **owned by the Provider** — it sets `data-mode` and exposes a hook to read/set it (persistence opt-in) — so apps get a first-class light/dark toggle without hand-rolling one (a common source of inconsistency and flash-of-wrong-theme bugs).\n\n### Headless Primitive\n\nThe behavior-and-accessibility layer of an interactive component (focus management, keyboard nav, ARIA), independent of its visual styling. For the hard interactive components (Dialog, Popover, Menu, Tabs), Kylä builds on a third-party headless primitive library rather than hand-rolling. Simple visual components (Button, Card, Stack, Text, Input, Badge) have no separate Headless Primitive — they are styled directly.\n\n",[174],"1c7f3876-c7c1-4d67-8ed9-16bd851ecf3f",".vtignore","47ce4d8c-6b3e-11f1-8eca-1607ee4eb77e",13,true,["D",1781805649048],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[181],"da3f4f02-c070-4df1-9bc5-96c25fc6eefd","src","91e38b30-6b52-11f1-bb7a-1607ee4eb77e",28,["D",1781813780417],[189],"61b715f9-32d9-45da-bff6-008ae80a2386","docs","bc8b0c5c-6b46-11f1-aeb1-1607ee4eb77e",14,["D",1781808698019],[195],"pulls","branches",7,"forks","envVars",{"_208":59,"_210":59},"connections",{"_208":59,"_209":59},"count","unfilledCount","emptyCount",{"_41":194,"_31":195,"_29":196,"_138":-5,"_39":40,"_38":197,"_140":184,"_36":375,"_13":59,"_33":34,"_35":-5,"_23":24,"_145":-5,"_236":376,"_26":377},{"_41":370,"_31":344,"_29":338,"_138":196,"_39":40,"_38":371,"_140":184,"_36":372,"_13":59,"_33":34,"_35":-5,"_23":24,"_145":-5,"_236":373,"_26":374},{"_41":361,"_31":362,"_29":363,"_138":338,"_39":40,"_38":364,"_140":24,"_36":365,"_13":366,"_33":20,"_35":367,"_23":24,"_145":-5,"_236":368,"_26":369},{"_41":353,"_31":354,"_29":355,"_138":338,"_39":40,"_38":356,"_140":24,"_36":357,"_13":59,"_33":20,"_35":358,"_23":24,"_145":-5,"_236":359,"_26":360},{"_41":345,"_31":346,"_29":347,"_138":338,"_39":40,"_38":348,"_140":24,"_36":349,"_13":59,"_33":20,"_35":350,"_23":24,"_145":-5,"_236":351,"_26":352},{"_41":335,"_31":336,"_29":337,"_138":338,"_39":40,"_38":339,"_140":24,"_36":340,"_13":59,"_33":20,"_35":341,"_23":24,"_145":-5,"_236":342,"_26":343},{"_41":327,"_31":328,"_29":329,"_138":196,"_39":40,"_38":330,"_140":24,"_36":331,"_13":169,"_33":20,"_35":332,"_23":24,"_145":-5,"_236":333,"_26":334},{"_41":188,"_31":189,"_29":190,"_138":-5,"_39":40,"_38":191,"_140":184,"_36":324,"_13":59,"_33":34,"_35":-5,"_23":24,"_145":-5,"_236":325,"_26":326},{"_41":317,"_31":318,"_29":319,"_138":190,"_39":40,"_38":320,"_140":184,"_36":321,"_13":59,"_33":34,"_35":-5,"_23":24,"_145":-5,"_236":322,"_26":323},{"_41":313,"_31":32,"_29":30,"_138":190,"_39":40,"_38":14,"_140":184,"_36":314,"_13":59,"_33":34,"_35":-5,"_23":24,"_145":-5,"_236":315,"_26":316},{"_41":306,"_31":307,"_29":308,"_138":190,"_39":40,"_38":309,"_140":184,"_36":310,"_13":59,"_33":34,"_35":-5,"_23":24,"_145":-5,"_236":311,"_26":312},{"_41":297,"_31":298,"_29":299,"_138":190,"_39":40,"_38":300,"_140":24,"_36":301,"_13":302,"_33":143,"_35":303,"_23":24,"_145":-5,"_236":304,"_26":305},{"_41":289,"_31":290,"_29":291,"_138":190,"_39":40,"_38":292,"_140":24,"_36":293,"_13":59,"_33":143,"_35":294,"_23":24,"_145":-5,"_236":295,"_26":296},{"_41":281,"_31":282,"_29":283,"_138":190,"_39":40,"_38":284,"_140":24,"_36":285,"_13":59,"_33":143,"_35":286,"_23":24,"_145":-5,"_236":287,"_26":288},{"_41":273,"_31":274,"_29":275,"_138":190,"_39":40,"_38":276,"_140":24,"_36":277,"_13":142,"_33":143,"_35":278,"_23":24,"_145":-5,"_236":279,"_26":280},{"_41":265,"_31":266,"_29":267,"_138":190,"_39":40,"_38":268,"_140":24,"_36":269,"_13":59,"_33":143,"_35":270,"_23":24,"_145":-5,"_236":271,"_26":272},{"_41":257,"_31":258,"_29":259,"_138":190,"_39":40,"_38":260,"_140":24,"_36":261,"_13":59,"_33":143,"_35":262,"_23":24,"_145":-5,"_236":263,"_26":264},{"_41":180,"_31":181,"_29":182,"_138":-5,"_39":40,"_38":183,"_140":184,"_36":254,"_13":142,"_33":20,"_35":186,"_23":24,"_145":-5,"_236":255,"_26":256},{"_41":173,"_31":174,"_29":175,"_138":-5,"_39":40,"_38":176,"_140":24,"_36":251,"_13":169,"_33":20,"_35":178,"_23":24,"_145":-5,"_236":252,"_26":253},{"_41":166,"_31":167,"_29":168,"_138":-5,"_39":40,"_38":169,"_140":24,"_36":248,"_13":142,"_33":20,"_35":171,"_23":24,"_145":-5,"_236":249,"_26":250},{"_41":159,"_31":160,"_29":161,"_138":-5,"_39":40,"_38":162,"_140":24,"_36":245,"_13":142,"_33":20,"_35":164,"_23":24,"_145":-5,"_236":246,"_26":247},{"_41":152,"_31":153,"_29":154,"_138":-5,"_39":40,"_38":155,"_140":24,"_36":242,"_13":142,"_33":20,"_35":157,"_23":24,"_145":-5,"_236":243,"_26":244},{"_41":147,"_31":148,"_29":149,"_138":-5,"_39":40,"_38":142,"_140":24,"_36":239,"_13":59,"_33":143,"_35":105,"_23":24,"_145":-5,"_236":240,"_26":241},{"_41":135,"_31":136,"_29":137,"_138":-5,"_39":40,"_38":139,"_140":24,"_36":235,"_13":142,"_33":143,"_35":144,"_23":24,"_145":-5,"_236":237,"_26":238},["D",1781814189001],"children",[],[136],["D",1781804868548],[],[148],["D",1781805628403],[],[153],["D",1781805628422],[],[160],["D",1781804941550],[],[167],["D",1781813006665],[],[174],["D",1781805649048],[],[181],"a88539c6-46fe-4845-a806-43b03dc6c285","variants.ts","92020682-6b52-11f1-80b8-1607ee4eb77e",30,["D",1781813780594],"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, \"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\tbase?: string;\n\tvariants?: V;\n\tdefaultVariants?: Selection;\n}) {\n\treturn (props: Selection & { className?: string } = {}): string => {\n\t\tconst { className, ...selected } = props;\n\t\tconst classes: string[] = [];\n\t\tif (config.base) classes.push(config.base);\n\t\tif (config.variants) {\n\t\t\tfor (const key in config.variants) {\n\t\t\t\tconst chosen =\n\t\t\t\t\t(selected as Selection)[key] ?? config.defaultVariants?.[key];\n\t\t\t\tif (chosen != null) {\n\t\t\t\t\tconst cls = config.variants[key][chosen as string];\n\t\t\t\t\tif (cls) classes.push(cls);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn cn(...classes, className);\n\t};\n}\n",[],[189,258],"a07a6ebd-703a-4afd-a63a-79fe4d242aaa","tokens.ts","920ac18c-6b52-11f1-a416-1607ee4eb77e",31,["D",1781813780622],"/**\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 * NOTE: these values are provisional. The real, AA-checked palette + spacing /\n * radius / type scales are a deferred design task (see v1-design-sketch.md).\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(#f3f4f6, #0b0b0c);\n --kyla-elevated: light-dark(#ffffff, #1c1c21);\n --kyla-recessed: light-dark(#e2e5ea, #050506);\n\n /* foreground */\n --kyla-fg: light-dark(#18181b, #f4f4f5);\n --kyla-fg-muted: light-dark(#71717a, #a1a1aa);\n\n /* borders */\n --kyla-line: light-dark(#d8dbe0, #2a2a30);\n --kyla-hairline: light-dark(#e9ebef, #1c1c21);\n\n /* accent / status */\n --kyla-accent: light-dark(#4f46e5, #818cf8);\n --kyla-accent-fg: light-dark(#ffffff, #0b0b0c);\n --kyla-danger: light-dark(#dc2626, #f87171);\n\n /* shape */\n --kyla-radius: 10px;\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 { margin: 0; }\n`;\n",[],[189,266],"73f2d173-92b0-4e32-9374-5cb9866c6598","theme.ts","92125ad2-6b52-11f1-8a2f-1607ee4eb77e",40,["D",1781814189115],"/**\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 */\nexport type ColorToken =\n\t| \"base\"\n\t| \"elevated\"\n\t| \"recessed\"\n\t| \"fg\"\n\t| \"fg-muted\"\n\t| \"line\"\n\t| \"hairline\"\n\t| \"accent\"\n\t| \"accent-fg\"\n\t| \"danger\";\n\n/** Common interaction states a token utility may be scoped to. */\nexport type State = \"hover\" | \"focus\" | \"focus-visible\" | \"active\" | \"disabled\";\n\nconst color = (prop: string, name: ColorToken, on?: State): string =>\n\t`${on ? `${on}:` : \"\"}${prop}-[color:var(--kyla-${name})]`;\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 * `radius` is a length and needs no hint.\n */\nexport const tw = {\n\tbg: (t: ColorToken, on?: State) => color(\"bg\", t, on),\n\ttext: (t: ColorToken, on?: State) => color(\"text\", t, on),\n\tborder: (t: ColorToken, on?: State) => color(\"border\", t, on),\n\tring: (t: ColorToken, on?: State) => color(\"ring\", t, on),\n\tringOffset: (t: ColorToken, on?: State) => color(\"ring-offset\", t, on),\n\t/** border-radius token (a length — no `color:` hint needed) */\n\tradius: \"rounded-[var(--kyla-radius)]\",\n} as const;\n",[],[189,274],"eb920d40-d5ae-444d-b40d-7a303057cc98","provider.tsx","92200010-6b52-11f1-80b8-1607ee4eb77e",33,["D",1781813780697],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseState,\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 * only the tokens are Provider-injected.\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\tmode: \"system\",\n\tsetMode: () => {},\n});\n\nexport function useKylaMode() {\n\treturn useContext(ModeContext);\n}\n\nconst TOKENS_ID = \"kyla-tokens\";\n\nexport function KylaProvider({\n\tchildren,\n\tdefaultMode = \"system\",\n}: {\n\tchildren: React.ReactNode;\n\tdefaultMode?: Mode;\n}) {\n\tconst [mode, setMode] = useState(defaultMode);\n\n\t// Inject the token stylesheet once. Idempotent: guards against double-inject.\n\tuseEffect(() => {\n\t\tif (document.getElementById(TOKENS_ID)) return;\n\t\tconst style = document.createElement(\"style\");\n\t\tstyle.id = TOKENS_ID;\n\t\tstyle.textContent = tokenCSS;\n\t\tdocument.head.appendChild(style);\n\t}, []);\n\n\t// Reflect Mode onto the document so `data-mode` selectors take effect.\n\tuseEffect(() => {\n\t\tdocument.documentElement.setAttribute(\"data-mode\", mode);\n\t}, [mode]);\n\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n}\n",[],[189,282],"cfbb8ed9-c113-4e57-ae9b-e6b871597c83","cn.ts","91f4e2d6-6b52-11f1-a883-1607ee4eb77e",29,["D",1781813780533],"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\treturn twMerge(clsx(inputs));\n}\n",[],[189,290],"ae72e89f-543b-4842-9c58-9d7fc47120e9","button.tsx","8569cf08-6b53-11f1-a668-1607ee4eb77e",47,["D",1781814371541],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { forwardRef } from \"https://esm.sh/react@18.2.0\";\nimport { cn } from \"./cn.ts\";\nimport { tw } from \"./theme.ts\";\nimport { variants } from \"./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 `

Diff · v50