[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_729":730,"_731":732},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":89,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":123,"_124":25,"_125":126,"_127":128,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","src/components/button.tsx","latestPath","fileId","019f624e-0dc9-701d-a888-4867486c521d","name","button.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { forwardRef } 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 `\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`) and the\nfirst component (`Button`) are in place; the rest of the v1 component set and\nthe real design palette are 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",[168],"b9424b06-37a8-4f88-b789-d02511d35f12","CONTEXT.md","019f624e-0dc9-701d-a888-892665900440",["D",1784060710350],"# 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`, `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 intentionally small\n(e.g. `--kyla-accent`, `--kyla-radius`, font); the rest are structural and stay\nfixed.\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** — a few tokens (e.g. accent,\nradius, font) a consumer may redefine to express brand. Structural tokens\n(surface hierarchy, spacing, borders) stay fixed; that fixedness _is_ the\nconsistency. A fuller named-theme system (multiple consumer-defined Themes, à la\nKumo'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.\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",[174],"ec70f492-6f32-443e-ac40-49b40af18520","CLAUDE.md","019f624e-0dc9-701d-a888-84e5bc5bd2b8",["D",1784060710350],"## 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## 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",[180],"c17b0c74-7650-470c-aee6-935fd2895cb4","AGENTS.md","019f624e-0dc9-701d-a888-83ee5eac02d2",["D",1784060710350],[186],"13444988-b8b6-4420-a16b-53bd0a74e6da",".vtignore","019f624e-0dc9-701d-a888-7e872ba80e4f",["D",1784060710350],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[191],"627b9ead-7fb1-422d-b169-547be16c1adb","src","019f624e-0dc9-701d-a888-78f1de9627c3",["D",1784060710350],"directory",[197],"e751100d-bf89-46e2-be6a-fe5d0b88ad95","preview","019f624e-0dc9-701d-a888-47c0119cbc77",["D",1784060710350],[203],"7a3515f2-88a6-4b88-b2cc-d96aef6162d9","docs","019f624e-0dc9-701d-a888-35e6ea9fee06",["D",1784060710350],[208],"pulls","branches",7,"forks","envVars",{"_220":62,"_222":62},"connections",{"_220":62,"_221":62},"count","unfilledCount","emptyCount",{"_44":207,"_32":208,"_30":209,"_153":-5,"_42":43,"_41":157,"_155":128,"_39":721,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":722,"_27":723},{"_44":717,"_32":688,"_30":683,"_153":209,"_42":43,"_41":157,"_155":128,"_39":718,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":719,"_27":720},{"_44":710,"_32":711,"_30":712,"_153":683,"_42":43,"_41":157,"_155":128,"_39":713,"_13":62,"_34":20,"_36":714,"_24":25,"_159":-5,"_295":715,"_27":716},{"_44":703,"_32":704,"_30":705,"_153":683,"_42":43,"_41":157,"_155":128,"_39":706,"_13":62,"_34":20,"_36":707,"_24":25,"_159":-5,"_295":708,"_27":709},{"_44":696,"_32":697,"_30":698,"_153":683,"_42":43,"_41":157,"_155":128,"_39":699,"_13":62,"_34":20,"_36":700,"_24":25,"_159":-5,"_295":701,"_27":702},{"_44":689,"_32":690,"_30":691,"_153":683,"_42":43,"_41":157,"_155":128,"_39":692,"_13":62,"_34":20,"_36":693,"_24":25,"_159":-5,"_295":694,"_27":695},{"_44":680,"_32":681,"_30":682,"_153":683,"_42":43,"_41":157,"_155":128,"_39":684,"_13":62,"_34":20,"_36":685,"_24":25,"_159":-5,"_295":686,"_27":687},{"_44":676,"_32":661,"_30":656,"_153":209,"_42":43,"_41":157,"_155":128,"_39":677,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":678,"_27":679},{"_44":669,"_32":670,"_30":671,"_153":656,"_42":43,"_41":157,"_155":128,"_39":672,"_13":62,"_34":20,"_36":673,"_24":25,"_159":-5,"_295":674,"_27":675},{"_44":662,"_32":663,"_30":664,"_153":656,"_42":43,"_41":157,"_155":128,"_39":665,"_13":62,"_34":20,"_36":666,"_24":25,"_159":-5,"_295":667,"_27":668},{"_44":653,"_32":654,"_30":655,"_153":656,"_42":43,"_41":157,"_155":128,"_39":657,"_13":62,"_34":20,"_36":658,"_24":25,"_159":-5,"_295":659,"_27":660},{"_44":649,"_32":648,"_30":643,"_153":209,"_42":43,"_41":157,"_155":128,"_39":650,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":651,"_27":652},{"_44":640,"_32":641,"_30":642,"_153":643,"_42":43,"_41":157,"_155":128,"_39":644,"_13":62,"_34":20,"_36":645,"_24":25,"_159":-5,"_295":646,"_27":647},{"_44":636,"_32":451,"_30":487,"_153":209,"_42":43,"_41":157,"_155":128,"_39":637,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":638,"_27":639},{"_44":632,"_32":619,"_30":614,"_153":487,"_42":43,"_41":157,"_155":128,"_39":633,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":634,"_27":635},{"_44":628,"_32":451,"_30":623,"_153":614,"_42":43,"_41":157,"_155":128,"_39":629,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":630,"_27":631},{"_44":620,"_32":621,"_30":622,"_153":623,"_42":43,"_41":157,"_155":128,"_39":624,"_13":62,"_34":20,"_36":625,"_24":25,"_159":-5,"_295":626,"_27":627},{"_44":612,"_32":444,"_30":613,"_153":614,"_42":43,"_41":157,"_155":128,"_39":615,"_13":62,"_34":20,"_36":616,"_24":25,"_159":-5,"_295":617,"_27":618},{"_44":608,"_32":581,"_30":576,"_153":487,"_42":43,"_41":157,"_155":128,"_39":609,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":610,"_27":611},{"_44":604,"_32":451,"_30":585,"_153":576,"_42":43,"_41":157,"_155":128,"_39":605,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":606,"_27":607},{"_44":597,"_32":598,"_30":599,"_153":585,"_42":43,"_41":157,"_155":128,"_39":600,"_13":62,"_34":20,"_36":601,"_24":25,"_159":-5,"_295":602,"_27":603},{"_44":590,"_32":591,"_30":592,"_153":585,"_42":43,"_41":157,"_155":128,"_39":593,"_13":62,"_34":20,"_36":594,"_24":25,"_159":-5,"_295":595,"_27":596},{"_44":582,"_32":583,"_30":584,"_153":585,"_42":43,"_41":157,"_155":128,"_39":586,"_13":62,"_34":20,"_36":587,"_24":25,"_159":-5,"_295":588,"_27":589},{"_44":574,"_32":444,"_30":575,"_153":576,"_42":43,"_41":157,"_155":128,"_39":577,"_13":62,"_34":20,"_36":578,"_24":25,"_159":-5,"_295":579,"_27":580},{"_44":570,"_32":543,"_30":538,"_153":487,"_42":43,"_41":157,"_155":128,"_39":571,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":572,"_27":573},{"_44":566,"_32":451,"_30":547,"_153":538,"_42":43,"_41":157,"_155":128,"_39":567,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":568,"_27":569},{"_44":559,"_32":560,"_30":561,"_153":547,"_42":43,"_41":157,"_155":128,"_39":562,"_13":62,"_34":20,"_36":563,"_24":25,"_159":-5,"_295":564,"_27":565},{"_44":552,"_32":553,"_30":554,"_153":547,"_42":43,"_41":157,"_155":128,"_39":555,"_13":62,"_34":20,"_36":556,"_24":25,"_159":-5,"_295":557,"_27":558},{"_44":544,"_32":545,"_30":546,"_153":547,"_42":43,"_41":157,"_155":128,"_39":548,"_13":62,"_34":20,"_36":549,"_24":25,"_159":-5,"_295":550,"_27":551},{"_44":536,"_32":444,"_30":537,"_153":538,"_42":43,"_41":157,"_155":128,"_39":539,"_13":62,"_34":20,"_36":540,"_24":25,"_159":-5,"_295":541,"_27":542},{"_44":532,"_32":498,"_30":493,"_153":487,"_42":43,"_41":157,"_155":128,"_39":533,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":534,"_27":535},{"_44":528,"_32":451,"_30":502,"_153":493,"_42":43,"_41":157,"_155":128,"_39":529,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":530,"_27":531},{"_44":521,"_32":522,"_30":523,"_153":502,"_42":43,"_41":157,"_155":128,"_39":524,"_13":62,"_34":20,"_36":525,"_24":25,"_159":-5,"_295":526,"_27":527},{"_44":514,"_32":515,"_30":516,"_153":502,"_42":43,"_41":157,"_155":128,"_39":517,"_13":62,"_34":20,"_36":518,"_24":25,"_159":-5,"_295":519,"_27":520},{"_44":507,"_32":508,"_30":509,"_153":502,"_42":43,"_41":157,"_155":128,"_39":510,"_13":62,"_34":20,"_36":511,"_24":25,"_159":-5,"_295":512,"_27":513},{"_44":499,"_32":500,"_30":501,"_153":502,"_42":43,"_41":157,"_155":128,"_39":503,"_13":62,"_34":20,"_36":504,"_24":25,"_159":-5,"_295":505,"_27":506},{"_44":491,"_32":444,"_30":492,"_153":493,"_42":43,"_41":157,"_155":128,"_39":494,"_13":62,"_34":20,"_36":495,"_24":25,"_159":-5,"_295":496,"_27":497},{"_44":486,"_32":452,"_30":446,"_153":487,"_42":43,"_41":157,"_155":128,"_39":488,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":489,"_27":490},{"_44":482,"_32":451,"_30":456,"_153":446,"_42":43,"_41":157,"_155":128,"_39":483,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":484,"_27":485},{"_44":475,"_32":476,"_30":477,"_153":456,"_42":43,"_41":157,"_155":128,"_39":478,"_13":62,"_34":20,"_36":479,"_24":25,"_159":-5,"_295":480,"_27":481},{"_44":468,"_32":469,"_30":470,"_153":456,"_42":43,"_41":157,"_155":128,"_39":471,"_13":62,"_34":20,"_36":472,"_24":25,"_159":-5,"_295":473,"_27":474},{"_44":461,"_32":462,"_30":463,"_153":456,"_42":43,"_41":157,"_155":128,"_39":464,"_13":62,"_34":20,"_36":465,"_24":25,"_159":-5,"_295":466,"_27":467},{"_44":453,"_32":454,"_30":455,"_153":456,"_42":43,"_41":157,"_155":128,"_39":457,"_13":62,"_34":20,"_36":458,"_24":25,"_159":-5,"_295":459,"_27":460},{"_44":443,"_32":444,"_30":445,"_153":446,"_42":43,"_41":157,"_155":128,"_39":447,"_13":62,"_34":20,"_36":448,"_24":25,"_159":-5,"_295":449,"_27":450},{"_44":439,"_32":438,"_30":433,"_153":209,"_42":43,"_41":157,"_155":128,"_39":440,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":441,"_27":442},{"_44":430,"_32":431,"_30":432,"_153":433,"_42":43,"_41":157,"_155":128,"_39":434,"_13":62,"_34":20,"_36":435,"_24":25,"_159":-5,"_295":436,"_27":437},{"_44":423,"_32":424,"_30":425,"_153":209,"_42":43,"_41":157,"_155":128,"_39":426,"_13":62,"_34":20,"_36":427,"_24":25,"_159":-5,"_295":428,"_27":429},{"_44":202,"_32":203,"_30":204,"_153":-5,"_42":43,"_41":157,"_155":128,"_39":420,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":421,"_27":422},{"_44":412,"_32":413,"_30":414,"_153":204,"_42":43,"_41":415,"_155":25,"_39":416,"_13":157,"_34":35,"_36":417,"_24":25,"_159":-5,"_295":418,"_27":419},{"_44":405,"_32":406,"_30":407,"_153":204,"_42":43,"_41":157,"_155":128,"_39":408,"_13":62,"_34":35,"_36":409,"_24":25,"_159":-5,"_295":410,"_27":411},{"_44":397,"_32":398,"_30":399,"_153":204,"_42":43,"_41":157,"_155":25,"_39":400,"_13":62,"_34":401,"_36":402,"_24":25,"_159":-5,"_295":403,"_27":404},{"_44":196,"_32":197,"_30":198,"_153":-5,"_42":43,"_41":157,"_155":128,"_39":394,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":395,"_27":396},{"_44":390,"_32":389,"_30":385,"_153":198,"_42":43,"_41":157,"_155":128,"_39":391,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":392,"_27":393},{"_44":384,"_32":33,"_30":31,"_153":385,"_42":43,"_41":14,"_155":25,"_39":386,"_13":157,"_34":35,"_36":38,"_24":25,"_159":-5,"_295":387,"_27":388},{"_44":380,"_32":344,"_30":339,"_153":198,"_42":43,"_41":157,"_155":128,"_39":381,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":382,"_27":383},{"_44":373,"_32":374,"_30":375,"_153":339,"_42":43,"_41":157,"_155":128,"_39":376,"_13":62,"_34":35,"_36":377,"_24":25,"_159":-5,"_295":378,"_27":379},{"_44":366,"_32":367,"_30":368,"_153":339,"_42":43,"_41":157,"_155":25,"_39":369,"_13":62,"_34":35,"_36":370,"_24":25,"_159":-5,"_295":371,"_27":372},{"_44":359,"_32":360,"_30":361,"_153":339,"_42":43,"_41":157,"_155":25,"_39":362,"_13":62,"_34":35,"_36":363,"_24":25,"_159":-5,"_295":364,"_27":365},{"_44":352,"_32":353,"_30":354,"_153":339,"_42":43,"_41":157,"_155":25,"_39":355,"_13":62,"_34":35,"_36":356,"_24":25,"_159":-5,"_295":357,"_27":358},{"_44":345,"_32":346,"_30":347,"_153":339,"_42":43,"_41":157,"_155":25,"_39":348,"_13":62,"_34":35,"_36":349,"_24":25,"_159":-5,"_295":350,"_27":351},{"_44":336,"_32":337,"_30":338,"_153":339,"_42":43,"_41":157,"_155":25,"_39":340,"_13":62,"_34":35,"_36":341,"_24":25,"_159":-5,"_295":342,"_27":343},{"_44":332,"_32":324,"_30":319,"_153":198,"_42":43,"_41":157,"_155":128,"_39":333,"_13":62,"_34":200,"_36":-5,"_24":25,"_159":-5,"_295":334,"_27":335},{"_44":325,"_32":326,"_30":327,"_153":319,"_42":43,"_41":157,"_155":128,"_39":328,"_13":62,"_34":35,"_36":329,"_24":25,"_159":-5,"_295":330,"_27":331},{"_44":316,"_32":317,"_30":318,"_153":319,"_42":43,"_41":157,"_155":128,"_39":320,"_13":62,"_34":35,"_36":321,"_24":25,"_159":-5,"_295":322,"_27":323},{"_44":190,"_32":191,"_30":192,"_153":-5,"_42":43,"_41":157,"_155":128,"_39":313,"_13":62,"_34":20,"_36":194,"_24":25,"_159":-5,"_295":314,"_27":315},{"_44":185,"_32":186,"_30":187,"_153":-5,"_42":43,"_41":157,"_155":25,"_39":310,"_13":62,"_34":20,"_36":183,"_24":25,"_159":-5,"_295":311,"_27":312},{"_44":179,"_32":180,"_30":181,"_153":-5,"_42":43,"_41":157,"_155":25,"_39":307,"_13":62,"_34":20,"_36":183,"_24":25,"_159":-5,"_295":308,"_27":309},{"_44":173,"_32":174,"_30":175,"_153":-5,"_42":43,"_41":157,"_155":128,"_39":304,"_13":62,"_34":20,"_36":177,"_24":25,"_159":-5,"_295":305,"_27":306},{"_44":167,"_32":168,"_30":169,"_153":-5,"_42":43,"_41":157,"_155":128,"_39":301,"_13":62,"_34":20,"_36":171,"_24":25,"_159":-5,"_295":302,"_27":303},{"_44":161,"_32":162,"_30":163,"_153":-5,"_42":43,"_41":157,"_155":128,"_39":298,"_13":62,"_34":20,"_36":165,"_24":25,"_159":-5,"_295":299,"_27":300},{"_44":150,"_32":151,"_30":152,"_153":-5,"_42":43,"_41":154,"_155":25,"_39":294,"_13":157,"_34":35,"_36":158,"_24":25,"_159":-5,"_295":296,"_27":297},["D",1784061010549],"children",[],[151],["D",1784060710350],[],[162],["D",1784060710350],[],[168],["D",1784060710350],[],[174],["D",1784060710350],[],[180],["D",1784060710350],[],[186],["D",1784060710350],[],[191],"8896ffad-a39f-4db7-a888-19a9e26dee09","variants.ts","019f624e-0dc9-701d-a888-71c218a637da","019f624e-0dc9-701d-a888-75cf7c383351",["D",1784060710350],"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 { className, ...selected } = 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 as Selection)[key] ??\n config.defaultVariants?.[key];\n if (chosen != null) {\n const cls = config.variants[key][chosen as string];\n if (cls) classes.push(cls);\n }\n }\n }\n return cn(...classes, className);\n };\n}\n",[],[197,324,317],"utils","4d2b16fe-af6d-46b2-8bfc-c29a7171e8fe","cn.ts","019f624e-0dc9-701d-a888-6fb319de6289",["D",1784060710350],"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",[],[197,324,326],"f8ef042b-875c-4d4a-aa48-83de086085a6",["D",1784060710350],[285,286],[197,324],"9752647d-d7dc-455e-9fdd-d42c69325729","tw_test.ts","019f624e-0dc9-701d-a888-6456dac23c04","019f624e-0dc9-701d-a888-6badd4c7c0db",["D",1784060710350],"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\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",[],[197,344,337],"theme","cfd1333c-e893-4000-b31e-a0f227ae8149","tw.ts","019f624e-0dc9-701d-a888-623cd30a0d59",["D",1784060710350],"/**\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 | \"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 | \"success\"\n | \"success-fg\";\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 =\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\n/** The graduated radius roles derived from `--kyla-radius`. */\nexport type RadiusToken = \"sm\" | \"md\" | \"lg\";\n\n/** Twind length utilities that can consume a spacing token. */\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\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} as const;\n",[],[197,344,346],"4446185d-dc73-41c1-8edf-34d1d655e592","tokens_test.ts","019f624e-0dc9-701d-a888-5f36e6d6a320",["D",1784060710350],"/**\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 { tokenCSS } 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, and ink on each colored fill. Anything not\n * listed here is not a 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 { 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 (\n const name of [\n \"accent-ring\",\n \"accent-text\",\n \"danger-fg\",\n \"success\",\n \"success-fg\",\n ]\n ) {\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\nconst 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\nconst RADIUS_STEPS = [\"sm\", \"md\", \"lg\"] as const;\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",[],[197,344,353],"494c76ea-32b0-43b9-afe7-82795fbb1a10","tokens.ts","019f624e-0dc9-701d-a888-5b94b18021b1",["D",1784060710350],"/**\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 to the Val Town/Tailwind 4px base unit.\n * The radius scale is derived from the one consumer-overridable base so the\n * proportions remain intact when a consumer changes --kyla-radius.\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 --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 --kyla-danger: light-dark(#ffa1ad, #a50036);\n --kyla-danger-fg: light-dark(#4d0218, #ffffff);\n --kyla-success: light-dark(#00d492, #007a55);\n --kyla-success-fg: light-dark(#002c22, #ffffff);\n\n /*\n * Structural spacing — fixed 4px base, following the compact VT/Tailwind\n * steps used by the component style guide. These are not consumer overrides.\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 { margin: 0; }\n`;\n",[],[197,344,360],"ae574daa-50c9-4851-b0b4-7f799cec29b1","provider.tsx","019f624e-0dc9-701d-a888-557214e559f2",["D",1784060710350],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n createContext,\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 * 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 mode: \"system\",\n setMode: () => {},\n});\n\nexport function useKylaMode() {\n return useContext(ModeContext);\n}\n\nconst TOKENS_ID = \"kyla-tokens\";\n\nexport function KylaProvider({\n children,\n defaultMode = \"system\",\n}: {\n children: React.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)) return;\n const style = document.createElement(\"style\");\n style.id = TOKENS_ID;\n style.textContent = tokenCSS;\n document.head.appendChild(style);\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",[],[197,344,367],"297c63df-b8d8-4d38-9098-a7f30522809a","contrast.ts","019f624e-0dc9-701d-a888-51959bfc4509",["D",1784060710350],"/**\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",[],[197,344,374],"2e996977-a664-4fe1-8b9c-419cd3fd48b3",["D",1784060710350],[278,279,280,281,282,283],[197,344],"ee2ac674-069c-4f10-ac4d-c4132a916228","019f624e-0dc9-701d-a888-4fcd8365477b",["D",1784061010558],[],[197,389,33],"components","b3ecbe00-6c7b-4cfe-856e-eb8c82c7858b",["D",1784060710350],[276],[197,389],["D",1784060710350],[275,277,284],[197],"af334e7d-d2b4-4f8a-af3b-c0ee4c8ad7b0","index.tsx","019f624e-0dc9-701d-a888-41894c7e3f8a",["D",1784060710350],"http","/**\n * Kylä UI — preview endpoint (WORK IN PROGRESS).\n *\n * A client-rendered showcase of the current component set. This is a *preview*\n * only: it imports the real library from src/ and does NOT modify anything about\n * the library itself. As more components land, add them to preview/app.tsx.\n *\n * Val Town has no build step, so we serve an HTML shell that loads Twind (required\n * before first paint — see ADR-0001) and then boots the React app. The client\n * entry (and everything it imports) is served transpiled-to-JS via serveFile.\n */\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst html = `\n\n \n \n \n Kylä UI — component preview (WIP)\n \n \n \n \n \n \n \n \n \n

\n \n \n`;\n\nexport default async function (req: Request): Promise {\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}",[],[203,398],"f0f91022-793e-452e-a4a9-9717a44e4e16","client.tsx","019f624e-0dc9-701d-a888-3eb400442221",["D",1784060710350],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"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",[],[203,406],"d0a43369-e441-4d0b-83a9-e5599533d296","app.tsx","019f624e-0dc9-701d-a888-38eecc264607",2,["D",1784061010482],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// The real library — imported, never modified.\nimport { Button, cn, KylaProvider, tw, useKylaMode } from \"../mod.ts\";\nimport type { ColorToken } from \"../src/theme/tw.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;\n\nconst COLOR_TOKENS: ColorToken[] = [\n \"base\",\n \"elevated\",\n \"recessed\",\n \"fg\",\n \"fg-muted\",\n \"line\",\n \"hairline\",\n \"accent\",\n \"accent-fg\",\n \"danger\",\n];\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: React.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: React.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\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 WipBanner() {\n return (\n \n

\n 🚧 Preview / work in progress. This page renders the\n {\" \"}\n current{\" \"}\n Kylä UI surface — one component (Button) plus the theme system. Palette\n values are provisional and more components are on the 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 alert(\"Saved! (from Kylä Button)\")}\n >\n Save\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
Button

\n 🔜 To come\n

The rest of the v1 component set
The real, AA-checked palette
Spacing / radius / type scales
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",[],[203,413],["D",1784060710350],[271,272,273],[203],"2ace1893-d162-4de8-a125-b61e39c4b8ae","roadmap.md","019f624e-0dc9-701d-a888-31aac6276112",["D",1784060710350],"# Kylä UI — Roadmap\n\nThe dependency-ordered plan for reaching v1. Each row links a spec in the\n[issue tracker](issues/); vocabulary is in [`../CONTEXT.md`](../CONTEXT.md) and\nthe load-bearing decisions are in [`adr/`](adr/). This doc is the synthesis —\nthe \"what next and in what order\" — not a re-spec of any single feature.\n\n## Built\n\n- **Styling foundation** — `cn`, `tw` (token utilities with the mandatory\n `color:` hint), `variants`, `KylaProvider` + Mode, provisional token\n stylesheet.\n- **`Button`** — the reference component (typed variants → tokens, semantic\n element, forwarded ref, escape-hatch `className`, token focus ring). \"Built\"\n means the pattern is proven, not that it's at VT coverage parity — see\n ADR-0005's coverage-parity clause and item 2 below.\n- **Substrate proof** — `nbbaier/kyla-ui-spike`, all four spikes green (Radix\n Dialog under the React-18.2.0 pin, Twind + CSS-var tokens, Provider injection,\n `light-dark()` + `data-mode`).\n\n## Planned — dependency order\n\nEach spec is `ready-for-agent`. Later rows assume earlier ones.\n\n| # | Feature | Spec | Depends on | Why it's here |\n| - | ------------------------------- | ----------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 1 | **Structural scales & palette** | [`structural-scales-palette`](issues/structural-scales-palette/spec.md) | — | Highest-leverage deferred item: fixed spacing/radius/type scales + real AA-checked palette, **conforming to the Val Town UI style guide** ([ADR-0005](adr/0005-val-town-visual-language-default-theme.md)). Where consistency actually lives; unblocks the set. Establishes the first test harness. |\n| 2 | **v1 zero-dep component set** | [`v1-component-set`](issues/v1-component-set/spec.md) | 1 | Text/Heading, Card, Input, Textarea, Label, Badge, Stack, Box, Divider, Select — the rest of the importable core, following the `Button` pattern — plus a `Button` revision slice closing its VT variant/state coverage gap (ADR-0005). |\n| 3 | **Dialog (Radix-backed)** | [`dialog-radix`](issues/dialog-radix/spec.md) | 2 | First headless-backed component, behind its own import path, out of the barrel. Exercises the hybrid split (ADR-0002) in real code. |\n| — | **Preview shell conventions** | [`gallery`](issues/gallery/spec.md) (folded in) | — | Bring the `preview/` HTML shell in line with platform conventions (real `.html` file, no inline `

Diff · v4