@dryui/theme-wizard 1.0.0

package/dist/steps/BrandColor.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { ColorPicker } from '@dryui/ui/color-picker';
+	import { Text } from '@dryui/ui/text';
+	import { setBrandHsb, getDerivedTheme, wizardState } from '../state.svelte.js';
+	import {
+		PRESETS,
+		generateTheme,
+		hexToHsl,
+		hslToHsb,
+		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' },
+		{ key: '--dry-color-stroke-strong', label: 'Stroke' },
+		{ key: '--dry-color-fill-brand', label: 'Brand' },
+		{ key: '--dry-color-text-strong', label: 'Text' }
+	] as const;
+
+	const PRESET_THEMES = PRESETS.map((p) => generateTheme(p.brandInput));
+
+	let activeTokens = $derived.by(() => {
+		const t = getDerivedTheme();
+		return isDark ? t.dark : t.light;
+	});
+
+	let themeSwatches = $derived(
+		SWATCH_TOKENS.map(({ key, label }) => ({
+			color: activeTokens[key] ?? '',
+			label
+		}))
+	);
+
+	let pickerColor = $derived.by(() => {
+		const hsl = hsbToHsl(brand.h, brand.s / 100, brand.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 hsb = hslToHsb(hsl.h, hsl.s, hsl.l);
+			brand = { h: hsb.h, s: Math.round(hsb.s * 100), b: Math.round(hsb.b * 100) };
+		}
+	});
+
+	function selectPreset(preset: (typeof PRESETS)[number]) {
+		brand = preset.brandInput;
+	}
+</script>
+
+<section class="brand-section">
+	<div class="picker-wrap">
+		<ColorPicker.Root bind:value={pickerHex} areaHeight={160}>
+			<ColorPicker.Area />
+			<ColorPicker.HueSlider />
+			<ColorPicker.Input format="hex" />
+		</ColorPicker.Root>
+	</div>
+
+	<div class="swatch-and-presets">
+		<div class="swatch-strip" use:bg={activeTokens['--dry-color-bg-base'] ?? '#ffffff'}>
+			{#each themeSwatches as swatch (swatch.label)}
+				<div class="swatch-col">
+					<div class="swatch" use:bg={swatch.color}></div>
+					<span class="swatch-label">{swatch.label}</span>
+				</div>
+			{/each}
+		</div>
+
+		<div class="presets">
+			{#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}
+					</div>
+					<Text as="span" size="xs" color="muted">{preset.name.toLowerCase()}</Text>
+				</button>
+			{/each}
+		</div>
+	</div>
+</section>
+
+<style>
+	.brand-section {
+		display: grid;
+		gap: var(--dry-space-5);
+		container-type: inline-size;
+	}
+
+	.swatch-and-presets {
+		display: grid;
+		gap: var(--dry-space-4);
+	}
+
+	.swatch-strip {
+		display: grid;
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+		gap: 0;
+		overflow: hidden;
+		border-radius: var(--dry-radius-md);
+		align-self: end;
+		border: 1px solid var(--dry-color-stroke-weak);
+	}
+
+	.swatch-col {
+		display: grid;
+		gap: var(--dry-space-1);
+	}
+
+	.swatch {
+		min-height: 3.5rem;
+	}
+
+	.swatch-label {
+		text-align: center;
+		font-family: var(--dry-font-mono);
+		font-size: var(--dry-type-xs-size, 0.7rem);
+		color: var(--dry-color-text-weak);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		padding-block: var(--dry-space-1);
+	}
+
+	.presets {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
+		gap: var(--dry-space-3);
+	}
+
+	.preset-btn {
+		display: grid;
+		gap: var(--dry-space-2);
+		padding: var(--dry-space-2);
+		border-radius: var(--dry-radius-md);
+		border: 1px solid transparent;
+		background: none;
+		cursor: pointer;
+		transition: border-color 0.15s;
+		appearance: none;
+		text-align: center;
+	}
+
+	.preset-btn:hover {
+		border-color: var(--dry-color-stroke-weak);
+	}
+
+	.preset-btn[data-selected] {
+		border-color: var(--dry-color-stroke-brand);
+	}
+
+	.preset-thumb {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		height: 2rem;
+		overflow: hidden;
+		border-radius: var(--dry-radius-sm);
+	}
+
+	.preset-swatch {
+		height: 100%;
+	}
+
+	@container (min-width: 40rem) {
+		.brand-section {
+			grid-template-columns: auto minmax(0, 1fr);
+			align-items: end;
+		}
+
+		.swatch {
+			min-height: 5rem;
+		}
+	}
+
+	@container (max-width: 30rem) {
+		.swatch {
+			min-height: 2rem;
+		}
+
+		.swatch-strip {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+
+		.presets {
+			grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
+		}
+	}
+</style>

package/dist/steps/BrandColor.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    mode?: 'light' | 'dark';
+};
+declare const BrandColor: import("svelte").Component<$$ComponentProps, {}, "">;
+type BrandColor = ReturnType<typeof BrandColor>;
+export default BrandColor;

package/dist/steps/Personality.svelte

@@ -0,0 +1,319 @@
+<script lang="ts">
+	import { Card } from '@dryui/ui/card';
+	import { Text } from '@dryui/ui/text';
+	import { wizardState, setPersonality } from '../state.svelte.js';
+	import type { Personality as PersonalityPreset } from '../state.svelte.js';
+
+	const OPTIONS: {
+		value: PersonalityPreset;
+		name: string;
+		description: string;
+	}[] = [
+		{
+			value: 'minimal',
+			name: 'Minimal',
+			description: 'Flat, transparent, content-forward',
+		},
+		{
+			value: 'clean',
+			name: 'Clean',
+			description: 'Subtle separation, gentle edges',
+		},
+		{
+			value: 'structured',
+			name: 'Structured',
+			description: 'Clear regions, visible cards',
+		},
+		{
+			value: 'rich',
+			name: 'Rich',
+			description: 'Elevated surfaces, deep layering',
+		}
+	];
+
+	let selected = $derived(wizardState.personality);
+</script>
+
+<section class="personality-step" aria-label="Personality presets">
+	<div class="options-grid">
+		{#each OPTIONS as option (option.value)}
+			<Card.Root
+				as="button"
+				variant="interactive"
+				size="sm"
+				selected={selected === option.value}
+				onclick={() => setPersonality(option.value)}
+			>
+				<Card.Content noPadding>
+					<div class="preview-frame" data-personality={option.value}>
+						<div class="preview-toolbar">
+							<div class="preview-dot"></div>
+							<div class="preview-pills">
+								<div class="preview-pill"></div>
+								<div class="preview-pill short"></div>
+							</div>
+						</div>
+
+						<div class="preview-body">
+							<div class="preview-sidebar">
+								<div class="preview-nav-line"></div>
+								<div class="preview-nav-line"></div>
+								<div class="preview-nav-line short"></div>
+							</div>
+
+							<div class="preview-main">
+								<div class="preview-card primary">
+									<div class="preview-line"></div>
+									<div class="preview-line short"></div>
+								</div>
+								<div class="preview-card-grid">
+									<div class="preview-card secondary">
+										<div class="preview-line"></div>
+										<div class="preview-line shorter"></div>
+									</div>
+									<div class="preview-card secondary">
+										<div class="preview-line"></div>
+										<div class="preview-line short"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</Card.Content>
+
+				<Card.Footer>
+					<div class="option-stack">
+						<div class="title-row">
+							<Text as="span" size="sm" weight="semibold">{option.name}</Text>
+						</div>
+
+						<Text as="p" size="sm" color="muted">{option.description}</Text>
+					</div>
+				</Card.Footer>
+			</Card.Root>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.personality-step {
+		container-type: inline-size;
+	}
+
+	.options-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
+		gap: var(--dry-space-4);
+		align-items: start;
+	}
+
+	.option-stack,
+	.preview-body,
+	.preview-sidebar,
+	.preview-main,
+	.preview-card,
+	.preview-card-grid {
+		display: grid;
+	}
+
+	.option-stack {
+		gap: var(--dry-space-2);
+	}
+
+	.title-row {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+	}
+
+	.preview-frame {
+		display: grid;
+		grid-template-rows: auto 1fr;
+		min-block-size: 10.5rem;
+		border-radius: var(--dry-radius-lg) var(--dry-radius-lg) 0 0;
+		overflow: clip;
+	}
+
+	.preview-toolbar {
+		display: grid;
+		grid-template-columns: max-content minmax(0, 1fr);
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding: var(--dry-space-3);
+	}
+
+	.preview-dot {
+		block-size: 0.375rem;
+		aspect-ratio: 1;
+		border-radius: 999px;
+	}
+
+	.preview-pills {
+		display: grid;
+		grid-template-columns: 2rem 1rem;
+		gap: var(--dry-space-1);
+	}
+
+	.preview-pill {
+		block-size: 0.25rem;
+		border-radius: 999px;
+	}
+
+	.preview-body {
+		grid-template-columns: 2.75rem minmax(0, 1fr);
+		min-block-size: 0;
+	}
+
+	.preview-sidebar {
+		align-content: start;
+		gap: 0.375rem;
+		padding: var(--dry-space-3);
+	}
+
+	.preview-nav-line,
+	.preview-line {
+		block-size: 0.25rem;
+		border-radius: 999px;
+		background-size: var(--_line-fill, 100%) 100%;
+		background-repeat: no-repeat;
+	}
+
+	.preview-nav-line.short,
+	.preview-line.short {
+		--_line-fill: 66%;
+	}
+
+	.preview-line.shorter {
+		--_line-fill: 48%;
+	}
+
+	.preview-main {
+		align-content: start;
+		gap: var(--dry-space-2);
+		padding: var(--dry-space-3);
+	}
+
+	.preview-card {
+		align-content: start;
+		gap: 0.375rem;
+		padding: var(--dry-space-3);
+	}
+
+	.preview-card-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: var(--dry-space-2);
+	}
+
+	/* Preview colors use currentColor so they stay neutral regardless of
+	   wizard theme overrides applied to :root. */
+
+	.preview-frame[data-personality='minimal'] {
+		background: color-mix(in srgb, currentColor 4%, transparent);
+	}
+
+	[data-personality='minimal'] .preview-dot,
+	[data-personality='minimal'] .preview-pill,
+	[data-personality='minimal'] .preview-nav-line,
+	[data-personality='minimal'] .preview-line {
+		background: color-mix(in srgb, currentColor 14%, transparent);
+	}
+
+	[data-personality='minimal'] .preview-card {
+		background: transparent;
+	}
+
+	.preview-frame[data-personality='clean'] {
+		background: color-mix(in srgb, currentColor 4%, transparent);
+	}
+
+	[data-personality='clean'] .preview-toolbar {
+		border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
+	}
+
+	[data-personality='clean'] .preview-sidebar {
+		border-right: 1px solid color-mix(in srgb, currentColor 8%, transparent);
+	}
+
+	[data-personality='clean'] .preview-dot,
+	[data-personality='clean'] .preview-pill,
+	[data-personality='clean'] .preview-nav-line,
+	[data-personality='clean'] .preview-line {
+		background: color-mix(in srgb, currentColor 18%, transparent);
+	}
+
+	[data-personality='clean'] .preview-card {
+		background: color-mix(in srgb, currentColor 6%, transparent);
+		border-radius: var(--dry-radius-md);
+	}
+
+	.preview-frame[data-personality='structured'] {
+		background: color-mix(in srgb, currentColor 4%, transparent);
+		border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+	}
+
+	[data-personality='structured'] .preview-toolbar,
+	[data-personality='structured'] .preview-sidebar {
+		background: color-mix(in srgb, currentColor 6%, transparent);
+	}
+
+	[data-personality='structured'] .preview-toolbar {
+		border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+	}
+
+	[data-personality='structured'] .preview-sidebar {
+		border-right: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+	}
+
+	[data-personality='structured'] .preview-dot,
+	[data-personality='structured'] .preview-pill,
+	[data-personality='structured'] .preview-nav-line,
+	[data-personality='structured'] .preview-line {
+		background: color-mix(in srgb, currentColor 22%, transparent);
+	}
+
+	[data-personality='structured'] .preview-card {
+		background: color-mix(in srgb, currentColor 6%, transparent);
+		border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+		border-radius: var(--dry-radius-md);
+	}
+
+	.preview-frame[data-personality='rich'] {
+		background: color-mix(in srgb, currentColor 4%, transparent);
+		border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+		box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, currentColor 12%, transparent);
+	}
+
+	[data-personality='rich'] .preview-toolbar,
+	[data-personality='rich'] .preview-sidebar {
+		background: color-mix(in srgb, currentColor 8%, transparent);
+	}
+
+	[data-personality='rich'] .preview-toolbar {
+		border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+	}
+
+	[data-personality='rich'] .preview-sidebar {
+		border-right: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+	}
+
+	[data-personality='rich'] .preview-dot,
+	[data-personality='rich'] .preview-pill,
+	[data-personality='rich'] .preview-nav-line,
+	[data-personality='rich'] .preview-line {
+		background: color-mix(in srgb, currentColor 26%, transparent);
+	}
+
+	[data-personality='rich'] .preview-card {
+		background: color-mix(in srgb, currentColor 8%, transparent);
+		border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+		border-radius: var(--dry-radius-lg);
+		box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, currentColor 10%, transparent);
+	}
+
+	@container (max-width: 40rem) {
+		.options-grid {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+</style>

package/dist/steps/Personality.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Personality: import("svelte").Component<Record<string, never>, {}, "">;
+type Personality = ReturnType<typeof Personality>;
+export default Personality;

package/dist/steps/PreviewExport.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { SegmentedControl } from '@dryui/ui/segmented-control';
+	import { Button } from '@dryui/ui/button';
+	import { Text } from '@dryui/ui/text';
+	import { getDerivedTheme, getAllTokens } from '../state.svelte';
+	import { downloadCss, copyCss } from '../engine/export-css.js';
+
+	let {
+		preview,
+		mode = 'light',
+		onmodechange
+	}: {
+		preview?: Snippet;
+		mode?: 'light' | 'dark';
+		onmodechange?: (mode: 'light' | 'dark') => void;
+	} = $props();
+
+	let copyFeedback = $state('');
+	const tokens = $derived(getAllTokens(mode));
+
+	function attachThemeTokens(tokens: Record<string, string>) {
+		return (node: HTMLElement) => {
+			for (const [name, value] of Object.entries(tokens)) {
+				node.style.setProperty(name, value);
+			}
+		};
+	}
+
+	function handleDownload() {
+		downloadCss(getDerivedTheme());
+	}
+
+	async function handleCopyCss() {
+		await copyCss(getDerivedTheme());
+		copyFeedback = 'Copied!';
+		setTimeout(() => (copyFeedback = ''), 2000);
+	}
+</script>
+
+<section class="preview-section">
+	<div class="preview-header">
+		<SegmentedControl.Root value={mode}>
+			<SegmentedControl.Item value="light" onclick={() => onmodechange?.('light')}>
+				Light
+			</SegmentedControl.Item>
+			<SegmentedControl.Item value="dark" onclick={() => onmodechange?.('dark')}>
+				Dark
+			</SegmentedControl.Item>
+		</SegmentedControl.Root>
+
+		<div class="export-actions">
+			<Button variant="solid" size="sm" onclick={handleDownload}>Download CSS</Button>
+			<Button variant="outline" size="sm" onclick={handleCopyCss}>
+				{copyFeedback || 'Copy CSS'}
+			</Button>
+		</div>
+	</div>
+
+	<div
+		class="preview-scene"
+		data-mode={mode}
+		{@attach attachThemeTokens(tokens)}
+	>
+		{#if preview}
+			{@render preview()}
+		{:else}
+			<Text as="p" size="sm" color="muted">No preview available.</Text>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.preview-section {
+		display: grid;
+		gap: var(--dry-space-5);
+		container-type: inline-size;
+	}
+
+	.preview-header {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		align-items: center;
+		gap: var(--dry-space-4);
+	}
+
+	.export-actions {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		gap: var(--dry-space-2);
+		justify-self: end;
+	}
+
+	.preview-scene {
+		padding: var(--dry-space-6);
+		border-radius: var(--dry-radius-lg);
+		border: 1px solid var(--dry-color-stroke-weak);
+		background: var(--dry-color-bg-base);
+		color: var(--dry-color-text-strong);
+	}
+
+	@container (max-width: 36rem) {
+		.preview-header {
+			grid-template-columns: 1fr;
+			gap: var(--dry-space-3);
+		}
+
+		.export-actions {
+			justify-self: start;
+		}
+	}
+</style>

package/dist/steps/PreviewExport.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    preview?: Snippet;
+    mode?: 'light' | 'dark';
+    onmodechange?: (mode: 'light' | 'dark') => void;
+};
+declare const PreviewExport: import("svelte").Component<$$ComponentProps, {}, "">;
+type PreviewExport = ReturnType<typeof PreviewExport>;
+export default PreviewExport;