@fluid-app/portal-sdk 0.1.199 → 0.1.201

package/dist/src-BjCPR0aG.mjs

@@ -0,0 +1,788 @@
+import { createContext, useContext } from "react";
+import Color from "colorjs.io";
+//#region ../../store/core/src/countries-api-context.ts
+const CountriesApiContext = createContext(null);
+const CountriesApiProvider = CountriesApiContext.Provider;
+function useCountriesApi() {
+	const api = useContext(CountriesApiContext);
+	if (!api) throw new Error("useCountriesApi must be used within a CountriesApiProvider");
+	return api;
+}
+//#endregion
+//#region ../../platform/theme-engine/src/types.ts
+const SEMANTIC_COLOR_NAMES = [
+	"background",
+	"foreground",
+	"primary",
+	"secondary",
+	"accent",
+	"muted",
+	"destructive"
+];
+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 ../../platform/theme-engine/src/color-engine.ts
+const BARE_HEX_RE = /^[0-9a-fA-F]{6}$/;
+/**
+* Attempt to convert any string into a Color using colorjs.io.
+* If the string is exactly 6 hex digits it is assumed to be a bare hex value
+* (e.g. "3b82f6") and a "#" prefix is added before parsing. Six-letter
+* named colours like "orange" or "maroon" are left untouched.
+*
+* @returns the parsed Color, or a neutral gray (`oklch(0.5 0 0)`) on failure
+*/
+function parseColor(value) {
+	if (BARE_HEX_RE.test(value)) value = `#${value}`;
+	try {
+		return new Color(value);
+	} catch (error) {
+		console.warn("[theme] Failed to parse color:", value, error);
+		return new Color("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 — APCA is signed
+* (negative for dark-on-light, positive for light-on-dark), so comparing the
+* absolute value avoids flipping dark text that already contrasts well on a
+* medium background.
+*/
+function getForegroundColor(foreground, color) {
+	if (foreground.oklch.l == null || color.oklch.l == null) return foreground;
+	const contrast = color.contrastAPCA(foreground);
+	if (Math.abs(contrast) < 50) return new Color("oklch", [
+		color.oklch.l < .7 ? .95 : .15,
+		foreground.oklch.c || 0,
+		foreground.oklch.h || 0
+	]);
+	return foreground;
+}
+/**
+* Convenience helper: given a background color string, return a CSS color
+* string for text overlaid on it. Uses APCA contrast to pick between
+* near-black and near-white. Returns `null` when the background cannot be
+* parsed (e.g. a CSS custom property reference like `var(--color-muted)` or
+* a malformed value), so callers can fall back to their theme foreground.
+*/
+function getContrastingTextColor(background) {
+	const normalised = BARE_HEX_RE.test(background) ? `#${background}` : background;
+	let bg;
+	try {
+		bg = new Color(normalised);
+	} catch {
+		return null;
+	}
+	return getForegroundColor(new Color("oklch", [
+		.15,
+		0,
+		0
+	]), bg).toString({ format: "oklch" });
+}
+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 Color("oklch", [
+			baseLightness,
+			(light.base.oklch.c || 0) * chromaScale,
+			light.base.oklch.h || 0
+		]),
+		foreground: new Color("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];
+		resolved[name] = {
+			base: input.base.clone(),
+			foreground: input.foreground.clone()
+		};
+	}
+	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 ../../platform/theme-engine/src/tailwind-overrides.ts
+const OVERRIDES = {
+	"--color-gray-50": "var(--color-muted)",
+	"--color-gray-100": "color-mix(in oklch, var(--color-muted), var(--color-foreground) 15%)",
+	"--color-gray-200": "var(--color-border)"
+};
+/**
+* Map Tailwind built-in color names to semantic theme colors using color-mix
+* for shade interpolation. Each shade maps to a percentage of the semantic
+* color mixed with transparent, so shades naturally adapt to both light and
+* dark modes without inversion logic.
+*/
+function emitTailwindOverrides() {
+	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 lines = [];
+	for (const [twName, semantic] of Object.entries(TAILWIND_COLOR_MAP)) for (const shade of TAILWIND_SHADES) {
+		const override = OVERRIDES[`--color-${twName}-${shade}`];
+		if (override) lines.push(`--color-${twName}-${shade}: ${override};`);
+		else {
+			const percent = Math.max(10, Math.min(Math.round(shade / 10), 100));
+			lines.push(`--color-${twName}-${shade}: color-mix(in oklch, var(--color-${semantic}) ${percent}%, transparent);`);
+		}
+	}
+	lines.push("--color-white: var(--color-background);");
+	lines.push("--color-black: var(--color-foreground);");
+	return lines;
+}
+//#endregion
+//#region ../../platform/theme-engine/src/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} and --color-{name}-foreground 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)};`);
+	}
+	return lines;
+}
+/**
+* Format a font family value for CSS output.
+* - If the value starts with "var(" (legacy), pass through as-is
+* - If the value already contains a comma (has fallback), pass through as-is
+* - Otherwise, wrap in quotes and append a generic sans-serif fallback
+*/
+function formatFontFamily(value) {
+	if (value.startsWith("var(")) return value;
+	if (value.includes(",")) return value;
+	return `'${value}', sans-serif`;
+}
+/**
+* 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}: ${formatFontFamily(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: color-mix(in oklch, var(--color-background), var(--color-foreground) 15%);",
+	"--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);"
+];
+/**
+* Overrides for global tailwindcss for specifically dark mode.
+*/
+const globalDarkCSSOverride = ["--border: color-mix(in oklch, var(--color-background), var(--color-foreground) 15%);"];
+/**
+* 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());
+	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().map((l) => `${l}`));
+		blocks.push(`}`);
+		blocks.push(`}`);
+	}
+	return blocks.join("\n");
+}
+//#endregion
+//#region ../../platform/theme-engine/src/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: "Inter",
+	body: "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 Color(DEFAULT_COLORS.background);
+	const fg = new Color(DEFAULT_COLORS.foreground);
+	const primary = new Color(DEFAULT_COLORS.primary);
+	const secondary = new Color(DEFAULT_COLORS.secondary);
+	const accent = new Color(DEFAULT_COLORS.accent);
+	const muted = new Color(DEFAULT_COLORS.muted);
+	const destructive = new Color(DEFAULT_COLORS.destructive);
+	const mutedFg = new Color(DEFAULT_COLORS.mutedForeground);
+	const darkBg = new Color("#0a0a0a");
+	const darkFg = new Color("#fafafa");
+	const darkMuted = new Color("#171717");
+	const darkMutedForeground = new Color("#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 ../../platform/theme-engine/src/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 Color("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 ../../platform/theme-engine/src/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 ../../platform/theme-engine/src/theme-applicator.ts
+const STYLE_PREFIX = "theme-style-";
+const FONT_LINK_PREFIX = "theme-font-";
+const SYSTEM_FONTS = new Set([
+	"sans-serif",
+	"serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-sans-serif",
+	"ui-serif",
+	"ui-monospace"
+]);
+/** Build a Google Fonts CSS2 URL for a given font family with all weights. */
+function buildGoogleFontUrl(family) {
+	return `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family).replace(/%20/g, "+")}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
+}
+/** Check if a font family value needs to be loaded (i.e. is not a CSS var or system font). */
+function isLoadableFont(value) {
+	if (!value) return false;
+	if (value.startsWith("var(")) return false;
+	return !SYSTEM_FONTS.has(value.toLowerCase());
+}
+/** Deterministic link element ID for a font family. */
+function fontLinkId(family) {
+	return `${FONT_LINK_PREFIX}${family.replace(/\s+/g, "-").toLowerCase()}`;
+}
+/**
+* Inject or update `<link>` elements for Google Fonts used by the theme.
+* Removes links for fonts that are no longer referenced.
+*/
+function loadThemeFonts(theme) {
+	if (typeof document === "undefined") return;
+	const fontsToLoad = /* @__PURE__ */ new Set();
+	for (const key of FONT_FAMILY_KEYS) {
+		const value = theme.fontFamilies[key];
+		if (isLoadableFont(value)) fontsToLoad.add(value);
+	}
+	document.querySelectorAll(`link[id^="${FONT_LINK_PREFIX}"]`).forEach((link) => {
+		const owners = link.getAttribute("data-font-theme-ids")?.split(",") ?? [];
+		if (!owners.includes(theme.id)) return;
+		const fontName = link.getAttribute("data-font-family");
+		if (fontName && !fontsToLoad.has(fontName)) {
+			const remaining = owners.filter((id) => id !== theme.id);
+			if (remaining.length === 0) link.remove();
+			else link.setAttribute("data-font-theme-ids", remaining.join(","));
+		}
+	});
+	for (const family of fontsToLoad) {
+		const id = fontLinkId(family);
+		const existing = document.getElementById(id);
+		if (existing) {
+			const owners = existing.getAttribute("data-font-theme-ids")?.split(",") ?? [];
+			if (!owners.includes(theme.id)) existing.setAttribute("data-font-theme-ids", [...owners, theme.id].join(","));
+		} else {
+			const link = document.createElement("link");
+			link.id = id;
+			link.rel = "stylesheet";
+			link.href = buildGoogleFontUrl(family);
+			link.setAttribute("data-font-family", family);
+			link.setAttribute("data-font-theme-ids", theme.id);
+			document.head.appendChild(link);
+		}
+	}
+}
+/** Remove all font `<link>` elements injected by the theme system. */
+function removeAllFontLinks() {
+	if (typeof document === "undefined") return;
+	document.querySelectorAll(`link[id^="${FONT_LINK_PREFIX}"]`).forEach((el) => el.remove());
+}
+/**
+* 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.
+* Also loads Google Fonts referenced by the theme's font families.
+* No-op when `document` is unavailable (SSR).
+*/
+function applyTheme(theme, options) {
+	if (typeof document === "undefined") return;
+	try {
+		loadThemeFonts(theme);
+		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 and clean up font link ownership. No-op during SSR. */
+function removeTheme(themeId) {
+	if (typeof document === "undefined") return;
+	document.getElementById(`${STYLE_PREFIX}${themeId}`)?.remove();
+	document.querySelectorAll(`link[id^="${FONT_LINK_PREFIX}"]`).forEach((link) => {
+		const remaining = (link.getAttribute("data-font-theme-ids")?.split(",") ?? []).filter((id) => id !== themeId);
+		if (remaining.length === 0) link.remove();
+		else link.setAttribute("data-font-theme-ids", remaining.join(","));
+	});
+}
+/** Remove all injected theme stylesheets and font links. No-op during SSR. */
+function removeAllThemes() {
+	if (typeof document === "undefined") return;
+	document.querySelectorAll(`style[id^="${STYLE_PREFIX}"]`).forEach((el) => el.remove());
+	removeAllFontLinks();
+}
+//#endregion
+export { resolveTheme as C, SEMANTIC_COLOR_NAMES as D, RADIUS_KEYS as E, CountriesApiProvider as O, parseColor as S, FONT_SIZE_KEYS as T, generateThemeCSS as _, getActiveThemeId as a, getForegroundColor as b, serialiseTheme as c, DEFAULT_FONT_SIZES as d, DEFAULT_RADII as f, getDefaultThemeDefinition as g, DEFAULT_THEME_NAME as h, buildThemeDefinition as i, useCountriesApi as k, DEFAULT_COLORS as l, DEFAULT_THEME_ID as m, removeAllThemes as n, transformThemes as o, DEFAULT_SPACING as p, removeTheme as r, deserialiseTheme as s, applyTheme as t, DEFAULT_FONT_FAMILIES as u, deriveDarkVariant as v, FONT_FAMILY_KEYS as w, mergeDarkOverrides as x, getContrastingTextColor as y };
+
+//# sourceMappingURL=src-BjCPR0aG.mjs.map