@signal9/era-ui 4.16.6 → 4.16.8

package/dist/ui/pane/pane-root.svelte

@@ -2,14 +2,11 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
-		draggable,
-		disabled as disabledPlugin,
-		events,
-		position as positionPlugin,
-		stateMarker,
-		Compartment,
-		type Plugin,
-		type DragEventData
+		Draggable,
+		type Axis,
+		type BoundsInput,
+		type DragEventData,
+		type DragPlugin
 	} from '@neodrag/svelte';
 	import { cn } from '../../utils/index.js';
 
@@ -21,6 +18,10 @@
 		minWidth = 160,
 		minHeight = 96,
 		disabled = false,
+		axis,
+		bounds,
+		grid,
+		threshold = 3,
 		plugins = [],
 		onDragStart,
 		onDrag,
@@ -43,8 +44,25 @@
 		minHeight?: number;
 		/** Disables dragging (reactive). */
 		disabled?: boolean;
-		/** Extra neodrag plugins appended after the pane's own. */
-		plugins?: (Plugin | Compartment)[] | (() => (Plugin | Compartment)[]);
+		/** Constrain the drag to one axis. */
+		axis?: Axis;
+		/** Pen the pane inside a target ('parent', 'viewport', an element, a rect). */
+		bounds?: BoundsInput;
+		/** Snap the drag to a [x, y] pixel grid. */
+		grid?: readonly [number, number];
+		/**
+		 * Movement in px before a drag engages. The 3px default keeps clean
+		 * clicks as clicks — and unlike the old default-plugin distance gate it
+		 * has no containment bail, so a fast flick that out-runs the bar before
+		 * the threshold clears still engages (next.10's gate is pure distance).
+		 */
+		threshold?: number;
+		/**
+		 * Tier-2 neodrag plugins (`use`) appended to the drag — custom
+		 * constraints via `onMove` (return an adjusted offset), scrollLock,
+		 * analytics. Tier-1 concerns (axis/bounds/grid) are the props above.
+		 */
+		plugins?: DragPlugin[] | (() => DragPlugin[]);
 		onDragStart?: (data: DragEventData) => void;
 		onDrag?: (data: DragEventData) => void;
 		onDragEnd?: (data: DragEventData) => void;
@@ -80,14 +98,6 @@
 	let dragging = false;
 	const live = { x: position.x, y: position.y };
 
-	// Compartments are v3's reactive-update mechanism: the wrapped closure
-	// re-resolves when its reactive inputs change, without re-initializing
-	// the draggable.
-	const positionComp = Compartment.of(() =>
-		positionPlugin({ current: dragging ? live : position })
-	);
-	const disabledComp = Compartment.of(() => (disabled ? disabledPlugin() : null));
-
 	const track = (data: DragEventData) => {
 		live.x = data.offset.x;
 		live.y = data.offset.y;
@@ -96,16 +106,146 @@
 		position = { x: data.offset.x, y: data.offset.y };
 	};
 
