@selvajs/ui 0.9.0

package/src/lib/styles/base.css

@@ -0,0 +1,145 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+	--radius: 0.625rem;
+	--header-h: 3.5rem;
+	--page-px: 1.5rem;
+	--page-py: 1.75rem;
+	--background: oklch(0.99 0 0);
+	--foreground: oklch(0.22 0 0);
+	--card: oklch(0.985 0 0);
+	--card-foreground: oklch(0.22 0 0);
+	--popover: oklch(0.99 0 0);
+	--popover-foreground: oklch(0.22 0 0);
+	--primary: oklch(0.57 0.07 135);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.94 0 0);
+	--secondary-foreground: oklch(0.28 0 0);
+	--muted: oklch(0.95 0 0);
+	--muted-foreground: oklch(0.5 0 0);
+	--accent: oklch(0.93 0 0);
+	--accent-foreground: oklch(0.3 0 0);
+	--destructive: oklch(0.6 0.18 27);
+	--border: oklch(0.86 0 0);
+	--input: oklch(0.91 0 0);
+	--ring: oklch(0.67 0 0);
+	--success: oklch(0.66 0.14 145);
+	--success-foreground: oklch(0.99 0 0);
+	--warning: oklch(0.78 0.12 75);
+	--warning-foreground: oklch(0.25 0.04 75);
+	--info: oklch(0.68 0.11 245);
+	--info-foreground: oklch(0.99 0 0);
+	--chart-1: oklch(0.65 0.14 135);
+	--chart-2: oklch(0.7 0.11 200);
+	--chart-3: oklch(0.6 0.13 260);
+	--chart-4: oklch(0.78 0.13 80);
+	--chart-5: oklch(0.68 0.15 30);
+	--sidebar: oklch(0.96 0 0);
+	--sidebar-foreground: oklch(0.25 0 0);
+	--sidebar-primary: oklch(0.57 0.07 135);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.93 0 0);
+	--sidebar-accent-foreground: oklch(0.3 0 0);
+	--sidebar-border: oklch(0.88 0 0);
+	--sidebar-ring: oklch(0.67 0 0);
+	--inputparam: oklch(1 0 0);
+	--outputparam: oklch(1 0 0);
+}
+
+.dark {
+	--background: oklch(0.17 0 0);
+	--foreground: oklch(0.96 0 0);
+	--card: oklch(0.23 0 0);
+	--card-foreground: oklch(0.96 0 0);
+	--popover: oklch(0.23 0 0);
+	--popover-foreground: oklch(0.96 0 0);
+	--primary: oklch(0.74 0.07 135);
+	--primary-foreground: oklch(0.18 0 0);
+	--secondary: oklch(0.3 0 0);
+	--secondary-foreground: oklch(0.96 0 0);
+	--muted: oklch(0.27 0 0);
+	--muted-foreground: oklch(0.72 0 0);
+	--accent: oklch(0.36 0 0);
+	--accent-foreground: oklch(0.92 0 0);
+	--destructive: oklch(0.7 0.17 22);
+	--border: oklch(1 0 0 / 14%);
+	--input: oklch(1 0 0 / 12%);
+	--ring: oklch(0.74 0 0);
+	--success: oklch(0.74 0.15 145);
+	--success-foreground: oklch(0.18 0.03 145);
+	--warning: oklch(0.8 0.14 75);
+	--warning-foreground: oklch(0.2 0.03 75);
+	--info: oklch(0.74 0.13 245);
+	--info-foreground: oklch(0.18 0.03 245);
+	--chart-1: oklch(0.7 0.13 135);
+	--chart-2: oklch(0.72 0.12 200);
+	--chart-3: oklch(0.68 0.14 260);
+	--chart-4: oklch(0.78 0.14 80);
+	--chart-5: oklch(0.7 0.16 30);
+	--sidebar: oklch(0.21 0 0);
+	--sidebar-foreground: oklch(0.96 0 0);
+	--sidebar-primary: oklch(0.74 0.07 135);
+	--sidebar-primary-foreground: oklch(0.18 0 0);
+	--sidebar-accent: oklch(0.32 0 0);
+	--sidebar-accent-foreground: oklch(0.92 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.74 0 0);
+	--inputparam: oklch(0.15 0 0);
+	--outputparam: oklch(0.25 0 0);
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-success: var(--success);
+	--color-success-foreground: var(--success-foreground);
+	--color-warning: var(--warning);
+	--color-warning-foreground: var(--warning-foreground);
+	--color-info: var(--info);
+	--color-info-foreground: var(--info-foreground);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-inputparam: var(--inputparam);
+	--color-outputparam: var(--outputparam);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	html,
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/src/lib/styles/themes/cyberpunk.css

@@ -0,0 +1,98 @@
+: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/src/lib/styles/themes/neutral.css

@@ -0,0 +1,72 @@
+: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/src/lib/styles/themes/ocean.css

@@ -0,0 +1,75 @@
+: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/src/lib/styles/themes/selva.css

@@ -0,0 +1,105 @@
+: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/src/lib/theme/themeStore.svelte.ts

@@ -0,0 +1,50 @@
+import { themes, isTheme, type Theme } from './themes';
+
+const STORAGE_KEY = 'selva-theme';
+const DEFAULT_THEME: Theme = 'neutral';
+
+class ThemeStore {
+	private _theme = $state<Theme>(DEFAULT_THEME);
+
+	constructor() {
+		if (typeof window !== 'undefined') {
+			const stored = localStorage.getItem(STORAGE_KEY);
+			if (stored && isTheme(stored)) {
+				this._theme = stored;
+			}
+		}
+	}
+
+	get current(): Theme {
+		return this._theme;
+	}
+
+	get availableThemes(): readonly Theme[] {
+		return themes;
+	}
+
+	set(theme: 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);
+		}
+	}
+
+	private applyTheme(theme: 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();
+export type { Theme };

package/src/lib/theme/themes.ts

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

package/src/lib/types/actionButton.ts

@@ -0,0 +1,33 @@
+/**
+ * Defines an action button for use in the UI.
+ *
+ * @example
+ * ```typescript
+ * const saveButton: ActionButton = {
+ *   id: 'save-btn',
+ *   label: 'Save Changes',
+ *   icon: SaveIcon,
+ *   variant: 'default',
+ *   size: 'lg',
+ *   onclick: async () => {
+ *     await saveData();
+ *     showNotification('Saved!');
+ *   }
+ * };
+ * ```
+ *
+ * @property id - Unique identifier for this button
+ * @property label - Display text shown on the button
+ * @property icon - Optional icon component to display alongside the label
+ * @property variant - Button styling variant (controls color/appearance)
+ * @property size - Button size preset
+ * @property onclick - Callback function executed when clicked; can be async
+ */
+export interface ActionButton {
+	id: string;
+	label: string;
+	icon?: any;
+	variant?: 'default' | 'outline' | 'destructive' | 'secondary' | 'ghost';
+	size?: 'default' | 'sm' | 'lg';
+	onclick: () => void | Promise<void>;
+}

package/src/lib/types/solveFn.ts

@@ -0,0 +1,29 @@
+/**
+ * Result returned from a solve operation.
+ *
+ * @property outputs - Key-value pairs of computed results
+ * @property meshes - Optional array of 3D mesh data generated during computation
+ * @property errors - Optional array of error messages that occurred
+ * @property warnings - Optional array of warning messages from the computation
+ */
+interface SolveResult {
+	outputs: Record<string, unknown>;
+	meshes?: any[];
+	errors?: string[];
+	warnings?: string[];
+}
+
+/**
+ * Function type for running a computation with given input values.
+ *
+ * Implementations should listen to the abort signal and clean up resources
+ * when the signal is triggered (e.g., when the user cancels the operation).
+ *
+ * @param values - Input parameters for the computation
+ * @param signal - AbortSignal to cancel ongoing operations
+ * @returns Promise resolving to the computation result
+ */
+export type SolveFn = (
+	values: Record<string, unknown>,
+	signal: AbortSignal
+) => Promise<SolveResult>;

package/src/lib/utils/color.ts

@@ -0,0 +1,45 @@
+// Helper to convert hex to OKLCH
+export const hexToOklch = (hex: string | null): string => {
+	if (!hex) return '';
+
+	// Normalize hex (remove # if present)
+	const normalized = hex.replace(/^#/, '');
+
+	// If it's not a valid hex color, return as-is
+	if (!/^[0-9A-Fa-f]{6}$/.test(normalized)) {
+		return hex;
+	}
+
+	// Parse hex to RGB
+	const r = parseInt(normalized.slice(0, 2), 16) / 255;
+	const g = parseInt(normalized.slice(2, 4), 16) / 255;
+	const b = parseInt(normalized.slice(4, 6), 16) / 255;
+
+	// Convert RGB to linear RGB
+	const toLinear = (c: number) => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+	const lr = toLinear(r);
+	const lg = toLinear(g);
+	const lb = toLinear(b);
+
+	// Convert linear RGB to XYZ
+	const x = lr * 0.4124564 + lg * 0.3575761 + lb * 0.1804375;
+	const y = lr * 0.2126729 + lg * 0.7151522 + lb * 0.072175;
+	const z = lr * 0.0193339 + lg * 0.119192 + lb * 0.9503041;
+
+	// Convert XYZ to OKLab
+	const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
+	const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
+	const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z);
+
+	const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+	const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+	const b_lab = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+
+	// Convert to LCH
+	const C = Math.sqrt(a * a + b_lab * b_lab);
+	let H = (Math.atan2(b_lab, a) * 180) / Math.PI;
+	if (H < 0) H += 360;
+
+	// Format as OKLCH (round to reasonable precision)
+	return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
+};