@dryui/primitives 0.1.3 → 0.1.4

package/dist/beam/beam.svelte

@@ -19,7 +19,7 @@
 		angle = 45,
 		speed = 3,
 		intensity = 70,
-		blendMode = 'screen',
+		blendMode,
 		children,
 		class: className,
 		style,
@@ -31,26 +31,33 @@
 	const gradientString = $derived(
 		`linear-gradient(${angle}deg, transparent 0%, transparent calc(50% - ${width}px), ${color} 50%, transparent calc(50% + ${width}px), transparent 100%)`
 	);
+	const rootStyle = $derived.by(() => {
+		const declarations = [
+			style,
+			`--dry-beam-speed: ${speedValue}`,
+			`--dry-beam-intensity: ${clampedIntensity}`,
+			`--dry-beam-width: ${width}px`,
+			blendMode ? `--dry-beam-blend: ${blendMode}` : null
+		].filter(Boolean);
+		return declarations.join('; ');
+	});
+	const layerStyle = $derived(`background: ${gradientString};`);
 
 	function applyRootStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-beam-speed', speedValue);
-			node.style.setProperty('--dry-beam-intensity', clampedIntensity);
-			node.style.setProperty('--dry-beam-blend', blendMode);
-			node.style.setProperty('--dry-beam-width', `${width}px`);
+			node.style.cssText = rootStyle;
 		});
 	}
 
 	function applyLayerStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.setProperty('background', gradientString);
+			node.style.cssText = layerStyle;
 		});
 	}
 </script>
 
-<div class={['beam', className]} {...rest} use:applyRootStyles>
-	<div class="beam-layer" use:applyLayerStyles></div>
+<div class={['beam', className]} {...rest} {@attach applyRootStyles}>
+	<div class="beam-layer" {@attach applyLayerStyles}></div>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -65,5 +72,26 @@
 		position: absolute;
 		inset: 0;
 		pointer-events: none;
+		background-size: 300% 300%;
+		opacity: calc(var(--dry-beam-intensity, 70) / 100);
+		mix-blend-mode: var(--dry-beam-blend, var(--dry-beam-default-blend, multiply));
+		filter: blur(calc(var(--dry-beam-width, 2px) * 2));
+		animation: beam-sweep var(--dry-beam-speed, 3s) ease-in-out infinite;
+	}
+
+	@keyframes beam-sweep {
+		0% {
+			background-position: -50% -50%;
+		}
+		100% {
+			background-position: 150% 150%;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.beam-layer {
+			animation: none;
+			background-position: 50% 50%;
+		}
 	}
 </style>

package/dist/chromatic-aberration/chromatic-aberration.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createId } from '../utils/create-id.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		offset?: number;
@@ -8,61 +9,101 @@
 		children: Snippet;
 	}
 
-	let instanceCounter = 0;
-
 	let { offset = 3, angle = 0, children, class: className, style, ...rest }: Props = $props();
 
-	const filterId = `dry-chromatic-${instanceCounter++}`;
+	const filterId = createId('dry-chromatic');
 
 	const offsetX = $derived(Math.round(offset * Math.cos((angle * Math.PI) / 180)));
 	const offsetY = $derived(Math.round(offset * Math.sin((angle * Math.PI) / 180)));
 
 	function applyFilterStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('filter', `url(#${filterId})`);
-		});
+		node.style.cssText = style || '';
+		node.style.setProperty('filter', `url(#${filterId})`);
 	}
 </script>
 
-<svg class="chromatic-aberration-svg" aria-hidden="true">
+<svg class="chromatic-aberration-svg" width="0" height="0" aria-hidden="true">
 	<defs>
 		<filter id={filterId} color-interpolation-filters="sRGB">
-			<feOffset in="SourceGraphic" dx={offsetX} dy={offsetY} result="red" />
+			<feOffset in="SourceGraphic" dx={offsetX} dy={offsetY} result="lightRed" />
 			<feColorMatrix
-				in="red"
+				in="lightRed"
 				type="matrix"
 				values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
-				result="redOnly"
+				result="lightRedOnly"
 			/>
