@dryui/theme-wizard 2.0.0 → 4.0.0

package/dist/components/AlphaSlider.svelte

@@ -10,4 +10,4 @@
 	let { value = $bindable(50), color = 'hsl(230, 65%, 55%)', onchange }: Props = $props();
 </script>
 
-<AlphaSlider bind:value {color} {...(onchange ? { onchange } : {})} />
+<AlphaSlider bind:value {color} {...onchange ? { onchange } : {}} />

package/dist/components/WizardShell.svelte

@@ -3,7 +3,7 @@
 	import { useThemeOverride } from '@dryui/primitives/use-theme-override';
 	import { Text } from '@dryui/ui/text';
 	import { Button } from '@dryui/ui/button';
-	import { getOverrideTokens, wizardState } from '../state.svelte.js';
+	import { getAllTokens, wizardState } from '../state.svelte.js';
 	import StepIndicator from './StepIndicator.svelte';
 
 	interface Props {
@@ -30,14 +30,14 @@
 		onstep
 	}: Props = $props();
 
-	useThemeOverride(() => getOverrideTokens());
+	useThemeOverride(() => getAllTokens());
 </script>
 
 <div class="wizard-shell">
 	<header class="wizard-header">
 		<div class="wizard-header-inner">
 			<Text size="lg" weight="semibold">Theme Wizard</Text>
-			<StepIndicator currentStep={step} {...(onstep ? { onstep } : {})} />
+			<StepIndicator currentStep={step} {...onstep ? { onstep } : {}} />
 		</div>
 	</header>
 

package/dist/engine/index.d.ts

@@ -6,5 +6,5 @@ export { encodeTheme, decodeTheme, encodeRecipe, decodeRecipe } from './url-code
 export type { DecodedTheme, WizardRecipe } from './url-codec.js';
 export { generatePalette, textToBrand } from './palette.js';
 export type { PaletteResult } from './palette.js';
-export { PRESETS } from './presets.js';
-export type { Preset } from './presets.js';
+export { PRESETS, RECIPE_PRESETS } from './presets.js';
+export type { Preset, RecipePreset } from './presets.js';

package/dist/engine/index.js

@@ -3,4 +3,4 @@ export { hsbToHsl, hslToHsb, hslToRgb, hslToHex, hexToHsl, cssColorToRgb, relati
 export { generateCss, downloadCss, copyCss, exportJson } from './export-css.js';
 export { encodeTheme, decodeTheme, encodeRecipe, decodeRecipe } from './url-codec.js';
 export { generatePalette, textToBrand } from './palette.js';
-export { PRESETS } from './presets.js';
+export { PRESETS, RECIPE_PRESETS } from './presets.js';

package/dist/engine/presets.d.ts

@@ -1,6 +1,13 @@
 import type { BrandInput } from './derivation.js';
+import type { WizardRecipe } from './url-codec.js';
 export interface Preset {
     name: string;
     brandInput: BrandInput;
 }
 export declare const PRESETS: Preset[];
+export interface RecipePreset {
+    name: string;
+    description: string;
+    recipe: WizardRecipe;
+}
+export declare const RECIPE_PRESETS: RecipePreset[];

package/dist/engine/presets.js

@@ -32,3 +32,93 @@ export const PRESETS = [
         brandInput: { h: 10, s: 85, b: 75 }
     }
 ];
