@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/theme/PublicThemeHead.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { themePresetStylesheetHref } from "./preset-stylesheet.js";
+/** Public palette delivery; deferred keeps baseline content usable during asset outages. */
+let { assetsOrigin, strategy = "blocking" } = $props();
+function applyLoadedStylesheet(link) {
+	const apply = () => {
+		link.media = "all";
+	};
+	// A cached sheet may finish before hydration attaches its load listener.
+	if (link.sheet) apply();
+	link.addEventListener("load", apply);
+	return () => link.removeEventListener("load", apply);
+}
+</script>
+
+<svelte:head>
+	{#key assetsOrigin}
+		<link
+			rel="stylesheet"
+			href={`${assetsOrigin.replace(/\/$/, '')}/fonts/eb-garamond/f713d05dd5ce8e0d.css`}
+			media={strategy === 'deferred' ? 'print' : undefined}
+			{@attach strategy === 'deferred' ? applyLoadedStylesheet : undefined}
+		/>
+		<link
+			rel="stylesheet"
+			href={themePresetStylesheetHref(assetsOrigin, 'vibes')}
+			media={strategy === 'deferred' ? 'print' : undefined}
+			data-vibes-public-theme
+			{@attach strategy === 'deferred' ? applyLoadedStylesheet : undefined}
+		/>
+	{/key}
+</svelte:head>

package/dist/lib/components/theme/PublicThemeHead.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    assetsOrigin: string;
+    strategy?: 'blocking' | 'deferred';
+};
+declare const PublicThemeHead: import("svelte").Component<$$ComponentProps, {}, "">;
+type PublicThemeHead = ReturnType<typeof PublicThemeHead>;
+export default PublicThemeHead;

package/dist/lib/components/theme/ThemeColorSelector.svelte

