\n \n \n`;\n\nexport default async function (req: Request): Promise {\n const { pathname } = new URL(req.url);\n\n // view-source link → redirect to this val\n if (pathname === \"/source\") {\n return new Response(null, {\n status: 302,\n headers: { Location: parseVal().links.self.val },\n });\n }\n\n // serve any val file (transpiled to JS for .ts/.tsx) so the browser can run\n // the client bundle and its relative imports (./app.tsx, ../mod.ts, ...).\n if (pathname.endsWith(\".ts\") || pathname.endsWith(\".tsx\")) {\n return serveFile(pathname, import.meta.url);\n }\n\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n",[],[240,249],"f0f91022-793e-452e-a4a9-9717a44e4e16","client.tsx","019f624e-0dc9-701d-a888-3eb400442221",["D",1784060710350],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Preview } from \"./app.tsx\";\n\nconst root = document.getElementById(\"root\")!;\ncreateRoot(root).render();\n",[],[240,257],"7549b764-54d8-4e1f-b971-70bed8f4919f","app.tsx","019f624e-0dc9-701d-a888-38eecc264607",["D",1784061317926],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// The real library — imported, never modified.\nimport { Button, cn, KylaProvider, tw, useKylaMode } from \"../mod.ts\";\nimport type { ColorToken } from \"../src/theme/tw.ts\";\nimport type { Mode } from \"../src/theme/provider.tsx\";\n\nconst VARIANTS = [\"primary\", \"subtle\", \"ghost\", \"danger\"] as const;\nconst SIZES = [\"sm\", \"md\", \"lg\"] as const;\n\nconst COLOR_TOKENS: ColorToken[] = [\n \"base\",\n \"elevated\",\n \"recessed\",\n \"fg\",\n \"fg-muted\",\n \"line\",\n \"hairline\",\n \"accent\",\n \"accent-fg\",\n \"danger\",\n];\n\n/** A titled section on an elevated card. */\nfunction Section({\n title,\n subtitle,\n children,\n}: {\n title: string;\n subtitle?: string;\n children: React.ReactNode;\n}) {\n return (\n \n

\n {title}\n

\n {subtitle && (\n

\n {subtitle}\n

\n )}\n

{children}

\n \n );\n}\n\n/** Small monospace label. */\nfunction Tag({ children }: { children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\n/** Light / dark / system switcher, driven by the library's own mode hook. */\nfunction ModeSwitcher() {\n const { mode, setMode } = useKylaMode();\n const modes: Mode[] = [\"light\", \"dark\", \"system\"];\n return (\n

\n Mode\n \n {modes.map((m) => (\n setMode(m)}\n className={cn(\n \"rounded-md px-3 py-1 text-sm font-medium capitalize transition\",\n m === mode\n ? cn(tw.bg(\"accent\"), tw.text(\"accent-fg\"))\n : cn(tw.text(\"fg\"), tw.bg(\"elevated\", \"hover\")),\n )}\n >\n {m}\n \n ))}\n

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

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

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

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

\n ))}\n

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

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

\n {token}\n

\n --kyla-{token}\n

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

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

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

\n {/* header */}\n

\n Kylä UI\n

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

\n \n

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

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

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

\n ✅ In place\n

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

\n 🔜 To come\n

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

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

\n \n \n );\n}\n",[],[240,264],"7a3515f2-88a6-4b88-b2cc-d96aef6162d9","docs","019f624e-0dc9-701d-a888-35e6ea9fee06",["D",1784060710350],[276,277,278,279,280,281],[271],{"_36":574,"_13":575,"_62":576,"_64":272,"_66":67,"_68":85,"_70":71,"_38":577,"_17":32,"_74":87,"_76":-5,"_78":52,"_79":-5,"_104":578,"_18":579},{"_36":544,"_13":545,"_62":546,"_64":272,"_66":67,"_68":85,"_70":71,"_38":547,"_17":32,"_74":87,"_76":-5,"_78":52,"_79":-5,"_104":548,"_18":549},{"_36":530,"_13":531,"_62":532,"_64":272,"_66":67,"_68":85,"_70":71,"_38":533,"_17":32,"_74":87,"_76":-5,"_78":52,"_79":-5,"_104":534,"_18":535},{"_36":303,"_13":304,"_62":305,"_64":272,"_66":67,"_68":85,"_70":71,"_38":306,"_17":32,"_74":87,"_76":-5,"_78":52,"_79":-5,"_104":307,"_18":308},{"_36":289,"_13":290,"_62":291,"_64":272,"_66":67,"_68":85,"_70":71,"_38":292,"_17":32,"_74":87,"_76":-5,"_78":52,"_79":-5,"_104":293,"_18":294},{"_36":282,"_13":283,"_62":284,"_64":272,"_66":67,"_68":85,"_70":71,"_38":285,"_17":32,"_74":24,"_76":286,"_78":52,"_79":-5,"_104":287,"_18":288},"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 `