@dryui/theme-wizard 3.0.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/theme-wizard",
-  "version": "3.0.0",
+  "version": "5.0.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -37,15 +37,15 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "peerDependencies": {
-    "@dryui/primitives": "^0.3.0",
-    "@dryui/ui": "^0.3.0",
+    "@dryui/primitives": "^0.4.0",
+    "@dryui/ui": "^0.5.0",
     "lucide-svelte": ">=1.0.1",
     "svelte": "^5.55.1"
   },
   "devDependencies": {
     "@dryui/lint": "^0.2.0",
-    "@dryui/primitives": "^0.3.0",
-    "@dryui/ui": "^0.3.0",
+    "@dryui/primitives": "^0.4.0",
+    "@dryui/ui": "^0.5.0",
     "lucide-svelte": "^1.0.1",
     "svelte": "^5.55.3",
     "@sveltejs/package": "^2.5.7",

package/dist/actions.d.ts

@@ -1,4 +0,0 @@
-/** Svelte action that sets `node.style.background` and updates it reactively. */
-export declare function bg(node: HTMLElement, color: string): {
-    update(color: string): void;
-};

package/dist/actions.js

@@ -1,9 +0,0 @@
-/** Svelte action that sets `node.style.background` and updates it reactively. */
-export function bg(node, color) {
-    node.style.background = color;
-    return {
-        update(color) {
-            node.style.background = color;
-        }
-    };
-}

package/dist/components/AlphaSlider.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import { AlphaSlider } from '@dryui/ui/alpha-slider';
-
-	interface Props {
-		value?: number;
-		color?: string;
-		onchange?: (value: number) => void;
-	}
-
-	let { value = $bindable(50), color = 'hsl(230, 65%, 55%)', onchange }: Props = $props();
-</script>
-
-<AlphaSlider bind:value {color} {...onchange ? { onchange } : {}} />

package/dist/components/AlphaSlider.svelte.d.ts

@@ -1,9 +0,0 @@
-import { AlphaSlider } from '@dryui/ui/alpha-slider';
-interface Props {
-    value?: number;
-    color?: string;
-    onchange?: (value: number) => void;
-}
-declare const AlphaSlider: import("svelte").Component<Props, {}, "value">;
-type AlphaSlider = ReturnType<typeof AlphaSlider>;
-export default AlphaSlider;

package/dist/components/ContrastBadge.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { Badge } from '@dryui/ui/badge';
-	import { contrastBetweenCssColors } from '../engine/derivation.js';
-
-	interface Props {
-		foreground: string;
-		background: string;
-		threshold?: number;
-	}
-
-	let { foreground, background, threshold = 4.5 }: Props = $props();
-
-	let ratio = $derived(contrastBetweenCssColors(foreground, background));
-
-	let passes = $derived(ratio !== null && ratio >= threshold);
-	let ratioLabel = $derived(ratio !== null ? `${ratio.toFixed(1)}:1` : '---');
-	let badgeColor = $derived<'success' | 'danger' | 'gray'>(
-		ratio === null ? 'gray' : passes ? 'success' : 'danger'
-	);
-</script>
-
-<Badge variant="soft" color={badgeColor} size="sm">{ratioLabel}</Badge>

package/dist/components/ContrastBadge.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    foreground: string;
-    background: string;
-    threshold?: number;
-}
-declare const ContrastBadge: import("svelte").Component<Props, {}, "">;
-type ContrastBadge = ReturnType<typeof ContrastBadge>;
-export default ContrastBadge;

package/dist/components/HsbPicker.svelte