+export const RECIPE_PRESETS = [
+    {
+        name: 'Default',
+        description: 'Balanced starting point',
+        recipe: {
+            brand: { h: 230, s: 65, b: 85 },
+            personality: 'structured',
+            typography: { fontPreset: 'System', scale: 'default' },
+            shape: { radiusPreset: 'soft', radiusScale: 1, density: 'default' },
+            shadows: { preset: 'elevated', intensity: 1, tintBrand: true }
+        }
+    },
+    {
+        name: 'Dashboard',
+        description: 'Dense, data-first interface',
+        recipe: {
+            brand: { h: 200, s: 80, b: 70 },
+            personality: 'structured',
+            typography: { fontPreset: 'Geometric', scale: 'compact' },
+            shape: { radiusPreset: 'sharp', radiusScale: 1, density: 'compact' },
+            shadows: { preset: 'subtle', intensity: 1, tintBrand: false }
+        }
+    },
+    {
+        name: 'Editorial',
+        description: 'Warm, readable, content-forward',
+        recipe: {
+            brand: { h: 340, s: 65, b: 85 },
+            personality: 'clean',
+            typography: { fontPreset: 'Serif', scale: 'spacious' },
+            shape: { radiusPreset: 'soft', radiusScale: 1, density: 'spacious' },
+            shadows: { preset: 'flat', intensity: 1, tintBrand: true }
+        }
+    },
+    {
+        name: 'Terminal',
+        description: 'Precise, monospace, technical',
+        recipe: {
+            brand: { h: 145, s: 60, b: 55 },
+            personality: 'minimal',
+            typography: { fontPreset: 'Mono', scale: 'compact' },
+            shape: { radiusPreset: 'sharp', radiusScale: 1, density: 'compact' },
+            shadows: { preset: 'flat', intensity: 1, tintBrand: false }
+        }
+    },
+    {
+        name: 'Playful',
+        description: 'Warm, rounded, approachable',
+        recipe: {
+            brand: { h: 25, s: 80, b: 90 },
+            personality: 'rich',
+            typography: { fontPreset: 'Humanist', scale: 'default' },
+            shape: { radiusPreset: 'pill', radiusScale: 1, density: 'default' },
+            shadows: { preset: 'deep', intensity: 1, tintBrand: true }
+        }
+    },
+    {
+        name: 'Corporate',
+        description: 'Professional and measured',
+        recipe: {
+            brand: { h: 230, s: 65, b: 85 },
+            personality: 'structured',
+            typography: { fontPreset: 'Classical', scale: 'default' },
+            shape: { radiusPreset: 'soft', radiusScale: 1, density: 'default' },
+            shadows: { preset: 'elevated', intensity: 1, tintBrand: false }
+        }
+    },
+    {
+        name: 'Midnight',
+        description: 'Dark, atmospheric, layered',
+        recipe: {
+            brand: { h: 270, s: 45, b: 80 },
+            personality: 'rich',
+            typography: { fontPreset: 'System', scale: 'default' },
+            shape: { radiusPreset: 'rounded', radiusScale: 1, density: 'default' },
+            shadows: { preset: 'deep', intensity: 1, tintBrand: true }
+        }
+    },
+    {
+        name: 'Ember',
+        description: 'Bold, warm, high contrast',
+        recipe: {
+            brand: { h: 10, s: 85, b: 75 },
+            personality: 'structured',
+            typography: { fontPreset: 'Geometric', scale: 'default' },
+            shape: { radiusPreset: 'rounded', radiusScale: 1, density: 'default' },
+            shadows: { preset: 'elevated', intensity: 1, tintBrand: true }
+        }
+    }
+];

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './engine/index.js';
+export { bg } from './actions.js';
 export { wizardState, getDerivedTheme, setBrandHsb, setStep, goNextStep, goPrevStep, activateFastTrack, applyPreset, getStyleString, setFontPreset, setTypeScale, resetToDefaults, applyRecipe, setRadiusPreset, setRadiusScale, setDensity, getShadowTokens, getShapeTokens, setPersonality, getPersonalityTokens, getAllTokens, getOverrideTokens, RADIUS_PRESETS, FONT_STACKS } from './state.svelte.js';
 export type { PreviewMode, NeutralMode, RadiusPreset, Density, ShadowPreset, Personality, TypeScale, FontPreset } from './state.svelte.js';
 export { default as PersonalityStep } from './steps/Personality.svelte';

package/dist/index.js

@@ -1,5 +1,7 @@
 // Re-export all engine functions and types
 export * from './engine/index.js';
+// Re-export actions
+export { bg } from './actions.js';
 // Re-export state (Svelte 5 runes)
 export { wizardState, getDerivedTheme, setBrandHsb, setStep, goNextStep, goPrevStep, activateFastTrack, applyPreset, getStyleString, setFontPreset, setTypeScale, resetToDefaults, applyRecipe, setRadiusPreset, setRadiusScale, setDensity, getShadowTokens, getShapeTokens, setPersonality, getPersonalityTokens, getAllTokens, getOverrideTokens, RADIUS_PRESETS, FONT_STACKS } from './state.svelte.js';
 // Step components