+	// next.10's reactive seam: option GETTERS on one Draggable, tracked by the
+	// wrapper's own $effect, which pushes a fine-grained update() when a getter's
+	// dependency changes — the successor to the Compartment mechanism this file
+	// used to wire by hand.
+	//
+	// The position getter is the same trick the position Compartment played:
+	// while a gesture is live it returns the non-reactive `live` (so a mid-drag
+	// re-resolve can never hand neodrag a stale $state and snap the pane back),
+	// and the `dragging ? …` short-circuit also means the getter doesn't READ
+	// `position` during a gesture — no tracking, no invalidation, the hot path
+	// stays exactly as non-reactive as before. `position` has deliberately no
+	// SETTER here: the wrapper only writes `options.position` per-move when the
+	// option is two-way (setter present), and per-move $state writes are the
+	// thing this whole design exists to avoid — `position` is written once, by
+	// `sync`, on drag end.
+	//
+	// NEVER read `drag.isDragging` or `drag.offset` in this file: they are
+	// per-move $state on the wrapper, and subscribing to them re-creates the
+	// per-move reactive round trip the `live` object removes.
+	const drag = new Draggable({
+		get position() {
+			return dragging ? live : position;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get axis() {
+			return axis;
+		},
+		get bounds() {
+			return bounds;
+		},
+		get grid() {
+			return grid;
+		},
+		get threshold() {
+			return threshold;
+		},
+		get use() {
+			return typeof plugins === 'function' ? plugins() : plugins;
+		},
+		onDragStart: (data) => {
+			dragging = true;
+			track(data);
+			onDragStart?.(data);
+		},
+		onDrag: (data) => {
+			track(data);
+			onDrag?.(data);
+		},
+		onDragEnd: (data) => {
+			dragging = false;
+			track(data);
+			sync(data);
+			onDragEnd?.(data);
+		}
+	});
+
+	// The zone bridge: era's public drag contract is DATA ATTRIBUTES
+	// (data-pane-handle marks the grab bar, data-pane-control marks anything
+	// that must never start a drag), because markers are written by arbitrary
+	// consumers who never see this component's internals. next.10 replaced the
+	// per-event shouldStart hook with a registered handle/cancel zone walk, so
+	// the attributes are bridged into that registry: the wrapper's handle()/
+	// cancel() return spreadable attachments, and an attachment IS a plain
+	// `(node) => cleanup` under a symbol key — extracted once and applied to
+	// whichever nodes carry the attributes. Cancel beats handle from inside
+	// (the engine's path walk is innermost-first at equal priority), which is
+	// exactly the old gate's `control` precedence.
+	const attachmentOf = (props: Record<symbol, unknown>) =>
+		props[Object.getOwnPropertySymbols(props)[0] as unknown as keyof typeof props] as (
+			node: Element
+		) => () => void;
+	const markHandle = attachmentOf(drag.handle());
+	const markCancel = attachmentOf(drag.cancel());
+
+	// Attribute nodes come and go (a pane bar's centre content swaps, tabs
+	// mount) — a MutationObserver keeps the registry synced to the DOM, so the
+	// contract stays "carry the attribute", never "also register somewhere".
+	$effect(() => {
+		const node = ref;
+		if (!node) return;
+		// Plain Map/Set on purpose: registry bookkeeping, never rendered — a
+		// reactive wrapper would only add proxy cost to a structure that the
+		// MutationObserver alone touches.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const marks = new Map<Element, { kind: 'handle' | 'cancel'; off: () => void }>();
+		const syncZones = () => {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const seen = new Set<Element>();
+			for (const el of node.querySelectorAll('[data-pane-handle], [data-pane-control]')) {
+				const kind = el.hasAttribute('data-pane-control') ? 'cancel' : 'handle';
+				seen.add(el);
+				const prev = marks.get(el);
+				if (prev && prev.kind === kind) continue;
+				prev?.off();
+				marks.set(el, { kind, off: kind === 'handle' ? markHandle(el) : markCancel(el) });
+			}
+			for (const [el, mark] of marks) {
+				if (seen.has(el)) continue;
+				mark.off();
+				marks.delete(el);
+			}
+		};
+		syncZones();
+		const observer = new MutationObserver(syncZones);
+		observer.observe(node, {
+			subtree: true,
+			childList: true,
+			attributeFilter: ['data-pane-handle', 'data-pane-control']
+		});
+		return () => {
+			observer.disconnect();
+			for (const mark of marks.values()) mark.off();
+		};
+	});
+
+	// Ctrl's whole-pane grab, zone edition: while Ctrl is held the ROOT is a
+	// registered handle, and the [&_*]:pointer-events-none class below makes
+	// every descendant hit-transparent — so the pointerdown's path is just the
+	// root, no cancel marker can intervene, and the pane is one solid slab.
+	// Rides the reactive ctrlHeld (the old gate read the event directly; zones
+	// are registrations, so a keydown-to-effect microtask is the cost — the
+	// visual affordances already ran on the same signal).
+	$effect(() => {
+		if (!ctrlHeld || resizing) return;
+		const node = ref;
+		if (!node) return;
+		return markHandle(node);
+	});
+
 	let resizing = $state(false);
 
-	// What may start a drag, decided PER POINTERDOWN from the real event — no
-	// cached zones, no reactive state, nothing to fall out of sync. neodrag's
-	// `shouldStart` hook runs on the initiating pointer event; returning false
-	// vetoes the drag. Because this is a pure function of that event, it's correct
-	// after resizes, re-renders, or anything else — the ctrl-drag can't break.
-	//   • Ctrl held  → the WHOLE pane is a handle (read live off the event).
-	//   • otherwise  → only the handle bar, and never a resize handle / control
-	//     (those carry data-pane-control).
+	// The layer-promotion predicate: the same decision the zone registry makes
+	// (Ctrl → whole pane; else the handle bar and never a control), as a pure
+	// function of the pointer event, because armLayer runs on the raw
+	// pointerdown — before the engine's own claim — and must not wait on any
+	// registration. If the two ever disagree the cost is one speculative
+	// will-change frame, not a wrong drag: the engine's zones are the authority
+	// on whether the gesture actually starts.
 	function canStartDrag(e: PointerEvent): boolean {
 		const target = e.target as Element | null;
 		if (!target) return false;
@@ -114,18 +254,11 @@
 		return target.closest('[data-pane-handle]') != null;
 	}
 
-	const dragGate: Plugin = {
-		name: 'era:pane-drag-gate',
-		shouldStart(_ctx, _state, event) {
-			return canStartDrag(event as PointerEvent);
-		}
-	};
-
 	/*
 	 * Promote to a compositor layer on POINTERDOWN, not on drag start.
 	 *
-	 * neodrag flips data-neodrag-state="dragging" from inside a rAF callback, so a
-	 * class keyed on that state arms `will-change` a frame AFTER the pane has
+	 * neodrag marks the node (data-neodrag-dragging) only once the drag engages,
+	 * so a class keyed on that state arms `will-change` a frame AFTER the pane has
 	 * already started moving — layer creation then lands in the first frames of the
 	 * gesture, which are the frames a drag is judged by. The pointerdown frame is
 	 * free: the pointer is down and nothing has moved yet, so the layer is ready
@@ -149,33 +282,6 @@
 		window.addEventListener('pointercancel', disarm, { capture: true, once: true });
 	}
 
-	// Replaces neodrag's DEFAULT threshold plugin (same name — the engine keys
-	// plugins by name, last one wins, and user plugins come after defaults). The
-	// default keeps its 3px click-vs-drag distance gate but ALSO cancels the drag
-	// when the first pointermove's target has escaped the dragged node — which is
-	// exactly what a fast flick does (the cursor out-runs the bar before the drag
-	// starts and captures the pointer), so quick grabs randomly never engaged.
-	// Same distance gate here, no containment bail: the pointerdown already
-	// decided eligibility (dragGate), where the cursor is one move later must not.
-	const flickSafeThreshold: Plugin = {
-		name: 'neodrag:threshold',
-		setup() {
-			return { x: 0, y: 0 };
-		},
-		shouldStart(_ctx, state: { x: number; y: number }, event) {
-			const e = event as PointerEvent;
-			state.x = e.clientX;
-			state.y = e.clientY;
-			return true;
-		},
-		drag(ctx, state: { x: number; y: number }, event) {
-			if (ctx.isDragging) return;
-			const e = event as PointerEvent;
-			// Clean clicks stay clicks: no drag until the pointer has moved > 3px.
-			if ((e.clientX - state.x) ** 2 + (e.clientY - state.y) ** 2 <= 9) ctx.preventStart();
-		}
-	};
-
 	// Ctrl held is ALSO tracked reactively — but only for the visual affordances
 	// (grab cursor, no text selection, inert tabs), never for the drag itself. If
 	// this lags the keypress, the drag still works (the gate reads the event); the
@@ -411,36 +517,7 @@
 	{...restProps}
 	style:width={size ? `${size.width}px` : undefined}
 	style:height={size ? `${size.height}px` : undefined}
-	{@attach draggable(() => [
-		// Gates which pointerdown starts a drag: handle bar only, or the whole pane
-		// while Ctrl is held. Stateless — decided live off the event. See above.
-		dragGate,
-		// Overrides the default threshold by name — fast flicks must engage. See above.
-		flickSafeThreshold,
-		// Exposes data-neodrag-state="idle | dragging" on the root — the drag-only
-		// layer-promotion hook hangs off it.
-		stateMarker(),
-		events({
-			onDragStart: (data) => {
-				dragging = true;
-				track(data);
-				onDragStart?.(data);
-			},
-			onDrag: (data) => {
-				track(data);
-				onDrag?.(data);
-			},
-			onDragEnd: (data) => {
-				dragging = false;
-				track(data);
-				sync(data);
-				onDragEnd?.(data);
-			}
-		}),
-		positionComp,
-		disabledComp,
-		...(typeof plugins === 'function' ? plugins() : plugins)
-	])}
+	{...drag.attach}
 >
 	{@render children?.()}
 	{#if resizable}

package/dist/ui/pane/pane-root.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { Compartment, type Plugin, type DragEventData } from '@neodrag/svelte';
+import { type Axis, type BoundsInput, type DragEventData, type DragPlugin } from '@neodrag/svelte';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
     /** Offset from the pane's layout position. Bindable and writable —
@@ -22,8 +22,25 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     minHeight?: number;
     /** Disables dragging (reactive). */
     disabled?: boolean;
-    /** Extra neodrag plugins appended after the pane's own. */
-    plugins?: (Plugin | Compartment)[] | (() => (Plugin | Compartment)[]);
+    /** Constrain the drag to one axis. */
+    axis?: Axis;
+    /** Pen the pane inside a target ('parent', 'viewport', an element, a rect). */
+    bounds?: BoundsInput;
+    /** Snap the drag to a [x, y] pixel grid. */
+    grid?: readonly [number, number];
+    /**
+     * Movement in px before a drag engages. The 3px default keeps clean
+     * clicks as clicks — and unlike the old default-plugin distance gate it
+     * has no containment bail, so a fast flick that out-runs the bar before
+     * the threshold clears still engages (next.10's gate is pure distance).
+     */
+    threshold?: number;
+    /**
+     * Tier-2 neodrag plugins (`use`) appended to the drag — custom
+     * constraints via `onMove` (return an adjusted offset), scrollLock,
+     * analytics. Tier-1 concerns (axis/bounds/grid) are the props above.
+     */
+    plugins?: DragPlugin[] | (() => DragPlugin[]);
     onDragStart?: (data: DragEventData) => void;
     onDrag?: (data: DragEventData) => void;
     onDragEnd?: (data: DragEventData) => void;

package/dist/ui/pane/pane.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet, Component } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Plugin, Compartment, DragEventData } from '@neodrag/svelte';
+	import type { DragEventData, DragPlugin } from '@neodrag/svelte';
 	import type { IconProps } from '@lucide/svelte';
 	import Root from './pane-root.svelte';
 	import Handle from './pane-handle.svelte';
