@motir/design-system 0.1.0

package/dist/specimen/TokensSpecimen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/typography.ts","../../src/theme/styles.ts","../../src/theme/palettes.ts","../../src/theme/types.ts","../../src/contexts/theme-context.tsx","../../src/utils/cn.ts","../../src/components/ui/Spinner.tsx","../../src/components/ui/Button.tsx","../../src/components/ui/Card.tsx","../../src/components/ui/FormField.tsx","../../src/components/ui/Input.tsx","../../src/components/ui/Pill.tsx","../../src/components/ui/SectionLabel.tsx","../../src/components/theme/StyleVignette.tsx","../../src/specimen/TokensSpecimen.tsx"],"names":["Spinner","jsx","cva","forwardRef","Button","Card","jsxs","describedById","Input","Pill","SectionLabel"],"mappings":"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","file":"TokensSpecimen.js","sourcesContent":["/**\n * The Motir TYPOGRAPHY LIBRARY — the named-pairing registry (Subtask 7.3.53).\n *\n * A \"type pairing\" is a named TYPOGRAPHY scheme the whole UI can swap to at\n * runtime — the THIRD design axis, completing the token decomposition\n * (Colour `data-palette` · Type `data-type` · Shape/feel `data-style`). It is\n * deliberately INDEPENDENT of the other two: a pairing decides which TYPEFACES\n * the product wears (the headline / body / mono role mapping); it never touches\n * a hue (palette axis) or a radius (style axis).\n *\n * ── The three-axis runtime contract ─────────────────────────────────────\n *   data-type=\"<type-id>\"       — THIS axis. A `[data-type='<id>']` block in\n *                                 app/globals.css re-points the `--font-*`\n *                                 role tokens (sans / serif / mono) — and ONLY\n *                                 font tokens, never colour or shape.\n *   data-palette=\"<palette-id>\" — the INDEPENDENT colour axis (`--el-*`).\n *   data-style=\"<style-id>\"     — the INDEPENDENT shape/feel axis.\n *\n * The shared `--font-size-*` SCALE stays common across pairings — sizes are\n * layout, not brand; a pairing remaps the FACES, not the type scale.\n *\n * ── A style declares a DEFAULT pairing (overridable) ────────────────────\n * Typography used to be BUNDLED into the style axis: `swiss-minimal-flat`,\n * `neo-brutalism` and `cybercore-y2k` each re-pointed `--font-serif` inside\n * their own `[data-style]` block. That is now a disjointness violation (two\n * axes setting `--font-*`). The fix: each style declares a `defaultTypeId`\n * (see ./styles.ts) — the pairing applied when the user has NOT pinned an\n * explicit type — and the per-style font overrides move here, as pairings.\n * So out-of-the-box looks are UNCHANGED; the new freedom is that type is now\n * independently overridable (e.g. Swiss shape + a serif pairing).\n *\n * ── v1 — the base faces only (no new payload) ───────────────────────────\n * v1 registered three pairings built from the THREE already-loaded next/font\n * faces (Inter · Source Serif 4 · JetBrains Mono) — so they add ZERO font\n * payload and carry NO new-typeface design decision:\n *   - `motir`      — the base: editorial serif headlines over a sans body.\n *   - `motir-sans` — all-sans (Inter headlines); reproduces the Swiss look.\n *   - `motir-mono` — mono THROUGHOUT (headlines + body/UI); a code-native UI.\n * `motir` is the base — like the `motir` palette / `warm-editorial` style it\n * needs NO `[data-type]` override block; the base `--font-*` tokens already are\n * it.\n *\n * ── New-typeface pairings (Grotesk / Editorial / Mono-Technical, 7.3.54–56) ──\n * Each adds a real type-design decision and loads its own next/font face(s),\n * re-pointing a role in its own `[data-type]` block:\n *   - `grotesk` (7.3.54)        — Space Grotesk THROUGHOUT (headlines + body/UI).\n *   - `editorial` (7.3.55)      — Fraunces display-serif headlines over the Inter\n *     body; a magazine, considered pairing (one new face — Inter + JetBrains reused).\n *     Body STAYS Inter — a display serif is unreadable as UI, so this pairing\n *     re-types headlines only (the legibility exception to whole-UI re-typing).\n *   - `mono-technical` (7.3.56) — IBM Plex Mono THROUGHOUT (headlines + body/UI +\n *     meta); a precise, developer-grade UI (one new face — Inter reused for nothing\n *     now, kept as the ultimate fallback).\n *\n * ── Whole-UI re-typing (Yue, 2026-06-19) ────────────────────────────────\n * A type pairing re-types the WHOLE app, chrome included (nav, header, buttons),\n * not just headlines: a pairing whose signature face reads as a UI sans/mono\n * (`grotesk`, `motir-mono`, `mono-technical`) ALSO re-points the body/UI role\n * (`--font-sans`) in its `[data-type]` block. The display-serif `editorial` and\n * the all-Inter `motir` / `motir-sans` keep the Inter body for legibility.\n * Each later \"Type: …\" subtask ADDS its entry here + a `[data-type]` block (its\n * face loaded in `app/layout.tsx`) + its `docs/typography/<id>.md`.\n */\n\n/** A registered, runtime-selectable type pairing. */\nexport interface TypographyDefinition {\n  /** The `data-type` attribute value. Stable; used as the localStorage value. */\n  id: string;\n  /** Display name shown in the gallery / `/tokens` toggle. */\n  name: string;\n  /** One-line characterization of the typographic feel. */\n  tagline: string;\n  /** The headline / body / mono face mapping (credit / what it loads). */\n  faces: string;\n  /**\n   * Repo-relative path to this pairing's doc — the type-role reference a later\n   * getdesign-style swap or the `/tokens` composer reads. Every registered\n   * pairing maps to exactly one.\n   */\n  designDoc: string;\n}\n\n/**\n * The registry. Insertion order is the gallery order. Each non-base `id`\n * matches a `[data-type='<id>']` block in app/globals.css (`motir` is the base,\n * so its block is the Tier-0 `--font-*` defaults — no override block needed).\n */\nexport const TYPE_REGISTRY = {\n  motir: {\n    id: 'motir',\n    name: 'Motir',\n    tagline: 'Editorial serif headlines over a clean sans body — the house pairing.',\n    faces: 'Source Serif 4 headlines · Inter body · JetBrains Mono meta.',\n    designDoc: 'docs/typography/motir.md',\n  },\n  'motir-sans': {\n    id: 'motir-sans',\n    name: 'Motir Sans',\n    tagline: 'All-sans — Inter for headlines and body; structural, no serif.',\n    faces: 'Inter headlines + body · JetBrains Mono meta.',\n    designDoc: 'docs/typography/motir-sans.md',\n  },\n  'motir-mono': {\n    id: 'motir-mono',\n    name: 'Motir Mono',\n    tagline: 'Monospace throughout — a code-native UI, headlines, body and all.',\n    faces: 'JetBrains Mono headlines + body/UI + meta.',\n    designDoc: 'docs/typography/motir-mono.md',\n  },\n  grotesk: {\n    id: 'grotesk',\n    name: 'Grotesk',\n    tagline: 'Geometric neo-grotesque across the whole UI — tight, confident, product-y.',\n    faces: 'Space Grotesk headlines + body/UI · JetBrains Mono meta.',\n    designDoc: 'docs/typography/grotesk.md',\n  },\n  editorial: {\n    id: 'editorial',\n    name: 'Editorial',\n    tagline: 'A characterful display serif over a humanist sans — magazine, considered.',\n    faces: 'Fraunces display headlines · Inter body · JetBrains Mono meta.',\n    designDoc: 'docs/typography/editorial.md',\n  },\n  'mono-technical': {\n    id: 'mono-technical',\n    name: 'Mono-Technical',\n    tagline: 'IBM Plex Mono throughout — a precise, developer-grade UI.',\n    faces: 'IBM Plex Mono headlines + body/UI + meta/code.',\n    designDoc: 'docs/typography/mono-technical.md',\n  },\n} satisfies Record<string, TypographyDefinition>;\n\n/** The id of every registered pairing — `data-type` value space. */\nexport type TypeId = keyof typeof TYPE_REGISTRY;\n\n/** All registered pairing ids, in gallery order. */\nexport const TYPE_IDS = Object.keys(TYPE_REGISTRY) as TypeId[];\n\n/**\n * The default pairing a fresh install / unset preference resolves to when the\n * active style declares none. Motir is the house pairing and the Tier-0 base.\n */\nexport const DEFAULT_TYPE_ID: TypeId = 'motir';\n\n/** Narrowing guard — is an arbitrary string a registered pairing id? */\nexport function isTypeId(value: unknown): value is TypeId {\n  return typeof value === 'string' && Object.prototype.hasOwnProperty.call(TYPE_REGISTRY, value);\n}\n\n/** Resolve a (possibly stale / unknown) value to a valid pairing definition. */\nexport function resolveType(value: unknown): TypographyDefinition {\n  return TYPE_REGISTRY[isTypeId(value) ? value : DEFAULT_TYPE_ID];\n}\n","/**\n * The Motir STYLE LIBRARY — the named-aesthetic registry (Subtask 7.3.32).\n *\n * A \"style\" is a named, end-to-end AESTHETIC the whole UI can swap to at\n * runtime — the foundation the onboarding design wizard (7.3.27) and the\n * `/tokens` composer (7.3.30) build on. It is the SHAPE/feel axis, and it is\n * deliberately INDEPENDENT of the COLOR axis (`data-palette` — see below): a\n * style decides how the product FEELS (silhouette, stroke, elevation, surface\n * treatment, density, motion, typography, component silhouettes); a palette\n * decides what colours it WEARS. Picking a style never changes a hue, and\n * picking a palette never changes a radius.\n *\n * ── The two-axis runtime contract ───────────────────────────────────────\n *   data-style=\"<style-id>\"      — THIS axis. Layers per-style shape/feel\n *                                  tokens (+ component-variant overrides) over\n *                                  the Tier-0 base scale in app/globals.css.\n *   data-palette=\"<palette-id>\"  — the INDEPENDENT colour axis (re-skins the\n *                                  `--el-*` layer). Orthogonal to data-style.\n *   data-theme=\"light|dark\"      — the light/dark base within a palette.\n *\n * A `[data-style='…']` TOKEN block in globals.css MUST override ONLY shape/feel\n * tokens (radius / spacing / shadow / sizing / transition / type) — NEVER a\n * `--color-*` or `--el-*` colour token. That is the palette axis's job, and\n * keeping the two disjoint is what makes \"style × palette\" a true product of\n * two independent choices rather than 2×N hand-tuned combinations.\n *\n * A SURFACE-MATERIAL style (glassmorphism, 7.3.35; later cybercore, aurora,\n * neumorphism …) owns a richer surface — translucency, a gradient canvas,\n * frosted backdrop-blur — that the token block cannot express. It adds a\n * palette-DERIVED MATERIAL LAYER: style-scoped component rules\n * (`[data-style='id'] [data-surface='…'] { … }`) whose colour comes ONLY from\n * `color-mix()`/`var(--color-*|--el-*)` over the ACTIVE palette, never a raw\n * hue — so the two axes stay disjoint (a palette swap re-tints the material; a\n * style swap leaves hues untouched). Surfaces opt in via the `data-surface`\n * hook the shared primitives emit. Both rules are enforced by\n * tests/theme/styleRegistry.test.ts.\n *\n * ── Why a style is MORE than a token swap ───────────────────────────────\n * The feel-bearing DIMENSIONS below are the axes a pure token swap ignores:\n * two styles can share the Tier-0 scale yet feel utterly different because\n * their silhouette, elevation philosophy, surface treatment, and component\n * silhouettes diverge. The registry names those dimensions so each style (and\n * its DESIGN.md) is authored against the same rubric.\n *\n * This module is the schema + the registration of the styles. Each \"Style: …\"\n * subtask (7.3.33–7.3.42) ADDS its entry here, ships a `[data-style='<id>']`\n * token block in globals.css (plus, for a surface-material style, the\n * palette-derived material layer above), and authors its `docs/styles/<id>.md`\n * DESIGN.md.\n */\n\nimport { DEFAULT_TYPE_ID, type TypeId } from './typography';\n\n/**\n * The feel-bearing axes a named style controls. A token-only swap reaches the\n * first few; the rest (surface treatment, motion, typography, component\n * silhouettes) are what give a style its identity and must be authored, not\n * derived. The order here is the canonical presentation order (the `/tokens`\n * page + each style's DESIGN.md walk them in this sequence).\n */\nexport const STYLE_DIMENSIONS = [\n  {\n    key: 'silhouette',\n    label: 'Shape / silhouette',\n    description:\n      'Corner-radius personality — sober rectangles vs. soft pills vs. hard right angles.',\n  },\n  {\n    key: 'stroke',\n    label: 'Border / stroke',\n    description: 'Hairline vs. heavy outline; whether structure is drawn with borders at all.',\n  },\n  {\n    key: 'elevation',\n    label: 'Elevation philosophy',\n    description: 'How depth is expressed — soft diffuse shadows, hard offset shadows, or flat.',\n  },\n  {\n    key: 'surface',\n    label: 'Surface / background treatment',\n    description:\n      'Opaque cards vs. translucent glass vs. tinted washes — the material of a surface.',\n  },\n  {\n    key: 'density',\n    label: 'Density rhythm',\n    description: 'Padding/sizing cadence — compact and efficient vs. roomy and relaxed.',\n  },\n  {\n    key: 'motion',\n    label: 'Motion',\n    description: 'Transition speed and easing — snappy, gentle, or springy.',\n  },\n  {\n    key: 'typography',\n    label: 'Typography',\n    description:\n      \"The style's DEFAULT type pairing — type is the independent `data-type` axis now (see ./typography.ts + `defaultTypeId`); this describes the pairing the style ships with: editorial serif, all-sans, or mono headlines.\",\n  },\n  {\n    key: 'components',\n    label: 'Component silhouettes',\n    description:\n      'Per-component shape overrides beyond tokens (e.g. a pill button vs. a square one).',\n  },\n] as const;\n\nexport type StyleDimensionKey = (typeof STYLE_DIMENSIONS)[number]['key'];\n\n/** A registered, runtime-selectable style. */\nexport interface StyleDefinition {\n  /** The `data-style` attribute value. Stable; used as the localStorage value. */\n  id: string;\n  /** Display name shown in the gallery / `/tokens` toggle. */\n  name: string;\n  /** One-line characterization of the feel. */\n  tagline: string;\n  /** Where the look is drawn from (credit / mood anchor). */\n  inspiration: string;\n  /** One line per feel-bearing dimension — the authored rubric for this style. */\n  dimensions: Record<StyleDimensionKey, string>;\n  /**\n   * Repo-relative path to this style's DESIGN.md — the doc the `/tokens` page\n   * composes (and a later getdesign-style swap reads). Every registered style\n   * maps to exactly one.\n   */\n  designDoc: string;\n  /**\n   * The type pairing (`data-type`, see ./typography.ts) this style applies when\n   * the user has NOT pinned an explicit type — the style's curated default,\n   * overridable. Type is its own axis now; this is how a style keeps its\n   * out-of-the-box typographic feel (e.g. swiss → `motir-sans`, neo-brutalism /\n   * cybercore-y2k → `motir-mono`) without owning `--font-*` in its own block.\n   */\n  defaultTypeId: TypeId;\n}\n\n/**\n * The registry. Insertion order is the gallery order. Each `id` matches a\n * `[data-style='<id>']` block in app/globals.css (Warm Editorial is the base,\n * so its block is the Tier-0 defaults — no override block needed).\n */\nexport const STYLE_REGISTRY = {\n  'warm-editorial': {\n    id: 'warm-editorial',\n    name: 'Warm Editorial',\n    tagline: 'Thoughtful, warm, technical-but-not-cold, slightly editorial.',\n    inspiration: \"Notion's warm palette + Source Serif headlines over Inter body.\",\n    designDoc: 'docs/styles/warm-editorial.md',\n    defaultTypeId: 'motir',\n    dimensions: {\n      silhouette: 'Sober rectangles — 8px buttons, 12px cards. Restrained, document-like.',\n      stroke: 'Hairline borders (1px warm-grey); structure drawn quietly, never heavy.',\n      elevation: 'Modest, low-spread shadows; surfaces sit close to the page.',\n      surface: 'Opaque cream surfaces over a white canvas; pastel tints for feature cards only.',\n      density: 'Comfortable default rhythm — 18×10 button padding, 24px card padding.',\n      motion: 'Brisk 150ms ease; understated, gets out of the way.',\n      typography: 'Source Serif 4 editorial headlines + Inter body + JetBrains Mono meta.',\n      components:\n        'Rectangular buttons/inputs, hairline-bordered cards, badge pills for status only.',\n    },\n  },\n  'soft-playful': {\n    id: 'soft-playful',\n    name: 'Soft / Playful',\n    tagline: 'More energy — rounded, generous, gently animated.',\n    inspiration: \"Figma's pill-shape language (50px pills, roomy spacing).\",\n    designDoc: 'docs/styles/soft-playful.md',\n    defaultTypeId: 'motir',\n    dimensions: {\n      silhouette: 'Pill buttons (fully rounded) and large 24px card/input radii. Friendly, bubbly.',\n      stroke: 'Same hairline borders as the base; identity comes from radius, not stroke weight.',\n      elevation: 'Softer, more diffused shadows — surfaces float a touch more.',\n      surface: 'Opaque, like the base — colour stays the palette axis; only the shape softens.',\n      density: 'Roomier — 20×12 button padding, 28px card padding, taller controls.',\n      motion: 'Gentler 200ms ease and a slightly deeper press scale for a springy feel.',\n      typography: 'Inherits the base type pairing; the personality is in shape, not type.',\n      components: 'Pill buttons, heavily-rounded inputs/cards/modals, rounder small affordances.',\n    },\n  },\n  'swiss-minimal-flat': {\n    id: 'swiss-minimal-flat',\n    name: 'Swiss / Minimal-Flat',\n    tagline: 'International-typographic, structural, calm — flat, sharp, gridded.',\n    inspiration: 'Swiss International Typographic Style — Müller-Brockmann grids, flat surfaces.',\n    designDoc: 'docs/styles/swiss-minimal-flat.md',\n    defaultTypeId: 'motir-sans',\n    dimensions: {\n      silhouette:\n        'Sharp near-square corners (2px) on every surface — hard right angles, structural.',\n      stroke:\n        'Hairline borders do ALL the structural work; with elevation removed, the 1px rule is the only divider.',\n      elevation:\n        'Flat — every shadow is removed (none). Depth comes from borders + whitespace, not lift.',\n      surface:\n        'Opaque, untinted panels delineated by hairline rules; no floating, no glass, no wash.',\n      density:\n        'Tight, gridded controls (crisp 16×9 buttons, 34px control height) with generous 28px card whitespace.',\n      motion:\n        'Minimal — fast 100ms transitions and NO press-scale (calm, mechanical, never springy).',\n      typography:\n        'Restrained neo-grotesque sans throughout — headlines drop the editorial serif for Inter, tight and strong.',\n      components:\n        'Square buttons/inputs/cards/modals, rectangular (non-pill) status chips, flat hairline-ruled surfaces.',\n    },\n  },\n  'neo-brutalism': {\n    id: 'neo-brutalism',\n    name: 'Neo-Brutalism',\n    tagline: 'Raw, punchy, utilitarian — 0px corners, thick borders, hard-offset shadows.',\n    inspiration:\n      'Neo-brutalist web design — Gumroad / Figma-community brutalism: blocky, unpolished, loud.',\n    designDoc: 'docs/styles/neo-brutalism.md',\n    defaultTypeId: 'motir-mono',\n    dimensions: {\n      silhouette:\n        'Zero radius — hard 0px corners on EVERY surface (buttons, cards, inputs, modals, status chips). Blocky and uncompromising.',\n      stroke:\n        'Heavy solid 2px outlines do the structural work — borders are LOUD, not hairline (the defining neo-brutalist move, applied via a style-scoped component-variant block).',\n      elevation:\n        'Hard-offset drop shadows with ZERO blur (e.g. 4px 4px 0 0) — a solid block of shadow, never a soft lift; the chunky frame, not diffusion.',\n      surface:\n        'Opaque, flat, untinted panels framed by the thick border + the hard shadow; no glass, no wash, no gradient.',\n      density:\n        'Tight, utilitarian controls (16×10 buttons, 36px control height) with compact 20px card padding — no wasted space.',\n      motion:\n        'Snappy and mechanical — near-instant 60ms transitions and NO press-scale; the UI reacts, it does not animate.',\n      typography:\n        'Raw monospace headlines — the editorial serif is re-pointed at the JetBrains Mono stack, against the Inter grotesk body.',\n      components:\n        'Square buttons/inputs/cards/modals, rectangular (non-pill) status chips, thick-bordered surfaces with hard-offset shadows.',\n    },\n  },\n  glassmorphism: {\n    id: 'glassmorphism',\n    name: 'Glassmorphism',\n    tagline: 'Translucent frosted glass floating over a soft, vibrant gradient.',\n    inspiration:\n      \"Apple's visionOS / macOS Big Sur 'frosted glass' material — backdrop-blur over depth.\",\n    designDoc: 'docs/styles/glassmorphism.md',\n    defaultTypeId: 'motir',\n    dimensions: {\n      silhouette:\n        'Soft, rounded glass tiles — 12px buttons/inputs, 18px cards, 22px modals. Friendly, never sharp.',\n      stroke:\n        'Light 1px hairlines at reduced opacity — a glass edge catching light, not a structural rule.',\n      elevation:\n        'Layered, diffuse, low-opacity shadows — panels float as hovering frosted sheets above the canvas.',\n      surface:\n        'The identity axis: translucent frosted panels (backdrop-blur) over a soft palette-derived gradient canvas — material, not opaque.',\n      density:\n        'Comfortable, a touch roomy — 20×11 buttons, 26px card padding, 38px controls; glass tiles want air.',\n      motion:\n        'Gentle, smooth — 220ms ease and a light press-scale; glass slides into place, it never snaps.',\n      typography:\n        'Inherits the base editorial type pairing; the personality is in the material, not the type.',\n      components:\n        'Rounded frosted cards / popovers / modals / sidebar / inputs (the data-surface material layer), pill status chips.',\n    },\n  },\n  'cybercore-y2k': {\n    id: 'cybercore-y2k',\n    name: 'Cybercore / Y2K',\n    tagline: 'Neon-on-dark retro-tech — glowing HUD panels, a tech grid, mono headlines.',\n    inspiration:\n      'Y2K / cyberpunk HUDs — neon-on-dark terminals, Tron grids, glowing edges, monospace displays.',\n    designDoc: 'docs/styles/cybercore-y2k.md',\n    defaultTypeId: 'motir-mono',\n    dimensions: {\n      silhouette:\n        'Hard terminal-frame corners (sharp 2–4px) — chiseled HUD panels, not soft cards.',\n      stroke:\n        'Structure drawn by a lit edge — a 1px glow-ring (currentColor halo) on every surface, not a heavier border.',\n      elevation:\n        'Neon GLOW instead of drop-shadow — surfaces emit an outward currentColor halo, lit rather than lifted.',\n      surface:\n        'A faint tech grid (scanline/grid texture) washes the canvas behind opaque HUD panels.',\n      density:\n        'Tight, technical HUD rhythm — compact controls (18×9 buttons, 34px control height) over snug 20px card padding.',\n      motion: 'Snappy and electric — very fast 90ms transitions with a crisp press-scale.',\n      typography:\n        'Mono/display headlines — the serif headline face is swapped to JetBrains Mono for a terminal read; body stays sans.',\n      components:\n        'Sharp glow-ringed panels, mono headings, rectangular chips; the lit edge replaces the drop shadow everywhere.',\n    },\n  },\n  aurora: {\n    id: 'aurora',\n    name: 'Aurora',\n    tagline: 'Soft, drifting aurora light behind fluid, gently-glowing surfaces.',\n    inspiration:\n      'The northern lights — slow ribbons of colour over a night sky — and the soft animated-gradient \"aurora\" hero look (Stripe / Vercel ambient gradients).',\n    designDoc: 'docs/styles/aurora.md',\n    defaultTypeId: 'motir',\n    dimensions: {\n      silhouette:\n        'Fluid, soft corners — 14px buttons/inputs, 20px cards, 26px modals. Organic and rounded, a touch softer than glass.',\n      stroke:\n        'Quiet 1px hairlines; structure is implied by the gentle glow and elevation, never drawn by a heavy rule.',\n      elevation:\n        'A soft neutral lift PLUS a gentle palette-derived COLOUR glow halo — surfaces feel lit from within, never hard-edged.',\n      surface:\n        'The identity axis: opaque fluid surfaces floating over a slowly-DRIFTING, animated aurora gradient canvas (palette-derived ribbons).',\n      density:\n        'Comfortable and roomy — 20×11 buttons, 26px card padding, 38px controls; the light wants space to breathe.',\n      motion:\n        'Smooth and slow — 260ms eased transitions, a faint press-scale, and a 28s ambient drift of the aurora canvas (stilled under prefers-reduced-motion).',\n      typography:\n        'Inherits the base editorial pairing (Source Serif headlines + Inter body); the personality is in the moving light, not the type.',\n      components:\n        'Fluid, gently-glowing cards / popovers / modals / sidebar (the data-surface material layer); pill status chips.',\n    },\n  },\n  '3d-immersive': {\n    id: '3d-immersive',\n    name: '3D / Immersive',\n    tagline: 'Depth and perspective — dimensional cards floating over the page.',\n    inspiration:\n      'Spatial / depth UI — visionOS spatial layers, Stripe-era layered cards, soft real-world light.',\n    designDoc: 'docs/styles/3d-immersive.md',\n    defaultTypeId: 'motir',\n    dimensions: {\n      silhouette:\n        'Generously rounded dimensional tiles — 14px buttons/inputs, 20px cards, 28px modals. Soft, tactile, never sharp.',\n      stroke:\n        'Borders nearly vanish (a faint hairline) — structure is read from depth + shadow, not an outline.',\n      elevation:\n        'The identity axis: deep multi-layer shadows float every surface off the canvas, and on tilt a card becomes a TRUE 3D object — perspective + preserve-3d + per-slot translateZ planes (header pops forward, footer behind) parallax under a cursor-tracked glare. Not a flat-plane tilt.',\n      surface:\n        'A palette-derived immersive background atmosphere on every page, with opaque dimensional panels (cards, tables, board columns, widgets) floating above it on deep resting shadows — depth (not tint or glass) is the material; nothing sits flat.',\n      density:\n        'Roomy and immersive — 22×12 buttons, 28px card padding, 40px controls; depth wants air around each tile.',\n      motion:\n        'The standard \"3D card\" pointer-parallax — tiles tip toward the cursor (rotateX/rotateY over a perspective) via the ImmersiveTilt engine, lifting as they turn; reduced-motion-gated, settling flat on leave.',\n      typography:\n        'Inherits the base editorial type pairing; the personality is in depth + light, not the type.',\n      components:\n        'Rounded cards / board cards / modals that tilt toward the pointer with layered parallax; PHYSICAL buttons with real thickness (a solid base edge) that press DOWN on click; each board column floats as its own card. Nothing is flat.',\n    },\n  },\n  neumorphism: {\n    id: 'neumorphism',\n    name: 'Neumorphism',\n    tagline: 'Soft extruded surfaces that swell out of a single monochrome field.',\n    inspiration:\n      'Neumorphism / soft-UI — Dribbble-era \"soft shadow\" interfaces where panels are pressed OUT of (or INTO) one continuous surface by a paired light + dark shadow.',\n    designDoc: 'docs/styles/neumorphism.md',\n    defaultTypeId: 'motir',\n    dimensions: {\n      silhouette:\n        'Soft, generously rounded pebbles — 12px buttons/inputs, 18px cards, 22px modals. Tactile and friendly, the rounding that lets a shadow wrap a surface.',\n      stroke:\n        'Borders nearly vanish — a faint hairline kept ONLY as the accessibility fallback (see below); structure is read from the paired soft shadow, not an outline.',\n      elevation:\n        'The identity axis: a DUAL soft shadow — a light highlight top-left + a palette-derived dark shadow bottom-right — extrudes each surface OUT of the canvas (raised), while inputs and pressed controls invert it to an INSET well (pressed in). Depth is a soft swell, never a hard drop.',\n      surface:\n        'Monochrome and continuous: the page canvas and every panel share ONE opaque palette surface, so a card looks moulded out of the background rather than placed on top of it — the soft-UI \"single material\" look. Opaque (text AA preserved), with the depth carried entirely by the shadows.',\n      density:\n        'Comfortable and roomy — 20×11 buttons, 26px card padding, 38px controls; the soft shadows need air around each surface to read as extruded.',\n      motion:\n        'Gentle — 200ms ease and a soft press-scale; nothing snaps, matching the moulded surfaces (form fields rest as concave inset wells, panels swell out raised).',\n      typography:\n        'Inherits the base editorial type pairing; the personality is in the moulded surfaces, not the type.',\n      components:\n        'Raised, soft-shadowed cards / popovers / modals / sidebar (the data-surface material layer); concave inset inputs; pill status chips. Every surface swells from or sinks into the one field.',\n    },\n  },\n  'hand-drawn-indie': {\n    id: 'hand-drawn-indie',\n    name: 'Hand-Drawn / Indie',\n    tagline:\n      'Sketchy and friendly — rough hand-inked edges, wonky corners, soft offset shadows, a playful bounce.',\n    inspiration:\n      'Indie / zine + hand-drawn web design — Excalidraw’s rough hand-sketched strokes and doodled notebook UIs: warm, imperfect, human.',\n    designDoc: 'docs/styles/hand-drawn-indie.md',\n    defaultTypeId: 'editorial',\n    dimensions: {\n      silhouette:\n        'Wonky hand-drawn corners — every surface gets a strongly asymmetric multi-value radius (one corner near-sharp, the opposite generously round, no two alike) so cards/buttons/inputs read as DRAWN boxes, never machined rectangles.',\n      stroke:\n        'Genuinely ROUGH, wavy ink edges — a turbulence-displacement filter (Excalidraw / rough.js style) warps each outline into a hand-inked wobble, drawn on a content-safe pseudo-border so the lines are sketchy but the text stays crisp.',\n      elevation:\n        'Soft, hand-placed offset shadows — a gentle blurred drop nudged down-right (a doodled shadow), friendly and low; never a hard brutalist block nor a flat removal.',\n      surface:\n        'Opaque, warm, paper-like panels — colour stays the palette axis; the personality is in the rough wavy outline + the soft shadow, not a tint or a wash.',\n      density:\n        'Roomy and relaxed — generous 20×12 buttons, 26px card padding, taller 38px controls; the hand-drawn feel wants air, like margins round a sketch.',\n      motion:\n        'Springy and playful — gentle 200ms transitions with a bouncy hover lift (1.02) and a deeper press squish (0.97); the UI has a friendly wobble.',\n      typography:\n        'Ships the Editorial pairing (Fraunces display headlines + Inter body) — the warmest, most characterful registered face, its soft optical wonk echoing the hand-drawn shapes; an actual marker/script face is a future data-type addition.',\n      components:\n        'Wonky-cornered buttons/inputs/cards/modals, irregular (non-pill) status chips, rough wavy-ink-bordered surfaces with soft hand-placed shadows.',\n    },\n  },\n  retrofuturism: {\n    id: 'retrofuturism',\n    name: 'Retrofuturism',\n    tagline: 'Chrome, gradient sweeps and a synthwave horizon — 70s/80s sci-fi.',\n    inspiration:\n      'Retrofuturism / Outrun — 70s–80s sci-fi: chrome lettering, synthwave sunset gradients, airbrushed sci-fi paperbacks, and wide geometric display type.',\n    designDoc: 'docs/styles/retrofuturism.md',\n    defaultTypeId: 'grotesk',\n    dimensions: {\n      silhouette:\n        'Streamlined chrome capsules — fully-rounded pill buttons + chips, 16px cards, 22px modals. Aerodynamic 70s/80s curves, never sharp.',\n      stroke:\n        'A lit chrome edge — a bright inset highlight + a dark base line over a faint hairline, reading as a polished metal rim rather than a drawn border.',\n      elevation:\n        'Chrome bevels + a diagonal SPECULAR streak + a palette-derived glow — a bright top highlight fading to a dark base with a swept light-bar across each panel, so surfaces read as polished reflective metal, not flat cards.',\n      surface:\n        'The identity axis: a synthwave SKY + a bright HORIZON GLOW band + a receding neon perspective GRID floor (all palette-derived) behind chrome-bevelled, specular-streaked surfaces. Dark-first — the neon horizon + grid read strongest on a dark palette.',\n      density:\n        'Confident and roomy — 22×11 chrome-capsule buttons, 24px card padding, 38px controls; the chrome wants room to catch the light.',\n      motion:\n        'Smooth and gliding — 200ms eased transitions and a confident press-scale; the synthwave horizon + grid are a STATIC backdrop (no motion to distract the work surface).',\n      typography:\n        'Wide geometric grotesque display (the `grotesk` type pairing) — the retro-futurist sci-fi headline read; body stays a legible sans.',\n      components:\n        'Chrome-capsule buttons with a metallic glint, specular-streaked bevelled cards / popovers / modals / sidebar / inputs (the data-surface material layer), pill status chips — a synthwave horizon + neon grid behind it all.',\n    },\n  },\n} satisfies Record<string, StyleDefinition>;\n\n/** The id of every registered style — `data-style` value space. */\nexport type StyleId = keyof typeof STYLE_REGISTRY;\n\n/** All registered style ids, in gallery order. */\nexport const STYLE_IDS = Object.keys(STYLE_REGISTRY) as StyleId[];\n\n/**\n * The default style a fresh install / unset preference resolves to. Warm\n * Editorial is Motir's house style and the Tier-0 base.\n */\nexport const DEFAULT_STYLE_ID: StyleId = 'warm-editorial';\n\n/** Narrowing guard — is an arbitrary string a registered style id? */\nexport function isStyleId(value: unknown): value is StyleId {\n  return typeof value === 'string' && Object.prototype.hasOwnProperty.call(STYLE_REGISTRY, value);\n}\n\n/** Resolve a (possibly stale / unknown) value to a valid style definition. */\nexport function resolveStyle(value: unknown): StyleDefinition {\n  return STYLE_REGISTRY[isStyleId(value) ? value : DEFAULT_STYLE_ID];\n}\n\n/**\n * styleId → its `defaultTypeId` — the type pairing applied when the user has\n * not pinned an explicit `data-type`. Baked into the FOUC init script (so the\n * pre-hydration pass can resolve the right type for the active style) and used\n * by the theme context's effective-type derivation. `resolveType` (the\n * registry) supplies the ultimate fallback, so every value here is a real id.\n */\nexport const STYLE_DEFAULT_TYPE: Record<StyleId, TypeId> = Object.fromEntries(\n  STYLE_IDS.map((id) => [id, STYLE_REGISTRY[id].defaultTypeId]),\n) as Record<StyleId, TypeId>;\n\n/** The default type for a (possibly unknown) style value — the fallback chain. */\nexport function defaultTypeForStyle(styleValue: unknown): TypeId {\n  return isStyleId(styleValue) ? STYLE_REGISTRY[styleValue].defaultTypeId : DEFAULT_TYPE_ID;\n}\n","/**\n * The Motir PALETTE LIBRARY — the named-colour registry (Subtask 7.3.48).\n *\n * A \"palette\" is a named COLOUR scheme the whole UI can swap to at runtime —\n * the second half of the two-axis contract the style schema (7.3.32) wrote but\n * did not implement. It is the COLOUR/hue axis, and it is deliberately\n * INDEPENDENT of the SHAPE axis (`data-style` — see ./styles.ts): a palette\n * decides what colours the product WEARS (surfaces, ink, accent, tints,\n * semantic hues); a style decides how it FEELS (silhouette, elevation,\n * density, motion). Picking a palette never changes a radius, and picking a\n * style never changes a hue.\n *\n * ── The two-axis runtime contract ───────────────────────────────────────\n *   data-palette=\"<palette-id>\" — THIS axis. Layers per-palette `--el-*`\n *                                 element-token overrides over the Tier-3\n *                                 base in app/globals.css.\n *   data-style=\"<style-id>\"     — the INDEPENDENT shape/feel axis.\n *   data-theme=\"light|dark\"     — the light/dark base WITHIN a palette\n *                                 (`--color-*`); orthogonal to the palette.\n *\n * A `[data-palette='…']` block in globals.css MUST override ONLY `--el-*`\n * element colour tokens — NEVER a shape/feel token (radius / spacing / shadow\n * / sizing / motion / type). That is the style axis's job, and keeping the two\n * disjoint is what makes \"style × palette\" a true product of two independent\n * choices rather than N×M hand-tuned combinations.\n *\n * ── v1 — Motir's own palette ─────────────────────────────────────────────\n * v1 ships exactly ONE registered palette: **Motir** — the warm, Notion-warm\n * scheme the product already wears (cream surfaces, charcoal ink, purple\n * primary, pastel feature tints). It is the Tier-0/Tier-3 BASE, so — exactly\n * like the `warm-editorial` base style — it needs NO `[data-palette]` override\n * block; the base `--el-*` tokens already are it. (Per Yue, 2026-06-17: \"use\n * Motir's colour palette for the v1.\") Each later \"Palette: …\" subtask ADDS its\n * entry here, ships a `[data-palette='<id>']` block in globals.css overriding\n * the `--el-*` layer, and authors its `docs/palettes/<id>.md` doc — exactly the\n * shape the per-style subtasks (7.3.33+) follow on the other axis.\n */\n\n/** A registered, runtime-selectable colour palette. */\nexport interface PaletteDefinition {\n  /** The `data-palette` attribute value. Stable; used as the localStorage value. */\n  id: string;\n  /** Display name shown in the gallery / `/tokens` toggle. */\n  name: string;\n  /** One-line characterization of the colour mood. */\n  tagline: string;\n  /** Where the colours are drawn from (credit / mood anchor). */\n  inspiration: string;\n  /**\n   * Repo-relative path to this palette's doc — the colour-role reference a\n   * later getdesign-style swap or the `/tokens` composer reads. Every\n   * registered palette maps to exactly one.\n   */\n  designDoc: string;\n}\n\n/**\n * The registry. Insertion order is the gallery order. Each `id` matches a\n * `[data-palette='<id>']` block in app/globals.css (Motir is the base, so its\n * block is the Tier-3 defaults — no override block needed).\n */\nexport const PALETTE_REGISTRY = {\n  motir: {\n    id: 'motir',\n    name: 'Motir',\n    tagline: 'Warm and editorial — cream surfaces, charcoal ink, a purple primary, pastel tints.',\n    inspiration: \"Notion's warm marketing palette — the product's house colours.\",\n    designDoc: 'docs/palettes/motir.md',\n  },\n  cobalt: {\n    id: 'cobalt',\n    name: 'Cobalt',\n    tagline:\n      'Cool and institutional — slate-cool surfaces, a confident cobalt primary, cooled tints.',\n    inspiration:\n      \"Coinbase's clean institutional blue + IBM's structured blue, on Radix Blue/Indigo/Slate scales.\",\n    designDoc: 'docs/palettes/cobalt.md',\n  },\n  graphite: {\n    id: 'graphite',\n    name: 'Graphite',\n    tagline:\n      'Stark and editorial — cool greyscale surfaces + ink, an ink CTA, a single restrained cool-blue accent.',\n    inspiration:\n      \"Vercel's black-and-white precision + Linear's ultra-minimal, on Radix Slate/Blue scales.\",\n    designDoc: 'docs/palettes/graphite.md',\n  },\n  evergreen: {\n    id: 'evergreen',\n    name: 'Evergreen',\n    tagline:\n      'Fresh and technical — an emerald primary over cooled forest neutrals, a green-leaning UI.',\n    inspiration:\n      'getdesign.md — Supabase (dark emerald) / Spotify (vibrant green) / MongoDB (spring green), on Radix green/jade ramps.',\n    designDoc: 'docs/palettes/evergreen.md',\n  },\n  spectrum: {\n    id: 'spectrum',\n    name: 'Spectrum',\n    tagline:\n      'Vibrant and playful — crisp cool surfaces, a bright violet primary, a candy-bright multi-hue accent & tint set.',\n    inspiration:\n      \"Figma's vibrant multi-colour brand + Airtable's colourful, friendly palette, on Radix Violet/Iris/Pink/Blue scales.\",\n    designDoc: 'docs/palettes/spectrum.md',\n  },\n  amber: {\n    id: 'amber',\n    name: 'Amber',\n    tagline:\n      'Warm and electric — Binance trading-floor gold over the exchange’s graphite near-blacks; dark labels on the gold.',\n    inspiration:\n      'Binance — its whole documented palette: the bold gold #F0B90B/#FCD535 over cool graphite trading-floor blacks (#0B0E11/#1E2329) + greys, with the buy-green/sell-red semantics.',\n    designDoc: 'docs/palettes/amber.md',\n  },\n  sienna: {\n    id: 'sienna',\n    name: 'Sienna',\n    tagline:\n      'Warm and vivid — Mistral flame-orange over the Mediterranean warm-cream surfaces; dark labels on the flame.',\n    inspiration:\n      'Mistral AI — its whole documented palette (getdesign.md/mistral.ai): the flame #fa520f + Block-gradient + Sunshine ambers over Warm-Ivory cream surfaces (#fffaeb) and Mistral-Black ink.',\n    designDoc: 'docs/palettes/sienna.md',\n  },\n  garnet: {\n    id: 'garnet',\n    name: 'Garnet',\n    tagline:\n      'Rich and bold — Pinterest Pushpin red over the brand’s neutral greys; white labels on the red.',\n    inspiration:\n      'Pinterest — its whole documented palette: Pushpin red #E60023/#BD081C over Cod-Gray ink (#111111) and neutral greys (#767676/#EFEFEF), with Gestalt “Skycicle” blue links.',\n    designDoc: 'docs/palettes/garnet.md',\n  },\n  citrine: {\n    id: 'citrine',\n    name: 'Citrine',\n    tagline:\n      'Bright and collaborative — Miro’s Sunglow yellow over the whiteboard greys, with the Miro action-blue accent.',\n    inspiration:\n      'Miro — its whole Mirotone palette (every value a documented Mirotone step): Sunglow yellow #FFD02F (primary) + the action-blue #3859FF over the gray ramp + Stratos ink #050038, with the green/red semantic ramps.',\n    designDoc: 'docs/palettes/citrine.md',\n  },\n  candy: {\n    id: 'candy',\n    name: 'Candy',\n    tagline:\n      'Sweet and playful — a light bubblegum-pink primary over candy-paper pinks, with a full pastel-candy rainbow.',\n    inspiration:\n      'A candy concept grounded entirely in documented Radix Colors scales (every value a Radix step): Pink primary + Mauve neutrals + a Sky/Jade/Violet/Amber/Crimson candy rainbow; Glossier Pink #F5DADF as the pastel-pink mood reference.',\n    designDoc: 'docs/palettes/candy.md',\n  },\n} satisfies Record<string, PaletteDefinition>;\n\n/** The id of every registered palette — `data-palette` value space. */\nexport type PaletteId = keyof typeof PALETTE_REGISTRY;\n\n/** All registered palette ids, in gallery order. */\nexport const PALETTE_IDS = Object.keys(PALETTE_REGISTRY) as PaletteId[];\n\n/**\n * The default palette a fresh install / unset preference resolves to. Motir is\n * the house palette and the Tier-3 base.\n */\nexport const DEFAULT_PALETTE_ID: PaletteId = 'motir';\n\n/** Narrowing guard — is an arbitrary string a registered palette id? */\nexport function isPaletteId(value: unknown): value is PaletteId {\n  return typeof value === 'string' && Object.prototype.hasOwnProperty.call(PALETTE_REGISTRY, value);\n}\n\n/** Resolve a (possibly stale / unknown) value to a valid palette definition. */\nexport function resolvePalette(value: unknown): PaletteDefinition {\n  return PALETTE_REGISTRY[isPaletteId(value) ? value : DEFAULT_PALETTE_ID];\n}\n","/**\n * Theme types for Motir's THREE-axis design system.\n *\n * Axis 1 — COLOR  (`data-theme` light/dark base · `data-palette` full\n *                  `--el-*` palette swap — the colour axis)\n * Axis 2 — STYLE  (`data-style` — a named aesthetic controlling shape /\n *                  silhouette / elevation / surface / density / motion /\n *                  component silhouettes)\n * Axis 3 — TYPE   (`data-type` — a named pairing controlling the `--font-*`\n *                  role mapping; a style declares a default pairing, overridable)\n *\n * The three axes are INDEPENDENT: a style never touches a hue or a face, a\n * palette never touches a radius, a type pairing never touches colour or shape.\n * The registries live in `./styles.ts`, `./palettes.ts`, `./typography.ts`.\n *\n * Architecture mirrors dooooWeb. See docs/DESIGN.md for the rationale.\n */\n\nimport { DEFAULT_STYLE_ID, type StyleId } from './styles';\nimport { DEFAULT_PALETTE_ID, type PaletteId } from './palettes';\nimport { DEFAULT_TYPE_ID, type TypeId } from './typography';\n\n/** Tier 1 — light/dark base. `system` follows OS preference at runtime. */\nexport type ThemePattern = 'system' | 'light' | 'dark';\n\n/** Resolved pattern (what data-theme is set to after `system` resolves). */\nexport type ResolvedThemePattern = 'light' | 'dark';\n\n/**\n * Axis 2 — the active named style (`data-style`). The value space + the\n * registry of every style live in `./styles.ts`; this re-export keeps\n * `lib/theme/*` the single import surface for theme consumers.\n */\nexport type { StyleId } from './styles';\n\n/**\n * Axis 1 (colour) — the active named palette (`data-palette`). The value space\n * + the registry of every palette live in `./palettes.ts`; re-exported here so\n * `lib/theme/*` stays the single import surface for theme consumers.\n */\nexport type { PaletteId } from './palettes';\n\n/**\n * Axis 3 — the active named type pairing (`data-type`). The value space + the\n * registry live in `./typography.ts`; re-exported here so `lib/theme/*` stays\n * the single import surface for theme consumers.\n */\nexport type { TypeId } from './typography';\n\n/** Storage keys for persisting user preferences. */\nexport const THEME_STORAGE_KEYS = {\n  pattern: 'motir.theme.pattern',\n  style: 'motir.theme.style',\n  palette: 'motir.theme.palette',\n  type: 'motir.theme.type',\n} as const;\n\n/**\n * Sensible defaults if localStorage is empty. Note `type` is the GLOBAL fallback\n * only — when no explicit type is pinned, the active STYLE's `defaultTypeId`\n * wins (see `STYLE_DEFAULT_TYPE` / the theme context); this is the floor under\n * an unknown style.\n */\nexport const THEME_DEFAULTS = {\n  pattern: 'system' as ThemePattern,\n  style: DEFAULT_STYLE_ID as StyleId,\n  palette: DEFAULT_PALETTE_ID as PaletteId,\n  type: DEFAULT_TYPE_ID as TypeId,\n} as const;\n\n/**\n * Narrowing guard — is an arbitrary value a valid `pattern` axis id? The\n * colour / style / type axes each ship `isXId` in their registry file; the\n * pattern axis is a fixed three-value union, so its guard lives here next to\n * the type. Mirrors `isStyleId` / `isPaletteId` / `isTypeId`.\n */\nexport function isThemePattern(value: unknown): value is ThemePattern {\n  return value === 'system' || value === 'light' || value === 'dark';\n}\n\n/**\n * Resolve a (possibly stale / unknown / null) value to a valid `pattern`,\n * falling back to `THEME_DEFAULTS.pattern`. The pattern-axis analogue of\n * `resolveStyle` / `resolvePalette` / `resolveType`.\n */\nexport function resolvePattern(value: unknown): ThemePattern {\n  return isThemePattern(value) ? value : THEME_DEFAULTS.pattern;\n}\n","'use client';\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ReactNode,\n} from 'react';\nimport {\n  THEME_DEFAULTS,\n  THEME_STORAGE_KEYS,\n  type ResolvedThemePattern,\n  type ThemePattern,\n} from '../theme/types';\nimport { DEFAULT_STYLE_ID, isStyleId, resolveStyle, type StyleId } from '../theme/styles';\nimport { DEFAULT_PALETTE_ID, isPaletteId, type PaletteId } from '../theme/palettes';\nimport { isTypeId, type TypeId } from '../theme/typography';\nimport type { AppearancePreferenceDto, AppliedAppearanceDto } from '../appearance';\n\n/**\n * Theme context for Motir's three-axis design system (style · palette · type),\n * plus the light/dark pattern.\n *\n * `pattern` is what the user picked (system | light | dark).\n * `resolvedPattern` is what's currently applied (light | dark) — these\n * differ when pattern='system' and the OS preference resolves to one or\n * the other.\n *\n * State is persisted to localStorage and re-applied to <html>'s\n * data-attributes on every change. The init script in app/layout.tsx\n * does the same work BEFORE React hydrates to avoid FOUC; this provider\n * keeps the attributes in sync after hydration.\n *\n * Implementation note: this uses lazy `useState` initializers and\n * `useSyncExternalStore` rather than `useEffect`+`setState`, per the\n * React 19 / react-hooks/set-state-in-effect rule. Setting state inside\n * effects causes cascading renders; subscribing to external systems\n * (localStorage, matchMedia) via the right primitives avoids that.\n */\ninterface ThemeContextValue {\n  pattern: ThemePattern;\n  resolvedPattern: ResolvedThemePattern;\n  /** The active named style (`data-style`) — Axis 2, independent of palette. */\n  styleId: StyleId;\n  /** The active named palette (`data-palette`) — Axis 1 (colour), independent of style. */\n  palette: PaletteId;\n  /**\n   * The EFFECTIVE type pairing (`data-type`) — Axis 3. Either the user's pinned\n   * choice, or (when unpinned) the active style's `defaultTypeId`. Independent\n   * of palette + style.\n   */\n  type: TypeId;\n  setPattern: (pattern: ThemePattern) => void;\n  setStyleId: (styleId: StyleId) => void;\n  setPalette: (palette: PaletteId) => void;\n  /** Pin an explicit type pairing (overrides the style's default until cleared). */\n  setType: (type: TypeId) => void;\n  /**\n   * Cross-device sync status (Subtask 7.3.62). `'idle'` while nothing has\n   * failed; `'error'` when the LAST attempt to persist a change to the account\n   * failed (a 401 / write failure) — the local switch still applied (it's in\n   * localStorage), so this only drives a quiet \"couldn't sync\" affordance. Always\n   * `'idle'` for an anonymous visitor, who never syncs. Clears back to `'idle'`\n   * on the next successful sync.\n   */\n  syncState: AppearanceSyncState;\n}\n\n/** The cross-device sync status surfaced to the Appearance pane (7.3.62). */\nexport type AppearanceSyncState = 'idle' | 'error';\n\n/** The axes a single PATCH carries — the setters only ever send valid ids. */\ntype AppearanceSyncPatch = Partial<Record<'pattern' | 'styleId' | 'paletteId' | 'typeId', string>>;\n\n/** How long rapid toggles of the SAME axis coalesce before one write fires. */\nconst SYNC_DEBOUNCE_MS = 250;\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\n/** Lazily read a localStorage key. Returns null on SSR or if the key isn't set. */\nfunction readStorage<T extends string>(key: string, fallback: T): T {\n  if (typeof window === 'undefined') return fallback;\n  try {\n    return (window.localStorage.getItem(key) as T | null) ?? fallback;\n  } catch {\n    return fallback;\n  }\n}\n\n/**\n * `useSyncExternalStore` subscription to the prefers-color-scheme media\n * query. Returns 'dark' or 'light' based on the OS preference.\n *\n * Server snapshot returns 'light' (a stable default — the FOUC init\n * script will apply the real value before hydration completes).\n */\nfunction subscribeColorScheme(callback: () => void): () => void {\n  if (typeof window === 'undefined') return () => {};\n  const mql = window.matchMedia('(prefers-color-scheme: dark)');\n  mql.addEventListener('change', callback);\n  return () => mql.removeEventListener('change', callback);\n}\n\nfunction getColorSchemeSnapshot(): ResolvedThemePattern {\n  if (typeof window === 'undefined') return 'light';\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\nfunction getColorSchemeServerSnapshot(): ResolvedThemePattern {\n  return 'light';\n}\n\nexport function ThemeProvider({\n  children,\n  initialPreference = null,\n  signedIn = false,\n}: {\n  children: ReactNode;\n  /**\n   * The signed-in user's APPLIED appearance, resolved server-side (Subtask\n   * 7.3.61). When present it SEEDS this island's state — the page-state\n   * contract: a client island must be GIVEN the server value, not left to\n   * re-read localStorage (which `useState` would do only at mount, ignoring the\n   * authoritative server pref and risking a flash from a stale value synced on\n   * another device). `null` (anonymous) keeps the original localStorage path.\n   */\n  initialPreference?: AppliedAppearanceDto | null;\n  /**\n   * Whether a user is signed in (Subtask 7.3.62). Only then does an axis change\n   * also PERSIST to the account via `/api/appearance-preference` (cross-device\n   * sync). Anonymous visitors keep the localStorage-only path and never fire a\n   * write — so they never hit a 401 or see a \"couldn't sync\" affordance. This is\n   * a SEPARATE signal from `initialPreference`: a signed-in user who has pinned\n   * nothing yet has `initialPreference === null` but must still sync their first\n   * pick (a row is created on the first PATCH).\n   */\n  signedIn?: boolean;\n}) {\n  // Lazy initializers — run once on first render. Seed from the server\n  // preference when signed in (authoritative, cross-device); otherwise read\n  // localStorage synchronously without an effect.\n  const [pattern, setPatternState] = useState<ThemePattern>(() =>\n    initialPreference\n      ? initialPreference.pattern\n      : readStorage<ThemePattern>(THEME_STORAGE_KEYS.pattern, THEME_DEFAULTS.pattern),\n  );\n  const [styleId, setStyleIdState] = useState<StyleId>(() => {\n    if (initialPreference) {\n      return isStyleId(initialPreference.styleId) ? initialPreference.styleId : DEFAULT_STYLE_ID;\n    }\n    // A stale / unknown stored value (e.g. a pre-7.3.32 `default`/`soft`\n    // display-style leftover) resolves to the default, never a dead id.\n    const stored = readStorage<string>(THEME_STORAGE_KEYS.style, THEME_DEFAULTS.style);\n    return isStyleId(stored) ? stored : DEFAULT_STYLE_ID;\n  });\n  const [palette, setPaletteState] = useState<PaletteId>(() => {\n    if (initialPreference) {\n      return isPaletteId(initialPreference.paletteId)\n        ? initialPreference.paletteId\n        : DEFAULT_PALETTE_ID;\n    }\n    // A stale / unknown stored value resolves to the default, never a dead id.\n    const stored = readStorage<string>(THEME_STORAGE_KEYS.palette, THEME_DEFAULTS.palette);\n    return isPaletteId(stored) ? stored : DEFAULT_PALETTE_ID;\n  });\n  // The user's PINNED type choice, or `null` = \"follow the active style's\n  // default pairing\". Only a valid stored id pins; anything else (unset/stale)\n  // falls through to the style default below.\n  const [typeChoice, setTypeChoiceState] = useState<TypeId | null>(() => {\n    if (initialPreference) {\n      // The server pref carries the EFFECTIVE type + whether it was pinned: an\n      // unpinned user must stay `null` so they keep following the style default.\n      return initialPreference.typePinned && isTypeId(initialPreference.typeId)\n        ? initialPreference.typeId\n        : null;\n    }\n    const stored = readStorage<string>(THEME_STORAGE_KEYS.type, '');\n    return isTypeId(stored) ? stored : null;\n  });\n\n  // Subscribe to OS color-scheme changes. Only consulted when pattern='system'.\n  const osColorScheme = useSyncExternalStore(\n    subscribeColorScheme,\n    getColorSchemeSnapshot,\n    getColorSchemeServerSnapshot,\n  );\n\n  const resolvedPattern: ResolvedThemePattern = pattern === 'system' ? osColorScheme : pattern;\n\n  // Effective type (Axis 3): a pinned choice wins; otherwise FOLLOW the active\n  // style's default pairing — so switching style (while unpinned) re-points type\n  // to that style's curated default, and an explicit pick sticks across styles.\n  const type: TypeId = typeChoice ?? resolveStyle(styleId).defaultTypeId;\n\n  // Sync data-theme to <html>. This IS an effect (synchronizing with an\n  // external system — the DOM), but the effect body only writes to the DOM,\n  // not back to React state. That's the correct effect shape.\n  useEffect(() => {\n    document.documentElement.setAttribute('data-theme', resolvedPattern);\n  }, [resolvedPattern]);\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-style', styleId);\n  }, [styleId]);\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-palette', palette);\n  }, [palette]);\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-type', type);\n  }, [type]);\n\n  // ── Cross-device sync (Subtask 7.3.62) ────────────────────────────────────\n  // A signed-in user's axis change is OPTIMISTIC: the setter flips the live UI +\n  // localStorage instantly (below), then queues a debounced PATCH to\n  // `/api/appearance-preference`. The write is reconciled from its 200 body, and\n  // a failure (401 / network / server) degrades quietly — the local switch is\n  // never lost (localStorage holds it) — surfacing `syncState: 'error'` for the\n  // pane's affordance. Anonymous visitors never sync (the localStorage-only path).\n  const [syncState, setSyncState] = useState<AppearanceSyncState>('idle');\n  // Monotonic per-flush counter — the seq-guard that stops an older response from\n  // clobbering a newer choice (the WatchControl `fetchSeq` idiom; the\n  // E2E-authoritative-signal contract). Only the latest flush may reconcile / set\n  // the affordance.\n  const syncSeqRef = useRef(0);\n  // Axes changed since the last flush, coalesced so rapid toggles send one write.\n  const pendingPatchRef = useRef<AppearanceSyncPatch>({});\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Reconcile ONLY the axes this flush actually sent, from the resolved 200 body\n  // — never the untouched axes (the per-axis DTO resolves an unpinned `typeId` to\n  // the GLOBAL default, which would wrongly pin a follow-the-style user if applied\n  // off a different axis's write). The raw state setters skip the localStorage /\n  // re-PATCH side effects; for the valid ids the setters send, this is a no-op\n  // confirmation, but it adopts any value the server normalised.\n  const reconcile = useCallback((sent: AppearanceSyncPatch, resolved: AppearancePreferenceDto) => {\n    if ('pattern' in sent) setPatternState(resolved.pattern);\n    if ('styleId' in sent && isStyleId(resolved.styleId)) setStyleIdState(resolved.styleId);\n    if ('paletteId' in sent && isPaletteId(resolved.paletteId)) setPaletteState(resolved.paletteId);\n    if ('typeId' in sent && isTypeId(resolved.typeId)) setTypeChoiceState(resolved.typeId);\n  }, []);\n\n  const flushSync = useCallback(() => {\n    debounceRef.current = null;\n    const patch = pendingPatchRef.current;\n    pendingPatchRef.current = {};\n    if (Object.keys(patch).length === 0) return;\n\n    const seq = ++syncSeqRef.current;\n    fetch('/api/appearance-preference', {\n      method: 'PATCH',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(patch),\n    })\n      .then(async (res) => {\n        if (!res.ok) throw new Error(`appearance sync failed: ${res.status}`);\n        const body = (await res.json()) as { preference: AppearancePreferenceDto };\n        // Drop a response superseded by a newer flush — it must not clobber the\n        // newer choice nor flip the affordance.\n        if (seq !== syncSeqRef.current) return;\n        reconcile(patch, body.preference);\n        setSyncState('idle');\n      })\n      .catch(() => {\n        if (seq !== syncSeqRef.current) return;\n        // Keep the optimistic local value (localStorage holds it); surface the\n        // quiet \"couldn't sync\" affordance without blocking the live switch.\n        setSyncState('error');\n      });\n  }, [reconcile]);\n\n  // Merge an axis change into the pending patch and (re)arm the debounce. A\n  // no-op for anonymous visitors — they never write to the account.\n  const queueSync = useCallback(\n    (patch: AppearanceSyncPatch) => {\n      if (!signedIn) return;\n      pendingPatchRef.current = { ...pendingPatchRef.current, ...patch };\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n      debounceRef.current = setTimeout(flushSync, SYNC_DEBOUNCE_MS);\n    },\n    [signedIn, flushSync],\n  );\n\n  // Flush any pending write on unmount so a just-made choice isn't dropped.\n  useEffect(() => {\n    return () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n        flushSync();\n      }\n    };\n  }, [flushSync]);\n\n  const setPattern = useCallback(\n    (next: ThemePattern) => {\n      setPatternState(next);\n      try {\n        window.localStorage.setItem(THEME_STORAGE_KEYS.pattern, next);\n      } catch {\n        // localStorage unavailable — accept that the choice won't persist.\n      }\n      queueSync({ pattern: next });\n    },\n    [queueSync],\n  );\n\n  const setStyleId = useCallback(\n    (next: StyleId) => {\n      setStyleIdState(next);\n      try {\n        window.localStorage.setItem(THEME_STORAGE_KEYS.style, next);\n      } catch {\n        // localStorage unavailable — accept that the choice won't persist.\n      }\n      queueSync({ styleId: next });\n    },\n    [queueSync],\n  );\n\n  const setPalette = useCallback(\n    (next: PaletteId) => {\n      setPaletteState(next);\n      try {\n        window.localStorage.setItem(THEME_STORAGE_KEYS.palette, next);\n      } catch {\n        // localStorage unavailable — accept that the choice won't persist.\n      }\n      queueSync({ paletteId: next });\n    },\n    [queueSync],\n  );\n\n  const setType = useCallback(\n    (next: TypeId) => {\n      setTypeChoiceState(next);\n      try {\n        window.localStorage.setItem(THEME_STORAGE_KEYS.type, next);\n      } catch {\n        // localStorage unavailable — accept that the choice won't persist.\n      }\n      queueSync({ typeId: next });\n    },\n    [queueSync],\n  );\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({\n      pattern,\n      resolvedPattern,\n      styleId,\n      palette,\n      type,\n      setPattern,\n      setStyleId,\n      setPalette,\n      setType,\n      syncState,\n    }),\n    [\n      pattern,\n      resolvedPattern,\n      styleId,\n      palette,\n      type,\n      setPattern,\n      setStyleId,\n      setPalette,\n      setType,\n      syncState,\n    ],\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n  const ctx = useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error('useTheme must be used inside <ThemeProvider>');\n  }\n  return ctx;\n}\n\n/**\n * Non-throwing variant of {@link useTheme}. Returns `null` when no\n * `<ThemeProvider>` is mounted instead of throwing.\n *\n * Use this in low-level primitives that must also render outside the authed\n * shell — e.g. the `MarkdownEditor` (Subtask 2.3.5) reads `resolvedPattern`\n * to drive the underlying editor's `data-color-mode`, but it's also exercised\n * on the public `/tokens` specimen and in component tests where wrapping every\n * render in a provider would be noise. Callers fall back to a sensible default\n * (`'light'`).\n */\nexport function useOptionalTheme(): ThemeContextValue | null {\n  return useContext(ThemeContext);\n}\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Spinner — pure CSS rotation indicator.\n *\n * Three sizes; works standalone or inside a Button's loading state.\n *\n * @example\n * <Spinner size=\"md\" />\n * <Spinner size=\"sm\" aria-label=\"Loading\" />\n */\nconst spinnerVariants = cva(\n  'inline-block animate-spin rounded-full border-current border-t-transparent',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border-[1.5px]',\n        md: 'h-5 w-5 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nexport interface SpinnerProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'role'>, VariantProps<typeof spinnerVariants> {}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { className, size, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"status\"\n      aria-label={rest['aria-label'] ?? 'Loading'}\n      className={cn(spinnerVariants({ size }), className)}\n      {...rest}\n    />\n  );\n});\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Spinner } from './Spinner';\nimport { cn } from '../../utils/cn';\n\n/**\n * Button — primary interactive primitive.\n *\n * Variants × sizes × states. The `loading` state shows an inline Spinner\n * and disables the button. Use semantic Tailwind token classes; never\n * hardcode colors. Shape responds to `data-style` via\n * `--radius-btn` (rectangles in default, pills in `soft`).\n *\n * @example\n * <Button variant=\"primary\" size=\"md\">Save</Button>\n * <Button variant=\"ghost\" leftIcon={<Plus />} loading>Saving…</Button>\n */\n// Exported so a Next `<Link>` can render AS a styled button (an anchor styled\n// with the button variants — keeps real-link semantics for navigation) without\n// nesting a <button> inside an <a>. Used by the /ready empty state's \"View all\n// issues\" link (Subtask 7.0.6).\nexport const buttonVariants = cva(\n  cn(\n    // Base layout\n    'inline-flex items-center justify-center gap-2',\n    // Typography\n    'font-sans text-sm font-medium leading-none',\n    // Shape — semantic tokens that flip with the active style\n    'rounded-(--radius-btn)',\n    // Interaction\n    'transition-[transform,background-color,border-color,color] duration-(--transition-duration)',\n    'active:scale-(--active-scale)',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ),\n  {\n    variants: {\n      variant: {\n        primary: 'bg-(--el-accent) text-(--el-accent-text) hover:opacity-90',\n        secondary:\n          'bg-transparent text-(--el-text) border border-(--el-button-border) hover:bg-(--el-surface)',\n        ghost: 'bg-transparent text-(--el-text) hover:bg-(--el-surface)',\n        danger: 'bg-(--el-danger) text-(--el-danger-text) hover:opacity-90',\n      },\n      size: {\n        sm: 'h-(--height-btn-sm) px-3 text-xs',\n        md: 'h-(--height-btn-md) px-(--spacing-btn-x)',\n        lg: 'h-(--height-btn-lg) px-6 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** Shows inline Spinner + disables interaction. */\n  loading?: boolean;\n  /** Icon rendered before the label. */\n  leftIcon?: ReactNode;\n  /** Icon rendered after the label. */\n  rightIcon?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  { variant, size, loading, leftIcon, rightIcon, disabled, className, children, ...rest },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      // `data-variant` is the hook the 3D / Immersive style uses to give FILLED\n      // buttons physical thickness (a solid palette-derived base edge) + a\n      // press-DOWN (7.3.39). Inert under every other style.\n      data-variant={variant ?? 'primary'}\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...rest}\n    >\n      {loading ? (\n        <Spinner size={size === 'lg' ? 'md' : 'sm'} aria-hidden />\n      ) : leftIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {leftIcon}\n        </span>\n      ) : null}\n      <span>{children}</span>\n      {!loading && rightIcon ? (\n        <span aria-hidden className=\"inline-flex\">\n          {rightIcon}\n        </span>\n      ) : null}\n    </button>\n  );\n});\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Card — content container with optional header/footer slots and tint variants.\n *\n * Compose with `header` / `footer` props for the common pattern, or just\n * pass children for a bare card. `clickable` makes the whole card a button\n * (use `onClick` + Enter/Space; pass `href` to render as `<a>` instead).\n *\n * Tint variants use the pastel feature tints from the palette\n * (peach/rose/mint/lavender/sky/yellow) — apply sparingly, never to\n * page-level surfaces.\n *\n * @example\n * <Card header={<h3>Title</h3>}>Body content</Card>\n * <Card tint=\"lavender\" clickable onClick={open}>Pastel card</Card>\n * <Card tint=\"mint\"><a href=\"/x\">Link wrapper</a></Card>\n */\nconst cardVariants = cva(\n  cn(\n    'rounded-(--radius-card) border border-(--el-border)',\n    'p-(--spacing-card-padding)',\n    'transition-shadow duration-(--transition-duration)',\n  ),\n  {\n    variants: {\n      tint: {\n        none: 'bg-(--el-card)',\n        peach: 'bg-(--el-tint-peach) border-transparent',\n        rose: 'bg-(--el-tint-rose) border-transparent',\n        mint: 'bg-(--el-tint-mint) border-transparent',\n        lavender: 'bg-(--el-tint-lavender) border-transparent',\n        sky: 'bg-(--el-tint-sky) border-transparent',\n        yellow: 'bg-(--el-tint-yellow) border-transparent',\n      },\n      clickable: {\n        true: 'cursor-pointer hover:shadow-(--shadow-card) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n        false: '',\n      },\n    },\n    defaultVariants: { tint: 'none', clickable: false },\n  },\n);\n\nexport interface CardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof cardVariants> {\n  header?: ReactNode;\n  footer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { tint, clickable, header, footer, className, children, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ tint, clickable }), className)}\n      // `data-tilt` is the hook the 3D / Immersive style's pointer-parallax\n      // engine (ImmersiveTilt, 7.3.39) uses to tip this tile toward the cursor.\n      // Inert for every other style + under reduced motion; harmless otherwise.\n      data-tilt=\"\"\n      // `data-surface` is the hook a surface-MATERIAL style (e.g. glassmorphism)\n      // uses to frost this panel — see globals.css's material layer. Only the\n      // default (untinted) card opts in; a pastel-tint feature card keeps its\n      // opaque tint, never a frosted overlay that would wash the hue out.\n      {...(tint && tint !== 'none' ? {} : { 'data-surface': 'card' })}\n      {...(clickable ? { tabIndex: 0, role: 'button' } : {})}\n      {...rest}\n    >\n      {/* `data-tilt-layer` lifts the slot onto a translateZ plane under the 3D /\n          Immersive style (7.3.39) so it PARALLAXES above the card face as the\n          card tilts — `front` (the header/title pops most), `back` (the footer\n          sits nearer the face). Inert under every other style + reduced motion.\n          The body stays on the face so arbitrary content never renders on a\n          skewed Z-plane. */}\n      {header ? (\n        <div data-tilt-layer=\"front\" className=\"mb-(--spacing-md)\">\n          {header}\n        </div>\n      ) : null}\n      <div>{children}</div>\n      {footer ? (\n        <div\n          data-tilt-layer=\"back\"\n          className=\"border-(--el-border) mt-(--spacing-md) border-t pt-(--spacing-md)\"\n        >\n          {footer}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n","import { type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Internal layout wrapper shared by Input and Textarea — handles the\n * label / control / helper-or-error stack pattern. Not exported from\n * the design system; consumers compose <Input> and <Textarea> directly.\n */\nexport interface FormFieldProps {\n  /** Visible label rendered above the control. */\n  label?: string;\n  /** Error message — overrides helperText when present. Sets aria-invalid. */\n  error?: string;\n  /**\n   * How the error message renders: the default `text` is the quiet danger\n   * line; `box` is the rose-tint inline-error box (hue in the background,\n   * strong text — finding #35), the 2.4.9 grammar inline editors use.\n   */\n  errorVariant?: 'text' | 'box';\n  /** Helper text rendered below the control. */\n  helperText?: string;\n  /** id of the control element — used to associate label + describedby. */\n  htmlFor: string;\n  className?: string;\n  children: ReactNode;\n}\n\nexport function FormField({\n  label,\n  error,\n  errorVariant = 'text',\n  helperText,\n  htmlFor,\n  className,\n  children,\n}: FormFieldProps) {\n  const describedById = error ? `${htmlFor}-error` : helperText ? `${htmlFor}-helper` : undefined;\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      {label ? (\n        <label htmlFor={htmlFor} className=\"font-sans text-sm font-medium text-(--el-text)\">\n          {label}\n        </label>\n      ) : null}\n      {children}\n      {error ? (\n        <p\n          id={describedById}\n          role=\"alert\"\n          className={cn(\n            'font-sans text-xs',\n            errorVariant === 'box' &&\n              'bg-(--el-danger-surface) text-(--el-danger-surface-text) rounded-(--radius-control) px-(--spacing-tooltip-x) py-(--spacing-tooltip-y)',\n          )}\n          style={errorVariant === 'box' ? undefined : { color: 'var(--el-danger)' }}\n        >\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={describedById} className=\"text-(--el-text-helper) font-sans text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/** Returns the aria-describedby id that consumers should pass to the control. */\nexport function describedById(\n  htmlFor: string,\n  error: string | undefined,\n  helperText: string | undefined,\n): string | undefined {\n  return error ? `${htmlFor}-error` : helperText ? `${htmlFor}-helper` : undefined;\n}\n","import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from 'react';\nimport { FormField, describedById } from './FormField';\nimport { cn } from '../../utils/cn';\n\n/**\n * Input — single-line text field with optional label, helper text, error\n * state, and addon slots (e.g. icons or labels).\n *\n * Note: `addonStart`/`addonEnd` are used instead of `prefix`/`suffix` because\n * `prefix` is a reserved HTML attribute on <input> (string-typed) and would\n * collide with our ReactNode prop.\n *\n * @example\n * <Input label=\"Email\" type=\"email\" helperText=\"We'll never share it\" />\n * <Input label=\"Domain\" addonStart={<Globe />} addonEnd=\".motir.dev\" />\n */\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix'> {\n  label?: string;\n  error?: string;\n  /** Error presentation — `text` (default) or the rose-tint `box` (see FormField). */\n  errorVariant?: 'text' | 'box';\n  helperText?: string;\n  /** Rendered inside the input box on the left. */\n  addonStart?: ReactNode;\n  /** Rendered inside the input box on the right. */\n  addonEnd?: ReactNode;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    label,\n    error,\n    errorVariant,\n    helperText,\n    addonStart,\n    addonEnd,\n    id,\n    className,\n    disabled,\n    ...rest\n  },\n  ref,\n) {\n  const autoId = useId();\n  const inputId = id ?? autoId;\n  const describedBy = describedById(inputId, error, helperText);\n  const hasError = Boolean(error);\n  return (\n    <FormField\n      label={label}\n      error={error}\n      errorVariant={errorVariant}\n      helperText={helperText}\n      htmlFor={inputId}\n    >\n      <div\n        // `data-surface` lets a surface-material style (glassmorphism) give the\n        // control a translucent fill — see globals.css's material layer.\n        data-surface=\"input\"\n        className={cn(\n          'flex h-(--height-input) w-full items-center gap-2 rounded-(--radius-input) border bg-(--el-page-bg)',\n          'px-(--spacing-input-x)',\n          'transition-colors',\n          'focus-within:ring-2 focus-within:ring-(--focus-ring-color) focus-within:ring-offset-2 focus-within:ring-offset-background',\n          hasError ? 'border-(--el-danger)' : 'border-(--el-input-border)',\n          disabled && 'cursor-not-allowed opacity-50',\n        )}\n      >\n        {addonStart ? (\n          <span aria-hidden className=\"text-(--el-icon-field) inline-flex\">\n            {addonStart}\n          </span>\n        ) : null}\n        <input\n          ref={ref}\n          id={inputId}\n          aria-invalid={hasError || undefined}\n          aria-describedby={describedBy}\n          disabled={disabled}\n          className={cn(\n            'flex-1 bg-transparent font-sans text-sm text-(--el-text) outline-none placeholder:text-(--el-text-muted)',\n            'disabled:cursor-not-allowed',\n            className,\n          )}\n          {...rest}\n        />\n        {addonEnd ? (\n          <span aria-hidden className=\"text-(--el-icon-field) inline-flex\">\n            {addonEnd}\n          </span>\n        ) : null}\n      </div>\n    </FormField>\n  );\n});\n","import { forwardRef, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Pill — compact status or severity label. Pure span, no interaction.\n *\n * Variant axes (use exactly one):\n *  - `status`: planned | in-progress | done — Motir's Subtask lifecycle states.\n *  - `severity`: info | success | warning | danger — semantic UI states.\n *  - `priority`: highest | high | medium | low | lowest — work-item priority, a\n *    5-step diverging ramp (`--el-priority-*` hue tinted over the surface, plus a\n *    redundant direction icon). The single source of truth is `PRIORITY_META`.\n *  - `memberRole`: admin | member | viewer — a project membership role\n *    (Story 6.4), one hued tint per role. (Named `memberRole`, not `role`, so\n *    it can't collide with the DOM `role` ARIA attribute on the span.)\n *  - `orgRole`: owner | admin | member — an ORGANIZATION role (Story 6.10),\n *    sitting above the workspace `memberRole`. owner → lavender (the highest,\n *    brand-purple tier), admin → sky, member → mint — per the org-admin design.\n *  - `tone`: neutral — a non-semantic chip (counts, metadata). Dark text on a\n *    neutral surface. `private` — the epic-level-privacy \"Not public\" badge\n *    (Story 6.14 · design epic-privacy panels 1/2/6b): lavender tint + charcoal\n *    text, the same AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"`.\n *\n * All tones use adaptive dark/light text (`--color-charcoal`) on a hued tint,\n * so every variant clears WCAG AA contrast in both light and dark modes\n * (the hue lives in the background, not the text — PRODECT_FINDINGS #35).\n *\n * Always uses `--radius-badge` for fully rounded ends regardless of display style.\n *\n * @example\n * <Pill status=\"in-progress\">In progress</Pill>\n * <Pill severity=\"danger\">Validation failed</Pill>\n * <Pill tone=\"neutral\">3 members</Pill>\n */\nconst pillVariants = cva(\n  cn(\n    'inline-flex items-center gap-1',\n    'rounded-(--radius-badge)',\n    'px-(--spacing-chip-x) py-(--spacing-chip-y)',\n    'font-sans text-xs font-medium',\n    'border',\n  ),\n  {\n    variants: {\n      // All colored tones carry the semantic hue in the TINT BACKGROUND and use\n      // adaptive dark/light TEXT (`--color-charcoal`: #37352f light, #e5e5e5\n      // dark) — the same pattern `planned` always used. The previous saturated\n      // hue-on-tint TEXT failed WCAG AA (≈2.5–3.8:1 light, 3.2–4.0:1 dark);\n      // charcoal-on-tint clears ~10:1 in both modes (PRODECT_FINDINGS #35).\n      status: {\n        planned: 'bg-(--el-tint-lavender) text-(--el-text-strong) border-transparent',\n        'in-progress': 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        done: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n      },\n      severity: {\n        info: 'bg-(--el-tint-sky) text-(--el-text-strong) border-transparent',\n        success: 'bg-(--el-tint-mint) text-(--el-text-strong) border-transparent',\n        warning: 'bg-(--el-tint-peach) text-(--el-text-strong) border-transparent',\n        danger: 'bg-(--el-tint-rose) text-(--el-text-strong) border-transparent',\n      },\n      // Priority chips (MOTIR-1273 · 1266.2) — a 5-step diverging ramp keyed off\n      // the `--el-priority-*` hues, un-collapsing `medium` and `lowest` (both\n      // were `tone=\"neutral\"` grey). Each hue is diluted to a 14% tint over\n      // `--el-surface` so charcoal `--el-text-strong` clears AA in both themes\n      // (the hue lives in the background — finding #35); the redundant direction\n      // icon (PRIORITY_META) is the non-colour cue. `medium` (slate) and\n      // `lowest` (stone) resolve to two distinct greys in every palette.\n      priority: {\n        highest:\n          'bg-[color-mix(in_srgb,var(--el-priority-highest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        high: 'bg-[color-mix(in_srgb,var(--el-priority-high)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        medium:\n          'bg-[color-mix(in_srgb,var(--el-priority-medium)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        low: 'bg-[color-mix(in_srgb,var(--el-priority-low)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n        lowest:\n          'bg-[color-mix(in_srgb,var(--el-priority-lowest)_14%,var(--el-surface))] text-(--el-text-strong) border-transparent',\n      },\n      // Project membership roles (Story 6.4 · design/projects access-members):\n      // admin → lavender, member → sky, viewer → mint — the hue in the tint,\n      // charcoal text (AA-safe, finding #35), same recipe as `status`. Routed\n      // through the DEDICATED `--el-role-*` tokens (MOTIR-1274 · 1266.3) so a\n      // palette can tune roles apart from the other --el-tint-* meanings; each\n      // defaults to its prior tint (zero visual change).\n      memberRole: {\n        admin: 'bg-(--el-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-role-member) text-(--el-text-strong) border-transparent',\n        viewer: 'bg-(--el-role-viewer) text-(--el-text-strong) border-transparent',\n      },\n      // Organization roles (Story 6.10 · design/org-admin): owner → lavender\n      // (the highest, brand-purple tier), admin → sky, member → mint — the hue\n      // in the tint, charcoal text (AA-safe, finding #35), same recipe as above.\n      // Dedicated `--el-org-role-*` tokens (MOTIR-1274 · 1266.3); zero change.\n      orgRole: {\n        owner: 'bg-(--el-org-role-owner) text-(--el-text-strong) border-transparent',\n        admin: 'bg-(--el-org-role-admin) text-(--el-text-strong) border-transparent',\n        member: 'bg-(--el-org-role-member) text-(--el-text-strong) border-transparent',\n      },\n      tone: {\n        neutral: 'bg-(--el-chip-bg) text-(--el-text-secondary) border-(--el-chip-border)',\n        // Epic-level privacy \"Not public\" badge (Story 6.14 · design\n        // epic-privacy panels 1/2/6b) — lavender tint, charcoal text, the same\n        // AA-safe recipe as `status=\"planned\"` / `memberRole=\"admin\"` (≈9.7:1).\n        // Dedicated `--el-privacy-private` token (MOTIR-1274 · 1266.3); the\n        // matching `--el-privacy-public` is defined ahead of a \"public\" badge.\n        private: 'bg-(--el-privacy-private) text-(--el-text-strong) border-transparent',\n        // Inactive \"Archived\" badge (MOTIR-1276 · 1266.5) — a QUIET muted fill\n        // with slate ink, not a hued tint: archived is an inactive state, not a\n        // severity. Dedicated `--el-archived-pill-*` tokens so a palette can tune\n        // the inactive badge apart from the neutral chip; AA-safe (slate on muted\n        // clears AA both themes).\n        archived: 'bg-(--el-archived-pill-bg) text-(--el-archived-pill-text) border-transparent',\n      },\n    },\n    defaultVariants: {},\n  },\n);\n\nexport interface PillProps\n  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {}\n\nexport const Pill = forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  { status, severity, priority, memberRole, orgRole, tone, className, children, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        pillVariants({ status, severity, priority, memberRole, orgRole, tone }),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  );\n});\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * SectionLabel — the small uppercase-mono header that captions a group of\n * rows (a sidebar nav section, and later the cmd-K command groups).\n *\n * Lifted to its own primitive per PRODECT_FINDINGS #28 so the two consumers\n * share ONE source of truth for the canonical typography (mono · 11px ·\n * semibold · uppercase · 0.06em tracking · muted-foreground) instead of each\n * memorizing four utility classes. `Sidebar` uses it for section labels now;\n * 1.5.4's `CommandGroupHeader` composes the same primitive.\n *\n * Presentational only — renders a `<div>`. Pass `label` for the common\n * string case, or `children` for richer content (e.g. a label + a count).\n *\n * @example\n * <SectionLabel label=\"Workspace\" />\n * <SectionLabel>Results <span>{count}</span></SectionLabel>\n */\nexport interface SectionLabelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Convenience for the string case; ignored when `children` is provided. */\n  label?: string;\n  children?: ReactNode;\n}\n\nexport const SectionLabel = forwardRef<HTMLDivElement, SectionLabelProps>(function SectionLabel(\n  { label, children, className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'font-mono text-[11px] font-semibold uppercase tracking-[0.06em] text-(--el-text-eyebrow)',\n        className,\n      )}\n      {...rest}\n    >\n      {children ?? label}\n    </div>\n  );\n});\n","import type { ReactNode } from 'react';\nimport { BookOpen, Search, SlidersHorizontal } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonVariants } from '../ui/Button';\nimport { Card } from '../ui/Card';\nimport { Pill } from '../ui/Pill';\nimport type { StyleId } from '../../theme/styles';\nimport type { PaletteId } from '../../theme/palettes';\nimport type { TypeId } from '../../theme/typography';\n\n/**\n * StyleVignette — the LIVE preview specimen that makes a design axis's FEEL\n * legible (Subtask 7.3.37 / MOTIR-1050).\n *\n * The fix for \"I only see typography change\": instead of a token-swatch table,\n * this is a composed, realistic MINI-SURFACE — a nav rail, a work-item card, a\n * search input, a button row, and a floating modal — rendered LIVE under a\n * style's shape/feel tokens + component overrides (and, independently, a palette\n * and a type pairing). Switching any axis re-shapes / re-skins / re-types the\n * whole vignette, so the user sees the product's feel, not a colour chip.\n *\n * ── Two modes ────────────────────────────────────────────────────────────\n *   • LIVE (no axis props) — the wrapper sets NO `data-*` axis attribute, so it\n *     INHERITS the active theme from `<html>` (driven by `theme-context`). Use\n *     this for the appearance-settings preview and the design-step showcase: the\n *     vignette re-renders automatically as the global selection changes.\n *   • SCOPED (any of `styleId` / `palette` / `type`) — the wrapper carries that\n *     axis attribute, so the globals.css axis block recomputes the tokens for\n *     this subtree ONLY. Use this for the onboarding Style gallery (one vignette\n *     per style) and the Palette step (one style re-rendered under each palette).\n *\n * Built on the `app/tokens/page.tsx` specimen pattern: real `--el-*` colour\n * tokens + element-semantic shape tokens + the `data-surface` material hooks, so\n * surface-material styles (glassmorphism's frosted glass, cybercore's glow grid)\n * apply exactly as they do in the shipped app. NEVER a Tier-0 `--color-*` or a\n * raw `rounded-*`/`p-*`/`h-*` (the colour + shape token rules in CLAUDE.md).\n *\n * Nesting caveat: a SCOPED base entry (`warm-editorial` / `motir` palette /\n * `motir` type) has no globals.css override block, so when it is nested under a\n * NON-base `<html>` it inherits that ancestor's axis rather than resetting to\n * the base. In the real consumers this never bites — onboarding runs against the\n * default `<html>`, and the appearance preview uses LIVE mode (inherits the\n * active selection it is meant to show). Full nested-base isolation (a reset\n * block or an iframe) is a noted follow-up if a future consumer needs it.\n */\n\nexport interface StyleVignetteProps {\n  /** Scope the vignette to a specific style; omit to inherit the active style. */\n  styleId?: StyleId;\n  /** Scope the vignette to a specific palette; omit to inherit the active palette. */\n  palette?: PaletteId;\n  /** Scope the vignette to a specific type pairing; omit to inherit the active type. */\n  type?: TypeId;\n  /**\n   * Accessible name for the preview region. The vignette is decorative chrome,\n   * so it is announced as a single labelled image rather than a pile of\n   * read-out controls.\n   */\n  label?: string;\n  className?: string;\n}\n\n/** A muted progress bar; `accent` tints it with the active accent. */\nfunction Bar({ accent, widthPct }: { accent?: boolean; widthPct: number }) {\n  return (\n    <div className=\"h-[6px] w-full overflow-hidden rounded-(--radius-badge) bg-(--el-muted)\">\n      <div\n        className={cn(\n          'h-full rounded-(--radius-badge)',\n          accent ? 'bg-(--el-accent)' : 'bg-(--el-border-strong)',\n        )}\n        style={{ width: `${widthPct}%` }}\n      />\n    </div>\n  );\n}\n\n/** One row of the work-item card's mini list — a status dot + label + chip. */\nfunction ListRow({ dotVar, label, chip }: { dotVar: string; label: string; chip: string }) {\n  return (\n    <div className=\"flex items-center gap-2 text-[11px] text-(--el-text-secondary)\">\n      <span\n        className=\"size-2 shrink-0 rounded-full\"\n        style={{ background: `var(${dotVar})` }}\n        aria-hidden\n      />\n      <span className=\"truncate\">{label}</span>\n      <span className=\"ml-auto shrink-0 rounded-(--radius-badge) bg-(--el-surface) px-(--spacing-chip-x) py-(--spacing-chip-y) text-[9px] font-medium text-(--el-text-secondary)\">\n        {chip}\n      </span>\n    </div>\n  );\n}\n\nexport function StyleVignette({ styleId, palette, type, label, className }: StyleVignetteProps) {\n  // Only emit an axis attribute when the caller pins it; an omitted axis stays\n  // inherited (LIVE mode), which is how the appearance preview follows the\n  // global selection without re-implementing the theme context.\n  const axisAttrs: Record<string, string> = {};\n  if (styleId) axisAttrs['data-style'] = styleId;\n  if (palette) axisAttrs['data-palette'] = palette;\n  if (type) axisAttrs['data-type'] = type;\n\n  return (\n    <div\n      {...axisAttrs}\n      role=\"img\"\n      aria-label={label ?? 'Design style preview'}\n      className={cn(\n        'style-vignette relative isolate overflow-hidden',\n        'rounded-(--radius-card) border border-(--el-border) bg-(--el-surface)',\n        'shadow-(--shadow-subtle)',\n        className,\n      )}\n    >\n      {/* Material canvas: transparent for flat styles; the glassmorphism gradient\n          / cybercore grid is painted here via the descendant rules in\n          globals.css (a preview can't lean on the body-scoped canvas). */}\n      <span className=\"sv-canvas pointer-events-none absolute inset-0 -z-10\" aria-hidden />\n\n      <div className=\"flex flex-col gap-3 p-3\">\n        {/* NAV — a compact rail; data-surface lets a material style frost it. */}\n        <div\n          data-surface=\"sidebar\"\n          className=\"flex items-center gap-2 rounded-(--radius-control) bg-(--el-sidebar-bg) px-3 py-2\"\n        >\n          <span className=\"size-2.5 rounded-full bg-(--el-accent)\" aria-hidden />\n          <span className=\"font-serif text-[12px] font-semibold text-(--el-text)\">Acme</span>\n          <span className=\"ml-2 rounded-(--radius-control) bg-(--el-accent) px-2 py-[3px] text-[10px] font-medium text-(--el-accent-text)\">\n            Board\n          </span>\n          <span className=\"text-[10px] text-(--el-text-muted)\">Backlog</span>\n          <span className=\"text-[10px] text-(--el-text-muted)\">Reports</span>\n          <span className=\"ml-auto size-5 rounded-full bg-(--el-muted)\" aria-hidden />\n        </div>\n\n        <div className=\"grid grid-cols-[1.4fr_1fr] gap-3\">\n          {/* WORK-ITEM CARD — the centrepiece: type hue + serif title + status. */}\n          <Card className=\"flex flex-col gap-2 !p-3\">\n            <div className=\"flex items-center gap-2\">\n              {/* A decorative story-type icon in its `--el-type-story` hue. The\n                  package can't depend on motir-core's domain `IssueTypeIcon`\n                  (which maps work-item kinds → glyphs), so the vignette inlines\n                  the same glyph + hue directly — pixel-identical, boundary-clean. */}\n              <BookOpen className=\"size-4 text-(--el-type-story)\" aria-hidden />\n              <span className=\"truncate font-serif text-[13px] font-semibold text-(--el-text)\">\n                Ship the billing flow\n              </span>\n              <Pill status=\"in-progress\" className=\"ml-auto !text-[9px]\">\n                In progress\n              </Pill>\n            </div>\n            <div className=\"flex flex-col gap-1.5\">\n              <ListRow dotVar=\"--el-success\" label=\"Invoice schema\" chip=\"Done\" />\n              <ListRow dotVar=\"--el-warning\" label=\"Dunning emails\" chip=\"Review\" />\n              <ListRow dotVar=\"--el-info\" label=\"Stripe webhook\" chip=\"To do\" />\n            </div>\n            <div className=\"mt-0.5 flex flex-col gap-1.5\">\n              <Bar accent widthPct={66} />\n              <Bar widthPct={38} />\n            </div>\n          </Card>\n\n          {/* MODAL — a floating dialog panel; modal radius + elevation + scrim. */}\n          <div className=\"relative\">\n            <span\n              className=\"pointer-events-none absolute -inset-1 rounded-(--radius-card) bg-black/10\"\n              aria-hidden\n            />\n            <div\n              data-surface=\"modal\"\n              className=\"relative flex flex-col gap-2 rounded-(--radius-modal) border border-(--el-border) bg-(--el-page-bg) p-3 shadow-(--shadow-modal)\"\n            >\n              <span className=\"font-serif text-[12px] font-semibold text-(--el-text)\">\n                New invoice\n              </span>\n              <Bar widthPct={100} />\n              <Bar widthPct={72} />\n              <div className=\"mt-1 flex gap-2\">\n                <span\n                  className={cn(\n                    buttonVariants({ variant: 'primary', size: 'sm' }),\n                    '!h-7 !px-3 !text-[10px]',\n                  )}\n                >\n                  Create\n                </span>\n                <span\n                  className={cn(\n                    buttonVariants({ variant: 'ghost', size: 'sm' }),\n                    '!h-7 !px-3 !text-[10px]',\n                  )}\n                >\n                  Cancel\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* INPUT — a search field; data-surface lets a material style fill it. */}\n        <div\n          data-surface=\"input\"\n          className=\"flex h-(--height-input) items-center gap-2 rounded-(--radius-input) border border-(--el-border-strong) bg-(--el-page-bg) px-(--spacing-input-x) text-[11px] text-(--el-text-muted)\"\n        >\n          <Search className=\"size-3.5\" aria-hidden />\n          <span>Search work items…</span>\n        </div>\n\n        {/* BUTTON ROW — primary + ghost, exact Button silhouettes (non-interactive). */}\n        <div className=\"flex gap-2\">\n          <span className={cn(buttonVariants({ variant: 'primary', size: 'sm' }), '!text-[11px]')}>\n            New work item\n          </span>\n          <span className={cn(buttonVariants({ variant: 'ghost', size: 'sm' }), '!text-[11px]')}>\n            <SlidersHorizontal className=\"size-3.5\" aria-hidden />\n            Filter\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default StyleVignette as (props: StyleVignetteProps) => ReactNode;\n","'use client';\n\n// A minimal, self-contained render of the extracted design system — the\n// package's answer to motir-core's `/tokens` route, so the extraction is\n// VERIFIABLE IN ISOLATION (the card's acceptance criterion). It composes the\n// real primitives, the live `StyleVignette` preview, and a swatch grid of the\n// `--el-*` element tokens, all under a `ThemeProvider`, so a consumer (or a\n// screenshot / unit render) can confirm the tokens + components behave without\n// wiring the package into an app first.\n//\n// It reads the axis registries directly to render one scoped `StyleVignette`\n// per style / palette — the same pattern motir-core's tokens route + onboarding\n// galleries use — proving the `[data-style]` / `[data-palette]` swap layers in\n// `theme.css` are intact.\n\nimport { ThemeProvider } from '../contexts/theme-context';\nimport { STYLE_IDS } from '../theme/styles';\nimport { PALETTE_IDS } from '../theme/palettes';\nimport { Button } from '../components/ui/Button';\nimport { Card } from '../components/ui/Card';\nimport { Input } from '../components/ui/Input';\nimport { Pill } from '../components/ui/Pill';\nimport { SectionLabel } from '../components/ui/SectionLabel';\nimport { StyleVignette } from '../components/theme/StyleVignette';\n\n/** The `--el-*` element tokens the swatch grid samples (a representative slice). */\nconst SWATCH_TOKENS = [\n  '--el-accent',\n  '--el-surface',\n  '--el-text',\n  '--el-text-muted',\n  '--el-border',\n  '--el-success',\n  '--el-warning',\n  '--el-danger',\n  '--el-info',\n  '--el-type-story',\n] as const;\n\nfunction Swatches() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {SWATCH_TOKENS.map((token) => (\n        <div key={token} className=\"flex flex-col items-center gap-1\">\n          <span\n            className=\"size-10 rounded-(--radius-control) border border-(--el-border)\"\n            style={{ background: `var(${token})` }}\n            aria-hidden\n          />\n          <span className=\"text-[10px] text-(--el-text-muted)\">{token.replace('--el-', '')}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport interface TokensSpecimenProps {\n  className?: string;\n}\n\n/**\n * The design-system isolation specimen. Wrap-free: it mounts its own\n * `ThemeProvider`, so it can be dropped into any route (or a headless render)\n * to see the whole system at once.\n */\nexport function TokensSpecimen({ className }: TokensSpecimenProps) {\n  return (\n    <ThemeProvider>\n      <div className={className} data-surface=\"page\">\n        <div className=\"mx-auto flex max-w-[64rem] flex-col gap-8 p-8\">\n          <header className=\"flex flex-col gap-1\">\n            <h1 className=\"font-serif text-2xl font-semibold text-(--el-text)\">\n              @motir/design-system\n            </h1>\n            <p className=\"text-sm text-(--el-text-muted)\">\n              Colour · Style · Type — the extracted 3-axis system, rendered in isolation.\n            </p>\n          </header>\n\n          <section className=\"flex flex-col gap-3\">\n            <SectionLabel>Element tokens</SectionLabel>\n            <Swatches />\n          </section>\n\n          <section className=\"flex flex-col gap-3\">\n            <SectionLabel>Primitives</SectionLabel>\n            <Card className=\"flex flex-col gap-4\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <Button variant=\"primary\">Primary</Button>\n                <Button variant=\"secondary\">Secondary</Button>\n                <Button variant=\"ghost\">Ghost</Button>\n                <Button variant=\"danger\">Danger</Button>\n                <Pill status=\"in-progress\">In progress</Pill>\n              </div>\n              <Input label=\"Work item title\" placeholder=\"Ship the billing flow\" />\n            </Card>\n          </section>\n\n          <section className=\"flex flex-col gap-3\">\n            <SectionLabel>Style axis (data-style)</SectionLabel>\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              {STYLE_IDS.map((styleId) => (\n                <StyleVignette key={styleId} styleId={styleId} label={`Style: ${styleId}`} />\n              ))}\n            </div>\n          </section>\n\n          <section className=\"flex flex-col gap-3\">\n            <SectionLabel>Palette axis (data-palette)</SectionLabel>\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n              {PALETTE_IDS.map((palette) => (\n                <StyleVignette key={palette} palette={palette} label={`Palette: ${palette}`} />\n              ))}\n            </div>\n          </section>\n        </div>\n      </div>\n    </ThemeProvider>\n  );\n}\n\nexport default TokensSpecimen;\n"]}

