@fluid-app/rep-core 0.1.14 → 0.1.16

package/dist/theme/index.cjs

@@ -1,617 +1,731 @@
-'use strict';
-
-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"
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-CKQMccvm.cjs");
+let colorjs_io = require("colorjs.io");
+colorjs_io = require_chunk.__toESM(colorjs_io);
+//#region src/theme/types.ts
+const SEMANTIC_COLOR_NAMES = [
+	"background",
+	"foreground",
+	"primary",
+	"secondary",
+	"accent",
+	"muted",
+	"destructive"
 ];
-var SHADE_STEPS = [
-  100,
-  200,
-  300,
-  400,
-  500,
-  600,
-  700,
-  800,
-  900
+const SHADE_STEPS = [
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
 ];
-var FONT_SIZE_KEYS = [
-  "extraSmall",
-  "small",
-  "regular",
-  "large",
-  "extraLarge",
-  "giant"
+const 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
+const FONT_FAMILY_KEYS = ["header", "body"];
+const RADIUS_KEYS = [
+	"small",
+	"medium",
+	"large",
+	"extraLarge"
+];
+//#endregion
+//#region src/theme/color-engine.ts
+/**
+* Attempt to convert any string into a Color using colorjs.io.
+* If the string is exactly 6 characters it is assumed to be a bare hex value
+* (e.g. "3b82f6") and a "#" prefix is added before parsing.
+*
+* @returns the parsed Color, or a neutral gray (`oklch(0.5 0 0)`) on failure
+*/
 function parseColor(value) {
-  if (value.length === 6) {
-    value = `#${value}`;
-  }
-  try {
-    return new Color2__default.default(value);
-  } catch (error) {
-    console.warn("[theme] Failed to parse color:", value, error);
-    return new Color2__default.default("oklch", [0.5, 0, 0]);
-  }
+	if (value.length === 6) value = `#${value}`;
+	try {
+		return new colorjs_io.default(value);
+	} catch (error) {
+		console.warn("[theme] Failed to parse color:", value, error);
+		return new colorjs_io.default("oklch", [
+			.5,
+			0,
+			0
+		]);
+	}
 }
+/**
+* Returns either the original foreground or a corrected lightness variant,
+* whichever provides better contrast against `color`.
+* Inversion triggers when the APCA contrast is below 50.
+*/
 function getForegroundColor(foreground, color) {
-  if (foreground.oklch.l == null || color.oklch.l == null) {
-    return foreground;
-  }
-  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;
+	if (foreground.oklch.l == null || color.oklch.l == null) return foreground;
+	if (color.contrastAPCA(foreground) < 50) return new colorjs_io.default("oklch", [
+		color.oklch.l < .7 ? .95 : .15,
+		foreground.oklch.c || 0,
+		foreground.oklch.h || 0
+	]);
+	return foreground;
 }
+/**
+* Generate a 100–900 shade ramp from a base color.
+* Base anchors at 500. Light shades (100–400) step toward white,
+* dark shades (600–900) step toward black. Dark steps use an asymmetric
+* multiplier (1.6×, 1.875×, 3×, 4× of `darkStep`) for a more gradual
+* initial descent. Chroma is nudged per step for perceptually natural ramps.
+*/
 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 {
-    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)
-  };
+	const l = base.oklch.l ?? 0;
+	const c = base.oklch.c ?? 0;
+	const h = base.oklch.h ?? 0;
+	const safeMax = l >= .885 ? .995 : .97;
+	const safeMin = l <= .33 ? 0 : .21;
+	const lightStep = (safeMax - l) / 5;
+	const darkStep = -(l - safeMin) / 8;
+	const shade = (lDelta, cDelta) => {
+		return new colorjs_io.default("oklch", [
+			Math.max(0, Math.min(1, l + lDelta)),
+			c <= .001 ? c : Math.max(0, c + cDelta),
+			h
+		]);
+	};
+	return {
+		100: shade(5 * lightStep, -.00375),
+		200: shade(4 * lightStep, -.00375),
+		300: shade(3 * lightStep, -.00375),
+		400: shade(2 * lightStep, -.00375),
+		500: new colorjs_io.default("oklch", [
+			l,
+			c,
+			h
+		]),
+		600: shade(1.6 * darkStep, .025),
+		700: shade(1.875 * 2 * darkStep, .05),
+		800: shade(6 * darkStep, .075),
+		900: shade(8 * darkStep, .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
-  }
+const DARK_DERIVATION_CONFIG = {
+	background: {
+		baseLightness: .15,
+		fgLightness: .93
+	},
+	foreground: {
+		baseLightness: .93,
+		fgLightness: .15
+	},
+	muted: {
+		baseLightness: .22,
+		fgLightness: .75
+	},
+	primary: {
+		baseLightness: "invert",
+		fgLightness: .95,
+		chromaScale: .9
+	},
+	secondary: {
+		baseLightness: "invert",
+		fgLightness: .93,
+		chromaScale: .85
+	},
+	accent: {
+		baseLightness: "invert",
+		fgLightness: .95,
+		chromaScale: .9
+	},
+	destructive: {
+		baseLightness: "invert",
+		fgLightness: .95,
+		chromaScale: .95
+	}
 };
+/** Invert OKLCH lightness (1 - l), clamped to [0.35, 0.75] to avoid extremes. */
 function invertLightness(l) {
-  const inverted = 1 - l;
-  return Math.max(0.35, Math.min(0.75, inverted));
+	const inverted = 1 - l;
+	return Math.max(.35, Math.min(.75, inverted));
 }
+/**
+* Derive a dark-mode ThemeColorInput from its light-mode counterpart.
+*/
 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: 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
-    ])
-  };
+	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: new colorjs_io.default("oklch", [
+			baseLightness,
+			(light.base.oklch.c || 0) * chromaScale,
+			light.base.oklch.h || 0
+		]),
+		foreground: new colorjs_io.default("oklch", [
+			fgLightness,
+			(light.foreground.oklch.c || 0) * chromaScale,
+			light.foreground.oklch.h || 0
+		])
+	};
 }
