@dryui/ui 0.2.2 → 0.3.0

package/dist/drag-and-drop/group-context.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface DragAndDropGroupContext {
+    register(listId: string, element: HTMLElement): void;
+    unregister(listId: string): void;
+    getRoots(): Map<string, HTMLElement>;
+    readonly activeTarget: {
+        listId: string;
+        index: number;
+    } | null;
+    setActiveTarget(listId: string | null, index: number | null): void;
+    move(fromListId: string, fromIndex: number, toListId: string, toIndex: number): void;
+}
+export declare function setGroupCtx(ctx: DragAndDropGroupContext): void;
+export declare function getGroupCtx(): DragAndDropGroupContext | null;

package/dist/drag-and-drop/group-context.svelte.js

@@ -0,0 +1,8 @@
+import { getContext, setContext, hasContext } from 'svelte';
+const GROUP_KEY = Symbol('drag-and-drop-group');
+export function setGroupCtx(ctx) {
+    setContext(GROUP_KEY, ctx);
+}
+export function getGroupCtx() {
+    return hasContext(GROUP_KEY) ? getContext(GROUP_KEY) : null;
+}

package/dist/drag-and-drop/index.d.ts

@@ -2,8 +2,10 @@ export type { DragAndDropRootProps, DragAndDropItemProps, DragAndDropHandleProps
 import DragAndDropRoot from './drag-and-drop-root.svelte';
 import DragAndDropItem from './drag-and-drop-item.svelte';
 import DragAndDropHandle from './drag-and-drop-handle.svelte';
+import DragAndDropGroup from './drag-and-drop-group.svelte';
 export declare const DragAndDrop: {
     Root: typeof DragAndDropRoot;
     Item: typeof DragAndDropItem;
     Handle: typeof DragAndDropHandle;
+    Group: typeof DragAndDropGroup;
 };

package/dist/drag-and-drop/index.js

@@ -1,8 +1,10 @@
 import DragAndDropRoot from './drag-and-drop-root.svelte';
 import DragAndDropItem from './drag-and-drop-item.svelte';
 import DragAndDropHandle from './drag-and-drop-handle.svelte';
+import DragAndDropGroup from './drag-and-drop-group.svelte';
 export const DragAndDrop = {
     Root: DragAndDropRoot,
     Item: DragAndDropItem,
-    Handle: DragAndDropHandle
+    Handle: DragAndDropHandle,
+    Group: DragAndDropGroup
 };

package/dist/drawer/drawer-content.svelte

@@ -108,7 +108,8 @@
 		box-shadow: var(--dry-drawer-shadow, var(--dry-shadow-overlay));
 		padding: 0;
 		display: grid;
-		overflow: auto;
+		grid-template-rows: max-content minmax(0, 1fr) max-content;
+		overflow: hidden;
 
 		transition:
 			transform var(--dry-duration-slow) var(--dry-ease-spring-snappy),

package/dist/drawer/drawer-footer.svelte

@@ -20,7 +20,7 @@
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		justify-items: end;
+		justify-content: end;
 		gap: var(--dry-space-2);
 	}
 </style>

package/dist/gradient-mesh/gradient-mesh.svelte

@@ -32,6 +32,9 @@
 	let animated = $state(false);
 	let pointerX = $state('50%');
 	let pointerY = $state('50%');
+	let pointerFrame = $state<number | null>(null);
+	let pendingPointerX = '50%';
+	let pendingPointerY = '50%';
 
 	function captureElement(node: HTMLDivElement) {
 		element = node;
@@ -51,14 +54,42 @@
 		return '12s';
 	});
 
+	function flushPointerPosition() {
+		pointerFrame = null;
+		pointerX = pendingPointerX;
+		pointerY = pendingPointerY;
+	}
+
+	function queuePointerPosition(nextX: string, nextY: string) {
+		pendingPointerX = nextX;
+		pendingPointerY = nextY;
+
+		if (pointerFrame !== null) return;
+
+		pointerFrame = requestAnimationFrame(() => {
+			flushPointerPosition();
+		});
+	}
+
+	function cancelQueuedPointerPosition() {
+		if (pointerFrame === null) return;
+		cancelAnimationFrame(pointerFrame);
+		pointerFrame = null;
+	}
+
 	function handlePointerMove(event: PointerEvent) {
 		if (!interactive || prefersReducedMotion || !element || !supportsPointerTracking()) return;
 		const rect = element.getBoundingClientRect();
-		pointerX = `${(((event.clientX - rect.left) / rect.width) * 100).toFixed(1)}%`;
-		pointerY = `${(((event.clientY - rect.top) / rect.height) * 100).toFixed(1)}%`;
+		queuePointerPosition(
+			`${(((event.clientX - rect.left) / rect.width) * 100).toFixed(1)}%`,
+			`${(((event.clientY - rect.top) / rect.height) * 100).toFixed(1)}%`
+		);
 	}
 
 	function handlePointerLeave() {
+		cancelQueuedPointerPosition();
+		pendingPointerX = '50%';
+		pendingPointerY = '50%';
 		pointerX = '50%';
 		pointerY = '50%';
 	}
