[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_483":484,"_485":486},"routes/_app.x.$handle.$name",{"_107":106,"_38":52,"_116":93,"_33":60,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":128,"_129":130,"_131":31,"_132":133,"_134":65,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":37,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":31},"version",6,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","9e97bfaf-087c-4cb5-b681-d68955477122","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","preview/index.tsx","latestPath","fileId","9cb7384e-7981-11f1-9c67-1607ee4eb77e","name","index.tsx","fileType","http","content","/**\n * Kylä UI — preview endpoint (WORK IN PROGRESS).\n *\n * A client-rendered showcase of the current component set. This is a *preview*\n * only: it imports the real library from src/ and does NOT modify anything about\n * the library itself. As more components land, add them to preview/app.tsx.\n *\n * Val Town has no build step, so we serve an HTML shell that loads Twind (required\n * before first paint — see ADR-0001) and then boots the React app. The client\n * entry (and everything it imports) is served transpiled-to-JS via serveFile.\n */\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst html = `\n\n \n \n \n Kylä UI — component preview (WIP)\n \n \n \n \n \n \n \n

\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","createdAt",["D",1783373424749],"branchVersion","branchId","ef127be8-8be8-4b3e-bd0e-e28c91780b3f","id","d0d70317-5966-41a3-a755-e515dcbdf0bb","kyla-ui",["D",1783373215838],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_115":111},"org",{"_107":106,"_108":109,"_110":111,"_19":62,"_112":113,"_114":31},"branch",{"_13":92,"_38":93,"_50":49,"_94":51,"_95":96,"_97":98,"_99":57,"_100":101,"_102":103,"_104":52,"_105":106},"isOwned",7,"main","projectId","forkedBranchId","687a9437-44a8-49ca-94d7-3277b6842513","forkedBranchVersion",78,"forkedProjectPrivacy","forkedProjectId","a2eea118-e17c-4a68-9fa4-155c6cf32150","forkedProjectOrgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789570799&sig=bfafc9de3f25d020766c1a418088d2aa7a118e3408c10bafe80b0604dafaeba0","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_50":51,"_38":52,"_45":479,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":37,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":480,"_87":481,"_89":482,"_91":31},"tree",[245,258,262,272,273,274,275,276,277,278,279,280],"files",[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],"counts",{"_235":69,"_236":165,"_237":69,"_238":239,"_240":241},"contents",[149,150,151,152,153,154,155,156,157,158,159,160],"upstreamProject",{"_50":101,"_38":52,"_59":146,"_61":-5,"_56":57,"_85":147},"upstreamBranch",{"_50":96,"_45":139,"_140":141,"_38":93,"_94":101,"_13":142,"_95":-5,"_97":-5,"_143":144,"_54":-5,"_91":31,"_56":57,"_105":145,"_70":103,"_104":52},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1781804868542],"updatedAt",["D",1784076491200],269,"lockfileKey","1784076491357-esm.town_v_nbbaier_kyla-ui@269-main","nbbaier","Components for consistently styled web apps on Val Town",{"_107":145,"_115":148},"https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon",{"_50":230,"_38":231,"_36":232,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":233,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_33":234},{"_50":224,"_38":225,"_36":226,"_164":-5,"_48":49,"_47":227,"_166":65,"_45":228,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_33":229},{"_50":218,"_38":219,"_36":220,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":221,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_33":223},{"_50":212,"_38":213,"_36":214,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":215,"_13":69,"_40":26,"_42":216,"_30":31,"_170":-5,"_33":217},{"_50":207,"_38":208,"_36":209,"_164":-5,"_48":49,"_47":165,"_166":31,"_45":210,"_13":69,"_40":26,"_42":205,"_30":31,"_170":-5,"_33":211},{"_50":201,"_38":202,"_36":203,"_164":-5,"_48":49,"_47":165,"_166":31,"_45":204,"_13":69,"_40":26,"_42":205,"_30":31,"_170":-5,"_33":206},{"_50":195,"_38":196,"_36":197,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":198,"_13":69,"_40":26,"_42":199,"_30":31,"_170":-5,"_33":200},{"_50":189,"_38":190,"_36":191,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":192,"_13":69,"_40":26,"_42":193,"_30":31,"_170":-5,"_33":194},{"_50":183,"_38":184,"_36":185,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":186,"_13":69,"_40":26,"_42":187,"_30":31,"_170":-5,"_33":188},{"_50":177,"_38":178,"_36":179,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":180,"_13":69,"_40":26,"_42":181,"_30":31,"_170":-5,"_33":182},{"_50":172,"_38":173,"_36":174,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":175,"_13":69,"_40":168,"_42":60,"_30":31,"_170":-5,"_33":176},{"_50":161,"_38":162,"_36":163,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":167,"_13":69,"_40":168,"_42":169,"_30":31,"_170":-5,"_33":171},"790923b4-b988-4a9a-a4a8-bfa9c8e2997a","mod.ts","019f3953-b8e0-7219-bf10-2c6f7d5201b2","parentId",1,"latest",["D",1783373215838],"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",[162],"fc451d1f-7214-4bbf-a2a7-034f48887cc0","main.ts","019f3953-b8e0-7219-bf10-2b93e358d2d9",["D",1783373215838],[173],"5face3ea-226e-42c4-a59f-236e3e3e5e99","deno.json","019f3953-b8e0-7219-bf10-252eff9b64d3",["D",1783373215838],"{\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",[178],"86ae8859-2177-435b-801b-86be5630da91","biome.json","019f3953-b8e0-7219-bf10-222ae01d52c6",["D",1783373215838],"{\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}",[184],"fbd366c7-d6cb-4c4f-bdf7-f4e4e3fedf62","README.md","019f3953-b8e0-7219-bf10-1dcf98c6ed3c",["D",1783373215838],"# 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/v1-design-sketch.md`](docs/v1-design-sketch.md) — the design hub + 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",[190],"129cf68d-4477-4fd6-a91c-c68cd1677056","CONTEXT.md","019f3953-b8df-70da-933b-5090a8deec5b",["D",1783373215838],"# 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 / status:** `accent`, `danger` (and siblings as needed)\n- **Shape:** `radius`\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",[196],"ca46747c-60fb-4eaf-aa09-4770c0aef447","CLAUDE.md","019f3953-b8df-70da-933b-4fc4a3397ecc",["D",1783373215838],"## Agent skills\n\n### Issue tracker\n\nIssues and PRDs live as local markdown files under `.scratch//`; 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",[202],"e7e4e9bb-727b-4b16-a66d-c615b0887b63","AGENTS.md","019f3953-b8df-70da-933b-4ab4a08684ae",["D",1783373215838],[208],"a2186374-243e-4f3e-9f64-04bfa5f6c399",".vtignore","019f3953-b8df-70da-933b-478ae98f3535",["D",1783373215838],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[213],"561d2f12-648c-4dfa-a1fd-1429019c364f","src","019f3953-b8df-70da-933b-42078d6c2263",["D",1783373215838],"directory",[219],"f1c1505c-cac2-4e88-b149-509fb3683224","preview","8a3eb280-c589-4def-87c2-787f92d1947f",2,["D",1783373301204],[225],"0069d314-a8f7-4fd3-895e-243bac4fb205","docs","019f3953-b8df-70da-933b-18425a3db793",["D",1783373215838],[231],"pulls","branches","forks","envVars",{"_242":69,"_244":69},"connections",{"_242":69,"_243":69},"count","unfilledCount","emptyCount",{"_50":230,"_38":231,"_36":232,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":476,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":477,"_33":478},{"_50":472,"_38":450,"_36":445,"_164":232,"_48":49,"_47":165,"_166":65,"_45":473,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":474,"_33":475},{"_50":465,"_38":466,"_36":467,"_164":445,"_48":49,"_47":165,"_166":65,"_45":468,"_13":69,"_40":26,"_42":469,"_30":31,"_170":-5,"_282":470,"_33":471},{"_50":458,"_38":459,"_36":460,"_164":445,"_48":49,"_47":165,"_166":65,"_45":461,"_13":69,"_40":26,"_42":462,"_30":31,"_170":-5,"_282":463,"_33":464},{"_50":451,"_38":452,"_36":453,"_164":445,"_48":49,"_47":165,"_166":65,"_45":454,"_13":69,"_40":26,"_42":455,"_30":31,"_170":-5,"_282":456,"_33":457},{"_50":442,"_38":443,"_36":444,"_164":445,"_48":49,"_47":165,"_166":65,"_45":446,"_13":69,"_40":26,"_42":447,"_30":31,"_170":-5,"_282":448,"_33":449},{"_50":438,"_38":423,"_36":418,"_164":232,"_48":49,"_47":165,"_166":65,"_45":439,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":440,"_33":441},{"_50":431,"_38":432,"_36":433,"_164":418,"_48":49,"_47":165,"_166":65,"_45":434,"_13":69,"_40":26,"_42":435,"_30":31,"_170":-5,"_282":436,"_33":437},{"_50":424,"_38":425,"_36":426,"_164":418,"_48":49,"_47":165,"_166":31,"_45":427,"_13":69,"_40":26,"_42":428,"_30":31,"_170":-5,"_282":429,"_33":430},{"_50":415,"_38":416,"_36":417,"_164":418,"_48":49,"_47":165,"_166":31,"_45":419,"_13":69,"_40":26,"_42":420,"_30":31,"_170":-5,"_282":421,"_33":422},{"_50":411,"_38":410,"_36":405,"_164":232,"_48":49,"_47":165,"_166":65,"_45":412,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":413,"_33":414},{"_50":402,"_38":403,"_36":404,"_164":405,"_48":49,"_47":165,"_166":65,"_45":406,"_13":69,"_40":26,"_42":407,"_30":31,"_170":-5,"_282":408,"_33":409},{"_50":395,"_38":396,"_36":397,"_164":232,"_48":49,"_47":165,"_166":31,"_45":398,"_13":69,"_40":26,"_42":399,"_30":31,"_170":-5,"_282":400,"_33":401},{"_50":224,"_38":225,"_36":226,"_164":-5,"_48":49,"_47":227,"_166":65,"_45":392,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":393,"_33":394},{"_50":384,"_38":385,"_36":386,"_164":226,"_48":49,"_47":387,"_166":31,"_45":388,"_13":69,"_40":168,"_42":389,"_30":31,"_170":-5,"_282":390,"_33":391},{"_50":376,"_38":377,"_36":378,"_164":226,"_48":49,"_47":379,"_166":31,"_45":380,"_13":69,"_40":168,"_42":381,"_30":31,"_170":-5,"_282":382,"_33":383},{"_50":372,"_38":39,"_36":37,"_164":226,"_48":49,"_47":14,"_166":31,"_45":373,"_13":227,"_40":41,"_42":44,"_30":31,"_170":-5,"_282":374,"_33":375},{"_50":218,"_38":219,"_36":220,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":369,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":370,"_33":371},{"_50":365,"_38":364,"_36":359,"_164":220,"_48":49,"_47":165,"_166":65,"_45":366,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":367,"_33":368},{"_50":356,"_38":357,"_36":358,"_164":359,"_48":49,"_47":165,"_166":65,"_45":360,"_13":69,"_40":168,"_42":361,"_30":31,"_170":-5,"_282":362,"_33":363},{"_50":352,"_38":337,"_36":332,"_164":220,"_48":49,"_47":165,"_166":65,"_45":353,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":354,"_33":355},{"_50":345,"_38":346,"_36":347,"_164":332,"_48":49,"_47":165,"_166":65,"_45":348,"_13":69,"_40":168,"_42":349,"_30":31,"_170":-5,"_282":350,"_33":351},{"_50":338,"_38":339,"_36":340,"_164":332,"_48":49,"_47":165,"_166":65,"_45":341,"_13":69,"_40":168,"_42":342,"_30":31,"_170":-5,"_282":343,"_33":344},{"_50":329,"_38":330,"_36":331,"_164":332,"_48":49,"_47":165,"_166":65,"_45":333,"_13":69,"_40":168,"_42":334,"_30":31,"_170":-5,"_282":335,"_33":336},{"_50":325,"_38":317,"_36":312,"_164":220,"_48":49,"_47":165,"_166":65,"_45":326,"_13":69,"_40":222,"_42":-5,"_30":31,"_170":-5,"_282":327,"_33":328},{"_50":318,"_38":319,"_36":320,"_164":312,"_48":49,"_47":165,"_166":65,"_45":321,"_13":69,"_40":168,"_42":322,"_30":31,"_170":-5,"_282":323,"_33":324},{"_50":309,"_38":310,"_36":311,"_164":312,"_48":49,"_47":165,"_166":65,"_45":313,"_13":69,"_40":168,"_42":314,"_30":31,"_170":-5,"_282":315,"_33":316},{"_50":212,"_38":213,"_36":214,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":306,"_13":69,"_40":26,"_42":216,"_30":31,"_170":-5,"_282":307,"_33":308},{"_50":207,"_38":208,"_36":209,"_164":-5,"_48":49,"_47":165,"_166":31,"_45":303,"_13":69,"_40":26,"_42":205,"_30":31,"_170":-5,"_282":304,"_33":305},{"_50":201,"_38":202,"_36":203,"_164":-5,"_48":49,"_47":165,"_166":31,"_45":300,"_13":69,"_40":26,"_42":205,"_30":31,"_170":-5,"_282":301,"_33":302},{"_50":195,"_38":196,"_36":197,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":297,"_13":69,"_40":26,"_42":199,"_30":31,"_170":-5,"_282":298,"_33":299},{"_50":189,"_38":190,"_36":191,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":294,"_13":69,"_40":26,"_42":193,"_30":31,"_170":-5,"_282":295,"_33":296},{"_50":183,"_38":184,"_36":185,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":291,"_13":69,"_40":26,"_42":187,"_30":31,"_170":-5,"_282":292,"_33":293},{"_50":177,"_38":178,"_36":179,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":288,"_13":69,"_40":26,"_42":181,"_30":31,"_170":-5,"_282":289,"_33":290},{"_50":172,"_38":173,"_36":174,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":285,"_13":69,"_40":168,"_42":60,"_30":31,"_170":-5,"_282":286,"_33":287},{"_50":161,"_38":162,"_36":163,"_164":-5,"_48":49,"_47":165,"_166":65,"_45":281,"_13":69,"_40":168,"_42":169,"_30":31,"_170":-5,"_282":283,"_33":284},["D",1783373215838],"children",[],[162],["D",1783373215838],[],[173],["D",1783373215838],[],[178],["D",1783373215838],[],[184],["D",1783373215838],[],[190],["D",1783373215838],[],[196],["D",1783373215838],[],[202],["D",1783373215838],[],[208],["D",1783373215838],[],[213],"aab589a6-cb6e-47b3-a881-0d1f8e3ad129","variants.ts","019f3953-b8df-70da-933b-3888fe2bd494","019f3953-b8df-70da-933b-3f668bd467ff",["D",1783373215838],"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",[],[219,317,310],"utils","01978265-5394-455a-8d71-946b95744120","cn.ts","019f3953-b8df-70da-933b-3748196f9fa9",["D",1783373215838],"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",[],[219,317,319],"e04c4285-cb55-443b-8ffc-0b67ad60478a",["D",1783373215838],[270,271],[219,317],"b6c33bfa-67f7-4ca6-8a58-1b5198a720cf","tw.ts","019f3953-b8df-70da-933b-2f03fca8c161","019f3953-b8df-70da-933b-324a7e51b103",["D",1783373215838],"/**\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",[],[219,337,330],"theme","21f04d66-259e-450c-b531-5aa0fe2b5d6e","tokens.ts","019f3953-b8df-70da-933b-290bea3908d1",["D",1783373215838],"/**\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 v1-design-sketch.md).\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",[],[219,337,339],"60e89631-f836-4bf2-aa91-f83a4eafd22b","provider.tsx","019f3953-b8df-70da-933b-262051efdd93",["D",1783373215838],"/** @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",[],[219,337,346],"e88b7d1a-5a57-49b0-b3a8-4336bdc4f087",["D",1783373215838],[266,267,268],[219,337],"09dfba44-a4d7-4025-aa26-1a7dff32bae4","button.tsx","019f3953-b8df-70da-933b-1f1d3e4c171c","019f3953-b8df-70da-933b-2198ad4cca30",["D",1783373215838],"/** @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",[],[225,385],["D",1783373301204],[259,260,261],[225],"bdfcb8c9-4735-4b6b-827d-5bc691aea8f7","v1-design-sketch.md","019f3953-b8df-70da-933b-176d7a976d8d",["D",1783373215838],"# Kylä UI — v1 Design Sketch\n\nA high-level sketch of the v1 design, produced from a design interview. This is\nthe hub: vocabulary lives in [`../CONTEXT.md`](../CONTEXT.md), and each\nconsequential decision has an ADR in [`adr/`](./adr/). This doc summarizes the\nshape and records what is **deliberately deferred**.\n\n> Modeled on [Cloudflare Kumo](https://github.com/cloudflare/kumo) — semantic\n> tokens, headless foundation, primitives + components — ported onto Val Town's\n> **no-build** reality. Where Kumo uses Tailwind v4 + codegen, Kylä uses runtime\n> CSS variables + Twind.\n\n## Positioning\n\n**Lead with consistency, not accessibility.** The felt pain for the Val Town\naudience (shipping apps fast, no designer) is inconsistent, hand-assembled UI.\nAccessibility is a real but _quiet, bounded_ guarantee underneath. See\n[ADR-0003](./adr/0003-consistency-first-bounded-accessibility.md).\n\n## Implementation status\n\n- **Substrate spike** — `nbbaier/kyla-ui-spike`, all four spikes green (see\n below).\n- **Layout** — `src/` is split by concern (root re-export files hide it from\n consumers): `src/utils/` (framework-agnostic class helpers), `src/theme/`\n (tokens, token-class builders, theming runtime), `src/components/` (one file\n per component). `mod.ts` is the public barrel; a Radix component gets a root\n re-export file (e.g. `dialog.ts`) kept _out_ of the barrel (ADR-0002).\n- **Styling foundation** — built in `kyla-ui` and verified on the runtime:\n - `src/utils/cn.ts` — `twMerge(clsx())`, versions pinned (clsx@2.1.1,\n tailwind-merge@3.6.0); empirically confirmed to dedupe `[color:var(--…)]`\n token classes. Contract: `cn(componentClasses, className)` — caller's\n `className` wins.\n - `src/theme/tw.ts` — `tw.bg/text/border/ring/ringOffset(token, state?)`\n builders that bake in the `color:` hint (state-prefixable), plus the\n `ColorToken` union (typo = compile error).\n - `src/utils/variants.ts` — hand-rolled cva-style `variants()` (no external\n dep).\n - `src/theme/tokens.ts` — token stylesheet (provisional values).\n - `src/theme/provider.tsx` — `KylaProvider` + `useKylaMode`.\n - `mod.ts` — public barrel (Radix kept out).\n- **First component** — `src/components/button.tsx` (`Button`, `ButtonProps`):\n variants `primary | subtle | ghost | danger` × `sm | md | lg`, token focus\n ring, default `type=\"button\"`, forwarded ref + rest props, escape-hatch\n `className`. Verified by server-render. Surfaced + fixed a foundation gap:\n state-prefixed token utilities (`tw.bg(\"recessed\", \"hover\")`).\n- **Next** — real palette/scales; more components (`Card`, `Input`, `Text`, …);\n bring `Dialog` over to exercise the Radix-behind-its-own-path split.\n\n## Shape\n\n- **Two vals.** `kyla-ui` — the importable library, which also serves its own\n **Gallery** (docs) at its HTTP route. `kyla-ui-starter` — a remixable, genuine\n **todo app** (real HTTP route + `std/sqlite`) showing idiomatic end-to-end\n use. The Starter depends on the library; never the reverse.\n- **CSR-only for v1.** Target is interactive apps (dashboards, tools, forms)\n where SEO/first-paint don't matter. Components authored pure so isomorphic\n stays possible later, without paying its tax now.\n\n## Styling — [ADR-0001](./adr/0001-no-build-styling-architecture.md)\n\n- Semantic tokens as `--kyla-*` **CSS custom properties** using `light-dark()`;\n applied via runtime **Twind arbitrary-value** utilities\n (`bg-[var(--kyla-base)]`). No build, no bundler.\n- Token vocabulary: surfaces `base → elevated → recessed`; foreground `fg`,\n `fg-muted`; borders `line`, `hairline`; `accent`, `danger`; `radius`.\n- One opinionated theme. Small consumer **override surface** (`--kyla-accent`,\n `--kyla-radius`, font); structural tokens stay fixed — that fixedness _is_ the\n consistency. A Kumo-style named-theme system is a deliberate later step.\n\n## Style delivery & theming\n\n- **`KylaProvider`** guarantees Twind + token stylesheet are present (a manual\n two-tag `` setup is the documented fallback).\n- The Provider **owns Mode**: sets `data-mode=\"light|dark|system\"`, exposes\n `useKylaMode()` (persistence opt-in); `system` falls through to OS via\n `light-dark()`. Apps get a first-class light/dark toggle for free.\n\n## Components — [ADR-0002](./adr/0002-hybrid-headless-foundation.md)\n\n- **Hybrid foundation.** Hand-roll simple visual components with zero deps;\n build on a headless library only for hard interactive ones. **Radix first**\n (proven on VT), Base UI as a likely faithful-to-Kumo later variant.\n- **v1 inventory:**\n - Zero-dep visual: `Button`, `Text`/`Heading`, `Card`, `Input`, `Textarea`,\n `Label`, `Badge`, `Stack`, `Box`, `Divider`\n - Styled native: `Select`\n - Radix-backed (the headless proof): `Dialog`\n - Deferred to v1.1+: `Checkbox`, `Radio`, `Spinner`, `Alert`, then `Popover`,\n `Menu`, `Tabs`, `Tooltip`, `Combobox`, `Toast`, `Table`, …\n- **API:** typed **variant** props (`variant`, `size`, `tone`) mapping to tokens\n internally; escape-hatch `className` merged last via exported `cn()`; refs +\n rest props forwarded. Public surface = finished components + `cn()` +\n Provider. Radix primitives stay **internal** (so Radix→Base UI later isn't an\n API break).\n- **Accessibility (bounded):** correct semantic HTML, real\n ``/`id` association, token-based visible focus, no broken\n native keyboard behavior, AA contrast on the default theme. Anything needing\n custom ARIA → Radix tier.\n\n## Distribution — [ADR-0004](./adr/0004-version-pinned-upgrade-contract.md)\n\n- **Module layout:** barrel `mod.ts` for the zero-dep core; heavy `dialog.tsx`\n behind its own import path so Radix only loads when used.\n- **Upgrade contract:** `main` is the release line; development happens on\n branches; a **Release** is a merge to `main`. Unpinned import = latest Release\n (fixes auto-propagate); `?v=NNN` to freeze; README release table maps names →\n versions. (esm.town has no branch-import URLs, hence version pinning.)\n\n## Open verification spikes\n\nBuilt and **fully verified in-browser** as one throwaway val:\n**`nbbaier/kyla-ui-spike`** (`frontend/{App,KylaProvider,tokens}.tsx`). All four\ngreen:\n\n1. ✅ **Radix `Dialog`** — imports via esm.sh with React 18.2.0 (the\n `?deps=react@18.2.0,react-dom@18.2.0` pin propagates through Radix's whole\n transitive graph, defusing the React-mismatch `useState` null error) and\n renders/opens/closes/focus-traps cleanly under CSR.\n2. ✅ **Twind + CSS-var tokens** — surfaces render stepped, accent applies.\n3. ✅ **`KylaProvider` runtime token injection** — styles exist only because the\n Provider injected the stylesheet. (Twind stays in the _shell_ since it must\n load before first paint; only the token stylesheet is Provider-injected.)\n4. ✅ **`light-dark()` + `data-mode`** — mode toggle flips the palette; resolves\n even inside the Radix portal.\n\n### Load-bearing finding (the spike's main payoff)\n\nOn Val Town's runtime **Twind, semantic-color utilities must carry the `color:`\ntype hint** — `bg-[color:var(--kyla-base)]`, `text-[color:var(--kyla-fg)]`,\n`border-[color:var(--kyla-line)]`. A bare `bg-[var(--…)]` is type-ambiguous and\nTwind **silently emits nothing** — no error, just an unstyled element. Lengths\nare fine bare (`rounded-[var(--kyla-radius)]`). Because the failure is\ninvisible, the `cn()`/variant layer must emit token utilities through a helper\nso authors can't forget the hint. (Baked into ADR-0001.)\n\n## Deliberately deferred (not yet designed)\n\nThese were identified but intentionally not resolved in this sketch. The\n**spacing / radius / type scale** is the highest-leverage — it's where visual\nconsistency actually lives.\n\n- **Structural scales** — the spacing, radius, and typographic scales (the fixed\n tokens carrying most of the consistency). Currently undefined.\n- **Variant→token maps** — concrete `variant`/`size`/`tone` value sets per\n component (e.g. what tones `Button`/`Badge` expose).\n- **`KylaProvider` API** — its precise prop surface beyond \"owns styles + Mode\".\n- **Gallery generation** — hand-written vs generated from component metadata.\n- **Theming v2** — a Kumo-style named-theme system (multiple consumer-defined\n themes) once there's demand.\n- **Base UI variant** — a Base-UI-backed build once Radix proves the path.\n- **Isomorphic rendering** — SSR + hydration for content/landing pages, if\n needed.",[],[231,396],"8dab6582-02fc-404c-8075-20be76723447","2026-06-18-design-and-foundation.md","019f3953-b8df-70da-933b-0ead238cd3ee","019f3953-b8df-70da-933b-111bb9523094",["D",1783373215838],"# Handoff — Kylä UI design + foundation (2026-06-18)\n\nPicking up the `nbbaier/kyla-ui` component library for Val Town. This thread did the\ndesign grilling, proved the runtime substrate, and built the styling foundation + the\nfirst component (`Button`). This doc is a pointer map + \"what's next\", not a re-spec —\nthe real content lives in the artifacts referenced below.\n\n## Read these first (don't duplicate them)\n\n- [`CONTEXT.md`](../../CONTEXT.md) — glossary / shared language.\n- [`docs/v1-design-sketch.md`](../v1-design-sketch.md) — the design hub, **Implementation\n status** section, open spikes (all ✅), and the \"Deliberately deferred\" list.\n- [`docs/adr/0001..0004`](../adr/) — the load-bearing decisions and *why*.\n- [`README.md`](../../README.md) — consumer-facing quick start.\n\n## State of the world\n\n- **Two vals.** `nbbaier/kyla-ui` (the library; locally synced to this working dir via\n `vt`). `nbbaier/kyla-ui-spike` (throwaway substrate proof — all 4 spikes green\n in-browser; keep it around as a live sandbox).\n- **Foundation built & verified on the runtime:** `mod.ts` barrel + `src/utils/`\n (`cn`, `variants`), `src/theme/` (`tokens`, `tw`, `provider`), `src/components/`\n (`button`). Layout rationale is in the sketch's Implementation status.\n- **`Button`** ships with `variant` × `size`, token focus ring, ref forwarding,\n escape-hatch `className`. Verified by server-render (`renderToStaticMarkup`).\n- Everything is pushed; `vt status` was clean at handoff time.\n\n## Gotchas that will bite you if forgotten\n\n1. **The `color:` hint is mandatory** for token color utilities — `bg-[color:var(--…)]`,\n never `bg-[var(--…)]` (the latter silently renders nothing; no error). Always go\n through the `tw.*` builders in `src/theme/tw.ts`, which bake it in. (ADR-0001.)\n2. **Twind lives in the HTML shell**, not the Provider (must load before first paint).\n The Provider injects only the token stylesheet. (ADR-0001.)\n3. **Pin React to 18.2.0 everywhere**, including Radix via\n `?deps=react@18.2.0,react-dom@18.2.0`, or you hit the `useState` null error. (ADR-0002.)\n4. **`cn(componentClasses, className)` call order** is the contract — caller's\n `className` must come last to win.\n5. **Token values in `src/theme/tokens.ts` are provisional** — not the real palette yet.\n\n## Suggested next steps (roughly in order)\n\n1. **See `Button` live** — add a showcase row to `kyla-ui-spike`'s `App.tsx` to eyeball\n all variant/size combos + hover/focus in a browser. (Quick loop-closer.)\n2. **Real palette + structural scales** — replace provisional tokens with AA-checked\n surface/fg/border ramps + spacing/radius/type scales. Highest-leverage deferred item.\n3. **More components** — `Card`, `Text`/`Heading`, `Input`, `Textarea`, `Label`, `Badge`,\n `Stack`, `Box`, `Divider`, then native-styled `Select`. Reuse the Button pattern.\n4. **`Dialog` (Radix)** — first component behind its own import path: `src/components/dialog.tsx`\n + a root `dialog.ts` re-export, kept OUT of `mod.ts` (ADR-0002). Exercises the split.\n5. **Gallery** — the library's self-hosted docs HTTP route (CONTEXT.md → \"Gallery\").\n6. **Starter** — `kyla-ui-starter`: a tiny todo app (CONTEXT.md → \"Starter\").\n\n## How to work in this repo\n\n- Edit locally, then `vt push` (and `vt pull` first if needed). `vt status` shows drift.\n- **Smoke-test pattern that works without a browser:** create a throwaway\n `src/_smoke.ts(x)` in the val, `run_file` it (use `renderToStaticMarkup` from\n `react-dom@18.2.0/server` to render components to a class string), then `delete_file`\n it. Used twice this thread; clean and fast.\n- For anything UI/platform-specific on Val Town, pull the official skill via the valtown\n MCP `find_val_town_skills` tool rather than working from memory.\n\n## Suggested skills for the next session\n\n- **valtown:react-ui** — the canonical conventions (Twind, React pin, view-source) for\n any component or Gallery work.\n- **grill-with-docs** — if revisiting design decisions (palette, theming v2, new\n components' APIs); it updates `CONTEXT.md` / ADRs inline.\n- **valtown:sqlite-storage** + **valtown:http-endpoints** — when building the Starter\n todo app and/or the Gallery route.\n- **rams** (or **impeccable**) — accessibility / visual-design review once there are\n enough components and the real palette to evaluate.\n",[],[231,410,403],"handoffs","4fcaf772-350f-455a-be01-06b6aa80fdf6",["D",1783373215838],[256],[231,410],"caabfe1e-e020-4955-a8fb-3425824096fb","triage-labels.md","019f3953-b8df-70da-933b-07c96565ee56","019f3953-b8df-70da-933b-0ad85de5eb6d",["D",1783373215838],"# Triage Labels\n\nThe skills speak in terms of five canonical triage roles. This file maps those roles to the actual label strings used in this repo's issue tracker.\n\n| Label in mattpocock/skills | Label in our tracker | Meaning |\n| --------------------------- | --------------------- | ----------------------------------------- |\n| `needs-triage` | `needs-triage` | Maintainer needs to evaluate this issue |\n| `needs-info` | `needs-info` | Waiting on reporter for more information |\n| `ready-for-agent` | `ready-for-agent` | Fully specified, ready for an AFK agent |\n| `ready-for-human` | `ready-for-human` | Requires human implementation |\n| `wontfix` | `wontfix` | Will not be actioned |\n\nWhen a skill mentions a role (e.g. \"apply the AFK-ready triage label\"), use the corresponding label string from this table.\n\nEdit the right-hand column to match whatever vocabulary you actually use.\n",[],[231,423,416],"agents","6a170768-28d5-4cad-9442-625524d1d537","issue-tracker.md","019f3953-b8df-70da-933b-033d2b846091",["D",1783373215838],"# Issue tracker: Local Markdown\n\nIssues and PRDs for this repo live as markdown files in `.scratch/`.\n\n## Conventions\n\n- One feature per directory: `.scratch//`\n- The PRD is `.scratch//PRD.md`\n- Implementation issues are `.scratch//issues/-.md`, numbered from `01`\n- Triage state is recorded as a `Status:` line near the top of each issue file (see `triage-labels.md` for the role strings)\n- Comments and conversation history append to the bottom of the file under a `## Comments` heading\n\n## When a skill says \"publish to the issue tracker\"\n\nCreate a new file under `.scratch//` (creating the directory if needed).\n\n## When a skill says \"fetch the relevant ticket\"\n\nRead the file at the referenced path. The user will normally pass the path or the issue number directly.\n",[],[231,423,425],"a2003e30-4e1b-4812-8316-eee6f6c2f51f","domain.md","019f3953-b8df-70da-933a-fca9bd7ab51b",["D",1783373215838],"# Domain Docs\n\nHow the engineering skills should consume this repo's domain documentation when exploring the codebase.\n\n## Before exploring, read these\n\n- **`CONTEXT.md`** at the repo root, or\n- **`CONTEXT-MAP.md`** at the repo root if it exists — it points at one `CONTEXT.md` per context. Read each one relevant to the topic.\n- **`docs/adr/`** — read ADRs that touch the area you're about to work in. In multi-context repos, also check `src//docs/adr/` for context-scoped decisions.\n\nIf any of these files don't exist, **proceed silently**. Don't flag their absence; don't suggest creating them upfront. The `/domain-modeling` skill (reached via `/grill-with-docs` and `/improve-codebase-architecture`) creates them lazily when terms or decisions actually get resolved.\n\n## File structure\n\nSingle-context repo (most repos):\n\n```\n/\n├── CONTEXT.md\n├── docs/adr/\n│ ├── 0001-event-sourced-orders.md\n│ └── 0002-postgres-for-write-model.md\n└── src/\n```\n\nMulti-context repo (presence of `CONTEXT-MAP.md` at the root):\n\n```\n/\n├── CONTEXT-MAP.md\n├── docs/adr/ ← system-wide decisions\n└── src/\n ├── ordering/\n │ ├── CONTEXT.md\n │ └── docs/adr/ ← context-specific decisions\n └── billing/\n ├── CONTEXT.md\n └── docs/adr/\n```\n\n## Use the glossary's vocabulary\n\nWhen your output names a domain concept (in an issue title, a refactor proposal, a hypothesis, a test name), use the term as defined in `CONTEXT.md`. Don't drift to synonyms the glossary explicitly avoids.\n\nIf the concept you need isn't in the glossary yet, that's a signal — either you're inventing language the project doesn't use (reconsider) or there's a real gap (note it for `/domain-modeling`).\n\n## Flag ADR conflicts\n\nIf your output contradicts an existing ADR, surface it explicitly rather than silently overriding:\n\n> _Contradicts ADR-0007 (event-sourced orders) — but worth reopening because…_\n",[],[231,423,432],"d137c2ec-f763-4f54-baac-a73ff4c761da",["D",1783373215838],[252,253,254],[231,423],"7e28e964-955b-4e4c-90ab-48a186a7b84f","0004-version-pinned-upgrade-contract.md","019f3953-b8df-70da-933a-f75faa020c6f","019f3953-b8df-70da-933a-fb78b2decae4",["D",1783373215838],"# Upgrade contract: main-as-release-line, version pinning\n\nKylä UI is consumed by importing its val from esm.town, where an unpinned import (`.../kyla-ui/mod.ts`) auto-redirects to the val's latest version and a consumer can freeze onto a specific version with `?v=NNN`. esm.town does **not** offer branch-name import URLs, so the intuitive \"consumers track a long-lived `stable` branch\" model is not available.\n\nWe therefore make **`main` the stable/release line**: all development happens on feature/dev branches, and a **Release is a merge into `main`.** Because raw work never lands on `main`, HEAD-of-`main` is always a Release. Consumers then have two contracts:\n\n- **Track latest** — import the unpinned URL; always get the newest Release, so fixes auto-propagate (the upside of consumption-by-import).\n- **Freeze** — pin `?v=NNN` from the README's release table; upgrade deliberately by changing the number.\n\n## Considered Options\n\n- **Long-lived `stable` branch consumers import** — rejected: esm.town has no documented branch-import URL, so it isn't realizable.\n- **Live HEAD with raw development on the imported line** — rejected: any work-in-progress push would reach unpinned consumers; keeping development off `main` is what makes the unpinned URL safe.\n\n## Consequences\n\n- Unpinned consumers receive a new Release the instant a branch merges — *including a breaking one*. The release table plus brief per-release notes are how a consumer decides whether to pin. There is no staging window between merge and propagation.\n- Every merge to `main` mints a new `?v=NNN`; the README maps human release names to those version numbers.\n- For v1 (sole consumer is the maintainer) this can be operated loosely, but the convention costs nothing now and makes external consumption safe later.\n",[],[231,450,443],"adr","4d38025d-c0a1-4870-8818-45ff8e03f17f","0003-consistency-first-bounded-accessibility.md","019f3953-b8df-70da-933a-f1ab1fb0928e",["D",1783373215838],"# Consistency-first positioning, bounded accessibility\n\nKylä UI is modeled on Cloudflare Kumo, whose headline value is accessibility. We deliberately invert the emphasis: **Kylä leads with visual consistency** — the felt pain for the Val Town audience (people shipping apps fast without a designer) is that hand-assembled UIs look inconsistent, not that they fail an audit. Accessibility remains a real but *quiet* guarantee underneath, with a deliberately bounded scope for v1.\n\nThe accessibility commitment is exactly: **correct semantic HTML** (native `

{title}

Diff · v6