@motir/design-system 0.1.0

package/dist/contexts/theme-context.js

@@ -0,0 +1,561 @@
+'use client';
+import { createContext, useState, useSyncExternalStore, useEffect, useRef, useCallback, useMemo, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/theme/typography.ts
+var TYPE_REGISTRY = {
+  motir: {
+    id: "motir",
+    name: "Motir",
+    tagline: "Editorial serif headlines over a clean sans body \u2014 the house pairing.",
+    faces: "Source Serif 4 headlines \xB7 Inter body \xB7 JetBrains Mono meta.",
+    designDoc: "docs/typography/motir.md"
+  },
+  "motir-sans": {
+    id: "motir-sans",
+    name: "Motir Sans",
+    tagline: "All-sans \u2014 Inter for headlines and body; structural, no serif.",
+    faces: "Inter headlines + body \xB7 JetBrains Mono meta.",
+    designDoc: "docs/typography/motir-sans.md"
+  },
+  "motir-mono": {
+    id: "motir-mono",
+    name: "Motir Mono",
+    tagline: "Monospace throughout \u2014 a code-native UI, headlines, body and all.",
+    faces: "JetBrains Mono headlines + body/UI + meta.",
+    designDoc: "docs/typography/motir-mono.md"
+  },
+  grotesk: {
+    id: "grotesk",
+    name: "Grotesk",
+    tagline: "Geometric neo-grotesque across the whole UI \u2014 tight, confident, product-y.",
+    faces: "Space Grotesk headlines + body/UI \xB7 JetBrains Mono meta.",
+    designDoc: "docs/typography/grotesk.md"
+  },
+  editorial: {
+    id: "editorial",
+    name: "Editorial",
+    tagline: "A characterful display serif over a humanist sans \u2014 magazine, considered.",
+    faces: "Fraunces display headlines \xB7 Inter body \xB7 JetBrains Mono meta.",
+    designDoc: "docs/typography/editorial.md"
+  },
+  "mono-technical": {
+    id: "mono-technical",
+    name: "Mono-Technical",
+    tagline: "IBM Plex Mono throughout \u2014 a precise, developer-grade UI.",
+    faces: "IBM Plex Mono headlines + body/UI + meta/code.",
+    designDoc: "docs/typography/mono-technical.md"
+  }
+};
+function isTypeId(value) {
+  return typeof value === "string" && Object.prototype.hasOwnProperty.call(TYPE_REGISTRY, value);
+}
+
+// src/theme/styles.ts
+var STYLE_REGISTRY = {
+  "warm-editorial": {
+    id: "warm-editorial",
+    name: "Warm Editorial",
+    tagline: "Thoughtful, warm, technical-but-not-cold, slightly editorial.",
+    inspiration: "Notion's warm palette + Source Serif headlines over Inter body.",
+    designDoc: "docs/styles/warm-editorial.md",
+    defaultTypeId: "motir",
+    dimensions: {
+      silhouette: "Sober rectangles \u2014 8px buttons, 12px cards. Restrained, document-like.",
+      stroke: "Hairline borders (1px warm-grey); structure drawn quietly, never heavy.",
+      elevation: "Modest, low-spread shadows; surfaces sit close to the page.",
+      surface: "Opaque cream surfaces over a white canvas; pastel tints for feature cards only.",
+      density: "Comfortable default rhythm \u2014 18\xD710 button padding, 24px card padding.",
+      motion: "Brisk 150ms ease; understated, gets out of the way.",
+      typography: "Source Serif 4 editorial headlines + Inter body + JetBrains Mono meta.",
+      components: "Rectangular buttons/inputs, hairline-bordered cards, badge pills for status only."
+    }
+  },
+  "soft-playful": {
+    id: "soft-playful",
+    name: "Soft / Playful",
+    tagline: "More energy \u2014 rounded, generous, gently animated.",
+    inspiration: "Figma's pill-shape language (50px pills, roomy spacing).",
+    designDoc: "docs/styles/soft-playful.md",
+    defaultTypeId: "motir",
+    dimensions: {
+      silhouette: "Pill buttons (fully rounded) and large 24px card/input radii. Friendly, bubbly.",
+      stroke: "Same hairline borders as the base; identity comes from radius, not stroke weight.",
+      elevation: "Softer, more diffused shadows \u2014 surfaces float a touch more.",
+      surface: "Opaque, like the base \u2014 colour stays the palette axis; only the shape softens.",
+      density: "Roomier \u2014 20\xD712 button padding, 28px card padding, taller controls.",
+      motion: "Gentler 200ms ease and a slightly deeper press scale for a springy feel.",
+      typography: "Inherits the base type pairing; the personality is in shape, not type.",
+      components: "Pill buttons, heavily-rounded inputs/cards/modals, rounder small affordances."
+    }
+  },
+  "swiss-minimal-flat": {
+    id: "swiss-minimal-flat",
+    name: "Swiss / Minimal-Flat",
+    tagline: "International-typographic, structural, calm \u2014 flat, sharp, gridded.",
+    inspiration: "Swiss International Typographic Style \u2014 M\xFCller-Brockmann grids, flat surfaces.",
+    designDoc: "docs/styles/swiss-minimal-flat.md",
+    defaultTypeId: "motir-sans",
+    dimensions: {
+      silhouette: "Sharp near-square corners (2px) on every surface \u2014 hard right angles, structural.",
+      stroke: "Hairline borders do ALL the structural work; with elevation removed, the 1px rule is the only divider.",
+      elevation: "Flat \u2014 every shadow is removed (none). Depth comes from borders + whitespace, not lift.",
+      surface: "Opaque, untinted panels delineated by hairline rules; no floating, no glass, no wash.",
+      density: "Tight, gridded controls (crisp 16\xD79 buttons, 34px control height) with generous 28px card whitespace.",
+      motion: "Minimal \u2014 fast 100ms transitions and NO press-scale (calm, mechanical, never springy).",
+      typography: "Restrained neo-grotesque sans throughout \u2014 headlines drop the editorial serif for Inter, tight and strong.",
+      components: "Square buttons/inputs/cards/modals, rectangular (non-pill) status chips, flat hairline-ruled surfaces."
+    }
+  },
+  "neo-brutalism": {
+    id: "neo-brutalism",
+    name: "Neo-Brutalism",
+    tagline: "Raw, punchy, utilitarian \u2014 0px corners, thick borders, hard-offset shadows.",
+    inspiration: "Neo-brutalist web design \u2014 Gumroad / Figma-community brutalism: blocky, unpolished, loud.",
+    designDoc: "docs/styles/neo-brutalism.md",
+    defaultTypeId: "motir-mono",
+    dimensions: {
+      silhouette: "Zero radius \u2014 hard 0px corners on EVERY surface (buttons, cards, inputs, modals, status chips). Blocky and uncompromising.",
+      stroke: "Heavy solid 2px outlines do the structural work \u2014 borders are LOUD, not hairline (the defining neo-brutalist move, applied via a style-scoped component-variant block).",
+      elevation: "Hard-offset drop shadows with ZERO blur (e.g. 4px 4px 0 0) \u2014 a solid block of shadow, never a soft lift; the chunky frame, not diffusion.",
+      surface: "Opaque, flat, untinted panels framed by the thick border + the hard shadow; no glass, no wash, no gradient.",
+      density: "Tight, utilitarian controls (16\xD710 buttons, 36px control height) with compact 20px card padding \u2014 no wasted space.",
+      motion: "Snappy and mechanical \u2014 near-instant 60ms transitions and NO press-scale; the UI reacts, it does not animate.",
+      typography: "Raw monospace headlines \u2014 the editorial serif is re-pointed at the JetBrains Mono stack, against the Inter grotesk body.",
+      components: "Square buttons/inputs/cards/modals, rectangular (non-pill) status chips, thick-bordered surfaces with hard-offset shadows."
+    }
+  },
+  glassmorphism: {
+    id: "glassmorphism",
+    name: "Glassmorphism",
+    tagline: "Translucent frosted glass floating over a soft, vibrant gradient.",
+    inspiration: "Apple's visionOS / macOS Big Sur 'frosted glass' material \u2014 backdrop-blur over depth.",
+    designDoc: "docs/styles/glassmorphism.md",
+    defaultTypeId: "motir",
+    dimensions: {
+      silhouette: "Soft, rounded glass tiles \u2014 12px buttons/inputs, 18px cards, 22px modals. Friendly, never sharp.",
+      stroke: "Light 1px hairlines at reduced opacity \u2014 a glass edge catching light, not a structural rule.",
+      elevation: "Layered, diffuse, low-opacity shadows \u2014 panels float as hovering frosted sheets above the canvas.",
+      surface: "The identity axis: translucent frosted panels (backdrop-blur) over a soft palette-derived gradient canvas \u2014 material, not opaque.",
+      density: "Comfortable, a touch roomy \u2014 20\xD711 buttons, 26px card padding, 38px controls; glass tiles want air.",
+      motion: "Gentle, smooth \u2014 220ms ease and a light press-scale; glass slides into place, it never snaps.",
+      typography: "Inherits the base editorial type pairing; the personality is in the material, not the type.",
+      components: "Rounded frosted cards / popovers / modals / sidebar / inputs (the data-surface material layer), pill status chips."
+    }
+  },
+  "cybercore-y2k": {
+    id: "cybercore-y2k",
+    name: "Cybercore / Y2K",
+    tagline: "Neon-on-dark retro-tech \u2014 glowing HUD panels, a tech grid, mono headlines.",
+    inspiration: "Y2K / cyberpunk HUDs \u2014 neon-on-dark terminals, Tron grids, glowing edges, monospace displays.",
+    designDoc: "docs/styles/cybercore-y2k.md",
+    defaultTypeId: "motir-mono",
+    dimensions: {
+      silhouette: "Hard terminal-frame corners (sharp 2\u20134px) \u2014 chiseled HUD panels, not soft cards.",
+      stroke: "Structure drawn by a lit edge \u2014 a 1px glow-ring (currentColor halo) on every surface, not a heavier border.",
+      elevation: "Neon GLOW instead of drop-shadow \u2014 surfaces emit an outward currentColor halo, lit rather than lifted.",
+      surface: "A faint tech grid (scanline/grid texture) washes the canvas behind opaque HUD panels.",
+      density: "Tight, technical HUD rhythm \u2014 compact controls (18\xD79 buttons, 34px control height) over snug 20px card padding.",
+      motion: "Snappy and electric \u2014 very fast 90ms transitions with a crisp press-scale.",
+      typography: "Mono/display headlines \u2014 the serif headline face is swapped to JetBrains Mono for a terminal read; body stays sans.",
+      components: "Sharp glow-ringed panels, mono headings, rectangular chips; the lit edge replaces the drop shadow everywhere."
+    }
+  },
+  aurora: {
+    id: "aurora",
+    name: "Aurora",
+    tagline: "Soft, drifting aurora light behind fluid, gently-glowing surfaces.",
+    inspiration: 'The northern lights \u2014 slow ribbons of colour over a night sky \u2014 and the soft animated-gradient "aurora" hero look (Stripe / Vercel ambient gradients).',
+    designDoc: "docs/styles/aurora.md",
+    defaultTypeId: "motir",
+    dimensions: {
+      silhouette: "Fluid, soft corners \u2014 14px buttons/inputs, 20px cards, 26px modals. Organic and rounded, a touch softer than glass.",
+      stroke: "Quiet 1px hairlines; structure is implied by the gentle glow and elevation, never drawn by a heavy rule.",
+      elevation: "A soft neutral lift PLUS a gentle palette-derived COLOUR glow halo \u2014 surfaces feel lit from within, never hard-edged.",
+      surface: "The identity axis: opaque fluid surfaces floating over a slowly-DRIFTING, animated aurora gradient canvas (palette-derived ribbons).",
+      density: "Comfortable and roomy \u2014 20\xD711 buttons, 26px card padding, 38px controls; the light wants space to breathe.",
+      motion: "Smooth and slow \u2014 260ms eased transitions, a faint press-scale, and a 28s ambient drift of the aurora canvas (stilled under prefers-reduced-motion).",
+      typography: "Inherits the base editorial pairing (Source Serif headlines + Inter body); the personality is in the moving light, not the type.",
+      components: "Fluid, gently-glowing cards / popovers / modals / sidebar (the data-surface material layer); pill status chips."
+    }
+  },
+  "3d-immersive": {
+    id: "3d-immersive",
+    name: "3D / Immersive",
+    tagline: "Depth and perspective \u2014 dimensional cards floating over the page.",
+    inspiration: "Spatial / depth UI \u2014 visionOS spatial layers, Stripe-era layered cards, soft real-world light.",
+    designDoc: "docs/styles/3d-immersive.md",
+    defaultTypeId: "motir",
+    dimensions: {
+      silhouette: "Generously rounded dimensional tiles \u2014 14px buttons/inputs, 20px cards, 28px modals. Soft, tactile, never sharp.",
+      stroke: "Borders nearly vanish (a faint hairline) \u2014 structure is read from depth + shadow, not an outline.",
+      elevation: "The identity axis: deep multi-layer shadows float every surface off the canvas, and on tilt a card becomes a TRUE 3D object \u2014 perspective + preserve-3d + per-slot translateZ planes (header pops forward, footer behind) parallax under a cursor-tracked glare. Not a flat-plane tilt.",
+      surface: "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 \u2014 depth (not tint or glass) is the material; nothing sits flat.",
+      density: "Roomy and immersive \u2014 22\xD712 buttons, 28px card padding, 40px controls; depth wants air around each tile.",
+      motion: 'The standard "3D card" pointer-parallax \u2014 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.',
+      typography: "Inherits the base editorial type pairing; the personality is in depth + light, not the type.",
+      components: "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."
+    }
+  },
+  neumorphism: {
+    id: "neumorphism",
+    name: "Neumorphism",
+    tagline: "Soft extruded surfaces that swell out of a single monochrome field.",
+    inspiration: 'Neumorphism / soft-UI \u2014 Dribbble-era "soft shadow" interfaces where panels are pressed OUT of (or INTO) one continuous surface by a paired light + dark shadow.',
+    designDoc: "docs/styles/neumorphism.md",
+    defaultTypeId: "motir",
+    dimensions: {
+      silhouette: "Soft, generously rounded pebbles \u2014 12px buttons/inputs, 18px cards, 22px modals. Tactile and friendly, the rounding that lets a shadow wrap a surface.",
+      stroke: "Borders nearly vanish \u2014 a faint hairline kept ONLY as the accessibility fallback (see below); structure is read from the paired soft shadow, not an outline.",
+      elevation: "The identity axis: a DUAL soft shadow \u2014 a light highlight top-left + a palette-derived dark shadow bottom-right \u2014 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.",
+      surface: '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 \u2014 the soft-UI "single material" look. Opaque (text AA preserved), with the depth carried entirely by the shadows.',
+      density: "Comfortable and roomy \u2014 20\xD711 buttons, 26px card padding, 38px controls; the soft shadows need air around each surface to read as extruded.",
+      motion: "Gentle \u2014 200ms ease and a soft press-scale; nothing snaps, matching the moulded surfaces (form fields rest as concave inset wells, panels swell out raised).",
+      typography: "Inherits the base editorial type pairing; the personality is in the moulded surfaces, not the type.",
+      components: "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."
+    }
+  },
+  "hand-drawn-indie": {
+    id: "hand-drawn-indie",
+    name: "Hand-Drawn / Indie",
+    tagline: "Sketchy and friendly \u2014 rough hand-inked edges, wonky corners, soft offset shadows, a playful bounce.",
+    inspiration: "Indie / zine + hand-drawn web design \u2014 Excalidraw\u2019s rough hand-sketched strokes and doodled notebook UIs: warm, imperfect, human.",
+    designDoc: "docs/styles/hand-drawn-indie.md",
+    defaultTypeId: "editorial",
+    dimensions: {
+      silhouette: "Wonky hand-drawn corners \u2014 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.",
+      stroke: "Genuinely ROUGH, wavy ink edges \u2014 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.",
+      elevation: "Soft, hand-placed offset shadows \u2014 a gentle blurred drop nudged down-right (a doodled shadow), friendly and low; never a hard brutalist block nor a flat removal.",
+      surface: "Opaque, warm, paper-like panels \u2014 colour stays the palette axis; the personality is in the rough wavy outline + the soft shadow, not a tint or a wash.",
+      density: "Roomy and relaxed \u2014 generous 20\xD712 buttons, 26px card padding, taller 38px controls; the hand-drawn feel wants air, like margins round a sketch.",
+      motion: "Springy and playful \u2014 gentle 200ms transitions with a bouncy hover lift (1.02) and a deeper press squish (0.97); the UI has a friendly wobble.",
+      typography: "Ships the Editorial pairing (Fraunces display headlines + Inter body) \u2014 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.",
+      components: "Wonky-cornered buttons/inputs/cards/modals, irregular (non-pill) status chips, rough wavy-ink-bordered surfaces with soft hand-placed shadows."
+    }
+  },
+  retrofuturism: {
+    id: "retrofuturism",
+    name: "Retrofuturism",
+    tagline: "Chrome, gradient sweeps and a synthwave horizon \u2014 70s/80s sci-fi.",
+    inspiration: "Retrofuturism / Outrun \u2014 70s\u201380s sci-fi: chrome lettering, synthwave sunset gradients, airbrushed sci-fi paperbacks, and wide geometric display type.",
+    designDoc: "docs/styles/retrofuturism.md",
+    defaultTypeId: "grotesk",
+    dimensions: {
+      silhouette: "Streamlined chrome capsules \u2014 fully-rounded pill buttons + chips, 16px cards, 22px modals. Aerodynamic 70s/80s curves, never sharp.",
+      stroke: "A lit chrome edge \u2014 a bright inset highlight + a dark base line over a faint hairline, reading as a polished metal rim rather than a drawn border.",
+      elevation: "Chrome bevels + a diagonal SPECULAR streak + a palette-derived glow \u2014 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.",
+      surface: "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 \u2014 the neon horizon + grid read strongest on a dark palette.",
+      density: "Confident and roomy \u2014 22\xD711 chrome-capsule buttons, 24px card padding, 38px controls; the chrome wants room to catch the light.",
+      motion: "Smooth and gliding \u2014 200ms eased transitions and a confident press-scale; the synthwave horizon + grid are a STATIC backdrop (no motion to distract the work surface).",
+      typography: "Wide geometric grotesque display (the `grotesk` type pairing) \u2014 the retro-futurist sci-fi headline read; body stays a legible sans.",
+      components: "Chrome-capsule buttons with a metallic glint, specular-streaked bevelled cards / popovers / modals / sidebar / inputs (the data-surface material layer), pill status chips \u2014 a synthwave horizon + neon grid behind it all."
+    }
+  }
+};
+var STYLE_IDS = Object.keys(STYLE_REGISTRY);
+var DEFAULT_STYLE_ID = "warm-editorial";
+function isStyleId(value) {
+  return typeof value === "string" && Object.prototype.hasOwnProperty.call(STYLE_REGISTRY, value);
+}
+function resolveStyle(value) {
+  return STYLE_REGISTRY[isStyleId(value) ? value : DEFAULT_STYLE_ID];
+}
+Object.fromEntries(
+  STYLE_IDS.map((id) => [id, STYLE_REGISTRY[id].defaultTypeId])
+);
+
+// src/theme/palettes.ts
+var PALETTE_REGISTRY = {
+  motir: {
+    id: "motir",
+    name: "Motir",
+    tagline: "Warm and editorial \u2014 cream surfaces, charcoal ink, a purple primary, pastel tints.",
+    inspiration: "Notion's warm marketing palette \u2014 the product's house colours.",
+    designDoc: "docs/palettes/motir.md"
+  },
+  cobalt: {
+    id: "cobalt",
+    name: "Cobalt",
+    tagline: "Cool and institutional \u2014 slate-cool surfaces, a confident cobalt primary, cooled tints.",
+    inspiration: "Coinbase's clean institutional blue + IBM's structured blue, on Radix Blue/Indigo/Slate scales.",
+    designDoc: "docs/palettes/cobalt.md"
+  },
+  graphite: {
+    id: "graphite",
+    name: "Graphite",
+    tagline: "Stark and editorial \u2014 cool greyscale surfaces + ink, an ink CTA, a single restrained cool-blue accent.",
+    inspiration: "Vercel's black-and-white precision + Linear's ultra-minimal, on Radix Slate/Blue scales.",
+    designDoc: "docs/palettes/graphite.md"
+  },
+  evergreen: {
+    id: "evergreen",
+    name: "Evergreen",
+    tagline: "Fresh and technical \u2014 an emerald primary over cooled forest neutrals, a green-leaning UI.",
+    inspiration: "getdesign.md \u2014 Supabase (dark emerald) / Spotify (vibrant green) / MongoDB (spring green), on Radix green/jade ramps.",
+    designDoc: "docs/palettes/evergreen.md"
+  },
+  spectrum: {
+    id: "spectrum",
+    name: "Spectrum",
+    tagline: "Vibrant and playful \u2014 crisp cool surfaces, a bright violet primary, a candy-bright multi-hue accent & tint set.",
+    inspiration: "Figma's vibrant multi-colour brand + Airtable's colourful, friendly palette, on Radix Violet/Iris/Pink/Blue scales.",
+    designDoc: "docs/palettes/spectrum.md"
+  },
+  amber: {
+    id: "amber",
+    name: "Amber",
+    tagline: "Warm and electric \u2014 Binance trading-floor gold over the exchange\u2019s graphite near-blacks; dark labels on the gold.",
+    inspiration: "Binance \u2014 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.",
+    designDoc: "docs/palettes/amber.md"
+  },
+  sienna: {
+    id: "sienna",
+    name: "Sienna",
+    tagline: "Warm and vivid \u2014 Mistral flame-orange over the Mediterranean warm-cream surfaces; dark labels on the flame.",
+    inspiration: "Mistral AI \u2014 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.",
+    designDoc: "docs/palettes/sienna.md"
+  },
+  garnet: {
+    id: "garnet",
+    name: "Garnet",
+    tagline: "Rich and bold \u2014 Pinterest Pushpin red over the brand\u2019s neutral greys; white labels on the red.",
+    inspiration: "Pinterest \u2014 its whole documented palette: Pushpin red #E60023/#BD081C over Cod-Gray ink (#111111) and neutral greys (#767676/#EFEFEF), with Gestalt \u201CSkycicle\u201D blue links.",
+    designDoc: "docs/palettes/garnet.md"
+  },
+  citrine: {
+    id: "citrine",
+    name: "Citrine",
+    tagline: "Bright and collaborative \u2014 Miro\u2019s Sunglow yellow over the whiteboard greys, with the Miro action-blue accent.",
+    inspiration: "Miro \u2014 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.",
+    designDoc: "docs/palettes/citrine.md"
+  },
+  candy: {
+    id: "candy",
+    name: "Candy",
+    tagline: "Sweet and playful \u2014 a light bubblegum-pink primary over candy-paper pinks, with a full pastel-candy rainbow.",
+    inspiration: "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.",
+    designDoc: "docs/palettes/candy.md"
+  }
+};
+var DEFAULT_PALETTE_ID = "motir";
+function isPaletteId(value) {
+  return typeof value === "string" && Object.prototype.hasOwnProperty.call(PALETTE_REGISTRY, value);
+}
+
+// src/theme/types.ts
+var THEME_STORAGE_KEYS = {
+  pattern: "motir.theme.pattern",
+  style: "motir.theme.style",
+  palette: "motir.theme.palette",
+  type: "motir.theme.type"
+};
+var THEME_DEFAULTS = {
+  pattern: "system",
+  style: DEFAULT_STYLE_ID,
+  palette: DEFAULT_PALETTE_ID};
+var SYNC_DEBOUNCE_MS = 250;
+var ThemeContext = createContext(null);
+function readStorage(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  try {
+    return window.localStorage.getItem(key) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+function subscribeColorScheme(callback) {
+  if (typeof window === "undefined") return () => {
+  };
+  const mql = window.matchMedia("(prefers-color-scheme: dark)");
+  mql.addEventListener("change", callback);
+  return () => mql.removeEventListener("change", callback);
+}
+function getColorSchemeSnapshot() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getColorSchemeServerSnapshot() {
+  return "light";
+}
+function ThemeProvider({
+  children,
+  initialPreference = null,
+  signedIn = false
+}) {
+  const [pattern, setPatternState] = useState(
+    () => initialPreference ? initialPreference.pattern : readStorage(THEME_STORAGE_KEYS.pattern, THEME_DEFAULTS.pattern)
+  );
+  const [styleId, setStyleIdState] = useState(() => {
+    if (initialPreference) {
+      return isStyleId(initialPreference.styleId) ? initialPreference.styleId : DEFAULT_STYLE_ID;
+    }
+    const stored = readStorage(THEME_STORAGE_KEYS.style, THEME_DEFAULTS.style);
+    return isStyleId(stored) ? stored : DEFAULT_STYLE_ID;
+  });
+  const [palette, setPaletteState] = useState(() => {
+    if (initialPreference) {
+      return isPaletteId(initialPreference.paletteId) ? initialPreference.paletteId : DEFAULT_PALETTE_ID;
+    }
+    const stored = readStorage(THEME_STORAGE_KEYS.palette, THEME_DEFAULTS.palette);
+    return isPaletteId(stored) ? stored : DEFAULT_PALETTE_ID;
+  });
+  const [typeChoice, setTypeChoiceState] = useState(() => {
+    if (initialPreference) {
+      return initialPreference.typePinned && isTypeId(initialPreference.typeId) ? initialPreference.typeId : null;
+    }
+    const stored = readStorage(THEME_STORAGE_KEYS.type, "");
+    return isTypeId(stored) ? stored : null;
+  });
+  const osColorScheme = useSyncExternalStore(
+    subscribeColorScheme,
+    getColorSchemeSnapshot,
+    getColorSchemeServerSnapshot
+  );
+  const resolvedPattern = pattern === "system" ? osColorScheme : pattern;
+  const type = typeChoice ?? resolveStyle(styleId).defaultTypeId;
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", resolvedPattern);
+  }, [resolvedPattern]);
+  useEffect(() => {
+    document.documentElement.setAttribute("data-style", styleId);
+  }, [styleId]);
+  useEffect(() => {
+    document.documentElement.setAttribute("data-palette", palette);
+  }, [palette]);
+  useEffect(() => {
+    document.documentElement.setAttribute("data-type", type);
+  }, [type]);
+  const [syncState, setSyncState] = useState("idle");
+  const syncSeqRef = useRef(0);
+  const pendingPatchRef = useRef({});
+  const debounceRef = useRef(null);
+  const reconcile = useCallback((sent, resolved) => {
+    if ("pattern" in sent) setPatternState(resolved.pattern);
+    if ("styleId" in sent && isStyleId(resolved.styleId)) setStyleIdState(resolved.styleId);
+    if ("paletteId" in sent && isPaletteId(resolved.paletteId)) setPaletteState(resolved.paletteId);
+    if ("typeId" in sent && isTypeId(resolved.typeId)) setTypeChoiceState(resolved.typeId);
+  }, []);
+  const flushSync = useCallback(() => {
+    debounceRef.current = null;
+    const patch = pendingPatchRef.current;
+    pendingPatchRef.current = {};
+    if (Object.keys(patch).length === 0) return;
+    const seq = ++syncSeqRef.current;
+    fetch("/api/appearance-preference", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(patch)
+    }).then(async (res) => {
+      if (!res.ok) throw new Error(`appearance sync failed: ${res.status}`);
+      const body = await res.json();
+      if (seq !== syncSeqRef.current) return;
+      reconcile(patch, body.preference);
+      setSyncState("idle");
+    }).catch(() => {
+      if (seq !== syncSeqRef.current) return;
+      setSyncState("error");
+    });
+  }, [reconcile]);
+  const queueSync = useCallback(
+    (patch) => {
+      if (!signedIn) return;
+      pendingPatchRef.current = { ...pendingPatchRef.current, ...patch };
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(flushSync, SYNC_DEBOUNCE_MS);
+    },
+    [signedIn, flushSync]
+  );
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        flushSync();
+      }
+    };
+  }, [flushSync]);
+  const setPattern = useCallback(
+    (next) => {
+      setPatternState(next);
+      try {
+        window.localStorage.setItem(THEME_STORAGE_KEYS.pattern, next);
+      } catch {
+      }
+      queueSync({ pattern: next });
+    },
+    [queueSync]
+  );
+  const setStyleId = useCallback(
+    (next) => {
+      setStyleIdState(next);
+      try {
+        window.localStorage.setItem(THEME_STORAGE_KEYS.style, next);
+      } catch {
+      }
+      queueSync({ styleId: next });
+    },
+    [queueSync]
+  );
+  const setPalette = useCallback(
+    (next) => {
+      setPaletteState(next);
+      try {
+        window.localStorage.setItem(THEME_STORAGE_KEYS.palette, next);
+      } catch {
+      }
+      queueSync({ paletteId: next });
+    },
+    [queueSync]
+  );
+  const setType = useCallback(
+    (next) => {
+      setTypeChoiceState(next);
+      try {
+        window.localStorage.setItem(THEME_STORAGE_KEYS.type, next);
+      } catch {
+      }
+      queueSync({ typeId: next });
+    },
+    [queueSync]
+  );
+  const value = useMemo(
+    () => ({
+      pattern,
+      resolvedPattern,
+      styleId,
+      palette,
+      type,
+      setPattern,
+      setStyleId,
+      setPalette,
+      setType,
+      syncState
+    }),
+    [
+      pattern,
+      resolvedPattern,
+      styleId,
+      palette,
+      type,
+      setPattern,
+      setStyleId,
+      setPalette,
+      setType,
+      syncState
+    ]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used inside <ThemeProvider>");
+  }
+  return ctx;
+}
+function useOptionalTheme() {
+  return useContext(ThemeContext);
+}
+
+export { ThemeProvider, useOptionalTheme, useTheme };
+//# sourceMappingURL=theme-context.js.map
+//# sourceMappingURL=theme-context.js.map