@dryui/theme-wizard 1.0.0

package/dist/engine/export-css.d.ts

@@ -0,0 +1,32 @@
+import type { ThemeTokens } from './derivation.js';
+export interface GenerateCssOptions {
+    personalityTokens?: Record<string, string>;
+    shapeTokens?: Record<string, string>;
+    shadowTokens?: {
+        light: Record<string, string>;
+        dark: Record<string, string>;
+    };
+}
+/**
+ * Generate CSS files from a ThemeTokens object.
+ *
+ * Returns:
+ *   defaultCss — `:root { ... }` block with all light tokens.
+ *   darkCss    — `[data-theme="dark"] { ... }` block plus `.theme-auto` media query.
+ */
+export declare function generateCss(theme: ThemeTokens, options?: GenerateCssOptions): {
+    defaultCss: string;
+    darkCss: string;
+};
+/**
+ * Trigger a browser download of the combined CSS as a single file.
+ */
+export declare function downloadCss(theme: ThemeTokens, filename?: string, options?: GenerateCssOptions): void;
+/**
+ * Copy the combined CSS to the clipboard.
+ */
+export declare function copyCss(theme: ThemeTokens, options?: GenerateCssOptions): Promise<void>;
+/**
+ * Return a JSON string containing the light and dark token maps.
+ */
+export declare function exportJson(theme: ThemeTokens): string;

package/dist/engine/export-css.js