@@ -98,11 +129,17 @@
 
 		if (!supportsPropertyRegistration() || getReducedMotionPreference()) {
 			animated = false;
-			return stopMotionObserver;
+			return () => {
+				cancelQueuedPointerPosition();
+				stopMotionObserver();
+			};
 		}
 
 		animated = true;
-		return stopMotionObserver;
+		return () => {
+			cancelQueuedPointerPosition();
+			stopMotionObserver();
+		};
 	});
 
 	function applyStyles(node: HTMLElement) {
@@ -121,6 +158,7 @@
 
 <div
 	{@attach captureElement}
+	{@attach applyStyles}
 	class={className}
 	data-gradient-mesh
 	data-animated={animated || undefined}
@@ -129,7 +167,6 @@
 	onpointermove={interactive ? handlePointerMove : undefined}
 	onpointerleave={interactive ? handlePointerLeave : undefined}
 	{...rest}
-	use:applyStyles
 >
 	{#if childSnippet}
 		<div data-gradient-mesh-content>

package/dist/halftone/halftone.svelte

@@ -24,29 +24,17 @@
 		dotSize === 'fine' || dotSize === 'medium' || dotSize === 'coarse' ? dotSize : 'custom'
 	);
 
-	const patternSize = $derived.by(() => {
-		const size =
-			typeof dotSize === 'number'
-				? Math.max(1, dotSize)
-				: dotSize === 'fine'
-					? 2
-					: dotSize === 'coarse'
-						? 6
-						: 4;
-		return `${size * 3}`;
-	});
-
-	const dotRadius = $derived.by(() => {
-		const size =
-			typeof dotSize === 'number'
-				? Math.max(1, dotSize)
-				: dotSize === 'fine'
-					? 2
-					: dotSize === 'coarse'
-						? 6
-						: 4;
-		return `${size * 0.45}`;
-	});
+	const baseSize = $derived(
+		typeof dotSize === 'number'
+			? Math.max(1, dotSize)
+			: dotSize === 'fine'
+				? 2
+				: dotSize === 'coarse'
+					? 6
+					: 4
+	);
+	const patternSize = $derived(`${baseSize * 3}`);
+	const dotRadius = $derived(`${baseSize * 0.45}`);
 
 	const normalizedOpacity = $derived(`${Math.max(0, Math.min(1, opacity))}`);
 	const angleValue = $derived(`${angle}deg`);
@@ -99,24 +87,16 @@
 		mix-blend-mode: multiply;
 		transform: rotate(var(--dry-halftone-angle));
 		transform-origin: center;
-
-		/* SVG halftone dot pattern via data URI */
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='1.8' fill='black'/%3E%3C/svg%3E");
+		background-image: radial-gradient(
+			circle at center,
+			var(--dry-halftone-color) 0 calc(var(--dry-halftone-dot-radius) * 1px),
+			transparent calc((var(--dry-halftone-dot-radius) * 1px) + 0.8px)
+		);
 		background-size: calc(var(--dry-halftone-pattern-size) * 1px)
 			calc(var(--dry-halftone-pattern-size) * 1px);
 		background-repeat: repeat;
 	}
 