+/**
+* Merge auto-derived dark colors with any user-specified overrides.
+* For each semantic color, if the user has fully overridden both base and
+* foreground those are used; otherwise the missing channels are derived.
+*/
 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;
+	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;
+	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;
 }
+/**
+* Resolve a ThemeDefinition into a complete ResolvedTheme.
+* Dark mode colors are derived from light where not overridden.
+*/
 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 }
-  };
+	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)"
+//#endregion
+//#region src/theme/tailwind-overrides.ts
+/**
+* Specific overrides, otherwise all the overrides are generated using emitTailwindOverrides
+*/
+const OVERRIDES = {
+	"--color-gray-50": "var(--color-muted)",
+	"--color-gray-100": "var(--color-muted-600)",
+	"--color-gray-200": "var(--color-border)"
 };
+/**
+* Returns the inverted shade for dark mode foreground colors.
+* In dark mode, light shades (50, 100) should map to dark values (950, 900) and vice versa.
+*/
 function getInvertedStep(shade) {
-  const shadeIndex = SHADE_STEPS.indexOf(shade);
-  const invertedIndex = SHADE_STEPS.length - 1 - shadeIndex;
-  return SHADE_STEPS[invertedIndex] || 500;
+	const shadeIndex = SHADE_STEPS.indexOf(shade);
+	return SHADE_STEPS[SHADE_STEPS.length - 1 - shadeIndex] || 500;
 }
+/**
+* Map semantic colors to Tailwind built-in color names.
+*/
 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;
+	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
+//#endregion
+//#region 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;
+	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();
+	return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
+/**
+* Emit --color-{name}, --color-{name}-foreground, --color-{name}-{shade} vars.
+* Uses --color- prefix to match rep-widgets/tailwind.config.ts.
+*/
 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;
+	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;
 }
+/**
+* Emit non-color CSS variables (font sizes, families, spacing, radii).
+*/
 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;
+	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);"
+/**
+* Static CSS alias variables that bridge theme var names to Tailwind/component conventions.
+* These are always emitted and not mode-dependent.
+*/
+const globalCSSOverride = [
+	"--color-background-foreground: var(--color-foreground);",
+	"--color-foreground-foreground: var(--color-background);",
+	"--color-contrast: var(--color-foreground);",
+	...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);",
+	"--font-mono: var(--font-header);"
 ];
-var globalDarkCSSOverride = ["--border: var(--color-background-400);"];
+/**
+* Overrides for global tailwindcss for specifically dark mode.
+*/
+const globalDarkCSSOverride = ["--border: var(--color-background-400);"];
+/**
+* Generate a complete CSS string for a resolved theme.
+* Outputs 2–3 blocks: light default, dark explicit via `[data-theme-mode="dark"]`,
+* and (unless `disableAutoTheme`) a `prefers-color-scheme: dark` media query block.
+*/
 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");
+	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",
-  large: "1.125rem",
-  extraLarge: "1.25rem",
-  giant: "1.5rem"
+//#endregion
+//#region src/theme/defaults.ts
+const DEFAULT_FONT_SIZES = {
+	extraSmall: "0.75rem",
+	small: "0.875rem",
+	regular: "1rem",
+	large: "1.125rem",
+	extraLarge: "1.25rem",
+	giant: "1.5rem"
 };