@@ -0,0 +1,90 @@
+/**
+ * Generate CSS files from a ThemeTokens object.
+ *
+ * Returns:
+ *   defaultCss — `:root { ... }` block with all light tokens.
+ *   darkCss    — `[data-theme="dark"] { ... }` block plus `.theme-auto` media query.
+ */
+export function generateCss(theme, options) {
+    // Build default.css (:root block)
+    const defaultLines = [':root {'];
+    for (const [token, value] of Object.entries(theme.light)) {
+        defaultLines.push(`  ${token}: ${value};`);
+    }
+    // Shadow tokens (light mode)
+    if (options?.shadowTokens) {
+        for (const [token, value] of Object.entries(options.shadowTokens.light)) {
+            defaultLines.push(`  ${token}: ${value};`);
+        }
+    }
+    // Shape tokens (mode-independent, go in :root)
+    if (options?.shapeTokens) {
+        for (const [token, value] of Object.entries(options.shapeTokens)) {
+            defaultLines.push(`  ${token}: ${value};`);
+        }
+    }
+    // Personality tokens (use semantic refs, mode-independent, go in :root)
+    if (options?.personalityTokens) {
+        for (const [token, value] of Object.entries(options.personalityTokens)) {
+            defaultLines.push(`  ${token}: ${value};`);
+        }
+    }
+    defaultLines.push('}');
+    const defaultCss = defaultLines.join('\n');
+    // Build dark.css ([data-theme="dark"] + .theme-auto media query)
+    const darkEntries = Object.entries(theme.dark);
+    const darkShadowEntries = options?.shadowTokens ? Object.entries(options.shadowTokens.dark) : [];
+    const darkLines = ['[data-theme="dark"] {'];
+    for (const [token, value] of darkEntries) {
+        darkLines.push(`  ${token}: ${value};`);
+    }
+    for (const [token, value] of darkShadowEntries) {
+        darkLines.push(`  ${token}: ${value};`);
+    }
+    darkLines.push('}');
+    darkLines.push('');
+    darkLines.push('.theme-auto {');
+    darkLines.push('  @media (prefers-color-scheme: dark) {');
+    darkLines.push('    & {');
+    for (const [token, value] of darkEntries) {
+        darkLines.push(`      ${token}: ${value};`);
+    }
+    for (const [token, value] of darkShadowEntries) {
+        darkLines.push(`      ${token}: ${value};`);
+    }
+    darkLines.push('    }');
+    darkLines.push('  }');
+    darkLines.push('}');
+    const darkCss = darkLines.join('\n');
+    return { defaultCss, darkCss };
+}
+/**
+ * Trigger a browser download of the combined CSS as a single file.
+ */
+export function downloadCss(theme, filename = 'dryui-theme.css', options) {
+    const { defaultCss, darkCss } = generateCss(theme, options);
+    const combined = `${defaultCss}\n\n${darkCss}`;
+    const blob = new Blob([combined], { type: 'text/css' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+/**
+ * Copy the combined CSS to the clipboard.
+ */
+export async function copyCss(theme, options) {
+    const { defaultCss, darkCss } = generateCss(theme, options);
+    const combined = `${defaultCss}\n\n${darkCss}`;
+    await navigator.clipboard.writeText(combined);
+}
+/**
+ * Return a JSON string containing the light and dark token maps.
+ */
+export function exportJson(theme) {
+    return JSON.stringify({ light: theme.light, dark: theme.dark }, null, 2);
+}

package/dist/engine/export-css.test.d.ts

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

package/dist/engine/export-css.test.js

@@ -0,0 +1,78 @@
+// apps/docs/src/lib/theme-wizard/export-css.test.ts
+import { describe, test, expect } from 'bun:test';
+import { generateCss, exportJson } from './export-css.js';
+import { generateTheme } from './derivation.js';
+const defaultBrand = generateTheme({ h: 230, s: 65, b: 85 });
+describe('generateCss', () => {
+    test('defaultCss contains a :root block', () => {
+        const { defaultCss } = generateCss(defaultBrand);
+        expect(defaultCss).toContain(':root {');
+    });
+    test('defaultCss contains all light tokens', () => {
+        const { defaultCss } = generateCss(defaultBrand);
+        for (const [token] of Object.entries(defaultBrand.light)) {
+            expect(defaultCss).toContain(token);
+        }
+    });
+    test('defaultCss light token values are present', () => {
+        const { defaultCss } = generateCss(defaultBrand);
+        for (const [token, value] of Object.entries(defaultBrand.light)) {
+            expect(defaultCss).toContain(`${token}: ${value}`);
+        }
+    });
+    test('darkCss contains [data-theme="dark"] block', () => {
+        const { darkCss } = generateCss(defaultBrand);
+        expect(darkCss).toContain('[data-theme="dark"] {');
+    });
+    test('darkCss contains all dark tokens', () => {
+        const { darkCss } = generateCss(defaultBrand);
+        for (const [token] of Object.entries(defaultBrand.dark)) {
+            expect(darkCss).toContain(token);
+        }
+    });
+    test('darkCss contains .theme-auto media query', () => {
+        const { darkCss } = generateCss(defaultBrand);
+        expect(darkCss).toContain('.theme-auto {');
+        expect(darkCss).toContain('@media (prefers-color-scheme: dark)');
+    });
+    test('darkCss .theme-auto block uses & selector', () => {
+        const { darkCss } = generateCss(defaultBrand);
+        expect(darkCss).toContain('& {');
+    });
+    test('darkCss includes dark token values inside .theme-auto', () => {
+        const { darkCss } = generateCss(defaultBrand);
+        // Pick an arbitrary dark token and verify it appears twice (in both blocks)
+        const firstToken = Object.keys(defaultBrand.dark)[0] ?? '--dry-color-text-strong';
+        const occurrences = darkCss.split(firstToken).length - 1;
+        expect(occurrences).toBeGreaterThanOrEqual(2);
+    });
+    test('different brand colors produce different CSS', () => {
+        const oceanTheme = generateTheme({ h: 200, s: 80, b: 70 });
+        const { defaultCss: defaultDefault } = generateCss(defaultBrand);
+        const { defaultCss: defaultOcean } = generateCss(oceanTheme);
+        expect(defaultDefault).not.toBe(defaultOcean);
+    });
+});
+describe('exportJson', () => {
+    test('returns valid JSON', () => {
+        const json = exportJson(defaultBrand);
+        expect(() => JSON.parse(json)).not.toThrow();
+    });
+    test('JSON contains light and dark keys', () => {
+        const parsed = JSON.parse(exportJson(defaultBrand));
+        expect(parsed).toHaveProperty('light');
+        expect(parsed).toHaveProperty('dark');
+    });
+    test('JSON light tokens match theme', () => {
+        const parsed = JSON.parse(exportJson(defaultBrand));
+        for (const [token, value] of Object.entries(defaultBrand.light)) {
+            expect(parsed.light[token]).toBe(value);
+        }
+    });
+    test('JSON dark tokens match theme', () => {
+        const parsed = JSON.parse(exportJson(defaultBrand));
+        for (const [token, value] of Object.entries(defaultBrand.dark)) {
+            expect(parsed.dark[token]).toBe(value);
+        }
+    });
+});

package/dist/engine/index.d.ts

@@ -0,0 +1,10 @@
+export { hsbToHsl, hslToHsb, hslToRgb, hslToHex, hexToHsl, cssColorToRgb, relativeLuminance, contrastRatio, meetsContrast, luminanceFromHsl, contrastBetweenCssColors, measureForegroundOnSurface, compareForegroundAcrossSurfaces, apcaSrgbToY, apcaContrast, apcaContrastBetweenCssColors, meetsApca, generateThemeModel, generateTheme } from './derivation.js';
+export type { HSL, HSB, BrandInput, ThemeOptions, ThemeTokens, SystemTone, ThemeReference, ThemeModeLadder, TransparentNeutralLadder, TransparentBrandLadder, TransparentToneLadder, TransparentPrimitiveLadders, LiteralTransparentNeutralLadder, LiteralTransparentToneLadder, LiteralTransparentPrimitiveLadders, SolidSurfaceSteps, SolidSurfaceRoles, SolidSurfacePalette, SolidPrimitiveLadders, InteractiveStateRecipe, InteractionStateRecipes, BrandCandidateAssessment, BrandPolicy, ForegroundSurfaceThresholds, ForegroundSurfaceAssessment, ForegroundSurfaceComparison, ThemeAuditCheck, ThemeAudit, PhotoTemperatureGuidance, ThemeModelLayer, ThemeModel } from './derivation.js';
+export { generateCss, downloadCss, copyCss, exportJson } from './export-css.js';
+export type { GenerateCssOptions } from './export-css.js';
+export { encodeTheme, decodeTheme, encodeRecipe, decodeRecipe } from './url-codec.js';
+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';

package/dist/engine/index.js

@@ -0,0 +1,6 @@
+// Engine — pure functions, zero Svelte/rune dependencies. Safe for server-side use.
+export { hsbToHsl, hslToHsb, hslToRgb, hslToHex, hexToHsl, cssColorToRgb, relativeLuminance, contrastRatio, meetsContrast, luminanceFromHsl, contrastBetweenCssColors, measureForegroundOnSurface, compareForegroundAcrossSurfaces, apcaSrgbToY, apcaContrast, apcaContrastBetweenCssColors, meetsApca, generateThemeModel, generateTheme } from './derivation.js';
+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';

package/dist/engine/palette.d.ts

@@ -0,0 +1,16 @@
+import { type BrandInput } from './derivation.js';
+export interface PaletteResult {
+    swatches: string[];
+    bg: string;
+    accent: string;
+}
+/**
+ * Generate a 4-color display palette from a brand HSB input.
+ * Sweeps from a deep complement through the brand to a light accent.
+ */
+export declare function generatePalette(brand: BrandInput): PaletteResult;
+/**
+ * Deterministically map arbitrary text to a BrandInput.
+ * Same text always produces the same color.
+ */
+export declare function textToBrand(text: string): BrandInput;

package/dist/engine/palette.js

@@ -0,0 +1,44 @@
+import { hsbToHsl, hslToHex } from './derivation.js';
+/**
+ * Generate a 4-color display palette from a brand HSB input.
+ * Sweeps from a deep complement through the brand to a light accent.
+ */
+export function generatePalette(brand) {
+    const h = brand.h;
+    const specs = [
+        { hOff: -105, s: 58, b: 45 },
+        { hOff: -50, s: 72, b: 58 },
+        { hOff: -18, s: 80, b: 72 },
+        { hOff: 25, s: 65, b: 82 }
+    ];
+    const swatches = specs.map(({ hOff, s, b }) => {
+        const hue = (((h + hOff) % 360) + 360) % 360;
+        const hsl = hsbToHsl(hue, s / 100, b / 100);
+        return hslToHex(hsl.h, hsl.s, hsl.l);
+    });
+    // Keep background in the dark blue-indigo range, with subtle brand influence
+    const bgHue = 230 + Math.sin((h / 360) * Math.PI * 2) * 25;
+    const bgHsl = hsbToHsl(bgHue, 0.5, 0.14);
+    const bg = hslToHex(bgHsl.h, bgHsl.s, bgHsl.l);
+    const accent = swatches[3];
+    return { swatches, bg, accent };
+}
+/**
+ * Deterministically map arbitrary text to a BrandInput.
+ * Same text always produces the same color.
+ */
+export function textToBrand(text) {
+    const normalized = text.trim().toLowerCase();
+    if (!normalized)
+        return { h: 230, s: 65, b: 85 };
+    let hash = 0;
+    for (let i = 0; i < normalized.length; i++) {
+        hash = ((hash << 5) - hash + normalized.charCodeAt(i)) | 0;
+    }
+    hash = Math.abs(hash);
+    return {
+        h: hash % 360,
+        s: 55 + (hash % 30),
+        b: 60 + ((hash >> 8) % 25)
+    };
+}

package/dist/engine/presets.d.ts

@@ -0,0 +1,6 @@
+import type { BrandInput } from './derivation.js';
+export interface Preset {
+    name: string;
+    brandInput: BrandInput;
+}
+export declare const PRESETS: Preset[];

package/dist/engine/presets.js

@@ -0,0 +1,34 @@
+export const PRESETS = [
+    {
+        name: 'Default',
+        brandInput: { h: 230, s: 65, b: 85 }
+    },
+    {
+        name: 'Ocean',
+        brandInput: { h: 200, s: 80, b: 70 }
+    },
+    {
+        name: 'Forest',
+        brandInput: { h: 145, s: 60, b: 55 }
+    },
+    {
+        name: 'Sunset',
+        brandInput: { h: 25, s: 80, b: 90 }
+    },
+    {
+        name: 'Rose',
+        brandInput: { h: 340, s: 65, b: 85 }
+    },
+    {
+        name: 'Lavender',
+        brandInput: { h: 270, s: 45, b: 80 }
+    },
+    {
+        name: 'Midnight',
+        brandInput: { h: 240, s: 80, b: 35 }
+    },
+    {
+        name: 'Ember',
+        brandInput: { h: 10, s: 85, b: 75 }
+    }
+];

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

@@ -0,0 +1,53 @@
+import type { BrandInput, ThemeOptions } from './derivation.js';
+import type { NeutralMode, Personality, RadiusPreset, Density, ShadowPreset, TypeScale, FontPreset } from '../state.svelte.js';
+export interface DecodedTheme {
+    brand: BrandInput;
+    options?: ThemeOptions;
+}
+export interface WizardRecipe {
+    brand: BrandInput;
+    personality?: Personality;
+    neutralMode?: NeutralMode;
+    statusHues?: {
+        error?: number;
+        warning?: number;
+        success?: number;
+        info?: number;
+    };
+    typography?: {
+        fontPreset: FontPreset;
+        scale: TypeScale;
+    };
+    shape?: {
+        radiusPreset: RadiusPreset;
+        radiusScale: number;
+        density: Density;
+    };
+    shadows?: {
+        preset: ShadowPreset;
+        intensity: number;
+        tintBrand: boolean;
+    };
+}
+/**
+ * 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 declare function encodeTheme(input: {
+    brand: BrandInput;
+    options?: ThemeOptions;
+}): string;
+/**
+ * Decode a compact theme string back into brand input and options.
+ *
+ * Throws if the string is not a valid encoded theme.
+ */
+export declare function decodeTheme(encoded: string): DecodedTheme;
+export declare function encodeRecipe(recipe: WizardRecipe): string;
+export declare function decodeRecipe(encoded: string): WizardRecipe;

package/dist/engine/url-codec.js

@@ -0,0 +1,243 @@
+/**
+ * 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

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