@dryui/theme-wizard 4.0.0 → 5.0.0

package/dist/engine/url-codec.js

@@ -1,243 +0,0 @@
-/**
- * Encode wizard input state into a compact URL-safe string.
- *
- * Format: `h{hue}s{sat}b{bri}` with optional `-n` neutral-mode flag and
- * `-e{error}w{warning}s{success}i{info}` status suffix.
- *
- * Examples:
- *   Default brand only:             `h230s65b85`
- *   Brand + status hue overrides:   `h230s65b85-e350w45`
- */
-export function encodeTheme(input) {
-    const { brand, options } = input;
-    const segments = [
-        `h${Math.round(brand.h)}s${Math.round(brand.s)}b${Math.round(brand.b)}`
-    ];
-    if (options?.neutralMode === 'neutral') {
-        segments.push('n');
-    }
-    const sh = options?.statusHues;
-    if (sh && Object.keys(sh).length > 0) {
-        const parts = [];
-        if (sh.error !== undefined)
-            parts.push(`e${Math.round(sh.error)}`);
-        if (sh.warning !== undefined)
-            parts.push(`w${Math.round(sh.warning)}`);
-        if (sh.success !== undefined)
-            parts.push(`s${Math.round(sh.success)}`);
-        if (sh.info !== undefined)
-            parts.push(`i${Math.round(sh.info)}`);
-        if (parts.length > 0) {
-            segments.push(parts.join(''));
-        }
-    }
-    return segments.join('-');
-}
-/**
- * Decode a compact theme string back into brand input and options.
- *
- * Throws if the string is not a valid encoded theme.
- */
-export function decodeTheme(encoded) {
-    if (!encoded) {
-        throw new Error('Empty encoded theme string');
-    }
-    // Parse brand: h{hue}s{sat}b{bri}
-    const [brandPart, ...segments] = encoded.split('-');
-    if (brandPart === undefined) {
-        throw new Error('Missing brand segment');
-    }
-    const brandMatch = brandPart.match(/^h(\d+(?:\.\d+)?)s(\d+(?:\.\d+)?)b(\d+(?:\.\d+)?)$/);
-    if (!brandMatch ||
-        brandMatch[1] === undefined ||
-        brandMatch[2] === undefined ||
-        brandMatch[3] === undefined) {
-        throw new Error(`Invalid brand segment: "${brandPart}"`);
-    }
-    const brand = {
-        h: parseFloat(brandMatch[1]),
-        s: parseFloat(brandMatch[2]),
-        b: parseFloat(brandMatch[3])
-    };
-    if (segments.length === 0) {
-        return { brand };
-    }
-    const options = {};
-    const statusHues = {};
-    let hasStatusHues = false;
-    for (const segment of segments) {
-        if (segment === 'n') {
-            options.neutralMode = 'neutral';
-            continue;
-        }
-        // Parse status hues: sequences of letter+digits, e.g. e350w45s145i210
-        const statusRegex = /([ewsi])(\d+(?:\.\d+)?)/g;
-        let match;
-        while ((match = statusRegex.exec(segment)) !== null) {
-            const key = match[1];
-            const rawHue = match[2];
-            if (key === undefined || rawHue === undefined)
-                continue;
-            const hue = parseFloat(rawHue);
-            if (key === 'e')
-                statusHues.error = hue;
-            else if (key === 'w')
-                statusHues.warning = hue;
-            else if (key === 's')
-                statusHues.success = hue;
-            else if (key === 'i')
-                statusHues.info = hue;
-            hasStatusHues = true;
-        }
-    }
-    if (hasStatusHues) {
-        options.statusHues = statusHues;
-    }
-    if (Object.keys(options).length > 0) {
-        return { brand, options };
-    }
-    return { brand };
-}
-// ─── Full wizard recipe codec ────────────────────────────────────────────────
-// Encodes ALL wizard inputs into a single compact hash.
-// Format: h{h}s{s}b{b}[-n][-e{h}w{h}s{h}i{h}][-l{0-3}][-f{0-5}c{0-2}][-p{0-3}d{0-2}k{scale*100}][-x{0-3}y{int*100}z{0|1}]
-// Example: h230s65b85-e0w40s145i210-l2-f0c1-p1d1k100-x2y100z1
-const PERSONALITY_NAMES = ['minimal', 'clean', 'structured', 'rich'];
-const PERSONALITY_INDEX = Object.fromEntries(PERSONALITY_NAMES.map((n, i) => [n, i]));
-const FONT_NAMES = ['System', 'Humanist', 'Geometric', 'Classical', 'Serif', 'Mono'];
-const FONT_INDEX = Object.fromEntries(FONT_NAMES.map((n, i) => [n, i]));
-const SCALE_NAMES = ['compact', 'default', 'spacious'];
-const SCALE_INDEX = Object.fromEntries(SCALE_NAMES.map((n, i) => [n, i]));
-const RADIUS_NAMES = ['sharp', 'soft', 'rounded', 'pill'];
-const RADIUS_INDEX = Object.fromEntries(RADIUS_NAMES.map((n, i) => [n, i]));
-const SHADOW_NAMES = ['flat', 'subtle', 'elevated', 'deep'];
-const SHADOW_INDEX = Object.fromEntries(SHADOW_NAMES.map((n, i) => [n, i]));
-export function encodeRecipe(recipe) {
-    const { brand } = recipe;
-    const parts = [`h${Math.round(brand.h)}s${Math.round(brand.s)}b${Math.round(brand.b)}`];
-    if (recipe.neutralMode === 'neutral')
-        parts.push('n');
-    const sh = recipe.statusHues;
-    if (sh) {
-        const sp = [];
-        if (sh.error !== undefined)
-            sp.push(`e${Math.round(sh.error)}`);
-        if (sh.warning !== undefined)
-            sp.push(`w${Math.round(sh.warning)}`);
-        if (sh.success !== undefined)
-            sp.push(`s${Math.round(sh.success)}`);
-        if (sh.info !== undefined)
-            sp.push(`i${Math.round(sh.info)}`);
-        if (sp.length > 0)
-            parts.push(sp.join(''));
-    }
-    if (recipe.personality) {
-        const li = PERSONALITY_INDEX[recipe.personality] ?? 2;
-        parts.push(`l${li}`);
-    }
-    if (recipe.typography) {
-        const fi = FONT_INDEX[recipe.typography.fontPreset] ?? 0;
-        const si = SCALE_INDEX[recipe.typography.scale] ?? 1;
-        parts.push(`f${fi}c${si}`);
-    }
-    if (recipe.shape) {
-        const ri = RADIUS_INDEX[recipe.shape.radiusPreset] ?? 1;
-        const di = SCALE_INDEX[recipe.shape.density] ?? 1;
-        const ks = Math.round(recipe.shape.radiusScale * 100);
-        parts.push(`p${ri}d${di}k${ks}`);
-    }
-    if (recipe.shadows) {
-        const xi = SHADOW_INDEX[recipe.shadows.preset] ?? 2;
-        const yi = Math.round(recipe.shadows.intensity * 100);
-        const zi = recipe.shadows.tintBrand ? 1 : 0;
-        parts.push(`x${xi}y${yi}z${zi}`);
-    }
-    return parts.join('-');
-}
-export function decodeRecipe(encoded) {
-    if (!encoded)
-        throw new Error('Empty recipe string');
-    const [brandPart, ...segments] = encoded.split('-');
-    if (!brandPart)
-        throw new Error('Missing brand segment');
-    const brandMatch = brandPart.match(/^h(\d+(?:\.\d+)?)s(\d+(?:\.\d+)?)b(\d+(?:\.\d+)?)$/);
-    if (!brandMatch || !brandMatch[1] || !brandMatch[2] || !brandMatch[3]) {
-        throw new Error(`Invalid brand segment: "${brandPart}"`);
-    }
-    const recipe = {
-        brand: {
-            h: parseFloat(brandMatch[1]),
-            s: parseFloat(brandMatch[2]),
-            b: parseFloat(brandMatch[3])
-        }
-    };
-    const statusHues = {};
-    let hasStatus = false;
-    for (const seg of segments) {
-        if (seg === 'n') {
-            recipe.neutralMode = 'neutral';
-            continue;
-        }
-        // Personality: l{0-3}
-        const personalityMatch = seg.match(/^l([0-3])$/);
-        if (personalityMatch && personalityMatch[1] !== undefined) {
-            recipe.personality = (PERSONALITY_NAMES[parseInt(personalityMatch[1])] ??
-                'structured');
-            continue;
-        }
-        // Typography: f{idx}c{idx}
-        const typoMatch = seg.match(/^f(\d)c(\d)$/);
-        if (typoMatch && typoMatch[1] !== undefined && typoMatch[2] !== undefined) {
-            recipe.typography = {
-                fontPreset: FONT_NAMES[parseInt(typoMatch[1])] ?? 'System',
-                scale: (SCALE_NAMES[parseInt(typoMatch[2])] ?? 'default')
-            };
-            continue;
-        }
-        // Shape: p{idx}d{idx}k{scale*100}
-        const shapeMatch = seg.match(/^p(\d)d(\d)k(\d+)$/);
-        if (shapeMatch &&
-            shapeMatch[1] !== undefined &&
-            shapeMatch[2] !== undefined &&
-            shapeMatch[3] !== undefined) {
-            recipe.shape = {
-                radiusPreset: (RADIUS_NAMES[parseInt(shapeMatch[1])] ?? 'soft'),
-                density: (SCALE_NAMES[parseInt(shapeMatch[2])] ?? 'default'),
-                radiusScale: parseInt(shapeMatch[3]) / 100
-            };
-            continue;
-        }
-        // Shadows: x{idx}y{int*100}z{0|1}
-        const shadowMatch = seg.match(/^x(\d)y(\d+)z([01])$/);
-        if (shadowMatch &&
-            shadowMatch[1] !== undefined &&
-            shadowMatch[2] !== undefined &&
-            shadowMatch[3] !== undefined) {
-            recipe.shadows = {
-                preset: (SHADOW_NAMES[parseInt(shadowMatch[1])] ?? 'elevated'),
-                intensity: parseInt(shadowMatch[2]) / 100,
-                tintBrand: shadowMatch[3] === '1'
-            };
-            continue;
-        }
-        // Status hues: e{h}w{h}s{h}i{h}
-        const statusRegex = /([ewsi])(\d+(?:\.\d+)?)/g;
-        let match;
-        while ((match = statusRegex.exec(seg)) !== null) {
-            const key = match[1];
-            const hue = parseFloat(match[2]);
-            if (key === 'e')
-                statusHues.error = hue;
-            else if (key === 'w')
-                statusHues.warning = hue;
-            else if (key === 's')
-                statusHues.success = hue;
-            else if (key === 'i')
-                statusHues.info = hue;
-            hasStatus = true;
-        }
-    }
-    if (hasStatus)
-        recipe.statusHues = statusHues;
-    return recipe;
-}

