@signal9/era-ui 1.14.0 → 1.14.1

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

@@ -3,8 +3,6 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		draggable,
-		controls,
-		ControlFrom,
 		disabled as disabledPlugin,
 		events,
 		position as positionPlugin,
@@ -65,11 +63,31 @@
 
 	let resizing = $state(false);
 
-	// Ctrl-drag: while Ctrl is held the WHOLE pane becomes a drag handle, not just
-	// the bar. Track the modifier globally (keydown/keyup) so the controls zone
-	// below is already widened by the time a pointerdown lands; blur resets it so a
-	// Ctrl released off-window doesn't stick. Assigning the same boolean is a no-op
-	// in Svelte, so key auto-repeat doesn't thrash the Compartment.
+	// 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).
+	const dragGate: Plugin = {
+		name: 'era:pane-drag-gate',
+		shouldStart(_ctx, _state, event) {
+			const e = event as PointerEvent;
+			const target = e.target as Element | null;
+			if (!target) return false;
+			if (e.ctrlKey) return true;
+			if (target.closest('[data-pane-control]')) return false;
+			return target.closest('[data-pane-handle]') != null;
+		}
+	};
+
+	// 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
+	// styling just catches up a frame later. blur resets it so a Ctrl released
+	// off-window doesn't stick.
 	let ctrlHeld = $state(false);
 	$effect(() => {
 		const sync = (e: KeyboardEvent) => (ctrlHeld = e.ctrlKey);
@@ -84,31 +102,6 @@
 		};
 	});
 
-	// The handle bar is the drag zone. neodrag's `controls` plugin measures that
-	// zone once at setup and only refreshes it mid-drag, so after a resize the
-	// widened bar keeps the old (narrow) zone and its new area won't start a drag.
-	// Recompute it by dropping controls (→ null) and re-adding: a Compartment
-	// null→plugin swap re-runs the plugin's setup, re-measuring the handle. Two
-	// states drop it to null:
-	//   • resizing — the grip owns the pointer, you can't drag anyway.
-	//   • Ctrl held — no allow/block restriction, so the WHOLE pane is a drag handle
-	//     (ctrl-drag). Resize handles keep resizing because their own pointerdown
-	//     stops propagation before neodrag sees it.
-	// Read BOTH flags into locals first: `resizing || ctrlHeld` would short-circuit
-	// while resizing and drop the ctrlHeld reactive dependency, so a resize could
-	// leave ctrl-drag un-tracked until something else re-ran this. Assigning both
-	// forces the compartment to always depend on both.
-	const controlsComp = Compartment.of(() => {
-		const isResizing = resizing;
-		const isCtrl = ctrlHeld;
-		return isResizing || isCtrl
-			? null
-			: controls({
-					allow: ControlFrom.selector('[data-pane-handle]'),
-					block: ControlFrom.selector('[data-pane-control]')
-				});
-	});
-
 	// Dev aid: tint the grab zones so you can see them while tuning geometry. Off
 	// in production — flip to true when adjusting the handle placement above.
 	const SHOW_RESIZE_ZONES = false;
@@ -252,8 +245,8 @@
 				ref!.style.marginLeft = '';
 				ref!.style.marginTop = '';
 			}
-			// Clearing `resizing` re-adds controls (see controlsComp), re-measuring
-			// the handle zone at the new size.
+			// `resizing` now only suppresses the ctrl grab-cursor while the grip is
+			// active (the drag gate reads the DOM live, so nothing to re-measure).
 			resizing = false;
 			handle.releasePointerCapture(ev.pointerId);
 			handle.removeEventListener('pointermove', onMove);
@@ -301,9 +294,9 @@
 	style:width={size ? `${size.width}px` : undefined}
 	style:height={size ? `${size.height}px` : undefined}
 	{@attach draggable(() => [
-		// controlsComp restricts drags to the handle bar (and carves interactive
-		// controls back out); it re-measures the handle after a resize. See above.
-		controlsComp,
+		// 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,
 		// Exposes data-neodrag-state="idle | dragging" on the root — the drag-only
 		// layer-promotion hook hangs off it.
 		stateMarker(),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "1.14.0",
+	"version": "1.14.1",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",