@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/utils/design-tokens.js

@@ -0,0 +1,127 @@
+// ============================================================================
+// Types
+// ============================================================================
+// ============================================================================
+// Helpers
+// ============================================================================
+/** Check if a single color is an object with states or a plain string */
+function isSingleColorObject(value) {
+    return typeof value === "object" && "DEFAULT" in value;
+}
+/** Generate color tokens for a paired color (with foreground) */
+function generatePairedColorTokens(tokens, key, pair, prefix = "stuic-") {
+    // Main color
+    tokens[`${prefix}color-${key}`] = pair.DEFAULT;
+    tokens[`${prefix}color-${key}-hover`] = pair.hover ?? pair.DEFAULT;
+    tokens[`${prefix}color-${key}-active`] = pair.active ?? pair.DEFAULT;
+    // Foreground
+    tokens[`${prefix}color-${key}-foreground`] = pair.foreground;
+    tokens[`${prefix}color-${key}-foreground-hover`] =
+        pair.foregroundHover ?? pair.foreground;
+    tokens[`${prefix}color-${key}-foreground-active`] =
+        pair.foregroundActive ?? pair.foreground;
+}
+/** Generate color tokens for a single color */
+function generateSingleColorTokens(tokens, key, color, prefix = "stuic-") {
+    if (isSingleColorObject(color)) {
+        tokens[`${prefix}color-${key}`] = color.DEFAULT;
+        tokens[`${prefix}color-${key}-hover`] = color.hover ?? color.DEFAULT;
+        tokens[`${prefix}color-${key}-active`] = color.active ?? color.DEFAULT;
+    }
+    else {
+        // Plain string: use same value for all states
+        tokens[`${prefix}color-${key}`] = color;
+        tokens[`${prefix}color-${key}-hover`] = color;
+        tokens[`${prefix}color-${key}-active`] = color;
+    }
+}
+// ============================================================================
+// Generator
+// ============================================================================
+export function generateCssTokens(schema, prefix = "stuic-") {
+    const tokens = {};
+    // Intent colors
+    for (const [key, pair] of Object.entries(schema.colors.intent)) {
+        generatePairedColorTokens(tokens, key, pair, prefix);
+    }
+    // Role colors (paired)
+    for (const [key, pair] of Object.entries(schema.colors.role.paired)) {
+        generatePairedColorTokens(tokens, key, pair, prefix);
+    }
+    // Role colors (single)
+    for (const [key, color] of Object.entries(schema.colors.role.single)) {
+        generateSingleColorTokens(tokens, key, color, prefix);
+    }
+    return tokens;
+}
+// ============================================================================
+// CSS Output Helpers
+// ============================================================================
+// Generic fallback for any Tailwind color variable
+// This is a safety net for Vite HMR timing - rarely visible in practice
+const GENERIC_COLOR_FALLBACK = "#737373"; // neutral-500 (mid-gray)
+/**
+ * Add generic fallback to var(--color-X) references
+ * Input:  "var(--color-neutral-800)"
+ * Output: "var(--color-neutral-800, #737373)"
+ *
+ * Works for ANY Tailwind color (neutral, blue, red, etc.)
+ */
+function addColorFallback(value) {
+    // Match var(--color-X) pattern (but not if it already has a fallback)
+    const match = value.match(/^var\(--color-([^,)]+)\)$/);
+    if (match) {
+        const colorName = match[1];
+        // Special cases for obvious colors
+        if (colorName === "white")
+            return `var(--color-white, #ffffff)`;
+        if (colorName === "black")
+            return `var(--color-black, #000000)`;
+        // Generic fallback for all other colors
+        return `var(--color-${colorName}, ${GENERIC_COLOR_FALLBACK})`;
+    }
+    return value;
+}
+/** Convert tokens object to CSS :root declaration */
+export function toCssString(tokens, selector = ":root") {
+    // Find max key length for padding
+    const maxLen = Math.max(...Object.keys(tokens).map((k) => `--${k}`.length));
+    // Helper to extract base color name from token key
+    const getBaseColor = (key) => {
+        // e.g., "stuic-color-primary-foreground-hover" → "primary"
+        // e.g., "stuic-color-surface-1-foreground" → "surface-1"
+        const match = key.match(/^stuic-color-([a-z]+-?\d*)/);
+        return match ? match[1] : key;
+    };
+    // Group tokens by base color name (preserving order)
+    const groups = new Map();
+    for (const [key, value] of Object.entries(tokens)) {
+        const base = getBaseColor(key);
+        if (!groups.has(base)) {
+            groups.set(base, []);
+        }
+        groups.get(base).push([key, value]);
+    }
+    // Format a token with padding (include colon in key)
+    const formatVar = ([key, value]) => {
+        const cssKey = `--${key}:`;
+        const valueWithFallback = addColorFallback(value);
+        return `\t${cssKey.padEnd(maxLen + 1)} ${valueWithFallback};`;
+    };
+    // Build output with empty lines between each color group
+    const parts = [];
+    for (const entries of groups.values()) {
+        parts.push(entries.map(formatVar).join("\n"));
+    }
+    return `${selector} {\n${parts.join("\n\n")}\n}\n`;
+}
+/** Create dark mode override tokens */
+export function createDarkOverride(baseTokens, overrides) {
+    const darkTokens = {};
+    for (const [key, value] of Object.entries(overrides)) {
+        if (key in baseTokens && value !== undefined) {
+            darkTokens[key] = value;
+        }
+    }
+    return darkTokens;
+}

