@selvajs/ui 0.9.0

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/theme/themeStore.svelte.d.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,13 @@
+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/dist/types/actionButton.d.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/dist/types/actionButton.js

@@ -0,0 +1 @@
+export {};

package/dist/types/solveFn.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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>;
+export {};

package/dist/types/solveFn.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/color.d.ts

@@ -0,0 +1 @@
+export declare const hexToOklch: (hex: string | null) => string;

package/dist/utils/color.js

@@ -0,0 +1,38 @@
+// Helper to convert hex to OKLCH
+export const hexToOklch = (hex) => {
+    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) => (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)})`;
+};