npm - @motir/design-system - Versions diffs - 0.1.2 → 0.1.3 - Mend

@motir/design-system 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/components/theme/AppearancePickers.js +10 -4
package/dist/components/theme/AppearancePickers.js.map +1 -1
package/dist/components/theme/StyleVignette.d.ts +23 -10
package/dist/components/theme/StyleVignette.js.map +1 -1
package/dist/specimen/TokensSpecimen.js.map +1 -1
package/package.json +1 -1
package/theme.css +732 -583

package/dist/components/theme/AppearancePickers.js CHANGED Viewed

@@ -504,10 +504,16 @@ function PalettePicker({
     label: PALETTE_REGISTRY[id].name,
     // The dot's colour is HARDCODED (the palette's light-theme signature primary
     // — its `--color-primary-fill` in globals.css), NOT a `data-palette`-scoped
-    // `--el-accent`. A scoped `--el-accent` resolves under the ACTIVE theme/style,
-    // so the dot would shift with dark mode (and a base palette nested under a
-    // non-base `<html>` inherits the wrong accent — the StyleVignette nested-base
-    // caveat). A fixed swatch always shows the palette's own identity hue. The
+    // `--el-accent`. The reason is THEME-INDEPENDENCE, and it is the whole of
+    // the reason: a scoped `--el-accent` resolves under the ACTIVE theme, so the
+    // dot would shift in dark mode, while this row is an identity legend — each
+    // swatch must read as the palette's own hue whatever the page is wearing.
+    // (This comment used to cite the StyleVignette nested-base caveat as a
+    // second reason. That leak is closed on both axes — palette by
+    // MOTIR-3933's `data-appearance-scope` re-emission, material by
+    // MOTIR-3997's `@scope … to ([data-style])` limit — so a nested scope now
+    // resolves its own tokens. The citation is retired; the swatch stays
+    // hardcoded on the theme-independence reason alone.) The
     // `Record<PaletteId, …>` keeps it total — a new palette won't typecheck until
     // its swatch is added.
     leading: /* @__PURE__ */ jsx(

package/dist/components/theme/AppearancePickers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/utils/cn.ts","../../../src/theme/typography.ts","../../../src/theme/styles.ts","../../../src/theme/palettes.ts","../../../src/components/theme/AppearancePickers.tsx"],"names":[],"mappings":"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","file":"AppearancePickers.js","sourcesContent":["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","/\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","'use client';\n\nimport { useRef, type ReactNode } from 'react';\nimport { Check, Monitor, Moon, Sun } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { STYLE_IDS, STYLE_REGISTRY, type StyleId } from '../../theme/styles';\nimport { PALETTE_IDS, PALETTE_REGISTRY, type PaletteId } from '../../theme/palettes';\nimport { TYPE_IDS, TYPE_REGISTRY, type TypeId } from '../../theme/typography';\nimport type { ThemePattern } from '../../theme/types';\n\n/\n The three-axis design-system PICKERS — the shared control vocabulary for\n * Motir's own appearance (the account-settings Appearance pane, 7.3.58) AND the\n * onboarding design wizard (7.3.27), which themes the user's OWN product with the\n * same axes. They are kept here, beside `StyleVignette` (the 7.3.37 specimen), so\n * the two surfaces share ONE implementation instead of forking the picker\n * language (the 7.3.58 \"share the axis pickers\" requirement).\n \n Every picker is CONTROLLED + presentational: it renders the chips from the\n * shipped registries (`lib/theme/{styles,palettes,typography}.ts`) and reports a\n * `value` / `onChange` — it does NOT read `theme-context`. Each consumer wires the\n * source of truth it owns: the Appearance pane wires `useTheme()` (so picking\n * re-skins Motir live via the localStorage → `<html>` bootstrap); the onboarding\n * wizard wires its own product-design state. Option NAMES + taglines come from the\n * registries (brand/style names, like the `/tokens` composer), so the pickers can\n * never drift from what the app can actually wear.\n \n Colour flows through `--el-` only; chip / segmented shape flows through the\n element-semantic shape tokens (`--radius-badge` / `--radius-btn`,\n * `--spacing-chip-` / `--spacing-btn-x`, `--shadow-subtle`) so a `data-style`\n swap reshapes them too (CLAUDE.md colour + shape rules). The mock of record is\n * `design/settings/appearance.mock.html` (7.3.57 / MOTIR-1074).\n /\n\n// ── AxisField — the labelled wrapper around one axis control ────────────────\n/\n One hairline-separated axis row: a name + helper head, the control, and a live\n * registry note showing the active selection. Matches the mock's `.axis-field`.\n /\nexport function AxisField({\n name,\n help,\n children,\n note,\n}: {\n name: string;\n help: string;\n children: ReactNode;\n note?: ReactNode;\n}) {\n return (\n <div className=\"border-b border-(--el-border-soft) py-4 last:border-b-0\">\n <div className=\"mb-3 flex flex-wrap items-baseline gap-x-2.5 gap-y-1\">\n <span className=\"text-sm font-semibold text-(--el-text)\">{name}</span>\n <span className=\"text-xs text-(--el-text-muted)\">{help}</span>\n </div>\n {children}\n {note ? (\n <p className=\"mt-2.5 text-xs leading-relaxed text-(--el-text-muted)\">{note}</p>\n ) : null}\n </div>\n );\n}\n\n/* A live registry note — the bolded active name followed by its tagline. /\nexport function AxisNote({ name, tagline }: { name: string; tagline: string }) {\n return (\n <>\n <span className=\"font-semibold text-(--el-text-secondary)\">{name}</span> — {tagline}\n </>\n );\n}\n\n// ── AxisRadioGroup — a keyboard-navigable chip radiogroup ────────────────────\nexport interface AxisOption<T extends string> {\n id: T;\n /* Visible chip label. /\n label: string;\n /* Optional leading visual (e.g. a palette swatch dot) before the label. /\n leading?: ReactNode;\n /* Optional class on the label span (e.g. a per-type font scope). /\n labelClassName?: string;\n /* Optional data-* attrs on the chip so it can preview that axis value. /\n scope?: Record<string, string>;\n}\n\n/\n A `role=\"radiogroup\"` of `.pick`-style chips with roving-tabindex + arrow-key\n * navigation (the standard radiogroup interaction). Selecting moves focus too, so\n * arrow keys both change and focus the selection. Generic over the id union.\n /\nexport function AxisRadioGroup<T extends string>({\n label,\n value,\n onChange,\n options,\n}: {\n label: string;\n value: T;\n onChange: (value: T) => void;\n options: AxisOption<T>[];\n}) {\n const refs = useRef<(HTMLButtonElement \| null)[]>([]);\n\n function move(delta: number, from: number) {\n const next = (from + delta + options.length) % options.length;\n onChange(options[next]!.id);\n refs.current[next]?.focus();\n }\n\n return (\n <div role=\"radiogroup\" aria-label={label} className=\"flex flex-wrap gap-2\">\n {options.map((opt, i) => {\n const selected = opt.id === value;\n return (\n <button\n key={opt.id}\n ref={(el) => {\n refs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={selected}\n tabIndex={selected ? 0 : -1}\n onClick={() => onChange(opt.id)}\n onKeyDown={(e) => {\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n move(1, i);\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n e.preventDefault();\n move(-1, i);\n }\n }}\n {...(opt.scope ?? {})}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-(--radius-badge) border',\n 'px-(--spacing-chip-x) py-(--spacing-chip-y) text-sm font-medium transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)',\n selected\n ? 'border-(--el-accent) bg-(--el-tint-lavender) text-(--el-accent-on-surface)'\n : 'border-(--el-border) bg-(--el-page-bg) text-(--el-text-secondary) hover:border-(--el-border-strong) hover:text-(--el-text)',\n )}\n >\n {opt.leading}\n <span className={opt.labelClassName}>{opt.label}</span>\n {selected ? <Check className=\"size-3.5 shrink-0\" aria-hidden /> : null}\n </button>\n );\n })}\n </div>\n );\n}\n\n// ── ThemeSegmentedControl — Light · Dark · System ────────────────────────────\nconst THEME_SEGMENTS: { id: ThemePattern; Icon: typeof Sun }[] = [\n { id: 'light', Icon: Sun },\n { id: 'dark', Icon: Moon },\n { id: 'system', Icon: Monitor },\n];\n\n/\n The light/dark/system base as a segmented control (the mock's `.segmented`).\n * `labels` maps each pattern to its translated chip text (the consumer owns i18n).\n /\nexport function ThemeSegmentedControl({\n value,\n onChange,\n label,\n labels,\n}: {\n value: ThemePattern;\n onChange: (value: ThemePattern) => void;\n label: string;\n labels: Record<ThemePattern, string>;\n}) {\n const refs = useRef<(HTMLButtonElement \| null)[]>([]);\n\n function move(delta: number, from: number) {\n const next = (from + delta + THEME_SEGMENTS.length) % THEME_SEGMENTS.length;\n onChange(THEME_SEGMENTS[next]!.id);\n refs.current[next]?.focus();\n }\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={label}\n className=\"inline-flex gap-[3px] rounded-(--radius-btn) border border-(--el-border) bg-(--el-muted) p-[3px]\"\n >\n {THEME_SEGMENTS.map(({ id, Icon }, i) => {\n const selected = id === value;\n return (\n <button\n key={id}\n ref={(el) => {\n refs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={selected}\n tabIndex={selected ? 0 : -1}\n onClick={() => onChange(id)}\n onKeyDown={(e) => {\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n move(1, i);\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n e.preventDefault();\n move(-1, i);\n }\n }}\n className={cn(\n 'inline-flex h-(--height-btn-sm) items-center gap-2 px-(--spacing-btn-x) text-sm font-medium',\n 'rounded-[calc(var(--radius-btn)-2px)] border transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)',\n selected\n ? 'border-(--el-border) bg-(--el-page-bg) text-(--el-text) shadow-(--shadow-subtle)'\n : 'border-transparent text-(--el-text-secondary) hover:text-(--el-text)',\n )}\n >\n <Icon className={cn('size-4 shrink-0', selected && 'text-(--el-accent)')} aria-hidden />\n {labels[id]}\n </button>\n );\n })}\n </div>\n );\n}\n\n// ── The three registry-driven axis pickers ───────────────────────────────────\n/* Style (shape/feel) — the 6-style chip row. /\nexport function StylePicker({\n value,\n onChange,\n label,\n}: {\n value: StyleId;\n onChange: (value: StyleId) => void;\n label: string;\n}) {\n const options: AxisOption<StyleId>[] = STYLE_IDS.map((id) => ({\n id,\n label: STYLE_REGISTRY[id].name,\n }));\n return <AxisRadioGroup label={label} value={value} onChange={onChange} options={options} />;\n}\n\n/\n Each palette's signature primary hue, hardcoded — the light-theme\n * `--color-primary-fill` of its `[data-palette]` block in `app/globals.css`\n * (graphite's is its near-black ink CTA). Used for the picker swatch so the dot\n * shows the palette's identity colour independent of the active theme/style.\n /\nconst PALETTE_SWATCH_HEX: Record<PaletteId, string> = {\n motir: '#5645d4',\n cobalt: '#3650c2',\n graphite: '#1a1d21',\n evergreen: '#0c7a52',\n spectrum: '#5a37c9',\n amber: '#f0b90b',\n sienna: '#fa520f',\n garnet: '#c30021',\n citrine: '#ffd02f',\n candy: '#efbfdd',\n};\n\n/* Palette (colour) — the 10-palette chip row, each with its accent swatch dot. /\nexport function PalettePicker({\n value,\n onChange,\n label,\n}: {\n value: PaletteId;\n onChange: (value: PaletteId) => void;\n label: string;\n}) {\n const options: AxisOption<PaletteId>[] = PALETTE_IDS.map((id) => ({\n id,\n label: PALETTE_REGISTRY[id].name,\n // The dot's colour is HARDCODED (the palette's light-theme signature primary\n // — its `--color-primary-fill` in globals.css), NOT a `data-palette`-scoped\n // `--el-accent`. A scoped `--el-accent` resolves under the ACTIVE theme/style,\n // so the dot would shift with dark mode (and a base palette nested under a\n // non-base `<html>` inherits the wrong accent — the StyleVignette nested-base\n // caveat). A fixed swatch always shows the palette's own identity hue. The\n // `Record<PaletteId, …>` keeps it total — a new palette won't typecheck until\n // its swatch is added.\n leading: (\n <span\n className=\"size-[11px] shrink-0 rounded-full\"\n style={{ background: PALETTE_SWATCH_HEX[id] }}\n aria-hidden\n />\n ),\n }));\n return <AxisRadioGroup label={label} value={value} onChange={onChange} options={options} />;\n}\n\n/* Typography — the 6-pairing chip row; each label set in its own headline face. */\nexport function TypePicker({\n value,\n onChange,\n label,\n}: {\n value: TypeId;\n onChange: (value: TypeId) => void;\n label: string;\n}) {\n const options: AxisOption<TypeId>[] = TYPE_IDS.map((id) => ({\n id,\n label: TYPE_REGISTRY[id].name,\n // The label scopes `data-type` to itself + uses the headline role, so the\n // chip previews the pairing's own headline face.\n scope: { 'data-type': id },\n labelClassName: 'font-serif',\n }));\n return <AxisRadioGroup label={label} value={value} onChange={onChange} options={options} />;\n}\n"]}
1	+ {"version":3,"sources":["../../../src/utils/cn.ts","../../../src/theme/typography.ts","../../../src/theme/styles.ts","../../../src/theme/palettes.ts","../../../src/components/theme/AppearancePickers.tsx"],"names":[],"mappings":"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","file":"AppearancePickers.js","sourcesContent":["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","/\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","'use client';\n\nimport { useRef, type ReactNode } from 'react';\nimport { Check, Monitor, Moon, Sun } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { STYLE_IDS, STYLE_REGISTRY, type StyleId } from '../../theme/styles';\nimport { PALETTE_IDS, PALETTE_REGISTRY, type PaletteId } from '../../theme/palettes';\nimport { TYPE_IDS, TYPE_REGISTRY, type TypeId } from '../../theme/typography';\nimport type { ThemePattern } from '../../theme/types';\n\n/\n The three-axis design-system PICKERS — the shared control vocabulary for\n * Motir's own appearance (the account-settings Appearance pane, 7.3.58) AND the\n * onboarding design wizard (7.3.27), which themes the user's OWN product with the\n * same axes. They are kept here, beside `StyleVignette` (the 7.3.37 specimen), so\n * the two surfaces share ONE implementation instead of forking the picker\n * language (the 7.3.58 \"share the axis pickers\" requirement).\n \n Every picker is CONTROLLED + presentational: it renders the chips from the\n * shipped registries (`lib/theme/{styles,palettes,typography}.ts`) and reports a\n * `value` / `onChange` — it does NOT read `theme-context`. Each consumer wires the\n * source of truth it owns: the Appearance pane wires `useTheme()` (so picking\n * re-skins Motir live via the localStorage → `<html>` bootstrap); the onboarding\n * wizard wires its own product-design state. Option NAMES + taglines come from the\n * registries (brand/style names, like the `/tokens` composer), so the pickers can\n * never drift from what the app can actually wear.\n \n Colour flows through `--el-` only; chip / segmented shape flows through the\n element-semantic shape tokens (`--radius-badge` / `--radius-btn`,\n * `--spacing-chip-` / `--spacing-btn-x`, `--shadow-subtle`) so a `data-style`\n swap reshapes them too (CLAUDE.md colour + shape rules). The mock of record is\n * `design/settings/appearance.mock.html` (7.3.57 / MOTIR-1074).\n /\n\n// ── AxisField — the labelled wrapper around one axis control ────────────────\n/\n One hairline-separated axis row: a name + helper head, the control, and a live\n * registry note showing the active selection. Matches the mock's `.axis-field`.\n /\nexport function AxisField({\n name,\n help,\n children,\n note,\n}: {\n name: string;\n help: string;\n children: ReactNode;\n note?: ReactNode;\n}) {\n return (\n <div className=\"border-b border-(--el-border-soft) py-4 last:border-b-0\">\n <div className=\"mb-3 flex flex-wrap items-baseline gap-x-2.5 gap-y-1\">\n <span className=\"text-sm font-semibold text-(--el-text)\">{name}</span>\n <span className=\"text-xs text-(--el-text-muted)\">{help}</span>\n </div>\n {children}\n {note ? (\n <p className=\"mt-2.5 text-xs leading-relaxed text-(--el-text-muted)\">{note}</p>\n ) : null}\n </div>\n );\n}\n\n/* A live registry note — the bolded active name followed by its tagline. /\nexport function AxisNote({ name, tagline }: { name: string; tagline: string }) {\n return (\n <>\n <span className=\"font-semibold text-(--el-text-secondary)\">{name}</span> — {tagline}\n </>\n );\n}\n\n// ── AxisRadioGroup — a keyboard-navigable chip radiogroup ────────────────────\nexport interface AxisOption<T extends string> {\n id: T;\n /* Visible chip label. /\n label: string;\n /* Optional leading visual (e.g. a palette swatch dot) before the label. /\n leading?: ReactNode;\n /* Optional class on the label span (e.g. a per-type font scope). /\n labelClassName?: string;\n /* Optional data-* attrs on the chip so it can preview that axis value. /\n scope?: Record<string, string>;\n}\n\n/\n A `role=\"radiogroup\"` of `.pick`-style chips with roving-tabindex + arrow-key\n * navigation (the standard radiogroup interaction). Selecting moves focus too, so\n * arrow keys both change and focus the selection. Generic over the id union.\n /\nexport function AxisRadioGroup<T extends string>({\n label,\n value,\n onChange,\n options,\n}: {\n label: string;\n value: T;\n onChange: (value: T) => void;\n options: AxisOption<T>[];\n}) {\n const refs = useRef<(HTMLButtonElement \| null)[]>([]);\n\n function move(delta: number, from: number) {\n const next = (from + delta + options.length) % options.length;\n onChange(options[next]!.id);\n refs.current[next]?.focus();\n }\n\n return (\n <div role=\"radiogroup\" aria-label={label} className=\"flex flex-wrap gap-2\">\n {options.map((opt, i) => {\n const selected = opt.id === value;\n return (\n <button\n key={opt.id}\n ref={(el) => {\n refs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={selected}\n tabIndex={selected ? 0 : -1}\n onClick={() => onChange(opt.id)}\n onKeyDown={(e) => {\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n move(1, i);\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n e.preventDefault();\n move(-1, i);\n }\n }}\n {...(opt.scope ?? {})}\n className={cn(\n 'inline-flex items-center gap-1.5 rounded-(--radius-badge) border',\n 'px-(--spacing-chip-x) py-(--spacing-chip-y) text-sm font-medium transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)',\n selected\n ? 'border-(--el-accent) bg-(--el-tint-lavender) text-(--el-accent-on-surface)'\n : 'border-(--el-border) bg-(--el-page-bg) text-(--el-text-secondary) hover:border-(--el-border-strong) hover:text-(--el-text)',\n )}\n >\n {opt.leading}\n <span className={opt.labelClassName}>{opt.label}</span>\n {selected ? <Check className=\"size-3.5 shrink-0\" aria-hidden /> : null}\n </button>\n );\n })}\n </div>\n );\n}\n\n// ── ThemeSegmentedControl — Light · Dark · System ────────────────────────────\nconst THEME_SEGMENTS: { id: ThemePattern; Icon: typeof Sun }[] = [\n { id: 'light', Icon: Sun },\n { id: 'dark', Icon: Moon },\n { id: 'system', Icon: Monitor },\n];\n\n/\n The light/dark/system base as a segmented control (the mock's `.segmented`).\n * `labels` maps each pattern to its translated chip text (the consumer owns i18n).\n /\nexport function ThemeSegmentedControl({\n value,\n onChange,\n label,\n labels,\n}: {\n value: ThemePattern;\n onChange: (value: ThemePattern) => void;\n label: string;\n labels: Record<ThemePattern, string>;\n}) {\n const refs = useRef<(HTMLButtonElement \| null)[]>([]);\n\n function move(delta: number, from: number) {\n const next = (from + delta + THEME_SEGMENTS.length) % THEME_SEGMENTS.length;\n onChange(THEME_SEGMENTS[next]!.id);\n refs.current[next]?.focus();\n }\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={label}\n className=\"inline-flex gap-[3px] rounded-(--radius-btn) border border-(--el-border) bg-(--el-muted) p-[3px]\"\n >\n {THEME_SEGMENTS.map(({ id, Icon }, i) => {\n const selected = id === value;\n return (\n <button\n key={id}\n ref={(el) => {\n refs.current[i] = el;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={selected}\n tabIndex={selected ? 0 : -1}\n onClick={() => onChange(id)}\n onKeyDown={(e) => {\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowDown') {\n e.preventDefault();\n move(1, i);\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowUp') {\n e.preventDefault();\n move(-1, i);\n }\n }}\n className={cn(\n 'inline-flex h-(--height-btn-sm) items-center gap-2 px-(--spacing-btn-x) text-sm font-medium',\n 'rounded-[calc(var(--radius-btn)-2px)] border transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)',\n selected\n ? 'border-(--el-border) bg-(--el-page-bg) text-(--el-text) shadow-(--shadow-subtle)'\n : 'border-transparent text-(--el-text-secondary) hover:text-(--el-text)',\n )}\n >\n <Icon className={cn('size-4 shrink-0', selected && 'text-(--el-accent)')} aria-hidden />\n {labels[id]}\n </button>\n );\n })}\n </div>\n );\n}\n\n// ── The three registry-driven axis pickers ───────────────────────────────────\n/* Style (shape/feel) — the 6-style chip row. /\nexport function StylePicker({\n value,\n onChange,\n label,\n}: {\n value: StyleId;\n onChange: (value: StyleId) => void;\n label: string;\n}) {\n const options: AxisOption<StyleId>[] = STYLE_IDS.map((id) => ({\n id,\n label: STYLE_REGISTRY[id].name,\n }));\n return <AxisRadioGroup label={label} value={value} onChange={onChange} options={options} />;\n}\n\n/\n Each palette's signature primary hue, hardcoded — the light-theme\n * `--color-primary-fill` of its `[data-palette]` block in `app/globals.css`\n * (graphite's is its near-black ink CTA). Used for the picker swatch so the dot\n * shows the palette's identity colour independent of the active theme/style.\n /\nconst PALETTE_SWATCH_HEX: Record<PaletteId, string> = {\n motir: '#5645d4',\n cobalt: '#3650c2',\n graphite: '#1a1d21',\n evergreen: '#0c7a52',\n spectrum: '#5a37c9',\n amber: '#f0b90b',\n sienna: '#fa520f',\n garnet: '#c30021',\n citrine: '#ffd02f',\n candy: '#efbfdd',\n};\n\n/* Palette (colour) — the 10-palette chip row, each with its accent swatch dot. /\nexport function PalettePicker({\n value,\n onChange,\n label,\n}: {\n value: PaletteId;\n onChange: (value: PaletteId) => void;\n label: string;\n}) {\n const options: AxisOption<PaletteId>[] = PALETTE_IDS.map((id) => ({\n id,\n label: PALETTE_REGISTRY[id].name,\n // The dot's colour is HARDCODED (the palette's light-theme signature primary\n // — its `--color-primary-fill` in globals.css), NOT a `data-palette`-scoped\n // `--el-accent`. The reason is THEME-INDEPENDENCE, and it is the whole of\n // the reason: a scoped `--el-accent` resolves under the ACTIVE theme, so the\n // dot would shift in dark mode, while this row is an identity legend — each\n // swatch must read as the palette's own hue whatever the page is wearing.\n // (This comment used to cite the StyleVignette nested-base caveat as a\n // second reason. That leak is closed on both axes — palette by\n // MOTIR-3933's `data-appearance-scope` re-emission, material by\n // MOTIR-3997's `@scope … to ([data-style])` limit — so a nested scope now\n // resolves its own tokens. The citation is retired; the swatch stays\n // hardcoded on the theme-independence reason alone.) The\n // `Record<PaletteId, …>` keeps it total — a new palette won't typecheck until\n // its swatch is added.\n leading: (\n <span\n className=\"size-[11px] shrink-0 rounded-full\"\n style={{ background: PALETTE_SWATCH_HEX[id] }}\n aria-hidden\n />\n ),\n }));\n return <AxisRadioGroup label={label} value={value} onChange={onChange} options={options} />;\n}\n\n/* Typography — the 6-pairing chip row; each label set in its own headline face. */\nexport function TypePicker({\n value,\n onChange,\n label,\n}: {\n value: TypeId;\n onChange: (value: TypeId) => void;\n label: string;\n}) {\n const options: AxisOption<TypeId>[] = TYPE_IDS.map((id) => ({\n id,\n label: TYPE_REGISTRY[id].name,\n // The label scopes `data-type` to itself + uses the headline role, so the\n // chip previews the pairing's own headline face.\n scope: { 'data-type': id },\n labelClassName: 'font-serif',\n }));\n return <AxisRadioGroup label={label} value={value} onChange={onChange} options={options} />;\n}\n"]}

package/dist/components/theme/StyleVignette.d.ts CHANGED Viewed

@@ -49,16 +49,29 @@ import { TypeId } from '../../theme/typography.js';
  *     base entry too.
  *   • TYPE (`type`) — ISOLATED, same mechanism plus a base `[data-type='motir']`
  *     block. That axis ships no descendant rules, so the tokens are all of it.
- *   • SHAPE / MATERIAL (`styleId`) — **NOT ISOLATED, and this is open.** The
- *     style axis ships ~69 descendant rules (`[data-style='X'] [data-surface=…]`,
- *     `[data-style='X'] body`, …) and a descendant combinator does not stop at a
- *     nested `data-style`. Under an active `glassmorphism` only 1 of 11 scoped
- *     style vignettes wears its own material; under `aurora`, 3 of 11. The
- *     shape TOKENS still scope correctly for a non-base style — it is the
- *     material rules that cross. MOTIR-3947 owns the fix and the mechanism
- *     choice (selector barrier vs an isolated render tree); do not add a
- *     `[data-style='warm-editorial']` base block as a partial remedy, because it
- *     makes a token assertion pass on a tile that still paints as the ancestor.
+ *   • SHAPE (`styleId`, the token block) — ISOLATED. A `[data-style]` block sets
+ *     plain custom properties on the wrapper and they inherit down the subtree.
+ *   • MATERIAL (`styleId`, the descendant layer) — ISOLATED by the SCOPING
+ *     LIMIT, since MOTIR-3997. The layer used to ship as descendant rules
+ *     (`[data-style='X'] [data-surface=…]`, `[data-style='X'] body`, …), and a
+ *     descendant combinator does not stop at a nested `data-style`: under an
+ *     active `glassmorphism` only 1 of 11 scoped tiles wore its own material,
+ *     under `aurora` 2 of 11, 64 of 121 over the full matrix. All 69 rules now
+ *     ship as `@scope ([data-style='X']) to ([data-style]) { … }`, where
+ *     `to (…)` is a scoping LIMIT — THIS component's `data-style` wrapper is
+ *     what an ancestor style's scope stops at, so "the nearest `[data-style]`
+ *     ancestor wins" is structural rather than a per-rule opt-out. The full
+ *     matrix measures 121 / 121. See
+ *     `docs/decisions/scoped-preview-isolation.md` for the measurement, the two
+ *     rejected candidates and what the mechanism costs.
+ *     Two things that follow, and neither is a claim about who consumes this
+ *     component today: do NOT add a `[data-style='warm-editorial']` base block
+ *     as a remedy — the base ships no material layer, and such a block only
+ *     makes a resolved-TOKEN assertion pass on a tile that still paints as the
+ *     ancestor. And the mechanism is structural, not automatic: a material rule
+ *     authored as a plain descendant crosses the boundary exactly as these did,
+ *     which is what `tests/theme/styleRegistry.test.ts`'s 69-rule ratchet
+ *     exists to catch.
  */
 interface StyleVignetteProps {
     /** Scope the vignette to a specific style; omit to inherit the active style. */