@dryui/theme-wizard 4.0.0 → 5.0.1

package/dist/state.svelte.js

@@ -1,574 +0,0 @@
-import { untrack } from 'svelte';
-import { generateTheme } from './engine/derivation.js';
-import { PRESETS } from './engine/presets.js';
-function fmtRem(value) {
-    return `${parseFloat(value.toFixed(4))}rem`;
-}
-const STORAGE_KEY = 'dryui-theme-wizard';
-const DEFAULTS = {
-    currentStep: 1,
-    personality: 'structured',
-    brandHsb: { h: 230, s: 65, b: 85 },
-    neutralMode: 'monochromatic',
-    statusHues: { error: 0, warning: 40, success: 145, info: 210 },
-    darkBgOverrides: {},
-    fastTrack: false,
-    typography: {
-        fontPreset: 'System',
-        scale: 'default'
-    },
-    shape: {
-        radiusPreset: 'soft',
-        radiusScale: 1,
-        density: 'default'
-    },
-    shadows: {
-        preset: 'elevated',
-        intensity: 1,
-        tintBrand: true
-    }
-};
-function loadPersistedState() {
-    if (typeof sessionStorage === 'undefined')
-        return DEFAULTS;
-    try {
-        const raw = sessionStorage.getItem(STORAGE_KEY);
-        if (!raw)
-            return DEFAULTS;
-        const saved = JSON.parse(raw);
-        return { ...DEFAULTS, ...saved };
-    }
-    catch {
-        return DEFAULTS;
-    }
-}
-let persistTimer;
-function persistState() {
-    if (typeof sessionStorage === 'undefined')
-        return;
-    clearTimeout(persistTimer);
-    persistTimer = setTimeout(() => {
-        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,
-                    neutralMode,
-                    statusHues,
-                    darkBgOverrides,
-                    typography,
-                    shape,
-                    shadows,
-                    tokens
-                }));
-            }
-            catch {
-                // storage full or unavailable — ignore
-            }
-        });
-    }, 300);
-}
-const initial = loadPersistedState();
-export const wizardState = $state({
-    currentStep: initial.currentStep,
-    personality: initial.personality,
-    brandHsb: initial.brandHsb,
-    neutralMode: initial.neutralMode,
-    statusHues: initial.statusHues,
-    darkBgOverrides: initial.darkBgOverrides,
-    fastTrack: initial.fastTrack,
-    typography: initial.typography,
-    shape: initial.shape,
-    shadows: initial.shadows
-});
-// ─── Derived theme ────────────────────────────────────────────────────────────
-const derivedTheme = $derived.by(() => {
-    return {
-        value: generateTheme(wizardState.brandHsb, {
-            neutralMode: wizardState.neutralMode,
-            statusHues: wizardState.statusHues,
-            darkBg: wizardState.darkBgOverrides
-        })
-    };
-});
-export function getDerivedTheme() {
-    return derivedTheme.value;
-}
-// ─── Exported functions ───────────────────────────────────────────────────────
-/** Update the brand color (h: 0-360, s/b: 0-100). */
-export function setBrandHsb(h, s, b) {
-    wizardState.brandHsb = { h, s, b };
-    persistState();
-}
-/** Update a single status tone's hue. */
-export function setStatusHue(tone, hue) {
-    wizardState.statusHues[tone] = hue;
-    persistState();
-}
-/** Update the neutral palette mode. */
-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;
-    // Cross-step defaults
-    const PERSONALITY_SHADOW = {
-        minimal: 'flat',
-        clean: 'flat',
-        structured: 'elevated',
-        rich: 'deep'
-    };
-    const PERSONALITY_RADIUS = {
-        minimal: 'soft',
-        clean: 'soft',
-        structured: 'soft',
-        rich: 'rounded'
-    };
-    wizardState.shadows.preset = PERSONALITY_SHADOW[p];
-    wizardState.shape.radiusPreset = PERSONALITY_RADIUS[p];
-}
-/** Set the personality (chrome level) and apply cross-step defaults. */
-export function setPersonality(p) {
-    resetStyleStateToDefaults();
-    applyPersonalityDefaults(p);
-    persistState();
-}
-/** Override a dark background level. */
-export function setDarkBg(level, value) {
-    wizardState.darkBgOverrides[level] = value;
-    persistState();
-}
-/** Navigate to a specific step (1–5). */
-export function setStep(n) {
-    wizardState.currentStep = Math.max(1, Math.min(5, n));
-}
-/** Advance to the next step. */
-export function goNextStep() {
-    setStep(wizardState.currentStep + 1);
-}
-/** Go back to the previous step. */
-export function goPrevStep() {
-    setStep(wizardState.currentStep - 1);
-}
-/** Enable fast-track mode and jump to the final step. */
-export function activateFastTrack() {
-    wizardState.fastTrack = true;
-    setStep(5);
-}
-/** Apply a named preset from the PRESETS array. */
-export function applyPreset(name) {
-    const preset = PRESETS.find((p) => p.name.toLowerCase() === name.toLowerCase());
-    if (!preset) {
-        throw new Error(`Unknown preset: "${name}"`);
-    }
-    wizardState.brandHsb = { ...preset.brandInput };
-    persistState();
-}
-/**
- * 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 function getStyleString(mode) {
-    return Object.entries(getAllTokens(mode))
-        .map(([name, value]) => `${name}: ${value}`)
-        .join('; ');
-}
-/** Update the font preset name. */
-export function setFontPreset(preset) {
-    wizardState.typography.fontPreset = preset;
-    persistState();
-}
-/** Update the type scale. */
-export function setTypeScale(scale) {
-    wizardState.typography.scale = scale;
-    persistState();
-}
-/** Reset all wizard state to defaults. */
-export function resetToDefaults() {
-    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);
-    }
-}
-/** Apply a full wizard recipe, using personality defaults before explicit overrides. */
-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.fastTrack = false;
-    wizardState.typography = recipe.typography
-        ? { ...recipe.typography }
-        : { ...DEFAULTS.typography };
-    applyPersonalityDefaults(recipe.personality ?? DEFAULTS.personality);
-    if (recipe.shape) {
-        wizardState.shape = { ...recipe.shape };
-    }
-    if (recipe.shadows) {
-        wizardState.shadows = { ...recipe.shadows };
-    }
-    persistState();
-}
-// ─── Shape & spacing ─────────────────────────────────────────────────────────
-export function setRadiusPreset(preset) {
-    wizardState.shape.radiusPreset = preset;
-    wizardState.shape.radiusScale = 1;
-    persistState();
-}
-export function setRadiusScale(scale) {
-    wizardState.shape.radiusScale = scale;
-    persistState();
-}
-export function setDensity(density) {
-    wizardState.shape.density = density;
-    persistState();
-}
-export const RADIUS_PRESETS = {
-    sharp: { sm: 0, md: 2, lg: 2, xl: 4, '2xl': 4, full: 9999 },
-    soft: { sm: 4, md: 8, lg: 8, xl: 12, '2xl': 16, full: 9999 },
-    rounded: { sm: 8, md: 12, lg: 16, xl: 20, '2xl': 24, full: 9999 },
-    pill: { sm: 9999, md: 9999, lg: 16, xl: 20, '2xl': 24, full: 9999 }
-};
-const DENSITY_FACTORS = {
-    compact: 0.85,
-    default: 1,
-    spacious: 1.15
-};
-// ─── Shadows & elevation ────────────────────────────────────────────────────
-export function setShadowPreset(preset) {
-    wizardState.shadows.preset = preset;
-    persistState();
-}
-export function setShadowIntensity(intensity) {
-    wizardState.shadows.intensity = intensity;
-    persistState();
-}
-export function setShadowTint(tint) {
-    wizardState.shadows.tintBrand = tint;
-    persistState();
-}
-const SHADOW_DEFS = {
-    flat: {
-        raised: [],
-        overlay: []
-    },
-    subtle: {
-        raised: [
-            { y: 1, blur: 3, lightA: 0.06, darkA: 0.5 },
-            { y: 1, blur: 2, lightA: 0.04, darkA: 0.35 }
-        ],
-        overlay: [
-            { y: 4, blur: 16, lightA: 0.1, darkA: 0.6 },
-            { y: 2, blur: 6, lightA: 0.06, darkA: 0.4 }
-        ]
-    },
-    elevated: {
-        raised: [
-            { y: 2, blur: 6, lightA: 0.1, darkA: 0.65 },
-            { y: 1, blur: 3, lightA: 0.07, darkA: 0.45 }
-        ],
-        overlay: [
-            { y: 8, blur: 28, lightA: 0.14, darkA: 0.7 },
-            { y: 3, blur: 10, lightA: 0.1, darkA: 0.5 }
-        ]
-    },
-    deep: {
-        raised: [
-            { y: 4, blur: 14, lightA: 0.16, darkA: 0.8 },
-            { y: 2, blur: 5, lightA: 0.1, darkA: 0.55 }
-        ],
-        overlay: [
-            { y: 16, blur: 48, lightA: 0.22, darkA: 0.85 },
-            { y: 6, blur: 18, lightA: 0.14, darkA: 0.6 }
-        ]
-    }
-};
-function buildShadowValue(layers, mode, hue, sat, lightness, intensity) {
-    if (layers.length === 0)
-        return 'none';
-    return layers
-        .map((l) => {
-        const a = (mode === 'light' ? l.lightA : l.darkA) * intensity;
-        return `0 ${l.y}px ${l.blur}px hsla(${hue}, ${sat}%, ${lightness}%, ${Math.min(a, 1).toFixed(3)})`;
-    })
-        .join(', ');
-}
-export function getShadowTokens(shadowPreset = wizardState.shadows.preset, shadowIntensity = wizardState.shadows.intensity, tintBrand = wizardState.shadows.tintBrand, brandHue = wizardState.brandHsb.h) {
-    const H = Math.round(brandHue);
-    const hue = tintBrand ? H : 0;
-    const def = SHADOW_DEFS[shadowPreset];
-    return {
-        light: {
-            '--dry-shadow-raised': buildShadowValue(def.raised, 'light', hue, 20, 20, shadowIntensity),
-            '--dry-shadow-overlay': buildShadowValue(def.overlay, 'light', hue, 20, 20, shadowIntensity)
-        },
-        dark: {
-            '--dry-shadow-raised': buildShadowValue(def.raised, 'dark', hue, 15, 2, shadowIntensity),
-            '--dry-shadow-overlay': buildShadowValue(def.overlay, 'dark', hue, 15, 2, shadowIntensity)
-        }
-    };
-}
-const SPACE_SCALE = [
-    ['0_5', 0.125],
-    ['1', 0.25],
-    ['1_5', 0.375],
-    ['2', 0.5],
-    ['2_5', 0.625],
-    ['3', 0.75],
-    ['3_5', 0.875],
-    ['4', 1],
-    ['5', 1.25],
-    ['6', 1.5],
-    ['7', 1.75],
-    ['8', 2],
-    ['9', 2.25],
-    ['10', 2.5],
-    ['11', 2.75],
-    ['12', 3],
-    ['14', 3.5],
-    ['16', 4],
-    ['20', 5],
-    ['24', 6],
-    ['32', 8]
-];
-export function getShapeTokens(radiusPreset = wizardState.shape.radiusPreset, radiusScale = wizardState.shape.radiusScale, densityPreset = wizardState.shape.density) {
-    const preset = RADIUS_PRESETS[radiusPreset];
-    const scale = radiusScale;
-    const density = DENSITY_FACTORS[densityPreset];
-    const tokens = {};
-    for (const [key, base] of Object.entries(preset)) {
-        let px;
-        if (base >= 9999) {
-            px = scale >= 1 ? 9999 : Math.round(24 * scale);
-        }
-        else {
-            px = Math.round(base * scale);
-        }
-        tokens[`--dry-radius-${key}`] = `${px}px`;
-    }
-    for (const [key, rem] of SPACE_SCALE) {
-        tokens[`--dry-space-${key}`] = fmtRem(rem * density);
-    }
-    return tokens;
-}
-// ─── Personality / chrome ───────────────────────────────────────────────────
-const PERSONALITY_TOKENS = {
-    minimal: {
-        // Surface role
-        '--dry-surface-bg': 'transparent',
-        '--dry-surface-border': 'transparent',
-        '--dry-surface-shadow': 'none',
-        '--dry-surface-radius': '0',
-        '--dry-surface-padding': 'var(--dry-space-4)',
-        // Chrome role
-        '--dry-chrome-bg': 'transparent',
-        '--dry-chrome-border': 'transparent',
-        '--dry-chrome-shadow': 'none',
-        // Overlay role
-        '--dry-overlay-bg': 'var(--dry-color-bg-overlay)',
-        '--dry-overlay-border': 'var(--dry-color-stroke-weak)',
-        '--dry-overlay-shadow': 'var(--dry-shadow-sm)',
-        '--dry-overlay-radius': 'var(--dry-radius-lg)',
-        // Control role
-        '--dry-control-bg': 'transparent',
-        '--dry-control-border': 'var(--dry-color-stroke-weak)',
-        '--dry-control-radius': 'var(--dry-radius-sm)',
-        // Page role
-        '--dry-page-bg': 'transparent',
-        '--dry-page-border': 'transparent',
-        '--dry-page-shadow': 'none',
-        '--dry-page-radius': '0'
-    },
-    clean: {
-        // Surface role
-        '--dry-surface-bg': 'var(--dry-color-bg-raised)',
-        '--dry-surface-border': 'transparent',
-        '--dry-surface-shadow': 'none',
-        '--dry-surface-radius': 'var(--dry-radius-lg)',
-        '--dry-surface-padding': 'var(--dry-space-6)',
-        // Chrome role
-        '--dry-chrome-bg': 'transparent',
-        '--dry-chrome-border': 'var(--dry-color-stroke-weak)',
-        '--dry-chrome-shadow': 'none',
-        // Overlay role
-        '--dry-overlay-bg': 'var(--dry-color-bg-overlay)',
-        '--dry-overlay-border': 'var(--dry-color-stroke-weak)',
-        '--dry-overlay-shadow': 'var(--dry-shadow-md)',
-        '--dry-overlay-radius': 'var(--dry-radius-lg)',
-        // Control role
-        '--dry-control-bg': 'var(--dry-color-bg-raised)',
-        '--dry-control-border': 'var(--dry-color-stroke-strong)',
-        '--dry-control-radius': 'var(--dry-radius-md)',
-        // Page role
-        '--dry-page-bg': 'transparent',
-        '--dry-page-border': 'transparent',
-        '--dry-page-shadow': 'none',
-        '--dry-page-radius': 'var(--dry-radius-lg)'
-    },
-    structured: {
-        // Surface role
-        '--dry-surface-bg': 'var(--dry-color-bg-raised)',
-        '--dry-surface-border': 'var(--dry-color-stroke-weak)',
-        '--dry-surface-shadow': 'var(--dry-shadow-raised)',
-        '--dry-surface-radius': 'var(--dry-radius-xl)',
-        '--dry-surface-padding': 'var(--dry-space-8)',
-        // Chrome role
-        '--dry-chrome-bg': 'var(--dry-color-bg-raised)',
-        '--dry-chrome-border': 'var(--dry-color-stroke-weak)',
-        '--dry-chrome-shadow': 'var(--dry-shadow-sm)',
-        // Overlay role
-        '--dry-overlay-bg': 'var(--dry-color-bg-overlay)',
-        '--dry-overlay-border': 'var(--dry-color-stroke-weak)',
-        '--dry-overlay-shadow': 'var(--dry-shadow-lg)',
-        '--dry-overlay-radius': 'var(--dry-radius-xl)',
-        // Control role
-        '--dry-control-bg': 'var(--dry-color-bg-raised)',
-        '--dry-control-border': 'var(--dry-color-stroke-strong)',
-        '--dry-control-radius': 'var(--dry-radius-md)',
-        // Page role
-        '--dry-page-bg': 'var(--dry-color-bg-overlay)',
-        '--dry-page-border': 'var(--dry-color-stroke-weak)',
-        '--dry-page-shadow': 'var(--dry-shadow-sm)',
-        '--dry-page-radius': 'var(--dry-radius-xl)'
-    },
-    rich: {
-        // Surface role
-        '--dry-surface-bg': 'var(--dry-color-bg-overlay)',
-        '--dry-surface-border': 'var(--dry-color-stroke-weak)',
-        '--dry-surface-shadow': 'var(--dry-shadow-overlay)',
-        '--dry-surface-radius': 'var(--dry-radius-2xl)',
-        '--dry-surface-padding': 'var(--dry-space-10)',
-        // Chrome role
-        '--dry-chrome-bg': 'var(--dry-color-bg-overlay)',
-        '--dry-chrome-border': 'var(--dry-color-stroke-weak)',
-        '--dry-chrome-shadow': 'var(--dry-shadow-overlay)',
-        // Overlay role
-        '--dry-overlay-bg': 'var(--dry-color-bg-overlay)',
-        '--dry-overlay-border': 'var(--dry-color-stroke-weak)',
-        '--dry-overlay-shadow': 'var(--dry-shadow-overlay)',
-        '--dry-overlay-radius': 'var(--dry-radius-2xl)',
-        // Control role
-        '--dry-control-bg': 'var(--dry-color-bg-raised)',
-        '--dry-control-border': 'var(--dry-color-stroke-strong)',
-        '--dry-control-radius': 'var(--dry-radius-lg)',
-        // Page role
-        '--dry-page-bg': 'var(--dry-color-bg-raised)',
-        '--dry-page-border': 'var(--dry-color-stroke-weak)',
-        '--dry-page-shadow': 'var(--dry-shadow-overlay)',
-        '--dry-page-radius': 'var(--dry-radius-2xl)'
-    }
-};
-export function getPersonalityTokens() {
-    return PERSONALITY_TOKENS[wizardState.personality];
-}
-// ─── Typography tokens ──────────────────────────────────────────────────────
-export const FONT_STACKS = {
-    System: 'ui-sans-serif, system-ui, -apple-system, sans-serif',
-    Humanist: 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", sans-serif',
-    Geometric: 'Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif',
-    Classical: 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif',
-    Serif: 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif',
-    Mono: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace'
-};
-const TYPE_BASE = {
-    display: { size: 3.5, leading: 4 },
-    'heading-1': { size: 2.5, leading: 3 },
-    'heading-2': { size: 2, leading: 2.5 },
-    'heading-3': { size: 1.5, leading: 2 },
-    'heading-4': { size: 1.25, leading: 1.75 },
-    small: { size: 1, leading: 1.5 },
-    tiny: { size: 0.875, leading: 1.25 }
-};
-const TYPE_SCALE_FACTORS = {
-    compact: 0.9,
-    default: 1,
-    spacious: 1.1
-};
-export function getTypographyTokens(fontPreset = wizardState.typography.fontPreset, scale = wizardState.typography.scale) {
-    const factor = TYPE_SCALE_FACTORS[scale];
-    const tokens = {
-        '--dry-font-sans': FONT_STACKS[fontPreset]
-    };
-    for (const [name, { size, leading }] of Object.entries(TYPE_BASE)) {
-        tokens[`--dry-type-${name}-size`] = fmtRem(size * factor);
-        tokens[`--dry-type-${name}-leading`] = fmtRem(leading * factor);
-    }
-    return tokens;
-}
-/** Return all tokens (color + shape + shadow + personality + typography) merged for a given mode. */
-export function getAllTokens(mode = 'light') {
-    const m = mode;
-    const theme = derivedTheme.value;
-    const colorTokens = m === 'dark' ? theme.dark : theme.light;
-    const shapeTokens = getShapeTokens();
-    const shadows = getShadowTokens();
-    const shadowTokens = shadows[m];
-    const personalityTokens = getPersonalityTokens();
-    const typographyTokens = getTypographyTokens();
-    return {
-        ...colorTokens,
-        ...shapeTokens,
-        ...shadowTokens,
-        ...personalityTokens,
-        ...typographyTokens
-    };
-}
-/** Return only tokens that the user has changed from defaults. */
-export function getOverrideTokens(mode = 'light') {
-    const all = getAllTokens(mode);
-    const m = mode;
-    const base = getDefaultAllTokens(m);
-    const overrides = {};
-    for (const k in all) {
-        if (all[k] !== base[k]) {
-            overrides[k] = all[k];
-        }
-    }
-    return overrides;
-}
-/** getAllTokens computed with DEFAULTS — cached per mode. */
-function getDefaultAllTokens(mode) {
-    return (defaultAllTokensCache[mode] ??= computeDefaultAllTokens(mode));
-}
-const defaultAllTokensCache = {};
-function computeDefaultAllTokens(mode) {
-    const theme = generateTheme(DEFAULTS.brandHsb, {
-        neutralMode: DEFAULTS.neutralMode,
-        statusHues: DEFAULTS.statusHues,
-        darkBg: DEFAULTS.darkBgOverrides
-    });
-    const colorTokens = mode === 'dark' ? theme.dark : theme.light;
-    const shapeTokens = getShapeTokens(DEFAULTS.shape.radiusPreset, DEFAULTS.shape.radiusScale, DEFAULTS.shape.density);
-    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
-    };
-}