package/dist/theme/appearance-resolution.d.ts

@@ -0,0 +1,59 @@
+import { AppliedAppearanceDto } from '../appearance.js';
+import './types.js';
+import './styles.js';
+import './typography.js';
+import './palettes.js';
+
+/**
+ * Appearance APPLICATION resolution (Story 7.3 · Subtask 7.3.61).
+ *
+ * The single, registry-pure source of truth for turning a set of stored axis
+ * values — whether they came from the server (a logged-in user's DB row) or
+ * from localStorage (an anonymous visitor) — into the four concrete attribute
+ * values applied to `<html>`. It is deliberately free of any Prisma / DOM /
+ * Next import so BOTH the server (the appearance service + mapper) and the
+ * client (the theme context's seeding) can call it.
+ *
+ * The one piece of logic that lives ONLY here (and is mirrored, by necessity,
+ * as inlined JS in `init-script.ts`) is the **type-axis precedence** the
+ * per-axis DTO mapper deferred to this subtask: an unpinned type follows the
+ * active STYLE's `defaultTypeId`, NOT the global default. See
+ * `AppliedAppearanceDto`.
+ */
+
+/** The four raw axis values as stored — a DB row's columns or localStorage. */
+interface AppearanceAxesInput {
+    pattern?: string | null;
+    styleId?: string | null;
+    paletteId?: string | null;
+    typeId?: string | null;
+}
+/** The raw localStorage snapshot the client reads (keys per `THEME_STORAGE_KEYS`). */
+interface LocalAppearanceSnapshot {
+    pattern: string | null;
+    style: string | null;
+    palette: string | null;
+    type: string | null;
+}
+/**
+ * Resolve raw axis values to the applied appearance. Each axis is resolved
+ * through its registry (a stale / unknown / absent value collapses to the
+ * documented default); the type axis additionally applies the style-default
+ * precedence: a pinned, still-registered `typeId` wins, otherwise the resolved
+ * style's `defaultTypeId`. `typePinned` reflects whether a real type was pinned.
+ */
+declare function resolveAxesToApplied(axes: AppearanceAxesInput): AppliedAppearanceDto;
+/**
+ * The reconciliation: given the authoritative SERVER preference (or `null` for
+ * an anonymous visitor) and the localStorage snapshot, decide what to apply.
+ *
+ * - **Server present** → the server preference wins (it followed the user to
+ *   this device); localStorage is ignored for the applied value.
+ * - **Server absent (anonymous / not signed in)** → resolve from localStorage.
+ *
+ * localStorage is therefore the anonymous store + the instant-apply cache, never
+ * an override of a present server value (the precedence rule of 7.3.61).
+ */
+declare function resolveAppliedAppearance(server: AppliedAppearanceDto | null, local: LocalAppearanceSnapshot): AppliedAppearanceDto;
+
+export { type AppearanceAxesInput, type LocalAppearanceSnapshot, resolveAppliedAppearance, resolveAxesToApplied };