@@ -1,304 +0,0 @@
-<script lang="ts">
-	import { Slider } from '@dryui/ui/slider';
-	import { NumberInput } from '@dryui/ui/number-input';
-	import { Input } from '@dryui/ui/input';
-	import { Field } from '@dryui/ui/field';
-	import { Label } from '@dryui/ui/label';
-	import { hsbToHsl, hslToHex, hexToHsl, hslToHsb } from '../engine/derivation.js';
-
-	interface Props {
-		h?: number;
-		s?: number;
-		b?: number;
-		onchange?: (h: number, s: number, b: number) => void;
-	}
-
-	let { h = $bindable(230), s = $bindable(65), b = $bindable(85), onchange }: Props = $props();
-
-	let canvas: HTMLCanvasElement | undefined = $state();
-	let isDragging = $state(false);
-
-	// Derived hex value from current HSB
-	let hexValue = $derived.by(() => {
-		const hsl = hsbToHsl(h, s / 100, b / 100);
-		return hslToHex(hsl.h, hsl.s, hsl.l);
-	});
-
-	// Derived preview color as CSS hsl string
-	let previewColor = $derived.by(() => {
-		const hsl = hsbToHsl(h, s / 100, b / 100);
-		return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)`;
-	});
-
-	// Pure hue color for canvas gradient (full saturation, full brightness)
-	let hueColor = $derived.by(() => {
-		const hsl = hsbToHsl(h, 1, 1);
-		return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)`;
-	});
-
-	function drawCanvas() {
-		if (!canvas) return;
-		const ctx = canvas.getContext('2d');
-		if (!ctx) return;
-
-		const width = canvas.width;
-		const height = canvas.height;
-
-		// Horizontal gradient: white -> full hue color
-		const hGrad = ctx.createLinearGradient(0, 0, width, 0);
-		hGrad.addColorStop(0, '#ffffff');
-		hGrad.addColorStop(1, hueColor);
-		ctx.fillStyle = hGrad;
-		ctx.fillRect(0, 0, width, height);
-
-		// Vertical gradient: transparent -> black (overlay)
-		const vGrad = ctx.createLinearGradient(0, 0, 0, height);
-		vGrad.addColorStop(0, 'rgba(0,0,0,0)');
-		vGrad.addColorStop(1, 'rgba(0,0,0,1)');
-		ctx.fillStyle = vGrad;
-		ctx.fillRect(0, 0, width, height);
-	}
-
-	$effect(() => {
-		// Redraw canvas when hue changes (hueColor is derived from h)
-		void hueColor;
-		drawCanvas();
-	});
-
-	$effect(() => {
-		// Initial draw once canvas is mounted
-		if (canvas) {
-			drawCanvas();
-		}
-	});
-
-	function getPositionFromEvent(e: PointerEvent): { x: number; y: number } {
-		if (!canvas) return { x: 0, y: 0 };
-		const rect = canvas.getBoundingClientRect();
-		const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
-		const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
-		return { x, y };
-	}
-
-	function updateFromCanvasPosition(x: number, y: number) {
-		if (!canvas) return;
-		const newS = Math.round((x / canvas.width) * 100);
-		const newB = Math.round((1 - y / canvas.height) * 100);
-		s = Math.max(0, Math.min(100, newS));
-		b = Math.max(0, Math.min(100, newB));
-		onchange?.(h, s, b);
-	}
-
-	function handlePointerDown(e: PointerEvent) {
-		if (!canvas) return;
-		isDragging = true;
-		canvas.setPointerCapture(e.pointerId);
-		const { x, y } = getPositionFromEvent(e);
-		updateFromCanvasPosition(x, y);
-	}
-
-	function handlePointerMove(e: PointerEvent) {
-		if (!isDragging) return;
-		const { x, y } = getPositionFromEvent(e);
-		updateFromCanvasPosition(x, y);
-	}
-
-	function handlePointerUp(e: PointerEvent) {
-		isDragging = false;
-		if (canvas) canvas.releasePointerCapture(e.pointerId);
-	}
-
-	function handleHexInput(val: string) {
-		const hex = val.trim();
-		if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
-			try {
-				const hsl = hexToHsl(hex);
-				const hsb = hslToHsb(hsl.h, hsl.s, hsl.l);
-				h = Math.round(hsb.h);
-				s = Math.round(hsb.s * 100);
-				b = Math.round(hsb.b * 100);
-				onchange?.(h, s, b);
-			} catch {
-				// invalid hex, ignore
-			}
-		}
-	}
-
-	// Crosshair position on canvas
-	let crosshairX = $derived((s / 100) * 256);
-	let crosshairY = $derived((1 - b / 100) * 256);
-
-	function crosshairPosition(node: HTMLElement) {
-		$effect(() => {
-			node.style.setProperty('left', `${crosshairX}px`);
-			node.style.setProperty('top', `${crosshairY}px`);
-		});
-	}
-
-	function swatchBackground(node: HTMLElement) {
-		$effect(() => {
-			node.style.setProperty('background', previewColor);
-		});
-	}
-
-	// Local bindable values for number inputs
-	let hValue = $state(h);
-	let sValue = $state(s);
-	let bValue = $state(b);
-	let hexInputValue = $state('');
-
-	// Sync external changes to local state
-	$effect(() => {
-		hValue = h;
-	});
-	$effect(() => {
-		sValue = s;
-	});
-	$effect(() => {
-		bValue = b;
-	});
-	$effect(() => {
-		hexInputValue = hexValue;
-	});
-
-	// React to local number input changes
-	$effect(() => {
-		const clamped = Math.max(0, Math.min(360, hValue));
-		if (clamped !== h) {
-			h = clamped;
-			onchange?.(h, s, b);
-		}
-	});
-	$effect(() => {
-		const clamped = Math.max(0, Math.min(100, sValue));
-		if (clamped !== s) {
-			s = clamped;
-			onchange?.(h, s, b);
-		}
-	});
-	$effect(() => {
-		const clamped = Math.max(0, Math.min(100, bValue));
-		if (clamped !== b) {
-			b = clamped;
-			onchange?.(h, s, b);
-		}
-	});
-</script>
-
-<div class="hsb-picker-root">
-	<div class="canvas-wrapper">
-		<canvas
-			bind:this={canvas}
-			width={256}
-			height={256}
-			class="saturation-canvas"
-			onpointerdown={handlePointerDown}
-			onpointermove={handlePointerMove}
-			onpointerup={handlePointerUp}
-		></canvas>
-		<div class="crosshair" use:crosshairPosition></div>
-	</div>
-
-	<div class="row-slider">
-		<Slider
-			bind:value={h}
-			min={0}
-			max={360}
-			step={1}
-			size="sm"
-			oninput={() => onchange?.(h, s, b)}
-		/>
-	</div>
-
-	<div class="row-fields-end">
-		<div class="hsb-field">
-			<Field.Root>
-				<Label size="sm">H</Label>
-				<NumberInput bind:value={hValue} min={0} max={360} step={1} size="sm" />
-			</Field.Root>
-		</div>
-		<div class="hsb-field">
-			<Field.Root>
-				<Label size="sm">S</Label>
-				<NumberInput bind:value={sValue} min={0} max={100} step={1} size="sm" />
-			</Field.Root>
-		</div>
-		<div class="hsb-field">
-			<Field.Root>
-				<Label size="sm">B</Label>
-				<NumberInput bind:value={bValue} min={0} max={100} step={1} size="sm" />
-			</Field.Root>
-		</div>
-	</div>
-
-	<div class="row-swatch">
-		<div class="preview-swatch" use:swatchBackground></div>
-		<Input
-			bind:value={hexInputValue}
-			size="sm"
-			placeholder="#000000"
-			oninput={() => handleHexInput(hexInputValue)}
-		/>
-	</div>
-</div>
-
-<style>
-	.hsb-picker-root {
-		display: grid;
-		grid-template-columns: 256px;
-		gap: var(--dry-space-2);
-	}
-
-	.row-slider {
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: 1fr;
-		align-items: center;
-	}
-
-	.row-fields-end {
-		display: grid;
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-		align-items: end;
-		gap: var(--dry-space-2);
-	}
-
-	.row-swatch {
-		display: grid;
-		grid-template-columns: var(--dry-space-8) minmax(0, 1fr);
-		align-items: center;
-		gap: var(--dry-space-2);
-	}
-
-	.canvas-wrapper {
-		position: relative;
-		height: 256px;
-		border-radius: var(--dry-radius-md);
-		overflow: hidden;
-		cursor: crosshair;
-		border: 1px solid var(--dry-color-stroke-weak);
-	}
-
-	.saturation-canvas {
-		display: block;
-		height: 256px;
-	}
-
-	.crosshair {
-		position: absolute;
-		aspect-ratio: 1;
-		height: 12px;
-		border-radius: 50%;
-		border: 2px solid var(--dry-color-bg-overlay);
-		box-shadow: 0 0 0 1px color-mix(in srgb, var(--dry-color-text-strong) 40%, transparent);
-		transform: translate(-50%, -50%);
-		pointer-events: none;
-	}
-
-	.preview-swatch {
-		aspect-ratio: 1;
-		height: var(--dry-space-8);
-		border-radius: var(--dry-radius-md);
-		border: 1px solid var(--dry-color-stroke-weak);
-	}
-</style>

