[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_789":790,"_791":792},"routes/_app.x.$handle.$name",{"_99":98,"_33":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,"_33":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",198,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":20,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_31":32,"_33":34,"_35":20,"_36":37},"deleted",false,"deletedHere","path","docs/issues/structural-scales-palette/PRD.md","latestPath","docs/issues/structural-scales-palette/spec.md","fileId","45dcb4a0-798a-11f1-9f6a-1607ee4eb77e","name","PRD.md","fileType","content","# PRD: Structural scales & real palette\n\nStatus: ready-for-agent Labels: ready-for-agent\n\n> The highest-leverage item on the [roadmap](../../roadmap.md): the spacing /\n> radius / type scale is where visual consistency actually lives. This PRD turns\n> the provisional token stylesheet into a real, fixed structural foundation. It\n> is the prerequisite for the [v1 component set](../v1-component-set/PRD.md).\n\n## Problem Statement\n\nKylä's whole promise is that apps look coherent by default. But today the token\nsystem only ships semantic **color** tokens with _provisional_ hex values, plus\na single `--kyla-radius`. There is no spacing scale, no type scale, and no\ngraduated radius scale, and the palette has never been checked for AA contrast.\n\nThe consequence is already visible: the preview page hand-writes `px-4 py-2`,\n`text-lg`, `gap-6`, `mt-5`, `text-[10px]` — raw Twind numbers chosen ad hoc.\nEvery component built this way re-decides spacing and type independently, which\nis exactly the inconsistency Kylä exists to eliminate. Consumers who trust the\ndefault theme also have no guarantee that foreground/background pairings are\nlegible.\n\n## Solution\n\nShip a real, opinionated, **fixed** set of structural scales — spacing, radius,\nand type (size + line-height, with the font family and any needed weights) —\nplus a real, AA-verified color palette bound to the existing semantic tokens.\nBecause the structural scales are fixed and consumed by every component, spacing\nand type become consistent by construction. The consumer override surface stays\ndeliberately small (`--kyla-accent`, `--kyla-radius`, `--kyla-font`); everything\nstructural stays fixed — that fixedness _is_ the consistency (ADR-0001,\nCONTEXT.md).\n\nThe default palette carries AA contrast as a quiet guarantee (ADR-0003),\nverified mechanically rather than by eye.\n\n## User Stories\n\n1. As a consumer, I want a fixed spacing scale exposed as tokens, so that\n padding and gaps are consistent across every component and every app without\n me choosing pixel values.\n2. As a consumer, I want a fixed type scale (size + line-height), so that text\n hierarchy is coherent without me hand-picking `text-*` classes.\n3. As a consumer, I want a font-family token I can override, so that I can\n express brand while keeping the rest of the system fixed.\n4. As a consumer, I want a graduated radius scale derived from the overridable\n `--kyla-radius`, so that rounding stays proportional when I change the base\n radius.\n5. As a consumer, I want the default palette to meet WCAG AA contrast in both\n light and dark mode, so that my app is legible without me auditing colors.\n6. As a consumer, I want the small override surface (accent, radius, font) to be\n documented and stable, so that I know exactly what I may safely redefine.\n7. As a consumer, I want structural tokens (spacing, type, surfaces, borders) to\n stay fixed, so that I cannot accidentally break visual consistency by\n overriding them.\n8. As a component author, I want a sanctioned, typed way to reference scale\n tokens, so that I compose spacing and type from the scale instead of raw\n Twind numbers.\n9. As a component author, I want the scale accessors to sit alongside the\n existing `tw` color helpers, so that authoring one component uses one\n consistent vocabulary.\n10. As a component author, I want the type scale to bundle line-height with\n size, so that I cannot set a size without its intended leading.\n11. As a maintainer, I want the palette's AA guarantee enforced by a test, so\n that a future palette edit that breaks contrast fails CI rather than\n shipping.\n12. As a maintainer, I want the scale definitions to live in one place\n (`tokens.ts`), so that the design foundation has a single source of truth.\n13. As a maintainer, I want the scales expressed as CSS custom properties\n resolved with `light-dark()` where mode-dependent, so that mode still flips\n with zero JS.\n14. As an end user, I want legible text and comfortable spacing in whatever mode\n my OS prefers, so that the app is usable by default.\n15. As a consumer upgrading, I want the scale token _names_ to be stable, so\n that a Release that retunes values doesn't break my component usage.\n\n## Implementation Decisions\n\n- **Source of values (ADR-0005):** the palette and structural scales **conform\n to the Val Town UI style guide** — they are _ported_, not invented here.\n Concrete values come from the VT style-guide research/reference doc under\n `docs/` (see\n [ADR-0005](../../adr/0005-val-town-visual-language-default-theme.md)). This\n PRD's job is to bind those values to the `--kyla-*` tokens and the scale\n accessors, and to hold the AA line where a VT pairing falls short.\n- **Resolved default values** (from\n [`val-town-style-guide.md`](../../reference/val-town-style-guide.md) §6; all\n AA-passing both modes). Values are Tailwind v4 steps, applied via\n `light-dark(light, dark)`:\n - `base` = white / **`slate-950` `#020618`** (a deliberate softening of VT's\n true-black `#000` — see ADR-0005); `elevated` = white+shadow / `slate-900`;\n `recessed` = `slate-100` / `slate-800`.\n - `fg` = black / white; `fg-muted` = `gray-600` / `gray-300` (VT's literal\n `--color-muted`; **not** slate-400, which fails AA).\n - `line` = `slate-200` / `slate-700`; `hairline` = `slate-100` / `slate-800`.\n - `accent` = `sky-400` / `sky-700`; `accent-fg` = **`sky-950` ink** / white\n (never white on `sky-400` — fails at 2.18:1); `accent-ring` = `sky-500`;\n `accent-text` = `sky-800` / `sky-200`.\n - `danger` = `rose-300` / `rose-800`; `danger-fg` = `rose-950` / white.\n `success` = `emerald-400` / `emerald-700`; `success-fg` = `emerald-950` /\n white.\n - `radius` (base) = **8px** (`rounded-lg`); spacing base = 4px; font =\n `\"IBM Plex Sans\",\n-apple-system, sans-serif` (needs shell/Provider font\n loading — flag for delivery).\n- **New tokens (ADR-0005):** this PRD adds `accent-ring`, `accent-text`,\n `danger-fg`, `success`, `success-fg` to the `ColorToken` union and the token\n stylesheet, alongside the existing set. All are structural (not part of the\n override surface).\n- **Modules touched:** `src/theme/tokens.ts` (add scale custom properties) and\n `src/theme/tw.ts` (add typed scale accessors alongside the existing color\n helpers). A new pure module for the AA-contrast check (used by tests) may be\n added under `src/theme/`.\n- **Scale tokens to define** (names fixed by this PRD; exact numeric values are\n the design deliverable _within_ this PRD):\n - **Spacing:** a fixed stepped scale, `--kyla-space-*`. Monotonic, small step\n count, built on a consistent base unit.\n - **Type:** `--kyla-text-*` steps, each carrying a size **and** a line-height,\n plus `--kyla-font` (overridable) and weight tokens if components need them.\n - **Radius:** keep `--kyla-radius` as the single overridable base; derive a\n small graduated set (`--kyla-radius-sm/md/lg`) from it.\n- **Override surface (formalized):** consumer-overridable = `--kyla-accent`,\n `--kyla-radius`, `--kyla-font` (and their direct derivations). Everything else\n — surfaces, foreground, borders, spacing scale, type scale — is structural and\n stays fixed. Document this split in `tokens.ts` and CONTEXT.md's Override\n Surface note.\n- **Accessor shape:** scale accessors follow the `tw.*` pattern. Lengths need no\n `color:` hint (per the spike finding, only colors do), so spacing/radius/type\n accessors emit bare arbitrary-value classes (e.g. `p-[var(--kyla-space-4)]`),\n while a typo in the step is a compile error via a TypeScript union — mirroring\n how `ColorToken` already guards color tokens.\n- **Palette:** replace every provisional hex with the resolved VT value above\n for both modes, keeping the `light-dark()` structure. Every _sanctioned_\n foreground/ surface pairing (`fg` on `base`/`elevated`/`recessed`, `accent-fg`\n on `accent`, `danger-fg` on `danger`, `success-fg` on `success`, `fg-muted` on\n surfaces used for secondary text) must meet WCAG AA: 4.5:1 for body text, 3:1\n for large text and UI/border affordances.\n\n## Testing Decisions\n\n- **What makes a good test here:** it asserts an _external guarantee_ of the\n foundation, not a specific hex or pixel. Two guarantees are worth testing:\n contrast and scale integrity.\n- **Seam (highest available):** the token stylesheet string plus a **pure\n contrast function** over resolved color values. This is the natural seam\n because the guarantee (\"AA holds\") is a property of the values, computable\n without a browser.\n - Enumerate every sanctioned fg/surface pairing and assert its computed\n contrast ratio meets the AA threshold in **both** modes. This is the load-\n bearing test — it's what lets a future palette edit fail loudly.\n - Assert the spacing and type scales exist, are monotonic, and expose the\n documented step count.\n - Assert the override tokens (`--kyla-accent`, `--kyla-radius`, `--kyla-font`)\n are present and that structural tokens are present.\n- **Modules tested:** `tokens.ts` (via the parsed stylesheet) and the contrast\n helper.\n- **Prior art:** none — this PRD establishes the repo's first test harness. Keep\n it a plain Deno test so later component PRDs can reuse the pattern.\n\n## Out of Scope\n\n- The Kumo-style **named-theme system** / multiple consumer-defined themes\n (theming v2 — deferred by the sketch).\n- Per-component **variant → token maps** (which tones `Badge`/`Button` expose,\n etc.) — that lives with the\n [v1 component set PRD](../v1-component-set/PRD.md).\n- Any new components.\n- Dark-mode raster image handling.\n\n## Further Notes\n\n- This PRD front-loads a genuine design decision (the actual step counts,\n ratios, and hex values). Those choices should be made here and encoded as the\n token values; downstream PRDs consume them by name and must not re-decide\n them.\n- Because scale token _names_ become load-bearing across the component set,\n treat a rename as a breaking change under ADR-0004 once components depend on\n them.","# PRD: Structural scales & real palette\n\nStatus: ready-for-agent Labels: ready-for-agent\n\n> The highest-leverage item on the [roadmap](../../roadmap.md): the spacing /\n> radius / type scale is where visual consistency actually lives. This PRD turns\n> the provisional token stylesheet into a real, fixed structural foundation. It\n> is the prerequisite for the [v1 component set](../v1-component-set/PRD.md).\n\n## Problem Statement\n\nKylä's whole promise is that apps look coherent by default. But today the token\nsystem only ships semantic **color** tokens with _provisional_ hex values, plus\na single `--kyla-radius`. There is no spacing scale, no type scale, and no\ngraduated radius scale, and the palette has never been checked for AA contrast.\n\nThe consequence is already visible: the preview page hand-writes `px-4 py-2`,\n`text-lg`, `gap-6`, `mt-5`, `text-[10px]` — raw Twind numbers chosen ad hoc.\nEvery component built this way re-decides spacing and type independently, which\nis exactly the inconsistency Kylä exists to eliminate. Consumers who trust the\ndefault theme also have no guarantee that foreground/background pairings are\nlegible.\n\n## Solution\n\nShip a real, opinionated, **fixed** set of structural scales — spacing, radius,\nand type (size + line-height, with the font family and any needed weights) —\nplus a real, AA-verified color palette bound to the existing semantic tokens.\nBecause the structural scales are fixed and consumed by every component, spacing\nand type become consistent by construction. The consumer override surface stays\ndeliberately small (`--kyla-accent`, `--kyla-radius`, `--kyla-font`); everything\nstructural stays fixed — that fixedness _is_ the consistency (ADR-0001,\nCONTEXT.md).\n\nThe default palette carries AA contrast as a quiet guarantee (ADR-0003),\nverified mechanically rather than by eye.\n\n## User Stories\n\n1. As a consumer, I want a fixed spacing scale exposed as tokens, so that\n padding and gaps are consistent across every component and every app without\n me choosing pixel values.\n2. As a consumer, I want a fixed type scale (size + line-height), so that text\n hierarchy is coherent without me hand-picking `text-*` classes.\n3. As a consumer, I want a font-family token I can override, so that I can\n express brand while keeping the rest of the system fixed.\n4. As a consumer, I want a graduated radius scale derived from the overridable\n `--kyla-radius`, so that rounding stays proportional when I change the base\n radius.\n5. As a consumer, I want the default palette to meet WCAG AA contrast in both\n light and dark mode, so that my app is legible without me auditing colors.\n6. As a consumer, I want the small override surface (accent, radius, font) to be\n documented and stable, so that I know exactly what I may safely redefine.\n7. As a consumer, I want structural tokens (spacing, type, surfaces, borders) to\n stay fixed, so that I cannot accidentally break visual consistency by\n overriding them.\n8. As a component author, I want a sanctioned, typed way to reference scale\n tokens, so that I compose spacing and type from the scale instead of raw\n Twind numbers.\n9. As a component author, I want the scale accessors to sit alongside the\n existing `tw` color helpers, so that authoring one component uses one\n consistent vocabulary.\n10. As a component author, I want the type scale to bundle line-height with\n size, so that I cannot set a size without its intended leading.\n11. As a maintainer, I want the palette's AA guarantee enforced by a test, so\n that a future palette edit that breaks contrast fails CI rather than\n shipping.\n12. As a maintainer, I want the scale definitions to live in one place\n (`tokens.ts`), so that the design foundation has a single source of truth.\n13. As a maintainer, I want the scales expressed as CSS custom properties\n resolved with `light-dark()` where mode-dependent, so that mode still flips\n with zero JS.\n14. As an end user, I want legible text and comfortable spacing in whatever mode\n my OS prefers, so that the app is usable by default.\n15. As a consumer upgrading, I want the scale token _names_ to be stable, so\n that a Release that retunes values doesn't break my component usage.\n\n## Implementation Decisions\n\n- **Source of values (ADR-0005):** the palette and structural scales **conform\n to the Val Town UI style guide** — they are _ported_, not invented here.\n Concrete values come from the VT style-guide research/reference doc under\n `docs/` (see\n [ADR-0005](../../adr/0005-val-town-visual-language-default-theme.md)). This\n PRD's job is to bind those values to the `--kyla-*` tokens and the scale\n accessors, and to hold the AA line where a VT pairing falls short.\n- **Resolved default values** (from\n [`val-town-style-guide.md`](../../reference/val-town-style-guide.md) §6; all\n AA-passing both modes). Values are Tailwind v4 steps, applied via\n `light-dark(light, dark)`:\n - `base` = white / **`slate-950` `#020618`** (a deliberate softening of VT's\n true-black `#000` — see ADR-0005); `elevated` = white+shadow / `slate-900`;\n `recessed` = `slate-100` / `slate-800`.\n - `fg` = black / white; `fg-muted` = `gray-600` / `gray-300` (VT's literal\n `--color-muted`; **not** slate-400, which fails AA).\n - `line` = `slate-200` / `slate-700`; `hairline` = `slate-100` / `slate-800`.\n - `accent` = `sky-400` / `sky-700`; `accent-fg` = **`sky-950` ink** / white\n (never white on `sky-400` — fails at 2.18:1); `accent-ring` = `sky-500`;\n `accent-text` = `sky-800` / `sky-200`.\n - `danger` = `rose-300` / `rose-800`; `danger-fg` = `rose-950` / white.\n `success` = `emerald-400` / `emerald-700`; `success-fg` = `emerald-950` /\n white.\n - `radius` (base) = **8px** (`rounded-lg`); spacing base = 4px; font =\n `\"IBM Plex Sans\",\n-apple-system, sans-serif` (needs shell/Provider font\n loading — flag for delivery).\n- **New tokens (ADR-0005):** this PRD adds `accent-ring`, `accent-text`,\n `danger-fg`, `success`, `success-fg` to the `ColorToken` union and the token\n stylesheet, alongside the existing set. All are structural (not part of the\n override surface).\n- **Modules touched:** `src/theme/tokens.ts` (add scale custom properties) and\n `src/theme/tw.ts` (add typed scale accessors alongside the existing color\n helpers). A new pure module for the AA-contrast check (used by tests) may be\n added under `src/theme/`.\n- **Scale tokens to define** (names fixed by this PRD; exact numeric values are\n the design deliverable _within_ this PRD):\n - **Spacing:** a fixed stepped scale, `--kyla-space-*`. Monotonic, small step\n count, built on a consistent base unit.\n - **Type:** `--kyla-text-*` steps, each carrying a size **and** a line-height,\n plus `--kyla-font` (overridable) and weight tokens if components need them.\n - **Radius:** keep `--kyla-radius` as the single overridable base; derive a\n small graduated set (`--kyla-radius-sm/md/lg`) from it.\n- **Override surface (formalized):** consumer-overridable = `--kyla-accent`,\n `--kyla-radius`, `--kyla-font` (and their direct derivations). Everything else\n — surfaces, foreground, borders, spacing scale, type scale — is structural and\n stays fixed. Document this split in `tokens.ts` and CONTEXT.md's Override\n Surface note.\n- **Accessor shape:** scale accessors follow the `tw.*` pattern. Lengths need no\n `color:` hint (per the spike finding, only colors do), so spacing/radius/type\n accessors emit bare arbitrary-value classes (e.g. `p-[var(--kyla-space-4)]`),\n while a typo in the step is a compile error via a TypeScript union — mirroring\n how `ColorToken` already guards color tokens.\n- **Palette:** replace every provisional hex with the resolved VT value above\n for both modes, keeping the `light-dark()` structure. Every _sanctioned_\n foreground/ surface pairing (`fg` on `base`/`elevated`/`recessed`, `accent-fg`\n on `accent`, `danger-fg` on `danger`, `success-fg` on `success`, `fg-muted` on\n surfaces used for secondary text) must meet WCAG AA: 4.5:1 for body text, 3:1\n for large text and UI/border affordances.\n\n## Testing Decisions\n\n- **What makes a good test here:** it asserts an _external guarantee_ of the\n foundation, not a specific hex or pixel. Two guarantees are worth testing:\n contrast and scale integrity.\n- **Seam (highest available):** the token stylesheet string plus a **pure\n contrast function** over resolved color values. This is the natural seam\n because the guarantee (\"AA holds\") is a property of the values, computable\n without a browser.\n - Enumerate every sanctioned fg/surface pairing and assert its computed\n contrast ratio meets the AA threshold in **both** modes. This is the load-\n bearing test — it's what lets a future palette edit fail loudly.\n - Assert the spacing and type scales exist, are monotonic, and expose the\n documented step count.\n - Assert the override tokens (`--kyla-accent`, `--kyla-radius`, `--kyla-font`)\n are present and that structural tokens are present.\n- **Modules tested:** `tokens.ts` (via the parsed stylesheet) and the contrast\n helper.\n- **Prior art:** none — this PRD establishes the repo's first test harness. Keep\n it a plain Deno test so later component PRDs can reuse the pattern.\n\n## Out of Scope\n\n- The Kumo-style **named-theme system** / multiple consumer-defined themes\n (theming v2 — deferred by the sketch).\n- Per-component **variant → token maps** (which tones `Badge`/`Button` expose,\n etc.) — that lives with the\n [v1 component set PRD](../v1-component-set/PRD.md).\n- Any new components.\n- Dark-mode raster image handling.\n\n## Further Notes\n\n- This PRD front-loads a genuine design decision (the actual step counts,\n ratios, and hex values). Those choices should be made here and encoded as the\n token values; downstream PRDs consume them by name and must not re-decide\n them.\n- Because scale token _names_ become load-bearing across the component set,\n treat a rename as a breaking change under ADR-0004 once components depend on\n them.\n","createdAt",["D",1784058611514],"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",1789701064442],"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,"_33":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,"_33":46,"_39":784,"_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":785,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":786,"_83":787,"_85":788,"_87":25},"tree",[234,281,285,297,298,299,300,301,302,303,304],"files",[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,294,295,296,297,298,299,300,301,302,303,304],"counts",{"_223":62,"_224":225,"_226":201,"_227":228,"_229":230},"contents",[130,131,132,133,134,135,136,137,138,139,140],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":217,"_33":218,"_31":219,"_144":-5,"_42":43,"_41":220,"_146":125,"_39":221,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_27":222},{"_44":211,"_33":212,"_31":213,"_144":-5,"_42":43,"_41":214,"_146":125,"_39":215,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_27":216},{"_44":204,"_33":205,"_31":206,"_144":-5,"_42":43,"_41":207,"_146":125,"_39":208,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_27":210},{"_44":196,"_33":197,"_31":198,"_144":-5,"_42":43,"_41":199,"_146":125,"_39":200,"_13":201,"_35":20,"_36":202,"_24":25,"_151":-5,"_27":203},{"_44":191,"_33":192,"_31":193,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":194,"_13":158,"_35":20,"_36":189,"_24":25,"_151":-5,"_27":195},{"_44":184,"_33":185,"_31":186,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":188,"_13":181,"_35":20,"_36":189,"_24":25,"_151":-5,"_27":190},{"_44":176,"_33":177,"_31":178,"_144":-5,"_42":43,"_41":179,"_146":25,"_39":180,"_13":181,"_35":20,"_36":182,"_24":25,"_151":-5,"_27":183},{"_44":168,"_33":169,"_31":170,"_144":-5,"_42":43,"_41":171,"_146":25,"_39":172,"_13":173,"_35":20,"_36":174,"_24":25,"_151":-5,"_27":175},{"_44":161,"_33":162,"_31":163,"_144":-5,"_42":43,"_41":164,"_146":25,"_39":165,"_13":148,"_35":20,"_36":166,"_24":25,"_151":-5,"_27":167},{"_44":153,"_33":154,"_31":155,"_144":-5,"_42":43,"_41":156,"_146":25,"_39":157,"_13":158,"_35":20,"_36":159,"_24":25,"_151":-5,"_27":160},{"_44":141,"_33":142,"_31":143,"_144":-5,"_42":43,"_41":145,"_146":25,"_39":147,"_13":148,"_35":149,"_36":150,"_24":25,"_151":-5,"_27":152},"c704bd8b-1c4c-434f-83f7-34691d4f1cd1","mod.ts","92255786-6b52-11f1-8262-1607ee4eb77e","parentId",55,"latest",["D",1781814540942],2,"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",[142],"3cfe5449-3990-4a8d-a099-ee27f7919b37","deno.json","47d67822-6b3e-11f1-bad1-1607ee4eb77e",173,["D",1784058609134],3,"{\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 \"lint\": {\n \"include\": [\"*.ts\", \"*.tsx\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-import-prefix\"]\n }\n },\n \"tasks\": {\n \"typecheck\": \"VAL_TOWN_API_KEY=test deno check --allow-import=esm.town,www.val.town,esm.sh,jsr.io main.ts mod.ts api.ts app.tsx components.tsx ui.tsx layout.tsx theme.ts db.ts api_test.ts app_test.tsx db_test.ts\",\n \"test\": \"VAL_TOWN_API_KEY=test deno test --allow-env=VAL_TOWN_API_KEY --allow-import=esm.town,www.val.town,esm.sh,jsr.io\",\n \"check\": \"deno fmt && deno lint && deno task typecheck && deno task test\"\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}\n",[154],"d8e741db-12c6-4dac-9af8-bf72beb8a863","biome.json","47e1e748-6b3e-11f1-8b36-1607ee4eb77e",171,["D",1783577438960],"{\n\t\"$schema\": \"https://biomejs.dev/schemas/2.5.2/schema.json\",\n\t\"vcs\": {\n\t\t\"enabled\": false,\n\t\t\"clientKind\": \"git\",\n\t\t\"useIgnoreFile\": false\n\t},\n\t\"files\": {\n\t\t\"ignoreUnknown\": false\n\t},\n\t\"formatter\": {\n\t\t\"enabled\": true,\n\t\t\"indentStyle\": \"tab\"\n\t},\n\t\"linter\": {\n\t\t\"enabled\": true,\n\t\t\"rules\": {\n\t\t\t\"preset\": \"recommended\"\n\t\t}\n\t},\n\t\"javascript\": {\n\t\t\"formatter\": {\n\t\t\t\"quoteStyle\": \"double\"\n\t\t}\n\t},\n\t\"assist\": {\n\t\t\"enabled\": true,\n\t\t\"actions\": {\n\t\t\t\"source\": {\n\t\t\t\t\"organizeImports\": \"on\"\n\t\t\t}\n\t\t}\n\t}\n}\n",[162],"399b091b-4f55-485d-9ec9-ff6e0c5c1552","README.md","ec9dd180-6b3d-11f1-89a3-1607ee4eb77e",152,["D",1783561973686],6,"# 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 \tButton,\n \tKylaProvider,\n } from \"https://esm.town/v/nbbaier/kyla-ui/mod.ts\";\n\n export function App() {\n \treturn (\n \t\t\n \t\t\t\n \t\t\n \t);\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`.",[169],"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",[177],"ccde65f9-115b-4709-bfa3-05a6dac23ef1","CLAUDE.md","a53286c6-775c-11f1-abf2-1607ee4eb77e",172,["D",1783578006344],"## Working on changes\n\nDevelopment happens on a Val Town **val branch**, never directly on `main`. `main`\nis the stable release line — HEAD-of-`main` is always a Release (a concrete\n`?v=NNN`), so raw work never lands on it. Branch off `main`, do the work on the\nbranch, and land it by merging the branch into `main`, which cuts the next Release.\nSee [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/**` (PRDs, ADRs, roadmap, reference docs) carry no code/version surface, so\nthey 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 PRDs live as local markdown files under `docs/issues//`; 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",[185],"ab928d9f-8e30-48d8-8ee6-78f970500c61","AGENTS.md","9b865e5e-7770-11f1-b136-1607ee4eb77e",["D",1783578006344],[192],"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",[197],"da3f4f02-c070-4df1-9bc5-96c25fc6eefd","src","91e38b30-6b52-11f1-bb7a-1607ee4eb77e",28,["D",1781813780417],"directory",[205],"aac8fba5-9942-4296-93bc-56339f5fdbb7","preview","019f397a-0ad7-770b-b0dd-ab97f904224e",78,["D",1783375727322],[212],"61b715f9-32d9-45da-bff6-008ae80a2386","docs","bc8b0c5c-6b46-11f1-aeb1-1607ee4eb77e",14,["D",1781808698019],[218],"pulls","branches",7,"forks","envVars",{"_231":62,"_233":62},"connections",{"_231":62,"_232":62},"count","unfilledCount","emptyCount",{"_44":217,"_33":218,"_31":219,"_144":-5,"_42":43,"_41":220,"_146":125,"_39":781,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":782,"_27":783},{"_44":776,"_33":743,"_31":737,"_144":219,"_42":43,"_41":777,"_146":125,"_39":778,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":779,"_27":780},{"_44":768,"_33":769,"_31":770,"_144":737,"_42":43,"_41":771,"_146":125,"_39":772,"_13":158,"_35":20,"_36":773,"_24":25,"_151":-5,"_306":774,"_27":775},{"_44":760,"_33":761,"_31":762,"_144":737,"_42":43,"_41":763,"_146":125,"_39":764,"_13":201,"_35":20,"_36":765,"_24":25,"_151":-5,"_306":766,"_27":767},{"_44":752,"_33":753,"_31":754,"_144":737,"_42":43,"_41":755,"_146":125,"_39":756,"_13":201,"_35":20,"_36":757,"_24":25,"_151":-5,"_306":758,"_27":759},{"_44":744,"_33":745,"_31":746,"_144":737,"_42":43,"_41":747,"_146":25,"_39":748,"_13":62,"_35":20,"_36":749,"_24":25,"_151":-5,"_306":750,"_27":751},{"_44":734,"_33":735,"_31":736,"_144":737,"_42":43,"_41":738,"_146":125,"_39":739,"_13":148,"_35":20,"_36":740,"_24":25,"_151":-5,"_306":741,"_27":742},{"_44":729,"_33":712,"_31":706,"_144":219,"_42":43,"_41":730,"_146":125,"_39":731,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":732,"_27":733},{"_44":721,"_33":722,"_31":723,"_144":706,"_42":43,"_41":724,"_146":125,"_39":725,"_13":201,"_35":20,"_36":726,"_24":25,"_151":-5,"_306":727,"_27":728},{"_44":713,"_33":714,"_31":715,"_144":706,"_42":43,"_41":716,"_146":25,"_39":717,"_13":173,"_35":20,"_36":718,"_24":25,"_151":-5,"_306":719,"_27":720},{"_44":703,"_33":704,"_31":705,"_144":706,"_42":43,"_41":707,"_146":125,"_39":708,"_13":158,"_35":20,"_36":709,"_24":25,"_151":-5,"_306":710,"_27":711},{"_44":698,"_33":697,"_31":691,"_144":219,"_42":43,"_41":699,"_146":125,"_39":700,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":701,"_27":702},{"_44":688,"_33":689,"_31":690,"_144":691,"_42":43,"_41":692,"_146":25,"_39":693,"_13":62,"_35":20,"_36":694,"_24":25,"_151":-5,"_306":695,"_27":696},{"_44":683,"_33":470,"_31":512,"_144":219,"_42":43,"_41":684,"_146":125,"_39":685,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":686,"_27":687},{"_44":678,"_33":663,"_31":657,"_144":512,"_42":43,"_41":679,"_146":125,"_39":680,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":681,"_27":682},{"_44":673,"_33":470,"_31":667,"_144":657,"_42":43,"_41":674,"_146":125,"_39":675,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":676,"_27":677},{"_44":664,"_33":665,"_31":666,"_144":667,"_42":43,"_41":668,"_146":25,"_39":669,"_13":201,"_35":20,"_36":670,"_24":25,"_151":-5,"_306":671,"_27":672},{"_44":655,"_33":34,"_31":656,"_144":657,"_42":43,"_41":658,"_146":25,"_39":659,"_13":201,"_35":20,"_36":660,"_24":25,"_151":-5,"_306":661,"_27":662},{"_44":650,"_33":619,"_31":613,"_144":512,"_42":43,"_41":651,"_146":125,"_39":652,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":653,"_27":654},{"_44":645,"_33":470,"_31":623,"_144":613,"_42":43,"_41":646,"_146":125,"_39":647,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":648,"_27":649},{"_44":637,"_33":638,"_31":639,"_144":623,"_42":43,"_41":640,"_146":25,"_39":641,"_13":201,"_35":20,"_36":642,"_24":25,"_151":-5,"_306":643,"_27":644},{"_44":629,"_33":630,"_31":631,"_144":623,"_42":43,"_41":632,"_146":25,"_39":633,"_13":201,"_35":20,"_36":634,"_24":25,"_151":-5,"_306":635,"_27":636},{"_44":620,"_33":621,"_31":622,"_144":623,"_42":43,"_41":624,"_146":25,"_39":625,"_13":201,"_35":20,"_36":626,"_24":25,"_151":-5,"_306":627,"_27":628},{"_44":611,"_33":34,"_31":612,"_144":613,"_42":43,"_41":614,"_146":25,"_39":615,"_13":201,"_35":20,"_36":616,"_24":25,"_151":-5,"_306":617,"_27":618},{"_44":606,"_33":575,"_31":569,"_144":512,"_42":43,"_41":607,"_146":125,"_39":608,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":609,"_27":610},{"_44":601,"_33":470,"_31":579,"_144":569,"_42":43,"_41":602,"_146":125,"_39":603,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":604,"_27":605},{"_44":593,"_33":594,"_31":595,"_144":579,"_42":43,"_41":596,"_146":25,"_39":597,"_13":201,"_35":20,"_36":598,"_24":25,"_151":-5,"_306":599,"_27":600},{"_44":585,"_33":586,"_31":587,"_144":579,"_42":43,"_41":588,"_146":25,"_39":589,"_13":201,"_35":20,"_36":590,"_24":25,"_151":-5,"_306":591,"_27":592},{"_44":576,"_33":577,"_31":578,"_144":579,"_42":43,"_41":580,"_146":25,"_39":581,"_13":201,"_35":20,"_36":582,"_24":25,"_151":-5,"_306":583,"_27":584},{"_44":567,"_33":34,"_31":568,"_144":569,"_42":43,"_41":570,"_146":25,"_39":571,"_13":201,"_35":20,"_36":572,"_24":25,"_151":-5,"_306":573,"_27":574},{"_44":562,"_33":522,"_31":518,"_144":512,"_42":43,"_41":563,"_146":125,"_39":564,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":565,"_27":566},{"_44":557,"_33":470,"_31":526,"_144":518,"_42":43,"_41":558,"_146":125,"_39":559,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":560,"_27":561},{"_44":549,"_33":550,"_31":551,"_144":526,"_42":43,"_41":552,"_146":25,"_39":553,"_13":173,"_35":20,"_36":554,"_24":25,"_151":-5,"_306":555,"_27":556},{"_44":541,"_33":542,"_31":543,"_144":526,"_42":43,"_41":544,"_146":25,"_39":545,"_13":148,"_35":20,"_36":546,"_24":25,"_151":-5,"_306":547,"_27":548},{"_44":532,"_33":533,"_31":534,"_144":526,"_42":43,"_41":535,"_146":25,"_39":536,"_13":537,"_35":20,"_36":538,"_24":25,"_151":-5,"_306":539,"_27":540},{"_44":523,"_33":524,"_31":525,"_144":526,"_42":43,"_41":527,"_146":25,"_39":528,"_13":158,"_35":20,"_36":529,"_24":25,"_151":-5,"_306":530,"_27":531},{"_44":517,"_33":34,"_31":32,"_144":518,"_42":43,"_41":14,"_146":25,"_39":519,"_13":181,"_35":20,"_36":38,"_24":25,"_151":-5,"_306":520,"_27":521},{"_44":511,"_33":471,"_31":464,"_144":512,"_42":43,"_41":513,"_146":125,"_39":514,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":515,"_27":516},{"_44":506,"_33":470,"_31":475,"_144":464,"_42":43,"_41":507,"_146":125,"_39":508,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":509,"_27":510},{"_44":498,"_33":499,"_31":500,"_144":475,"_42":43,"_41":501,"_146":25,"_39":502,"_13":201,"_35":20,"_36":503,"_24":25,"_151":-5,"_306":504,"_27":505},{"_44":490,"_33":491,"_31":492,"_144":475,"_42":43,"_41":493,"_146":25,"_39":494,"_13":148,"_35":20,"_36":495,"_24":25,"_151":-5,"_306":496,"_27":497},{"_44":482,"_33":483,"_31":484,"_144":475,"_42":43,"_41":485,"_146":25,"_39":486,"_13":201,"_35":20,"_36":487,"_24":25,"_151":-5,"_306":488,"_27":489},{"_44":472,"_33":473,"_31":474,"_144":475,"_42":43,"_41":476,"_146":25,"_39":477,"_13":478,"_35":20,"_36":479,"_24":25,"_151":-5,"_306":480,"_27":481},{"_44":462,"_33":34,"_31":463,"_144":464,"_42":43,"_41":465,"_146":25,"_39":466,"_13":158,"_35":20,"_36":467,"_24":25,"_151":-5,"_306":468,"_27":469},{"_44":457,"_33":456,"_31":451,"_144":219,"_42":43,"_41":458,"_146":125,"_39":459,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":460,"_27":461},{"_44":448,"_33":449,"_31":450,"_144":451,"_42":43,"_41":187,"_146":25,"_39":452,"_13":201,"_35":20,"_36":453,"_24":25,"_151":-5,"_306":454,"_27":455},{"_44":440,"_33":441,"_31":442,"_144":219,"_42":43,"_41":443,"_146":25,"_39":444,"_13":158,"_35":20,"_36":445,"_24":25,"_151":-5,"_306":446,"_27":447},{"_44":211,"_33":212,"_31":213,"_144":-5,"_42":43,"_41":214,"_146":125,"_39":437,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":438,"_27":439},{"_44":430,"_33":431,"_31":432,"_144":213,"_42":43,"_41":214,"_146":25,"_39":433,"_13":62,"_35":149,"_36":434,"_24":25,"_151":-5,"_306":435,"_27":436},{"_44":423,"_33":424,"_31":425,"_144":213,"_42":43,"_41":214,"_146":25,"_39":426,"_13":62,"_35":149,"_36":427,"_24":25,"_151":-5,"_306":428,"_27":429},{"_44":415,"_33":416,"_31":417,"_144":213,"_42":43,"_41":214,"_146":25,"_39":418,"_13":62,"_35":419,"_36":420,"_24":25,"_151":-5,"_306":421,"_27":422},{"_44":204,"_33":205,"_31":206,"_144":-5,"_42":43,"_41":207,"_146":125,"_39":412,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":413,"_27":414},{"_44":407,"_33":406,"_31":400,"_144":206,"_42":43,"_41":408,"_146":125,"_39":409,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":410,"_27":411},{"_44":397,"_33":398,"_31":399,"_144":400,"_42":43,"_41":401,"_146":25,"_39":402,"_13":181,"_35":149,"_36":403,"_24":25,"_151":-5,"_306":404,"_27":405},{"_44":392,"_33":361,"_31":356,"_144":206,"_42":43,"_41":393,"_146":125,"_39":394,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":395,"_27":396},{"_44":385,"_33":386,"_31":387,"_144":356,"_42":43,"_41":171,"_146":25,"_39":388,"_13":62,"_35":149,"_36":389,"_24":25,"_151":-5,"_306":390,"_27":391},{"_44":377,"_33":378,"_31":379,"_144":356,"_42":43,"_41":380,"_146":25,"_39":381,"_13":201,"_35":149,"_36":382,"_24":25,"_151":-5,"_306":383,"_27":384},{"_44":369,"_33":370,"_31":371,"_144":356,"_42":43,"_41":372,"_146":25,"_39":373,"_13":173,"_35":149,"_36":374,"_24":25,"_151":-5,"_306":375,"_27":376},{"_44":362,"_33":363,"_31":364,"_144":356,"_42":43,"_41":171,"_146":25,"_39":365,"_13":62,"_35":149,"_36":366,"_24":25,"_151":-5,"_306":367,"_27":368},{"_44":353,"_33":354,"_31":355,"_144":356,"_42":43,"_41":171,"_146":25,"_39":357,"_13":158,"_35":149,"_36":358,"_24":25,"_151":-5,"_306":359,"_27":360},{"_44":348,"_33":339,"_31":333,"_144":206,"_42":43,"_41":349,"_146":125,"_39":350,"_13":62,"_35":209,"_36":-5,"_24":25,"_151":-5,"_306":351,"_27":352},{"_44":340,"_33":341,"_31":342,"_144":333,"_42":43,"_41":343,"_146":25,"_39":344,"_13":201,"_35":149,"_36":345,"_24":25,"_151":-5,"_306":346,"_27":347},{"_44":330,"_33":331,"_31":332,"_144":333,"_42":43,"_41":334,"_146":25,"_39":335,"_13":201,"_35":149,"_36":336,"_24":25,"_151":-5,"_306":337,"_27":338},{"_44":196,"_33":197,"_31":198,"_144":-5,"_42":43,"_41":199,"_146":125,"_39":327,"_13":201,"_35":20,"_36":202,"_24":25,"_151":-5,"_306":328,"_27":329},{"_44":191,"_33":192,"_31":193,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":324,"_13":158,"_35":20,"_36":189,"_24":25,"_151":-5,"_306":325,"_27":326},{"_44":184,"_33":185,"_31":186,"_144":-5,"_42":43,"_41":187,"_146":25,"_39":321,"_13":181,"_35":20,"_36":189,"_24":25,"_151":-5,"_306":322,"_27":323},{"_44":176,"_33":177,"_31":178,"_144":-5,"_42":43,"_41":179,"_146":25,"_39":318,"_13":181,"_35":20,"_36":182,"_24":25,"_151":-5,"_306":319,"_27":320},{"_44":168,"_33":169,"_31":170,"_144":-5,"_42":43,"_41":171,"_146":25,"_39":315,"_13":173,"_35":20,"_36":174,"_24":25,"_151":-5,"_306":316,"_27":317},{"_44":161,"_33":162,"_31":163,"_144":-5,"_42":43,"_41":164,"_146":25,"_39":312,"_13":148,"_35":20,"_36":166,"_24":25,"_151":-5,"_306":313,"_27":314},{"_44":153,"_33":154,"_31":155,"_144":-5,"_42":43,"_41":156,"_146":25,"_39":309,"_13":158,"_35":20,"_36":159,"_24":25,"_151":-5,"_306":310,"_27":311},{"_44":141,"_33":142,"_31":143,"_144":-5,"_42":43,"_41":145,"_146":25,"_39":305,"_13":148,"_35":149,"_36":150,"_24":25,"_151":-5,"_306":307,"_27":308},["D",1781814540942],"children",[],[142],["D",1784058609134],[],[154],["D",1783577438960],[],[162],["D",1783561973686],[],[169],["D",1784058609130],[],[177],["D",1783578006344],[],[185],["D",1783578006344],[],[192],["D",1781805649048],[],[197],"f24cfd4b-6c74-4682-a63a-3e680149f3d1","variants.ts","92020682-6b52-11f1-80b8-1607ee4eb77e","56dc5a24-6b54-11f1-9b1d-1607ee4eb77e",52,["D",1781814540726],"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",[],[205,339,331],"utils","8575e997-6c6a-4504-9624-72ede1f62363","cn.ts","91f4e2d6-6b52-11f1-a883-1607ee4eb77e",56,["D",1781814541006],"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",[],[205,339,341],"14b26de5-d175-4ba4-8abe-7f94001d8ac4",48,["D",1781814540380],[295,296],[205,339],"be83edc6-6987-4e3e-8279-9e4d121b09a2","tw.ts","92125ad2-6b52-11f1-8a2f-1607ee4eb77e","56fb5e2e-6b54-11f1-95d4-1607ee4eb77e",["D",1783561973686],"/**\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| \"accent-ring\"\n\t| \"accent-text\"\n\t| \"danger\"\n\t| \"danger-fg\"\n\t| \"success\"\n\t| \"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\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",[],[205,361,354],"theme","96e6551b-8e2f-4ea5-a258-e21a28e27f08","tokens_test.ts","e650bcd8-7b38-11f1-a19c-1607ee4eb77e",["D",1783561973686],"/**\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\tconst re =\n\t\t/--kyla-([\\w-]+):\\s*light-dark\$\\s*(#[0-9a-fA-F]{3,6})\\s*,\\s*(#[0-9a-fA-F]{3,6})\\s*\$/g;\n\tconst palette: Palette = {};\n\tfor (const [, name, light, dark] of css.matchAll(re)) {\n\t\tpalette[name] = { light, dark };\n\t}\n\treturn 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\t...SURFACES.map((bg) => ({ fg: \"fg\", bg, min: AA_BODY })),\n\t...SURFACES.map((bg) => ({ fg: \"fg-muted\", bg, min: AA_BODY })),\n\t{ fg: \"accent-fg\", bg: \"accent\", min: AA_BODY },\n\t{ fg: \"danger-fg\", bg: \"danger\", min: AA_BODY },\n\t{ fg: \"success-fg\", bg: \"success\", min: AA_BODY },\n];\n\nDeno.test(\"contrastRatio returns the correct WCAG ratio for known pairs\", () => {\n\tassertAlmostEquals(contrastRatio(\"#000000\", \"#ffffff\"), 21, 0.05);\n\tassertAlmostEquals(contrastRatio(\"#ffffff\", \"#ffffff\"), 1, 0.001);\n\t// #767676 on white is the canonical WCAG AA boundary example (~4.54:1).\n\tassertAlmostEquals(contrastRatio(\"#767676\", \"#ffffff\"), 4.54, 0.05);\n\t// Order-independent.\n\tassertAlmostEquals(\n\t\tcontrastRatio(\"#052f4a\", \"#00bcff\"),\n\t\tcontrastRatio(\"#00bcff\", \"#052f4a\"),\n\t\t0.001,\n\t);\n});\n\nDeno.test(\"every sanctioned fg/surface pairing meets AA in both modes\", () => {\n\tfor (const mode of MODES) {\n\t\tfor (const { fg, bg, min } of PAIRINGS) {\n\t\t\tassert(palette[fg], `missing token --kyla-${fg}`);\n\t\t\tassert(palette[bg], `missing token --kyla-${bg}`);\n\t\t\tconst ratio = contrastRatio(palette[fg][mode], palette[bg][mode]);\n\t\t\tassert(\n\t\t\t\tratio >= min,\n\t\t\t\t`${fg} on ${bg} (${mode}) is ${ratio.toFixed(2)}:1, below AA ${min}:1`,\n\t\t\t);\n\t\t}\n\t}\n});\n\nDeno.test(\"palette expands the color vocabulary with the new semantic tokens\", () => {\n\tfor (const name of [\n\t\t\"accent-ring\",\n\t\t\"accent-text\",\n\t\t\"danger-fg\",\n\t\t\"success\",\n\t\t\"success-fg\",\n\t]) {\n\t\tassert(palette[name], `expected --kyla-${name} in the token stylesheet`);\n\t}\n});\n\nDeno.test(\"dark-mode base uses the sanctioned slate-950 softening, not true black\", () => {\n\tassert(palette.base, \"missing --kyla-base\");\n\tassertEqualsHex(palette.base.dark, \"#020618\");\n\tassert(\n\t\tpalette.base.dark.toLowerCase() !== \"#000000\",\n\t\t\"dark base must be softened slate-950, not true black\",\n\t);\n});\n\nfunction assertEqualsHex(actual: string, expected: string): void {\n\tassert(\n\t\tactual.toLowerCase() === expected.toLowerCase(),\n\t\t`expected ${expected}, got ${actual}`,\n\t);\n}\n",[],[205,361,363],"094ad873-f39f-4d8f-b4d4-7fc1c811ebf5","tokens.ts","920ac18c-6b52-11f1-a416-1607ee4eb77e",160,["D",1783577301432],"/**\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",[],[205,361,370],"8c1e2920-c51a-43b7-81b7-9c313b4da7f7","provider.tsx","92200010-6b52-11f1-80b8-1607ee4eb77e",51,["D",1781814540691],"/** @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",[],[205,361,378],"f7fd6af9-a62c-46ba-8f22-efd656d4b274","contrast.ts","e6508772-7b38-11f1-a19c-1607ee4eb77e",["D",1783561973686],"/**\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\tconst h = hex.trim().replace(/^#/, \"\");\n\tconst full =\n\t\th.length === 3\n\t\t\t? h\n\t\t\t\t\t.split(\"\")\n\t\t\t\t\t.map((c) => c + c)\n\t\t\t\t\t.join(\"\")\n\t\t\t: h;\n\tif (!/^[0-9a-fA-F]{6}$/.test(full)) {\n\t\tthrow new Error(`Invalid hex color: ${hex}`);\n\t}\n\treturn [\n\t\tparseInt(full.slice(0, 2), 16),\n\t\tparseInt(full.slice(2, 4), 16),\n\t\tparseInt(full.slice(4, 6), 16),\n\t];\n}\n\n/** WCAG relative luminance of an sRGB color (0 = black, 1 = white). */\nexport function relativeLuminance([r, g, b]: RGB): number {\n\tconst linear = (channel: number): number => {\n\t\tconst s = channel / 255;\n\t\treturn s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n\t};\n\treturn 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\tconst la = relativeLuminance(parseHex(a));\n\tconst lb = relativeLuminance(parseHex(b));\n\tconst lighter = Math.max(la, lb);\n\tconst darker = Math.min(la, lb);\n\treturn (lighter + 0.05) / (darker + 0.05);\n}\n",[],[205,361,386],"05fe2e2c-2444-41d7-938d-50483f27ebd6",50,["D",1781814540580],[289,290,291,292,293],[205,361],"93ec1eab-46e1-47b1-b539-e4c9392cc4c9","button.tsx","8569cf08-6b53-11f1-a668-1607ee4eb77e","56eb3bb6-6b54-11f1-95d4-1607ee4eb77e",54,["D",1781814540720],"/** @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",[],[212,431],["D",1783375727322],[282,283,284],[212],"6f86134b-51f8-4215-adb3-0cef19c2c19c","roadmap.md","45b8411a-798a-11f1-b04a-1607ee4eb77e",182,["D",1784058609992],"# Kylä UI — Roadmap\n\nThe dependency-ordered plan for reaching v1. Each row links a PRD in the\n[issue tracker](issues/); vocabulary is in [`../CONTEXT.md`](../CONTEXT.md) and\nthe load-bearing decisions are in [`adr/`](adr/). This doc is the synthesis —\nthe \"what next and in what order\" — not a re-spec of any single feature.\n\n## Built\n\n- **Styling foundation** — `cn`, `tw` (token utilities with the mandatory\n `color:` hint), `variants`, `KylaProvider` + Mode, provisional token\n stylesheet.\n- **`Button`** — the reference component (typed variants → tokens, semantic\n element, forwarded ref, escape-hatch `className`, token focus ring). \"Built\"\n means the pattern is proven, not that it's at VT coverage parity — see\n ADR-0005's coverage-parity clause and item 2 below.\n- **Substrate proof** — `nbbaier/kyla-ui-spike`, all four spikes green (Radix\n Dialog under the React-18.2.0 pin, Twind + CSS-var tokens, Provider injection,\n `light-dark()` + `data-mode`).\n\n## Planned — dependency order\n\nEach PRD is `ready-for-agent`. Later rows assume earlier ones.\n\n| # | Feature | PRD | Depends on | Why it's here |\n| - | ------------------------------- | ---------------------------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 1 | **Structural scales & palette** | [`structural-scales-palette`](issues/structural-scales-palette/PRD.md) | — | Highest-leverage deferred item: fixed spacing/radius/type scales + real AA-checked palette, **conforming to the Val Town UI style guide** ([ADR-0005](adr/0005-val-town-visual-language-default-theme.md)). Where consistency actually lives; unblocks the set. Establishes the first test harness. |\n| 2 | **v1 zero-dep component set** | [`v1-component-set`](issues/v1-component-set/PRD.md) | 1 | Text/Heading, Card, Input, Textarea, Label, Badge, Stack, Box, Divider, Select — the rest of the importable core, following the `Button` pattern — plus a `Button` revision slice closing its VT variant/state coverage gap (ADR-0005). |\n| 3 | **Dialog (Radix-backed)** | [`dialog-radix`](issues/dialog-radix/PRD.md) | 2 | First headless-backed component, behind its own import path, out of the barrel. Exercises the hybrid split (ADR-0002) in real code. |\n| — | **Preview shell conventions** | [`gallery`](issues/gallery/PRD.md) (folded in) | — | Bring the `preview/` HTML shell in line with platform conventions (real `.html` file, no inline `

{title}

Diff · v198