-var DEFAULT_FONT_FAMILIES = {
-  header: "var(--font-inter)",
-  body: "var(--font-inter)"
+const DEFAULT_FONT_FAMILIES = {
+	header: "var(--font-inter)",
+	body: "var(--font-inter)"
 };
-var DEFAULT_SPACING = "0.25rem";
-var DEFAULT_RADII = {
-  small: "0.25rem",
-  medium: "0.5rem",
-  large: "0.75rem",
-  extraLarge: "1rem"
+const DEFAULT_SPACING = "0.25rem";
+const DEFAULT_RADII = {
+	small: "0.25rem",
+	medium: "0.5rem",
+	large: "0.75rem",
+	extraLarge: "1rem"
 };
-var DEFAULT_COLORS = {
-  background: "#ffffff",
-  foreground: "#1a1a1a",
-  primary: "#3b82f6",
-  secondary: "#6b7280",
-  accent: "#10b981",
-  muted: "#f3f4f6",
-  destructive: "#ef4444",
-  mutedForeground: "#6b7280"
+const DEFAULT_COLORS = {
+	background: "#ffffff",
+	foreground: "#1a1a1a",
+	primary: "#3b82f6",
+	secondary: "#6b7280",
+	accent: "#10b981",
+	muted: "#f3f4f6",
+	destructive: "#ef4444",
+	mutedForeground: "#6b7280"
 };
-var DEFAULT_THEME_ID = "default";
-var DEFAULT_THEME_NAME = "Default Theme";
+const DEFAULT_THEME_ID = "default";
+const DEFAULT_THEME_NAME = "Default Theme";
+/**
+* Build a fresh ThemeDefinition populated with all defaults.
+* Returns a new object each call because Color instances are mutable — do not cache the result.
+*/
 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 {
-    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 }
-  };
+	const bg = new colorjs_io.default(DEFAULT_COLORS.background);
+	const fg = new colorjs_io.default(DEFAULT_COLORS.foreground);
+	const primary = new colorjs_io.default(DEFAULT_COLORS.primary);
+	const secondary = new colorjs_io.default(DEFAULT_COLORS.secondary);
+	const accent = new colorjs_io.default(DEFAULT_COLORS.accent);
+	const muted = new colorjs_io.default(DEFAULT_COLORS.muted);
+	const destructive = new colorjs_io.default(DEFAULT_COLORS.destructive);
+	const mutedFg = new colorjs_io.default(DEFAULT_COLORS.mutedForeground);
+	const darkBg = new colorjs_io.default("#0a0a0a");
+	const darkFg = new colorjs_io.default("#fafafa");
+	const darkMuted = new colorjs_io.default("#171717");
+	const darkMutedForeground = new colorjs_io.default("#dddddd");
+	return {
+		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 }
+	};
 }
-
-// src/theme/serialisation.ts
+//#endregion
+//#region src/theme/serialisation.ts
 function colorToPlain(color) {
-  return {
-    l: color.oklch.l ?? 0,
-    c: color.oklch.c ?? 0,
-    h: color.oklch.h ?? 0
-  };
+	return {
+		l: color.oklch.l ?? 0,
+		c: color.oklch.c ?? 0,
+		h: color.oklch.h ?? 0
+	};
 }
 function plainToColor(plain) {
-  return new Color2__default.default("oklch", [plain.l, plain.c, plain.h]);
+	return new colorjs_io.default("oklch", [
+		plain.l,
+		plain.c,
+		plain.h
+	]);
 }
+/**
+* Serialise a ThemeDefinition (with Color objects) to a plain JSON payload
+* suitable for backend storage.
+*/
 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 {
-    id: def.id,
-    name: def.name,
-    light,
-    dark,
-    fontSizes: { ...def.fontSizes },
-    fontFamilies: { ...def.fontFamilies },
-    spacing: def.spacing,
-    radii: { ...def.radii },
-    ...def.syncWithBrandColors ? { syncWithBrandColors: true } : {}
-  };
+	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 {
+		id: def.id,
+		name: def.name,
+		light,
+		dark,
+		fontSizes: { ...def.fontSizes },
+		fontFamilies: { ...def.fontFamilies },
+		spacing: def.spacing,
+		radii: { ...def.radii },
+		...def.syncWithBrandColors ? { syncWithBrandColors: true } : {}
+	};
 }
+/**
+* Deserialise a backend payload into a ThemeDefinition with Color objects.
+* Accepts `Record<string, unknown>` because API data is untyped at the boundary.
+* Falls back to default colors for any missing light-mode entries.
+*/
 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 {
-    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,
-    ...payload.syncWithBrandColors === true ? { syncWithBrandColors: true } : {}
-  };
+	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 {
+		id: payload.id,
+		name: payload.name,
+		light,
+		dark,
+		fontSizes: payload.fontSizes ?? DEFAULT_FONT_SIZES,
+		fontFamilies: payload.fontFamilies ?? DEFAULT_FONT_FAMILIES,
+		spacing: payload.spacing ?? "0.25rem",
+		radii: payload.radii ?? DEFAULT_RADII,
+		...payload.syncWithBrandColors === true ? { syncWithBrandColors: true } : {}
+	};
 }
