\n \n \n`;\n\nexport default function (req: Request): Promise | Response {\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",[],[482,473],"preview","96534870-2a1f-4948-98ad-379a6bc5b595","client.tsx","42cc926a-7987-11f1-814e-1607ee4eb77e",["D",1784072875132],"/** @jsxImportSource 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",[],[482,484],"07efef8c-3ec3-4fa7-9940-e67cccc51588","app.tsx","42cc23d4-7987-11f1-814e-1607ee4eb77e",["D",1784076371333],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\n\n// The real library — imported, never modified.\nimport {\n Button,\n cn,\n Heading,\n KylaProvider,\n Text,\n type TextTone,\n tw,\n useKylaMode,\n} from \"../mod.ts\";\nimport {\n COLOR_TOKENS,\n FONT_WEIGHT_STEPS,\n RADIUS_STEPS,\n SPACE_STEPS,\n TYPE_STEPS,\n} from \"../src/theme/tokens.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;\nconst HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;\nconst TONES: TextTone[] = [\"fg\", \"fg-muted\", \"accent\", \"danger\"];\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: 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: 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\n/** A labelled row inside a matrix: what it is, and the prop that produced it. */\nfunction Row({\n label,\n children,\n}: {\n label: ReactNode;\n children: ReactNode;\n}) {\n return (\n

\n {label}\n {children}\n

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

\n {HEADING_LEVELS.map((level) => (\n \n Heading level {level}\n \n ))}\n

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

\n \n

\n {TYPE_STEPS.map((size) => (\n \n {size} — the quick brown fox jumps over the lazy dog\n \n ))}\n

\n \n\n \n

\n {FONT_WEIGHT_STEPS.map((weight) => (\n \n {weight} — the quick brown fox jumps over the lazy dog\n \n ))}\n

\n \n\n \n

\n {TONES.map((tone) => (\n \n {tone} — the quick brown fox jumps over the lazy dog\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 StructuralScaleSummary() {\n return (\n

\n \n Structural scales\n \n

\n Spacing: {SPACE_STEPS.join(\", \")} (4px base) · Radius:{\" \"}\n {RADIUS_STEPS.join(\", \")} (8px base) · Type: {TYPE_STEPS.join(\", \")}\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 — Text, Heading, and Button, plus the shipped theme,\n AA-checked palette, and structural scales. More components are on the\n 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 \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

\n ✅ In place\n

Styling core — cn / tw / variants
KylaProvider + light / dark / system mode
Semantic design tokens
Real AA-checked palette
Spacing / radius / type scales
Button
Text / Heading

\n 🔜 To come\n

The rest of the v1 component set
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",[],[482,491],"aac8fba5-9942-4296-93bc-56339f5fdbb7",78,["D",1783375727322],[256,257,258],[482],"b42819a8-f36d-49d5-a040-5b6130f73295","roadmap.md","45b8411a-798a-11f1-b04a-1607ee4eb77e","bc8b0c5c-6b46-11f1-aeb1-1607ee4eb77e",["D",1784074390869],"# 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, the real AA-checked\n palette, and shipped structural spacing/radius/type scales.\n- **Structural scales & palette** — the\n [`structural-scales-palette`](issues/structural-scales-palette/spec.md)\n foundation is complete and consumed by `Button`.\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| 2 | **v1 zero-dep component set** | [`v1-component-set`](issues/v1-component-set/spec.md) | Shipped scales foundation | 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 `

History · gallery