[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_663":664,"_665":666},"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",111,"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/structural-scales-palette/01-real-palette-and-contrast-harness.md","latestPath","docs/issues/structural-scales-palette/issues/01-real-palette-and-contrast-harness.md","fileId","430d5030-7990-11f1-8131-1607ee4eb77e","name","01-real-palette-and-contrast-harness.md","fileType","content","# Real palette + first contrast test harness\n\nStatus: ready-for-agent\nLabels: ready-for-agent\n\n## Parent\n\n[PRD: Structural scales & real palette](../PRD.md)\n\n## What to build\n\nReplace the provisional token palette with the real, AA-verified Val Town values,\nand stand up the repo's first test harness by proving that palette meets AA\ncontrast. This is the foundational slice every later scale slice builds on.\n\nEnd-to-end behavior:\n\n- The token stylesheet resolves every semantic color token to its real VT value\n in **both** modes via `light-dark()` (mode still flips with zero JS). Provisional\n hexes are gone; the values conform to the VT style guide (ADR-0005), with the one\n sanctioned deviation (dark-mode `base` = `slate-950` `#020618`, not true black).\n- The color-token vocabulary expands to cover VT's accent + status roles: the new\n structural tokens `accent-ring`, `accent-text`, `danger-fg`, `success`,\n `success-fg` join the existing set, in both the stylesheet and the typed\n `ColorToken` union so `tw.*` color helpers can reference them.\n- A pure, browser-free contrast function computes the WCAG contrast ratio between\n two resolved color values. It is the natural seam for the guarantee (\"AA holds\"),\n computable without a DOM.\n- The repo's first Deno test parses the token stylesheet, enumerates every\n *sanctioned* foreground/surface pairing, and asserts each meets its AA threshold\n in **both** modes. This is the load-bearing test — a future palette edit that\n breaks contrast fails CI rather than shipping.\n\nResolved values and the full sanctioned-pairing list come from the PRD's\nImplementation Decisions and `docs/reference/val-town-style-guide.md` §6–§7 — bind\nthose values, do not re-decide them. Keep the harness a plain Deno test so later\nscale slices reuse the pattern.\n\n## Acceptance criteria\n\n- [ ] Every semantic color token resolves to its real VT value in both modes via `light-dark()`; no provisional hexes remain, and no `dark:` variants are introduced.\n- [ ] Dark-mode `base` uses the sanctioned `slate-950` softening, not true black.\n- [ ] `accent-ring`, `accent-text`, `danger-fg`, `success`, `success-fg` are added to both the stylesheet and the `ColorToken` union; existing `tw.*` color helpers reach them.\n- [ ] A pure contrast function returns the correct WCAG ratio for known pairs and takes no DOM/browser dependency.\n- [ ] A Deno test enumerates every sanctioned fg/surface pairing and asserts AA (4.5:1 body, 3:1 large/UI) in both light and dark; it fails if any pairing regresses.\n- [ ] The test suite runs with a plain `deno test` and passes.\n\n## Blocked by\n\nNone - can start immediately.\n","# Real palette + first contrast test harness\n\nStatus: ready-for-agent\nLabels: ready-for-agent\n\n## Parent\n\n[PRD: Structural scales & real palette](../PRD.md)\n\n## What to build\n\nReplace the provisional token palette with the real, AA-verified Val Town values,\nand stand up the repo's first test harness by proving that palette meets AA\ncontrast. This is the foundational slice every later scale slice builds on.\n\nEnd-to-end behavior:\n\n- The token stylesheet resolves every semantic color token to its real VT value\n in **both** modes via `light-dark()` (mode still flips with zero JS). Provisional\n hexes are gone; the values conform to the VT style guide (ADR-0005), with the one\n sanctioned deviation (dark-mode `base` = `slate-950` `#020618`, not true black).\n- The color-token vocabulary expands to cover VT's accent + status roles: the new\n structural tokens `accent-ring`, `accent-text`, `danger-fg`, `success`,\n `success-fg` join the existing set, in both the stylesheet and the typed\n `ColorToken` union so `tw.*` color helpers can reference them.\n- A pure, browser-free contrast function computes the WCAG contrast ratio between\n two resolved color values. It is the natural seam for the guarantee (\"AA holds\"),\n computable without a DOM.\n- The repo's first Deno test parses the token stylesheet, enumerates every\n _sanctioned_ foreground/surface pairing, and asserts each meets its AA threshold\n in **both** modes. This is the load-bearing test — a future palette edit that\n breaks contrast fails CI rather than shipping.\n\nResolved values and the full sanctioned-pairing list come from the PRD's\nImplementation Decisions and `docs/reference/val-town-style-guide.md` §6–§7 — bind\nthose values, do not re-decide them. Keep the harness a plain Deno test so later\nscale slices reuse the pattern.\n\n## Acceptance criteria\n\n- [ ] Every semantic color token resolves to its real VT value in both modes via `light-dark()`; no provisional hexes remain, and no `dark:` variants are introduced.\n- [ ] Dark-mode `base` uses the sanctioned `slate-950` softening, not true black.\n- [ ] `accent-ring`, `accent-text`, `danger-fg`, `success`, `success-fg` are added to both the stylesheet and the `ColorToken` union; existing `tw.*` color helpers reach them.\n- [ ] A pure contrast function returns the correct WCAG ratio for known pairs and takes no DOM/browser dependency.\n- [ ] A Deno test enumerates every sanctioned fg/surface pairing and asserts AA (4.5:1 body, 3:1 large/UI) in both light and dark; it fails if any pairing regresses.\n- [ ] The test suite runs with a plain `deno test` and passes.\n\n## Blocked by\n\nNone - can start immediately.\n","createdAt",["D",1783379668792],"branchVersion","branchId","687a9437-44a8-49ca-94d7-3277b6842513","id","a2eea118-e17c-4a68-9fa4-155c6cf32150","kyla-ui",["D",1781804868537],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Components for consistently styled web apps on Val Town","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","a2eea118e17c4a689fa4155c6cf32150","tursoHostname","a2eea118e17c4a689fa4155c6cf32150-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789701064442],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_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":658,"_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":659,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":660,"_83":661,"_85":662,"_87":25},"tree",[235,269,273,283,284,285,286,287,288,289,290],"files",[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],"counts",{"_224":62,"_225":226,"_227":158,"_228":229,"_230":231},"contents",[130,131,132,133,134,135,136,137,138,139,140],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":218,"_33":219,"_31":220,"_144":-5,"_42":43,"_41":221,"_146":125,"_39":222,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_27":223},{"_44":212,"_33":213,"_31":214,"_144":-5,"_42":43,"_41":215,"_146":125,"_39":216,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_27":217},{"_44":205,"_33":206,"_31":207,"_144":-5,"_42":43,"_41":208,"_146":125,"_39":209,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_27":211},{"_44":198,"_33":199,"_31":200,"_144":-5,"_42":43,"_41":201,"_146":125,"_39":202,"_13":158,"_35":20,"_36":203,"_24":25,"_151":-5,"_27":204},{"_44":192,"_33":193,"_31":194,"_144":-5,"_42":43,"_41":195,"_146":25,"_39":196,"_13":158,"_35":20,"_36":190,"_24":25,"_151":-5,"_27":197},{"_44":184,"_33":185,"_31":186,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":188,"_13":189,"_35":20,"_36":190,"_24":25,"_151":-5,"_27":191},{"_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":158,"_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],"5dfdaa24-b105-402d-9d10-36b545ece0ac","deno.json","47d67822-6b3e-11f1-bad1-1607ee4eb77e",8,["D",1781805628403],1,"{\n\t\"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n\t\"compilerOptions\": {\n\t\t\"lib\": [\n\t\t\t\"dom\",\n\t\t\t\"dom.iterable\",\n\t\t\t\"dom.asynciterable\",\n\t\t\t\"deno.ns\",\n\t\t\t\"deno.unstable\"\n\t\t],\n\t\t\"noImplicitAny\": false,\n\t\t\"strict\": false,\n\t\t\"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n\t},\n\t\"experimental\": {\n\t\t\"unstable-node-globals\": true,\n\t\t\"unstable-sloppy-imports\": true,\n\t\t\"unstable-temporal\": true,\n\t\t\"unstable-worker-options\": true\n\t},\n\t\"lint\": {\n\t\t\"files\": {\n\t\t\t\"include\": [\"deno:/https/esm.town/**/*\"]\n\t\t},\n\t\t\"rules\": { \"exclude\": [\"no-explicit-any\"] }\n\t},\n\t\"lock\": false,\n\t\"nodeModulesDir\": \"auto\",\n\t\"imports\": {\n\t\t\"@biomejs/biome\": \"npm:@biomejs/biome@2.5.0\"\n\t}\n}\n",[154],"c74adb8c-16a0-4216-9ecf-edc4e22537b5","biome.json","47e1e748-6b3e-11f1-8b36-1607ee4eb77e",9,["D",1781805628422],"{\n \"$schema\": \"https://biomejs.dev/schemas/2.5.0/schema.json\",\n \"vcs\": { \"enabled\": true, \"clientKind\": \"git\", \"useIgnoreFile\": true },\n \"files\": { \"ignoreUnknown\": false },\n \"formatter\": { \"enabled\": true, \"indentStyle\": \"tab\" },\n \"linter\": { \"enabled\": true, \"rules\": { \"recommended\": true } },\n \"javascript\": { \"formatter\": { \"quoteStyle\": \"double\" } },\n \"assist\": {\n \"enabled\": true,\n \"actions\": { \"source\": { \"organizeImports\": \"on\" } }\n }\n}",[162],"270d7d32-a2ef-4058-8fb8-843b59ca86e1","README.md","ec9dd180-6b3d-11f1-89a3-1607ee4eb77e",95,["D",1783377021131],5,"# Kylä UI\n\nA component library for building **consistently styled** web apps on Val Town.\n_(Kylä 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 app\nlooks coherent by default. Accessibility (semantic HTML, label association, visible\nfocus, AA contrast) is a quiet guarantee underneath.\n\nBuilt for Val Town's reality: **no build step**. Components are React, styled with\nruntime [Twind](https://twind.style) + semantic CSS-variable tokens, and consumed by\nimport — 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 light/dark\n mode), then use components:\n\n ```tsx\n /** @jsxImportSource https://esm.sh/react@18.2.0 */\n import { Button, KylaProvider } from \"https://esm.town/v/nbbaier/kyla-ui/mod.ts\";\n\n export function App() {\n return (\n \n \n \n );\n }\n ```\n\nTo pin a version, append `?v=NNN` to the import URL; the unpinned URL always tracks\nthe latest release (see [ADR-0004](docs/adr/0004-version-pinned-upgrade-contract.md)).\n\n## Status\n\nEarly. The styling foundation (`cn`, `tw`, `variants`, `KylaProvider`) and the first\ncomponent (`Button`) are in place; the rest of the v1 component set and the real\ndesign palette are still to come.\n\n## Components\n\n- `Button` — `variant`: `primary | subtle | ghost | danger`, `size`: `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 + status.\n- [`docs/adr/`](docs/adr/) — architecture decision records.\n\nThe substrate (Radix + Twind + tokens + Provider on Val Town) is proven in a separate\nspike val, `nbbaier/kyla-ui-spike`.\n",[169],"136f8bfb-2e84-40b8-8998-d7761e4d6d80","CONTEXT.md","bce56486-6b46-11f1-8898-1607ee4eb77e",103,["D",1783378956847],4,"# Kylä UI — Context\n\nA glossary of the core terms in this project. Implementation details live in code and ADRs, not here.\n\n> \"Kylä\" is Finnish for \"village.\"\n\n## Glossary\n\n### Kylä UI\n\nThe component library itself: a Val Town val (`nbbaier/kyla-ui`) that exports React components, a styling system, and any helpers needed to build consistently styled web apps. It is **consumed by import** (`import { ... } from \"https://esm.town/v/nbbaier/kyla-ui/...\"`), not by remixing. This val is the source of truth for visual consistency across apps. It **also serves its own Gallery** (docs) at its HTTP route — the library documents itself, co-located with its source.\n\n### Starter\n\nA separate, remixable demo val (`kyla-ui-starter` or similar) that shows idiomatic *end-to-end* use of Kylä UI: a tiny but genuine **todo app** with a real HTTP route and `std/sqlite`, a working app shell, Provider + hydration wiring, and view-source link. A new app begins by remixing the Starter, then editing. The Starter **depends on** Kylä UI; the library never depends on the Starter. (Component reference/docs live in the library's Gallery, not the Starter.)\n\n### Gallery\n\nThe library's self-hosted documentation surface: an HTTP route on `kyla-ui` that renders every component in its variants and Modes, with the Mode toggle. It is both living docs and the in-browser proof that the stack renders correctly on Val Town (Twind + CSS-var tokens, Provider mode, Radix `Dialog` hydration). The seed of a fuller docs site later.\n\n### Release\n\nA blessed version of Kylä UI, produced by merging a development branch into `main`. `main` is the stable line: raw development never happens on it, so HEAD-of-`main` is always a Release. Each Release corresponds to a concrete Val Town version number (`?v=NNN`). A consumer tracks Releases by importing the unpinned URL (always latest Release) or freezes onto one by pinning its `?v=NNN`, which the README's release table maps by name.\n\n### Consumer\n\nA web app (a val) built with Kylä UI. Gets visual consistency by importing the library rather than copying its code.\n\n### Semantic Token\n\nA named, intent-based design value (e.g. \"base surface,\" \"default foreground,\" \"line/border,\" \"danger\") rather than a raw value (e.g. \"blue-500\"). Components reference semantic tokens only; they never hard-code raw colors. Tokens are the unit of visual consistency and the surface through which a Theme is applied. (Modeled on Cloudflare Kumo's semantic-token system.)\n\nCanonical token vocabulary (CSS custom properties, all prefixed `--kyla-`):\n\n- **Surfaces** (hierarchy): `base` → `elevated` → `recessed`\n- **Foreground:** `fg`, `fg-muted`\n- **Borders:** `line`, `hairline`\n- **Accent:** `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 [ADR-0005](docs/adr/0005-val-town-visual-language-default-theme.md)); Kylä keeps its own richer surface hierarchy over VT's palette.\n\nOf these, the consumer-facing Override Surface for v1 is intentionally small (e.g. `--kyla-accent`, `--kyla-radius`, font); the rest are structural and stay fixed.\n\n### Theme\n\nA complete set of values bound to the Semantic Tokens, producing a coherent look. A consumer switches the active theme without touching component code. Light/dark is one axis of theming; brand/variant overrides are another.\n\nFor v1, Kylä ships **one opinionated theme** with automatic light/dark, and exposes a deliberately small **Override Surface** — a few tokens (e.g. accent, radius, font) a consumer may redefine to express brand. Structural tokens (surface hierarchy, spacing, borders) stay fixed; that fixedness *is* the consistency. A fuller named-theme system (multiple consumer-defined Themes, à la Kumo's theme configs) is a deliberate later step, not a v1 feature.\n\n### Variant\n\nA named, typed dimension of a component's appearance exposed as a prop (e.g. `variant=\"primary\"`, `size=\"sm\"`, `tone=\"danger\"`). Variants map to Semantic Tokens internally; they are the consumer's primary, discoverable means of varying a component while staying on-system. An escape-hatch `className` always merges last, letting an app deviate locally without forking. For v1 the public surface is finished components plus a `cn()` helper and the Provider — the underlying Headless Primitives stay internal.\n\n### Mode\n\nThe light/dark axis of a Theme. Modeled as `data-mode=\"light\" | \"dark\" | \"system\"`, where `system` falls through to the OS preference via CSS `light-dark()` (zero JS). Mode is **owned by the Provider** — it sets `data-mode` and exposes a hook to read/set it (persistence opt-in) — so apps get a first-class light/dark toggle without hand-rolling one (a common source of inconsistency and flash-of-wrong-theme bugs).\n\n### Headless Primitive\n\nThe behavior-and-accessibility layer of an interactive component (focus management, keyboard nav, ARIA), independent of its visual styling. For the hard interactive components (Dialog, Popover, Menu, Tabs), Kylä builds on a third-party headless primitive library rather than hand-rolling. Simple visual components (Button, Card, Stack, Text, Input, Badge) have no separate Headless Primitive — they are styled directly.\n\n",[177],"ee51c528-881e-493e-b31d-d5c54fe6c992","CLAUDE.md","a53286c6-775c-11f1-abf2-1607ee4eb77e",102,["D",1783378956974],3,"## 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],"cc671bb9-7372-4bf1-a2b8-2c6b0f893c78","AGENTS.md","9b865e5e-7770-11f1-b136-1607ee4eb77e",72,["D",1783373249018],[193],"1c7f3876-c7c1-4d67-8ed9-16bd851ecf3f",".vtignore","47ce4d8c-6b3e-11f1-8eca-1607ee4eb77e",13,["D",1781805649048],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[199],"da3f4f02-c070-4df1-9bc5-96c25fc6eefd","src","91e38b30-6b52-11f1-bb7a-1607ee4eb77e",28,["D",1781813780417],"directory",[206],"aac8fba5-9942-4296-93bc-56339f5fdbb7","preview","019f397a-0ad7-770b-b0dd-ab97f904224e",78,["D",1783375727322],[213],"61b715f9-32d9-45da-bff6-008ae80a2386","docs","bc8b0c5c-6b46-11f1-aeb1-1607ee4eb77e",14,["D",1781808698019],[219],"pulls","branches",7,"forks","envVars",{"_232":62,"_234":62},"connections",{"_232":62,"_233":62},"count","unfilledCount","emptyCount",{"_44":218,"_33":219,"_31":220,"_144":-5,"_42":43,"_41":221,"_146":125,"_39":655,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":656,"_27":657},{"_44":650,"_33":617,"_31":611,"_144":220,"_42":43,"_41":651,"_146":125,"_39":652,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":653,"_27":654},{"_44":642,"_33":643,"_31":644,"_144":611,"_42":43,"_41":645,"_146":25,"_39":646,"_13":148,"_35":20,"_36":647,"_24":25,"_151":-5,"_292":648,"_27":649},{"_44":634,"_33":635,"_31":636,"_144":611,"_42":43,"_41":637,"_146":25,"_39":638,"_13":62,"_35":20,"_36":639,"_24":25,"_151":-5,"_292":640,"_27":641},{"_44":626,"_33":627,"_31":628,"_144":611,"_42":43,"_41":629,"_146":25,"_39":630,"_13":62,"_35":20,"_36":631,"_24":25,"_151":-5,"_292":632,"_27":633},{"_44":618,"_33":619,"_31":620,"_144":611,"_42":43,"_41":621,"_146":25,"_39":622,"_13":62,"_35":20,"_36":623,"_24":25,"_151":-5,"_292":624,"_27":625},{"_44":608,"_33":609,"_31":610,"_144":611,"_42":43,"_41":612,"_146":25,"_39":613,"_13":62,"_35":20,"_36":614,"_24":25,"_151":-5,"_292":615,"_27":616},{"_44":603,"_33":586,"_31":580,"_144":220,"_42":43,"_41":604,"_146":125,"_39":605,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":606,"_27":607},{"_44":595,"_33":596,"_31":597,"_144":580,"_42":43,"_41":598,"_146":25,"_39":599,"_13":62,"_35":20,"_36":600,"_24":25,"_151":-5,"_292":601,"_27":602},{"_44":587,"_33":588,"_31":589,"_144":580,"_42":43,"_41":590,"_146":25,"_39":591,"_13":158,"_35":20,"_36":592,"_24":25,"_151":-5,"_292":593,"_27":594},{"_44":577,"_33":578,"_31":579,"_144":580,"_42":43,"_41":581,"_146":25,"_39":582,"_13":158,"_35":20,"_36":583,"_24":25,"_151":-5,"_292":584,"_27":585},{"_44":572,"_33":571,"_31":565,"_144":220,"_42":43,"_41":573,"_146":125,"_39":574,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":575,"_27":576},{"_44":562,"_33":563,"_31":564,"_144":565,"_42":43,"_41":566,"_146":25,"_39":567,"_13":62,"_35":20,"_36":568,"_24":25,"_151":-5,"_292":569,"_27":570},{"_44":557,"_33":445,"_31":448,"_144":220,"_42":43,"_41":558,"_146":125,"_39":559,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":560,"_27":561},{"_44":552,"_33":551,"_31":545,"_144":448,"_42":43,"_41":553,"_146":125,"_39":554,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":555,"_27":556},{"_44":543,"_33":437,"_31":544,"_144":545,"_42":43,"_41":546,"_146":25,"_39":547,"_13":62,"_35":20,"_36":548,"_24":25,"_151":-5,"_292":549,"_27":550},{"_44":538,"_33":523,"_31":517,"_144":448,"_42":43,"_41":539,"_146":125,"_39":540,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":541,"_27":542},{"_44":533,"_33":445,"_31":527,"_144":517,"_42":43,"_41":534,"_146":125,"_39":535,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":536,"_27":537},{"_44":524,"_33":525,"_31":526,"_144":527,"_42":43,"_41":528,"_146":25,"_39":529,"_13":62,"_35":20,"_36":530,"_24":25,"_151":-5,"_292":531,"_27":532},{"_44":515,"_33":437,"_31":516,"_144":517,"_42":43,"_41":518,"_146":25,"_39":519,"_13":62,"_35":20,"_36":520,"_24":25,"_151":-5,"_292":521,"_27":522},{"_44":510,"_33":509,"_31":503,"_144":448,"_42":43,"_41":511,"_146":125,"_39":512,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":513,"_27":514},{"_44":501,"_33":437,"_31":502,"_144":503,"_42":43,"_41":504,"_146":25,"_39":505,"_13":62,"_35":20,"_36":506,"_24":25,"_151":-5,"_292":507,"_27":508},{"_44":496,"_33":461,"_31":455,"_144":448,"_42":43,"_41":497,"_146":125,"_39":498,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":499,"_27":500},{"_44":491,"_33":445,"_31":477,"_144":455,"_42":43,"_41":492,"_146":25,"_39":493,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":494,"_27":495},{"_44":483,"_33":484,"_31":485,"_144":477,"_42":43,"_41":486,"_146":25,"_39":487,"_13":62,"_35":20,"_36":488,"_24":25,"_151":-5,"_292":489,"_27":490},{"_44":474,"_33":475,"_31":476,"_144":477,"_42":43,"_41":478,"_146":25,"_39":479,"_13":62,"_35":20,"_36":480,"_24":25,"_151":-5,"_292":481,"_27":482},{"_44":470,"_33":34,"_31":32,"_144":455,"_42":43,"_41":14,"_146":25,"_39":471,"_13":158,"_35":20,"_36":38,"_24":25,"_151":-5,"_292":472,"_27":473},{"_44":462,"_33":463,"_31":464,"_144":455,"_42":43,"_41":465,"_146":25,"_39":466,"_13":158,"_35":20,"_36":467,"_24":25,"_151":-5,"_292":468,"_27":469},{"_44":453,"_33":437,"_31":454,"_144":455,"_42":43,"_41":456,"_146":25,"_39":457,"_13":158,"_35":20,"_36":458,"_24":25,"_151":-5,"_292":459,"_27":460},{"_44":447,"_33":446,"_31":439,"_144":448,"_42":43,"_41":449,"_146":125,"_39":450,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":451,"_27":452},{"_44":436,"_33":437,"_31":438,"_144":439,"_42":43,"_41":440,"_146":25,"_39":441,"_13":62,"_35":20,"_36":442,"_24":25,"_151":-5,"_292":443,"_27":444},{"_44":431,"_33":430,"_31":424,"_144":220,"_42":43,"_41":432,"_146":125,"_39":433,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":434,"_27":435},{"_44":421,"_33":422,"_31":423,"_144":424,"_42":43,"_41":425,"_146":25,"_39":426,"_13":62,"_35":20,"_36":427,"_24":25,"_151":-5,"_292":428,"_27":429},{"_44":413,"_33":414,"_31":415,"_144":220,"_42":43,"_41":416,"_146":25,"_39":417,"_13":158,"_35":20,"_36":418,"_24":25,"_151":-5,"_292":419,"_27":420},{"_44":212,"_33":213,"_31":214,"_144":-5,"_42":43,"_41":215,"_146":125,"_39":410,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":411,"_27":412},{"_44":403,"_33":404,"_31":405,"_144":214,"_42":43,"_41":215,"_146":25,"_39":406,"_13":62,"_35":149,"_36":407,"_24":25,"_151":-5,"_292":408,"_27":409},{"_44":396,"_33":397,"_31":398,"_144":214,"_42":43,"_41":215,"_146":25,"_39":399,"_13":62,"_35":149,"_36":400,"_24":25,"_151":-5,"_292":401,"_27":402},{"_44":388,"_33":389,"_31":390,"_144":214,"_42":43,"_41":215,"_146":25,"_39":391,"_13":62,"_35":392,"_36":393,"_24":25,"_151":-5,"_292":394,"_27":395},{"_44":205,"_33":206,"_31":207,"_144":-5,"_42":43,"_41":208,"_146":125,"_39":385,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":386,"_27":387},{"_44":380,"_33":379,"_31":373,"_144":207,"_42":43,"_41":381,"_146":125,"_39":382,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":383,"_27":384},{"_44":370,"_33":371,"_31":372,"_144":373,"_42":43,"_41":374,"_146":25,"_39":375,"_13":173,"_35":149,"_36":376,"_24":25,"_151":-5,"_292":377,"_27":378},{"_44":365,"_33":348,"_31":342,"_144":207,"_42":43,"_41":366,"_146":125,"_39":367,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":368,"_27":369},{"_44":357,"_33":358,"_31":359,"_144":342,"_42":43,"_41":360,"_146":25,"_39":361,"_13":158,"_35":149,"_36":362,"_24":25,"_151":-5,"_292":363,"_27":364},{"_44":349,"_33":350,"_31":351,"_144":342,"_42":43,"_41":352,"_146":25,"_39":353,"_13":148,"_35":149,"_36":354,"_24":25,"_151":-5,"_292":355,"_27":356},{"_44":339,"_33":340,"_31":341,"_144":342,"_42":43,"_41":343,"_146":25,"_39":344,"_13":148,"_35":149,"_36":345,"_24":25,"_151":-5,"_292":346,"_27":347},{"_44":334,"_33":325,"_31":319,"_144":207,"_42":43,"_41":335,"_146":125,"_39":336,"_13":62,"_35":210,"_36":-5,"_24":25,"_151":-5,"_292":337,"_27":338},{"_44":326,"_33":327,"_31":328,"_144":319,"_42":43,"_41":329,"_146":25,"_39":330,"_13":158,"_35":149,"_36":331,"_24":25,"_151":-5,"_292":332,"_27":333},{"_44":316,"_33":317,"_31":318,"_144":319,"_42":43,"_41":320,"_146":25,"_39":321,"_13":158,"_35":149,"_36":322,"_24":25,"_151":-5,"_292":323,"_27":324},{"_44":198,"_33":199,"_31":200,"_144":-5,"_42":43,"_41":201,"_146":125,"_39":313,"_13":158,"_35":20,"_36":203,"_24":25,"_151":-5,"_292":314,"_27":315},{"_44":192,"_33":193,"_31":194,"_144":-5,"_42":43,"_41":195,"_146":25,"_39":310,"_13":158,"_35":20,"_36":190,"_24":25,"_151":-5,"_292":311,"_27":312},{"_44":184,"_33":185,"_31":186,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":307,"_13":189,"_35":20,"_36":190,"_24":25,"_151":-5,"_292":308,"_27":309},{"_44":176,"_33":177,"_31":178,"_144":-5,"_42":43,"_41":179,"_146":25,"_39":304,"_13":181,"_35":20,"_36":182,"_24":25,"_151":-5,"_292":305,"_27":306},{"_44":168,"_33":169,"_31":170,"_144":-5,"_42":43,"_41":171,"_146":25,"_39":301,"_13":173,"_35":20,"_36":174,"_24":25,"_151":-5,"_292":302,"_27":303},{"_44":161,"_33":162,"_31":163,"_144":-5,"_42":43,"_41":164,"_146":25,"_39":298,"_13":158,"_35":20,"_36":166,"_24":25,"_151":-5,"_292":299,"_27":300},{"_44":153,"_33":154,"_31":155,"_144":-5,"_42":43,"_41":156,"_146":25,"_39":295,"_13":158,"_35":20,"_36":159,"_24":25,"_151":-5,"_292":296,"_27":297},{"_44":141,"_33":142,"_31":143,"_144":-5,"_42":43,"_41":145,"_146":25,"_39":291,"_13":148,"_35":149,"_36":150,"_24":25,"_151":-5,"_292":293,"_27":294},["D",1781814540942],"children",[],[142],["D",1781805628403],[],[154],["D",1781805628422],[],[162],["D",1783377021131],[],[169],["D",1783378956847],[],[177],["D",1783378956974],[],[185],["D",1783373249018],[],[193],["D",1781805649048],[],[199],"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",[],[206,325,317],"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",[],[206,325,327],"14b26de5-d175-4ba4-8abe-7f94001d8ac4",48,["D",1781814540380],[281,282],[206,325],"df9737e9-f027-40b2-85b7-a93698e978d5","tw.ts","92125ad2-6b52-11f1-8a2f-1607ee4eb77e","56fb5e2e-6b54-11f1-95d4-1607ee4eb77e",53,["D",1781814540751],"/**\n * Token utilities — the only sanctioned way to apply semantic colors.\n *\n * Authors compose styles from these instead of hand-writing `[color:var(--…)]`,\n * which makes the silent \"forgot the color: hint\" failure (see ADR-0001 — a bare\n * `bg-[var(--…)]` is type-ambiguous and Twind emits nothing) structurally\n * impossible. The TypeScript union also makes a typo'd token a compile error.\n *\n * Each color builder takes an optional state prefix so prefixed utilities keep the\n * hint too — `tw.bg(\"recessed\", \"hover\")` → `hover:bg-[color:var(--kyla-recessed)]`.\n */\nexport type ColorToken =\n\t| \"base\"\n\t| \"elevated\"\n\t| \"recessed\"\n\t| \"fg\"\n\t| \"fg-muted\"\n\t| \"line\"\n\t| \"hairline\"\n\t| \"accent\"\n\t| \"accent-fg\"\n\t| \"danger\";\n\n/** Common interaction states a token utility may be scoped to. */\nexport type State = \"hover\" | \"focus\" | \"focus-visible\" | \"active\" | \"disabled\";\n\nconst color = (prop: string, name: ColorToken, on?: State): string =>\n\t`${on ? `${on}:` : \"\"}${prop}-[color:var(--kyla-${name})]`;\n\n/**\n * Token class builders. Usage: `cn(tw.bg(\"elevated\"), tw.border(\"line\"), \"p-6\")`.\n * Color builders emit the required `color:` hint (optionally state-prefixed);\n * `radius` is a length and needs no hint.\n */\nexport const tw = {\n\tbg: (t: ColorToken, on?: State) => color(\"bg\", t, on),\n\ttext: (t: ColorToken, on?: State) => color(\"text\", t, on),\n\tborder: (t: ColorToken, on?: State) => color(\"border\", t, on),\n\tring: (t: ColorToken, on?: State) => color(\"ring\", t, on),\n\tringOffset: (t: ColorToken, on?: State) => color(\"ring-offset\", t, on),\n\t/** border-radius token (a length — no `color:` hint needed) */\n\tradius: \"rounded-[var(--kyla-radius)]\",\n} as const;\n",[],[206,348,340],"theme","6fc02209-919e-4d49-9c7f-5bab68cd078c","tokens.ts","920ac18c-6b52-11f1-a416-1607ee4eb77e",96,["D",1783377021099],"/**\n * The Kylä token stylesheet, as a string the Provider injects at runtime.\n *\n * Semantic design values as CSS custom properties (ADR-0001). `light-dark()`\n * resolves against the CSS `color-scheme` property, so toggling `color-scheme`\n * via `data-mode` flips every token at once — no `dark:` variants.\n *\n * Surface hierarchy (conventional): in light mode `elevated` is the *brightest*\n * (cards lift toward the light), `base` is the page, `recessed` is an inset well;\n * dark mode inverts brightness.\n *\n * NOTE: these values are provisional. The real, AA-checked palette + spacing /\n * radius / type scales are a deferred design task — see the\n * `structural-scales-palette` PRD under docs/issues/.\n */\nexport const tokenCSS = `\n:root {\n color-scheme: light dark;\n\n /* surfaces — base (page) / elevated (cards) / recessed (wells) */\n --kyla-base: light-dark(#f3f4f6, #0b0b0c);\n --kyla-elevated: light-dark(#ffffff, #1c1c21);\n --kyla-recessed: light-dark(#e2e5ea, #050506);\n\n /* foreground */\n --kyla-fg: light-dark(#18181b, #f4f4f5);\n --kyla-fg-muted: light-dark(#71717a, #a1a1aa);\n\n /* borders */\n --kyla-line: light-dark(#d8dbe0, #2a2a30);\n --kyla-hairline: light-dark(#e9ebef, #1c1c21);\n\n /* accent / status */\n --kyla-accent: light-dark(#4f46e5, #818cf8);\n --kyla-accent-fg: light-dark(#ffffff, #0b0b0c);\n --kyla-danger: light-dark(#dc2626, #f87171);\n\n /* shape */\n --kyla-radius: 10px;\n}\n\n/* data-mode overrides the OS preference by pinning color-scheme */\n[data-mode=\"light\"] { color-scheme: light; }\n[data-mode=\"dark\"] { color-scheme: dark; }\n[data-mode=\"system\"] { color-scheme: light dark; }\n\nhtml, body { margin: 0; }\n`;\n",[],[206,348,350],"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",[],[206,348,358],"05fe2e2c-2444-41d7-938d-50483f27ebd6",50,["D",1781814540580],[277,278,279],[206,348],"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",[],[213,404],["D",1783375727322],[270,271,272],[213],"05e39f36-2b11-441b-96a4-059c779a90c3","roadmap.md","45b8411a-798a-11f1-b04a-1607ee4eb77e",101,["D",1783378956774],"# 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 the\nload-bearing decisions are in [`adr/`](adr/). This doc is the synthesis — the\n\"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 `color:`\n hint), `variants`, `KylaProvider` + Mode, provisional token stylesheet.\n- **`Button`** — the reference component (typed variants → tokens, semantic\n element, forwarded ref, escape-hatch `className`, token focus ring).\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. |\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 · v111