-
-// src/theme/transforms.ts
+//#endregion
+//#region src/theme/transforms.ts
+/**
+* Check if a theme config uses the new structured format (has a `light` key
+* that is an object) vs the legacy flat format.
+*/
 function isNewThemeFormat(config) {
-  return config.light != null && typeof config.light === "object";
+	return config.light != null && typeof config.light === "object";
 }
+/**
+* Convert a legacy flat config to a ThemeDefinition.
+* Legacy format: { base: "#fff", text: "#000", primary: "oklch(0.6 0.2 250)", ... }
+*/
 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 {
-    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
-    }
-  };
+	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 {
+		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 ?? "0.25rem",
+		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
+		}
+	};
 }
+/**
+* Build a ThemeDefinition from a single API theme object.
+* Handles both new structured format and legacy flat format.
+*/
 function buildThemeDefinition(theme) {
-  const config = theme.config ?? {};
-  if (isNewThemeFormat(config)) {
-    return deserialiseTheme({
-      ...config,
-      id: String(theme.id),
-      name: theme.name ?? "Untitled Theme"
-    });
-  }
-  return legacyConfigToDefinition(
-    theme.id,
-    theme.name ?? "Untitled Theme",
-    config
-  );
+	const config = theme.config ?? {};
+	if (isNewThemeFormat(config)) return deserialiseTheme({
+		...config,
+		id: String(theme.id),
+		name: theme.name ?? "Untitled Theme"
+	});
+	return legacyConfigToDefinition(theme.id, theme.name ?? "Untitled Theme", config);
 }
+/**
+* Transform raw API themes to ThemeDefinition[].
+* Catches and logs errors per theme (graceful degradation).
+*/
 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 [];
-    }
-  });
+	return themes.flatMap((theme) => {
+		try {
+			return [buildThemeDefinition(theme)];
+		} catch (error) {
+			console.error(`[theme] Failed to build theme id=${theme.id}:`, error);
+			return [];
+		}
+	});
 }
+/**
+* Get the active theme ID from a list of raw API themes.
+* Falls back to the first theme if none is marked active.
+*/
 function getActiveThemeId(themes) {
-  const active = themes.find((t) => t.active) ?? themes[0];
-  return active ? String(active.id) : void 0;
+	const active = themes.find((t) => t.active) ?? themes[0];
+	return active ? String(active.id) : void 0;
 }
-
-// src/theme/theme-applicator.ts
-var STYLE_PREFIX = "theme-style-";
+//#endregion
+//#region src/theme/theme-applicator.ts
+const STYLE_PREFIX = "theme-style-";
+/**
+* Inject or update a `<style>` element in `<head>` for the given theme.
+* The element ID is deterministic (`theme-style-{themeId}`) so repeated calls
+* for the same theme are idempotent — the existing element is updated in place.
+* No-op when `document` is unavailable (SSR).
+*/
 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);
-  }
+	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);
+	}
 }
+/** Remove an injected theme stylesheet. No-op during SSR. */
 function removeTheme(themeId) {
-  if (typeof document === "undefined") return;
-  document.getElementById(`${STYLE_PREFIX}${themeId}`)?.remove();
+	if (typeof document === "undefined") return;
+	document.getElementById(`${STYLE_PREFIX}${themeId}`)?.remove();
 }
+/** Remove all injected theme stylesheets. No-op during SSR. */
 function removeAllThemes() {
-  if (typeof document === "undefined") return;
-  document.querySelectorAll(`style[id^="${STYLE_PREFIX}"]`).forEach((el) => el.remove());
+	if (typeof document === "undefined") return;
+	document.querySelectorAll(`style[id^="${STYLE_PREFIX}"]`).forEach((el) => el.remove());
 }
-
+//#endregion
 exports.DEFAULT_COLORS = DEFAULT_COLORS;
 exports.DEFAULT_FONT_FAMILIES = DEFAULT_FONT_FAMILIES;
 exports.DEFAULT_FONT_SIZES = DEFAULT_FONT_SIZES;
@@ -640,5 +754,5 @@ exports.removeTheme = removeTheme;
 exports.resolveTheme = resolveTheme;
 exports.serialiseTheme = serialiseTheme;
 exports.transformThemes = transformThemes;
-//# sourceMappingURL=index.cjs.map
+
 //# sourceMappingURL=index.cjs.map