package/dist/engine/url-codec.test.d.ts

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

package/dist/engine/url-codec.test.js

@@ -1,137 +0,0 @@
-// apps/docs/src/lib/theme-wizard/url-codec.test.ts
-import { describe, test, expect } from 'bun:test';
-import { encodeTheme, decodeTheme } from './url-codec.js';
-// ─── Round-trip helpers ────────────────────────────────────────────────────────
-function roundTrip(brand, options) {
-    const input = options !== undefined ? { brand, options } : { brand };
-    const encoded = encodeTheme(input);
-    return { encoded, decoded: decodeTheme(encoded) };
-}
-// ─── Encoding ─────────────────────────────────────────────────────────────────
-describe('encodeTheme', () => {
-    test('encodes default brand to h230s65b85', () => {
-        const encoded = encodeTheme({ brand: { h: 230, s: 65, b: 85 } });
-        expect(encoded).toBe('h230s65b85');
-    });
-    test('encodes ocean brand to h200s80b70', () => {
-        const encoded = encodeTheme({ brand: { h: 200, s: 80, b: 70 } });
-        expect(encoded).toBe('h200s80b70');
-    });
-    test('encodes brand without options — no dash suffix', () => {
-        const encoded = encodeTheme({ brand: { h: 145, s: 60, b: 55 } });
-        expect(encoded).not.toContain('-');
-    });
-    test('encodes brand + error hue override with dash separator', () => {
-        const encoded = encodeTheme({
-            brand: { h: 230, s: 65, b: 85 },
-            options: { statusHues: { error: 350 } }
-        });
-        expect(encoded).toBe('h230s65b85-e350');
-    });
-    test('encodes brand + multiple status hue overrides', () => {
-        const encoded = encodeTheme({
-            brand: { h: 230, s: 65, b: 85 },
-            options: { statusHues: { error: 350, warning: 45 } }
-        });
-        expect(encoded).toBe('h230s65b85-e350w45');
-    });
-    test('encodes all four status hues', () => {
-        const encoded = encodeTheme({
-            brand: { h: 230, s: 65, b: 85 },
-            options: { statusHues: { error: 0, warning: 40, success: 145, info: 210 } }
-        });
-        expect(encoded).toBe('h230s65b85-e0w40s145i210');
-    });
-    test('empty statusHues object produces no suffix', () => {
-        const encoded = encodeTheme({ brand: { h: 230, s: 65, b: 85 }, options: { statusHues: {} } });
-        expect(encoded).toBe('h230s65b85');
-    });
-    test('rounds fractional hue values', () => {
-        const encoded = encodeTheme({ brand: { h: 230.7, s: 65.4, b: 85.2 } });
-        expect(encoded).toBe('h231s65b85');
-    });
-});
-// ─── Decoding ─────────────────────────────────────────────────────────────────
-describe('decodeTheme', () => {
-    test('decodes h230s65b85 to default brand', () => {
-        const { brand } = decodeTheme('h230s65b85');
-        expect(brand).toEqual({ h: 230, s: 65, b: 85 });
-    });
-    test('decodes brand-only string — options is undefined', () => {
-        const result = decodeTheme('h200s80b70');
-        expect(result.options).toBeUndefined();
-    });
-    test('decodes string with single status hue override', () => {
-        const result = decodeTheme('h230s65b85-e350');
-        expect(result.brand).toEqual({ h: 230, s: 65, b: 85 });
-        expect(result.options?.statusHues?.error).toBe(350);
-    });
-    test('decodes string with multiple status hue overrides', () => {
-        const result = decodeTheme('h230s65b85-e350w45');
-        expect(result.options?.statusHues?.error).toBe(350);
-        expect(result.options?.statusHues?.warning).toBe(45);
-    });
-    test('decodes all four status hues', () => {
-        const result = decodeTheme('h230s65b85-e0w40s145i210');
-        expect(result.options?.statusHues).toEqual({
-            error: 0,
-            warning: 40,
-            success: 145,
-            info: 210
-        });
-    });
-    test('throws on empty string', () => {
-        expect(() => decodeTheme('')).toThrow();
-    });
-    test('throws on invalid brand segment', () => {
-        expect(() => decodeTheme('invalid')).toThrow();
-    });
-});
-// ─── Round-trip ───────────────────────────────────────────────────────────────
-describe('round-trip', () => {
-    test('default brand round-trips', () => {
-        const brand = { h: 230, s: 65, b: 85 };
-        const { decoded } = roundTrip(brand);
-        expect(decoded.brand).toEqual(brand);
-    });
-    test('ocean brand round-trips', () => {
-        const brand = { h: 200, s: 80, b: 70 };
-        const { decoded } = roundTrip(brand);
-        expect(decoded.brand).toEqual(brand);
-    });
-    test('forest brand round-trips', () => {
-        const brand = { h: 145, s: 60, b: 55 };
-        const { decoded } = roundTrip(brand);
-        expect(decoded.brand).toEqual(brand);
-    });
-    test('sunset brand round-trips', () => {
-        const brand = { h: 25, s: 80, b: 90 };
-        const { decoded } = roundTrip(brand);
-        expect(decoded.brand).toEqual(brand);
-    });
-    test('brand + error hue override round-trips', () => {
-        const brand = { h: 230, s: 65, b: 85 };
-        const options = { statusHues: { error: 350 } };
-        const { decoded } = roundTrip(brand, options);
-        expect(decoded.brand).toEqual(brand);
-        expect(decoded.options?.statusHues?.error).toBe(350);
-    });
-    test('brand + all status hues round-trips', () => {
-        const brand = { h: 230, s: 65, b: 85 };
-        const options = {
-            statusHues: { error: 5, warning: 38, success: 150, info: 205 }
-        };
-        const { decoded } = roundTrip(brand, options);
-        expect(decoded.brand).toEqual(brand);
-        expect(decoded.options?.statusHues).toEqual({ error: 5, warning: 38, success: 150, info: 205 });
-    });
-    test('compact string format — no redundant characters', () => {
-        const { encoded } = roundTrip({ h: 230, s: 65, b: 85 });
-        // Should be short: h230s65b85 = 10 chars
-        expect(encoded.length).toBeLessThanOrEqual(15);
-    });
-    test('encoded string only uses URL-safe characters', () => {
-        const { encoded } = roundTrip({ h: 230, s: 65, b: 85 }, { statusHues: { error: 0, warning: 40, success: 145, info: 210 } });
-        expect(encoded).toMatch(/^[a-zA-Z0-9-]+$/);
-    });
-});

