@dryui/theme-wizard 3.0.0 → 4.0.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/theme-wizard",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -37,15 +37,15 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "peerDependencies": {
-    "@dryui/primitives": "^0.3.0",
-    "@dryui/ui": "^0.3.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.3.0",
-    "@dryui/ui": "^0.3.0",
+    "@dryui/primitives": "^0.4.0",
+    "@dryui/ui": "^0.4.0",
     "lucide-svelte": "^1.0.1",
     "svelte": "^5.55.3",
     "@sveltejs/package": "^2.5.7",