[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_789":790,"_791":792},"routes/_app.x.$handle.$name",{"_99":98,"_33":46,"_107":89,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":125,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_33":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",195,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":20,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_31":32,"_33":34,"_35":20,"_36":37},"deleted",false,"deletedHere","path","docs/issues/starter/PRD.md","latestPath","docs/issues/starter/spec.md","fileId","45edca42-798a-11f1-afe8-1607ee4eb77e","name","PRD.md","fileType","content","# PRD: Starter — remixable todo app\n\nStatus: ready-for-agent\nLabels: ready-for-agent\n\n> Ships the **Starter** defined in [CONTEXT.md](../../../CONTEXT.md): a separate,\n> remixable demo val showing idiomatic end-to-end use of Kylä UI. It depends on\n> the [component set](../v1-component-set/PRD.md) (and ideally\n> [Dialog](../dialog-radix/PRD.md)); the Starter depends on the library, never the\n> reverse.\n\n## Problem Statement\n\nCONTEXT.md's on-ramp for a new app is \"remix the Starter, then edit.\" But the\nStarter doesn't exist. A developer who wants to build with Kylä has only the\nGallery (which shows components in isolation) and the README snippet (a single\nButton). There's no genuine, end-to-end example wiring together a real HTTP route,\npersistence, the Provider + client hydration, an app shell, and a Mode toggle —\ni.e. no honest demonstration that Kylä works as a whole for building an actual app.\n\n## Solution\n\nShip **`kyla-ui-starter`**: a small but genuine **todo app** that imports Kylä UI\nand is built entirely from its components. It has a real HTTP route, `std/sqlite`\npersistence, `KylaProvider` + client hydration, an app shell, a Mode toggle, and a\nview-source link. Remixing it and editing is the intended way to start a new Kylä\napp. Building it also dogfoods the library and surfaces gaps in the component set.\n\n## User Stories\n\n1. As a new Kylä developer, I want a remixable Starter val, so that I can begin a real app by copying a working example instead of assembling one.\n2. As a new developer, I want the Starter to be a genuine todo app (add / toggle / delete, persisted), so that it demonstrates real behavior, not a static mock.\n3. As a new developer, I want the Starter to persist todos with `std/sqlite`, so that I see the idiomatic Val Town persistence pattern.\n4. As a new developer, I want the Starter to serve a real HTTP route, so that I see how a Kylä app is served on Val Town.\n5. As a new developer, I want the Starter wrapped in `KylaProvider` with client hydration, so that I see the correct Provider + CSR wiring (Twind before first paint, tokens injected, Mode owned).\n6. As a new developer, I want the whole UI built from Kylä components, so that I learn the components by seeing them composed in a real app.\n7. As a new developer, I want a Mode toggle in the Starter, so that I see how to give an app a first-class light/dark toggle via `useKylaMode()`.\n8. As a new developer, I want a view-source link, so that I can jump from the running app to its code.\n9. As a new developer, I want the Starter pinned to a known-good Kylä Release, so that a fresh remix renders correctly and isn't broken by an in-flight library change.\n10. As a maintainer, I want the Starter to depend on the library (never the reverse), so that the dependency direction stays clean.\n11. As a maintainer, I want the Starter built from real components, so that it doubles as an integration check that the set composes into an app.\n12. As an end user of the demo, I want to add, complete, and remove todos, so that the app is actually usable.\n13. As an end user, I want my todos to persist across reloads, so that the demo behaves like a real app.\n\n## Implementation Decisions\n\n- **Separate val:** `kyla-ui-starter` (per CONTEXT.md), distinct from `kyla-ui`.\n It **imports** Kylä UI; the library never imports it.\n- **CSR-only** (sketch/ADR-0001): an HTML shell loads Twind before first paint,\n a client entry hydrates the app, and `KylaProvider` wraps it (owning tokens +\n Mode). Same shell mechanics the Gallery/preview use (importmap for `npm:`\n specifiers, `std/catch`, `serveFile`).\n- **Persistence:** `std/sqlite` (project-scoped DB) for the todo list.\n- **HTTP route:** serves the shell and handles todo mutations — list, add, toggle\n complete, delete — round-tripping through sqlite.\n- **UI built from Kylä components:** app shell, `Card`, `Input`, `Button`,\n `Text`/`Heading`, `Stack`, etc., plus the Mode toggle via `useKylaMode()`. Using\n `Dialog` (e.g. a confirm-delete) is encouraged once it ships, to demonstrate the\n own-import-path pattern.\n- **Version pinning (decided here):** the Starter **pins** its Kylä import to a\n known-good `?v=NNN` Release, so a remix is a stable starting point rather than\n tracking `main` mid-change (ADR-0004). Document which Release it targets; bump\n deliberately.\n- **view-source link** to the Starter val, matching the preview/Gallery pattern.\n\n## Testing Decisions\n\n- **What makes a good test:** it drives the app's *external* HTTP behavior — the\n todo operations round-tripping through sqlite — not the internal React tree or\n the library's internals (those are the component PRDs' concern).\n- **Seam (HTTP, highest available for the app):** exercise the route endpoints and\n assert the todo lifecycle: adding a todo returns/lists it, toggling flips its\n completed state, deleting removes it, and the list reflects persisted state on a\n fresh request. Optionally assert the served shell is a `200` HTML page that\n boots the client entry.\n- **Modules tested:** the Starter's HTTP handler + its sqlite data access.\n- **Prior art:** Val Town `std/sqlite` HTTP-handler patterns (fetch a template via\n the platform's skill finder); the `preview/index.tsx` handler is the reference\n for the serve-shell-and-files structure on Val Town.\n\n## Out of Scope\n\n- Auth / multi-user / per-user todo lists.\n- Isomorphic SSR + hydration for SEO (sketch defers this; CSR-only for v1).\n- Demonstrations beyond the todo app (other example apps).\n- The **Gallery** / component docs — those live in the library\n ([Gallery PRD](../gallery/PRD.md)), not the Starter.\n\n## Further Notes\n\n- The Starter is the honest integration test of the whole v1: if composing it into\n a real app is awkward, that's a signal to fix the component set, not to work\n around it in the Starter.\n- Keep it \"tiny but genuine\" — enough to be a real app, small enough to read in one\n sitting, since developers will copy it as their baseline.\n","# PRD: Starter — remixable todo app\n\nStatus: ready-for-agent Labels: ready-for-agent\n\n> Ships the **Starter** defined in [CONTEXT.md](../../../CONTEXT.md): a\n> separate, remixable demo val showing idiomatic end-to-end use of Kylä UI. It\n> depends on the [component set](../v1-component-set/PRD.md) (and ideally\n> [Dialog](../dialog-radix/PRD.md)); the Starter depends on the library, never\n> the reverse.\n\n## Problem Statement\n\nCONTEXT.md's on-ramp for a new app is \"remix the Starter, then edit.\" But the\nStarter doesn't exist. A developer who wants to build with Kylä has only the\nGallery (which shows components in isolation) and the README snippet (a single\nButton). There's no genuine, end-to-end example wiring together a real HTTP\nroute, persistence, the Provider + client hydration, an app shell, and a Mode\ntoggle — i.e. no honest demonstration that Kylä works as a whole for building an\nactual app.\n\n## Solution\n\nShip **`kyla-ui-starter`**: a small but genuine **todo app** that imports Kylä\nUI and is built entirely from its components. It has a real HTTP route,\n`std/sqlite` persistence, `KylaProvider` + client hydration, an app shell, a\nMode toggle, and a view-source link. Remixing it and editing is the intended way\nto start a new Kylä app. Building it also dogfoods the library and surfaces gaps\nin the component set.\n\n## User Stories\n\n1. As a new Kylä developer, I want a remixable Starter val, so that I can begin\n a real app by copying a working example instead of assembling one.\n2. As a new developer, I want the Starter to be a genuine todo app (add / toggle\n / delete, persisted), so that it demonstrates real behavior, not a static\n mock.\n3. As a new developer, I want the Starter to persist todos with `std/sqlite`, so\n that I see the idiomatic Val Town persistence pattern.\n4. As a new developer, I want the Starter to serve a real HTTP route, so that I\n see how a Kylä app is served on Val Town.\n5. As a new developer, I want the Starter wrapped in `KylaProvider` with client\n hydration, so that I see the correct Provider + CSR wiring (Twind before\n first paint, tokens injected, Mode owned).\n6. As a new developer, I want the whole UI built from Kylä components, so that I\n learn the components by seeing them composed in a real app.\n7. As a new developer, I want a Mode toggle in the Starter, so that I see how to\n give an app a first-class light/dark toggle via `useKylaMode()`.\n8. As a new developer, I want a view-source link, so that I can jump from the\n running app to its code.\n9. As a new developer, I want the Starter pinned to a known-good Kylä Release,\n so that a fresh remix renders correctly and isn't broken by an in-flight\n library change.\n10. As a maintainer, I want the Starter to depend on the library (never the\n reverse), so that the dependency direction stays clean.\n11. As a maintainer, I want the Starter built from real components, so that it\n doubles as an integration check that the set composes into an app.\n12. As an end user of the demo, I want to add, complete, and remove todos, so\n that the app is actually usable.\n13. As an end user, I want my todos to persist across reloads, so that the demo\n behaves like a real app.\n\n## Implementation Decisions\n\n- **Separate val:** `kyla-ui-starter` (per CONTEXT.md), distinct from `kyla-ui`.\n It **imports** Kylä UI; the library never imports it.\n- **CSR-only** (sketch/ADR-0001): an HTML shell loads Twind before first paint,\n a client entry hydrates the app, and `KylaProvider` wraps it (owning tokens +\n Mode). Same shell mechanics the Gallery/preview use (importmap for `npm:`\n specifiers, `std/catch`, `serveFile`).\n- **Persistence:** `std/sqlite` (project-scoped DB) for the todo list.\n- **HTTP route:** serves the shell and handles todo mutations — list, add,\n toggle complete, delete — round-tripping through sqlite.\n- **UI built from Kylä components:** app shell, `Card`, `Input`, `Button`,\n `Text`/`Heading`, `Stack`, etc., plus the Mode toggle via `useKylaMode()`.\n Using `Dialog` (e.g. a confirm-delete) is encouraged once it ships, to\n demonstrate the own-import-path pattern.\n- **Version pinning (decided here):** the Starter **pins** its Kylä import to a\n known-good `?v=NNN` Release, so a remix is a stable starting point rather than\n tracking `main` mid-change (ADR-0004). Document which Release it targets; bump\n deliberately.\n- **view-source link** to the Starter val, matching the preview/Gallery pattern.\n\n## Testing Decisions\n\n- **What makes a good test:** it drives the app's _external_ HTTP behavior — the\n todo operations round-tripping through sqlite — not the internal React tree or\n the library's internals (those are the component PRDs' concern).\n- **Seam (HTTP, highest available for the app):** exercise the route endpoints\n and assert the todo lifecycle: adding a todo returns/lists it, toggling flips\n its completed state, deleting removes it, and the list reflects persisted\n state on a fresh request. Optionally assert the served shell is a `200` HTML\n page that boots the client entry.\n- **Modules tested:** the Starter's HTTP handler + its sqlite data access.\n- **Prior art:** Val Town `std/sqlite` HTTP-handler patterns (fetch a template\n via the platform's skill finder); the `preview/index.tsx` handler is the\n reference for the serve-shell-and-files structure on Val Town.\n\n## Out of Scope\n\n- Auth / multi-user / per-user todo lists.\n- Isomorphic SSR + hydration for SEO (sketch defers this; CSR-only for v1).\n- Demonstrations beyond the todo app (other example apps).\n- The **Gallery** / component docs — those live in the library\n ([Gallery PRD](../gallery/PRD.md)), not the Starter.\n\n## Further Notes\n\n- The Starter is the honest integration test of the whole v1: if composing it\n into a real app is awkward, that's a signal to fix the component set, not to\n work around it in the Starter.\n- Keep it \"tiny but genuine\" — enough to be a real app, small enough to read in\n one sitting, since developers will copy it as their baseline.\n","createdAt",["D",1784058611129],"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",1789614083669],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":56,"_103":104,"_105":25},"branch",{"_13":88,"_33":89,"_44":43,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":46,"_97":98},"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",{"_44":45,"_33":46,"_39":784,"_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":785,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":786,"_83":787,"_85":788,"_87":25},"tree",[234,281,285,297,298,299,300,301,302,303,304],"files",[234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304],"counts",{"_223":62,"_224":225,"_226":201,"_227":228,"_229":230},"contents",[130,131,132,133,134,135,136,137,138,139,140],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":217,"_33":218,"_31":219,"_144":-5,"_42":43,"_41":220,"_146":125,"_39":221,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_27":222},{"_44":211,"_33":212,"_31":213,"_144":-5,"_42":43,"_41":214,"_146":125,"_39":215,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_27":216},{"_44":204,"_33":205,"_31":206,"_144":-5,"_42":43,"_41":207,"_146":125,"_39":208,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_27":210},{"_44":196,"_33":197,"_31":198,"_144":-5,"_42":43,"_41":199,"_146":125,"_39":200,"_13":201,"_35":20,"_36":202,"_24":25,"_151":-5,"_27":203},{"_44":191,"_33":192,"_31":193,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":194,"_13":158,"_35":20,"_36":189,"_24":25,"_151":-5,"_27":195},{"_44":184,"_33":185,"_31":186,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":188,"_13":181,"_35":20,"_36":189,"_24":25,"_151":-5,"_27":190},{"_44":176,"_33":177,"_31":178,"_144":-5,"_42":43,"_41":179,"_146":25,"_39":180,"_13":181,"_35":20,"_36":182,"_24":25,"_151":-5,"_27":183},{"_44":168,"_33":169,"_31":170,"_144":-5,"_42":43,"_41":171,"_146":25,"_39":172,"_13":173,"_35":20,"_36":174,"_24":25,"_151":-5,"_27":175},{"_44":161,"_33":162,"_31":163,"_144":-5,"_42":43,"_41":164,"_146":25,"_39":165,"_13":148,"_35":20,"_36":166,"_24":25,"_151":-5,"_27":167},{"_44":153,"_33":154,"_31":155,"_144":-5,"_42":43,"_41":156,"_146":25,"_39":157,"_13":158,"_35":20,"_36":159,"_24":25,"_151":-5,"_27":160},{"_44":141,"_33":142,"_31":143,"_144":-5,"_42":43,"_41":145,"_146":25,"_39":147,"_13":148,"_35":149,"_36":150,"_24":25,"_151":-5,"_27":152},"c704bd8b-1c4c-434f-83f7-34691d4f1cd1","mod.ts","92255786-6b52-11f1-8262-1607ee4eb77e","parentId",55,"latest",["D",1781814540942],2,"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/utils/cn.ts\";\nexport { variants } from \"./src/utils/variants.ts\";\nexport { type ColorToken, type State, tw } from \"./src/theme/tw.ts\";\nexport { KylaProvider, type Mode, useKylaMode } from \"./src/theme/provider.tsx\";\n\n// Components\nexport { Button, type ButtonProps } from \"./src/components/button.tsx\";\n","label",[142],"3cfe5449-3990-4a8d-a099-ee27f7919b37","deno.json","47d67822-6b3e-11f1-bad1-1607ee4eb77e",173,["D",1784058609134],3,"{\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 \"lint\": {\n \"include\": [\"*.ts\", \"*.tsx\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-import-prefix\"]\n }\n },\n \"tasks\": {\n \"typecheck\": \"VAL_TOWN_API_KEY=test deno check --allow-import=esm.town,www.val.town,esm.sh,jsr.io main.ts mod.ts api.ts app.tsx components.tsx ui.tsx layout.tsx theme.ts db.ts api_test.ts app_test.tsx db_test.ts\",\n \"test\": \"VAL_TOWN_API_KEY=test deno test --allow-env=VAL_TOWN_API_KEY --allow-import=esm.town,www.val.town,esm.sh,jsr.io\",\n \"check\": \"deno fmt && deno lint && deno task typecheck && deno task test\"\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}\n",[154],"d8e741db-12c6-4dac-9af8-bf72beb8a863","biome.json","47e1e748-6b3e-11f1-8b36-1607ee4eb77e",171,["D",1783577438960],"{\n\t\"$schema\": \"https://biomejs.dev/schemas/2.5.2/schema.json\",\n\t\"vcs\": {\n\t\t\"enabled\": false,\n\t\t\"clientKind\": \"git\",\n\t\t\"useIgnoreFile\": false\n\t},\n\t\"files\": {\n\t\t\"ignoreUnknown\": false\n\t},\n\t\"formatter\": {\n\t\t\"enabled\": true,\n\t\t\"indentStyle\": \"tab\"\n\t},\n\t\"linter\": {\n\t\t\"enabled\": true,\n\t\t\"rules\": {\n\t\t\t\"preset\": \"recommended\"\n\t\t}\n\t},\n\t\"javascript\": {\n\t\t\"formatter\": {\n\t\t\t\"quoteStyle\": \"double\"\n\t\t}\n\t},\n\t\"assist\": {\n\t\t\"enabled\": true,\n\t\t\"actions\": {\n\t\t\t\"source\": {\n\t\t\t\t\"organizeImports\": \"on\"\n\t\t\t}\n\t\t}\n\t}\n}\n",[162],"399b091b-4f55-485d-9ec9-ff6e0c5c1552","README.md","ec9dd180-6b3d-11f1-89a3-1607ee4eb77e",152,["D",1783561973686],6,"# 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 \tButton,\n \tKylaProvider,\n } from \"https://esm.town/v/nbbaier/kyla-ui/mod.ts\";\n\n export function App() {\n \treturn (\n \t\t\n \t\t\t\n \t\t\n \t);\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`.",[169],"2a2918a9-7e7b-4b9e-a2fe-7d1c29ffdd5c","CONTEXT.md","bce56486-6b46-11f1-8898-1607ee4eb77e",174,["D",1784058609130],5,"# 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",[177],"ccde65f9-115b-4709-bfa3-05a6dac23ef1","CLAUDE.md","a53286c6-775c-11f1-abf2-1607ee4eb77e",172,["D",1783578006344],"## Working on changes\n\nDevelopment happens on a Val Town **val branch**, never directly on `main`. `main`\nis the stable release line — HEAD-of-`main` is always a Release (a concrete\n`?v=NNN`), so raw work never lands on it. Branch off `main`, do the work on the\nbranch, and land it by merging the branch into `main`, which cuts the next Release.\nSee [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/**` (PRDs, ADRs, roadmap, reference docs) carry no code/version surface, so\nthey 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 PRDs live as local markdown files under `docs/issues//`; no external tracker. See `docs/agents/issue-tracker.md`.\n\n### Triage labels\n\nUses the default five-role label vocabulary unchanged (`needs-triage`, `needs-info`, `ready-for-agent`, `ready-for-human`, `wontfix`). See `docs/agents/triage-labels.md`.\n\n### Domain docs\n\nSingle-context layout: `CONTEXT.md` + `docs/adr/` at the repo root. See `docs/agents/domain.md`.\n",[185],"ab928d9f-8e30-48d8-8ee6-78f970500c61","AGENTS.md","9b865e5e-7770-11f1-b136-1607ee4eb77e",["D",1783578006344],[192],"1c7f3876-c7c1-4d67-8ed9-16bd851ecf3f",".vtignore","47ce4d8c-6b3e-11f1-8eca-1607ee4eb77e",13,["D",1781805649048],1,".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[197],"da3f4f02-c070-4df1-9bc5-96c25fc6eefd","src","91e38b30-6b52-11f1-bb7a-1607ee4eb77e",28,["D",1781813780417],"directory",[205],"aac8fba5-9942-4296-93bc-56339f5fdbb7","preview","019f397a-0ad7-770b-b0dd-ab97f904224e",78,["D",1783375727322],[212],"61b715f9-32d9-45da-bff6-008ae80a2386","docs","bc8b0c5c-6b46-11f1-aeb1-1607ee4eb77e",14,["D",1781808698019],[218],"pulls","branches",7,"forks","envVars",{"_231":62,"_233":62},"connections",{"_231":62,"_232":62},"count","unfilledCount","emptyCount",{"_44":217,"_33":218,"_31":219,"_144":-5,"_42":43,"_41":220,"_146":125,"_39":781,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":782,"_27":783},{"_44":776,"_33":743,"_31":737,"_144":219,"_42":43,"_41":777,"_146":125,"_39":778,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":779,"_27":780},{"_44":768,"_33":769,"_31":770,"_144":737,"_42":43,"_41":771,"_146":125,"_39":772,"_13":158,"_35":20,"_36":773,"_24":25,"_151":-5,"_306":774,"_27":775},{"_44":760,"_33":761,"_31":762,"_144":737,"_42":43,"_41":763,"_146":125,"_39":764,"_13":201,"_35":20,"_36":765,"_24":25,"_151":-5,"_306":766,"_27":767},{"_44":752,"_33":753,"_31":754,"_144":737,"_42":43,"_41":755,"_146":125,"_39":756,"_13":201,"_35":20,"_36":757,"_24":25,"_151":-5,"_306":758,"_27":759},{"_44":744,"_33":745,"_31":746,"_144":737,"_42":43,"_41":747,"_146":25,"_39":748,"_13":62,"_35":20,"_36":749,"_24":25,"_151":-5,"_306":750,"_27":751},{"_44":734,"_33":735,"_31":736,"_144":737,"_42":43,"_41":738,"_146":125,"_39":739,"_13":148,"_35":20,"_36":740,"_24":25,"_151":-5,"_306":741,"_27":742},{"_44":729,"_33":712,"_31":706,"_144":219,"_42":43,"_41":730,"_146":125,"_39":731,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":732,"_27":733},{"_44":721,"_33":722,"_31":723,"_144":706,"_42":43,"_41":724,"_146":125,"_39":725,"_13":201,"_35":20,"_36":726,"_24":25,"_151":-5,"_306":727,"_27":728},{"_44":713,"_33":714,"_31":715,"_144":706,"_42":43,"_41":716,"_146":25,"_39":717,"_13":173,"_35":20,"_36":718,"_24":25,"_151":-5,"_306":719,"_27":720},{"_44":703,"_33":704,"_31":705,"_144":706,"_42":43,"_41":707,"_146":125,"_39":708,"_13":158,"_35":20,"_36":709,"_24":25,"_151":-5,"_306":710,"_27":711},{"_44":698,"_33":697,"_31":691,"_144":219,"_42":43,"_41":699,"_146":125,"_39":700,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":701,"_27":702},{"_44":688,"_33":689,"_31":690,"_144":691,"_42":43,"_41":692,"_146":25,"_39":693,"_13":62,"_35":20,"_36":694,"_24":25,"_151":-5,"_306":695,"_27":696},{"_44":683,"_33":470,"_31":512,"_144":219,"_42":43,"_41":684,"_146":125,"_39":685,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":686,"_27":687},{"_44":678,"_33":663,"_31":657,"_144":512,"_42":43,"_41":679,"_146":125,"_39":680,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":681,"_27":682},{"_44":673,"_33":470,"_31":667,"_144":657,"_42":43,"_41":674,"_146":125,"_39":675,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":676,"_27":677},{"_44":664,"_33":665,"_31":666,"_144":667,"_42":43,"_41":668,"_146":25,"_39":669,"_13":201,"_35":20,"_36":670,"_24":25,"_151":-5,"_306":671,"_27":672},{"_44":655,"_33":34,"_31":656,"_144":657,"_42":43,"_41":658,"_146":25,"_39":659,"_13":201,"_35":20,"_36":660,"_24":25,"_151":-5,"_306":661,"_27":662},{"_44":650,"_33":619,"_31":613,"_144":512,"_42":43,"_41":651,"_146":125,"_39":652,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":653,"_27":654},{"_44":645,"_33":470,"_31":623,"_144":613,"_42":43,"_41":646,"_146":125,"_39":647,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":648,"_27":649},{"_44":637,"_33":638,"_31":639,"_144":623,"_42":43,"_41":640,"_146":25,"_39":641,"_13":201,"_35":20,"_36":642,"_24":25,"_151":-5,"_306":643,"_27":644},{"_44":629,"_33":630,"_31":631,"_144":623,"_42":43,"_41":632,"_146":25,"_39":633,"_13":201,"_35":20,"_36":634,"_24":25,"_151":-5,"_306":635,"_27":636},{"_44":620,"_33":621,"_31":622,"_144":623,"_42":43,"_41":624,"_146":25,"_39":625,"_13":201,"_35":20,"_36":626,"_24":25,"_151":-5,"_306":627,"_27":628},{"_44":611,"_33":34,"_31":612,"_144":613,"_42":43,"_41":614,"_146":25,"_39":615,"_13":201,"_35":20,"_36":616,"_24":25,"_151":-5,"_306":617,"_27":618},{"_44":606,"_33":575,"_31":571,"_144":512,"_42":43,"_41":607,"_146":125,"_39":608,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":609,"_27":610},{"_44":601,"_33":470,"_31":579,"_144":571,"_42":43,"_41":602,"_146":125,"_39":603,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":604,"_27":605},{"_44":593,"_33":594,"_31":595,"_144":579,"_42":43,"_41":596,"_146":25,"_39":597,"_13":62,"_35":20,"_36":598,"_24":25,"_151":-5,"_306":599,"_27":600},{"_44":585,"_33":586,"_31":587,"_144":579,"_42":43,"_41":588,"_146":25,"_39":589,"_13":201,"_35":20,"_36":590,"_24":25,"_151":-5,"_306":591,"_27":592},{"_44":576,"_33":577,"_31":578,"_144":579,"_42":43,"_41":580,"_146":25,"_39":581,"_13":62,"_35":20,"_36":582,"_24":25,"_151":-5,"_306":583,"_27":584},{"_44":570,"_33":34,"_31":32,"_144":571,"_42":43,"_41":14,"_146":25,"_39":572,"_13":201,"_35":20,"_36":38,"_24":25,"_151":-5,"_306":573,"_27":574},{"_44":565,"_33":526,"_31":519,"_144":512,"_42":43,"_41":566,"_146":125,"_39":567,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":568,"_27":569},{"_44":560,"_33":470,"_31":530,"_144":519,"_42":43,"_41":561,"_146":125,"_39":562,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":563,"_27":564},{"_44":552,"_33":553,"_31":554,"_144":530,"_42":43,"_41":555,"_146":25,"_39":556,"_13":173,"_35":20,"_36":557,"_24":25,"_151":-5,"_306":558,"_27":559},{"_44":544,"_33":545,"_31":546,"_144":530,"_42":43,"_41":547,"_146":25,"_39":548,"_13":148,"_35":20,"_36":549,"_24":25,"_151":-5,"_306":550,"_27":551},{"_44":536,"_33":537,"_31":538,"_144":530,"_42":43,"_41":539,"_146":25,"_39":540,"_13":522,"_35":20,"_36":541,"_24":25,"_151":-5,"_306":542,"_27":543},{"_44":527,"_33":528,"_31":529,"_144":530,"_42":43,"_41":531,"_146":25,"_39":532,"_13":158,"_35":20,"_36":533,"_24":25,"_151":-5,"_306":534,"_27":535},{"_44":517,"_33":34,"_31":518,"_144":519,"_42":43,"_41":520,"_146":25,"_39":521,"_13":522,"_35":20,"_36":523,"_24":25,"_151":-5,"_306":524,"_27":525},{"_44":511,"_33":471,"_31":464,"_144":512,"_42":43,"_41":513,"_146":125,"_39":514,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":515,"_27":516},{"_44":506,"_33":470,"_31":475,"_144":464,"_42":43,"_41":507,"_146":125,"_39":508,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":509,"_27":510},{"_44":498,"_33":499,"_31":500,"_144":475,"_42":43,"_41":501,"_146":25,"_39":502,"_13":201,"_35":20,"_36":503,"_24":25,"_151":-5,"_306":504,"_27":505},{"_44":490,"_33":491,"_31":492,"_144":475,"_42":43,"_41":493,"_146":25,"_39":494,"_13":148,"_35":20,"_36":495,"_24":25,"_151":-5,"_306":496,"_27":497},{"_44":482,"_33":483,"_31":484,"_144":475,"_42":43,"_41":485,"_146":25,"_39":486,"_13":201,"_35":20,"_36":487,"_24":25,"_151":-5,"_306":488,"_27":489},{"_44":472,"_33":473,"_31":474,"_144":475,"_42":43,"_41":476,"_146":25,"_39":477,"_13":478,"_35":20,"_36":479,"_24":25,"_151":-5,"_306":480,"_27":481},{"_44":462,"_33":34,"_31":463,"_144":464,"_42":43,"_41":465,"_146":25,"_39":466,"_13":158,"_35":20,"_36":467,"_24":25,"_151":-5,"_306":468,"_27":469},{"_44":457,"_33":456,"_31":451,"_144":219,"_42":43,"_41":458,"_146":125,"_39":459,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":460,"_27":461},{"_44":448,"_33":449,"_31":450,"_144":451,"_42":43,"_41":187,"_146":25,"_39":452,"_13":201,"_35":20,"_36":453,"_24":25,"_151":-5,"_306":454,"_27":455},{"_44":440,"_33":441,"_31":442,"_144":219,"_42":43,"_41":443,"_146":25,"_39":444,"_13":158,"_35":20,"_36":445,"_24":25,"_151":-5,"_306":446,"_27":447},{"_44":211,"_33":212,"_31":213,"_144":-5,"_42":43,"_41":214,"_146":125,"_39":437,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":438,"_27":439},{"_44":430,"_33":431,"_31":432,"_144":213,"_42":43,"_41":214,"_146":25,"_39":433,"_13":62,"_35":149,"_36":434,"_24":25,"_151":-5,"_306":435,"_27":436},{"_44":423,"_33":424,"_31":425,"_144":213,"_42":43,"_41":214,"_146":25,"_39":426,"_13":62,"_35":149,"_36":427,"_24":25,"_151":-5,"_306":428,"_27":429},{"_44":415,"_33":416,"_31":417,"_144":213,"_42":43,"_41":214,"_146":25,"_39":418,"_13":62,"_35":419,"_36":420,"_24":25,"_151":-5,"_306":421,"_27":422},{"_44":204,"_33":205,"_31":206,"_144":-5,"_42":43,"_41":207,"_146":125,"_39":412,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":413,"_27":414},{"_44":407,"_33":406,"_31":400,"_144":206,"_42":43,"_41":408,"_146":125,"_39":409,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":410,"_27":411},{"_44":397,"_33":398,"_31":399,"_144":400,"_42":43,"_41":401,"_146":25,"_39":402,"_13":181,"_35":149,"_36":403,"_24":25,"_151":-5,"_306":404,"_27":405},{"_44":392,"_33":361,"_31":356,"_144":206,"_42":43,"_41":393,"_146":125,"_39":394,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":395,"_27":396},{"_44":385,"_33":386,"_31":387,"_144":356,"_42":43,"_41":171,"_146":25,"_39":388,"_13":62,"_35":149,"_36":389,"_24":25,"_151":-5,"_306":390,"_27":391},{"_44":377,"_33":378,"_31":379,"_144":356,"_42":43,"_41":380,"_146":25,"_39":381,"_13":201,"_35":149,"_36":382,"_24":25,"_151":-5,"_306":383,"_27":384},{"_44":369,"_33":370,"_31":371,"_144":356,"_42":43,"_41":372,"_146":25,"_39":373,"_13":173,"_35":149,"_36":374,"_24":25,"_151":-5,"_306":375,"_27":376},{"_44":362,"_33":363,"_31":364,"_144":356,"_42":43,"_41":171,"_146":25,"_39":365,"_13":62,"_35":149,"_36":366,"_24":25,"_151":-5,"_306":367,"_27":368},{"_44":353,"_33":354,"_31":355,"_144":356,"_42":43,"_41":171,"_146":25,"_39":357,"_13":158,"_35":149,"_36":358,"_24":25,"_151":-5,"_306":359,"_27":360},{"_44":348,"_33":339,"_31":333,"_144":206,"_42":43,"_41":349,"_146":125,"_39":350,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":351,"_27":352},{"_44":340,"_33":341,"_31":342,"_144":333,"_42":43,"_41":343,"_146":25,"_39":344,"_13":201,"_35":149,"_36":345,"_24":25,"_151":-5,"_306":346,"_27":347},{"_44":330,"_33":331,"_31":332,"_144":333,"_42":43,"_41":334,"_146":25,"_39":335,"_13":201,"_35":149,"_36":336,"_24":25,"_151":-5,"_306":337,"_27":338},{"_44":196,"_33":197,"_31":198,"_144":-5,"_42":43,"_41":199,"_146":125,"_39":327,"_13":201,"_35":20,"_36":202,"_24":25,"_151":-5,"_306":328,"_27":329},{"_44":191,"_33":192,"_31":193,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":324,"_13":158,"_35":20,"_36":189,"_24":25,"_151":-5,"_306":325,"_27":326},{"_44":184,"_33":185,"_31":186,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":321,"_13":181,"_35":20,"_36":189,"_24":25,"_151":-5,"_306":322,"_27":323},{"_44":176,"_33":177,"_31":178,"_144":-5,"_42":43,"_41":179,"_146":25,"_39":318,"_13":181,"_35":20,"_36":182,"_24":25,"_151":-5,"_306":319,"_27":320},{"_44":168,"_33":169,"_31":170,"_144":-5,"_42":43,"_41":171,"_146":25,"_39":315,"_13":173,"_35":20,"_36":174,"_24":25,"_151":-5,"_306":316,"_27":317},{"_44":161,"_33":162,"_31":163,"_144":-5,"_42":43,"_41":164,"_146":25,"_39":312,"_13":148,"_35":20,"_36":166,"_24":25,"_151":-5,"_306":313,"_27":314},{"_44":153,"_33":154,"_31":155,"_144":-5,"_42":43,"_41":156,"_146":25,"_39":309,"_13":158,"_35":20,"_36":159,"_24":25,"_151":-5,"_306":310,"_27":311},{"_44":141,"_33":142,"_31":143,"_144":-5,"_42":43,"_41":145,"_146":25,"_39":305,"_13":148,"_35":149,"_36":150,"_24":25,"_151":-5,"_306":307,"_27":308},["D",1781814540942],"children",[],[142],["D",1784058609134],[],[154],["D",1783577438960],[],[162],["D",1783561973686],[],[169],["D",1784058609130],[],[177],["D",1783578006344],[],[185],["D",1783578006344],[],[192],["D",1781805649048],[],[197],"f24cfd4b-6c74-4682-a63a-3e680149f3d1","variants.ts","92020682-6b52-11f1-80b8-1607ee4eb77e","56dc5a24-6b54-11f1-9b1d-1607ee4eb77e",52,["D",1781814540726],"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",[],[205,339,331],"utils","8575e997-6c6a-4504-9624-72ede1f62363","cn.ts","91f4e2d6-6b52-11f1-a883-1607ee4eb77e",56,["D",1781814541006],"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",[],[205,339,341],"14b26de5-d175-4ba4-8abe-7f94001d8ac4",48,["D",1781814540380],[295,296],[205,339],"be83edc6-6987-4e3e-8279-9e4d121b09a2","tw.ts","92125ad2-6b52-11f1-8a2f-1607ee4eb77e","56fb5e2e-6b54-11f1-95d4-1607ee4eb77e",["D",1783561973686],"/**\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| \"accent-ring\"\n\t| \"accent-text\"\n\t| \"danger\"\n\t| \"danger-fg\"\n\t| \"success\"\n\t| \"success-fg\";\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",[],[205,361,354],"theme","96e6551b-8e2f-4ea5-a258-e21a28e27f08","tokens_test.ts","e650bcd8-7b38-11f1-a19c-1607ee4eb77e",["D",1783561973686],"/**\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 } 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\tconst re =\n\t\t/--kyla-([\\w-]+):\\s*light-dark\$\\s*(#[0-9a-fA-F]{3,6})\\s*,\\s*(#[0-9a-fA-F]{3,6})\\s*\$/g;\n\tconst palette: Palette = {};\n\tfor (const [, name, light, dark] of css.matchAll(re)) {\n\t\tpalette[name] = { light, dark };\n\t}\n\treturn 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\t...SURFACES.map((bg) => ({ fg: \"fg\", bg, min: AA_BODY })),\n\t...SURFACES.map((bg) => ({ fg: \"fg-muted\", bg, min: AA_BODY })),\n\t{ fg: \"accent-fg\", bg: \"accent\", min: AA_BODY },\n\t{ fg: \"danger-fg\", bg: \"danger\", min: AA_BODY },\n\t{ fg: \"success-fg\", bg: \"success\", min: AA_BODY },\n];\n\nDeno.test(\"contrastRatio returns the correct WCAG ratio for known pairs\", () => {\n\tassertAlmostEquals(contrastRatio(\"#000000\", \"#ffffff\"), 21, 0.05);\n\tassertAlmostEquals(contrastRatio(\"#ffffff\", \"#ffffff\"), 1, 0.001);\n\t// #767676 on white is the canonical WCAG AA boundary example (~4.54:1).\n\tassertAlmostEquals(contrastRatio(\"#767676\", \"#ffffff\"), 4.54, 0.05);\n\t// Order-independent.\n\tassertAlmostEquals(\n\t\tcontrastRatio(\"#052f4a\", \"#00bcff\"),\n\t\tcontrastRatio(\"#00bcff\", \"#052f4a\"),\n\t\t0.001,\n\t);\n});\n\nDeno.test(\"every sanctioned fg/surface pairing meets AA in both modes\", () => {\n\tfor (const mode of MODES) {\n\t\tfor (const { fg, bg, min } of PAIRINGS) {\n\t\t\tassert(palette[fg], `missing token --kyla-${fg}`);\n\t\t\tassert(palette[bg], `missing token --kyla-${bg}`);\n\t\t\tconst ratio = contrastRatio(palette[fg][mode], palette[bg][mode]);\n\t\t\tassert(\n\t\t\t\tratio >= min,\n\t\t\t\t`${fg} on ${bg} (${mode}) is ${ratio.toFixed(2)}:1, below AA ${min}:1`,\n\t\t\t);\n\t\t}\n\t}\n});\n\nDeno.test(\"palette expands the color vocabulary with the new semantic tokens\", () => {\n\tfor (const name of [\n\t\t\"accent-ring\",\n\t\t\"accent-text\",\n\t\t\"danger-fg\",\n\t\t\"success\",\n\t\t\"success-fg\",\n\t]) {\n\t\tassert(palette[name], `expected --kyla-${name} in the token stylesheet`);\n\t}\n});\n\nDeno.test(\"dark-mode base uses the sanctioned slate-950 softening, not true black\", () => {\n\tassert(palette.base, \"missing --kyla-base\");\n\tassertEqualsHex(palette.base.dark, \"#020618\");\n\tassert(\n\t\tpalette.base.dark.toLowerCase() !== \"#000000\",\n\t\t\"dark base must be softened slate-950, not true black\",\n\t);\n});\n\nfunction assertEqualsHex(actual: string, expected: string): void {\n\tassert(\n\t\tactual.toLowerCase() === expected.toLowerCase(),\n\t\t`expected ${expected}, got ${actual}`,\n\t);\n}\n",[],[205,361,363],"094ad873-f39f-4d8f-b4d4-7fc1c811ebf5","tokens.ts","920ac18c-6b52-11f1-a416-1607ee4eb77e",160,["D",1783577301432],"/**\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 * NOTE: the spacing, graduated-radius, and type scales are still provisional /\n * pending — see slices 02–03 of the `structural-scales-palette` PRD under\n * docs/issues/. `--kyla-radius` below is the provisional base until slice 02.\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 /* 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",[],[205,361,370],"8c1e2920-c51a-43b7-81b7-9c313b4da7f7","provider.tsx","92200010-6b52-11f1-80b8-1607ee4eb77e",51,["D",1781814540691],"/** @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",[],[205,361,378],"f7fd6af9-a62c-46ba-8f22-efd656d4b274","contrast.ts","e6508772-7b38-11f1-a19c-1607ee4eb77e",["D",1783561973686],"/**\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\tconst h = hex.trim().replace(/^#/, \"\");\n\tconst full =\n\t\th.length === 3\n\t\t\t? h\n\t\t\t\t\t.split(\"\")\n\t\t\t\t\t.map((c) => c + c)\n\t\t\t\t\t.join(\"\")\n\t\t\t: h;\n\tif (!/^[0-9a-fA-F]{6}$/.test(full)) {\n\t\tthrow new Error(`Invalid hex color: ${hex}`);\n\t}\n\treturn [\n\t\tparseInt(full.slice(0, 2), 16),\n\t\tparseInt(full.slice(2, 4), 16),\n\t\tparseInt(full.slice(4, 6), 16),\n\t];\n}\n\n/** WCAG relative luminance of an sRGB color (0 = black, 1 = white). */\nexport function relativeLuminance([r, g, b]: RGB): number {\n\tconst linear = (channel: number): number => {\n\t\tconst s = channel / 255;\n\t\treturn s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n\t};\n\treturn 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\tconst la = relativeLuminance(parseHex(a));\n\tconst lb = relativeLuminance(parseHex(b));\n\tconst lighter = Math.max(la, lb);\n\tconst darker = Math.min(la, lb);\n\treturn (lighter + 0.05) / (darker + 0.05);\n}\n",[],[205,361,386],"05fe2e2c-2444-41d7-938d-50483f27ebd6",50,["D",1781814540580],[289,290,291,292,293],[205,361],"93ec1eab-46e1-47b1-b539-e4c9392cc4c9","button.tsx","8569cf08-6b53-11f1-a668-1607ee4eb77e","56eb3bb6-6b54-11f1-95d4-1607ee4eb77e",54,["D",1781814540720],"/** @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}\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

{token}

\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 current Kylä UI surface — one component (Button) plus the theme\n system. Palette 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",[],[212,431],["D",1783375727322],[282,283,284],[212],"6f86134b-51f8-4215-adb3-0cef19c2c19c","roadmap.md","45b8411a-798a-11f1-b04a-1607ee4eb77e",182,["D",1784058609992],"# Kylä UI — Roadmap\n\nThe dependency-ordered plan for reaching v1. Each row links a PRD 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 PRD is `ready-for-agent`. Later rows assume earlier ones.\n\n| # | Feature | PRD | Depends on | Why it's here |\n| - | ------------------------------- | ---------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 1 | **Structural scales & palette** | [`structural-scales-palette`](issues/structural-scales-palette/PRD.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/PRD.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/PRD.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/PRD.md) (folded in) | — | Bring the `preview/` HTML shell in line with platform conventions (real `.html` file, no inline `

{title}

Diff · v195