package/dist/index.d.ts

@@ -1,15 +0,0 @@
-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';
-export { default as BrandColor } from './steps/BrandColor.svelte';
-export { default as Typography } from './steps/Typography.svelte';
-export { default as Shape } from './steps/Shape.svelte';
-export { default as PreviewExport } from './steps/PreviewExport.svelte';
-export { default as WizardShell } from './components/WizardShell.svelte';
-export { default as HsbPicker } from './components/HsbPicker.svelte';
-export { default as ContrastBadge } from './components/ContrastBadge.svelte';
-export { default as AlphaSlider } from './components/AlphaSlider.svelte';
-export { default as StepIndicator } from './components/StepIndicator.svelte';
-export { default as TokenPreview } from './components/TokenPreview.svelte';

package/dist/index.js

@@ -1,19 +0,0 @@
-// 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
-export { default as PersonalityStep } from './steps/Personality.svelte';
-export { default as BrandColor } from './steps/BrandColor.svelte';
-export { default as Typography } from './steps/Typography.svelte';
-export { default as Shape } from './steps/Shape.svelte';
-export { default as PreviewExport } from './steps/PreviewExport.svelte';
-// UI components
-export { default as WizardShell } from './components/WizardShell.svelte';
-export { default as HsbPicker } from './components/HsbPicker.svelte';
-export { default as ContrastBadge } from './components/ContrastBadge.svelte';
-export { default as AlphaSlider } from './components/AlphaSlider.svelte';
-export { default as StepIndicator } from './components/StepIndicator.svelte';
-export { default as TokenPreview } from './components/TokenPreview.svelte';