package/dist/utils/index.d.ts

@@ -3,6 +3,7 @@ export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
 export * from "./colors.js";
 export * from "./debounce.js";
+export * from "./design-tokens.js";
 export * from "./device-pointer.svelte.js";
 export * from "./escape-regex.js";
 export * from "./event-emitter.js";

package/dist/utils/index.js

@@ -3,6 +3,7 @@ export * from "./body-scroll-locker.js";
 export * from "./breakpoint.svelte.js";
 export * from "./colors.js";
 export * from "./debounce.js";
+export * from "./design-tokens.js";
 export * from "./device-pointer.svelte.js";
 export * from "./escape-regex.js";
 export * from "./event-emitter.js";

package/dist/utils/storage-abstraction.js

@@ -131,7 +131,7 @@ export class StorageAbstraction {
 }
 function storage_value(type, key, initial) {
     const s = new StorageAbstraction(type);
-    if (!s.has(key))
+    if (!s.has(key) && initial !== undefined)
         s.set(key, initial);
     return {
         get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.66.0",
+  "version": "3.0.1",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -26,30 +26,31 @@
     "@marianmeres/icons-fns": "^5.0.0",
     "@marianmeres/random-human-readable": "^1.6.1",
     "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.49.5",
+    "@sveltejs/kit": "^2.50.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.0.9",
+    "@types/node": "^25.0.10",
     "dotenv": "^16.6.1",
     "eslint": "^9.39.2",
     "globals": "^16.5.0",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
-    "publint": "^0.3.16",
-    "svelte": "^5.46.4",
+    "publint": "^0.3.17",
+    "svelte": "^5.48.0",
     "svelte-check": "^4.3.5",
     "tailwindcss": "^4.1.18",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0",
-    "vite": "^6.4.1",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@marianmeres/clog": "^3.15.0",
+    "@marianmeres/clog": "^3.15.1",
     "@marianmeres/item-collection": "^1.3.5",
     "@marianmeres/parse-boolean": "^2.0.5",
     "@marianmeres/ticker": "^1.16.5",
@@ -71,6 +72,8 @@
     "svelte-check": "svelte-check",
     "svelte-package": "svelte-package",
     "rp": "pnpm run build && ./release.sh patch",
-    "rpm": "pnpm run build && ./release.sh minor"
+    "rpm": "pnpm run build && ./release.sh minor",
+    "build:theme": "tsx scripts/generate-theme.ts",
+    "build:theme:all": "pnpm run build:theme --indir=src/lib/themes --outdir=src/lib/themes"
   }
 }

package/dist/components/Switch/SwitchButton.svelte

