[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_783":784,"_785":786},"routes/_app.x.$handle.$name",{"_99":98,"_32":46,"_107":89,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":125,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",253,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","preview/app.tsx","latestPath","fileId","42cc23d4-7987-11f1-814e-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

\n {title}\n

\n {subtitle && (\n

\n {subtitle}\n

\n )}\n

{children}

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

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

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

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

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

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

\n ))}\n

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

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

\n {token}\n

\n --kyla-{token}\n

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

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

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

\n {/* header */}\n

\n Kylä UI\n

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

\n \n

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

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

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

\n ✅ In place\n

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

\n 🔜 To come\n

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

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

\n \n \n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// The real library — imported, never modified.\nimport { Button, cn, KylaProvider, tw, useKylaMode } from \"../mod.ts\";\nimport type { ColorToken } from \"../src/theme/tw.ts\";\nimport type { Mode } from \"../src/theme/provider.tsx\";\n\nconst VARIANTS = [\"primary\", \"subtle\", \"ghost\", \"danger\"] as const;\nconst SIZES = [\"sm\", \"md\", \"lg\"] as const;\n\nconst COLOR_TOKENS: ColorToken[] = [\n \"base\",\n \"elevated\",\n \"recessed\",\n \"fg\",\n \"fg-muted\",\n \"line\",\n \"hairline\",\n \"accent\",\n \"accent-fg\",\n \"danger\",\n];\n\n/** A titled section on an elevated card. */\nfunction Section({\n title,\n subtitle,\n children,\n}: {\n title: string;\n subtitle?: string;\n children: React.ReactNode;\n}) {\n return (\n \n

\n {title}\n

\n {subtitle && (\n

\n {subtitle}\n

\n )}\n

{children}

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

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

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

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

\n ))}\n

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

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

\n {token}\n

\n --kyla-{token}\n

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