@@ -42,9 +42,10 @@
 		icon?: Component<IconProps> | null;
 		/** Disables dragging (reactive). */
 		disabled?: boolean;
-		/** Extra neodrag plugins (axis, bounds, grid, threshold, …) appended
-		 * after the pane's own. Pass Compartments for reactive plugin sets. */
-		plugins?: (Plugin | Compartment)[] | (() => (Plugin | Compartment)[]);
+		/** Tier-2 neodrag plugins (`use`) appended to the drag. Tier-1 concerns
+		 * (axis/bounds/grid/threshold) are Pane.Root props — spread through
+		 * restProps or use Root directly for those. */
+		plugins?: DragPlugin[] | (() => DragPlugin[]);
 		onDragStart?: (data: DragEventData) => void;
 		onDrag?: (data: DragEventData) => void;
 		onDragEnd?: (data: DragEventData) => void;

package/dist/ui/pane/pane.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet, Component } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Plugin, Compartment, DragEventData } from '@neodrag/svelte';
+import type { DragEventData, DragPlugin } from '@neodrag/svelte';
 import type { IconProps } from '@lucide/svelte';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
@@ -23,9 +23,10 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     icon?: Component<IconProps> | null;
     /** Disables dragging (reactive). */
     disabled?: boolean;
-    /** Extra neodrag plugins (axis, bounds, grid, threshold, …) appended
-     * after the pane's own. Pass Compartments for reactive plugin sets. */
-    plugins?: (Plugin | Compartment)[] | (() => (Plugin | Compartment)[]);
+    /** Tier-2 neodrag plugins (`use`) appended to the drag. Tier-1 concerns
+     * (axis/bounds/grid/threshold) are Pane.Root props — spread through
+     * restProps or use Root directly for those. */
+    plugins?: DragPlugin[] | (() => DragPlugin[]);
     onDragStart?: (data: DragEventData) => void;
     onDrag?: (data: DragEventData) => void;
     onDragEnd?: (data: DragEventData) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.16.6",
+	"version": "4.16.8",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -155,7 +155,7 @@
 	"dependencies": {
 		"@internationalized/date": "^3.12.3",
 		"@lucide/svelte": "^0.577.0",
-		"@neodrag/svelte": "^3.0.0-next.8",
+		"@neodrag/svelte": "3.0.0-next.10",
 		"bits-ui": "^2.18.1",
 		"clsx": "^2.1.1",
 		"dompurify": "^3.4.12",