package/dist/components/HsbPicker.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    h?: number;
-    s?: number;
-    b?: number;
-    onchange?: (h: number, s: number, b: number) => void;
-}
-declare const HsbPicker: import("svelte").Component<Props, {}, "b" | "h" | "s">;
-type HsbPicker = ReturnType<typeof HsbPicker>;
-export default HsbPicker;

package/dist/components/StepIndicator.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-	import { Stepper } from '@dryui/ui/stepper';
-
-	interface Props {
-		currentStep?: number;
-		onstep?: (step: number) => void;
-	}
-
-	let { currentStep = 1, onstep }: Props = $props();
-
-	let navEl = $state<HTMLElement | null>(null);
-
-	const STEPS = [
-		{ n: 1, label: 'Personality' },
-		{ n: 2, label: 'Brand' },
-		{ n: 3, label: 'Typography' },
-		{ n: 4, label: 'Shape' },
-		{ n: 5, label: 'Preview' }
-	];
-
-	// Stepper uses 0-based indexing; wizard uses 1-based
-	let activeStepIndex = $derived(currentStep - 1);
-
-	function handleStepClick(index: number) {
-		onstep?.(index + 1);
-	}
-
-	$effect(() => {
-		currentStep;
-
-		if (!navEl) return;
-
-		requestAnimationFrame(() => {
-			const activeStep = navEl?.querySelector(
-				"[aria-current='step'] [data-part='indicator-button']"
-			);
-			if (activeStep instanceof HTMLElement) {
-				activeStep.scrollIntoView({
-					block: 'nearest',
-					inline: 'center'
-				});
-			}
-		});
-	});
-</script>
-
-<nav bind:this={navEl} class="wizard-stepper" aria-label="Wizard steps">
-	<Stepper.Root activeStep={activeStepIndex}>
-		<Stepper.List>
-			{#each STEPS as step, i (step.n)}
-				{#if i > 0}
-					<Stepper.Separator step={i} />
-				{/if}
-				<Stepper.Step step={i} clickable onclick={handleStepClick}>
-					{step.label}
-				</Stepper.Step>
-			{/each}
-		</Stepper.List>
-	</Stepper.Root>
-</nav>
-
-<style>
-	.wizard-stepper {
-		container-type: inline-size;
-		overflow-x: auto;
-		padding-bottom: var(--dry-space-1);
-		scrollbar-width: none;
-		display: grid;
-		grid-template-columns: max-content;
-	}
-
-	.wizard-stepper::-webkit-scrollbar {
-		display: none;
-	}
-
-	@container (max-width: 30rem) {
-		.wizard-stepper {
-			--dry-stepper-gap: var(--dry-space-1);
-			--dry-stepper-indicator-size: 0.875rem;
-		}
-
-		/* Narrow-screen override for step label font size via CSS custom property. */
-		.wizard-stepper {
-			--dry-type-small-size: 0.75rem;
-		}
-	}
-</style>

package/dist/components/StepIndicator.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    currentStep?: number;
-    onstep?: (step: number) => void;
-}
-declare const StepIndicator: import("svelte").Component<Props, {}, "">;
-type StepIndicator = ReturnType<typeof StepIndicator>;
-export default StepIndicator;

package/dist/components/TokenPreview.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-	interface Props {
-		name: string;
-		value: string;
-		showValue?: boolean;
-	}
-
-	let { name, value, showValue = true }: Props = $props();
-
-	import { bg } from '../actions';
-
-	let label = $derived(name.replace(/^--dry-/, ''));
-</script>
-
-<div class="token-preview">
-	<div class="swatch" use:bg={value}></div>
-	<div class="token-info">
-		<span class="token-name">{label}</span>
-		{#if showValue}
-			<span class="token-value">{value}</span>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.token-preview {
-		display: grid;
-		grid-template-columns: 2rem 1fr;
-		align-items: center;
-		gap: var(--dry-space-2);
-	}
-
-	.swatch {
-		aspect-ratio: 1;
-		border-radius: var(--dry-radius-sm, 4px);
-		border: 1px solid var(--dry-color-stroke-weak);
-	}
-
-	.token-info {
-		display: grid;
-		gap: var(--dry-space-1);
-	}
-
-	.token-name {
-		font-family: var(--dry-font-mono);
-		font-size: var(--dry-type-small-size);
-		color: var(--dry-color-text-strong);
-	}
-
-	.token-value {
-		font-family: var(--dry-font-mono);
-		font-size: var(--dry-type-xs-size, 0.7rem);
-		color: var(--dry-color-text-weak);
-	}
-</style>

package/dist/components/TokenPreview.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    name: string;
-    value: string;
-    showValue?: boolean;
-}
-declare const TokenPreview: import("svelte").Component<Props, {}, "">;
-type TokenPreview = ReturnType<typeof TokenPreview>;
-export default TokenPreview;