\n \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",1784060340705],"branchVersion","branchId","687a9437-44a8-49ca-94d7-3277b6842513","id","a2eea118-e17c-4a68-9fa4-155c6cf32150","kyla-ui",["D",1781804868537],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Components for consistently styled web apps on Val Town","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","a2eea118e17c4a689fa4155c6cf32150","tursoHostname","a2eea118e17c4a689fa4155c6cf32150-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789614083669],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":56,"_103":104,"_105":25},"branch",{"_13":88,"_32":89,"_44":43,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":46,"_97":98},"isOwned",269,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":778,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":779,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":780,"_83":781,"_85":782,"_87":25},"tree",[224,271,275,287,288,289,290,291,292,293],"files",[224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,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,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293],"counts",{"_214":62,"_215":163,"_216":192,"_217":218,"_219":220},"contents",[130,131,132,133,134,135,136,137,138,139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":208,"_32":209,"_30":210,"_143":-5,"_42":43,"_41":211,"_145":125,"_39":212,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_27":213},{"_44":202,"_32":203,"_30":204,"_143":-5,"_42":43,"_41":205,"_145":125,"_39":206,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_27":207},{"_44":195,"_32":196,"_30":197,"_143":-5,"_42":43,"_41":198,"_145":125,"_39":199,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_27":201},{"_44":187,"_32":188,"_30":189,"_143":-5,"_42":43,"_41":190,"_145":125,"_39":191,"_13":192,"_34":20,"_36":193,"_24":25,"_149":-5,"_27":194},{"_44":181,"_32":182,"_30":183,"_143":-5,"_42":43,"_41":184,"_145":25,"_39":185,"_13":171,"_34":20,"_36":179,"_24":25,"_149":-5,"_27":186},{"_44":174,"_32":175,"_30":176,"_143":-5,"_42":43,"_41":177,"_145":25,"_39":178,"_13":163,"_34":20,"_36":179,"_24":25,"_149":-5,"_27":180},{"_44":166,"_32":167,"_30":168,"_143":-5,"_42":43,"_41":169,"_145":25,"_39":170,"_13":171,"_34":20,"_36":172,"_24":25,"_149":-5,"_27":173},{"_44":158,"_32":159,"_30":160,"_143":-5,"_42":43,"_41":161,"_145":25,"_39":162,"_13":163,"_34":20,"_36":164,"_24":25,"_149":-5,"_27":165},{"_44":151,"_32":152,"_30":153,"_143":-5,"_42":43,"_41":154,"_145":125,"_39":155,"_13":147,"_34":20,"_36":156,"_24":25,"_149":-5,"_27":157},{"_44":140,"_32":141,"_30":142,"_143":-5,"_42":43,"_41":144,"_145":25,"_39":146,"_13":147,"_34":35,"_36":148,"_24":25,"_149":-5,"_27":150},"86571551-257d-4349-9a48-a6bdeedc4371","mod.ts","92255786-6b52-11f1-8262-1607ee4eb77e","parentId",252,"latest",["D",1784060340649],4,"/**\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 */\n\n// Components\nexport { Button, type ButtonProps } from \"./src/components/button.tsx\";\nexport { KylaProvider, type Mode, useKylaMode } from \"./src/theme/provider.tsx\";\nexport {\n type ColorToken,\n type RadiusToken,\n type SpaceProperty,\n type SpaceToken,\n type State,\n tw,\n} from \"./src/theme/tw.ts\";\nexport { cn } from \"./src/utils/cn.ts\";\nexport { variants } from \"./src/utils/variants.ts\";\n","label",[141],"fb6b027f-bd29-4744-8112-2dc00068f0a8","deno.json","47d67822-6b3e-11f1-bad1-1607ee4eb77e",223,["D",1784059569607],"{\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n },\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-sloppy-imports\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true\n },\n \"fmt\": {\n \"exclude\": [\".vt/\"]\n },\n \"lint\": {\n \"include\": [\"mod.ts\", \"preview/\", \"src/\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-import-prefix\"]\n }\n },\n \"tasks\": {\n \"fmt\": \"deno fmt\",\n \"fmt:check\": \"deno fmt --check\",\n \"lint\": \"deno lint\",\n \"typecheck\": \"deno check --allow-import=esm.town,www.val.town,esm.sh,jsr.io mod.ts preview src\",\n \"test\": \"deno test --allow-import=esm.town,www.val.town,esm.sh,jsr.io\",\n \"check\": \"deno task fmt:check && deno task lint && deno task typecheck && deno task test\"\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}\n",[152],"62b6399a-f511-424d-a3cb-d2cc8d8347f2","README.md","ec9dd180-6b3d-11f1-89a3-1607ee4eb77e",204,["D",1784058612287],7,"# Kylä UI\n\nA component library for building **consistently styled** web apps on Val Town.\nKylä 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\napp looks coherent by default. Accessibility (semantic HTML, label association,\nvisible focus, AA contrast) is a quiet guarantee underneath.\n\nBuilt for Val Town's reality: **no build step**. Components are React, styled\nwith runtime [Twind](https://twind.style) + semantic CSS-variable tokens, and\nconsumed by import — 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\n light/dark mode), then use components:\n\n ```tsx\n /** @jsxImportSource https://esm.sh/react@18.2.0 */\n import {\n Button,\n KylaProvider,\n } 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\ntracks the latest release (see\n[ADR-0004](docs/adr/0004-version-pinned-upgrade-contract.md)).\n\n## Status\n\nEarly. The styling foundation (`cn`, `tw`, `variants`, `KylaProvider`) and the\nfirst component (`Button`) are in place; the rest of the v1 component set and\nthe real design palette are still to come.\n\n## Components\n\n- `Button` — `variant`: `primary | subtle | ghost | danger`, `size`:\n `sm | md | lg`.\n\n## Project docs\n\n- [`CONTEXT.md`](CONTEXT.md) — the glossary / shared language.\n- [`docs/roadmap.md`](docs/roadmap.md) — the dependency-ordered plan to v1 +\n status.\n- [`docs/adr/`](docs/adr/) — architecture decision records.\n\nThe substrate (Radix + Twind + tokens + Provider on Val Town) is proven in a\nseparate spike val, `nbbaier/kyla-ui-spike`.\n",[159],"2a2918a9-7e7b-4b9e-a2fe-7d1c29ffdd5c","CONTEXT.md","bce56486-6b46-11f1-8898-1607ee4eb77e",174,["D",1784058609130],5,"# Kylä UI — Context\n\nA glossary of the core terms in this project. Implementation details live in\ncode 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\nReact components, a styling system, and any helpers needed to build consistently\nstyled web apps. It is **consumed by import**\n(`import { ... } from \"https://esm.town/v/nbbaier/kyla-ui/...\"`), not by\nremixing. This val is the source of truth for visual consistency across apps. It\n**also serves its own Gallery** (docs) at its HTTP route — the library documents\nitself, co-located with its source.\n\n### Starter\n\nA separate, remixable demo val (`kyla-ui-starter` or similar) that shows\nidiomatic _end-to-end_ use of Kylä UI: a tiny but genuine **todo app** with a\nreal HTTP route and `std/sqlite`, a working app shell, Provider + hydration\nwiring, and view-source link. A new app begins by remixing the Starter, then\nediting. The Starter **depends on** Kylä UI; the library never depends on the\nStarter. (Component reference/docs live in the library's Gallery, not the\nStarter.)\n\n### Gallery\n\nThe library's self-hosted documentation surface: an HTTP route on `kyla-ui` that\nrenders every component in its variants and Modes, with the Mode toggle. It is\nboth living docs and the in-browser proof that the stack renders correctly on\nVal Town (Twind + CSS-var tokens, Provider mode, Radix `Dialog` hydration). The\nseed of a fuller docs site later.\n\n### Release\n\nA blessed version of Kylä UI, produced by merging a development branch into\n`main`. `main` is the stable line: raw development never happens on it, so\nHEAD-of-`main` is always a Release. Each Release corresponds to a concrete Val\nTown version number (`?v=NNN`). A consumer tracks Releases by importing the\nunpinned URL (always latest Release) or freezes onto one by pinning its\n`?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\nlibrary rather than copying its code.\n\n### Semantic Token\n\nA named, intent-based design value (e.g. \"base surface,\" \"default foreground,\"\n\"line/border,\" \"danger\") rather than a raw value (e.g. \"blue-500\"). Components\nreference semantic tokens only; they never hard-code raw colors. Tokens are the\nunit of visual consistency and the surface through which a Theme is applied.\n(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:** `accent`, `accent-fg`, `accent-ring`, `accent-text`\n- **Status:** `danger`, `danger-fg`, `success`, `success-fg`\n- **Shape:** `radius`\n\nThe default theme's values conform to the Val Town UI style guide (see\n[ADR-0005](docs/adr/0005-val-town-visual-language-default-theme.md)); Kylä keeps\nits own richer surface hierarchy over VT's palette.\n\nOf these, the consumer-facing Override Surface for v1 is intentionally small\n(e.g. `--kyla-accent`, `--kyla-radius`, font); the rest are structural and stay\nfixed.\n\n### Theme\n\nA complete set of values bound to the Semantic Tokens, producing a coherent\nlook. A consumer switches the active theme without touching component code.\nLight/dark is one axis of theming; brand/variant overrides are another.\n\nFor v1, Kylä ships **one opinionated theme** with automatic light/dark, and\nexposes a deliberately small **Override Surface** — a few tokens (e.g. accent,\nradius, font) a consumer may redefine to express brand. Structural tokens\n(surface hierarchy, spacing, borders) stay fixed; that fixedness _is_ the\nconsistency. A fuller named-theme system (multiple consumer-defined Themes, à la\nKumo'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.\n`variant=\"primary\"`, `size=\"sm\"`, `tone=\"danger\"`). Variants map to Semantic\nTokens internally; they are the consumer's primary, discoverable means of\nvarying a component while staying on-system. An escape-hatch `className` always\nmerges last, letting an app deviate locally without forking. For v1 the public\nsurface is finished components plus a `cn()` helper and the Provider — the\nunderlying Headless Primitives stay internal.\n\n### Mode\n\nThe light/dark axis of a Theme. Modeled as\n`data-mode=\"light\" | \"dark\" | \"system\"`, where `system` falls through to the OS\npreference via CSS `light-dark()` (zero JS). Mode is **owned by the Provider** —\nit sets `data-mode` and exposes a hook to read/set it (persistence opt-in) — so\napps get a first-class light/dark toggle without hand-rolling one (a common\nsource of inconsistency and flash-of-wrong-theme bugs).\n\n### Headless Primitive\n\nThe behavior-and-accessibility layer of an interactive component (focus\nmanagement, keyboard nav, ARIA), independent of its visual styling. For the hard\ninteractive components (Dialog, Popover, Menu, Tabs), Kylä builds on a\nthird-party headless primitive library rather than hand-rolling. Simple visual\ncomponents (Button, Card, Stack, Text, Input, Badge) have no separate Headless\nPrimitive — they are styled directly.\n",[167],"5151567d-5103-498d-8462-8b9bcfce293e","CLAUDE.md","a53286c6-775c-11f1-abf2-1607ee4eb77e",241,["D",1784059571651],"## Working on changes\n\nDevelopment happens on a Val Town **val branch**, never directly on `main`.\n`main` is the stable release line — HEAD-of-`main` is always a Release (a\nconcrete `?v=NNN`), so raw work never lands on it. Branch off `main`, do the\nwork on the branch, and land it by merging the branch into `main`, which cuts\nthe next Release. See\n[ADR-0004](docs/adr/0004-version-pinned-upgrade-contract.md) for the rationale\nand the consumer-facing pinning contract.\n\n**Exception: docs-only changes push straight to `main`.** Changes confined to\n`docs/**` (specs, ADRs, roadmap, reference docs) carry no code/version surface,\nso they don't need a branch + merge cycle — push them directly. Any change that\ntouches `src/`, `mod.ts`, or other shipped code still follows the branch flow\nabove.\n\n## Agent skills\n\n### Issue tracker\n\nIssues and specs live as local markdown files under\n`docs/issues//`; no external tracker. See\n`docs/agents/issue-tracker.md`.\n\n### Triage labels\n\nUses the default five-role label vocabulary unchanged (`needs-triage`,\n`needs-info`, `ready-for-agent`, `ready-for-human`, `wontfix`). See\n`docs/agents/triage-labels.md`.\n\n### Domain docs\n\nSingle-context layout: `CONTEXT.md` + `docs/adr/` at the repo root. See\n`docs/agents/domain.md`.\n",[175],"cd8448e4-e142-43cc-9158-2cad2887fc27","AGENTS.md","9b865e5e-7770-11f1-b136-1607ee4eb77e",240,["D",1784059571548],[182],"1c7f3876-c7c1-4d67-8ed9-16bd851ecf3f",".vtignore","47ce4d8c-6b3e-11f1-8eca-1607ee4eb77e",13,["D",1781805649048],1,".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[188],"da3f4f02-c070-4df1-9bc5-96c25fc6eefd","src","91e38b30-6b52-11f1-bb7a-1607ee4eb77e",28,["D",1781813780417],"directory",[196],"aac8fba5-9942-4296-93bc-56339f5fdbb7","preview","019f397a-0ad7-770b-b0dd-ab97f904224e",78,["D",1783375727322],[203],"61b715f9-32d9-45da-bff6-008ae80a2386","docs","bc8b0c5c-6b46-11f1-aeb1-1607ee4eb77e",14,["D",1781808698019],[209],"pulls","branches","forks","envVars",{"_221":62,"_223":62},"connections",{"_221":62,"_222":62},"count","unfilledCount","emptyCount",{"_44":208,"_32":209,"_30":210,"_143":-5,"_42":43,"_41":211,"_145":125,"_39":775,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":776,"_27":777},{"_44":770,"_32":737,"_30":731,"_143":210,"_42":43,"_41":771,"_145":125,"_39":772,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":773,"_27":774},{"_44":762,"_32":763,"_30":764,"_143":731,"_42":43,"_41":765,"_145":125,"_39":766,"_13":442,"_34":20,"_36":767,"_24":25,"_149":-5,"_295":768,"_27":769},{"_44":754,"_32":755,"_30":756,"_143":731,"_42":43,"_41":757,"_145":125,"_39":758,"_13":192,"_34":20,"_36":759,"_24":25,"_149":-5,"_295":760,"_27":761},{"_44":746,"_32":747,"_30":748,"_143":731,"_42":43,"_41":749,"_145":125,"_39":750,"_13":192,"_34":20,"_36":751,"_24":25,"_149":-5,"_295":752,"_27":753},{"_44":738,"_32":739,"_30":740,"_143":731,"_42":43,"_41":741,"_145":125,"_39":742,"_13":192,"_34":20,"_36":743,"_24":25,"_149":-5,"_295":744,"_27":745},{"_44":728,"_32":729,"_30":730,"_143":731,"_42":43,"_41":732,"_145":125,"_39":733,"_13":322,"_34":20,"_36":734,"_24":25,"_149":-5,"_295":735,"_27":736},{"_44":723,"_32":706,"_30":700,"_143":210,"_42":43,"_41":724,"_145":125,"_39":725,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":726,"_27":727},{"_44":715,"_32":716,"_30":717,"_143":700,"_42":43,"_41":718,"_145":125,"_39":719,"_13":192,"_34":20,"_36":720,"_24":25,"_149":-5,"_295":721,"_27":722},{"_44":707,"_32":708,"_30":709,"_143":700,"_42":43,"_41":710,"_145":125,"_39":711,"_13":163,"_34":20,"_36":712,"_24":25,"_149":-5,"_295":713,"_27":714},{"_44":697,"_32":698,"_30":699,"_143":700,"_42":43,"_41":701,"_145":125,"_39":702,"_13":442,"_34":20,"_36":703,"_24":25,"_149":-5,"_295":704,"_27":705},{"_44":692,"_32":691,"_30":685,"_143":210,"_42":43,"_41":693,"_145":125,"_39":694,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":695,"_27":696},{"_44":682,"_32":683,"_30":684,"_143":685,"_42":43,"_41":686,"_145":125,"_39":687,"_13":192,"_34":20,"_36":688,"_24":25,"_149":-5,"_295":689,"_27":690},{"_44":677,"_32":461,"_30":503,"_143":210,"_42":43,"_41":678,"_145":125,"_39":679,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":680,"_27":681},{"_44":672,"_32":657,"_30":651,"_143":503,"_42":43,"_41":673,"_145":125,"_39":674,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":675,"_27":676},{"_44":667,"_32":461,"_30":661,"_143":651,"_42":43,"_41":668,"_145":125,"_39":669,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":670,"_27":671},{"_44":658,"_32":659,"_30":660,"_143":661,"_42":43,"_41":662,"_145":125,"_39":663,"_13":322,"_34":20,"_36":664,"_24":25,"_149":-5,"_295":665,"_27":666},{"_44":649,"_32":453,"_30":650,"_143":651,"_42":43,"_41":652,"_145":125,"_39":653,"_13":442,"_34":20,"_36":654,"_24":25,"_149":-5,"_295":655,"_27":656},{"_44":644,"_32":613,"_30":607,"_143":503,"_42":43,"_41":645,"_145":125,"_39":646,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":647,"_27":648},{"_44":639,"_32":461,"_30":617,"_143":607,"_42":43,"_41":640,"_145":125,"_39":641,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":642,"_27":643},{"_44":631,"_32":632,"_30":633,"_143":617,"_42":43,"_41":634,"_145":125,"_39":635,"_13":322,"_34":20,"_36":636,"_24":25,"_149":-5,"_295":637,"_27":638},{"_44":623,"_32":624,"_30":625,"_143":617,"_42":43,"_41":626,"_145":125,"_39":627,"_13":322,"_34":20,"_36":628,"_24":25,"_149":-5,"_295":629,"_27":630},{"_44":614,"_32":615,"_30":616,"_143":617,"_42":43,"_41":618,"_145":125,"_39":619,"_13":322,"_34":20,"_36":620,"_24":25,"_149":-5,"_295":621,"_27":622},{"_44":605,"_32":453,"_30":606,"_143":607,"_42":43,"_41":608,"_145":125,"_39":609,"_13":322,"_34":20,"_36":610,"_24":25,"_149":-5,"_295":611,"_27":612},{"_44":600,"_32":569,"_30":563,"_143":503,"_42":43,"_41":601,"_145":125,"_39":602,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":603,"_27":604},{"_44":595,"_32":461,"_30":573,"_143":563,"_42":43,"_41":596,"_145":125,"_39":597,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":598,"_27":599},{"_44":587,"_32":588,"_30":589,"_143":573,"_42":43,"_41":590,"_145":125,"_39":591,"_13":322,"_34":20,"_36":592,"_24":25,"_149":-5,"_295":593,"_27":594},{"_44":579,"_32":580,"_30":581,"_143":573,"_42":43,"_41":582,"_145":125,"_39":583,"_13":322,"_34":20,"_36":584,"_24":25,"_149":-5,"_295":585,"_27":586},{"_44":570,"_32":571,"_30":572,"_143":573,"_42":43,"_41":574,"_145":125,"_39":575,"_13":322,"_34":20,"_36":576,"_24":25,"_149":-5,"_295":577,"_27":578},{"_44":561,"_32":453,"_30":562,"_143":563,"_42":43,"_41":564,"_145":125,"_39":565,"_13":322,"_34":20,"_36":566,"_24":25,"_149":-5,"_295":567,"_27":568},{"_44":556,"_32":516,"_30":510,"_143":503,"_42":43,"_41":557,"_145":125,"_39":558,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":559,"_27":560},{"_44":551,"_32":461,"_30":520,"_143":510,"_42":43,"_41":552,"_145":125,"_39":553,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":554,"_27":555},{"_44":542,"_32":543,"_30":544,"_143":520,"_42":43,"_41":545,"_145":125,"_39":546,"_13":547,"_34":20,"_36":548,"_24":25,"_149":-5,"_295":549,"_27":550},{"_44":534,"_32":535,"_30":536,"_143":520,"_42":43,"_41":537,"_145":25,"_39":538,"_13":171,"_34":20,"_36":539,"_24":25,"_149":-5,"_295":540,"_27":541},{"_44":526,"_32":527,"_30":528,"_143":520,"_42":43,"_41":529,"_145":25,"_39":530,"_13":363,"_34":20,"_36":531,"_24":25,"_149":-5,"_295":532,"_27":533},{"_44":517,"_32":518,"_30":519,"_143":520,"_42":43,"_41":521,"_145":25,"_39":522,"_13":171,"_34":20,"_36":523,"_24":25,"_149":-5,"_295":524,"_27":525},{"_44":508,"_32":453,"_30":509,"_143":510,"_42":43,"_41":511,"_145":25,"_39":512,"_13":363,"_34":20,"_36":513,"_24":25,"_149":-5,"_295":514,"_27":515},{"_44":502,"_32":462,"_30":455,"_143":503,"_42":43,"_41":504,"_145":125,"_39":505,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":506,"_27":507},{"_44":497,"_32":461,"_30":466,"_143":455,"_42":43,"_41":498,"_145":125,"_39":499,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":500,"_27":501},{"_44":489,"_32":490,"_30":491,"_143":466,"_42":43,"_41":492,"_145":25,"_39":493,"_13":322,"_34":20,"_36":494,"_24":25,"_149":-5,"_295":495,"_27":496},{"_44":481,"_32":482,"_30":483,"_143":466,"_42":43,"_41":484,"_145":125,"_39":485,"_13":442,"_34":20,"_36":486,"_24":25,"_149":-5,"_295":487,"_27":488},{"_44":473,"_32":474,"_30":475,"_143":466,"_42":43,"_41":476,"_145":125,"_39":477,"_13":322,"_34":20,"_36":478,"_24":25,"_149":-5,"_295":479,"_27":480},{"_44":463,"_32":464,"_30":465,"_143":466,"_42":43,"_41":467,"_145":125,"_39":468,"_13":469,"_34":20,"_36":470,"_24":25,"_149":-5,"_295":471,"_27":472},{"_44":452,"_32":453,"_30":454,"_143":455,"_42":43,"_41":456,"_145":125,"_39":457,"_13":147,"_34":20,"_36":458,"_24":25,"_149":-5,"_295":459,"_27":460},{"_44":447,"_32":446,"_30":439,"_143":210,"_42":43,"_41":448,"_145":125,"_39":449,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":450,"_27":451},{"_44":436,"_32":437,"_30":438,"_143":439,"_42":43,"_41":440,"_145":25,"_39":441,"_13":442,"_34":20,"_36":443,"_24":25,"_149":-5,"_295":444,"_27":445},{"_44":428,"_32":429,"_30":430,"_143":210,"_42":43,"_41":431,"_145":25,"_39":432,"_13":171,"_34":20,"_36":433,"_24":25,"_149":-5,"_295":434,"_27":435},{"_44":202,"_32":203,"_30":204,"_143":-5,"_42":43,"_41":205,"_145":125,"_39":425,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":426,"_27":427},{"_44":421,"_32":33,"_30":31,"_143":204,"_42":43,"_41":14,"_145":25,"_39":422,"_13":322,"_34":35,"_36":38,"_24":25,"_149":-5,"_295":423,"_27":424},{"_44":414,"_32":415,"_30":416,"_143":204,"_42":43,"_41":205,"_145":25,"_39":417,"_13":62,"_34":35,"_36":418,"_24":25,"_149":-5,"_295":419,"_27":420},{"_44":406,"_32":407,"_30":408,"_143":204,"_42":43,"_41":205,"_145":25,"_39":409,"_13":62,"_34":410,"_36":411,"_24":25,"_149":-5,"_295":412,"_27":413},{"_44":195,"_32":196,"_30":197,"_143":-5,"_42":43,"_41":198,"_145":125,"_39":403,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":404,"_27":405},{"_44":398,"_32":397,"_30":391,"_143":197,"_42":43,"_41":399,"_145":125,"_39":400,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":401,"_27":402},{"_44":388,"_32":389,"_30":390,"_143":391,"_42":43,"_41":392,"_145":25,"_39":393,"_13":363,"_34":35,"_36":394,"_24":25,"_149":-5,"_295":395,"_27":396},{"_44":383,"_32":349,"_30":343,"_143":197,"_42":43,"_41":384,"_145":125,"_39":385,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":386,"_27":387},{"_44":375,"_32":376,"_30":377,"_143":343,"_42":43,"_41":378,"_145":125,"_39":379,"_13":192,"_34":35,"_36":380,"_24":25,"_149":-5,"_295":381,"_27":382},{"_44":367,"_32":368,"_30":369,"_143":343,"_42":43,"_41":370,"_145":25,"_39":371,"_13":322,"_34":35,"_36":372,"_24":25,"_149":-5,"_295":373,"_27":374},{"_44":358,"_32":359,"_30":360,"_143":343,"_42":43,"_41":361,"_145":25,"_39":362,"_13":363,"_34":35,"_36":364,"_24":25,"_149":-5,"_295":365,"_27":366},{"_44":350,"_32":351,"_30":352,"_143":343,"_42":43,"_41":353,"_145":25,"_39":354,"_13":192,"_34":35,"_36":355,"_24":25,"_149":-5,"_295":356,"_27":357},{"_44":340,"_32":341,"_30":342,"_143":343,"_42":43,"_41":344,"_145":25,"_39":345,"_13":147,"_34":35,"_36":346,"_24":25,"_149":-5,"_295":347,"_27":348},{"_44":335,"_32":326,"_30":319,"_143":197,"_42":43,"_41":336,"_145":125,"_39":337,"_13":62,"_34":200,"_36":-5,"_24":25,"_149":-5,"_295":338,"_27":339},{"_44":327,"_32":328,"_30":329,"_143":319,"_42":43,"_41":330,"_145":125,"_39":331,"_13":322,"_34":35,"_36":332,"_24":25,"_149":-5,"_295":333,"_27":334},{"_44":316,"_32":317,"_30":318,"_143":319,"_42":43,"_41":320,"_145":25,"_39":321,"_13":322,"_34":35,"_36":323,"_24":25,"_149":-5,"_295":324,"_27":325},{"_44":187,"_32":188,"_30":189,"_143":-5,"_42":43,"_41":190,"_145":125,"_39":313,"_13":192,"_34":20,"_36":193,"_24":25,"_149":-5,"_295":314,"_27":315},{"_44":181,"_32":182,"_30":183,"_143":-5,"_42":43,"_41":184,"_145":25,"_39":310,"_13":171,"_34":20,"_36":179,"_24":25,"_149":-5,"_295":311,"_27":312},{"_44":174,"_32":175,"_30":176,"_143":-5,"_42":43,"_41":177,"_145":25,"_39":307,"_13":163,"_34":20,"_36":179,"_24":25,"_149":-5,"_295":308,"_27":309},{"_44":166,"_32":167,"_30":168,"_143":-5,"_42":43,"_41":169,"_145":25,"_39":304,"_13":171,"_34":20,"_36":172,"_24":25,"_149":-5,"_295":305,"_27":306},{"_44":158,"_32":159,"_30":160,"_143":-5,"_42":43,"_41":161,"_145":25,"_39":301,"_13":163,"_34":20,"_36":164,"_24":25,"_149":-5,"_295":302,"_27":303},{"_44":151,"_32":152,"_30":153,"_143":-5,"_42":43,"_41":154,"_145":125,"_39":298,"_13":147,"_34":20,"_36":156,"_24":25,"_149":-5,"_295":299,"_27":300},{"_44":140,"_32":141,"_30":142,"_143":-5,"_42":43,"_41":144,"_145":25,"_39":294,"_13":147,"_34":35,"_36":148,"_24":25,"_149":-5,"_295":296,"_27":297},["D",1784060340649],"children",[],[141],["D",1784059569607],[],[152],["D",1784058612287],[],[159],["D",1784058609130],[],[167],["D",1784059571651],[],[175],["D",1784059571548],[],[182],["D",1781805649048],[],[188],"5ebf4750-ae58-4959-955e-6a7b3bab1b83","variants.ts","92020682-6b52-11f1-80b8-1607ee4eb77e","56dc5a24-6b54-11f1-9b1d-1607ee4eb77e",210,["D",1784058612975],2,"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 base?: string;\n variants?: V;\n defaultVariants?: Selection;\n}) {\n return (props: Selection & { className?: string } = {}): string => {\n const { className, ...selected } = props;\n const classes: string[] = [];\n if (config.base) classes.push(config.base);\n if (config.variants) {\n for (const key in config.variants) {\n const chosen = (selected as Selection)[key] ??\n config.defaultVariants?.[key];\n if (chosen != null) {\n const cls = config.variants[key][chosen as string];\n if (cls) classes.push(cls);\n }\n }\n }\n return cn(...classes, className);\n };\n}\n",[],[196,326,317],"utils","33c08f5a-4737-462a-a6c8-7f544fc943d7","cn.ts","91f4e2d6-6b52-11f1-a883-1607ee4eb77e",208,["D",1784058612720],"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 return twMerge(clsx(inputs));\n}\n",[],[196,326,328],"14b26de5-d175-4ba4-8abe-7f94001d8ac4",48,["D",1781814540380],[285,286],[196,326],"2c3691eb-0ca3-412d-ab7a-3af5d551cf2d","tw.ts","92125ad2-6b52-11f1-8a2f-1607ee4eb77e","56fb5e2e-6b54-11f1-95d4-1607ee4eb77e",215,["D",1784058613304],"/**\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 | \"base\"\n | \"elevated\"\n | \"recessed\"\n | \"fg\"\n | \"fg-muted\"\n | \"line\"\n | \"hairline\"\n | \"accent\"\n | \"accent-fg\"\n | \"accent-ring\"\n | \"accent-text\"\n | \"danger\"\n | \"danger-fg\"\n | \"success\"\n | \"success-fg\";\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 `${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 bg: (t: ColorToken, on?: State) => color(\"bg\", t, on),\n text: (t: ColorToken, on?: State) => color(\"text\", t, on),\n border: (t: ColorToken, on?: State) => color(\"border\", t, on),\n ring: (t: ColorToken, on?: State) => color(\"ring\", t, on),\n ringOffset: (t: ColorToken, on?: State) => color(\"ring-offset\", t, on),\n /** border-radius token (a length — no `color:` hint needed) */\n radius: \"rounded-[var(--kyla-radius)]\",\n} as const;\n",[],[196,349,341],"theme","079d89c0-a9d9-4ba9-aa6b-d3a7b92f55b5","tokens_test.ts","e650bcd8-7b38-11f1-a19c-1607ee4eb77e",212,["D",1784058613153],"/**\n * The repo's first test harness — the load-bearing AA-contrast guarantee.\n *\n * It parses the token stylesheet, enumerates every *sanctioned* foreground /\n * surface pairing, and asserts each meets its WCAG AA threshold in **both** light\n * and dark mode. A future palette edit that breaks contrast fails here rather than\n * shipping. Kept a plain `deno test` so later scale slices reuse the pattern.\n */\nimport { assert, assertAlmostEquals } from \"jsr:@std/assert@1\";\nimport { contrastRatio } from \"./contrast.ts\";\nimport { tokenCSS } from \"./tokens.ts\";\n\ntype Mode = \"light\" | \"dark\";\ntype Palette = Record>;\n\n/** Parse `--kyla-NAME: light-dark(, );` declarations into a palette. */\nfunction parsePalette(css: string): Palette {\n const re =\n /--kyla-([\\w-]+):\\s*light-dark\$\\s*(#[0-9a-fA-F]{3,6})\\s*,\\s*(#[0-9a-fA-F]{3,6})\\s*\$/g;\n const palette: Palette = {};\n for (const [, name, light, dark] of css.matchAll(re)) {\n palette[name] = { light, dark };\n }\n return palette;\n}\n\nconst palette = parsePalette(tokenCSS);\nconst MODES: Mode[] = [\"light\", \"dark\"];\n\n// WCAG AA: 4.5:1 for body text. Every sanctioned pairing here is text-on-surface.\nconst AA_BODY = 4.5;\n\n/**\n * The sanctioned foreground/surface pairings (PRD §Palette): body text and\n * secondary text on every surface, and ink on each colored fill. Anything not\n * listed here is not a promised pairing and is intentionally not asserted.\n */\nconst SURFACES = [\"base\", \"elevated\", \"recessed\"] as const;\nconst PAIRINGS: Array<{ fg: string; bg: string; min: number }> = [\n ...SURFACES.map((bg) => ({ fg: \"fg\", bg, min: AA_BODY })),\n ...SURFACES.map((bg) => ({ fg: \"fg-muted\", bg, min: AA_BODY })),\n { fg: \"accent-fg\", bg: \"accent\", min: AA_BODY },\n { fg: \"danger-fg\", bg: \"danger\", min: AA_BODY },\n { fg: \"success-fg\", bg: \"success\", min: AA_BODY },\n];\n\nDeno.test(\"contrastRatio returns the correct WCAG ratio for known pairs\", () => {\n assertAlmostEquals(contrastRatio(\"#000000\", \"#ffffff\"), 21, 0.05);\n assertAlmostEquals(contrastRatio(\"#ffffff\", \"#ffffff\"), 1, 0.001);\n // #767676 on white is the canonical WCAG AA boundary example (~4.54:1).\n assertAlmostEquals(contrastRatio(\"#767676\", \"#ffffff\"), 4.54, 0.05);\n // Order-independent.\n assertAlmostEquals(\n contrastRatio(\"#052f4a\", \"#00bcff\"),\n contrastRatio(\"#00bcff\", \"#052f4a\"),\n 0.001,\n );\n});\n\nDeno.test(\"every sanctioned fg/surface pairing meets AA in both modes\", () => {\n for (const mode of MODES) {\n for (const { fg, bg, min } of PAIRINGS) {\n assert(palette[fg], `missing token --kyla-${fg}`);\n assert(palette[bg], `missing token --kyla-${bg}`);\n const ratio = contrastRatio(palette[fg][mode], palette[bg][mode]);\n assert(\n ratio >= min,\n `${fg} on ${bg} (${mode}) is ${ratio.toFixed(2)}:1, below AA ${min}:1`,\n );\n }\n }\n});\n\nDeno.test(\"palette expands the color vocabulary with the new semantic tokens\", () => {\n for (\n const name of [\n \"accent-ring\",\n \"accent-text\",\n \"danger-fg\",\n \"success\",\n \"success-fg\",\n ]\n ) {\n assert(palette[name], `expected --kyla-${name} in the token stylesheet`);\n }\n});\n\nDeno.test(\"dark-mode base uses the sanctioned slate-950 softening, not true black\", () => {\n assert(palette.base, \"missing --kyla-base\");\n assertEqualsHex(palette.base.dark, \"#020618\");\n assert(\n palette.base.dark.toLowerCase() !== \"#000000\",\n \"dark base must be softened slate-950, not true black\",\n );\n});\n\nfunction assertEqualsHex(actual: string, expected: string): void {\n assert(\n actual.toLowerCase() === expected.toLowerCase(),\n `expected ${expected}, got ${actual}`,\n );\n}\n",[],[196,349,351],"094ad873-f39f-4d8f-b4d4-7fc1c811ebf5","tokens.ts","920ac18c-6b52-11f1-a416-1607ee4eb77e",160,["D",1783577301432],6,"/**\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 * Palette: the real Val Town values, ported (not invented) from the VT UI style\n * guide and AA-verified in both modes (ADR-0005; see\n * docs/reference/val-town-style-guide.md §6–§7). The AA guarantee is enforced by\n * tokens_test.ts — a pairing that regresses fails the suite. The one sanctioned\n * deviation from VT is the dark-mode `base`: `slate-950 #020618`, a deliberate\n * softening of VT's true-black `#000` to cut glare.\n *\n * NOTE: the spacing, graduated-radius, and type scales are still provisional /\n * pending — see slices 02–03 of the `structural-scales-palette` PRD under\n * docs/issues/. `--kyla-radius` below is the provisional base until slice 02.\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(#ffffff, #020618);\n --kyla-elevated: light-dark(#ffffff, #0f172b);\n --kyla-recessed: light-dark(#f1f5f9, #1d293d);\n\n /* foreground */\n --kyla-fg: light-dark(#000000, #ffffff);\n --kyla-fg-muted: light-dark(#4a5565, #d1d5dc);\n\n /* borders */\n --kyla-line: light-dark(#e2e8f0, #314158);\n --kyla-hairline: light-dark(#f1f5f9, #1d293d);\n\n /* accent */\n --kyla-accent: light-dark(#00bcff, #0069a8);\n --kyla-accent-fg: light-dark(#052f4a, #ffffff);\n --kyla-accent-ring: light-dark(#00a6f4, #00a6f4);\n --kyla-accent-text: light-dark(#00598a, #b8e6fe);\n\n /* status — danger / success */\n --kyla-danger: light-dark(#ffa1ad, #a50036);\n --kyla-danger-fg: light-dark(#4d0218, #ffffff);\n --kyla-success: light-dark(#00d492, #007a55);\n --kyla-success-fg: light-dark(#002c22, #ffffff);\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",[],[196,349,359],"cf4d662e-41d8-4717-8376-4b45710d239d","provider.tsx","92200010-6b52-11f1-80b8-1607ee4eb77e",214,["D",1784058613306],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n createContext,\n useContext,\n useEffect,\n useState,\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 mode: \"system\",\n setMode: () => {},\n});\n\nexport function useKylaMode() {\n return useContext(ModeContext);\n}\n\nconst TOKENS_ID = \"kyla-tokens\";\n\nexport function KylaProvider({\n children,\n defaultMode = \"system\",\n}: {\n children: React.ReactNode;\n defaultMode?: Mode;\n}) {\n const [mode, setMode] = useState(defaultMode);\n\n // Inject the token stylesheet once. Idempotent: guards against double-inject.\n useEffect(() => {\n if (document.getElementById(TOKENS_ID)) return;\n const style = document.createElement(\"style\");\n style.id = TOKENS_ID;\n style.textContent = tokenCSS;\n document.head.appendChild(style);\n }, []);\n\n // Reflect Mode onto the document so `data-mode` selectors take effect.\n useEffect(() => {\n document.documentElement.setAttribute(\"data-mode\", mode);\n }, [mode]);\n\n return (\n \n {children}\n \n );\n}\n",[],[196,349,368],"8d4dc0bf-f133-42f5-9cde-dd3ce6ec7cf1","contrast.ts","e6508772-7b38-11f1-a19c-1607ee4eb77e",213,["D",1784058613115],"/**\n * Pure WCAG contrast utilities over resolved sRGB colors — no DOM, no browser.\n *\n * This is the natural seam for the palette's AA guarantee: \"AA holds\" is a\n * property of the resolved color values, computable without a browser. The token\n * stylesheet resolves each semantic token to a concrete hex per mode (via\n * `light-dark()`); these helpers turn those hexes into WCAG contrast ratios so a\n * test can assert every sanctioned foreground/surface pairing stays legible.\n */\n\n/** An sRGB color as integer channels in the range 0–255. */\nexport type RGB = [r: number, g: number, b: number];\n\n/** Parse a `#rgb` or `#rrggbb` hex string into sRGB channels (0–255). */\nexport function parseHex(hex: string): RGB {\n const h = hex.trim().replace(/^#/, \"\");\n const full = h.length === 3\n ? h\n .split(\"\")\n .map((c) => c + c)\n .join(\"\")\n : h;\n if (!/^[0-9a-fA-F]{6}$/.test(full)) {\n throw new Error(`Invalid hex color: ${hex}`);\n }\n return [\n parseInt(full.slice(0, 2), 16),\n parseInt(full.slice(2, 4), 16),\n parseInt(full.slice(4, 6), 16),\n ];\n}\n\n/** WCAG relative luminance of an sRGB color (0 = black, 1 = white). */\nexport function relativeLuminance([r, g, b]: RGB): number {\n const linear = (channel: number): number => {\n const s = channel / 255;\n return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n };\n return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);\n}\n\n/**\n * WCAG contrast ratio between two colors (hex strings), in the range 1–21.\n * Order-independent: `contrastRatio(a, b) === contrastRatio(b, a)`.\n */\nexport function contrastRatio(a: string, b: string): number {\n const la = relativeLuminance(parseHex(a));\n const lb = relativeLuminance(parseHex(b));\n const lighter = Math.max(la, lb);\n const darker = Math.min(la, lb);\n return (lighter + 0.05) / (darker + 0.05);\n}\n",[],[196,349,376],"05fe2e2c-2444-41d7-938d-50483f27ebd6",50,["D",1781814540580],[279,280,281,282,283],[196,349],"278379df-c00a-4e96-93e8-af9b17a6b783","button.tsx","8569cf08-6b53-11f1-a668-1607ee4eb77e","56eb3bb6-6b54-11f1-95d4-1607ee4eb77e",211,["D",1784058613060],"/** @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 · v253