@fluid-app/portal-core 0.1.16

package/dist/theme/index.cjs

@@ -0,0 +1,758 @@
+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"
+];
+const SHADE_STEPS = [
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+];
+const FONT_SIZE_KEYS = [
+	"extraSmall",
+	"small",
+	"regular",
+	"large",
+	"extraLarge",
+	"giant"
+];
+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 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;
+	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 >= .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)
+	};
+}
+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(.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 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;
+}
+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;
+}
+/**
+* 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 }
+	};
+}
+//#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);
+	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;
+}
+//#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;
+}
+function camelToKebab(str) {
+	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 portal-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;
+}
+/**
+* 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;
+}
+/**
+* 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);"
+];
+/**
+* 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");
+}
+//#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"
+};
+const DEFAULT_FONT_FAMILIES = {
+	header: "var(--font-inter)",
+	body: "var(--font-inter)"
+};
+const DEFAULT_SPACING = "0.25rem";
+const DEFAULT_RADII = {
+	small: "0.25rem",
+	medium: "0.5rem",
+	large: "0.75rem",
+	extraLarge: "1rem"
+};
+const DEFAULT_COLORS = {
+	background: "#ffffff",
+	foreground: "#1a1a1a",
+	primary: "#3b82f6",
+	secondary: "#6b7280",
+	accent: "#10b981",
+	muted: "#f3f4f6",
+	destructive: "#ef4444",
+	mutedForeground: "#6b7280"
+};
+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 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 }
+	};
+}
+//#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
+	};
+}
+function plainToColor(plain) {
+	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 } : {}
+	};
+}
+/**
+* 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 ?? "0.25rem",
+		radii: payload.radii ?? DEFAULT_RADII,
+		...payload.syncWithBrandColors === true ? { syncWithBrandColors: true } : {}
+	};
+}
+//#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";
+}
+/**
+* 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 ?? "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);
+}
+/**
+* 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 [];
+		}
+	});
+}
+/**
+* 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;
+}
+//#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);
+	}
+}
+/** Remove an injected theme stylesheet. No-op during SSR. */
+function removeTheme(themeId) {
+	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());
+}
+//#endregion
+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.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.mergeDarkOverrides = mergeDarkOverrides;
+exports.parseColor = parseColor;
+exports.removeAllThemes = removeAllThemes;
+exports.removeTheme = removeTheme;
+exports.resolveTheme = resolveTheme;
+exports.serialiseTheme = serialiseTheme;
+exports.transformThemes = transformThemes;
+
+//# sourceMappingURL=index.cjs.map