-			<feOffset in="SourceGraphic" dx={-offsetX} dy={-offsetY} result="blue" />
+			<feOffset in="SourceGraphic" dx={-offsetX} dy={-offsetY} result="lightBlue" />
 			<feColorMatrix
-				in="blue"
+				in="lightBlue"
 				type="matrix"
 				values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
-				result="blueOnly"
+				result="lightBlueOnly"
+			/>
+			<feColorMatrix
+				in="SourceGraphic"
+				type="matrix"
+				values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"
+				result="lightGreenOnly"
 			/>
+			<feBlend in="lightRedOnly" in2="lightGreenOnly" mode="screen" result="lightRG" />
+			<feBlend in="lightRG" in2="lightBlueOnly" mode="screen" result="lightSplit" />
 			<feColorMatrix
 				in="SourceGraphic"
 				type="matrix"
+				values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0"
+				result="darkSource"
+			/>
+			<feOffset in="darkSource" dx={offsetX} dy={offsetY} result="darkRed" />
+			<feColorMatrix
+				in="darkRed"
+				type="matrix"
+				values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
+				result="darkRedOnly"
+			/>
+			<feOffset in="darkSource" dx={-offsetX} dy={-offsetY} result="darkBlue" />
+			<feColorMatrix
+				in="darkBlue"
+				type="matrix"
+				values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"
+				result="darkBlueOnly"
+			/>
+			<feColorMatrix
+				in="darkSource"
+				type="matrix"
 				values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"
-				result="greenOnly"
+				result="darkGreenOnly"
+			/>
+			<feBlend in="darkRedOnly" in2="darkGreenOnly" mode="screen" result="darkRG" />
+			<feBlend in="darkRG" in2="darkBlueOnly" mode="screen" result="darkSplitInverted" />
+			<feColorMatrix
+				in="darkSplitInverted"
+				type="matrix"
+				values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0"
+				result="darkSplit"
 			/>
-			<feBlend in="redOnly" in2="greenOnly" mode="screen" result="rg" />
-			<feBlend in="rg" in2="blueOnly" mode="screen" />
+			<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lightMask" />
+			<feComponentTransfer in="lightMask" result="darkMask">
+				<feFuncA type="table" tableValues="1 0" />
+			</feComponentTransfer>
+			<feComposite in="lightSplit" in2="lightMask" operator="in" result="lightApplied" />
+			<feComposite in="darkSplit" in2="darkMask" operator="in" result="darkApplied" />
+			<feMerge>
+				<feMergeNode in="lightApplied" />
+				<feMergeNode in="darkApplied" />
+			</feMerge>
 		</filter>
 	</defs>
 </svg>
-<div class={['chromatic-aberration', className]} use:applyFilterStyles {...rest}>
+<div class={['chromatic-aberration', className]} {@attach applyFilterStyles} {...rest}>
 	{@render children()}
 </div>
 
 <style>
 	.chromatic-aberration-svg {
 		position: absolute;
-		width: 0;
 		height: 0;
 		overflow: hidden;
+		pointer-events: none;
 	}
 
 	.chromatic-aberration {

package/dist/date-field/date-field-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { SvelteMap } from 'svelte/reactivity';
 	import { setDateFieldCtx, getLocaleFormat, type DateSegmentType } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -13,6 +14,12 @@
 		children: Snippet;
 	}
 
+	interface SegmentValues {
+		month: number | null;
+		day: number | null;
+		year: number | null;
+	}
+
 	let {
 		value = $bindable<Date | null>(null),
 		name,
@@ -24,37 +31,61 @@
 		...rest
 	}: Props = $props();
 
-	let month = $state<number | null>(value ? value.getMonth() + 1 : null);
-	let day = $state<number | null>(value ? value.getDate() : null);
-	let year = $state<number | null>(value ? value.getFullYear() : null);
+	let draftValues = $state<SegmentValues | null>(null);
 
