[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_480":481,"_482":483},"routes/_app.x.$handle.$name",{"_106":105,"_37":50,"_115":92,"_32":58,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_26":-5,"_126":127,"_128":129,"_130":30,"_131":132,"_133":64,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":30},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","9e97bfaf-087c-4cb5-b681-d68955477122","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","preview/app.tsx","latestPath","fileId","b62dbd02-7981-11f1-991c-1607ee4eb77e","name","app.tsx","fileType","script","content","/** @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

{title}

\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

{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","createdAt",["D",1783373343913],"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","9cb7384e-7981-11f1-9c67-1607ee4eb77e","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",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_19":60,"_111":112,"_113":30},"branch",{"_13":91,"_37":92,"_48":47,"_93":49,"_94":95,"_96":97,"_98":55,"_99":100,"_101":102,"_103":50,"_104":105},"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=1789588198&sig=c2bdd9f2e3032c382594ca8c4900ff069f4422eab8a775e77861226b87460309","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_48":49,"_37":50,"_43":476,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":477,"_86":478,"_88":479,"_90":30},"tree",[243,256,260,270,271,272,273,274,275,276,277,278],"files",[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],"counts",{"_233":68,"_234":164,"_235":68,"_236":237,"_238":239},"contents",[148,149,150,151,152,153,154,155,156,157,158,159],"upstreamProject",{"_48":100,"_37":50,"_57":145,"_59":-5,"_54":55,"_84":146},"upstreamBranch",{"_48":95,"_43":138,"_139":140,"_37":92,"_93":100,"_13":141,"_94":-5,"_96":-5,"_142":143,"_52":-5,"_90":30,"_54":55,"_104":144,"_69":102,"_103":50},"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",{"_106":144,"_114":147},"https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon",{"_48":228,"_37":229,"_35":230,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":231,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_32":232},{"_48":222,"_37":223,"_35":224,"_163":-5,"_46":47,"_45":225,"_165":64,"_43":226,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_32":227},{"_48":216,"_37":217,"_35":218,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":219,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_32":221},{"_48":210,"_37":211,"_35":212,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":213,"_13":68,"_39":26,"_41":214,"_29":30,"_168":-5,"_32":215},{"_48":205,"_37":206,"_35":207,"_163":-5,"_46":47,"_45":164,"_165":30,"_43":208,"_13":68,"_39":26,"_41":203,"_29":30,"_168":-5,"_32":209},{"_48":199,"_37":200,"_35":201,"_163":-5,"_46":47,"_45":164,"_165":30,"_43":202,"_13":68,"_39":26,"_41":203,"_29":30,"_168":-5,"_32":204},{"_48":193,"_37":194,"_35":195,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":196,"_13":68,"_39":26,"_41":197,"_29":30,"_168":-5,"_32":198},{"_48":187,"_37":188,"_35":189,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":190,"_13":68,"_39":26,"_41":191,"_29":30,"_168":-5,"_32":192},{"_48":181,"_37":182,"_35":183,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":184,"_13":68,"_39":26,"_41":185,"_29":30,"_168":-5,"_32":186},{"_48":175,"_37":176,"_35":177,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":178,"_13":68,"_39":26,"_41":179,"_29":30,"_168":-5,"_32":180},{"_48":170,"_37":171,"_35":172,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":173,"_13":68,"_39":40,"_41":58,"_29":30,"_168":-5,"_32":174},{"_48":160,"_37":161,"_35":162,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":166,"_13":68,"_39":40,"_41":167,"_29":30,"_168":-5,"_32":169},"790923b4-b988-4a9a-a4a8-bfa9c8e2997a","mod.ts","019f3953-b8e0-7219-bf10-2c6f7d5201b2","parentId",1,"latest",["D",1783373215838],"/**\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",[161],"fc451d1f-7214-4bbf-a2a7-034f48887cc0","main.ts","019f3953-b8e0-7219-bf10-2b93e358d2d9",["D",1783373215838],[171],"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",[176],"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}",[182],"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",[188],"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",[194],"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",[200],"e7e4e9bb-727b-4b16-a66d-c615b0887b63","AGENTS.md","019f3953-b8df-70da-933b-4ab4a08684ae",["D",1783373215838],[206],"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",[211],"561d2f12-648c-4dfa-a1fd-1429019c364f","src","019f3953-b8df-70da-933b-42078d6c2263",["D",1783373215838],"directory",[217],"f1c1505c-cac2-4e88-b149-509fb3683224","preview","8a3eb280-c589-4def-87c2-787f92d1947f",2,["D",1783373301204],[223],"0069d314-a8f7-4fd3-895e-243bac4fb205","docs","019f3953-b8df-70da-933b-18425a3db793",["D",1783373215838],[229],"pulls","branches","forks","envVars",{"_240":68,"_242":68},"connections",{"_240":68,"_241":68},"count","unfilledCount","emptyCount",{"_48":228,"_37":229,"_35":230,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":473,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":474,"_32":475},{"_48":469,"_37":447,"_35":442,"_163":230,"_46":47,"_45":164,"_165":64,"_43":470,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":471,"_32":472},{"_48":462,"_37":463,"_35":464,"_163":442,"_46":47,"_45":164,"_165":64,"_43":465,"_13":68,"_39":26,"_41":466,"_29":30,"_168":-5,"_280":467,"_32":468},{"_48":455,"_37":456,"_35":457,"_163":442,"_46":47,"_45":164,"_165":64,"_43":458,"_13":68,"_39":26,"_41":459,"_29":30,"_168":-5,"_280":460,"_32":461},{"_48":448,"_37":449,"_35":450,"_163":442,"_46":47,"_45":164,"_165":64,"_43":451,"_13":68,"_39":26,"_41":452,"_29":30,"_168":-5,"_280":453,"_32":454},{"_48":439,"_37":440,"_35":441,"_163":442,"_46":47,"_45":164,"_165":64,"_43":443,"_13":68,"_39":26,"_41":444,"_29":30,"_168":-5,"_280":445,"_32":446},{"_48":435,"_37":420,"_35":415,"_163":230,"_46":47,"_45":164,"_165":64,"_43":436,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":437,"_32":438},{"_48":428,"_37":429,"_35":430,"_163":415,"_46":47,"_45":164,"_165":64,"_43":431,"_13":68,"_39":26,"_41":432,"_29":30,"_168":-5,"_280":433,"_32":434},{"_48":421,"_37":422,"_35":423,"_163":415,"_46":47,"_45":164,"_165":30,"_43":424,"_13":68,"_39":26,"_41":425,"_29":30,"_168":-5,"_280":426,"_32":427},{"_48":412,"_37":413,"_35":414,"_163":415,"_46":47,"_45":164,"_165":30,"_43":416,"_13":68,"_39":26,"_41":417,"_29":30,"_168":-5,"_280":418,"_32":419},{"_48":408,"_37":407,"_35":402,"_163":230,"_46":47,"_45":164,"_165":64,"_43":409,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":410,"_32":411},{"_48":399,"_37":400,"_35":401,"_163":402,"_46":47,"_45":164,"_165":64,"_43":403,"_13":68,"_39":26,"_41":404,"_29":30,"_168":-5,"_280":405,"_32":406},{"_48":392,"_37":393,"_35":394,"_163":230,"_46":47,"_45":164,"_165":30,"_43":395,"_13":68,"_39":26,"_41":396,"_29":30,"_168":-5,"_280":397,"_32":398},{"_48":222,"_37":223,"_35":224,"_163":-5,"_46":47,"_45":225,"_165":64,"_43":389,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":390,"_32":391},{"_48":385,"_37":38,"_35":36,"_163":224,"_46":47,"_45":14,"_165":30,"_43":386,"_13":68,"_39":40,"_41":42,"_29":30,"_168":-5,"_280":387,"_32":388},{"_48":377,"_37":378,"_35":379,"_163":224,"_46":47,"_45":380,"_165":30,"_43":381,"_13":68,"_39":40,"_41":382,"_29":30,"_168":-5,"_280":383,"_32":384},{"_48":370,"_37":371,"_35":62,"_163":224,"_46":47,"_45":225,"_165":30,"_43":372,"_13":68,"_39":373,"_41":374,"_29":30,"_168":-5,"_280":375,"_32":376},{"_48":216,"_37":217,"_35":218,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":367,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":368,"_32":369},{"_48":363,"_37":362,"_35":357,"_163":218,"_46":47,"_45":164,"_165":64,"_43":364,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":365,"_32":366},{"_48":354,"_37":355,"_35":356,"_163":357,"_46":47,"_45":164,"_165":64,"_43":358,"_13":68,"_39":40,"_41":359,"_29":30,"_168":-5,"_280":360,"_32":361},{"_48":350,"_37":335,"_35":330,"_163":218,"_46":47,"_45":164,"_165":64,"_43":351,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":352,"_32":353},{"_48":343,"_37":344,"_35":345,"_163":330,"_46":47,"_45":164,"_165":64,"_43":346,"_13":68,"_39":40,"_41":347,"_29":30,"_168":-5,"_280":348,"_32":349},{"_48":336,"_37":337,"_35":338,"_163":330,"_46":47,"_45":164,"_165":64,"_43":339,"_13":68,"_39":40,"_41":340,"_29":30,"_168":-5,"_280":341,"_32":342},{"_48":327,"_37":328,"_35":329,"_163":330,"_46":47,"_45":164,"_165":64,"_43":331,"_13":68,"_39":40,"_41":332,"_29":30,"_168":-5,"_280":333,"_32":334},{"_48":323,"_37":315,"_35":310,"_163":218,"_46":47,"_45":164,"_165":64,"_43":324,"_13":68,"_39":220,"_41":-5,"_29":30,"_168":-5,"_280":325,"_32":326},{"_48":316,"_37":317,"_35":318,"_163":310,"_46":47,"_45":164,"_165":64,"_43":319,"_13":68,"_39":40,"_41":320,"_29":30,"_168":-5,"_280":321,"_32":322},{"_48":307,"_37":308,"_35":309,"_163":310,"_46":47,"_45":164,"_165":64,"_43":311,"_13":68,"_39":40,"_41":312,"_29":30,"_168":-5,"_280":313,"_32":314},{"_48":210,"_37":211,"_35":212,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":304,"_13":68,"_39":26,"_41":214,"_29":30,"_168":-5,"_280":305,"_32":306},{"_48":205,"_37":206,"_35":207,"_163":-5,"_46":47,"_45":164,"_165":30,"_43":301,"_13":68,"_39":26,"_41":203,"_29":30,"_168":-5,"_280":302,"_32":303},{"_48":199,"_37":200,"_35":201,"_163":-5,"_46":47,"_45":164,"_165":30,"_43":298,"_13":68,"_39":26,"_41":203,"_29":30,"_168":-5,"_280":299,"_32":300},{"_48":193,"_37":194,"_35":195,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":295,"_13":68,"_39":26,"_41":197,"_29":30,"_168":-5,"_280":296,"_32":297},{"_48":187,"_37":188,"_35":189,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":292,"_13":68,"_39":26,"_41":191,"_29":30,"_168":-5,"_280":293,"_32":294},{"_48":181,"_37":182,"_35":183,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":289,"_13":68,"_39":26,"_41":185,"_29":30,"_168":-5,"_280":290,"_32":291},{"_48":175,"_37":176,"_35":177,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":286,"_13":68,"_39":26,"_41":179,"_29":30,"_168":-5,"_280":287,"_32":288},{"_48":170,"_37":171,"_35":172,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":283,"_13":68,"_39":40,"_41":58,"_29":30,"_168":-5,"_280":284,"_32":285},{"_48":160,"_37":161,"_35":162,"_163":-5,"_46":47,"_45":164,"_165":64,"_43":279,"_13":68,"_39":40,"_41":167,"_29":30,"_168":-5,"_280":281,"_32":282},["D",1783373215838],"children",[],[161],["D",1783373215838],[],[171],["D",1783373215838],[],[176],["D",1783373215838],[],[182],["D",1783373215838],[],[188],["D",1783373215838],[],[194],["D",1783373215838],[],[200],["D",1783373215838],[],[206],["D",1783373215838],[],[211],"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",[],[217,315,308],"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",[],[217,315,317],"e04c4285-cb55-443b-8ffc-0b67ad60478a",["D",1783373215838],[268,269],[217,315],"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",[],[217,335,328],"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",[],[217,335,337],"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",[],[217,335,344],"e88b7d1a-5a57-49b0-b3a8-4336bdc4f087",["D",1783373215838],[264,265,266],[217,335],"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 `

Diff · v4