@dryui/theme-wizard 4.0.0 → 5.0.0

package/dist/steps/BrandColor.svelte

@@ -1,216 +0,0 @@
-<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';
-	import {
-		PRESETS,
-		generateTheme,
-		hexToHsl,
-		hslToHsb,
-		hsbToHsl,
-		hslToHex
-	} from '../engine/index.js';
-	import { bg } from '../actions';
-
-	let { mode = 'light' }: { mode?: 'light' | 'dark' } = $props();
-
-	let isDark = $derived(mode === 'dark');
-
-	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(
-			wizardState.brandHsb.h,
-			wizardState.brandHsb.s / 100,
-			wizardState.brandHsb.b / 100
-		);
-		return hslToHex(hsl.h, hsl.s, hsl.l);
-	});
-
-	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);
-			setBrandHsb(hsb.h, Math.round(hsb.s * 100), Math.round(hsb.b * 100));
-		}
-	};
-
-	function selectPreset(preset: (typeof PRESETS)[number]) {
-		setBrandHsb(preset.brandInput.h, preset.brandInput.s, preset.brandInput.b);
-	}
-</script>
-
-<section class="brand-section">
-	<div class="picker-wrap">
-		<ColorPicker.Root bind:value={pickerModel.hex} 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 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>
-				</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

@@ -1,6 +0,0 @@
-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

@@ -1,319 +0,0 @@
-<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

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

package/dist/steps/PreviewExport.svelte

@@ -1,115 +0,0 @@
-<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);
-			}
-
-			return () => {
-				for (const name of Object.keys(tokens)) {
-					node.style.removeProperty(name);
-				}
-			};
-		};
-	}
-
-	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

@@ -1,9 +0,0 @@
-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;