-	/* Override SVG for fine pattern */
-	[data-halftone][data-dot-size='fine']::after {
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='0.9' fill='black'/%3E%3C/svg%3E");
-	}
-
-	/* Override SVG for coarse pattern */
-	[data-halftone][data-dot-size='coarse']::after {
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='2.7' fill='black'/%3E%3C/svg%3E");
-	}
-
 	[data-halftone-content] {
 		position: relative;
 		z-index: 1;

package/dist/index.d.ts

@@ -179,7 +179,7 @@ export type { RevealProps } from './reveal/index.js';
 export { Spotlight } from './spotlight/index.js';
 export type { SpotlightProps } from './spotlight/index.js';
 export { Aurora } from './aurora/index.js';
-export type { AuroraProps, AuroraPalette, AuroraSpeed } from './aurora/index.js';
+export type { AuroraProps, AuroraPalette, AuroraSpeed, AuroraMotion } from './aurora/index.js';
 export { Noise } from './noise/index.js';
 export type { NoiseProps, NoiseBlendMode } from './noise/index.js';
 export type { BlendMode } from './aurora/index.js';
@@ -256,8 +256,6 @@ export { MegaMenu } from './mega-menu/index.js';
 export type { MegaMenuRootProps, MegaMenuItemProps, MegaMenuTriggerProps, MegaMenuPanelProps, MegaMenuColumnProps, MegaMenuLinkProps } from './mega-menu/index.js';
 export { Map } from './map/index.js';
 export type { MapRootProps, MapMarkerProps, MapPopupProps, MapLayerProps, MapControlsProps, LngLat, MapInstance, MapLibrary, MapMarkerInstance, MapPopupInstance, MapOptions, MapControl, MapSource, MarkerOptions, PopupOptions, GeoJsonData } from './map/index.js';
-export { SystemMap } from './system-map/index.js';
-export type { DolphinCluster, DolphinEdge, DolphinEdgeType, DolphinGraph, DolphinLayer, DolphinMismatch, DolphinMismatchKind, DolphinNode, DolphinNodeKind, DolphinPackage, DolphinSignals, DolphinSummary, DolphinVisibility, SystemMapProps, SystemMapEdge, SystemMapEdgeKind, SystemMapGraph, SystemMapLayer, SystemMapNode, SystemMapNodeKind, SystemMapVisibility } from './system-map/index.js';
 export { ChromaticShift } from './chromatic-shift/index.js';
 export type { ChromaticShiftProps } from './chromatic-shift/index.js';
 export { ChromaticAberration } from './chromatic-aberration/index.js';
@@ -286,7 +284,6 @@ export { ShaderCanvas, PRESETS as SHADER_PRESETS } from './shader-canvas/index.j
 export type { ShaderCanvasProps, ShaderCanvasPreset } from './shader-canvas/index.js';
 export { Svg } from './svg/index.js';
 export type { SvgProps } from './svg/index.js';
-export { Thumbnail } from './thumbnail/index.js';
 export { StarRating } from './star-rating/index.js';
 export type { StarRatingRootProps } from './star-rating/index.js';
 export { Tag } from './tag/index.js';

package/dist/index.js

@@ -131,7 +131,6 @@ export { DateTimeInput } from './date-time-input/index.js';
 export { NotificationCenter } from './notification-center/index.js';
 export { MegaMenu } from './mega-menu/index.js';
 export { Map } from './map/index.js';
-export { SystemMap } from './system-map/index.js';
 // Animation & Visual Effects
 export { ChromaticShift } from './chromatic-shift/index.js';
 export { ChromaticAberration } from './chromatic-aberration/index.js';
@@ -147,7 +146,7 @@ export { Halftone } from './halftone/index.js';
 export { MaskReveal } from './mask-reveal/index.js';
 export { ShaderCanvas, PRESETS as SHADER_PRESETS } from './shader-canvas/index.js';
 export { Svg } from './svg/index.js';
-export { Thumbnail } from './thumbnail/index.js';
 export { StarRating } from './star-rating/index.js';
 export { Tag } from './tag/index.js';
 export { useThemeOverride } from './themes/use-theme-override.svelte.js';
+export { Diagram } from './diagram/index.js';

package/dist/logo-mark/logo-mark.svelte

@@ -78,8 +78,8 @@
 	}
 
 	[data-logo-mark] img {
-		width: 100%;
-		height: 100%;
+		block-size: 100%;
+		aspect-ratio: 1;
 		object-fit: cover;
 		border-radius: inherit;
 	}

package/dist/noise/noise.svelte

@@ -50,7 +50,7 @@
 	data-reduced-motion={prefersReducedMotion || undefined}
 	data-grain={grain}
 	{...rest}
-	use:applyStyles
+	{@attach applyStyles}
 >
 	<span data-noise-texture aria-hidden="true"></span>
 
@@ -91,10 +91,10 @@
 		background-image: var(--dry-noise-pattern);
 		background-size: 256px 256px;
 		background-repeat: repeat;
-		will-change: transform;
 	}
 
 	[data-noise][data-animated] [data-noise-texture] {
+		will-change: transform;
 		animation: noise-drift 1.6s steps(6) infinite;
 	}
 

package/dist/shader-canvas/presets.js

@@ -49,7 +49,7 @@ void main() {
   float t = u_time * 0.3;
   vec3 color = vec3(0.02, 0.02, 0.06);
 
-  for (int i = 0; i < 60; i++) {
+  for (int i = 0; i < 36; i++) {
     float fi = float(i);
     vec2 pos = vec2(
       hash(vec2(fi, 0.0)),

package/dist/shader-canvas/shader-canvas.svelte

@@ -66,6 +66,7 @@
 	});
 
 	const mergedUniforms = $derived({ ...themeUniforms, ...uniforms });
+	const effectiveFps = $derived(fps ?? 30);
 
 	function setAspectRatio(node: HTMLDivElement) {
 		$effect(() => {
@@ -101,7 +102,9 @@
 		bind:paused
 		data-shader-canvas
 		{...Object.fromEntries(
-			Object.entries({ vertexShader, pixelRatio, fps, fallback }).filter(([, v]) => v !== undefined)
+			Object.entries({ vertexShader, pixelRatio, fps: effectiveFps, fallback }).filter(
+				([, v]) => v !== undefined
+			)
 		)}
 	>
 		{#if childSnippet}

package/dist/sidebar/sidebar-footer.svelte

@@ -17,11 +17,12 @@
 	[data-sidebar-footer] {
 		grid-row: 3;
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		align-items: center;
+		grid-template-columns: minmax(0, 1fr);
+		align-content: start;
+		justify-items: stretch;
 		gap: var(--dry-space-2);
-		padding: var(--dry-space-3) var(--dry-space-6);
+		padding-block: var(--dry-sidebar-footer-padding-y, var(--dry-space-3));
+		padding-inline: var(--dry-sidebar-content-padding, 0px);
 		border-top: 1px solid var(--dry-sidebar-border);
 	}
 </style>

package/dist/spotlight/spotlight.svelte

@@ -35,6 +35,9 @@
 	let y = $state('50%');
 	let active = $state(false);
 	let prefersReducedMotion = $state(false);
+	let pointerFrame = $state<number | null>(null);
+	let pendingX = '50%';
+	let pendingY = '50%';
 
 	function captureElement(node: HTMLDivElement) {
 		element = node;
@@ -46,6 +49,9 @@
 	}
 
 	function centerSpotlight() {
+		cancelQueuedPointerPosition();
+		pendingX = '50%';
+		pendingY = '50%';
 		x = '50%';
 		y = '50%';
 	}
@@ -57,8 +63,30 @@
 	function updateFromClientPoint(clientX: number, clientY: number) {
 		if (!element) return;
 		const rect = element.getBoundingClientRect();
-		x = `${clientX - rect.left}px`;
-		y = `${clientY - rect.top}px`;
+		queuePointerPosition(`${clientX - rect.left}px`, `${clientY - rect.top}px`);
+	}
+
+	function flushPointerPosition() {
+		pointerFrame = null;
+		x = pendingX;
+		y = pendingY;
+	}
+
+	function queuePointerPosition(nextX: string, nextY: string) {
+		pendingX = nextX;
+		pendingY = nextY;
+
+		if (pointerFrame !== null) return;
+
+		pointerFrame = requestAnimationFrame(() => {
+			flushPointerPosition();
+		});
+	}
+
+	function cancelQueuedPointerPosition() {
+		if (pointerFrame === null) return;
+		cancelAnimationFrame(pointerFrame);
+		pointerFrame = null;
 	}
 
 	function handlePointerEnter(event: PointerEvent) {
@@ -101,11 +129,16 @@
 			initialValue: '50%'
 		});
 
-		return observeReducedMotionPreference((matches) => {
+		const stopMotionObserver = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 			active = matches || !followPointer;
 			centerSpotlight();
 		});
+
+		return () => {
+			cancelQueuedPointerPosition();
+			stopMotionObserver();
+		};
 	});
 
 	const radiusValue = $derived(`${Math.max(0, radius)}px`);
@@ -137,6 +170,7 @@
 
 <div
 	{@attach captureElement}
+	{@attach applyStyles}
 	class={className}
 	data-spotlight
 	data-active={active || undefined}
@@ -147,7 +181,6 @@
 	onpointerleave={handlePointerLeave}
 	onfocusin={handleFocusIn}
 	onfocusout={handleFocusOut}
-	use:applyStyles
 	{...rest}
 >
 	{@render children()}
@@ -221,6 +254,11 @@
 			transform var(--dry-duration-normal, 200ms) var(--dry-ease-out, ease),
 			--dry-spotlight-x 60ms ease-out,
 			--dry-spotlight-y 60ms ease-out;
+	}
+
+	[data-spotlight][data-active]::before,
+	[data-spotlight][data-static]::before,
+	[data-spotlight][data-follow-pointer]::before {
 		will-change: opacity, transform;
 	}