[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_783":784,"_785":786},"routes/_app.x.$handle.$name",{"_99":98,"_32":46,"_107":89,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":125,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",221,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":37,"_34":20,"_35":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","docs/issues/gallery/spec.md","latestPath","fileId","45e698c6-798a-11f1-95f7-1607ee4eb77e","name","PRD.md","fileType","content","# PRD: Gallery — self-hosted docs surface\n\nStatus: ready-for-agent Labels: ready-for-agent\n\n> Promotes the WIP `preview/` into the real **Gallery** — a first-class term in\n> [CONTEXT.md](../../../CONTEXT.md): the library's self-hosted documentation at\n> its own HTTP route, rendering every component in its variants and Modes with\n> the Mode toggle. Grows as the [component set](../v1-component-set/PRD.md) and\n> [Dialog](../dialog-radix/PRD.md) land.\n\n## Problem Statement\n\nKylä is meant to **document itself**: CONTEXT.md defines the Gallery as an HTTP\nroute on `kyla-ui` that renders every component in its variants and Modes — both\nliving docs and the in-browser proof that the whole stack (Twind + CSS-var\ntokens, Provider mode, Radix hydration) renders correctly on Val Town. Today\nthat surface only exists as `preview/`, which is explicitly labelled\nwork-in-progress and \"not a stable API,\" carries a 🚧 banner, and is framed as\nillustrative rather than canonical. There is no blessed docs surface a consumer\ncan point to.\n\n## Solution\n\nPromote `preview/` into the real **Gallery** served at `kyla-ui`'s HTTP route:\nit renders every shipped component across its variants/sizes/tones, shows the\ndesign token swatches, and carries the Mode toggle driven by the library's own\n`useKylaMode()`. It imports the real library and never modifies it. It is the\ncanonical proof-of-render on Val Town and the seed of a fuller docs site later.\n\n## User Stories\n\n1. As a consumer evaluating Kylä, I want a live Gallery at the library's URL, so\n that I can see every component before importing it.\n2. As a consumer, I want each component shown in all its variants/sizes/tones,\n so that I can pick the right props by seeing them.\n3. As a consumer, I want a Mode toggle (light/dark/system) in the Gallery, so\n that I can verify how components look in each Mode.\n4. As a consumer, I want the token swatches shown, so that I can see the\n semantic palette the system is built on.\n5. As a consumer, I want a view-source link, so that I can read how the Gallery\n uses the components.\n6. As a maintainer, I want the Gallery served from `kyla-ui` itself (co-located\n with source), so that the library documents itself and the docs can never\n drift from the code they import.\n7. As a maintainer, I want the Gallery to import the real library and never\n modify it, so that it's an honest proof-of-render, not a mock.\n8. As a maintainer, I want the Gallery to be the in-browser proof that Twind +\n tokens + Provider + Radix render correctly on Val Town, so that a broken\n render path is visible immediately.\n9. As a maintainer, I want adding a new component to the Gallery to be a small,\n obvious edit, so that the docs stay current as the set grows.\n10. As a contributor, I want the Gallery to exercise the interactive components\n (focus rings, Dialog open/close), so that it doubles as a manual behavior\n check.\n11. As an end user of the docs, I want the Gallery to load without a build step,\n so that it works on Val Town's runtime like any consumer app.\n\n## Implementation Decisions\n\n- **Home:** served from `kyla-ui`'s HTTP route (the val documents itself). Reuse\n the shell _mechanics_ from `preview/`: Twind loaded before first paint\n (ADR-0001), the importmap that maps `npm:` specifiers to esm.sh for the\n browser, `std/catch` for client-error surfacing, `serveFile` for transpiled\n `.ts/.tsx`, and the `/source` redirect. The Gallery **imports** the library\n from `mod.ts` (and Dialog's own path) and modifies nothing — the preview's\n core invariant.\n- **Shell conventions (folded-in cleanup — see issue\n [`01-preview-shell-conventions`](issues/01-preview-shell-conventions.md)):**\n the Gallery adopts the _corrected_ shell, not today's template-literal one — a\n real `index.html` static file served via `serveFile`, and no inline `\n \n \n

\n \n \n`;\n\nexport default async function (req: Request): Promise {\n const { pathname } = new URL(req.url);\n\n // view-source link → redirect to this val\n if (pathname === \"/source\") {\n return new Response(null, {\n status: 302,\n headers: { Location: parseVal().links.self.val },\n });\n }\n\n // serve any val file (transpiled to JS for .ts/.tsx) so the browser can run\n // the client bundle and its relative imports (./app.tsx, ../mod.ts, ...).\n if (pathname.endsWith(\".ts\") || pathname.endsWith(\".tsx\")) {\n return serveFile(pathname, import.meta.url);\n }\n\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n",[],[206,409],"bd982d70-d147-4681-9ef1-354e2a19b0a3","client.tsx","42cc926a-7987-11f1-814e-1607ee4eb77e",["D",1783375727322],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Preview } from \"./app.tsx\";\n\nconst root = document.getElementById(\"root\")!;\ncreateRoot(root).render();\n",[],[206,417],"f3e960bb-6178-4b5c-9adb-ec8366431494","app.tsx","42cc23d4-7987-11f1-814e-1607ee4eb77e",205,["D",1784058612491],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// The real library — imported, never modified.\nimport { Button, cn, KylaProvider, tw, useKylaMode } from \"../mod.ts\";\nimport type { ColorToken } from \"../src/theme/tw.ts\";\nimport type { Mode } from \"../src/theme/provider.tsx\";\n\nconst VARIANTS = [\"primary\", \"subtle\", \"ghost\", \"danger\"] as const;\nconst SIZES = [\"sm\", \"md\", \"lg\"] as const;\n\nconst COLOR_TOKENS: ColorToken[] = [\n \"base\",\n \"elevated\",\n \"recessed\",\n \"fg\",\n \"fg-muted\",\n \"line\",\n \"hairline\",\n \"accent\",\n \"accent-fg\",\n \"danger\",\n];\n\n/** A titled section on an elevated card. */\nfunction Section({\n title,\n subtitle,\n children,\n}: {\n title: string;\n subtitle?: string;\n children: React.ReactNode;\n}) {\n return (\n \n

\n {title}\n

\n {subtitle && (\n

\n {subtitle}\n

\n )}\n

{children}

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

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

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

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

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

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

\n ))}\n

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

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

\n {token}\n

\n --kyla-{token}\n

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

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

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

\n {/* header */}\n

\n Kylä UI\n

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

\n \n

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

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

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

\n ✅ In place\n

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

\n 🔜 To come\n

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

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

\n \n \n );\n}\n",[],[206,424],["D",1783375727322],[275,276,277],[206],"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 `

Diff · v221