@fluid-app/rep-core 0.1.0 → 0.1.2

package/dist/theme/index.cjs

@@ -1,228 +1,336 @@
 'use strict';
 
-// src/theme/theme-engine.ts
-var oklchString = (c) => `oklch(${c.l.toFixed(3)} ${c.c.toFixed(3)} ${c.h.toFixed(1)})`;
-var parseOklch = (oklchStr) => {
-  const match = oklchStr.match(/oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)\)/);
-  if (!match) {
-    return { l: 0, c: 0, h: 0 };
-  }
-  return {
-    l: parseFloat(match[1] || "0"),
-    c: parseFloat(match[2] || "0"),
-    h: parseFloat(match[3] || "0")
-  };
-};
-var mod = (c, dl = 0, dc = 0, dh = 0) => ({
-  l: Math.max(0, Math.min(1, c.l + dl)),
-  c: Math.max(0, c.c + dc),
-  h: (c.h + dh + 360) % 360
-});
-var rotateHue = (c, degrees) => mod(c, 0, 0, degrees);
-var clampChroma = (c, maxC = 0.15) => ({
-  ...c,
-  c: Math.min(c.c, maxC)
-});
-var rotateSoft = (c, deg, maxC = 0.15) => clampChroma(rotateHue(c, deg), maxC);
-var getForegroundColor = (foreground, color) => {
-  const contrast = Math.abs(foreground.l - color.l);
-  if (contrast < 0.7) {
-    foreground.l = 1 - foreground.l;
-    return oklchString(foreground);
+var Color2 = require('colorjs.io');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Color2__default = /*#__PURE__*/_interopDefault(Color2);
+
+// src/theme/color-engine.ts
+
+// src/theme/types.ts
+var SEMANTIC_COLOR_NAMES = [
+  "background",
+  "foreground",
+  "primary",
+  "secondary",
+  "accent",
+  "muted",
+  "destructive"
+];
+var SHADE_STEPS = [
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900
+];
+var FONT_SIZE_KEYS = [
+  "extraSmall",
+  "small",
+  "regular",
+  "large",
+  "extraLarge",
+  "giant"
+];
+var FONT_FAMILY_KEYS = ["header", "body"];
+var RADIUS_KEYS = ["small", "medium", "large", "extraLarge"];
+
+// src/theme/color-engine.ts
+function parseColor(value) {
+  if (value.length === 6) {
+    value = `#${value}`;
   }
-  return oklchString(foreground);
-};
-var shadeColor = (color, lightnessShift, chromaShift) => {
-  return oklchString({
-    l: color.l + lightnessShift,
-    c: color.c > 3e-3 ? color.c + chromaShift : color.c,
-    h: color.h
-  });
-};
-function generateColorSwatches(oklchString2) {
   try {
-    const color = parseOklch(oklchString2);
-    const safeMax = color.l >= 0.885 ? 0.995 : 0.97;
-    const safeMin = color.l <= 0.33 ? 0 : 0.21;
-    const lightBase = (safeMax - color.l) / 5;
-    const darkBase = -(color.l - safeMin) / 8;
-    return [
-      // Light shades
-      shadeColor(color, 5 * lightBase, -375e-5),
-      shadeColor(color, 4 * lightBase, -375e-5),
-      shadeColor(color, 3 * lightBase, -375e-5),
-      shadeColor(color, 2 * lightBase, -375e-5),
-      shadeColor(color, lightBase, -375e-5),
-      // Dark shades
-      shadeColor(color, 1.6 * darkBase, 0.025),
-      shadeColor(color, 1.875 * 2 * darkBase, 0.05),
-      shadeColor(color, 3 * 2 * darkBase, 0.075),
-      shadeColor(color, 4 * 2 * darkBase, 0.1)
-    ];
+    return new Color2__default.default(value);
   } catch (error) {
-    console.error(`Failed to generate swatches for ${oklchString2}:`, error);
-    return [
-      "#f5f5f5",
-      "#e0e0e0",
-      "#cccccc",
-      "#b3b3b3",
-      "#999999",
-      "#666666",
-      "#4d4d4d",
-      "#333333",
-      "#1a1a1a"
-    ];
+    console.warn("[theme] Failed to parse color:", value, error);
+    return new Color2__default.default("oklch", [0.5, 0, 0]);
   }
 }
-var CORE_COLOR_KEYS = [
-  "base",
-  "text",
-  "body",
-  "muted",
-  "mutedForeground",
-  "primary",
-  "primaryForeground",
-  "secondary",
-  "secondaryForeground",
-  "accent",
-  "accentForeground",
-  "destructive",
-  "destructiveForeground"
-];
-var DEFAULT_CORE_COLORS = {
-  base: { l: 1, c: 0, h: 0 },
-  text: { l: 0, c: 0, h: 0 },
-  body: { l: 0.2046, c: 0, h: 0 },
-  muted: { l: 0.94, c: 0, h: 0 },
-  mutedForeground: { l: 0.4997, c: 0, h: 0 },
-  primary: { l: 0.6231, c: 0.188, h: 259.81 },
-  primaryForeground: { l: 1, c: 0, h: 0 },
-  secondary: { l: 0.6056, c: 0.2189, h: 292.72 },
-  secondaryForeground: { l: 1, c: 0, h: 0 },
-  accent: { l: 0.6959, c: 0.1491, h: 162.48 },
-  accentForeground: { l: 1, c: 0, h: 0 },
-  destructive: { l: 0.6368, c: 0.2078, h: 25.33 },
-  destructiveForeground: { l: 1, c: 0, h: 0 }
-};
-var themeConfigToCoreColors = (config) => ({
-  base: parseOklch(
-    config.background || config.base || oklchString(DEFAULT_CORE_COLORS.base)
-  ),
-  text: parseOklch(
-    config.foreground || config.text || oklchString(DEFAULT_CORE_COLORS.text)
-  ),
-  body: parseOklch(config.body || oklchString(DEFAULT_CORE_COLORS.body)),
-  muted: parseOklch(config.muted || oklchString(DEFAULT_CORE_COLORS.muted)),
-  mutedForeground: parseOklch(
-    config.mutedForeground || config.muted_foreground || oklchString(DEFAULT_CORE_COLORS.mutedForeground)
-  ),
-  primary: parseOklch(
-    config.primary || oklchString(DEFAULT_CORE_COLORS.primary)
-  ),
-  primaryForeground: parseOklch(
-    config.primaryForeground || config.primary_foreground || oklchString(DEFAULT_CORE_COLORS.primaryForeground)
-  ),
-  secondary: parseOklch(
-    config.secondary || oklchString(DEFAULT_CORE_COLORS.secondary)
-  ),
-  secondaryForeground: parseOklch(
-    config.secondaryForeground || config.secondary_foreground || oklchString(DEFAULT_CORE_COLORS.secondaryForeground)
-  ),
-  accent: parseOklch(config.accent || oklchString(DEFAULT_CORE_COLORS.accent)),
-  accentForeground: parseOklch(
-    config.accentForeground || config.accent_foreground || oklchString(DEFAULT_CORE_COLORS.accentForeground)
-  ),
-  destructive: parseOklch(
-    config.destructive || oklchString(DEFAULT_CORE_COLORS.destructive)
-  ),
-  destructiveForeground: parseOklch(
-    config.destructiveForeground || config.destructive_foreground || oklchString(DEFAULT_CORE_COLORS.destructiveForeground)
-  )
-});
-var coreColorsToConfig = (colors) => {
-  const config = {};
-  for (const key of CORE_COLOR_KEYS) {
-    config[key] = oklchString(colors[key]);
+function getForegroundColor(foreground, color) {
+  if (foreground.oklch.l == null || color.oklch.l == null) {
+    return foreground;
   }
-  return config;
-};
-var DEFAULT_CORE_COLORS_CONFIG = coreColorsToConfig(DEFAULT_CORE_COLORS);
-var THEME_MODES = {
-  light: "light",
-  dark: "dark"
-};
-var detectThemeMode = (core) => {
-  return core.base.l < 0.5 ? THEME_MODES.dark : THEME_MODES.light;
-};
-var toDarkMode = (core) => {
-  const isDark = core.base.l < 0.5;
-  if (isDark) return core;
+  const contrast = color.contrastAPCA(foreground);
+  if (contrast < 50) {
+    return new Color2__default.default("oklch", [
+      color.oklch.l < 0.7 ? 0.95 : 0.15,
+      foreground.oklch.c || 0,
+      foreground.oklch.h || 0
+    ]);
+  }
+  return foreground;
+}
+function generateShades(base) {
+  const l = base.oklch.l ?? 0;
+  const c = base.oklch.c ?? 0;
+  const h = base.oklch.h ?? 0;
+  const safeMax = l >= 0.885 ? 0.995 : 0.97;
+  const safeMin = l <= 0.33 ? 0 : 0.21;
+  const lightStep = (safeMax - l) / 5;
+  const darkStep = -(l - safeMin) / 8;
+  const shade = (lDelta, cDelta) => {
+    return new Color2__default.default("oklch", [
+      Math.max(0, Math.min(1, l + lDelta)),
+      c <= 1e-3 ? c : Math.max(0, c + cDelta),
+      h
+    ]);
+  };
   return {
-    // Base
-    base: mod(core.base, 1 - core.base.l * 2),
-    // Make base dark
-    text: mod(core.text, core.text.l > 0.5 ? 0 : 0.5),
-    // Ensure text is light
-    body: mod(core.body, core.body.l > 0.5 ? 0 : 0.5),
-    muted: mod(core.muted, 1 - core.muted.l * 2),
-    mutedForeground: mod(
-      core.mutedForeground,
-      core.mutedForeground.l > 0.5 ? 0 : 0.4
-    ),
-    // Color
-    primary: core.primary,
-    primaryForeground: core.primaryForeground,
-    secondary: core.secondary,
-    secondaryForeground: core.secondaryForeground,
-    accent: core.accent,
-    accentForeground: core.accentForeground,
-    destructive: core.destructive,
-    destructiveForeground: core.destructiveForeground
+    100: shade(5 * lightStep, -375e-5),
+    200: shade(4 * lightStep, -375e-5),
+    300: shade(3 * lightStep, -375e-5),
+    400: shade(2 * lightStep, -375e-5),
+    500: new Color2__default.default("oklch", [l, c, h]),
+    600: shade(1.6 * darkStep, 0.025),
+    700: shade(1.875 * 2 * darkStep, 0.05),
+    800: shade(3 * 2 * darkStep, 0.075),
+    900: shade(4 * 2 * darkStep, 0.1)
   };
+}
+var DARK_DERIVATION_CONFIG = {
+  background: { baseLightness: 0.15, fgLightness: 0.93 },
+  foreground: { baseLightness: 0.93, fgLightness: 0.15 },
+  muted: { baseLightness: 0.22, fgLightness: 0.75 },
+  primary: { baseLightness: "invert", fgLightness: 0.95, chromaScale: 0.9 },
+  secondary: { baseLightness: "invert", fgLightness: 0.93, chromaScale: 0.85 },
+  accent: { baseLightness: "invert", fgLightness: 0.95, chromaScale: 0.9 },
+  destructive: {
+    baseLightness: "invert",
+    fgLightness: 0.95,
+    chromaScale: 0.95
+  }
 };
-var toLightMode = (core) => {
-  const isLight = core.base.l > 0.5;
-  if (isLight) return core;
+function invertLightness(l) {
+  const inverted = 1 - l;
+  return Math.max(0.35, Math.min(0.75, inverted));
+}
+function deriveDarkVariant(name, light) {
+  const config = DARK_DERIVATION_CONFIG[name];
+  const chromaScale = config.chromaScale ?? 1;
+  const baseLightness = config.baseLightness === "invert" ? invertLightness(light.base.oklch.l ?? 0) : config.baseLightness;
+  const fgLightness = config.fgLightness === "invert" ? invertLightness(light.foreground.oklch.l ?? 0) : config.fgLightness;
   return {
-    // Base
-    base: mod(core.base, 1 - core.base.l * 2),
-    // Make base light
-    text: mod(core.text, core.text.l < 0.5 ? 0.5 : -0.5),
-    // Ensure text is dark
-    body: mod(core.body, core.body.l < 0.5 ? 0.5 : -0.5),
-    muted: mod(core.muted, 1 - core.muted.l * 2),
-    mutedForeground: mod(
-      core.mutedForeground,
-      core.mutedForeground.l < 0.5 ? 0.5 : -0.4
-    ),
-    // Color
-    primary: core.primary,
-    primaryForeground: core.primaryForeground,
-    secondary: core.secondary,
-    secondaryForeground: core.secondaryForeground,
-    accent: core.accent,
-    accentForeground: core.accentForeground,
-    destructive: core.destructive,
-    destructiveForeground: core.destructiveForeground
+    base: new Color2__default.default("oklch", [
+      baseLightness,
+      (light.base.oklch.c || 0) * chromaScale,
+      light.base.oklch.h || 0
+    ]),
+    foreground: new Color2__default.default("oklch", [
+      fgLightness,
+      (light.foreground.oklch.c || 0) * chromaScale,
+      light.foreground.oklch.h || 0
+    ])
   };
+}
+function mergeDarkOverrides(def) {
+  const darkColors = {};
+  for (const name of SEMANTIC_COLOR_NAMES) {
+    const lightInput = def.light[name];
+    const darkOverride = def.dark[name];
+    if (darkOverride?.base && darkOverride?.foreground) {
+      darkColors[name] = darkOverride;
+    } else if (darkOverride) {
+      const base = darkOverride.base ?? deriveDarkVariant(name, lightInput).base;
+      darkColors[name] = {
+        base,
+        foreground: darkOverride.foreground ?? getForegroundColor(def.light.foreground.base, base)
+      };
+    } else {
+      darkColors[name] = deriveDarkVariant(name, lightInput);
+    }
+  }
+  return darkColors;
+}
+function resolveColorSet(colors) {
+  const resolved = {};
+  for (const name of SEMANTIC_COLOR_NAMES) {
+    const input = colors[name];
+    const shades = generateShades(input.base);
+    const resolvedShades = {};
+    for (const step of SHADE_STEPS) {
+      resolvedShades[step] = shades[step];
+    }
+    resolved[name] = {
+      base: input.base.clone(),
+      foreground: input.foreground.clone(),
+      shades: resolvedShades
+    };
+  }
+  return resolved;
+}
+function resolveTheme(def) {
+  return {
+    id: def.id,
+    name: def.name,
+    light: resolveColorSet(def.light),
+    dark: resolveColorSet(mergeDarkOverrides(def)),
+    fontSizes: { ...def.fontSizes },
+    fontFamilies: { ...def.fontFamilies },
+    spacing: def.spacing,
+    radii: { ...def.radii }
+  };
+}
+
+// src/theme/tailwind-overrides.ts
+var OVERRIDES = {
+  "--color-gray-50": "var(--color-muted)",
+  "--color-gray-100": "var(--color-muted-600)",
+  "--color-gray-200": "var(--color-border)"
 };
-var FONT_OPTIONS = {
-  Inter: "var(--font-inter)",
-  Eina: "var(--font-eina)"
-};
-var CORE_FONT_KEYS = [
-  "headerFont",
-  "bodyFont",
-  "extraSmall",
-  "small",
-  "regular",
-  "large",
-  "extraLarge",
-  "giant"
+function getInvertedStep(shade) {
+  const shadeIndex = SHADE_STEPS.indexOf(shade);
+  const invertedIndex = SHADE_STEPS.length - 1 - shadeIndex;
+  return SHADE_STEPS[invertedIndex] || 500;
+}
+function emitTailwindOverrides(darkMode = false) {
+  const TAILWIND_COLOR_MAP = {
+    gray: "foreground",
+    red: "destructive",
+    blue: "primary",
+    green: "accent"
+  };
+  const TAILWIND_SHADES = [
+    50,
+    100,
+    200,
+    300,
+    400,
+    500,
+    600,
+    700,
+    800,
+    900,
+    950
+  ];
+  const SHADE_REMAP = {
+    50: 100,
+    950: 900
+  };
+  const lines = [];
+  for (const [twName, semantic] of Object.entries(TAILWIND_COLOR_MAP)) {
+    for (const shade of TAILWIND_SHADES) {
+      const step = SHADE_REMAP[shade] ?? shade;
+      const override = OVERRIDES[`--color-${twName}-${shade}`];
+      lines.push(
+        `--color-${twName}-${shade}: ${override ? override : `var(--color-${semantic}-${semantic === "foreground" && darkMode === true ? getInvertedStep(step) : step})`};`
+      );
+    }
+  }
+  lines.push("--color-white: var(--color-background);");
+  lines.push("--color-black: var(--color-foreground);");
+  return lines;
+}
+
+// src/theme/css-generator.ts
+function colorToCSS(color) {
+  const result = color.toString({ format: "oklch" });
+  if (result.includes("NaN")) {
+    console.warn(
+      "[theme] colorToCSS produced NaN, using neutral fallback:",
+      result
+    );
+    return "oklch(0.5 0 0)";
+  }
+  return result;
+}
+function camelToKebab(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function emitColorVars(colors) {
+  const lines = [];
+  for (const name of SEMANTIC_COLOR_NAMES) {
+    const color = colors[name];
+    lines.push(`--color-${name}: ${colorToCSS(color.base)};`);
+    lines.push(`--color-${name}-foreground: ${colorToCSS(color.foreground)};`);
+    for (const step of SHADE_STEPS) {
+      lines.push(`--color-${name}-${step}: ${colorToCSS(color.shades[step])};`);
+    }
+  }
+  return lines;
+}
+function emitNonColorVars(theme) {
+  const lines = [];
+  for (const key of FONT_SIZE_KEYS) {
+    lines.push(`--font-size-${camelToKebab(key)}: ${theme.fontSizes[key]};`);
+  }
+  for (const key of FONT_FAMILY_KEYS) {
+    lines.push(`--font-${key}: ${theme.fontFamilies[key]};`);
+  }
+  lines.push(`--spacing: ${theme.spacing};`);
+  for (const key of RADIUS_KEYS) {
+    lines.push(`--radius-${camelToKebab(key)}: ${theme.radii[key]};`);
+  }
+  return lines;
+}
+var globalCSSOverride = [
+  "--color-background-foreground: var(--color-foreground);",
+  "--color-foreground-foreground: var(--color-background);",
+  ...SEMANTIC_COLOR_NAMES.map((value) => `--${value}: var(--color-${value});`),
+  ...SEMANTIC_COLOR_NAMES.map(
+    (value) => `--${value}-foreground: var(--color-${value}-foreground);`
+  ),
+  "--sidebar-ring: var(--color-primary);",
+  "--sidebar-border: var(--color-border);",
+  "--sidebar-accent-foreground: var(--color-accent-foreground);",
+  "--sidebar-accent: var(--color-accent);",
+  "--sidebar-primary-foreground: var(--color-primary-foreground);",
+  "--sidebar-primary: var(--color-primary);",
+  "--sidebar-foreground: var(--color-muted-foreground);",
+  "--sidebar: var(--color-muted);",
+  "--border: var(--color-background-600);",
+  "--ring: var(--color-primary);",
+  "--popover: var(--color-background);",
+  "--popover-foreground: var(--color-foreground);",
+  "--card: var(--color-muted);",
+  "--card-foreground: var(--color-muted-foreground);",
+  "--radius-sm: var(--radius-small);",
+  "--radius-md: var(--radius-medium);",
+  "--radius-lg: var(--radius-large);",
+  "--radius-xl: var(--radius-extra-large);",
+  "--text-xs: var(--font-size-extra-small);",
+  "--text-sm: var(--font-size-small);",
+  "--text-base: var(--font-size-regular);",
+  "--text-lg: var(--font-size-large);",
+  "--text-xl: var(--font-size-extra-large);",
+  "--text-2xl: var(--font-size-giant);",
+  "--font-sans: var(--font-body);",
+  // Tailwind's font-mono is repurposed as the display/header font
+  "--font-mono: var(--font-header);"
 ];
-var DEFAULT_FONT = {
-  headerFont: FONT_OPTIONS.Inter,
-  bodyFont: FONT_OPTIONS.Inter,
+var globalDarkCSSOverride = ["--border: var(--color-background-400);"];
+function generateThemeCSS(theme, options = {}) {
+  const sel = `[data-theme="${theme.id}"]`;
+  const tw = options.mapTailwindColors ?? true;
+  const blocks = [];
+  blocks.push(`${sel} {`);
+  blocks.push(...globalCSSOverride);
+  blocks.push(...emitNonColorVars(theme));
+  blocks.push(...emitColorVars(theme.light));
+  if (tw) blocks.push(...emitTailwindOverrides());
+  blocks.push(`}`);
+  blocks.push(`${sel}[data-theme-mode="dark"] {`);
+  blocks.push(...globalDarkCSSOverride);
+  blocks.push(...emitColorVars(theme.dark));
+  if (tw) blocks.push(...emitTailwindOverrides(true));
+  blocks.push(`}`);
+  if (!options.disableAutoTheme) {
+    blocks.push(`@media (prefers-color-scheme: dark) {`);
+    blocks.push(`${sel}:not([data-theme-mode]) {`);
+    blocks.push(...globalDarkCSSOverride);
+    blocks.push(...emitColorVars(theme.dark).map((l) => `${l}`));
+    if (tw) blocks.push(...emitTailwindOverrides(true).map((l) => `${l}`));
+    blocks.push(`}`);
+    blocks.push(`}`);
+  }
+  return blocks.join("\n");
+}
+var DEFAULT_FONT_SIZES = {
   extraSmall: "0.75rem",
   small: "0.875rem",
   regular: "1rem",
@@ -230,784 +338,305 @@ var DEFAULT_FONT = {
   extraLarge: "1.25rem",
   giant: "1.5rem"
 };
-var fontConfigToCoreFont = (config) => {
-  return {
-    headerFont: config.headerFont || DEFAULT_FONT.headerFont,
-    bodyFont: config.bodyFont || DEFAULT_FONT.bodyFont,
-    extraSmall: config.extraSmall || DEFAULT_FONT.extraSmall,
-    small: config.small || DEFAULT_FONT.small,
-    regular: config.regular || DEFAULT_FONT.regular,
-    large: config.large || DEFAULT_FONT.large,
-    extraLarge: config.extraLarge || DEFAULT_FONT.extraLarge,
-    giant: config.giant || DEFAULT_FONT.giant
-  };
+var DEFAULT_FONT_FAMILIES = {
+  header: "var(--font-inter)",
+  body: "var(--font-inter)"
 };
-var CORE_SPACING_KEYS = [
-  "globalSpacing",
-  "radiusSmall",
-  "radiusMedium",
-  "radiusLarge",
-  "radiusExtraLarge"
-];
-var DEFAULT_SPACING = {
-  globalSpacing: "0.25rem",
-  radiusSmall: "0.25rem",
-  radiusMedium: "0.375rem",
-  radiusLarge: "0.5rem",
-  radiusExtraLarge: "0.75rem"
+var DEFAULT_SPACING = "0.25rem";
+var DEFAULT_RADII = {
+  small: "0.25rem",
+  medium: "0.5rem",
+  large: "0.75rem",
+  extraLarge: "1rem"
 };
-var spacingConfigToCoreSpacing = (config) => {
-  return {
-    globalSpacing: config.globalSpacing || DEFAULT_SPACING.globalSpacing,
-    radiusSmall: config.radiusSmall || DEFAULT_SPACING.radiusSmall,
-    radiusMedium: config.radiusMedium || DEFAULT_SPACING.radiusMedium,
-    radiusLarge: config.radiusLarge || DEFAULT_SPACING.radiusLarge,
-    radiusExtraLarge: config.radiusExtraLarge || DEFAULT_SPACING.radiusExtraLarge
-  };
+var DEFAULT_COLORS = {
+  background: "#ffffff",
+  foreground: "#1a1a1a",
+  primary: "#3b82f6",
+  secondary: "#6b7280",
+  accent: "#10b981",
+  muted: "#f3f4f6",
+  destructive: "#ef4444",
+  mutedForeground: "#6b7280"
 };
-var CORE_NON_COLOR_KEYS = [
-  ...CORE_FONT_KEYS,
-  ...CORE_SPACING_KEYS
-];
-var separatedThemeConfig = (config) => {
-  const ensuredConfig = [
-    ...CORE_NON_COLOR_KEYS,
-    ...CORE_COLOR_KEYS
-  ].reduce((acc, key) => {
-    acc[key] = config[key] || DEFAULT_CORE_COLORS_CONFIG[key] || DEFAULT_FONT[key] || DEFAULT_SPACING[key];
-    return acc;
-  }, {});
-  const colorConfig = Object.fromEntries(
-    Object.entries(ensuredConfig).filter(
-      ([key]) => CORE_COLOR_KEYS.includes(key)
-    )
-  );
-  const otherConfig = Object.fromEntries(
-    Object.entries(ensuredConfig).filter(
-      ([key]) => CORE_NON_COLOR_KEYS.includes(key)
-    )
-  );
+var DEFAULT_THEME_ID = "default";
+var DEFAULT_THEME_NAME = "Default Theme";
+function getDefaultThemeDefinition() {
+  const bg = new Color2__default.default(DEFAULT_COLORS.background);
+  const fg = new Color2__default.default(DEFAULT_COLORS.foreground);
+  const primary = new Color2__default.default(DEFAULT_COLORS.primary);
+  const secondary = new Color2__default.default(DEFAULT_COLORS.secondary);
+  const accent = new Color2__default.default(DEFAULT_COLORS.accent);
+  const muted = new Color2__default.default(DEFAULT_COLORS.muted);
+  const destructive = new Color2__default.default(DEFAULT_COLORS.destructive);
+  const mutedFg = new Color2__default.default(DEFAULT_COLORS.mutedForeground);
+  const darkBg = new Color2__default.default("#0a0a0a");
+  const darkFg = new Color2__default.default("#fafafa");
+  const darkMuted = new Color2__default.default("#171717");
+  const darkMutedForeground = new Color2__default.default("#dddddd");
   return {
-    colorConfig,
-    otherConfig
+    id: DEFAULT_THEME_ID,
+    name: DEFAULT_THEME_NAME,
+    light: {
+      background: { base: bg, foreground: fg },
+      foreground: { base: fg, foreground: bg },
+      primary: {
+        base: primary,
+        foreground: getForegroundColor(fg, primary)
+      },
+      secondary: {
+        base: secondary,
+        foreground: getForegroundColor(fg, secondary)
+      },
+      accent: {
+        base: accent,
+        foreground: getForegroundColor(fg, accent)
+      },
+      muted: { base: muted, foreground: mutedFg },
+      destructive: {
+        base: destructive,
+        foreground: getForegroundColor(fg, destructive)
+      }
+    },
+    dark: {
+      background: { base: darkBg, foreground: darkFg },
+      foreground: { base: darkFg, foreground: darkBg },
+      muted: { base: darkMuted, foreground: darkMutedForeground }
+    },
+    fontSizes: { ...DEFAULT_FONT_SIZES },
+    fontFamilies: { ...DEFAULT_FONT_FAMILIES },
+    spacing: DEFAULT_SPACING,
+    radii: { ...DEFAULT_RADII }
   };
-};
-var themeConfigToCoreNonColorFields = (config) => {
+}
+
+// src/theme/serialisation.ts
+function colorToPlain(color) {
   return {
-    ...fontConfigToCoreFont(config),
-    ...spacingConfigToCoreSpacing(config)
+    l: color.oklch.l ?? 0,
+    c: color.oklch.c ?? 0,
+    h: color.oklch.h ?? 0
   };
-};
-var globalCSSOverride = {
-  "--color-background-foreground": "var(--color-foreground)",
-  "--color-foreground-foreground": "var(--color-background)",
-  "--sidebar-ring": "var(--color-primary)",
-  "--sidebar-border": "var(--color-border)",
-  "--sidebar-accent-foreground": "var(--color-accent-foreground)",
-  "--sidebar-accent": "var(--color-accent)",
-  "--sidebar-primary-foreground": "var(--color-primary-foreground)",
-  "--sidebar-primary": "var(--color-primary)",
-  "--sidebar-foreground": "var(--color-muted-foreground)",
-  "--sidebar": "var(--color-muted)",
-  "--ring": "var(--color-primary)",
-  "--popover": "var(--color-background)",
-  "--popover-foreground": "var(--color-foreground)",
-  "--card": "var(--color-muted)",
-  "--card-foreground": "var(--color-muted-foreground)",
-  "--spacing": "var(--global-spacing)",
-  "--radius-sm": "var(--radius-small)",
-  "--radius-md": "var(--radius-medium)",
-  "--radius-lg": "var(--radius-large)",
-  "--radius-xl": "var(--radius-extra-large)",
-  "--text-xs": "var(--text-extra-small)",
-  "--text-sm": "var(--text-small)",
-  "--text-base": "var(--text-regular)",
-  "--text-lg": "var(--text-large)",
-  "--text-xl": "var(--text-extra-large)",
-  "--text-2xl": "var(--text-giant)",
-  "--font-sans": "var(--font-body)",
-  "--font-mono": "var(--font-header)"
-};
-function generateThemeCssVars(config, mode) {
-  const coreColors = themeConfigToCoreColors(config);
-  const coreOther = themeConfigToCoreNonColorFields(config);
-  const theme = generateTheme("preview", coreColors, mode, coreOther);
-  const cssVars = { ...globalCSSOverride };
-  Object.entries(theme.config).forEach(([key, value]) => {
-    const cssKey = `--${key.replace(/_/g, "-")}`;
-    cssVars[cssKey] = String(value);
-    if (value.startsWith("oklch(")) {
-      const colorVariable = cssKey.replace(/^--/, "--color-");
-      cssVars[colorVariable] = String(value);
-      const swatches = generateColorSwatches(value);
-      swatches.forEach((swatch, index) => {
-        const swatchKey = `--color-${key.replace(/_/g, "-")}-${index + 1}00`;
-        cssVars[swatchKey] = String(swatch);
-      });
-    }
-  });
-  return cssVars;
 }
-var generateTheme = (name, colorFields, mode = THEME_MODES.dark, otherFields) => {
-  const modeCore = mode === "dark" ? toDarkMode(colorFields) : toLightMode(colorFields);
-  const surface = mod(modeCore.base, (1 - modeCore.base.l) * 0.1);
-  const normalize = (c) => c;
-  const base = normalize(modeCore.base);
-  const text = normalize(modeCore.text);
-  const body = normalize(modeCore.body);
-  const muted = normalize(modeCore.muted);
-  const mutedForeground = normalize(modeCore.mutedForeground);
-  const primary = normalize(modeCore.primary);
-  const primaryForeground = normalize(modeCore.primaryForeground);
-  const secondary = normalize(modeCore.secondary);
-  const secondaryForeground = normalize(modeCore.secondaryForeground);
-  const accent = normalize(modeCore.accent);
-  const accentForeground = normalize(modeCore.accentForeground);
-  const destructive = normalize(modeCore.destructive);
-  const destructiveForeground = normalize(modeCore.destructiveForeground);
-  const chart1 = accent;
-  const chart2 = primary;
-  const chart3 = secondary;
-  const chart4 = rotateSoft(primary, 60);
-  const chart5 = rotateSoft(primary, 120);
-  const otherConfig = otherFields ?? {
-    ...DEFAULT_FONT,
-    ...DEFAULT_SPACING
-  };
+function plainToColor(plain) {
+  return new Color2__default.default("oklch", [plain.l, plain.c, plain.h]);
+}
+function serialiseTheme(def) {
+  const light = {};
+  for (const name of SEMANTIC_COLOR_NAMES) {
+    light[name] = {
+      base: colorToPlain(def.light[name].base),
+      foreground: colorToPlain(def.light[name].foreground)
+    };
+  }
+  const dark = {};
+  for (const [name, value] of Object.entries(def.dark)) {
+    if (!value) continue;
+    dark[name] = {
+      ...value.base ? { base: colorToPlain(value.base) } : {},
+      ...value.foreground ? { foreground: colorToPlain(value.foreground) } : {}
+    };
+  }
   return {
-    name,
-    mode,
-    config: {
-      // Base
-      background: oklchString(base),
-      foreground: oklchString(text),
-      // Body
-      body: oklchString(body),
-      // Popover
-      popover: oklchString(base),
-      popover_foreground: oklchString(text),
-      // Primary
-      primary: oklchString(primary),
-      primary_foreground: oklchString(primaryForeground),
-      // Secondary
-      secondary: oklchString(secondary),
-      secondary_foreground: oklchString(secondaryForeground),
-      // muted
-      muted: oklchString(muted),
-      muted_foreground: oklchString(mutedForeground),
-      // Accent
-      accent: oklchString(accent),
-      accent_foreground: oklchString(accentForeground),
-      // Destructive
-      destructive: oklchString(destructive),
-      destructive_foreground: oklchString(destructiveForeground),
-      // Border / input / ring
-      border: oklchString(surface),
-      input: oklchString(surface),
-      // Charts
-      chart_1: oklchString(chart1),
-      chart_2: oklchString(chart2),
-      chart_3: oklchString(chart3),
-      chart_4: oklchString(chart4),
-      chart_5: oklchString(chart5),
-      // Font
-      font_header: otherConfig.headerFont || DEFAULT_FONT.headerFont,
-      font_body: otherConfig.bodyFont || DEFAULT_FONT.bodyFont,
-      text_extra_small: otherConfig.extraSmall || DEFAULT_FONT.extraSmall,
-      text_small: otherConfig.small || DEFAULT_FONT.small,
-      text_regular: otherConfig.regular || DEFAULT_FONT.regular,
-      text_large: otherConfig.large || DEFAULT_FONT.large,
-      text_extra_large: otherConfig.extraLarge || DEFAULT_FONT.extraLarge,
-      text_giant: otherConfig.giant || DEFAULT_FONT.giant,
-      // Spacing
-      global_spacing: otherConfig.globalSpacing || DEFAULT_SPACING.globalSpacing,
-      radius_small: otherConfig.radiusSmall || DEFAULT_SPACING.radiusSmall,
-      radius_medium: otherConfig.radiusMedium || DEFAULT_SPACING.radiusMedium,
-      radius_large: otherConfig.radiusLarge || DEFAULT_SPACING.radiusLarge,
-      radius_extra_large: otherConfig.radiusExtraLarge || DEFAULT_SPACING.radiusExtraLarge
-    },
-    default: false
+    id: def.id,
+    name: def.name,
+    light,
+    dark,
+    fontSizes: { ...def.fontSizes },
+    fontFamilies: { ...def.fontFamilies },
+    spacing: def.spacing,
+    radii: { ...def.radii }
   };
-};
-var generateDualTheme = (name, core) => {
+}
+function deserialiseTheme(payload) {
+  const lightRaw = payload.light ?? {};
+  const darkRaw = payload.dark ?? {};
+  const defaults = getDefaultThemeDefinition();
+  const light = {};
+  for (const name of SEMANTIC_COLOR_NAMES) {
+    const entry = lightRaw[name];
+    if (entry) {
+      light[name] = {
+        base: plainToColor(entry.base),
+        foreground: plainToColor(entry.foreground)
+      };
+    } else {
+      console.warn(
+        `[theme] deserialiseTheme: missing light color "${name}", using default`
+      );
+      light[name] = defaults.light[name];
+    }
+  }
+  const dark = {};
+  for (const [name, value] of Object.entries(darkRaw)) {
+    if (!value) continue;
+    dark[name] = {
+      ...value.base ? { base: plainToColor(value.base) } : {},
+      ...value.foreground ? { foreground: plainToColor(value.foreground) } : {}
+    };
+  }
   return {
-    light: generateTheme(name, core, "light"),
-    dark: generateTheme(name, core, "dark")
+    id: payload.id,
+    name: payload.name,
+    light,
+    dark,
+    fontSizes: payload.fontSizes ?? DEFAULT_FONT_SIZES,
+    fontFamilies: payload.fontFamilies ?? DEFAULT_FONT_FAMILIES,
+    spacing: payload.spacing ?? DEFAULT_SPACING,
+    radii: payload.radii ?? DEFAULT_RADII
   };
-};
-var generateSmartDualTheme = (name, core) => {
-  const detectedMode = detectThemeMode(core);
+}
+
+// src/theme/transforms.ts
+function isNewThemeFormat(config) {
+  return config.light != null && typeof config.light === "object";
+}
+function legacyConfigToDefinition(id, name, config) {
+  const bg = parseColor(
+    config.base ?? config.background ?? DEFAULT_COLORS.background
+  );
+  const fg = parseColor(
+    config.text ?? config.foreground ?? DEFAULT_COLORS.foreground
+  );
+  const primary = parseColor(config.primary ?? DEFAULT_COLORS.primary);
+  const secondary = parseColor(config.secondary ?? DEFAULT_COLORS.secondary);
+  const accent = parseColor(config.accent ?? DEFAULT_COLORS.accent);
+  const muted = parseColor(config.muted ?? DEFAULT_COLORS.muted);
+  const destructive = parseColor(
+    config.destructive ?? DEFAULT_COLORS.destructive
+  );
+  const mutedFg = parseColor(
+    config.mutedForeground ?? DEFAULT_COLORS.mutedForeground
+  );
   return {
-    light: generateTheme(name, core, "light"),
-    dark: generateTheme(name, core, "dark"),
-    detectedMode
-    // Returns which mode the original core colors represent
+    id: String(id),
+    name,
+    light: {
+      background: { base: bg, foreground: fg },
+      foreground: { base: fg, foreground: bg },
+      primary: {
+        base: primary,
+        foreground: getForegroundColor(fg, primary)
+      },
+      secondary: {
+        base: secondary,
+        foreground: getForegroundColor(fg, secondary)
+      },
+      accent: {
+        base: accent,
+        foreground: getForegroundColor(fg, accent)
+      },
+      muted: { base: muted, foreground: mutedFg },
+      destructive: {
+        base: destructive,
+        foreground: getForegroundColor(fg, destructive)
+      }
+    },
+    dark: {},
+    fontSizes: {
+      extraSmall: config.extraSmall ?? DEFAULT_FONT_SIZES.extraSmall,
+      small: config.small ?? DEFAULT_FONT_SIZES.small,
+      regular: config.regular ?? DEFAULT_FONT_SIZES.regular,
+      large: config.large ?? DEFAULT_FONT_SIZES.large,
+      extraLarge: config.extraLarge ?? DEFAULT_FONT_SIZES.extraLarge,
+      giant: config.giant ?? DEFAULT_FONT_SIZES.giant
+    },
+    fontFamilies: {
+      header: config.headerFont ?? DEFAULT_FONT_FAMILIES.header,
+      body: config.bodyFont ?? DEFAULT_FONT_FAMILIES.body
+    },
+    spacing: config.globalSpacing ?? DEFAULT_SPACING,
+    radii: {
+      small: config.radiusSmall ?? DEFAULT_RADII.small,
+      medium: config.radiusMedium ?? DEFAULT_RADII.medium,
+      large: config.radiusLarge ?? DEFAULT_RADII.large,
+      extraLarge: config.radiusExtraLarge ?? DEFAULT_RADII.extraLarge
+    }
   };
-};
-var getThemeIdentifier = (theme) => {
-  return theme.id !== void 0 ? theme.id.toString() : theme.name;
-};
-var findThemeByIdentifier = (themes, identifier) => {
-  if (typeof identifier === "number") {
-    return themes.find((t) => t.id === identifier);
-  }
-  const numericId = parseInt(identifier, 10);
-  if (!isNaN(numericId)) {
-    const byId = themes.find((t) => t.id === numericId);
-    if (byId) return byId;
-  }
-  return themes.find((t) => t.name === identifier);
-};
-var isSameTheme = (theme1, theme2) => {
-  if (!theme1) return false;
-  if (theme1.id !== void 0 && theme2.id !== void 0) {
-    return theme1.id === theme2.id;
+}
+function buildThemeDefinition(theme) {
+  const config = theme.config ?? {};
+  if (isNewThemeFormat(config)) {
+    return deserialiseTheme({
+      ...config,
+      id: String(theme.id),
+      name: theme.name ?? "Untitled Theme"
+    });
   }
-  return theme1.name === theme2.name;
-};
+  return legacyConfigToDefinition(
+    theme.id,
+    theme.name ?? "Untitled Theme",
+    config
+  );
+}
+function transformThemes(themes) {
+  return themes.flatMap((theme) => {
+    try {
+      return [buildThemeDefinition(theme)];
+    } catch (error) {
+      console.error(`[theme] Failed to build theme id=${theme.id}:`, error);
+      return [];
+    }
+  });
+}
+function getActiveThemeId(themes) {
+  const active = themes.find((t) => t.active) ?? themes[0];
+  return active ? String(active.id) : void 0;
+}
 
-// src/theme/index.ts
-var dracula = generateTheme("Dracula", {
-  // Base - Official: draculatheme.com/spec
-  base: { l: 0.2882, c: 0.0221, h: 277.51 },
-  // Official: #282A36 (Background)
-  text: { l: 0.9775, c: 79e-4, h: 106.55 },
-  // Official: #F8F8F2 (Foreground)
-  body: { l: 0.75, c: 0.02, h: 300 },
-  // Body text
-  muted: { l: 0.4028, c: 0.0322, h: 277.83 },
-  // Surface/Card bg - Official: #44475A (Current Line)
-  mutedForeground: { l: 0.5598, c: 0.0803, h: 270.09 },
-  // Official: #6272A4 (Comment)
-  // Color
-  primary: { l: 0.742, c: 0.1485, h: 301.88 },
-  // Official: #BD93F9 (Purple)
-  primaryForeground: { l: 0.15, c: 0.01, h: 275 },
-  secondary: { l: 0.5598, c: 0.0803, h: 270.09 },
-  // Official: #6272A4 (Comment)
-  secondaryForeground: { l: 0.15, c: 0.01, h: 245 },
-  accent: { l: 0.871, c: 0.2195, h: 148.02 },
-  // Official: #50FA7B (Green)
-  accentForeground: { l: 0.15, c: 0.01, h: 110 },
-  destructive: { l: 0.6822, c: 0.2063, h: 24.43 },
-  // Official: #FF5555 (Red)
-  destructiveForeground: { l: 0.15, c: 0.01, h: 30 }
-});
-var solarized = generateTheme(
-  "Solarized",
-  {
-    // Base - Official: ethanschoonover.com/solarized
-    base: { l: 0.9735, c: 0.0261, h: 90.1 },
-    // Official: #fdf6e3 (base3)
-    text: { l: 0.3092, c: 0.0518, h: 219.65 },
-    // Official: #073642 (base02)
-    body: { l: 0.523, c: 0.0283, h: 219.14 },
-    // Official: #586e75 (base01)
-    muted: { l: 0.9306, c: 0.026, h: 92.4 },
-    // Surface/Card bg - Official: #eee8d5 (base2)
-    mutedForeground: { l: 0.5682, c: 0.0285, h: 221.9 },
-    // Official: #657b83 (base00)
-    // Color
-    primary: { l: 0.6437, c: 0.1019, h: 187.38 },
-    // Official: #2aa198 (cyan)
-    primaryForeground: { l: 0.98, c: 0.01, h: 180 },
-    secondary: { l: 0.6444, c: 0.1508, h: 118.6 },
-    // Official: #859900 (green)
-    secondaryForeground: { l: 0.15, c: 0.01, h: 145 },
-    accent: { l: 0.6545, c: 0.134, h: 85.72 },
-    // Official: #b58900 (yellow)
-    accentForeground: { l: 0.15, c: 0.01, h: 85 },
-    destructive: { l: 0.5863, c: 0.2064, h: 27.12 },
-    // Official: #dc322f (red)
-    destructiveForeground: { l: 0.98, c: 0.01, h: 30 }
-  },
-  "light"
-);
-var gruvbox = generateTheme(
-  "Gruvbox",
-  {
-    // Base - Official: github.com/morhetz/gruvbox (Light mode)
-    base: { l: 0.9555, c: 0.0555, h: 96.15 },
-    // Official: #fbf1c7 (bg0 light)
-    text: { l: 0.3441, c: 66e-4, h: 48.52 },
-    // Official: #3c3836 (fg1 light)
-    body: { l: 0.411, c: 0.0115, h: 51.87 },
-    // Official: #504945 (fg2 light)
-    muted: { l: 0.8941, c: 0.0566, h: 89.24 },
-    // Surface/Card bg - Official: #ebdbb2 (bg1 light)
-    mutedForeground: { l: 0.5505, c: 0.0234, h: 62.57 },
-    // Official: #7c6f64 (gray)
-    // Color
-    primary: { l: 0.7251, c: 0.1429, h: 77.71 },
-    // Official: #d79921 (yellow)
-    primaryForeground: { l: 0.15, c: 0.01, h: 80 },
-    secondary: { l: 0.6564, c: 0.1354, h: 109.12 },
-    // Official: #98971a (green)
-    secondaryForeground: { l: 0.15, c: 0.01, h: 145 },
-    accent: { l: 0.6217, c: 0.1707, h: 45.81 },
-    // Official: #d65d0e (orange)
-    accentForeground: { l: 0.15, c: 0.01, h: 35 },
-    destructive: { l: 0.5458, c: 0.203, h: 28.66 },
-    // Official: #cc241d (red)
-    destructiveForeground: { l: 0.98, c: 0.01, h: 30 }
-  },
-  "light"
-);
-var monokai = generateTheme("Monokai", {
-  // Base - Official: Sublime Text Monokai
-  base: { l: 0.2737, c: 0.0109, h: 114.8 },
-  // Official: #272822 (Background)
-  text: { l: 0.9775, c: 79e-4, h: 106.55 },
-  // Official: #F8F8F2 (Foreground)
-  body: { l: 0.75, c: 0.04, h: 90 },
-  // Body text
-  muted: { l: 0.3574, c: 0.0184, h: 103 },
-  // Surface/Card bg - Official: #3E3D32 (Line hig
-  mutedForeground: { l: 0.5467, c: 0.0288, h: 97.39 },
-  // Official: #75715E (Comment)
-  // Color
-  primary: { l: 0.8792, c: 0.1255, h: 103.18 },
-  // Official: #E6DB74 (Yellow)
-  primaryForeground: { l: 0.15, c: 0.01, h: 60 },
-  secondary: { l: 0.6416, c: 0.24, h: 7.47 },
-  // Official: #F92672 (Pink)
-  secondaryForeground: { l: 0.15, c: 0.01, h: 300 },
-  accent: { l: 0.8414, c: 0.2044, h: 127.29 },
-  // Official: #A6E22E (Green)
-  accentForeground: { l: 0.15, c: 0.01, h: 110 },
-  destructive: { l: 0.6416, c: 0.24, h: 7.47 },
-  // Official: #F92672 (Red/Pink)
-  destructiveForeground: { l: 0.98, c: 0.01, h: 20 }
-});
-var tokyoNight = generateTheme("Tokyo Night", {
-  // Base - Official: github.com/folke/tokyonight.nvim
-  base: { l: 0.2263, c: 0.0214, h: 280.49 },
-  // Official: #1a1b26 (bg)
-  text: { l: 0.8456, c: 0.0611, h: 274.76 },
-  // Official: #c0caf5 (fg)
-  body: { l: 0.7666, c: 0.0537, h: 275.49 },
-  // Official: #a9b1d6 (fg_dark)
-  muted: { l: 0.2819, c: 0.0355, h: 274.75 },
-  // Surface/Card bg - Official: #24283b (bg_highlight)
-  mutedForeground: { l: 0.4955, c: 0.0682, h: 274.37 },
-  // Official: #565f89 (comment)
-  // Color
-  primary: { l: 0.719, c: 0.1322, h: 264.2 },
-  // Official: #7aa2f7 (blue)
-  primaryForeground: { l: 0.15, c: 0.01, h: 260 },
-  secondary: { l: 0.7515, c: 0.1344, h: 299.5 },
-  // Official: #bb9af7 (magenta)
-  secondaryForeground: { l: 0.15, c: 0.01, h: 295 },
-  accent: { l: 0.7839, c: 0.1057, h: 75.43 },
-  // Official: #e0af68 (yellow)
-  accentForeground: { l: 0.15, c: 0.01, h: 80 },
-  destructive: { l: 0.7227, c: 0.1589, h: 10.28 },
-  // Official: #f7768e (red)
-  destructiveForeground: { l: 0.15, c: 0.01, h: 20 }
-});
-var rosePine = generateTheme("Rose Pine", {
-  // Base - Official: rosepinetheme.com/palette
-  base: { l: 0.2134, c: 0.0255, h: 291.13 },
-  // Official: #191724 (Base)
-  text: { l: 0.9088, c: 0.0299, h: 289.97 },
-  // Official: #e0def4 (Text)
-  body: { l: 0.6539, c: 0.0444, h: 291.23 },
-  // Official: #908caa (Subtle)
-  muted: { l: 0.2413, c: 0.0322, h: 289.14 },
-  // Surface/Card bg - Official: #1f1d2e (Surface)
-  mutedForeground: { l: 0.5383, c: 0.0435, h: 291.41 },
-  // Official: #6e6a86 (Muted)
-  // Color
-  primary: { l: 0.8363, c: 0.0544, h: 21.14 },
-  // Official: #ebbcba (Rose)
-  primaryForeground: { l: 0.15, c: 0.01, h: 345 },
-  secondary: { l: 0.5277, c: 0.0793, h: 227.72 },
-  // Official: #31748f (Pine)
-  secondaryForeground: { l: 0.15, c: 0.01, h: 155 },
-  accent: { l: 0.776, c: 0.0945, h: 304.99 },
-  // Official: #c4a7e7 (Iris)
-  accentForeground: { l: 0.15, c: 0.01, h: 270 },
-  destructive: { l: 0.6977, c: 0.1565, h: 4.22 },
-  // Official: #eb6f92 (Love)
-  destructiveForeground: { l: 0.15, c: 0.01, h: 25 }
-});
-var everforest = generateTheme(
-  "Everforest",
-  {
-    // Base - Official: github.com/sainnhe/everforest (Light mode)
-    base: { l: 0.9735, c: 0.0261, h: 90.1 },
-    // Official: #fdf6e3 (bg0 light medium)
-    text: { l: 0.5154, c: 0.0212, h: 232.87 },
-    // Official: #5c6a72 (fg)
-    body: { l: 0.6398, c: 0.0292, h: 143.51 },
-    // Official: #829181 (grey2)
-    muted: { l: 0.9522, c: 0.0306, h: 98.86 },
-    // Surface/Card bg - Official: #f4f0d9 (bg1 light)
-    mutedForeground: { l: 0.6888, c: 0.0243, h: 141.21 },
-    // Official: #939f91 (grey1)
-    // Color
-    primary: { l: 0.6697, c: 0.156, h: 118.23 },
-    // Official: #8da101 (green)
-    primaryForeground: { l: 0.98, c: 0.01, h: 140 },
-    secondary: { l: 0.7466, c: 0.1545, h: 80.27 },
-    // Official: #dfa000 (yellow)
-    secondaryForeground: { l: 0.15, c: 0.01, h: 60 },
-    accent: { l: 0.7147, c: 0.1729, h: 50.75 },
-    // Official: #f57d26 (orange)
-    accentForeground: { l: 0.15, c: 0.01, h: 30 },
-    destructive: { l: 0.6707, c: 0.1996, h: 25.2 },
-    // Official: #f85552 (red)
-    destructiveForeground: { l: 0.98, c: 0.01, h: 20 }
-  },
-  "light"
-);
-var nord = generateTheme("Nord", {
-  // Base - Official: nordtheme.com
-  base: { l: 0.3244, c: 0.0229, h: 264.18 },
-  // Official: #2e3440 (nord0 - Polar Night)
-  text: { l: 0.9513, c: 74e-4, h: 260.73 },
-  // Official: #eceff4 (nord6 - Snow Storm)
-  body: { l: 0.8993, c: 0.0164, h: 262.75 },
-  // Official: #d8dee9 (nord4 - Snow Storm)
-  muted: { l: 0.3792, c: 0.029, h: 266.47 },
-  // Surface/Card bg - Official: #3b4252 (nord1)
-  mutedForeground: { l: 0.4523, c: 0.0352, h: 264.13 },
-  // Official: #4c566a (nord3)
-  // Color
-  primary: { l: 0.7746, c: 0.0622, h: 217.47 },
-  // Official: #88c0d0 (nord8 - Frost)
-  primaryForeground: { l: 0.15, c: 0.01, h: 210 },
-  secondary: { l: 0.7629, c: 0.0477, h: 194.49 },
-  // Official: #8fbcbb (nord7 - Frost)
-  secondaryForeground: { l: 0.15, c: 0.01, h: 190 },
-  accent: { l: 0.6921, c: 0.0625, h: 332.66 },
-  // Official: #b48ead (nord15 - Aurora)
-  accentForeground: { l: 0.15, c: 0.01, h: 250 },
-  destructive: { l: 0.6061, c: 0.1206, h: 15.34 },
-  // Official: #bf616a (nord11 - Aurora)
-  destructiveForeground: { l: 0.98, c: 0.01, h: 25 }
-});
-var catppuccinMocha = generateTheme("Catppuccin Mocha", {
-  // Base - Official: catppuccin.com/palette (Mocha variant)
-  base: { l: 0.2429, c: 0.0304, h: 283.91 },
-  // Official: #1e1e2e (Base)
-  text: { l: 0.8787, c: 0.0426, h: 272.28 },
-  // Official: #cdd6f4 (Text)
-  body: { l: 0.8168, c: 0.0403, h: 272.86 },
-  // Official: #bac2de (Subtext 1)
-  muted: { l: 0.2155, c: 0.0254, h: 284.06 },
-  // Surface/Card bg - Official: #181825 (Mantle)
-  mutedForeground: { l: 0.751, c: 0.0396, h: 273.93 },
-  // Official: #a6adc8 (Subtext 0)
-  // Color
-  primary: { l: 0.7664, c: 0.1113, h: 259.88 },
-  // Official: #89b4fa (Blue)
-  primaryForeground: { l: 0.15, c: 0.01, h: 255 },
-  secondary: { l: 0.7871, c: 0.1187, h: 304.77 },
-  // Official: #cba6f7 (Mauve)
-  secondaryForeground: { l: 0.15, c: 0.01, h: 294 },
-  accent: { l: 0.9193, c: 0.0704, h: 86.53 },
-  // Official: #f9e2af (Yellow)
-  accentForeground: { l: 0.15, c: 0.01, h: 72 },
-  destructive: { l: 0.7556, c: 0.1297, h: 2.76 },
-  // Official: #f38ba8 (Red)
-  destructiveForeground: { l: 0.15, c: 0.01, h: 22 }
-});
-var nordifiedCatppuccin = generateTheme("Nordified Catppuccin", {
-  // Base - Custom hybrid: Nord backgrounds + Catppuccin accents
-  base: parseOklch(nord.config.background),
-  text: parseOklch(nord.config.foreground),
-  body: parseOklch(nord.config.body),
-  muted: parseOklch(nord.config.muted),
-  mutedForeground: parseOklch(nord.config.muted_foreground),
-  // Color - Catppuccin accent colors
-  primary: parseOklch(catppuccinMocha.config.primary),
-  primaryForeground: parseOklch(catppuccinMocha.config.primary_foreground),
-  secondary: parseOklch(catppuccinMocha.config.secondary),
-  secondaryForeground: parseOklch(catppuccinMocha.config.secondary_foreground),
-  accent: parseOklch(catppuccinMocha.config.accent),
-  accentForeground: parseOklch(catppuccinMocha.config.accent_foreground),
-  destructive: parseOklch(catppuccinMocha.config.destructive),
-  destructiveForeground: parseOklch(
-    catppuccinMocha.config.destructive_foreground
-  )
-});
-var christmas = generateTheme("Christmas", {
-  // Base - Custom holiday theme
-  base: { l: 0.22, c: 0.04, h: 150 },
-  // Dark forest green
-  text: { l: 0.95, c: 0.02, h: 100 },
-  // Snow white
-  body: { l: 0.85, c: 0.02, h: 100 },
-  // Body text
-  muted: { l: 0.15, c: 0.04, h: 150 },
-  // Surface/Card bg - Darker green
-  mutedForeground: { l: 0.65, c: 0.02, h: 100 },
-  // Muted snow
-  // Color
-  primary: { l: 0.6, c: 0.15, h: 30 },
-  // Christmas red
-  primaryForeground: { l: 0.98, c: 0.01, h: 30 },
-  secondary: { l: 0.7, c: 0.12, h: 140 },
-  // Bright holiday green
-  secondaryForeground: { l: 0.15, c: 0.01, h: 140 },
-  accent: { l: 0.85, c: 0.12, h: 90 },
-  // Warm gold highlight
-  accentForeground: { l: 0.15, c: 0.01, h: 90 },
-  destructive: { l: 0.55, c: 0.18, h: 25 },
-  // Stronger red
-  destructiveForeground: { l: 0.98, c: 0.01, h: 25 }
-});
-var pastel = generateTheme("Pastel", {
-  // Base - Custom soft pastel theme
-  base: { l: 0.95, c: 0.03, h: 210 },
-  // Soft light blue-tinted base
-  text: { l: 0.25, c: 0.03, h: 210 },
-  // Soft dark text
-  body: { l: 0.35, c: 0.03, h: 210 },
-  // Body text
-  muted: { l: 0.89, c: 0.03, h: 210 },
-  // Surface/Card bg - Slightly darker
-  mutedForeground: { l: 0.5, c: 0.03, h: 210 },
-  // Muted foreground
-  // Color
-  primary: { l: 0.55, c: 0.12, h: 200 },
-  // Pastel blue
-  primaryForeground: { l: 0.98, c: 0.01, h: 200 },
-  secondary: { l: 0.55, c: 0.12, h: 320 },
-  // Pastel pink
-  secondaryForeground: { l: 0.98, c: 0.01, h: 320 },
-  accent: { l: 0.6, c: 0.13, h: 80 },
-  // Pastel yellow
-  accentForeground: { l: 0.98, c: 0.01, h: 80 },
-  destructive: { l: 0.5, c: 0.15, h: 25 },
-  // Pastel red
-  destructiveForeground: { l: 0.98, c: 0.01, h: 25 }
-});
-var neon = generateTheme("Neon", {
-  // Base - Custom vibrant neon theme
-  base: { l: 0.1, c: 0.03, h: 260 },
-  // Deep dark purple-tinted base
-  text: { l: 0.9, c: 0.05, h: 260 },
-  // Bright neon text
-  body: { l: 0.8, c: 0.04, h: 260 },
-  // Body text
-  muted: { l: 0.18, c: 0.02, h: 260 },
-  // Surface/Card bg - Slightly lighter
-  mutedForeground: { l: 0.55, c: 0.04, h: 260 },
-  // Muted foreground
-  // Color - High saturation neon accents
-  primary: { l: 0.6, c: 0.2, h: 180 },
-  // Neon cyan
-  primaryForeground: { l: 0.1, c: 0.01, h: 180 },
-  secondary: { l: 0.6, c: 0.2, h: 300 },
-  // Neon magenta
-  secondaryForeground: { l: 0.1, c: 0.01, h: 300 },
-  accent: { l: 0.55, c: 0.2, h: 90 },
-  // Neon green
-  accentForeground: { l: 0.1, c: 0.01, h: 90 },
-  destructive: { l: 0.55, c: 0.22, h: 20 },
-  // Neon red
-  destructiveForeground: { l: 0.1, c: 0.01, h: 20 }
-});
-var highContrast = generateTheme("High Contrast", {
-  // Base - Custom accessibility theme (max contrast)
-  base: { l: 0, c: 0, h: 0 },
-  // Pure black #000000
-  text: { l: 1, c: 0, h: 0 },
-  // Pure white #ffffff
-  body: { l: 0.9, c: 0, h: 0 },
-  // Body text
-  muted: { l: 0.12, c: 0, h: 0 },
-  // Surface/Card bg - Near black
-  mutedForeground: { l: 0.6, c: 0, h: 0 },
-  // Muted gray
-  // Color - Maximum saturation for visibility
-  primary: { l: 0.5, c: 0.25, h: 260 },
-  // Saturated blue
-  primaryForeground: { l: 1, c: 0, h: 0 },
-  secondary: { l: 0.5, c: 0.25, h: 120 },
-  // Saturated green
-  secondaryForeground: { l: 1, c: 0, h: 0 },
-  accent: { l: 0.5, c: 0.25, h: 60 },
-  // Saturated yellow
-  accentForeground: { l: 0, c: 0, h: 0 },
-  destructive: { l: 0.5, c: 0.25, h: 0 },
-  // Saturated red
-  destructiveForeground: { l: 1, c: 0, h: 0 }
-});
-var ocean = generateTheme(
-  "Ocean",
-  {
-    // Base - Custom blue ocean theme
-    base: { l: 0.25, c: 0.03, h: 220 },
-    // Deep ocean blue
-    text: { l: 0.85, c: 0.02, h: 220 },
-    // Light seafoam text
-    body: { l: 0.75, c: 0.02, h: 220 },
-    // Body text
-    muted: { l: 0.33, c: 0.02, h: 220 },
-    // Surface/Card bg - Lighter ocean
-    mutedForeground: { l: 0.55, c: 0.02, h: 220 },
-    // Muted foreground
-    // Color
-    primary: { l: 0.65, c: 0.12, h: 200 },
-    // Ocean blue
-    primaryForeground: { l: 0.15, c: 0.01, h: 200 },
-    secondary: { l: 0.7, c: 0.1, h: 180 },
-    // Teal
-    secondaryForeground: { l: 0.15, c: 0.01, h: 180 },
-    accent: { l: 0.75, c: 0.08, h: 160 },
-    // Aqua
-    accentForeground: { l: 0.15, c: 0.01, h: 160 },
-    destructive: { l: 0.6, c: 0.14, h: 25 },
-    // Coral red
-    destructiveForeground: { l: 0.98, c: 0.01, h: 25 }
-  },
-  "light"
-);
-var forest = generateTheme(
-  "Forest",
-  {
-    // Base - Custom nature green theme
-    base: { l: 0.28, c: 0.04, h: 140 },
-    // Deep forest green
-    text: { l: 0.88, c: 0.03, h: 100 },
-    // Light cream text
-    body: { l: 0.78, c: 0.03, h: 100 },
-    // Body text
-    muted: { l: 0.36, c: 0.03, h: 140 },
-    // Surface/Card bg - Lighter forest
-    mutedForeground: { l: 0.58, c: 0.03, h: 100 },
-    // Muted foreground
-    // Color
-    primary: { l: 0.65, c: 0.12, h: 145 },
-    // Forest green
-    primaryForeground: { l: 0.15, c: 0.01, h: 145 },
-    secondary: { l: 0.7, c: 0.1, h: 80 },
-    // Olive
-    secondaryForeground: { l: 0.15, c: 0.01, h: 80 },
-    accent: { l: 0.8, c: 0.1, h: 60 },
-    // Golden
-    accentForeground: { l: 0.15, c: 0.01, h: 60 },
-    destructive: { l: 0.6, c: 0.14, h: 30 },
-    // Burnt orange
-    destructiveForeground: { l: 0.98, c: 0.01, h: 30 }
-  },
-  "light"
-);
-var sunset = generateTheme(
-  "Sunset",
-  {
-    // Base - Custom warm sunset theme
-    base: { l: 0.26, c: 0.04, h: 30 },
-    // Deep warm brown
-    text: { l: 0.9, c: 0.03, h: 60 },
-    // Warm cream text
-    body: { l: 0.8, c: 0.03, h: 60 },
-    // Body text
-    muted: { l: 0.34, c: 0.03, h: 30 },
-    // Surface/Card bg - Lighter warm brown
-    mutedForeground: { l: 0.58, c: 0.03, h: 60 },
-    // Muted foreground
-    // Color
-    primary: { l: 0.7, c: 0.15, h: 25 },
-    // Warm orange
-    primaryForeground: { l: 0.15, c: 0.01, h: 25 },
-    secondary: { l: 0.68, c: 0.16, h: 350 },
-    // Pink
-    secondaryForeground: { l: 0.15, c: 0.01, h: 350 },
-    accent: { l: 0.75, c: 0.14, h: 50 },
-    // Yellow-orange
-    accentForeground: { l: 0.15, c: 0.01, h: 50 },
-    destructive: { l: 0.6, c: 0.18, h: 20 },
-    // Red
-    destructiveForeground: { l: 0.98, c: 0.01, h: 20 }
-  },
-  "light"
-);
-var defaultTheme = generateTheme(
-  "Default",
-  DEFAULT_CORE_COLORS,
-  "light"
-);
-var BUILT_IN_THEMES = {
-  Default: defaultTheme,
-  Dracula: dracula,
-  Solarized: solarized,
-  Gruvbox: gruvbox,
-  Monokai: monokai,
-  "Tokyo Night": tokyoNight,
-  "Rose Pine": rosePine,
-  Everforest: everforest,
-  Nord: nord,
-  "Catppuccin Mocha": catppuccinMocha,
-  "Nordified Catppuccin": nordifiedCatppuccin,
-  Christmas: christmas,
-  Pastel: pastel,
-  Neon: neon,
-  "High Contrast": highContrast,
-  Ocean: ocean,
-  Forest: forest,
-  Sunset: sunset
-};
-var allThemes = BUILT_IN_THEMES;
+// src/theme/theme-applicator.ts
+var STYLE_PREFIX = "theme-style-";
+function applyTheme(theme, options) {
+  if (typeof document === "undefined") return;
+  try {
+    const styleId = `${STYLE_PREFIX}${theme.id}`;
+    let el = document.getElementById(styleId);
+    if (!el) {
+      el = document.createElement("style");
+      el.id = styleId;
+      document.head.appendChild(el);
+    }
+    el.textContent = generateThemeCSS(theme, options);
+  } catch (error) {
+    console.error(`[theme] applyTheme failed for "${theme.id}":`, error);
+  }
+}
+function removeTheme(themeId) {
+  if (typeof document === "undefined") return;
+  document.getElementById(`${STYLE_PREFIX}${themeId}`)?.remove();
+}
+function removeAllThemes() {
+  if (typeof document === "undefined") return;
+  document.querySelectorAll(`style[id^="${STYLE_PREFIX}"]`).forEach((el) => el.remove());
+}
 
-exports.BUILT_IN_THEMES = BUILT_IN_THEMES;
-exports.CORE_COLOR_KEYS = CORE_COLOR_KEYS;
-exports.CORE_FONT_KEYS = CORE_FONT_KEYS;
-exports.CORE_NON_COLOR_KEYS = CORE_NON_COLOR_KEYS;
-exports.CORE_SPACING_KEYS = CORE_SPACING_KEYS;
-exports.DEFAULT_CORE_COLORS = DEFAULT_CORE_COLORS;
-exports.DEFAULT_CORE_COLORS_CONFIG = DEFAULT_CORE_COLORS_CONFIG;
-exports.DEFAULT_FONT = DEFAULT_FONT;
+exports.DEFAULT_COLORS = DEFAULT_COLORS;
+exports.DEFAULT_FONT_FAMILIES = DEFAULT_FONT_FAMILIES;
+exports.DEFAULT_FONT_SIZES = DEFAULT_FONT_SIZES;
+exports.DEFAULT_RADII = DEFAULT_RADII;
 exports.DEFAULT_SPACING = DEFAULT_SPACING;
-exports.FONT_OPTIONS = FONT_OPTIONS;
-exports.THEME_MODES = THEME_MODES;
-exports.allThemes = allThemes;
-exports.catppuccinMocha = catppuccinMocha;
-exports.christmas = christmas;
-exports.clampChroma = clampChroma;
-exports.coreColorsToConfig = coreColorsToConfig;
-exports.defaultTheme = defaultTheme;
-exports.detectThemeMode = detectThemeMode;
-exports.dracula = dracula;
-exports.everforest = everforest;
-exports.findThemeByIdentifier = findThemeByIdentifier;
-exports.fontConfigToCoreFont = fontConfigToCoreFont;
-exports.forest = forest;
-exports.generateColorSwatches = generateColorSwatches;
-exports.generateDualTheme = generateDualTheme;
-exports.generateSmartDualTheme = generateSmartDualTheme;
-exports.generateTheme = generateTheme;
-exports.generateThemeCssVars = generateThemeCssVars;
+exports.DEFAULT_THEME_ID = DEFAULT_THEME_ID;
+exports.DEFAULT_THEME_NAME = DEFAULT_THEME_NAME;
+exports.FONT_FAMILY_KEYS = FONT_FAMILY_KEYS;
+exports.FONT_SIZE_KEYS = FONT_SIZE_KEYS;
+exports.RADIUS_KEYS = RADIUS_KEYS;
+exports.SEMANTIC_COLOR_NAMES = SEMANTIC_COLOR_NAMES;
+exports.SHADE_STEPS = SHADE_STEPS;
+exports.applyTheme = applyTheme;
+exports.buildThemeDefinition = buildThemeDefinition;
+exports.deriveDarkVariant = deriveDarkVariant;
+exports.deserialiseTheme = deserialiseTheme;
+exports.generateShades = generateShades;
+exports.generateThemeCSS = generateThemeCSS;
+exports.getActiveThemeId = getActiveThemeId;
+exports.getDefaultThemeDefinition = getDefaultThemeDefinition;
 exports.getForegroundColor = getForegroundColor;
-exports.getThemeIdentifier = getThemeIdentifier;
-exports.globalCSSOverride = globalCSSOverride;
-exports.gruvbox = gruvbox;
-exports.highContrast = highContrast;
-exports.isSameTheme = isSameTheme;
-exports.mod = mod;
-exports.monokai = monokai;
-exports.neon = neon;
-exports.nord = nord;
-exports.nordifiedCatppuccin = nordifiedCatppuccin;
-exports.ocean = ocean;
-exports.oklchString = oklchString;
-exports.parseOklch = parseOklch;
-exports.pastel = pastel;
-exports.rosePine = rosePine;
-exports.rotateHue = rotateHue;
-exports.rotateSoft = rotateSoft;
-exports.separatedThemeConfig = separatedThemeConfig;
-exports.shadeColor = shadeColor;
-exports.solarized = solarized;
-exports.spacingConfigToCoreSpacing = spacingConfigToCoreSpacing;
-exports.sunset = sunset;
-exports.themeConfigToCoreColors = themeConfigToCoreColors;
-exports.themeConfigToCoreNonColorFields = themeConfigToCoreNonColorFields;
-exports.toDarkMode = toDarkMode;
-exports.toLightMode = toLightMode;
-exports.tokyoNight = tokyoNight;
+exports.mergeDarkOverrides = mergeDarkOverrides;
+exports.parseColor = parseColor;
+exports.removeAllThemes = removeAllThemes;
+exports.removeTheme = removeTheme;
+exports.resolveTheme = resolveTheme;
+exports.serialiseTheme = serialiseTheme;
+exports.transformThemes = transformThemes;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map