package/dist/state.svelte.js

@@ -51,6 +51,10 @@ function persistState() {
         untrack(() => {
             try {
                 const { personality, brandHsb, neutralMode, statusHues, darkBgOverrides, typography, shape, shadows } = wizardState;
+                const tokens = {
+                    light: getAllTokens('light'),
+                    dark: getAllTokens('dark')
+                };
                 sessionStorage.setItem(STORAGE_KEY, JSON.stringify({
                     personality,
                     brandHsb,
@@ -59,7 +63,8 @@ function persistState() {
                     darkBgOverrides,
                     typography,
                     shape,
-                    shadows
+                    shadows,
+                    tokens
                 }));
             }
             catch {
@@ -110,6 +115,14 @@ export function setNeutralMode(mode) {
     wizardState.neutralMode = mode;
     persistState();
 }
+function resetStyleStateToDefaults() {
+    wizardState.neutralMode = DEFAULTS.neutralMode;
+    wizardState.statusHues = { ...DEFAULTS.statusHues };
+    wizardState.darkBgOverrides = { ...DEFAULTS.darkBgOverrides };
+    wizardState.typography = { ...DEFAULTS.typography };
+    wizardState.shape = { ...DEFAULTS.shape };
+    wizardState.shadows = { ...DEFAULTS.shadows };
+}
 /** Set the personality (chrome level) and apply cross-step defaults. */
 function applyPersonalityDefaults(p) {
     wizardState.personality = p;
@@ -131,6 +144,7 @@ function applyPersonalityDefaults(p) {
 }
 /** Set the personality (chrome level) and apply cross-step defaults. */
 export function setPersonality(p) {
+    resetStyleStateToDefaults();
     applyPersonalityDefaults(p);
     persistState();
 }
@@ -188,16 +202,11 @@ export function setTypeScale(scale) {
 }
 /** Reset all wizard state to defaults. */
 export function resetToDefaults() {
-    wizardState.currentStep = 1;
-    wizardState.personality = 'structured';
-    wizardState.brandHsb = { h: 230, s: 65, b: 85 };
-    wizardState.neutralMode = 'monochromatic';
-    wizardState.statusHues = { error: 0, warning: 40, success: 145, info: 210 };
-    wizardState.darkBgOverrides = {};
-    wizardState.fastTrack = false;
-    wizardState.typography = { fontPreset: 'System', scale: 'default' };
-    wizardState.shape = { radiusPreset: 'soft', radiusScale: 1, density: 'default' };
-    wizardState.shadows = { preset: 'elevated', intensity: 1, tintBrand: true };
+    wizardState.currentStep = DEFAULTS.currentStep;
+    wizardState.personality = DEFAULTS.personality;
+    wizardState.brandHsb = { ...DEFAULTS.brandHsb };
+    resetStyleStateToDefaults();
+    wizardState.fastTrack = DEFAULTS.fastTrack;
     if (typeof sessionStorage !== 'undefined') {
         sessionStorage.removeItem(STORAGE_KEY);
     }
@@ -206,15 +215,13 @@ export function resetToDefaults() {
 export function applyRecipe(recipe) {
     wizardState.currentStep = DEFAULTS.currentStep;
     wizardState.brandHsb = { ...recipe.brand };
+    resetStyleStateToDefaults();
     wizardState.neutralMode = recipe.neutralMode ?? DEFAULTS.neutralMode;
     wizardState.statusHues = { ...DEFAULTS.statusHues, ...recipe.statusHues };
-    wizardState.darkBgOverrides = { ...DEFAULTS.darkBgOverrides };
     wizardState.fastTrack = false;
     wizardState.typography = recipe.typography
         ? { ...recipe.typography }
         : { ...DEFAULTS.typography };
-    wizardState.shape = { ...DEFAULTS.shape };
-    wizardState.shadows = { ...DEFAULTS.shadows };
     applyPersonalityDefaults(recipe.personality ?? DEFAULTS.personality);
     if (recipe.shape) {
         wizardState.shape = { ...recipe.shape };
@@ -520,7 +527,13 @@ export function getAllTokens(mode = 'light') {
     const shadowTokens = shadows[m];
     const personalityTokens = getPersonalityTokens();
     const typographyTokens = getTypographyTokens();
-    return { ...colorTokens, ...shapeTokens, ...shadowTokens, ...personalityTokens, ...typographyTokens };
+    return {
+        ...colorTokens,
+        ...shapeTokens,
+        ...shadowTokens,
+        ...personalityTokens,
+        ...typographyTokens
+    };
 }
 /** Return only tokens that the user has changed from defaults. */
 export function getOverrideTokens(mode = 'light') {
@@ -551,5 +564,11 @@ function computeDefaultAllTokens(mode) {
     const shadowTokens = getShadowTokens(DEFAULTS.shadows.preset, DEFAULTS.shadows.intensity, DEFAULTS.shadows.tintBrand, DEFAULTS.brandHsb.h)[mode];
     const personalityTokens = PERSONALITY_TOKENS[DEFAULTS.personality];
     const typographyTokens = getTypographyTokens(DEFAULTS.typography.fontPreset, DEFAULTS.typography.scale);
-    return { ...colorTokens, ...shapeTokens, ...shadowTokens, ...personalityTokens, ...typographyTokens };
+    return {
+        ...colorTokens,
+        ...shapeTokens,
+        ...shadowTokens,
+        ...personalityTokens,
+        ...typographyTokens
+    };
 }

package/dist/steps/BrandColor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Button } from '@dryui/ui';
 	import { ColorPicker } from '@dryui/ui/color-picker';
 	import { Text } from '@dryui/ui/text';
 	import { setBrandHsb, getDerivedTheme, wizardState } from '../state.svelte.js';
@@ -10,17 +11,11 @@
 		hsbToHsl,
 		hslToHex
 	} from '../engine/index.js';
-	import type { BrandInput } from '../engine/index.js';
 	import { bg } from '../actions';
 
 	let { mode = 'light' }: { mode?: 'light' | 'dark' } = $props();
 
 	let isDark = $derived(mode === 'dark');
-	let brand = $state<BrandInput>({ ...wizardState.brandHsb });
-
-	$effect(() => {
-		setBrandHsb(brand.h, brand.s, brand.b);
-	});
 
 	const SWATCH_TOKENS = [
 		{ key: '--dry-color-fill', label: 'Fill' },
@@ -44,32 +39,34 @@
 	);
 
 	let pickerColor = $derived.by(() => {
-		const hsl = hsbToHsl(brand.h, brand.s / 100, brand.b / 100);
+		const hsl = hsbToHsl(
+			wizardState.brandHsb.h,
+			wizardState.brandHsb.s / 100,
+			wizardState.brandHsb.b / 100
+		);
 		return hslToHex(hsl.h, hsl.s, hsl.l);
 	});
 
-	let pickerHex = $state('');
-
-	$effect(() => {
-		pickerHex = pickerColor;
-	});
-
-	$effect(() => {
-		if (pickerHex && pickerHex !== pickerColor) {
-			const hsl = hexToHsl(pickerHex);
+	const pickerModel = {
+		get hex() {
+			return pickerColor;
+		},
+		set hex(value: string) {
+			if (!value || value === pickerColor) return;
+			const hsl = hexToHsl(value);
 			const hsb = hslToHsb(hsl.h, hsl.s, hsl.l);
-			brand = { h: hsb.h, s: Math.round(hsb.s * 100), b: Math.round(hsb.b * 100) };
+			setBrandHsb(hsb.h, Math.round(hsb.s * 100), Math.round(hsb.b * 100));
 		}
-	});
+	};
 
 	function selectPreset(preset: (typeof PRESETS)[number]) {
-		brand = preset.brandInput;
+		setBrandHsb(preset.brandInput.h, preset.brandInput.s, preset.brandInput.b);
 	}
 </script>
 
 <section class="brand-section">
 	<div class="picker-wrap">
-		<ColorPicker.Root bind:value={pickerHex} areaHeight={160}>
+		<ColorPicker.Root bind:value={pickerModel.hex} areaHeight={160}>
 			<ColorPicker.Area />
 			<ColorPicker.HueSlider />
 			<ColorPicker.Input format="hex" />
@@ -90,22 +87,23 @@
 			{#each PRESETS as preset, i (preset.name)}
 				{@const presetTheme = PRESET_THEMES[i] ?? PRESET_THEMES[0]!}
 				{@const presetTokens = isDark ? presetTheme.dark : presetTheme.light}
-				<button
-					class="preset-btn"
-					data-selected={brand.h === preset.brandInput.h &&
-						brand.s === preset.brandInput.s &&
-						brand.b === preset.brandInput.b
-						? ''
-						: undefined}
-					onclick={() => selectPreset(preset)}
-				>
-					<div class="preset-thumb">
-						{#each SWATCH_TOKENS as { key } (key)}
-							<div class="preset-swatch" use:bg={presetTokens[key] ?? ''}></div>
-						{/each}
+				<Button type="button" variant="bare" onclick={() => selectPreset(preset)}>
+					<div
+						class="preset-btn"
+						data-selected={wizardState.brandHsb.h === preset.brandInput.h &&
+						wizardState.brandHsb.s === preset.brandInput.s &&
+						wizardState.brandHsb.b === preset.brandInput.b
+							? ''
+							: undefined}
+					>
+						<div class="preset-thumb">
+							{#each SWATCH_TOKENS as { key } (key)}
+								<div class="preset-swatch" use:bg={presetTokens[key] ?? ''}></div>
+							{/each}
+						</div>
+						<Text as="span" size="xs" color="muted">{preset.name.toLowerCase()}</Text>
 					</div>
-					<Text as="span" size="xs" color="muted">{preset.name.toLowerCase()}</Text>
-				</button>
+				</Button>
 			{/each}
 		</div>
 	</div>

package/dist/steps/Personality.svelte

@@ -12,22 +12,22 @@
 		{
 			value: 'minimal',
 			name: 'Minimal',
-			description: 'Flat, transparent, content-forward',
+			description: 'Flat, transparent, content-forward'
 		},
 		{
 			value: 'clean',
 			name: 'Clean',
-			description: 'Subtle separation, gentle edges',
+			description: 'Subtle separation, gentle edges'
 		},
 		{
 			value: 'structured',
 			name: 'Structured',
-			description: 'Clear regions, visible cards',
+			description: 'Clear regions, visible cards'
 		},
 		{
 			value: 'rich',
 			name: 'Rich',
-			description: 'Elevated surfaces, deep layering',
+			description: 'Elevated surfaces, deep layering'
 		}
 	];
 

package/dist/steps/PreviewExport.svelte

@@ -24,6 +24,12 @@
 			for (const [name, value] of Object.entries(tokens)) {
 				node.style.setProperty(name, value);
 			}
+
+			return () => {
+				for (const name of Object.keys(tokens)) {
+					node.style.removeProperty(name);
+				}
+			};
 		};
 	}
 
@@ -57,11 +63,7 @@
 		</div>
 	</div>
 
-	<div
-		class="preview-scene"
-		data-mode={mode}
-		{@attach attachThemeTokens(tokens)}
-	>
+	<div class="preview-scene" data-mode={mode} {@attach attachThemeTokens(tokens)}>
 		{#if preview}
 			{@render preview()}
 		{:else}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/theme-wizard",
-  "version": "2.0.0",
+  "version": "4.0.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -37,20 +37,20 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "peerDependencies": {
-    "@dryui/primitives": "^0.2.0",
-    "@dryui/ui": "^0.2.0",
+    "@dryui/primitives": "^0.4.0",
+    "@dryui/ui": "^0.4.0",
     "lucide-svelte": ">=1.0.1",
     "svelte": "^5.55.1"
   },
   "devDependencies": {
     "@dryui/lint": "^0.2.0",
-    "@dryui/primitives": "^0.2.0",
-    "@dryui/ui": "^0.2.0",
+    "@dryui/primitives": "^0.4.0",
+    "@dryui/ui": "^0.4.0",
     "lucide-svelte": "^1.0.1",
-    "svelte": "^5.55.1",
+    "svelte": "^5.55.3",
     "@sveltejs/package": "^2.5.7",
     "svelte-check": "^4.4.6",
-    "bun-types": "^1.3.11",
+    "bun-types": "^1.3.12",
     "typescript": "^6.0.2"
   }
 }