-	// Sync from value prop
-	$effect(() => {
-		if (value) {
-			month = value.getMonth() + 1;
-			day = value.getDate();
-			year = value.getFullYear();
+	function getSegmentValues(date: Date | null): SegmentValues {
+		if (!date) {
+			return { month: null, day: null, year: null };
 		}
-	});
 
-	function tryBuildDate() {
-		if (month !== null && day !== null && year !== null && year >= 1000) {
-			const d = new Date(year, month - 1, day);
-			if (d.getMonth() === month - 1 && d.getDate() === day) {
+		return {
+			month: date.getMonth() + 1,
+			day: date.getDate(),
+			year: date.getFullYear()
+		};
+	}
+
+	function commitSegments(nextValues: SegmentValues) {
+		if (
+			nextValues.month !== null &&
+			nextValues.day !== null &&
+			nextValues.year !== null &&
+			nextValues.year >= 1000
+		) {
+			const d = new Date(nextValues.year, nextValues.month - 1, nextValues.day);
+			if (d.getMonth() === nextValues.month - 1 && d.getDate() === nextValues.day) {
 				value = d;
+				draftValues = null;
+				return;
 			}
 		}
+
+		draftValues = nextValues;
 	}
 
 	const localeFormat = $derived(getLocaleFormat(locale));
+	const committedValues = $derived(getSegmentValues(value));
+	const activeValues = $derived(draftValues ?? committedValues);
 
 	const segments = $derived(
 		localeFormat.order.map((type) => ({
 			type,
-			value: type === 'month' ? month : type === 'day' ? day : year
+			value:
+				type === 'month'
+					? activeValues.month
+					: type === 'day'
+						? activeValues.day
+						: activeValues.year
 		}))
 	);
 
+	function focusPreferredSegment() {
+		const targetType =
+			segments.find((segment) => segment.value === null)?.type ?? localeFormat.order[0];
+		if (!targetType) return;
+		segmentElements.get(targetType)?.focus();
+	}
+
 	function serializeDateValue(date: Date | null): string {
 		if (!date) return '';
 
@@ -66,7 +97,7 @@
 	}
 
 	// Segment element registry for index-based navigation
-	const segmentElements = new Map<DateSegmentType, HTMLElement>();
+	const segmentElements = new SvelteMap<DateSegmentType, HTMLElement>();
 
 	setDateFieldCtx({
 		get value() {
@@ -94,10 +125,11 @@
 			return segments;
 		},
 		updateSegment(type: DateSegmentType, val: number) {
-			if (type === 'month') month = val;
-			else if (type === 'day') day = val;
-			else if (type === 'year') year = val;
-			tryBuildDate();
+			commitSegments({
+				month: type === 'month' ? val : activeValues.month,
+				day: type === 'day' ? val : activeValues.day,
+				year: type === 'year' ? val : activeValues.year
+			});
 		},
 		registerSegment(type: DateSegmentType, el: HTMLElement) {
 			segmentElements.set(type, el);
@@ -116,9 +148,27 @@
 			}
 		}
 	});
+
+	function handleMousedown(event: MouseEvent) {
+		if (disabled) return;
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) return;
+		if (target.closest('[data-df-segment]')) return;
+
+		event.preventDefault();
+		focusPreferredSegment();
+	}
 </script>
 
-<div role="group" aria-label="Date" data-disabled={disabled || undefined} {...rest}>
+<div
+	role="group"
+	aria-label="Date"
+	data-df-wrapper
+	data-df-root
+	data-disabled={disabled || undefined}
+	onmousedown={handleMousedown}
+	{...rest}
+>
 	{@render children()}
 
 	{#if name}

package/dist/date-field/date-field-segment.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getDateFieldCtx, type DateSegmentType } from './context.svelte.js';
-	import { onMount } from 'svelte';
 
 	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		type: DateSegmentType;
@@ -11,13 +10,6 @@
 
 	const ctx = getDateFieldCtx();
 
-	let el: HTMLSpanElement;
-
-	onMount(() => {
-		ctx.registerSegment(type, el);
-		return () => ctx.unregisterSegment(type);
-	});
-
 	const segmentData = $derived(ctx.segments.find((s) => s.type === type));
 
 	const minValue = $derived(type === 'month' ? 1 : type === 'day' ? 1 : 1000);
@@ -35,6 +27,15 @@
 	let inputBuffer = '';
 	let bufferTimeout: ReturnType<typeof setTimeout>;
 
+	function registerSegment(node: HTMLSpanElement) {
+		ctx.registerSegment(type, node);
+		return {
+			destroy() {
+				ctx.unregisterSegment(type);
+			}
+		};
+	}
+
 	function increment() {
 		const current = segmentData?.value ?? minValue - 1;
 		const next = current >= maxValue ? minValue : current + 1;
@@ -111,7 +112,7 @@
 </script>
 
 <span
-	bind:this={el}
+	{@attach registerSegment}
 	role="spinbutton"
 	tabindex={ctx.disabled ? undefined : 0}
 	aria-label={type}
@@ -119,6 +120,7 @@
 	aria-valuemax={maxValue}
 	aria-valuenow={segmentData?.value ?? undefined}
 	aria-valuetext={displayValue}
+	data-df-segment
 	data-segment={type}
 	data-placeholder={segmentData?.value === null ? '' : undefined}
 	data-disabled={ctx.disabled || undefined}

package/dist/date-field/date-field-separator.svelte

@@ -13,4 +13,4 @@
 	const display = $derived(separator ?? ctx.separator);
 </script>
 
-<span aria-hidden="true" data-separator="" {...rest}>{display}</span>
+<span aria-hidden="true" data-df-separator data-separator="" {...rest}>{display}</span>

package/dist/image-comparison/image-comparison.svelte

@@ -21,20 +21,15 @@
 		...rest
 	}: Props = $props();
 
-	let containerEl = $state<HTMLDivElement>();
 	let dragging = $state(false);
 
-	function setContainer(node: HTMLDivElement) {
-		containerEl = node;
-		return {
-			destroy() {
-				if (containerEl === node) containerEl = undefined;
-			}
-		};
+	function syncStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = `${style ? `${style}; ` : ''}--dry-image-comparison-position: ${position}%`;
+		});
 	}
 
