[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_761":762,"_763":764},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_107":87,"_26":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":121,"_122":24,"_123":124,"_125":126,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":24,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":24},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","src/components/text.tsx","latestPath","fileId","f88da5f4-7fe4-11f1-a374-1607ee4eb77e","name","text.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n type ComponentPropsWithoutRef,\n type ElementType,\n forwardRef,\n type ReactElement,\n type Ref,\n} from \"https://esm.sh/react@18.2.0\";\nimport { FONT_WEIGHT_STEPS, TYPE_STEPS } from \"../theme/tokens.ts\";\nimport { type FontWeightToken, tw, type TypeToken } from \"../theme/tw.ts\";\nimport { variants } from \"../utils/variants.ts\";\n\n/**\n * Text / Heading — typed typography, authored on the `Button` pattern: typed\n * variant props mapped to token classes via `variants()`, a semantic element,\n * forwarded ref + rest props, and an escape-hatch `className` merged last.\n *\n * Sizes are type-scale steps and tones are palette roles, so body copy stays on\n * the scale without a consumer ever choosing a raw `text-*` class.\n */\n\n/**\n * Text tones are text-*on a surface*, so they resolve to the AA-verified\n * text roles — `accent-text`/`danger-text` — not to the `accent`/`danger`\n * *fills*, which are far too pale in light mode to read as text.\n */\nexport type TextTone = \"fg\" | \"fg-muted\" | \"accent\" | \"danger\";\n\n/**\n * Build a variant map covering *every* step of a scale.\n *\n * Deriving the keys from the scale constant is what keeps the map honest: a step\n * added to `TYPE_STEPS` widens the prop's union and lands here in the same move.\n * A hand-written map would let the union grow past the map, and `variants()`\n * skips a missing key silently — the class-absent failure ADR-0001 warns about.\n */\nconst perStep = (\n steps: readonly T[],\n toClass: (step: T) => string,\n): Record =>\n Object.fromEntries(steps.map((step) => [step, toClass(step)])) as Record<\n T,\n string\n >;\n\nconst textClasses = variants({\n variants: {\n size: perStep(TYPE_STEPS, tw.type),\n weight: perStep(FONT_WEIGHT_STEPS, tw.weight),\n tone: {\n \"fg\": tw.text(\"fg\"),\n \"fg-muted\": tw.text(\"fg-muted\"),\n \"accent\": tw.text(\"accent-text\"),\n \"danger\": tw.text(\"danger-text\"),\n },\n },\n defaultVariants: { size: \"base\", weight: \"normal\", tone: \"fg\" },\n});\n\ntype TextOwnProps = {\n size?: TypeToken;\n weight?: FontWeightToken;\n tone?: TextTone;\n className?: string;\n};\n\nexport type TextProps =\n & { as?: T }\n & TextOwnProps\n & Omit, keyof TextOwnProps | \"as\">;\n\n/** A polymorphic component keeps `as`'s element type flowing into its rest props. */\ntype PolymorphicText = (\n props: TextProps & { ref?: Ref },\n) => ReactElement;\n\nconst TextImpl = forwardRef(\n (\n { as, size, weight, tone, className, ...rest }: TextProps,\n ref: Ref,\n ) => {\n const Component = (as ?? \"p\") as ElementType;\n return (\n \n );\n },\n);\nTextImpl.displayName = \"Text\";\n\nexport const Text = TextImpl as PolymorphicText;\n\n/** Heading levels, each mapping to its own semantic tag. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * Each level's default step on the type scale. `level` drives the *semantics*;\n * `size` is a separate prop so a consumer can down-size an `h1` without\n * demoting it in the document outline.\n */\nconst LEVEL_SIZE: Record = {\n 1: \"3xl\",\n 2: \"2xl\",\n 3: \"xl\",\n 4: \"lg\",\n 5: \"base\",\n 6: \"sm\",\n};\n\nexport type HeadingProps =\n & { level?: HeadingLevel }\n & TextProps;\n\ntype PolymorphicHeading = (\n props: HeadingProps & { ref?: Ref },\n) => ReactElement;\n\nconst HeadingImpl = forwardRef(\n (\n { level = 2, as, size, weight, ...rest }: HeadingProps,\n ref: Ref,\n ) => (\n \n ),\n);\nHeadingImpl.displayName = \"Heading\";\n\nexport const Heading = HeadingImpl as PolymorphicHeading;\n","createdAt",["D",1784075682266],"branchVersion","branchId","c92cbcce-86df-4d48-9f01-6b4923351fed","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":54,"_103":104,"_105":24},"branch",{"_13":86,"_31":87,"_42":41,"_88":43,"_89":90,"_91":92,"_93":49,"_94":43,"_95":62,"_96":44,"_97":98},"isOwned",13,"v1-components-01-harness-and-typography","projectId","forkedBranchId","687a9437-44a8-49ca-94d7-3277b6842513","forkedBranchVersion",268,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":756,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":24,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":757,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":758,"_81":759,"_83":760,"_85":24},"tree",[222,269,273,290,291,292,293,294,295,296],"files",[222,223,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,294,295,296],"counts",{"_211":60,"_212":213,"_214":155,"_215":216,"_217":218},"contents",[138,139,140,141,142,143,144,145,146,147],"upstreamProject","upstreamBranch",{"_42":90,"_37":131,"_132":133,"_31":134,"_88":43,"_13":135,"_89":-5,"_91":-5,"_136":137,"_46":-5,"_85":24,"_48":49,"_97":98,"_61":62,"_96":44},"emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},["D",1781804868542],"updatedAt",["D",1784076491200],"main",269,"lockfileKey","1784076491357-esm.town_v_nbbaier_kyla-ui@269-main",{"_42":206,"_31":207,"_29":208,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":209,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_26":210},{"_42":201,"_31":202,"_29":203,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":204,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_26":205},{"_42":195,"_31":196,"_29":197,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":198,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_26":200},{"_42":189,"_31":190,"_29":191,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":192,"_13":60,"_33":20,"_35":193,"_23":24,"_157":-5,"_26":194},{"_42":184,"_31":185,"_29":186,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":187,"_13":60,"_33":20,"_35":182,"_23":24,"_157":-5,"_26":188},{"_42":178,"_31":179,"_29":180,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":181,"_13":60,"_33":20,"_35":182,"_23":24,"_157":-5,"_26":183},{"_42":171,"_31":172,"_29":173,"_151":-5,"_40":41,"_39":174,"_153":24,"_37":175,"_13":155,"_33":20,"_35":176,"_23":24,"_157":-5,"_26":177},{"_42":165,"_31":166,"_29":167,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":168,"_13":60,"_33":20,"_35":169,"_23":24,"_157":-5,"_26":170},{"_42":159,"_31":160,"_29":161,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":162,"_13":60,"_33":20,"_35":163,"_23":24,"_157":-5,"_26":164},{"_42":148,"_31":149,"_29":150,"_151":-5,"_40":41,"_39":152,"_153":24,"_37":154,"_13":155,"_33":34,"_35":156,"_23":24,"_157":-5,"_26":158},"a3e6c3c7-8c1a-4429-a6a0-ed583b95cc8a","mod.ts","019f632a-69d4-710e-80e2-cd9f72b88c81","parentId",4,"latest",["D",1784075682216],1,"/**\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 {\n Heading,\n type HeadingLevel,\n type HeadingProps,\n Text,\n type TextProps,\n type TextTone,\n} from \"./src/components/text.tsx\";\nexport { KylaProvider, type Mode, useKylaMode } from \"./src/theme/provider.tsx\";\nexport {\n type ColorToken,\n type FontWeightToken,\n type RadiusToken,\n type SpaceProperty,\n type SpaceToken,\n type State,\n tw,\n type TypeToken,\n} from \"./src/theme/tw.ts\";\nexport { cn } from \"./src/utils/cn.ts\";\nexport { variants } from \"./src/utils/variants.ts\";\n","label",[149],"079ed122-62c9-4baa-b243-8ea35082022e","deno.json","019f632a-69d4-710e-80e2-cb2ae713e438",["D",1784075151835],"{\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",[160],"2adcb6c4-3db3-446f-ad45-99bb741f7c46","README.md","019f632a-69d4-710e-80e2-c76f50b01210",["D",1784075151835],"# 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`), real\nAA-checked palette, structural spacing/radius/type scales, and first component\n(`Button`) are in place. The rest of the v1 component set is 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",[166],"bf553cc4-b930-40f7-8b93-6d6bc9cff5f1","CONTEXT.md","019f632a-69d4-710e-80e2-c25ffa618701",5,["D",1784075682240],"# 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`, `danger-text`, `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 exactly\n`--kyla-accent`, `--kyla-radius`, and `--kyla-font`; the rest are structural and\noutside the supported theme override surface.\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**: consumers may redefine\n`--kyla-accent`, `--kyla-radius`, and `--kyla-font` (with the graduated radius\ntokens deriving directly from `--kyla-radius`). Everything else is structural\nand fixed as the supported consumer contract: the surface hierarchy, foreground\nand border roles, status roles, spacing scale, type sizes and line-heights, and\nfont weights. Because these values are CSS custom properties, consumers can\ntechnically redefine them, but doing so is an unsupported escape hatch rather\nthan part of the Theme API. That stable contract _is_ the consistency. A fuller\nnamed-theme system (multiple consumer-defined Themes, à la Kumo's theme configs)\nis 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",[172],"80c65449-8268-4624-b5fd-01b38fd2419c","CLAUDE.md","019f632a-69d4-710e-80e2-bdf01bdc686a",["D",1784075151835],"## 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### Val Town branch workflow\n\n- Before starting, verify the checkout with `vt status`, then branch from the\n stable line with `vt checkout main` followed by\n `vt checkout -b -NN-`; use a short prefix derived from\n the spec/feature (for example, `scales-03-type-scale-and-font`).\n- Keep implementation work on that branch. `vt push` is the Val Town commit for\n the branch; finish by running `vt status` and confirming local state matches\n remote state.\n- A ticket is not landed when it is merely pushed to a work branch. Merge the\n branch into `main` to cut the next Release, then record the `Landed: vNNN`\n version and `Status: done` in the issue file.\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",[179],"bc67344f-63c2-4b41-b1d4-216d27d3609f","AGENTS.md","019f632a-69d4-710e-80e2-b84842d73487",["D",1784075151835],[185],"11731f08-1734-4460-a3ca-4f177abb3fd3",".vtignore","019f632a-69d4-710e-80e2-b766669d1e53",["D",1784075151835],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor\n.claude",[190],"e2639dbb-fc64-4d90-acce-a76ddd05832a","src","019f632a-69d4-710e-80e2-b2cc015d94f6",["D",1784075151835],"directory",[196],"a3b8a0b2-a446-4a31-b799-bdfde868c81b","preview","019f632a-69d4-710e-80e2-79a562548746",["D",1784075151835],[202],"24b3ddcd-93b2-47cb-af1a-d243a145b06e","docs","019f632a-69d4-710e-80e2-69a57668a786",["D",1784075151835],[207],"pulls","branches",7,"forks","envVars",{"_219":60,"_221":60},"connections",{"_219":60,"_220":60},"count","unfilledCount","emptyCount",{"_42":206,"_31":207,"_29":208,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":753,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":754,"_26":755},{"_42":749,"_31":720,"_29":715,"_151":208,"_40":41,"_39":155,"_153":126,"_37":750,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":751,"_26":752},{"_42":742,"_31":743,"_29":744,"_151":715,"_40":41,"_39":155,"_153":126,"_37":745,"_13":60,"_33":20,"_35":746,"_23":24,"_157":-5,"_298":747,"_26":748},{"_42":735,"_31":736,"_29":737,"_151":715,"_40":41,"_39":155,"_153":126,"_37":738,"_13":60,"_33":20,"_35":739,"_23":24,"_157":-5,"_298":740,"_26":741},{"_42":728,"_31":729,"_29":730,"_151":715,"_40":41,"_39":155,"_153":126,"_37":731,"_13":60,"_33":20,"_35":732,"_23":24,"_157":-5,"_298":733,"_26":734},{"_42":721,"_31":722,"_29":723,"_151":715,"_40":41,"_39":155,"_153":126,"_37":724,"_13":60,"_33":20,"_35":725,"_23":24,"_157":-5,"_298":726,"_26":727},{"_42":712,"_31":713,"_29":714,"_151":715,"_40":41,"_39":155,"_153":126,"_37":716,"_13":60,"_33":20,"_35":717,"_23":24,"_157":-5,"_298":718,"_26":719},{"_42":708,"_31":693,"_29":688,"_151":208,"_40":41,"_39":155,"_153":126,"_37":709,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":710,"_26":711},{"_42":701,"_31":702,"_29":703,"_151":688,"_40":41,"_39":155,"_153":126,"_37":704,"_13":60,"_33":20,"_35":705,"_23":24,"_157":-5,"_298":706,"_26":707},{"_42":694,"_31":695,"_29":696,"_151":688,"_40":41,"_39":155,"_153":126,"_37":697,"_13":60,"_33":20,"_35":698,"_23":24,"_157":-5,"_298":699,"_26":700},{"_42":685,"_31":686,"_29":687,"_151":688,"_40":41,"_39":155,"_153":126,"_37":689,"_13":60,"_33":20,"_35":690,"_23":24,"_157":-5,"_298":691,"_26":692},{"_42":681,"_31":680,"_29":675,"_151":208,"_40":41,"_39":155,"_153":126,"_37":682,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":683,"_26":684},{"_42":672,"_31":673,"_29":674,"_151":675,"_40":41,"_39":155,"_153":126,"_37":676,"_13":60,"_33":20,"_35":677,"_23":24,"_157":-5,"_298":678,"_26":679},{"_42":668,"_31":483,"_29":519,"_151":208,"_40":41,"_39":155,"_153":126,"_37":669,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":670,"_26":671},{"_42":664,"_31":651,"_29":646,"_151":519,"_40":41,"_39":155,"_153":126,"_37":665,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":666,"_26":667},{"_42":660,"_31":483,"_29":655,"_151":646,"_40":41,"_39":155,"_153":126,"_37":661,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":662,"_26":663},{"_42":652,"_31":653,"_29":654,"_151":655,"_40":41,"_39":155,"_153":126,"_37":656,"_13":60,"_33":20,"_35":657,"_23":24,"_157":-5,"_298":658,"_26":659},{"_42":644,"_31":476,"_29":645,"_151":646,"_40":41,"_39":155,"_153":126,"_37":647,"_13":60,"_33":20,"_35":648,"_23":24,"_157":-5,"_298":649,"_26":650},{"_42":640,"_31":613,"_29":608,"_151":519,"_40":41,"_39":155,"_153":126,"_37":641,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":642,"_26":643},{"_42":636,"_31":483,"_29":617,"_151":608,"_40":41,"_39":155,"_153":126,"_37":637,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":638,"_26":639},{"_42":629,"_31":630,"_29":631,"_151":617,"_40":41,"_39":155,"_153":126,"_37":632,"_13":60,"_33":20,"_35":633,"_23":24,"_157":-5,"_298":634,"_26":635},{"_42":622,"_31":623,"_29":624,"_151":617,"_40":41,"_39":155,"_153":126,"_37":625,"_13":60,"_33":20,"_35":626,"_23":24,"_157":-5,"_298":627,"_26":628},{"_42":614,"_31":615,"_29":616,"_151":617,"_40":41,"_39":155,"_153":126,"_37":618,"_13":60,"_33":20,"_35":619,"_23":24,"_157":-5,"_298":620,"_26":621},{"_42":606,"_31":476,"_29":607,"_151":608,"_40":41,"_39":155,"_153":126,"_37":609,"_13":60,"_33":20,"_35":610,"_23":24,"_157":-5,"_298":611,"_26":612},{"_42":602,"_31":575,"_29":570,"_151":519,"_40":41,"_39":155,"_153":126,"_37":603,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":604,"_26":605},{"_42":598,"_31":483,"_29":579,"_151":570,"_40":41,"_39":155,"_153":126,"_37":599,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":600,"_26":601},{"_42":591,"_31":592,"_29":593,"_151":579,"_40":41,"_39":155,"_153":126,"_37":594,"_13":60,"_33":20,"_35":595,"_23":24,"_157":-5,"_298":596,"_26":597},{"_42":584,"_31":585,"_29":586,"_151":579,"_40":41,"_39":155,"_153":126,"_37":587,"_13":60,"_33":20,"_35":588,"_23":24,"_157":-5,"_298":589,"_26":590},{"_42":576,"_31":577,"_29":578,"_151":579,"_40":41,"_39":155,"_153":126,"_37":580,"_13":60,"_33":20,"_35":581,"_23":24,"_157":-5,"_298":582,"_26":583},{"_42":568,"_31":476,"_29":569,"_151":570,"_40":41,"_39":155,"_153":126,"_37":571,"_13":60,"_33":20,"_35":572,"_23":24,"_157":-5,"_298":573,"_26":574},{"_42":564,"_31":530,"_29":525,"_151":519,"_40":41,"_39":155,"_153":126,"_37":565,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":566,"_26":567},{"_42":560,"_31":483,"_29":534,"_151":525,"_40":41,"_39":155,"_153":126,"_37":561,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":562,"_26":563},{"_42":553,"_31":554,"_29":555,"_151":534,"_40":41,"_39":155,"_153":126,"_37":556,"_13":60,"_33":20,"_35":557,"_23":24,"_157":-5,"_298":558,"_26":559},{"_42":546,"_31":547,"_29":548,"_151":534,"_40":41,"_39":155,"_153":126,"_37":549,"_13":60,"_33":20,"_35":550,"_23":24,"_157":-5,"_298":551,"_26":552},{"_42":539,"_31":540,"_29":541,"_151":534,"_40":41,"_39":155,"_153":126,"_37":542,"_13":60,"_33":20,"_35":543,"_23":24,"_157":-5,"_298":544,"_26":545},{"_42":531,"_31":532,"_29":533,"_151":534,"_40":41,"_39":155,"_153":126,"_37":535,"_13":60,"_33":20,"_35":536,"_23":24,"_157":-5,"_298":537,"_26":538},{"_42":523,"_31":476,"_29":524,"_151":525,"_40":41,"_39":155,"_153":126,"_37":526,"_13":60,"_33":20,"_35":527,"_23":24,"_157":-5,"_298":528,"_26":529},{"_42":518,"_31":484,"_29":478,"_151":519,"_40":41,"_39":155,"_153":126,"_37":520,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":521,"_26":522},{"_42":514,"_31":483,"_29":488,"_151":478,"_40":41,"_39":155,"_153":126,"_37":515,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":516,"_26":517},{"_42":507,"_31":508,"_29":509,"_151":488,"_40":41,"_39":155,"_153":126,"_37":510,"_13":60,"_33":20,"_35":511,"_23":24,"_157":-5,"_298":512,"_26":513},{"_42":500,"_31":501,"_29":502,"_151":488,"_40":41,"_39":155,"_153":126,"_37":503,"_13":60,"_33":20,"_35":504,"_23":24,"_157":-5,"_298":505,"_26":506},{"_42":493,"_31":494,"_29":495,"_151":488,"_40":41,"_39":155,"_153":126,"_37":496,"_13":60,"_33":20,"_35":497,"_23":24,"_157":-5,"_298":498,"_26":499},{"_42":485,"_31":486,"_29":487,"_151":488,"_40":41,"_39":155,"_153":126,"_37":489,"_13":60,"_33":20,"_35":490,"_23":24,"_157":-5,"_298":491,"_26":492},{"_42":475,"_31":476,"_29":477,"_151":478,"_40":41,"_39":155,"_153":126,"_37":479,"_13":60,"_33":20,"_35":480,"_23":24,"_157":-5,"_298":481,"_26":482},{"_42":471,"_31":470,"_29":465,"_151":208,"_40":41,"_39":155,"_153":126,"_37":472,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":473,"_26":474},{"_42":462,"_31":463,"_29":464,"_151":465,"_40":41,"_39":155,"_153":24,"_37":466,"_13":60,"_33":20,"_35":467,"_23":24,"_157":-5,"_298":468,"_26":469},{"_42":455,"_31":456,"_29":457,"_151":208,"_40":41,"_39":155,"_153":126,"_37":458,"_13":60,"_33":20,"_35":459,"_23":24,"_157":-5,"_298":460,"_26":461},{"_42":201,"_31":202,"_29":203,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":452,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":453,"_26":454},{"_42":445,"_31":446,"_29":447,"_151":203,"_40":41,"_39":155,"_153":24,"_37":448,"_13":60,"_33":34,"_35":449,"_23":24,"_157":-5,"_298":450,"_26":451},{"_42":438,"_31":439,"_29":440,"_151":203,"_40":41,"_39":155,"_153":126,"_37":441,"_13":60,"_33":34,"_35":442,"_23":24,"_157":-5,"_298":443,"_26":444},{"_42":430,"_31":431,"_29":432,"_151":203,"_40":41,"_39":155,"_153":126,"_37":433,"_13":60,"_33":434,"_35":435,"_23":24,"_157":-5,"_298":436,"_26":437},{"_42":195,"_31":196,"_29":197,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":427,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":428,"_26":429},{"_42":423,"_31":403,"_29":397,"_151":197,"_40":41,"_39":155,"_153":126,"_37":424,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":425,"_26":426},{"_42":416,"_31":417,"_29":418,"_151":397,"_40":41,"_39":155,"_153":126,"_37":419,"_13":60,"_33":34,"_35":420,"_23":24,"_157":-5,"_298":421,"_26":422},{"_42":408,"_31":409,"_29":410,"_151":397,"_40":41,"_39":411,"_153":24,"_37":412,"_13":155,"_33":34,"_35":413,"_23":24,"_157":-5,"_298":414,"_26":415},{"_42":404,"_31":32,"_29":30,"_151":397,"_40":41,"_39":14,"_153":24,"_37":405,"_13":60,"_33":34,"_35":36,"_23":24,"_157":-5,"_298":406,"_26":407},{"_42":394,"_31":395,"_29":396,"_151":397,"_40":41,"_39":398,"_153":24,"_37":399,"_13":60,"_33":34,"_35":400,"_23":24,"_157":-5,"_298":401,"_26":402},{"_42":387,"_31":388,"_29":389,"_151":197,"_40":41,"_39":390,"_153":126,"_37":391,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":392,"_26":393},{"_42":383,"_31":347,"_29":342,"_151":197,"_40":41,"_39":155,"_153":126,"_37":384,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":385,"_26":386},{"_42":376,"_31":377,"_29":378,"_151":342,"_40":41,"_39":155,"_153":126,"_37":379,"_13":60,"_33":34,"_35":380,"_23":24,"_157":-5,"_298":381,"_26":382},{"_42":369,"_31":370,"_29":371,"_151":342,"_40":41,"_39":155,"_153":126,"_37":372,"_13":60,"_33":34,"_35":373,"_23":24,"_157":-5,"_298":374,"_26":375},{"_42":362,"_31":363,"_29":364,"_151":342,"_40":41,"_39":155,"_153":24,"_37":365,"_13":60,"_33":34,"_35":366,"_23":24,"_157":-5,"_298":367,"_26":368},{"_42":355,"_31":356,"_29":357,"_151":342,"_40":41,"_39":213,"_153":24,"_37":358,"_13":155,"_33":34,"_35":359,"_23":24,"_157":-5,"_298":360,"_26":361},{"_42":348,"_31":349,"_29":350,"_151":342,"_40":41,"_39":155,"_153":126,"_37":351,"_13":60,"_33":34,"_35":352,"_23":24,"_157":-5,"_298":353,"_26":354},{"_42":339,"_31":340,"_29":341,"_151":342,"_40":41,"_39":155,"_153":126,"_37":343,"_13":60,"_33":34,"_35":344,"_23":24,"_157":-5,"_298":345,"_26":346},{"_42":335,"_31":327,"_29":322,"_151":197,"_40":41,"_39":155,"_153":126,"_37":336,"_13":60,"_33":199,"_35":-5,"_23":24,"_157":-5,"_298":337,"_26":338},{"_42":328,"_31":329,"_29":330,"_151":322,"_40":41,"_39":155,"_153":126,"_37":331,"_13":60,"_33":34,"_35":332,"_23":24,"_157":-5,"_298":333,"_26":334},{"_42":319,"_31":320,"_29":321,"_151":322,"_40":41,"_39":155,"_153":126,"_37":323,"_13":60,"_33":34,"_35":324,"_23":24,"_157":-5,"_298":325,"_26":326},{"_42":189,"_31":190,"_29":191,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":316,"_13":60,"_33":20,"_35":193,"_23":24,"_157":-5,"_298":317,"_26":318},{"_42":184,"_31":185,"_29":186,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":313,"_13":60,"_33":20,"_35":182,"_23":24,"_157":-5,"_298":314,"_26":315},{"_42":178,"_31":179,"_29":180,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":310,"_13":60,"_33":20,"_35":182,"_23":24,"_157":-5,"_298":311,"_26":312},{"_42":171,"_31":172,"_29":173,"_151":-5,"_40":41,"_39":174,"_153":24,"_37":307,"_13":155,"_33":20,"_35":176,"_23":24,"_157":-5,"_298":308,"_26":309},{"_42":165,"_31":166,"_29":167,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":304,"_13":60,"_33":20,"_35":169,"_23":24,"_157":-5,"_298":305,"_26":306},{"_42":159,"_31":160,"_29":161,"_151":-5,"_40":41,"_39":155,"_153":126,"_37":301,"_13":60,"_33":20,"_35":163,"_23":24,"_157":-5,"_298":302,"_26":303},{"_42":148,"_31":149,"_29":150,"_151":-5,"_40":41,"_39":152,"_153":24,"_37":297,"_13":155,"_33":34,"_35":156,"_23":24,"_157":-5,"_298":299,"_26":300},["D",1784075682216],"children",[],[149],["D",1784075151835],[],[160],["D",1784075151835],[],[166],["D",1784075682240],[],[172],["D",1784075151835],[],[179],["D",1784075151835],[],[185],["D",1784075151835],[],[190],"12e5b37f-834f-45a3-b385-90eb49da0de2","variants.ts","019f632a-69d4-710e-80e2-ab7e297b283f","019f632a-69d4-710e-80e2-af72c74dc25d",["D",1784075151835],"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(\"md\"), \"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 selected: Selection = 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[key] ?? config.defaultVariants?.[key];\n if (chosen != null) {\n const cls = config.variants[key][chosen];\n if (cls) classes.push(cls);\n }\n }\n }\n return cn(...classes, props.className);\n };\n}\n",[],[196,327,320],"utils","a2c1e616-91ba-4d35-9f30-025145cf6b4a","cn.ts","019f632a-69d4-710e-80e2-a77aa45c734a",["D",1784075151835],"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,327,329],"fffe5f38-8d2f-4040-a44f-697048265241",["D",1784075151835],[288,289],[196,327],"97eabf3a-275f-4cbd-bd37-69f8ef3623db","tw_test.ts","019f632a-69d4-710e-80e2-9d4d228a57d6","019f632a-69d4-710e-80e2-a33741cd7dfc",["D",1784075151835],"import { assertEquals } from \"jsr:@std/assert@1\";\nimport { tw } from \"./tw.ts\";\n\nDeno.test(\"spacing accessors emit bare arbitrary-value classes\", () => {\n assertEquals(tw.space(\"4\"), \"p-[var(--kyla-space-4)]\");\n assertEquals(tw.space(\"p\", \"4\"), \"p-[var(--kyla-space-4)]\");\n assertEquals(tw.space(\"gap\", \"6\"), \"gap-[var(--kyla-space-6)]\");\n assertEquals(tw.space(\"space-x\", \"2\"), \"space-x-[var(--kyla-space-2)]\");\n});\n\nDeno.test(\"radius accessors emit derived bare arbitrary-value classes\", () => {\n assertEquals(tw.radius(\"sm\"), \"rounded-[var(--kyla-radius-sm)]\");\n assertEquals(tw.radius(\"md\"), \"rounded-[var(--kyla-radius-md)]\");\n assertEquals(tw.radius(\"lg\"), \"rounded-[var(--kyla-radius-lg)]\");\n assertEquals(tw.radius(), \"rounded-[var(--kyla-radius-md)]\");\n});\n\nDeno.test(\"type accessors bundle size and line-height\", () => {\n assertEquals(\n tw.type(\"sm\"),\n \"text-[length:var(--kyla-text-sm)] leading-[var(--kyla-text-sm-line-height)]\",\n );\n assertEquals(\n tw.type(\"3xl\"),\n \"text-[length:var(--kyla-text-3xl)] leading-[var(--kyla-text-3xl-line-height)]\",\n );\n});\n\nDeno.test(\"weight accessors emit bare arbitrary-value classes\", () => {\n assertEquals(\n tw.weight(\"semibold\"),\n \"font-[weight:var(--kyla-font-weight-semibold)]\",\n );\n});\n\n// These calls intentionally verify that the accessor arguments are unions.\n// @ts-expect-error \"7\" is not one of the fixed spacing steps.\ntw.space(\"7\");\n// @ts-expect-error \"xl\" is not one of the graduated radius roles.\ntw.radius(\"xl\");\n// @ts-expect-error \"4xl\" is not one of the fixed type steps.\ntw.type(\"4xl\");\n// @ts-expect-error \"black\" is not one of the fixed font weights.\ntw.weight(\"black\");\n",[],[196,347,340],"theme","9aa72636-50a2-4b28-a557-4c6681394eca","tw.ts","019f632a-69d4-710e-80e2-990d6582e072",["D",1784075151835],"/**\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 */\nimport type {\n COLOR_TOKENS,\n FONT_WEIGHT_STEPS,\n RADIUS_STEPS,\n SPACE_STEPS,\n TYPE_STEPS,\n} from \"./tokens.ts\";\n\nexport type ColorToken = (typeof COLOR_TOKENS)[number];\n\n/** Common interaction states a token utility may be scoped to. */\nexport type State = \"hover\" | \"focus\" | \"focus-visible\" | \"active\" | \"disabled\";\n\n/** Fixed spacing steps, each representing a multiple of the 4px base unit. */\nexport type SpaceToken = (typeof SPACE_STEPS)[number];\n\n/** The graduated radius roles derived from `--kyla-radius`. */\nexport type RadiusToken = (typeof RADIUS_STEPS)[number];\n\n/** Fixed type steps, each paired with its intended line-height. */\nexport type TypeToken = (typeof TYPE_STEPS)[number];\n\n/** Fixed font weights from the Val Town typography scale. */\nexport type FontWeightToken = (typeof FONT_WEIGHT_STEPS)[number];\n\n/**\n * Twind spacing utilities that consume a spacing token. Component dimensions\n * such as width and height are intentionally outside this accessor contract.\n */\nexport type SpaceProperty =\n | \"p\"\n | \"px\"\n | \"py\"\n | \"pt\"\n | \"pr\"\n | \"pb\"\n | \"pl\"\n | \"m\"\n | \"mx\"\n | \"my\"\n | \"mt\"\n | \"mr\"\n | \"mb\"\n | \"ml\"\n | \"gap\"\n | \"gap-x\"\n | \"gap-y\"\n | \"space-x\"\n | \"space-y\";\n\nconst color = (prop: string, name: ColorToken, on?: State): string =>\n `${on ? `${on}:` : \"\"}${prop}-[color:var(--kyla-${name})]`;\n\nconst length = (prop: string, family: string, name: string): string =>\n `${prop}-[var(--kyla-${family}-${name})]`;\n\nconst typeScale = (step: TypeToken): string =>\n [\n // `text-*` is shared by color and font-size utilities, so the length hint\n // makes the CSS variable's intended role explicit to Twind.\n `text-[length:var(--kyla-text-${step})]`,\n length(\"leading\", \"text\", `${step}-line-height`),\n ].join(\" \");\n\nfunction space(step: SpaceToken): string;\nfunction space(prop: SpaceProperty, step: SpaceToken): string;\nfunction space(\n propOrStep: SpaceProperty | SpaceToken,\n step?: SpaceToken,\n): string {\n const prop = step === undefined ? \"p\" : propOrStep as SpaceProperty;\n const token = step ?? propOrStep as SpaceToken;\n return length(prop, \"space\", token);\n}\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 * Length builders intentionally emit bare arbitrary-value classes: lengths\n * are unambiguous to Twind and do not need the color 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 /**\n * Fixed spacing token. With one argument it emits padding for the token;\n * pass a Twind spacing property first for other uses, e.g.\n * `tw.space(\"gap\", \"4\")`.\n */\n space,\n /** border-radius token (a length — no `color:` hint needed) */\n radius: (t: RadiusToken = \"md\") => length(\"rounded\", \"radius\", t),\n /** type token — always applies the paired size and line-height */\n type: typeScale,\n /** fixed font-weight token */\n weight: (t: FontWeightToken) => `font-[weight:var(--kyla-font-weight-${t})]`,\n} as const;\n",[],[196,347,349],"dddd2f36-d8ce-42f4-a480-550359c5494c","tokens_test.ts","019f632a-69d4-710e-80e2-97622aca861d",["D",1784075682396],"/**\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, assertEquals } from \"jsr:@std/assert@1\";\nimport { contrastRatio } from \"./contrast.ts\";\nimport {\n COLOR_TOKENS,\n FONT_WEIGHT_STEPS,\n RADIUS_STEPS,\n SPACE_STEPS,\n tokenCSS,\n TYPE_STEPS,\n} 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, the status/accent *text* roles on every\n * surface, and ink on each colored fill. Anything not listed here is not a\n * 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 ...SURFACES.map((bg) => ({ fg: \"accent-text\", bg, min: AA_BODY })),\n ...SURFACES.map((bg) => ({ fg: \"danger-text\", 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 (const name of COLOR_TOKENS) {\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\ntype LengthScale = Record;\n\nfunction parsePixelScale(css: string, family: string): LengthScale {\n const scale: LengthScale = {};\n const re = new RegExp(\n `--kyla-${family}-([\\\\w-]+):\\\\s*([0-9]+)px\\\\s*;`,\n \"g\",\n );\n for (const [, name, value] of css.matchAll(re)) {\n scale[name] = Number(value);\n }\n return scale;\n}\n\nDeno.test(\"spacing scale is the fixed monotonic 4px-based step set\", () => {\n const spacing = parsePixelScale(tokenCSS, \"space\");\n assertEquals(Object.keys(spacing), [...SPACE_STEPS]);\n\n let previous = -1;\n for (const step of SPACE_STEPS) {\n const value = spacing[step];\n assert(value >= 0, `space-${step} must be non-negative`);\n assert(value >= previous, `space-${step} must be monotonic`);\n assertEquals(value, Number(step) * 4);\n previous = value;\n }\n});\n\nDeno.test(\"radius scale derives sm/md/lg from the overridable base\", () => {\n assert(\n /--kyla-radius:\\s*8px\\s*;/.test(tokenCSS),\n \"expected an 8px overridable base radius\",\n );\n\n assertEquals(RADIUS_STEPS.length, 3);\n\n const expectedDerivations: Record<(typeof RADIUS_STEPS)[number], string> = {\n sm: \"calc(var(--kyla-radius) * 0.5)\",\n md: \"var(--kyla-radius)\",\n lg: \"calc(var(--kyla-radius) * 1.5)\",\n };\n for (const step of RADIUS_STEPS) {\n assert(\n tokenCSS.includes(\n `--kyla-radius-${step}: ${expectedDerivations[step]};`,\n ),\n `radius-${step} must derive from --kyla-radius`,\n );\n }\n});\n\ntype TypeScale = Record;\n\nfunction parseTypeScale(css: string): TypeScale {\n const scale: TypeScale = {};\n for (const step of TYPE_STEPS) {\n const size = css.match(\n new RegExp(`--kyla-text-${step}:\\\\s*([0-9.]+)rem\\\\s*;`),\n );\n const lineHeight = css.match(\n new RegExp(`--kyla-text-${step}-line-height:\\\\s*([^;]+);`),\n );\n if (size && lineHeight) {\n scale[step] = { size: Number(size[1]), lineHeight: lineHeight[1].trim() };\n }\n }\n return scale;\n}\n\nDeno.test(\"type scale is the fixed monotonic VT size and line-height set\", () => {\n const typeScale = parseTypeScale(tokenCSS);\n assertEquals(Object.keys(typeScale), [...TYPE_STEPS]);\n\n let previousSize = 0;\n for (const step of TYPE_STEPS) {\n const pair = typeScale[step];\n assert(pair.size > previousSize, `text-${step} must be monotonic by size`);\n assert(pair.lineHeight.length > 0, `text-${step} must have a line-height`);\n previousSize = pair.size;\n }\n});\n\nDeno.test(\"font and weight tokens expose the VT typography foundation\", () => {\n assert(\n tokenCSS.includes(\n '--kyla-font: \"IBM Plex Sans\", -apple-system, sans-serif;',\n ),\n \"expected the overridable IBM Plex Sans font token\",\n );\n\n for (const [index, name] of FONT_WEIGHT_STEPS.entries()) {\n const value = String(400 + index * 100);\n assert(\n tokenCSS.includes(`--kyla-font-weight-${name}: ${value};`),\n `expected --kyla-font-weight-${name}`,\n );\n }\n});\n\nconst OVERRIDE_TOKENS = [\"accent\", \"radius\", \"font\"] as const;\n\nconst STRUCTURAL_TOKENS = [\n // Semantic palette roles other than the overridable accent.\n \"base\",\n \"elevated\",\n \"recessed\",\n \"fg\",\n \"fg-muted\",\n \"line\",\n \"hairline\",\n \"accent-fg\",\n \"accent-ring\",\n \"accent-text\",\n \"danger\",\n \"danger-fg\",\n \"danger-text\",\n \"success\",\n \"success-fg\",\n // Direct radius derivations remain structural even though the base is not.\n ...RADIUS_STEPS.map((step) => `radius-${step}`),\n ...SPACE_STEPS.map((step) => `space-${step}`),\n ...TYPE_STEPS.flatMap((step) => [\n `text-${step}`,\n `text-${step}-line-height`,\n ]),\n ...FONT_WEIGHT_STEPS.map((weight) => `font-weight-${weight}`),\n] as const;\n\nDeno.test(\"override surface and structural token names are all present\", () => {\n for (const name of OVERRIDE_TOKENS) {\n assert(\n tokenCSS.includes(`--kyla-${name}:`),\n `expected overridable token --kyla-${name}`,\n );\n }\n\n for (const name of STRUCTURAL_TOKENS) {\n assert(\n tokenCSS.includes(`--kyla-${name}:`),\n `expected structural token --kyla-${name}`,\n );\n }\n});\n",[],[196,347,356],"18cf7249-81af-42f0-811c-6110ebdba1d1","tokens.ts","019f632a-69d4-710e-80e2-928d94afaf12",["D",1784075151835],"/**\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 * Structural scales: spacing is fixed as Kylä's supported consumer contract\n * on the Val Town/Tailwind 4px base unit. \"Fixed\" means these values are not\n * supported theme override inputs; because they are CSS custom properties, a\n * consumer can still redefine them at their own risk.\n * The radius scale is derived from the one consumer-overridable base so the\n * proportions remain intact when a consumer changes --kyla-radius. The\n * consumer override surface is exactly --kyla-accent, --kyla-radius, and\n * --kyla-font (plus the direct radius derivations). Every other token below —\n * surfaces, foregrounds, borders, status roles, spacing, type sizes/leading,\n * and font weights — is structural and outside the supported override surface.\n */\nexport const COLOR_TOKENS = [\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] as const;\n\nexport const SPACE_STEPS = [\n \"0\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"5\",\n \"6\",\n \"8\",\n \"10\",\n \"12\",\n \"16\",\n \"20\",\n \"24\",\n] as const;\n\nexport const RADIUS_STEPS = [\"sm\", \"md\", \"lg\"] as const;\n\nexport const TYPE_STEPS = [\n \"xs\",\n \"sm\",\n \"base\",\n \"lg\",\n \"xl\",\n \"2xl\",\n \"3xl\",\n] as const;\n\nexport const FONT_WEIGHT_STEPS = [\n \"normal\",\n \"medium\",\n \"semibold\",\n \"bold\",\n \"extrabold\",\n] as const;\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 /* consumer-overridable; all other palette roles are structural */\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 /*\n * Typography — --kyla-font is consumer-overridable. The type sizes, their\n * paired line-heights, and weights are structural so components share one\n * hierarchy. Values are the VT style-guide scale (§4).\n */\n --kyla-font: \"IBM Plex Sans\", -apple-system, sans-serif;\n --kyla-text-xs: 0.75rem;\n --kyla-text-xs-line-height: 1rem;\n --kyla-text-sm: 0.875rem;\n --kyla-text-sm-line-height: 1.25rem;\n --kyla-text-base: 1rem;\n --kyla-text-base-line-height: 1.5rem;\n --kyla-text-lg: 1.125rem;\n --kyla-text-lg-line-height: 1.75rem;\n --kyla-text-xl: 1.25rem;\n --kyla-text-xl-line-height: 1.75rem;\n --kyla-text-2xl: 1.5rem;\n --kyla-text-2xl-line-height: 2rem;\n --kyla-text-3xl: 1.875rem;\n --kyla-text-3xl-line-height: 2.25rem;\n\n --kyla-font-weight-normal: 400;\n --kyla-font-weight-medium: 500;\n --kyla-font-weight-semibold: 600;\n --kyla-font-weight-bold: 700;\n --kyla-font-weight-extrabold: 800;\n\n /*\n * Structural spacing — fixed supported contract on a 4px base, following the\n * compact VT/Tailwind steps used by the component style guide. These are not\n * supported theme overrides, though CSS custom properties remain mutable.\n */\n --kyla-space-0: 0px;\n --kyla-space-1: 4px;\n --kyla-space-2: 8px;\n --kyla-space-3: 12px;\n --kyla-space-4: 16px;\n --kyla-space-5: 20px;\n --kyla-space-6: 24px;\n --kyla-space-8: 32px;\n --kyla-space-10: 40px;\n --kyla-space-12: 48px;\n --kyla-space-16: 64px;\n --kyla-space-20: 80px;\n --kyla-space-24: 96px;\n\n /*\n * Shape — --kyla-radius is the one consumer-overridable base. The graduated\n * values are direct derivations, so changing the base preserves\n * the 4px / 8px / 12px proportions used by the VT style guide.\n */\n --kyla-radius: 8px;\n --kyla-radius-sm: calc(var(--kyla-radius) * 0.5);\n --kyla-radius-md: var(--kyla-radius);\n --kyla-radius-lg: calc(var(--kyla-radius) * 1.5);\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 {\n margin: 0;\n font-family: var(--kyla-font);\n}\n`;\n",[],[196,347,363],"54e7f57a-a05b-4c7f-a3ce-61a09de9145b","provider.tsx","019f632a-69d4-710e-80e2-8e5dfad917e8",["D",1784075151835],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n createContext,\n type ReactNode,\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 * the Provider injects tokens and the default IBM Plex Sans stylesheet.\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\";\nconst FONT_STYLESHEET_ID = \"kyla-font-stylesheet\";\nconst FONT_STYLESHEET_HREF =\n \"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap\";\n\nexport function KylaProvider({\n children,\n defaultMode = \"system\",\n}: {\n children: 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)) {\n const style = document.createElement(\"style\");\n style.id = TOKENS_ID;\n style.textContent = tokenCSS;\n document.head.appendChild(style);\n }\n\n if (!document.getElementById(FONT_STYLESHEET_ID)) {\n const link = document.createElement(\"link\");\n link.id = FONT_STYLESHEET_ID;\n link.rel = \"stylesheet\";\n link.href = FONT_STYLESHEET_HREF;\n document.head.appendChild(link);\n }\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,347,370],"246b0c29-0d3a-4cb0-8981-9d6f02a4a7c9","contrast.ts","019f632a-69d4-710e-80e2-8991cede6c9d",["D",1784075151835],"/**\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,347,377],"9fc9fbd9-8d33-4fdf-be13-df6567af6429",["D",1784075151835],[281,282,283,284,285,286],[196,347],"3740eb2e-fdce-4b2f-a913-f85b2b0a1ae0","testing","f8537f78-7fe4-11f1-a5ab-1607ee4eb77e",2,["D",1784075682034],[],[196,388],"77a8a80a-7ebb-42f7-a180-0a73b4560f5f","text_test.ts","f867b3da-7fe4-11f1-a5ab-1607ee4eb77e","019f632a-69d4-710e-80e2-8704f8ef7051",3,["D",1784075682192],"import {\n assert,\n assertMatch,\n assertNotMatch,\n assertStringIncludes,\n} from \"jsr:@std/assert@1\";\nimport { createElement } from \"https://esm.sh/react@18.2.0\";\nimport { FONT_WEIGHT_STEPS, TYPE_STEPS } from \"../theme/tokens.ts\";\nimport { renderToStaticMarkup } from \"../testing/render.ts\";\nimport { Heading, Text, type TextTone } from \"./text.tsx\";\n\nDeno.test(\"Text renders a paragraph by default and honors the polymorphic `as`\", () => {\n assertMatch(renderToStaticMarkup(createElement(Text, null, \"Body\")), /^

{\n const html = renderToStaticMarkup(\n createElement(Text, { size: \"lg\" }, \"Body\"),\n );\n\n assertStringIncludes(html, \"text-[length:var(--kyla-text-lg)]\");\n assertStringIncludes(html, \"leading-[var(--kyla-text-lg-line-height)]\");\n});\n\nDeno.test(\"Text maps weight to a font-weight token\", () => {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { weight: \"bold\" }, \"Body\")),\n \"font-[weight:var(--kyla-font-weight-bold)]\",\n );\n});\n\nDeno.test(\"Text covers every step of the type and weight scales\", () => {\n // The props' unions derive from these constants, so a step added to a scale\n // without a matching variant entry would type-check and then emit nothing at\n // all — `variants()` skips an unknown key silently.\n for (const size of TYPE_STEPS) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { size }, \"Body\")),\n `text-[length:var(--kyla-text-${size})]`,\n );\n }\n\n for (const weight of FONT_WEIGHT_STEPS) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { weight }, \"Body\")),\n `font-[weight:var(--kyla-font-weight-${weight})]`,\n );\n }\n});\n\nDeno.test(\"Text tones resolve to the text-on-surface color tokens\", () => {\n const toneToken: Record = {\n \"fg\": \"fg\",\n \"fg-muted\": \"fg-muted\",\n // `accent`/`danger` are *fill* tokens; text tones must use the AA-verified\n // text-on-surface roles instead, or they render unreadably on a surface.\n \"accent\": \"accent-text\",\n \"danger\": \"danger-text\",\n };\n\n for (\n const [tone, token] of Object.entries(toneToken) as [TextTone, string][]\n ) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { tone }, \"Body\")),\n `text-[color:var(--kyla-${token})]`,\n );\n }\n});\n\nDeno.test(\"Text emits its size and its tone together\", () => {\n // `text-*` is shared by font-size and color utilities. Without the\n // `length:`/`color:` hints (ADR-0001) twMerge would treat these as conflicting\n // and silently drop one, so assert both survive the same render.\n const html = renderToStaticMarkup(\n createElement(Text, { size: \"sm\", tone: \"fg-muted\" }, \"Body\"),\n );\n\n assertStringIncludes(html, \"text-[length:var(--kyla-text-sm)]\");\n assertStringIncludes(html, \"text-[color:var(--kyla-fg-muted)]\");\n});\n\nDeno.test(\"Text className wins over the component's own conflicting tone\", () => {\n const html = renderToStaticMarkup(\n createElement(\n Text,\n { tone: \"fg\", className: \"text-[color:var(--kyla-accent-text)]\" },\n \"Body\",\n ),\n );\n\n assertStringIncludes(html, \"text-[color:var(--kyla-accent-text)]\");\n assertNotMatch(html, /text-\\[color:var\$--kyla-fg\$\\]/);\n});\n\nDeno.test(\"Text forwards rest props to the underlying element\", () => {\n const html = renderToStaticMarkup(\n createElement(Text, { id: \"intro\", \"data-testid\": \"t\" }, \"Body\"),\n );\n\n assertStringIncludes(html, 'id=\"intro\"');\n assertStringIncludes(html, 'data-testid=\"t\"');\n});\n\nDeno.test(\"Heading renders the heading tag for its level\", () => {\n for (const level of [1, 2, 3, 4, 5, 6] as const) {\n assertMatch(\n renderToStaticMarkup(createElement(Heading, { level }, \"Title\")),\n new RegExp(`^ {\n assertMatch(\n renderToStaticMarkup(createElement(Heading, null, \"Title\")),\n /^

{\n const sizes = ([1, 2, 3, 4, 5, 6] as const).map((level) => {\n const html = renderToStaticMarkup(\n createElement(Heading, { level }, \"Title\"),\n );\n const match = html.match(/text-\\[length:var\$--kyla-text-([\\w-]+)\$\\]/);\n assert(match, `h${level} emitted no type-scale size`);\n return match[1];\n });\n\n assert(\n new Set(sizes).size === sizes.length,\n `each level needs its own step, got ${sizes.join(\", \")}`,\n );\n assertStringIncludes(sizes[0], \"3xl\");\n});\n\nDeno.test(\"Heading is semibold by default and lets an explicit weight win\", () => {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Heading, null, \"Title\")),\n \"font-[weight:var(--kyla-font-weight-semibold)]\",\n );\n assertStringIncludes(\n renderToStaticMarkup(\n createElement(Heading, { weight: \"normal\" }, \"Title\"),\n ),\n \"font-[weight:var(--kyla-font-weight-normal)]\",\n );\n});\n\nDeno.test(\"Heading keeps its semantic level when size is overridden\", () => {\n // A small h1 is still an h1 — styling must not rewrite the document outline.\n const html = renderToStaticMarkup(\n createElement(Heading, { level: 1, size: \"base\" }, \"Title\"),\n );\n\n assertMatch(html, /^

` HTML shell in line with platform conventions (real `.html` file, no inline `

\n {title}\n

Diff · v8