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

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

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

\n ))}\n

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

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

\n {token}\n

\n --kyla-{token}\n

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

\n 🚧 Preview / work in progress. This page renders the\n {\" \"}\n current{\" \"}\n Kylä UI surface — one component (Button) plus the theme system. Palette\n values are provisional and more components are on the way.\n

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

\n {/* header */}\n

\n Kylä UI\n

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

\n \n

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

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

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

\n ✅ In place\n

Styling core — cn / tw / variants
KylaProvider + light / dark / system mode
Semantic design tokens
Button

\n 🔜 To come\n

The rest of the v1 component set
The real, AA-checked palette
Spacing / radius / type scales
Radix-backed components (e.g. Dialog)

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

\n \n \n );\n}\n",[],[236,260],"7a3515f2-88a6-4b88-b2cc-d96aef6162d9","docs","019f624e-0dc9-701d-a888-35e6ea9fee06",["D",1784060710350],[272,273,274,275,276,277],[267],{"_36":570,"_13":571,"_60":572,"_62":268,"_63":64,"_65":66,"_67":68,"_38":573,"_17":32,"_70":139,"_71":-5,"_73":52,"_74":-5,"_94":574,"_18":575},{"_36":540,"_13":541,"_60":542,"_62":268,"_63":64,"_65":66,"_67":68,"_38":543,"_17":32,"_70":139,"_71":-5,"_73":52,"_74":-5,"_94":544,"_18":545},{"_36":526,"_13":527,"_60":528,"_62":268,"_63":64,"_65":66,"_67":68,"_38":529,"_17":32,"_70":139,"_71":-5,"_73":52,"_74":-5,"_94":530,"_18":531},{"_36":299,"_13":300,"_60":301,"_62":268,"_63":64,"_65":66,"_67":68,"_38":302,"_17":32,"_70":139,"_71":-5,"_73":52,"_74":-5,"_94":303,"_18":304},{"_36":285,"_13":286,"_60":287,"_62":268,"_63":64,"_65":66,"_67":68,"_38":288,"_17":32,"_70":139,"_71":-5,"_73":52,"_74":-5,"_94":289,"_18":290},{"_36":278,"_13":279,"_60":280,"_62":268,"_63":64,"_65":66,"_67":68,"_38":281,"_17":32,"_70":24,"_71":282,"_73":52,"_74":-5,"_94":283,"_18":284},"2ace1893-d162-4de8-a125-b61e39c4b8ae","roadmap.md","019f624e-0dc9-701d-a888-31aac6276112",["D",1784060710350],"# Kylä UI — Roadmap\n\nThe dependency-ordered plan for reaching v1. Each row links a spec in the\n[issue tracker](issues/); vocabulary is in [`../CONTEXT.md`](../CONTEXT.md) and\nthe load-bearing decisions are in [`adr/`](adr/). This doc is the synthesis —\nthe \"what next and in what order\" — not a re-spec of any single feature.\n\n## Built\n\n- **Styling foundation** — `cn`, `tw` (token utilities with the mandatory\n `color:` hint), `variants`, `KylaProvider` + Mode, provisional token\n stylesheet.\n- **`Button`** — the reference component (typed variants → tokens, semantic\n element, forwarded ref, escape-hatch `className`, token focus ring). \"Built\"\n means the pattern is proven, not that it's at VT coverage parity — see\n ADR-0005's coverage-parity clause and item 2 below.\n- **Substrate proof** — `nbbaier/kyla-ui-spike`, all four spikes green (Radix\n Dialog under the React-18.2.0 pin, Twind + CSS-var tokens, Provider injection,\n `light-dark()` + `data-mode`).\n\n## Planned — dependency order\n\nEach spec is `ready-for-agent`. Later rows assume earlier ones.\n\n| # | Feature | Spec | Depends on | Why it's here |\n| - | ------------------------------- | ----------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 1 | **Structural scales & palette** | [`structural-scales-palette`](issues/structural-scales-palette/spec.md) | — | Highest-leverage deferred item: fixed spacing/radius/type scales + real AA-checked palette, **conforming to the Val Town UI style guide** ([ADR-0005](adr/0005-val-town-visual-language-default-theme.md)). Where consistency actually lives; unblocks the set. Establishes the first test harness. |\n| 2 | **v1 zero-dep component set** | [`v1-component-set`](issues/v1-component-set/spec.md) | 1 | Text/Heading, Card, Input, Textarea, Label, Badge, Stack, Box, Divider, Select — the rest of the importable core, following the `Button` pattern — plus a `Button` revision slice closing its VT variant/state coverage gap (ADR-0005). |\n| 3 | **Dialog (Radix-backed)** | [`dialog-radix`](issues/dialog-radix/spec.md) | 2 | First headless-backed component, behind its own import path, out of the barrel. Exercises the hybrid split (ADR-0002) in real code. |\n| — | **Preview shell conventions** | [`gallery`](issues/gallery/spec.md) (folded in) | — | Bring the `preview/` HTML shell in line with platform conventions (real `.html` file, no inline `

\n {title}\n