@@ -0,0 +1,483 @@
+<script lang="ts">import { BROWSER } from "esm-env";
+import * as Tabs from "../ui/tabs";
+import * as Collapsible from "../ui/collapsible";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Switch } from "../ui/switch";
+import { Icon } from "../icon";
+import { settleNow } from "../../attempt";
+import { failureClass } from "../../failure-class";
+import { kitLogger } from "../../kit-logger";
+import { DEFAULT_LIGHT_COLORS, DEFAULT_DARK_COLORS, COLOR_GROUPS, parseThemeColors, generateThemeCSS, sanitizeInjectedCSS } from "./theme-colors";
+import { normalizeThemePresets, serializeThemePresets, createCustomThemePreset } from "./theme-presets";
+const logger = kitLogger("vibeskit-theme-color-selector");
+let { value = "", customCss = "", presetsValue = "", onchange, onCustomCssChange, onPresetsChange } = $props();
+function createInitialColors() {
+	return parseThemeColors(value || null);
+}
+function createInitialCustomCss() {
+	return customCss;
+}
+function createInitialPresets() {
+	return normalizeThemePresets(presetsValue || null);
+}
+const LIVE_PREVIEW_STYLE_ID = "vibes-theme-selector-live-preview";
+let colors = $state(createInitialColors());
+let presets = $state(createInitialPresets());
+let advancedOpen = $state(false);
+let localCustomCss = $state(createInitialCustomCss());
+let presetName = $state("");
+let generatedCSS = $derived(generateThemeCSS(colors, localCustomCss));
+let selectedPresetId = $derived.by(() => {
+	const currentColors = JSON.stringify(colors);
+	const currentCustomCss = localCustomCss.trim();
+	const matchingPreset = presets.find((preset) => {
+		return JSON.stringify(preset.colors) === currentColors && (preset.customCss ?? "").trim() === currentCustomCss;
+	});
+	return matchingPreset?.id ?? "";
+});
+function getLivePreviewStyleElement() {
+	if (!BROWSER) return null;
+	const existing = document.getElementById(LIVE_PREVIEW_STYLE_ID);
+	let style = existing instanceof HTMLStyleElement ? existing : null;
+	if (!style) {
+		style = document.createElement("style");
+		style.id = LIVE_PREVIEW_STYLE_ID;
+		document.head.appendChild(style);
+	}
+	return style;
+}
+function removeLivePreviewStyleElement() {
+	if (!BROWSER) return;
+	const style = document.getElementById(LIVE_PREVIEW_STYLE_ID);
+	style?.remove();
+}
+function buildPresetVariablesStyle(preset, mode) {
+	const palette = preset.colors[mode];
+	return Object.entries(palette).map(([key, value]) => `${key}: ${value};`).join(" ");
+}
+$effect(() => {
+	return () => removeLivePreviewStyleElement();
+});
+$effect(() => {
+	onchange(JSON.stringify(colors));
+});
+$effect(() => {
+	onCustomCssChange(localCustomCss);
+});
+$effect(() => {
+	onPresetsChange?.(serializeThemePresets(presets));
+});
+$effect(() => {
+	const style = getLivePreviewStyleElement();
+	if (!style) return;
+	style.textContent = sanitizeInjectedCSS(generateThemeCSS(colors, localCustomCss));
+});
+function setColor(mode, key, val) {
+	colors = {
+		...colors,
+		[mode]: {
+			...colors[mode],
+			[key]: val
+		}
+	};
+}
+function resetColor(mode, key) {
+	const defaults = mode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS;
+	setColor(mode, key, defaults[key] ?? "");
+}
+function resetAll() {
+	colors = {
+		light: { ...DEFAULT_LIGHT_COLORS },
+		dark: { ...DEFAULT_DARK_COLORS }
+	};
+	localCustomCss = "";
+}
+function cssColorToHex(cssValue) {
+	if (!BROWSER || !cssValue.trim()) return "#000000";
+	const converted = settleNow(() => {
+		const el = document.createElement("div");
+		el.style.display = "none";
+		document.body.appendChild(el);
+		try {
+			el.style.color = cssValue;
+			const computed = getComputedStyle(el).color;
+			const match = computed.match(/rgba?\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)/);
+			if (!match) return "#000000";
+			const r = Math.round(parseFloat(match[1])).toString(16).padStart(2, "0");
+			const g = Math.round(parseFloat(match[2])).toString(16).padStart(2, "0");
+			const b = Math.round(parseFloat(match[3])).toString(16).padStart(2, "0");
+			return `#${r}${g}${b}`;
+		} finally {
+			el.remove();
+		}
+	});
+	if (converted.ok) return converted.value;
+	logger.warn("Theme color conversion failed", { reason: failureClass(converted.error) });
+	return "#000000";
+}
+function handlePickerClick(event, _mode, _key, currentValue) {
+	openColorPicker(event.currentTarget, currentValue);
+}
+function openColorPicker(target, currentValue) {
+	const input = target.querySelector("input[type=\"color\"]");
+	if (!input) return;
+	input.value = cssColorToHex(currentValue);
+	input.click();
+}
+function applyPreset(preset) {
+	colors = {
+		light: { ...preset.colors.light },
+		dark: { ...preset.colors.dark }
+	};
+	localCustomCss = preset.customCss ?? "";
+}
+function setPresetEnabled(id, enabled) {
+	presets = presets.map((preset) => preset.id === id ? {
+		...preset,
+		enabled
+	} : preset);
+}
+function deleteCustomPreset(id) {
+	presets = presets.filter((preset) => preset.id !== id);
+}
+function saveCurrentAsPreset() {
+	const name = presetName.trim();
+	if (!name) return;
+	const customPreset = createCustomThemePreset(name, colors, localCustomCss);
+	presets = [...presets, customPreset];
+	presetName = "";
+}
+import AiThemeCustomizer from "./AiThemeCustomizer.svelte";
+function applyGeneratedAiTheme(newColors, newCustomCss, name) {
+	colors = newColors;
+	localCustomCss = newCustomCss;
+	onchange(JSON.stringify(colors));
+	onCustomCssChange(localCustomCss);
+	if (name) {
+		const customPreset = createCustomThemePreset(name, colors, localCustomCss);
+		presets = [...presets, customPreset];
+	}
+}
+</script>
+
+<div class="space-y-4">
+	<div class="flex items-center justify-between">
+		<div>
+			<p class="text-sm text-muted-foreground">
+				Apply a shadcn-style preset, generate custom aesthetics via AI prompt, or fine-tune color
+				variables.
+			</p>
+		</div>
+		<Button variant="outline" size="sm" onclick={resetAll} class="gap-1.5">
+			<Icon icon="lucide:rotate-ccw" class="h-3.5 w-3.5" />
+			Reset to Defaults
+		</Button>
+	</div>
+
+	<!-- AI Theme Studio -->
+	<AiThemeCustomizer isPaidUser={true} onApplyTheme={applyGeneratedAiTheme} />
+
+	<div class="space-y-3">
+		<div class="flex flex-col gap-2 sm:flex-row sm:items-end">
+			<div class="min-w-0 flex-1 space-y-1">
+				<Label for="theme-preset-name">Save Current Theme As Preset</Label>
+				<Input
+					id="theme-preset-name"
+					placeholder="e.g. Walnut Night"
+					value={presetName}
+					oninput={(event) => {
+						presetName = event.currentTarget.value;
+					}}
+				/>
+			</div>
+			<Button
+				type="button"
+				class="gap-1.5"
+				disabled={!presetName.trim()}
+				onclick={saveCurrentAsPreset}
+			>
+				<Icon icon="lucide:plus" class="h-3.5 w-3.5" />
+				Save Preset
+			</Button>
+		</div>
+		<div class="space-y-3">
+			{#each presets as preset (preset.id)}
+				<div
+					class={`space-y-3 rounded-lg border p-3 ${
+						selectedPresetId === preset.id ? 'border-primary bg-primary/5' : 'border-border'
+					}`}
+				>
+					<div class="flex items-start justify-between gap-2">
+						<div class="min-w-0">
+							<p class="truncate text-sm font-semibold">{preset.name}</p>
+							<p class="text-xs text-muted-foreground">{preset.description}</p>
+						</div>
+						{#if !preset.builtIn}
+							<Button
+								type="button"
+								variant="ghost"
+								size="icon"
+								class="h-7 w-7"
+								onclick={(event) => {
+									event.stopPropagation();
+									deleteCustomPreset(preset.id);
+								}}
+								title="Delete custom preset"
+							>
+								<Icon icon="lucide:trash-2" class="h-3.5 w-3.5" />
+							</Button>
+						{/if}
+					</div>
+
+					<div class="grid gap-2 md:grid-cols-2">
+						<button
+							type="button"
+							class="w-full rounded-md border p-2 text-left transition-colors hover:border-primary/60"
+							style={`${buildPresetVariablesStyle(preset, 'light')} background-color: var(--background); border-color: var(--border); color: var(--foreground);`}
+							onclick={() => applyPreset(preset)}
+						>
+							<div class="mb-1 text-[10px] font-semibold tracking-wide uppercase">Light</div>
+							<div
+								class="rounded-md border bg-card p-2"
+								style="background-image: linear-gradient(145deg, color-mix(in srgb, var(--card) 86%, white 14%) 0%, var(--card) 100%); border-color: var(--border); color: var(--card-foreground);"
+							>
+								<p
+									class="text-[11px] leading-tight font-semibold"
+									style="color: var(--foreground);"
+								>
+									Dashboard Overview
+								</p>
+								<p class="text-[10px] leading-tight" style="color: var(--muted-foreground);">
+									System analytics and status
+								</p>
+								<p
+									class="mt-1 max-h-8 overflow-hidden text-[10px] leading-snug"
+									style="color: var(--muted-foreground);"
+								>
+									Realtime usage trends with contrast-tuned foreground and accent surfaces.
+								</p>
+								<div class="mt-2 flex items-center gap-1.5">
+									<span
+										class="rounded px-2 py-1 text-[10px] font-medium"
+										style="background-color: var(--primary); color: var(--primary-foreground);"
+									>
+										Primary
+									</span>
+									<span
+										class="rounded border px-2 py-1 text-[10px] font-medium"
+										style="background-color: var(--secondary); color: var(--secondary-foreground); border-color: var(--border);"
+									>
+										Secondary
+									</span>
+								</div>
+							</div>
+						</button>
+
+						<button
+							type="button"
+							class="w-full rounded-md border p-2 text-left transition-colors hover:border-primary/60"
+							style={`${buildPresetVariablesStyle(preset, 'dark')} background-color: var(--background); border-color: var(--border); color: var(--foreground);`}
+							onclick={() => applyPreset(preset)}
+						>
+							<div class="mb-1 text-[10px] font-semibold tracking-wide uppercase">Dark</div>
+							<div
+								class="rounded-md border bg-card p-2"
+								style="background-image: linear-gradient(145deg, color-mix(in srgb, var(--card) 82%, black 18%) 0%, var(--card) 100%); border-color: var(--border); color: var(--card-foreground);"
+							>
+								<p
+									class="text-[11px] leading-tight font-semibold"
+									style="color: var(--foreground);"
+								>
+									Dashboard Overview
+								</p>
+								<p class="text-[10px] leading-tight" style="color: var(--muted-foreground);">
+									System analytics and status
+								</p>
+								<p
+									class="mt-1 max-h-8 overflow-hidden text-[10px] leading-snug"
+									style="color: var(--muted-foreground);"
+								>
+									Realtime usage trends with contrast-tuned foreground and accent surfaces.
+								</p>
+								<div class="mt-2 flex items-center gap-1.5">
+									<span
+										class="rounded px-2 py-1 text-[10px] font-medium"
+										style="background-color: var(--primary); color: var(--primary-foreground);"
+									>
+										Primary
+									</span>
+									<span
+										class="rounded border px-2 py-1 text-[10px] font-medium"
+										style="background-color: var(--secondary); color: var(--secondary-foreground); border-color: var(--border);"
+									>
+										Secondary
+									</span>
+								</div>
+							</div>
+						</button>
+					</div>
+
+					<div class="flex items-center justify-between gap-2">
+						<span class="text-xs text-muted-foreground">
+							{selectedPresetId === preset.id
+								? 'Previewing'
+								: 'Click either preview to apply immediately'}
+						</span>
+						<div class="flex items-center gap-2">
+							<Label class="text-xs text-muted-foreground" for={`preset-enabled-${preset.id}`}>
+								Enabled
+							</Label>
+							<Switch
+								id={`preset-enabled-${preset.id}`}
+								checked={preset.enabled}
+								onCheckedChange={(checked) => setPresetEnabled(preset.id, !!checked)}
+							/>
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<Collapsible.Root bind:open={advancedOpen}>
+		<Collapsible.Trigger
+			class="flex w-full items-center justify-between rounded-md border px-4 py-3 text-sm font-medium transition-colors hover:bg-muted/50"
+		>
+			<span>Advanced Overrides</span>
+			<Icon
+				icon="lucide:chevron-down"
+				class="h-4 w-4 text-muted-foreground transition-transform duration-200 {advancedOpen
+					? 'rotate-180'
+					: ''}"
+			/>
+		</Collapsible.Trigger>
+		<Collapsible.Content class="mt-2 space-y-4">
+			<Tabs.Root value="light">
+				<Tabs.List class="w-full">
+					<Tabs.Trigger value="light" class="flex-1">Light Mode</Tabs.Trigger>
+					<Tabs.Trigger value="dark" class="flex-1">Dark Mode</Tabs.Trigger>
+				</Tabs.List>
+
+				{#each ['light', 'dark'] as mode (mode)}
+					<Tabs.Content value={mode} class="mt-4 space-y-6">
+						{#each COLOR_GROUPS as group (group.name)}
+							{#if !group.lightOnly || mode === 'light'}
+								<div class="space-y-2">
+									<h4 class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+										{group.name}
+									</h4>
+									<div class="divide-y rounded-lg border">
+										{#each group.vars as variable (variable.key)}
+											{@const currentValue =
+												mode === 'light'
+													? (colors.light[variable.key] ?? '')
+													: (colors.dark[variable.key] ?? '')}
+											<div class="flex items-center gap-3 px-3 py-2">
+												<Label
+													class="w-44 shrink-0 truncate font-mono text-xs text-muted-foreground"
+													title={variable.key}
+												>
+													{variable.key}
+												</Label>
+												<div class="flex min-w-0 flex-1 items-center gap-2">
+													{#if variable.isColor}
+														<div
+															class="relative h-7 w-7 shrink-0 cursor-pointer overflow-hidden rounded border shadow-sm"
+															onclick={(e) =>
+																handlePickerClick(
+																	e,
+																	mode as 'light' | 'dark',
+																	variable.key,
+																	currentValue
+																)}
+															role="button"
+															tabindex="0"
+															onkeydown={(e) =>
+																e.key === 'Enter' &&
+																openColorPicker(e.currentTarget as HTMLDivElement, currentValue)}
+															title="Click to open color picker"
+														>
+															<div
+																class="absolute inset-0"
+																style="background-color: {currentValue}"
+															></div>
+															<input
+																type="color"
+																class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+																tabindex="-1"
+																oninput={(e) =>
+																	setColor(
+																		mode as 'light' | 'dark',
+																		variable.key,
+																		e.currentTarget.value
+																	)}
+															/>
+														</div>
+													{/if}
+													<Input
+														class="h-7 min-w-0 flex-1 font-mono text-xs"
+														value={currentValue}
+														placeholder={variable.isColor ? 'oklch(…) or #hex' : '0.625rem'}
+														oninput={(e) =>
+															setColor(
+																mode as 'light' | 'dark',
+																variable.key,
+																e.currentTarget.value
+															)}
+													/>
+													<Button
+														variant="ghost"
+														size="icon"
+														class="h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground"
+														onclick={() => resetColor(mode as 'light' | 'dark', variable.key)}
+														title="Reset to default"
+													>
+														<Icon icon="lucide:rotate-ccw" class="h-3 w-3" />
+													</Button>
+												</div>
+											</div>
+										{/each}
+									</div>
+								</div>
+							{/if}
+						{/each}
+					</Tabs.Content>
+				{/each}
+			</Tabs.Root>
+
+			<div class="space-y-1.5">
+				<Label class="text-xs" for="custom-css-editor">Custom CSS</Label>
+				<p class="text-xs text-muted-foreground">Additional CSS injected after theme variables.</p>
+				<div class="overflow-hidden rounded-md border bg-muted">
+					<div class="flex items-center justify-between border-b bg-muted/50 px-3 py-1.5">
+						<span class="font-mono text-xs text-muted-foreground">custom.css</span>
+					</div>
+					<textarea
+						id="custom-css-editor"
+						class="min-h-32 w-full resize-none bg-transparent p-3 font-mono text-xs leading-relaxed text-foreground focus:outline-none"
+						spellcheck="false"
+						autocomplete="off"
+						placeholder={`.my-component {\n  /* your custom CSS here */\n}`}
+						value={localCustomCss}
+						oninput={(e) => {
+							localCustomCss = e.currentTarget.value;
+						}}
+					></textarea>
+				</div>
+			</div>
+
+			<div class="space-y-1.5">
+				<Label class="text-xs text-muted-foreground">Generated CSS Preview</Label>
+				<div class="overflow-hidden rounded-md border bg-background">
+					<div class="flex items-center justify-between border-b bg-muted/50 px-3 py-1.5">
+						<span class="font-mono text-xs text-muted-foreground">theme.css</span>
+					</div>
+					<pre
+						class="max-h-64 overflow-auto p-3 font-mono text-xs leading-relaxed whitespace-pre text-foreground">{generatedCSS}</pre>
+				</div>
+			</div>
+		</Collapsible.Content>
+	</Collapsible.Root>
+</div>

package/dist/lib/components/theme/ThemeColorSelector.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    value?: string;
+    customCss?: string;
+    presetsValue?: string;
+    onchange: (value: string) => void;
+    onCustomCssChange: (value: string) => void;
+    onPresetsChange?: (value: string) => void;
+};
+declare const ThemeColorSelector: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeColorSelector = ReturnType<typeof ThemeColorSelector>;
+export default ThemeColorSelector;

package/dist/lib/components/theme/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ThemeColorSelector } from './ThemeColorSelector.svelte';
+export { default as PublicThemeHead } from './PublicThemeHead.svelte';
+export { default as AiThemeCustomizer } from './AiThemeCustomizer.svelte';
+export * from './logo-contrast.ts';
+export * from './theme-colors.ts';
+export * from './theme-contrast.ts';
+export * from './theme-preset-client.ts';
+export { ThemePresetStore } from './theme-preset-store.svelte.ts';
+export { currentThemePresetStore } from '../../preferences/preference-stores.ts';
+export * from './theme-presets.ts';

package/dist/lib/components/theme/index.js

@@ -0,0 +1,10 @@
+export { default as ThemeColorSelector } from './ThemeColorSelector.svelte';
+export { default as PublicThemeHead } from './PublicThemeHead.svelte';
+export { default as AiThemeCustomizer } from './AiThemeCustomizer.svelte';
+export * from "./logo-contrast.js";
+export * from "./theme-colors.js";
+export * from "./theme-contrast.js";
+export * from "./theme-preset-client.js";
+export { ThemePresetStore } from "./theme-preset-store.svelte.js";
+export { currentThemePresetStore } from "../../preferences/preference-stores.js";
+export * from "./theme-presets.js";

package/dist/lib/components/theme/logo-contrast.d.ts

@@ -0,0 +1,2 @@
+export type LogoContrast = 0 | 1;
+export declare function detectLogoContrastFromUrl(url: string): Promise<LogoContrast>;

package/dist/lib/components/theme/logo-contrast.js

@@ -0,0 +1,64 @@
+import { BROWSER } from 'esm-env';
+import { settle } from "../../attempt.js";
+import { failureClass } from "../../failure-class.js";
+import { kitLogger } from "../../kit-logger.js";
+const logger = kitLogger('vibeskit-logo-contrast');
+const LIGHT_LOGO = 1;
+const DARK_LOGO = 0;
+function loadImage(url) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.crossOrigin = 'anonymous';
+        image.onload = () => resolve(image);
+        image.onerror = (failure) => reject(failure);
+        image.src = url;
+    });
+}
+function createSizedCanvas(image) {
+    const maxSide = 64;
+    const scale = Math.min(1, maxSide / Math.max(image.naturalWidth, image.naturalHeight));
+    const width = Math.max(1, Math.round(image.naturalWidth * scale));
+    const height = Math.max(1, Math.round(image.naturalHeight * scale));
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    return { canvas, width, height };
+}
+export async function detectLogoContrastFromUrl(url) {
+    if (!BROWSER || !url) {
+        return LIGHT_LOGO;
+    }
+    const detected = await settle(async () => {
+        const image = await loadImage(url);
+        const { canvas, width, height } = createSizedCanvas(image);
+        const context = canvas.getContext('2d', { willReadFrequently: true });
+        if (!context) {
+            return LIGHT_LOGO;
+        }
+        context.drawImage(image, 0, 0, width, height);
+        const imageData = context.getImageData(0, 0, width, height).data;
+        let weightedLuminanceSum = 0;
+        let alphaWeightSum = 0;
+        for (let i = 0; i < imageData.length; i += 4) {
+            const alpha = imageData[i + 3] / 255;
+            if (alpha < 0.05) {
+                continue;
+            }
+            const red = imageData[i] / 255;
+            const green = imageData[i + 1] / 255;
+            const blue = imageData[i + 2] / 255;
+            const luminance = red * 0.2126 + green * 0.7152 + blue * 0.0722;
+            weightedLuminanceSum += luminance * alpha;
+            alphaWeightSum += alpha;
+        }
+        if (alphaWeightSum === 0) {
+            return LIGHT_LOGO;
+        }
+        const averageLuminance = weightedLuminanceSum / alphaWeightSum;
+        return averageLuminance < 0.5 ? DARK_LOGO : LIGHT_LOGO;
+    });
+    if (detected.ok)
+        return detected.value;
+    logger.warn('Logo contrast detection failed', { reason: failureClass(detected.error) });
+    return LIGHT_LOGO;
+}

package/dist/lib/components/theme/preset-stylesheet.d.ts

@@ -0,0 +1,15 @@
+import { type ThemePreset } from './theme-presets.ts';
+/** The enabled built-in preset catalog — the exact set the assets domain serves. */
+export declare function builtInThemePresetCatalog(): ThemePreset[];
+/**
+ * A content hash of the rendered stylesheets, used as the immutable path segment.
+ * It changes whenever the presets or CSS renderer change, so the URL cache-busts itself — no manual
+ * version bump, and the generator and the shell compute it identically.
+ */
+export declare function themeCatalogVersion(catalog?: ThemePreset[]): string;
+/** Full immutable stylesheet for one preset, system-dark fallback included. */
+export declare function generatePresetStylesheet(preset: ThemePreset): string;
+/** Relative path (under the assets root) for a preset's stylesheet. */
+export declare function themePresetStylesheetPath(presetId: string, catalogVersion?: string): string;
+/** Absolute href on the shared assets origin for a preset's stylesheet. */
+export declare function themePresetStylesheetHref(assetsOrigin: string, presetId: string, catalogVersion?: string): string;