package/dist/state.svelte.d.ts

@@ -1,104 +0,0 @@
-import { type BrandInput, type ThemeTokens } from './engine/derivation.js';
-import type { WizardRecipe } from './engine/url-codec.js';
-export type PreviewMode = 'light' | 'dark' | 'side-by-side';
-export type NeutralMode = 'monochromatic' | 'neutral';
-export type RadiusPreset = 'sharp' | 'soft' | 'rounded' | 'pill';
-export type Density = 'compact' | 'default' | 'spacious';
-export type ShadowPreset = 'flat' | 'subtle' | 'elevated' | 'deep';
-export type Personality = 'minimal' | 'clean' | 'structured' | 'rich';
-export type FontPreset = 'System' | 'Humanist' | 'Geometric' | 'Classical' | 'Serif' | 'Mono';
-export type TypeScale = 'compact' | 'default' | 'spacious';
-export declare const wizardState: {
-    currentStep: number;
-    personality: Personality;
-    brandHsb: BrandInput;
-    neutralMode: NeutralMode;
-    statusHues: {
-        error: number;
-        warning: number;
-        success: number;
-        info: number;
-    };
-    darkBgOverrides: {
-        base?: string;
-        raised?: string;
-        overlay?: string;
-    };
-    fastTrack: boolean;
-    typography: {
-        fontPreset: FontPreset;
-        scale: TypeScale;
-    };
-    shape: {
-        radiusPreset: RadiusPreset;
-        radiusScale: number;
-        density: Density;
-    };
-    shadows: {
-        preset: ShadowPreset;
-        intensity: number;
-        tintBrand: boolean;
-    };
-};
-export declare function getDerivedTheme(): ThemeTokens;
-/** Update the brand color (h: 0-360, s/b: 0-100). */
-export declare function setBrandHsb(h: number, s: number, b: number): void;
-/** Update a single status tone's hue. */
-export declare function setStatusHue(tone: 'error' | 'warning' | 'success' | 'info', hue: number): void;
-/** Update the neutral palette mode. */
-export declare function setNeutralMode(mode: NeutralMode): void;
-/** Set the personality (chrome level) and apply cross-step defaults. */
-export declare function setPersonality(p: Personality): void;
-/** Override a dark background level. */
-export declare function setDarkBg(level: 'base' | 'raised' | 'overlay', value: string): void;
-/** Navigate to a specific step (1–5). */
-export declare function setStep(n: number): void;
-/** Advance to the next step. */
-export declare function goNextStep(): void;
-/** Go back to the previous step. */
-export declare function goPrevStep(): void;
-/** Enable fast-track mode and jump to the final step. */
-export declare function activateFastTrack(): void;
-/** Apply a named preset from the PRESETS array. */
-export declare function applyPreset(name: string): void;
-/**
- * Return a CSS custom property string for live preview injection.
- *
- * @param mode - 'light' | 'dark'
- * @returns e.g. `--dry-color-brand: hsl(230, 75%, 60%); ...`
- */
-export declare function getStyleString(mode: 'light' | 'dark'): string;
-/** Update the font preset name. */
-export declare function setFontPreset(preset: FontPreset): void;
-/** Update the type scale. */
-export declare function setTypeScale(scale: TypeScale): void;
-/** Reset all wizard state to defaults. */
-export declare function resetToDefaults(): void;
-/** Apply a full wizard recipe, using personality defaults before explicit overrides. */
-export declare function applyRecipe(recipe: WizardRecipe): void;
-export declare function setRadiusPreset(preset: RadiusPreset): void;
-export declare function setRadiusScale(scale: number): void;
-export declare function setDensity(density: Density): void;
-export declare const RADIUS_PRESETS: Record<RadiusPreset, {
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    '2xl': number;
-    full: number;
-}>;
-export declare function setShadowPreset(preset: ShadowPreset): void;
-export declare function setShadowIntensity(intensity: number): void;
-export declare function setShadowTint(tint: boolean): void;
-export declare function getShadowTokens(shadowPreset?: ShadowPreset, shadowIntensity?: number, tintBrand?: boolean, brandHue?: number): {
-    light: Record<string, string>;
-    dark: Record<string, string>;
-};
-export declare function getShapeTokens(radiusPreset?: RadiusPreset, radiusScale?: number, densityPreset?: Density): Record<string, string>;
-export declare function getPersonalityTokens(): Record<string, string>;
-export declare const FONT_STACKS: Record<FontPreset, string>;
-export declare function getTypographyTokens(fontPreset?: FontPreset, scale?: TypeScale): Record<string, string>;
-/** Return all tokens (color + shape + shadow + personality + typography) merged for a given mode. */
-export declare function getAllTokens(mode?: 'light' | 'dark'): Record<string, string>;
-/** Return only tokens that the user has changed from defaults. */
-export declare function getOverrideTokens(mode?: 'light' | 'dark'): Record<string, string>;