@@ -1,135 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-	import type { FormEventHandler, HTMLButtonAttributes } from "svelte/elements";
-
-	export interface Props extends Omit<HTMLButtonAttributes, "children"> {
-		button?: HTMLButtonElement;
-		checked?: boolean;
-		size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
-		class?: string;
-		dotClass?: string;
-		label?: string;
-		disabled?: boolean;
-		tabindex?: number;
-		on?: Snippet;
-		off?: Snippet;
-		onclick?: (event: MouseEvent) => void;
-		onchange?: FormEventHandler<HTMLButtonElement> | null | undefined;
-		preHook?: (current: boolean) => Promise<false | any>;
-	}
-</script>
-
-<script lang="ts">
-	import { tick } from "svelte";
-	import { twMerge } from "../../utils/tw-merge.js";
-
-	import "./index.css";
-
-	let {
-		button = $bindable(),
-		size = "md",
-		class: classProp,
-		dotClass,
-		checked = $bindable(),
-		disabled,
-		tabindex = 0,
-		label,
-		on,
-		off,
-		onclick,
-		preHook,
-		...rest
-	}: Props = $props();
-
-	const _preset: any = {
-		size: {
-			xs: `h-4 w-7`,
-			sm: `h-5 w-9`,
-			md: `h-6 w-11`,
-			lg: `h-7 w-13`,
-			xl: `h-8 w-15`,
-		},
-		dot: {
-			size: {
-				xs: `size-2 data-[checked=true]:translate-x-4`,
-				sm: `size-3 data-[checked=true]:translate-x-5`,
-				md: `size-4 data-[checked=true]:translate-x-6`,
-				lg: `size-5 data-[checked=true]:translate-x-7`,
-				xl: `size-6 data-[checked=true]:translate-x-8`,
-			},
-		},
-	};
-</script>
-
-<!-- <div class="inline-block relative"> -->
-<button
-	bind:this={button}
-	class={twMerge(
-		"stuic-switch",
-		`m-2 
-			relative inline-flex flex-shrink-0 items-center
-			rounded-full cursor-pointer
-	
-			transition-colors duration-100
-	
-			hover:brightness-105 active:brightness-95
-			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
-	
-			bg-neutral-400 dark:bg-neutral-400
-	
-			aria-[checked=true]:bg-switch-accent
-			dark:aria-[checked=true]:bg-switch-accent-dark
-	
-			focus:outline-0
-			focus:ring-switch-accent/20 focus:dark:ring-switch-accent-dark/20
-			focus:ring-4`,
-		size,
-		_preset.size[size],
-		classProp
-	)}
-	type="button"
-	role="switch"
-	aria-checked={checked}
-	value={`${!!checked}`}
-	{tabindex}
-	{disabled}
-	onclick={async (e) => {
-		if (typeof preHook === "function" && (await preHook(checked ?? false)) === false) {
-			return false;
-		}
-		checked = !checked;
-
-		await tick();
-
-		if (typeof onclick === "function") onclick(e);
-
-		button!.dispatchEvent(
-			new CustomEvent("change", { bubbles: true, cancelable: true, detail: checked })
-		);
-	}}
-	{...rest}
->
-	{#if label}<span class="sr-only">{@html label}</span>{/if}
-	<span
-		aria-hidden="true"
-		data-checked={checked}
-		class={twMerge(
-			"dot",
-			`flex items-center justify-center
-				translate-x-1 rounded-full  
-				transition-all duration-100
-				shadow
-				bg-neutral-50 dark:bg-neutral-50
-				text-neutral-950 dark:text-neutral-950`,
-			size,
-			_preset.dot.size[size],
-			dotClass
-		)}
-	>
-		{#if checked}
-			{@render on?.()}
-		{:else}
-			{@render off?.()}
-		{/if}
-	</span>
-</button>

package/dist/components/Switch/SwitchButton.svelte.d.ts

@@ -1,21 +0,0 @@
-import type { Snippet } from "svelte";
-import type { FormEventHandler, HTMLButtonAttributes } from "svelte/elements";
-export interface Props extends Omit<HTMLButtonAttributes, "children"> {
-    button?: HTMLButtonElement;
-    checked?: boolean;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
-    class?: string;
-    dotClass?: string;
-    label?: string;
-    disabled?: boolean;
-    tabindex?: number;
-    on?: Snippet;
-    off?: Snippet;
-    onclick?: (event: MouseEvent) => void;
-    onchange?: FormEventHandler<HTMLButtonElement> | null | undefined;
-    preHook?: (current: boolean) => Promise<false | any>;
-}
-import "./index.css";
-declare const SwitchButton: import("svelte").Component<Props, {}, "button" | "checked">;
-type SwitchButton = ReturnType<typeof SwitchButton>;
-export default SwitchButton;