-	function updatePosition(clientX: number, clientY: number) {
-		if (!containerEl) return;
+	function updatePosition(clientX: number, clientY: number, containerEl: HTMLElement) {
 		const rect = containerEl.getBoundingClientRect();
 		let pct: number;
 		if (orientation === 'horizontal') {
@@ -47,13 +42,16 @@
 
 	function onPointerDown(e: PointerEvent) {
 		dragging = true;
-		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-		updatePosition(e.clientX, e.clientY);
+		const handleEl = e.currentTarget as HTMLElement;
+		handleEl.setPointerCapture(e.pointerId);
+		const containerEl = handleEl.closest<HTMLElement>('.root');
+		if (!containerEl) return;
+		updatePosition(e.clientX, e.clientY, containerEl);
 	}
 
 	function onPointerMove(e: PointerEvent) {
 		if (!dragging) return;
-		updatePosition(e.clientX, e.clientY);
+		updatePosition(e.clientX, e.clientY, e.currentTarget as HTMLElement);
 	}
 
 	function onPointerUp() {
@@ -70,24 +68,16 @@
 			position = Math.min(position + step, 100);
 		}
 	}
-
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-image-comparison-position', `${position}%`);
-		});
-	}
 </script>
 
 <div
-	{@attach setContainer}
+	{@attach syncStyles}
 	data-orientation={orientation}
 	data-dragging={dragging || undefined}
 	class={['root', className]}
 	onpointermove={onPointerMove}
 	onpointerup={onPointerUp}
 	{...rest}
-	use:applyStyles
 >
 	<div data-part="after" class="layer">
 		{@render after()}
@@ -119,6 +109,8 @@
 	.root {
 		--dry-image-comparison-handle-z-index: 1;
 		position: relative;
+		display: grid;
+		height: 100%;
 		overflow: hidden;
 		touch-action: none;
 		user-select: none;
@@ -130,8 +122,8 @@
 	}
 
 	.layer {
-		position: absolute;
-		inset: 0;
+		grid-area: 1 / 1;
+		min-height: 0;
 	}
 
 	.root[data-orientation='horizontal'] .before {
@@ -144,9 +136,8 @@
 
 	.handle {
 		position: absolute;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		display: grid;
+		place-items: center;
 		z-index: var(--dry-image-comparison-handle-z-index);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/primitives",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {