@dryui/ui 0.2.2 → 0.3.0

package/dist/diagram/types.d.ts

@@ -0,0 +1,196 @@
+export type DiagramColor = 'neutral' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+export type DiagramDirection = 'TB' | 'BT' | 'LR' | 'RL';
+export interface DiagramNode {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    variant?: 'default' | 'filled' | 'outlined' | 'pill';
+    color?: DiagramColor;
+    state?: 'default' | 'active' | 'complete' | 'blocked';
+    width?: number;
+    height?: number;
+}
+export interface DiagramEdge {
+    from: string;
+    to: string;
+    label?: string;
+    arrow?: 'end' | 'start' | 'both' | 'none';
+    dashed?: boolean;
+    color?: DiagramColor;
+}
+export interface DiagramCluster {
+    id: string;
+    label?: string;
+    nodes: string[];
+    color?: DiagramColor;
+    dashed?: boolean;
+}
+export interface DiagramAnnotation {
+    text: string;
+    anchor: string | {
+        x: number;
+        y: number;
+    };
+    offset?: {
+        dx?: number;
+        dy?: number;
+    };
+    color?: DiagramColor;
+}
+export interface DiagramMessage {
+    from: string;
+    to: string;
+    label: string;
+    dashed?: boolean;
+    color?: DiagramColor;
+    arrow?: 'end' | 'start' | 'both' | 'none';
+}
+export interface DiagramFragment {
+    id: string;
+    label: string;
+    condition?: string;
+    messages: number[];
+    color?: DiagramColor;
+    dashed?: boolean;
+}
+export interface DiagramSwimlane {
+    id: string;
+    label: string;
+    nodes: string[];
+    color?: DiagramColor;
+}
+export interface DiagramRegion {
+    id: string;
+    label: string;
+    contains: string[];
+    color?: DiagramColor;
+    dashed?: boolean;
+}
+export interface DiagramConfig {
+    nodes: DiagramNode[];
+    edges: DiagramEdge[];
+    clusters?: DiagramCluster[];
+    annotations?: DiagramAnnotation[];
+    direction?: DiagramDirection;
+    layout?: 'layered' | 'swimlane' | 'sequence';
+    swimlanes?: DiagramSwimlane[];
+    messages?: DiagramMessage[];
+    fragments?: DiagramFragment[];
+    regions?: DiagramRegion[];
+    spacing?: {
+        nodeGap?: number;
+        layerGap?: number;
+        clusterPadding?: number;
+    };
+    ariaLabel?: string;
+}
+export interface PositionedNode {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label: string;
+    description?: string;
+    icon?: string;
+    variant: string;
+    color: DiagramColor;
+    state: string;
+}
+export interface PositionedEdge {
+    from: string;
+    to: string;
+    path: string;
+    label?: string;
+    labelX: number;
+    labelY: number;
+    arrow: string;
+    dashed: boolean;
+    color: DiagramColor;
+}
+export interface PositionedCluster {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label?: string;
+    color: DiagramColor;
+    dashed: boolean;
+}
+export interface PositionedSwimlane {
+    id: string;
+    label: string;
+    x: number;
+    lineX: number;
+    headerY: number;
+    footerY: number;
+    lineY1: number;
+    lineY2: number;
+    color: DiagramColor;
+}
+export interface PositionedRegion {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label: string;
+    color: DiagramColor;
+    dashed: boolean;
+}
+export interface PositionedAnnotation {
+    text: string;
+    x: number;
+    y: number;
+    color: DiagramColor;
+}
+export interface PositionedMessage {
+    from: string;
+    to: string;
+    label: string;
+    x1: number;
+    y: number;
+    x2: number;
+    labelX: number;
+    labelY: number;
+    arrow: string;
+    dashed: boolean;
+    color: DiagramColor;
+    isSelf: boolean;
+}
+export interface PositionedFragment {
+    id: string;
+    label: string;
+    condition?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: DiagramColor;
+    dashed: boolean;
+}
+export interface PositionedLifeline {
+    id: string;
+    label: string;
+    x: number;
+    topY: number;
+    bottomY: number;
+    color: DiagramColor;
+}
+export interface LayoutResult {
+    nodes: PositionedNode[];
+    edges: PositionedEdge[];
+    clusters: PositionedCluster[];
+    swimlanes: PositionedSwimlane[];
+    regions: PositionedRegion[];
+    annotations: PositionedAnnotation[];
+    messages: PositionedMessage[];
+    lifelines: PositionedLifeline[];
+    positionedFragments: PositionedFragment[];
+    viewBox: {
+        width: number;
+        height: number;
+    };
+}

package/dist/displacement/displacement.svelte

@@ -21,8 +21,11 @@
 	}: Props = $props();
 
 	const filterId = `dry-displacement-${Math.random().toString(36).slice(2, 8)}`;
+	let element = $state<HTMLElement | null>(null);
 	let seed = $state(1);
 	let prefersReducedMotion = $state(false);
+	let documentVisible = $state(true);
+	let inViewport = $state(true);
 
 	const baseFrequency = $derived.by(() => {
 		if (turbulence === 'gentle') return '0.015';
@@ -31,7 +34,18 @@
 	});
 
 	const scaleValue = $derived(`${Math.max(0, scale)}`);
-	const shouldAnimate = $derived(animated && !prefersReducedMotion);
+	const shouldAnimate = $derived(
+		animated && !prefersReducedMotion && documentVisible && inViewport
+	);
+
+	function captureElement(node: HTMLElement) {
+		element = node;
+		return {
+			destroy() {
+				if (element === node) element = null;
+			}
+		};
+	}
 
 	onMount(() => {
 		const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -40,6 +54,11 @@
 			prefersReducedMotion = e.matches;
 		};
 		mql.addEventListener('change', handler);
+		documentVisible = !document.hidden;
+		const handleVisibilityChange = () => {
+			documentVisible = !document.hidden;
+		};
+		document.addEventListener('visibilitychange', handleVisibilityChange);
 
 		let frameId: number | undefined;
 		let lastTime = 0;
@@ -66,7 +85,23 @@
 			};
 		});
 
-		return () => mql.removeEventListener('change', handler);
+		$effect(() => {
+			if (!element || typeof IntersectionObserver === 'undefined') return;
+
+			const observer = new IntersectionObserver((entries) => {
+				const entry = entries[0];
+				inViewport = entry?.isIntersecting ?? true;
+			});
+
+			observer.observe(element);
+
+			return () => observer.disconnect();
+		});
+
+		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+			mql.removeEventListener('change', handler);
+		};
 	});
 
 	// Flash-on-load: filter references a runtime-generated SVG filter ID (url(#${filterId})),
@@ -96,13 +131,14 @@
 </svg>
 
 <div
+	{@attach captureElement}
+	{@attach applyFilterStyles}
 	data-displacement
 	class={className}
 	data-turbulence={turbulence}
 	data-animated={shouldAnimate || undefined}
 	data-reduced-motion={prefersReducedMotion || undefined}
 	{...rest}
-	use:applyFilterStyles
 >
 	{#if childSnippet}
 		{@render childSnippet()}

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

@@ -4,6 +4,7 @@ export interface DragAndDropContext {
     readonly isDragging: boolean;
     readonly orientation: 'vertical' | 'horizontal';
     readonly hasHandle: boolean;
+    readonly foreignOverIndex: number | null;
     registerHandle: () => void;
     startDrag: (index: number, event: PointerEvent) => void;
     handleDragOver: (index: number) => void;

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setGroupCtx } from './group-context.svelte.js';
+
+	interface Props {
+		onMove: (fromListId: string, fromIndex: number, toListId: string, toIndex: number) => void;
+		children: Snippet;
+	}
+
+	let { onMove, children }: Props = $props();
+
+	const roots = new Map<string, HTMLElement>();
+	let activeTarget: { listId: string; index: number } | null = $state(null);
+
+	setGroupCtx({
+		register(listId, element) {
+			roots.set(listId, element);
+		},
+		unregister(listId) {
+			roots.delete(listId);
+		},
+		getRoots() {
+			return roots;
+		},
+		get activeTarget() {
+			return activeTarget;
+		},
+		setActiveTarget(listId, index) {
+			activeTarget = listId !== null && index !== null ? { listId, index } : null;
+		},
+		move(fromListId, fromIndex, toListId, toIndex) {
+			onMove(fromListId, fromIndex, toListId, toIndex);
+		}
+	});
+</script>
+
+{@render children()}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    onMove: (fromListId: string, fromIndex: number, toListId: string, toIndex: number) => void;
+    children: Snippet;
+}
+declare const DragAndDropGroup: import("svelte").Component<Props, {}, "">;
+type DragAndDropGroup = ReturnType<typeof DragAndDropGroup>;
+export default DragAndDropGroup;

package/dist/drag-and-drop/drag-and-drop-handle.svelte

@@ -16,6 +16,7 @@
 	ctx.registerHandle();
 
 	function handlePointerDown(e: PointerEvent) {
+		if (e.button !== 0) return;
 		e.preventDefault();
 		e.stopPropagation();
 		ctx.startDrag(index, e);
@@ -34,6 +35,7 @@
 	tabindex="0"
 	aria-roledescription="drag handle"
 	aria-label="Drag to reorder"
+	aria-pressed={ctx.isDragging && ctx.draggedIndex === index ? 'true' : undefined}
 	data-dnd-handle
 	data-dragging={ctx.isDragging && ctx.draggedIndex === index ? '' : undefined}
 	onpointerdown={handlePointerDown}

package/dist/drag-and-drop/drag-and-drop-item.svelte

@@ -13,7 +13,10 @@
 	const ctx = getDragAndDropCtx();
 
 	let itemIsDragging = $derived(ctx.draggedIndex === index);
-	let isOver = $derived(ctx.overIndex === index && ctx.isDragging && ctx.draggedIndex !== index);
+	let isOver = $derived(
+		(ctx.overIndex === index && ctx.isDragging && ctx.draggedIndex !== index) ||
+			ctx.foreignOverIndex === index
+	);
 
 	let grabbing = $state(false);
 
@@ -66,6 +69,7 @@
 	data-dnd-item
 	data-index={index}
 	data-dragging={itemIsDragging ? '' : undefined}
+	data-drag-active={ctx.isDragging ? '' : undefined}
 	data-over={isOver ? '' : undefined}
 	onpointerdown={handlePointerDown}
 	onpointerup={handlePointerUp}
@@ -102,13 +106,20 @@
 	}
 
 	[data-dnd-item][data-dragging] {
-		opacity: var(--dry-dnd-drag-opacity, 0.5);
-		transform: scale(var(--dry-dnd-drag-scale, 1.02));
-		box-shadow: var(--dry-dnd-drag-shadow, var(--dry-shadow-lg));
-		z-index: var(--dry-dnd-drag-z-index, var(--dry-layer-overlay));
+		background: var(--dry-color-bg-sunken);
+		border-color: transparent;
+		box-shadow: none;
 	}
 
-	[data-dnd-item][data-over]::before {
+	[data-dnd-item][data-dragging]::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background: inherit;
+		border-radius: inherit;
+	}
+
+	[data-dnd-item]::before {
 		content: '';
 		position: absolute;
 		left: 0;
@@ -119,5 +130,13 @@
 		height: var(--dry-dnd-indicator-size, 2px);
 		background: var(--dry-dnd-indicator-color, var(--dry-color-fill-brand));
 		border-radius: var(--dry-dnd-indicator-size, 2px);
+		opacity: 0;
+		transition: opacity var(--dry-duration-fast) var(--dry-ease-default);
+		pointer-events: none;
+	}
+
+	[data-dnd-item][data-over]::before {
+		opacity: 1;
+		transition: none;
 	}
 </style>