@selvajs/ui 6.6.0-beta.15 → 6.6.0-beta.16

package/src/lib/utils/color-space.ts

@@ -0,0 +1,107 @@
+export interface Rgb {
+	r: number;
+	g: number;
+	b: number;
+}
+
+/** h in [0, 360), s and v in [0, 1]. */
+export interface Hsv {
+	h: number;
+	s: number;
+	v: number;
+}
+
+const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
+
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export function normalizeHex(input: string): string | null {
+	const raw = input.trim().replace(/^#/, '');
+	if (/^[0-9a-f]{3}$/i.test(raw)) {
+		return `#${raw
+			.split('')
+			.map((c) => c + c)
+			.join('')
+			.toLowerCase()}`;
+	}
+	if (/^[0-9a-f]{6}$/i.test(raw)) return `#${raw.toLowerCase()}`;
+	return null;
+}
+
+export function hexToRgb(hex: string): Rgb | null {
+	const normalized = normalizeHex(hex);
+	if (!normalized) return null;
+	return {
+		r: parseInt(normalized.slice(1, 3), 16),
+		g: parseInt(normalized.slice(3, 5), 16),
+		b: parseInt(normalized.slice(5, 7), 16)
+	};
+}
+
+export function rgbToHex({ r, g, b }: Rgb): string {
+	const channel = (n: number) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+	return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+
+export function rgbToHsv({ r, g, b }: Rgb): Hsv {
+	const rn = r / 255;
+	const gn = g / 255;
+	const bn = b / 255;
+	const max = Math.max(rn, gn, bn);
+	const delta = max - Math.min(rn, gn, bn);
+
+	let h = 0;
+	if (delta !== 0) {
+		if (max === rn) h = ((gn - bn) / delta) % 6;
+		else if (max === gn) h = (bn - rn) / delta + 2;
+		else h = (rn - gn) / delta + 4;
+		h *= 60;
+		if (h < 0) h += 360;
+	}
+	return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+
+export function hsvToRgb({ h, s, v }: Hsv): Rgb {
+	const c = v * s;
+	const hp = (((h % 360) + 360) % 360) / 60;
+	const x = c * (1 - Math.abs((hp % 2) - 1));
+	const [r1, g1, b1] =
+		hp < 1
+			? [c, x, 0]
+			: hp < 2
+				? [x, c, 0]
+				: hp < 3
+					? [0, c, x]
+					: hp < 4
+						? [0, x, c]
+						: hp < 5
+							? [x, 0, c]
+							: [c, 0, x];
+	const m = v - c;
+	return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };
+}
+
+export const hexToHsv = (hex: string): Hsv | null => {
+	const rgb = hexToRgb(hex);
+	return rgb ? rgbToHsv(rgb) : null;
+};
+
+export const hsvToHex = (hsv: Hsv): string => rgbToHex(hsvToRgb(hsv));
+
+/** WCAG relative luminance of an sRGB color. */
+function luminance({ r, g, b }: Rgb): number {
+	const lin = (c: number) => {
+		const n = c / 255;
+		return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+	};
+	return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/** WCAG contrast ratio between two hex colors, 1 to 21. Null if either isn't a hex color. */
+export function contrastRatio(a: string, b: string): number | null {
+	const ra = hexToRgb(a);
+	const rb = hexToRgb(b);
+	if (!ra || !rb) return null;
+	const la = luminance(ra);
+	const lb = luminance(rb);
+	return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { themeStore, type Theme } from '../../../theme/themeStore.svelte';
-	import * as Select from '../select';
-	import { Palette } from '@lucide/svelte';
-
-	const themes: { value: Theme; label: string; description: string }[] = [
-		{ value: 'neutral', label: 'Neutral', description: 'Classic grayscale' },
-		{ value: 'selva', label: 'Selva', description: 'Forest green' },
-		{ value: 'ocean', label: 'Ocean', description: 'Calm blue tones' },
-		{ value: 'cyberpunk', label: 'Cyberpunk', description: 'Vibrant neon colors' }
-	];
-
-	let value = $state(themeStore.current);
-
-	$effect(() => {
-		if (value) {
-			themeStore.set(value as Theme);
-		}
-	});
-
-	const triggerContent = $derived(themes.find((t) => t.value === value)?.label ?? 'Select theme');
-</script>
-
-<Select.Root type="single" bind:value>
-	<Select.Trigger class="gap-2 w-35">
-		<Palette size={14} />
-		<span>{triggerContent}</span>
-	</Select.Trigger>
-	<Select.Content>
-		{#each themes as theme (theme.value)}
-			<Select.Item value={theme.value} label={theme.label}>
-				<div class="flex flex-col items-start">
-					<span class="font-medium text-sm">{theme.label}</span>
-					<span class="text-xs text-muted-foreground">{theme.description}</span>
-				</div>
-			</Select.Item>
-		{/each}
-	</Select.Content>
-</Select.Root>

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const ThemeSwitcher: import("svelte").Component<Record<string, never>, {}, "">;
-type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
-export default ThemeSwitcher;

package/dist/components/primitives/theme-switcher/index.d.ts

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/components/primitives/theme-switcher/index.js

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/styles/themes/cyberpunk.css

@@ -1,98 +0,0 @@
-:root {
-	--radius: 0.625rem;
-
-	--background: oklch(0.98 0.01 300);
-	--foreground: oklch(0.18 0.05 300);
-
-	--card: oklch(0.97 0.015 300);
-	--card-foreground: oklch(0.18 0.05 300);
-
-	--popover: oklch(0.97 0.015 300);
-	--popover-foreground: oklch(0.18 0.05 300);
-
-	--primary: oklch(0.7 0.28 295);
-	--primary-foreground: oklch(0.98 0 0);
-
-	--secondary: oklch(0.9 0.05 300);
-	--secondary-foreground: oklch(0.18 0.05 300);
-
-	--muted: oklch(0.92 0.015 300);
-	--muted-foreground: oklch(0.5 0.03 300);
-
-	--accent: oklch(0.78 0.2 305);
-	--accent-foreground: oklch(0.12 0.05 300);
-
-	--destructive: oklch(0.62 0.25 20);
-	--destructive-foreground: oklch(0.98 0 0);
-
-	--border: oklch(0.86 0.02 300);
-	--input: oklch(0.92 0.015 300);
-	--ring: oklch(0.75 0.18 295);
-
-	--chart-1: oklch(0.7 0.28 295);
-	--chart-2: oklch(0.8 0.24 305);
-	--chart-3: oklch(0.65 0.22 310);
-	--chart-4: oklch(0.55 0.18 290);
-	--chart-5: oklch(0.85 0.15 300);
-
-	--sidebar: oklch(0.97 0.015 300);
-	--sidebar-foreground: oklch(0.18 0.05 300);
-	--sidebar-primary: oklch(0.7 0.28 295);
-	--sidebar-primary-foreground: oklch(0.98 0 0);
-	--sidebar-accent: oklch(0.92 0.015 300);
-	--sidebar-accent-foreground: oklch(0.18 0.05 300);
-	--sidebar-border: oklch(0.86 0.02 300);
-	--sidebar-ring: oklch(0.75 0.18 295);
-
-	--inputparam: oklch(0.86 0.02 300);
-	--outputparam: oklch(0.86 0.04 305);
-	--downloadparam: oklch(0.86 0.05 295);
-}
-
-.dark {
-	--background: oklch(0.18 0.05 300);
-	--foreground: oklch(0.98 0 0);
-
-	--card: oklch(0.22 0.05 300);
-	--card-foreground: oklch(0.98 0 0);
-
-	--popover: oklch(0.22 0.05 300);
-	--popover-foreground: oklch(0.98 0 0);
-
-	--primary: oklch(0.7 0.28 295);
-	--primary-foreground: oklch(0.18 0.05 300);
-
-	--secondary: oklch(0.28 0.03 300);
-	--secondary-foreground: oklch(0.98 0 0);
-
-	--muted: oklch(0.28 0.03 300);
-	--muted-foreground: oklch(0.75 0.04 300);
-
-	--accent: oklch(0.22 0.05 305);
-	--accent-foreground: oklch(0.98 0 0);
-
-	--destructive: oklch(0.55 0.22 20);
-	--destructive-foreground: oklch(0.18 0.05 300);
-
-	--border: oklch(0.35 0.04 300);
-	--input: oklch(0.3 0.03 300);
-	--ring: oklch(0.75 0.18 295);
-
-	--chart-1: oklch(0.7 0.28 295);
-	--chart-2: oklch(0.8 0.24 305);
-	--chart-3: oklch(0.65 0.22 310);
-	--chart-4: oklch(0.32 0.03 300);
-	--chart-5: oklch(0.85 0.15 300);
-
-	--sidebar: oklch(0.18 0.05 300);
-	--sidebar-foreground: oklch(0.98 0 0);
-	--sidebar-primary: oklch(0.7 0.28 295);
-	--sidebar-primary-foreground: oklch(0.18 0.05 300);
-	--sidebar-accent: oklch(0.28 0.03 300);
-	--sidebar-accent-foreground: oklch(0.98 0 0);
-	--sidebar-border: oklch(0.35 0.04 300);
-	--sidebar-ring: oklch(0.75 0.18 295);
-
-	--inputparam: oklch(0.12 0.03 300);
-	--outputparam: oklch(0.32 0.04 305);
-}

package/dist/styles/themes/neutral.css

@@ -1,72 +0,0 @@
-:root {
-	--radius: 0.625rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(87.61% 0.0001 271.152);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-	--inputparam: oklch(100% 0.00011 271.152);
-	--outputparam: oklch(100% 0.00011 271.152);
-}
-
-.dark {
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
-	--card: oklch(0.205 0 0);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.205 0 0);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
-	--primary-foreground: oklch(0.205 0 0);
-	--secondary: oklch(0.269 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.269 0 0);
-	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.269 0 0);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.488 0.243 264.376);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.556 0 0);
-	--inputparam: oklch(0% 0 271.152);
-	--outputparam: oklch(23.574% 0.00241 67.461);
-}

package/dist/styles/themes/ocean.css

@@ -1,75 +0,0 @@
-:root {
-	--radius: 0.625rem;
-	--background: oklch(0.98 0.003 260);
-	--foreground: oklch(0.22 0.01 260);
-	--card: oklch(0.97 0.002 260);
-	--card-foreground: oklch(0.22 0.01 260);
-	--popover: oklch(0.97 0.002 260);
-	--popover-foreground: oklch(0.22 0.01 260);
-	--primary: oklch(0.62 0.18 275);
-	--primary-foreground: oklch(0.98 0 0);
-	--secondary: oklch(0.85 0.05 260);
-	--secondary-foreground: oklch(0.22 0.01 260);
-	--muted: oklch(0.92 0.01 260);
-	--muted-foreground: oklch(0.45 0.02 260);
-	--accent: oklch(0.78 0.04 275);
-	--accent-foreground: oklch(0.15 0.01 260);
-	--destructive: oklch(0.6 0.23 20);
-	--destructive-foreground: oklch(0.98 0 0);
-	--border: oklch(0.85 0.01 260);
-	--input: oklch(0.92 0.01 260);
-	--ring: oklch(0.55 0.04 275);
-	--chart-1: oklch(0.62 0.18 275);
-	--chart-2: oklch(0.68 0.14 255);
-	--chart-3: oklch(0.74 0.12 290);
-	--chart-4: oklch(0.5 0.09 270);
-	--chart-5: oklch(0.82 0.06 250);
-	--sidebar: oklch(0.97 0.002 260);
-	--sidebar-foreground: oklch(0.22 0.01 260);
-	--sidebar-primary: oklch(0.62 0.18 275);
-	--sidebar-primary-foreground: oklch(0.98 0 0);
-	--sidebar-accent: oklch(0.92 0.01 260);
-	--sidebar-accent-foreground: oklch(0.22 0.01 260);
-	--sidebar-border: oklch(0.85 0.01 260);
-	--sidebar-ring: oklch(0.55 0.04 275);
-	--inputparam: oklch(0.86 0.01 260);
-	--outputparam: oklch(0.86 0.0156 280);
-	--downloadparam: oklch(0.86 0.021 265);
-}
-
-.dark {
-	--background: oklch(0.22 0.01 260);
-	--foreground: oklch(0.98 0 0);
-	--card: oklch(0.27 0.01 260);
-	--card-foreground: oklch(0.98 0 0);
-	--popover: oklch(0.27 0.01 260);
-	--popover-foreground: oklch(0.98 0 0);
-	--primary: oklch(0.62 0.18 275);
-	--primary-foreground: oklch(0.22 0.01 260);
-	--secondary: oklch(0.32 0.015 260);
-	--secondary-foreground: oklch(0.98 0 0);
-	--muted: oklch(0.32 0.01 260);
-	--muted-foreground: oklch(0.78 0.02 260);
-	--accent: oklch(0.27 0.01 275);
-	--accent-foreground: oklch(0.98 0 0);
-	--destructive: oklch(0.55 0.22 20);
-	--destructive-foreground: oklch(0.22 0.01 260);
-	--border: oklch(0.4 0.01 260);
-	--input: oklch(0.35 0.01 260);
-	--ring: oklch(0.78 0.02 260);
-	--chart-1: oklch(0.62 0.18 275);
-	--chart-2: oklch(0.68 0.14 255);
-	--chart-3: oklch(0.74 0.12 290);
-	--chart-4: oklch(0.32 0.015 260);
-	--chart-5: oklch(0.82 0.06 250);
-	--sidebar: oklch(0.22 0.01 260);
-	--sidebar-foreground: oklch(0.98 0 0);
-	--sidebar-primary: oklch(0.62 0.18 275);
-	--sidebar-primary-foreground: oklch(0.22 0.01 260);
-	--sidebar-accent: oklch(0.32 0.015 260);
-	--sidebar-accent-foreground: oklch(0.98 0 0);
-	--sidebar-border: oklch(0.4 0.01 260);
-	--sidebar-ring: oklch(0.78 0.02 260);
-	--inputparam: oklch(0.12 0.01 260);
-	--outputparam: oklch(0.36 0.0156 280);
-}

package/dist/styles/themes/selva.css

@@ -1,105 +0,0 @@
-:root {
-	--radius: 0.625rem;
-
-	/* Light Mode - Forest Theme */
-	--background: oklch(0.98 0.005 110); /* Very light sage */
-	--foreground: oklch(0.22 0.02 110); /* Deep forest green, darker for better contrast */
-
-	--card: oklch(0.97 0.008 108); /* Slightly tinted white */
-	--card-foreground: oklch(0.25 0.018 105); /* Dark forest text */
-
-	--popover: oklch(0.98 0.005 110);
-	--popover-foreground: oklch(0.22 0.02 110);
-
-	--primary: oklch(0.55 0.16 140); /* Rich forest green, darker for contrast */
-	--primary-foreground: oklch(0.98 0.005 110); /* Light text on primary */
-
-	--secondary: oklch(0.38 0.08 165); /* Deep teal/evergreen */
-	--secondary-foreground: oklch(0.98 0.005 110);
-
-	--muted: oklch(0.92 0.01 120); /* Soft sage background */
-	--muted-foreground: oklch(0.35 0.015 110); /* Darker muted text for contrast */
-
-	--accent: oklch(0.62 0.12 85); /* Moss/olive accent */
-	--accent-foreground: oklch(0.98 0.005 110);
-
-	--destructive: oklch(0.54 0.22 27); /* Autumn red, darker for contrast */
-	--destructive-foreground: oklch(0.98 0.005 110);
-
-	--border: oklch(0.85 0.015 120); /* Soft green-grey border */
-	--input: oklch(0.94 0.008 115); /* Light sage input */
-	--ring: oklch(0.55 0.16 140); /* Focus ring matches primary */
-
-	/* Chart colors - forest palette */
-	--chart-1: oklch(0.55 0.16 140); /* Primary forest green */
-	--chart-2: oklch(0.45 0.12 165); /* Deep evergreen */
-	--chart-3: oklch(0.62 0.12 85); /* Moss green */
-	--chart-4: oklch(0.68 0.08 180); /* Fern green */
-	--chart-5: oklch(0.52 0.1 110); /* Pine green */
-
-	/* Sidebar */
-	--sidebar: oklch(0.96 0.01 115);
-	--sidebar-foreground: oklch(0.25 0.018 105);
-	--sidebar-primary: oklch(0.55 0.16 140);
-	--sidebar-primary-foreground: oklch(0.98 0.005 110);
-	--sidebar-accent: oklch(0.9 0.015 120);
-	--sidebar-accent-foreground: oklch(0.25 0.018 105);
-	--sidebar-border: oklch(0.85 0.015 120);
-	--sidebar-ring: oklch(0.55 0.16 140);
-
-	/* Special parameters */
-	--inputparam: oklch(86.877% 0.02027 155.1); /* Soft blue-lavender */
-	--outputparam: oklch(85.332% 0.0278 145.489); /* Soft yellow-green */
-}
-
-.dark {
-	/* Dark Mode - Deep Forest Theme */
-	--background: oklch(0.18 0.02 140); /* Deep forest background */
-	--foreground: oklch(0.92 0.01 110); /* Soft cream text */
-
-	--card: oklch(0.22 0.025 135); /* Darker forest card */
-	--card-foreground: oklch(0.92 0.01 110);
-
-	--popover: oklch(0.22 0.025 135);
-	--popover-foreground: oklch(0.92 0.01 110);
-
-	--primary: oklch(0.68 0.14 130); /* Bright forest green */
-	--primary-foreground: oklch(0.15 0.02 140); /* Dark text on primary */
-
-	--secondary: oklch(0.35 0.08 165); /* Deep teal */
-	--secondary-foreground: oklch(0.92 0.01 110);
-
-	--muted: oklch(0.28 0.02 130); /* Muted forest */
-	--muted-foreground: oklch(0.72 0.01 115); /* Lighter muted text */
-
-	--accent: oklch(0.52 0.12 85); /* Moss accent */
-	--accent-foreground: oklch(0.92 0.01 110);
-
-	--destructive: oklch(0.65 0.18 25); /* Autumn red-orange */
-	--destructive-foreground: oklch(0.15 0.02 140);
-
-	--border: oklch(0.35 0.02 130 / 60%); /* Subtle forest border */
-	--input: oklch(0.26 0.025 135); /* Dark forest input */
-	--ring: oklch(0.68 0.14 130); /* Bright focus ring */
-
-	/* Chart colors - deep forest palette */
-	--chart-1: oklch(0.68 0.14 130); /* Bright forest green */
-	--chart-2: oklch(0.52 0.12 85); /* Moss green */
-	--chart-3: oklch(0.75 0.08 180); /* Light fern */
-	--chart-4: oklch(0.45 0.1 165); /* Deep evergreen */
-	--chart-5: oklch(0.6 0.1 110); /* Medium pine */
-
-	/* Sidebar */
-	--sidebar: oklch(0.2 0.022 138);
-	--sidebar-foreground: oklch(0.92 0.01 110);
-	--sidebar-primary: oklch(0.68 0.14 130);
-	--sidebar-primary-foreground: oklch(0.15 0.02 140);
-	--sidebar-accent: oklch(0.28 0.025 135);
-	--sidebar-accent-foreground: oklch(0.92 0.01 110);
-	--sidebar-border: oklch(0.92 0.01 110 / 10%);
-	--sidebar-ring: oklch(0.68 0.14 130);
-
-	/* Special parameters */
-	--inputparam: oklch(21.813% 0.00595 156.915); /* Deep forest blue */
-	--outputparam: oklch(16.216% 0.00263 145.779); /* Forest gold */
-}

package/dist/theme/themeStore.svelte.d.ts

@@ -1,12 +0,0 @@
-import { type Theme } from './themes';
-declare class ThemeStore {
-    private _theme;
-    constructor();
-    get current(): Theme;
-    get availableThemes(): readonly Theme[];
-    set(theme: Theme): void;
-    private applyTheme;
-    toggle(): void;
-}
-export declare const themeStore: ThemeStore;
-export type { Theme };

package/dist/theme/themeStore.svelte.js

@@ -1,40 +0,0 @@
-import { themes, isTheme } from './themes';
-const STORAGE_KEY = 'selva-theme';
-const DEFAULT_THEME = 'neutral';
-class ThemeStore {
-    _theme = $state(DEFAULT_THEME);
-    constructor() {
-        if (typeof window !== 'undefined') {
-            const stored = localStorage.getItem(STORAGE_KEY);
-            if (stored && isTheme(stored)) {
-                this._theme = stored;
-            }
-        }
-    }
-    get current() {
-        return this._theme;
-    }
-    get availableThemes() {
-        return themes;
-    }
-    set(theme) {
-        if (!isTheme(theme)) {
-            console.warn(`Theme "${theme}" is not available. Falling back to default.`);
-            return;
-        }
-        this._theme = theme;
-        if (typeof window !== 'undefined') {
-            localStorage.setItem(STORAGE_KEY, theme);
-            this.applyTheme(theme);
-        }
-    }
-    applyTheme(theme) {
-        document.documentElement.setAttribute('data-theme', theme);
-    }
-    toggle() {
-        const currentIndex = themes.indexOf(this._theme);
-        const nextIndex = (currentIndex + 1) % themes.length;
-        this.set(themes[nextIndex]);
-    }
-}
-export const themeStore = new ThemeStore();

package/dist/theme/themes.d.ts

@@ -1,5 +0,0 @@
-export type Theme = 'neutral' | 'selva' | 'ocean' | 'cyberpunk';
-export declare const themes: readonly Theme[];
-export declare const themeDescriptions: Record<Theme, string>;
-export declare function isTheme(value: string): value is Theme;
-export declare function getThemePath(theme: Theme): string;

package/dist/theme/themes.js

@@ -1,13 +0,0 @@
-export const themes = ['neutral', 'selva', 'ocean', 'cyberpunk'];
-export const themeDescriptions = {
-    neutral: 'Classic grayscale theme',
-    selva: 'Forest green nature-inspired theme',
-    ocean: 'Cool blue ocean theme',
-    cyberpunk: 'Vibrant neon magenta theme'
-};
-export function isTheme(value) {
-    return themes.includes(value);
-}
-export function getThemePath(theme) {
-    return `/styles/themes/${theme}.css`;
-}

package/src/lib/components/primitives/theme-switcher/ThemeSwitcher.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { themeStore, type Theme } from '$lib/theme/themeStore.svelte';
-	import * as Select from '$lib/components/primitives/select';
-	import { Palette } from '@lucide/svelte';
-
-	const themes: { value: Theme; label: string; description: string }[] = [
-		{ value: 'neutral', label: 'Neutral', description: 'Classic grayscale' },
-		{ value: 'selva', label: 'Selva', description: 'Forest green' },
-		{ value: 'ocean', label: 'Ocean', description: 'Calm blue tones' },
-		{ value: 'cyberpunk', label: 'Cyberpunk', description: 'Vibrant neon colors' }
-	];
-
-	let value = $state(themeStore.current);
-
-	$effect(() => {
-		if (value) {
-			themeStore.set(value as Theme);
-		}
-	});
-
-	const triggerContent = $derived(themes.find((t) => t.value === value)?.label ?? 'Select theme');
-</script>
-
-<Select.Root type="single" bind:value>
-	<Select.Trigger class="gap-2 w-35">
-		<Palette size={14} />
-		<span>{triggerContent}</span>
-	</Select.Trigger>
-	<Select.Content>
-		{#each themes as theme (theme.value)}
-			<Select.Item value={theme.value} label={theme.label}>
-				<div class="flex flex-col items-start">
-					<span class="font-medium text-sm">{theme.label}</span>
-					<span class="text-xs text-muted-foreground">{theme.description}</span>
-				</div>
-			</Select.Item>
-		{/each}
-	</Select.Content>
-</Select.Root>

package/src/lib/components/primitives/theme-switcher/index.ts

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';