@signal9/era-ui 1.11.3 → 1.11.5

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

@@ -88,12 +88,13 @@
 	// that gaps the close button from the pane edge) OUTSIDE the pane. n + w are
 	// that thin outward-only. s + e straddle (translate ±50%, double thickness)
 	// so they also reach xs-inset-sm INWARD — on the right, into the close-button
-	// gap. Corners are h-md/2 squares straddling each corner; each reaches h-md/4
-	// along both edges, so the edges are inset by that at both ends and stop right
-	// where a corner begins instead of running under it. `dir` is any of n/s/e/w;
-	// a 2-letter dir is a corner. Handles live in a layer aligned to the pane's
-	// border box (markup) and are data-pane-control so they never start a pane
-	// drag.
+	// gap. Corners are 2·xs-inset-sm squares straddling each corner — the same
+	// thickness as the blue rails, so they protrude the matching xs-inset-sm and
+	// reach xs-inset-sm along both edges; the edges are inset by that at both ends
+	// and stop right where a corner begins instead of running under it. `dir` is
+	// any of n/s/e/w; a 2-letter dir is a corner. Handles live in a layer aligned
+	// to the pane's border box (markup) and are data-pane-control so they never
+	// start a pane drag.
 	type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
 	const RESIZE_HANDLES: { dir: ResizeDir; cursor: string; place: string }[] = [
 		// edges FIRST so the corners (rendered after) paint on top of them and win
@@ -105,25 +106,25 @@
 			dir: 'n',
 			cursor: 'cursor-ns-resize',
 			place:
-				'top:0;left:calc(var(--era-h-md)/4);right:calc(var(--era-h-md)/4);translate:0 -100%;height:var(--era-xs-inset-sm)'
+				'top:0;left:var(--era-xs-inset-sm);right:var(--era-xs-inset-sm);translate:0 -100%;height:var(--era-xs-inset-sm)'
 		},
 		{
 			dir: 's',
 			cursor: 'cursor-ns-resize',
 			place:
-				'bottom:0;left:calc(var(--era-h-md)/4);right:calc(var(--era-h-md)/4);translate:0 50%;height:calc(var(--era-xs-inset-sm)*2)'
+				'bottom:0;left:var(--era-xs-inset-sm);right:var(--era-xs-inset-sm);translate:0 50%;height:calc(var(--era-xs-inset-sm)*2)'
 		},
 		{
 			dir: 'w',
 			cursor: 'cursor-ew-resize',
 			place:
-				'left:0;top:calc(var(--era-h-md)/4);bottom:calc(var(--era-h-md)/4);translate:-100% 0;width:var(--era-xs-inset-sm)'
+				'left:0;top:var(--era-xs-inset-sm);bottom:var(--era-xs-inset-sm);translate:-100% 0;width:var(--era-xs-inset-sm)'
 		},
 		{
 			dir: 'e',
 			cursor: 'cursor-ew-resize',
 			place:
-				'right:0;top:calc(var(--era-h-md)/4);bottom:calc(var(--era-h-md)/4);translate:50% 0;width:calc(var(--era-xs-inset-sm)*2)'
+				'right:0;top:var(--era-xs-inset-sm);bottom:var(--era-xs-inset-sm);translate:50% 0;width:calc(var(--era-xs-inset-sm)*2)'
 		},
 		// corners LAST — a square at each corner (diagonal gap filler), painted
 		// above the edges so the red grab zone is always on top of the blue.
@@ -131,19 +132,19 @@
 			dir: 'nw',
 			cursor: 'cursor-nwse-resize',
 			place:
-				'top:0;left:0;translate:-50% -50%;width:calc(var(--era-h-md)/2);height:calc(var(--era-h-md)/2)'
+				'top:0;left:0;translate:-50% -50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
 		},
 		{
 			dir: 'ne',
 			cursor: 'cursor-nesw-resize',
 			place:
-				'top:0;right:0;translate:50% -50%;width:calc(var(--era-h-md)/2);height:calc(var(--era-h-md)/2)'
+				'top:0;right:0;translate:50% -50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
 		},
 		{
 			dir: 'sw',
 			cursor: 'cursor-nesw-resize',
 			place:
-				'bottom:0;left:0;translate:-50% 50%;width:calc(var(--era-h-md)/2);height:calc(var(--era-h-md)/2)'
+				'bottom:0;left:0;translate:-50% 50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
 		},
 		{
 			// All four corners straddle (translate ±50%): 6px out AND 6px in, so they
@@ -151,14 +152,20 @@
 			dir: 'se',
 			cursor: 'cursor-nwse-resize',
 			place:
-				'bottom:0;right:0;translate:50% 50%;width:calc(var(--era-h-md)/2);height:calc(var(--era-h-md)/2)'
+				'bottom:0;right:0;translate:50% 50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
 		}
 	];
 
-	// Pointer-capture resize. The active edges follow `dir`: e/s grow from the
-	// anchored top-left; w/n move the left/top edge, so both size AND position
-	// change (position is the neodrag offset — style:width/height leaves the
-	// transform intact). min-clamping stops the moving edge instead of the box.
+	// Pointer-capture resize. e/s grow from the anchored top-left — pure size, so
+	// they're already rock-solid. w/n also move the left/top edge: the box must
+	// grow AND shift so the far edge stays put. We do that shift with `margin`, not
+	// neodrag's position/transform. Why: on any `position` change neodrag clears its
+	// transform and re-applies it on its OWN rAF a frame later, so for one frame the
+	// box is new-size + stale-origin — the far edge wiggles every move. `margin` is
+	// neodrag-independent and lands in the same frame as style:width, so both edges
+	// commit together and the anchored edge holds still. On release we fold the
+	// margin back into neodrag's offset (position) and clear it, so neodrag's model
+	// matches the DOM and the next drag tracks cleanly.
 	function startResize(e: PointerEvent, dir: ResizeDir) {
 		if (!ref) return;
 		e.preventDefault();
@@ -179,26 +186,25 @@
 		let latest: { dx: number; dy: number } | null = null;
 		const apply = () => {
 			frame = 0;
-			if (!latest) return;
+			if (!latest || !ref) return;
 			const { dx, dy } = latest;
 			let w = startW;
 			let h = startH;
-			let px = startPos.x;
-			let py = startPos.y;
+			let mx = 0;
+			let my = 0;
 			if (dir.includes('e')) w = Math.max(minWidth, startW + dx);
 			if (dir.includes('w')) {
 				w = Math.max(minWidth, startW - dx);
-				px = startPos.x + (startW - w);
+				mx = startW - w; // ≤ 0: the left edge slides out, right edge fixed
 			}
 			if (dir.includes('s')) h = Math.max(minHeight, startH + dy);
 			if (dir.includes('n')) {
 				h = Math.max(minHeight, startH - dy);
-				py = startPos.y + (startH - h);
+				my = startH - h;
 			}
 			size = { width: w, height: h };
-			// Only e/s corners never move the origin — skip the position write (and
-			// its Compartment re-resolve) unless it actually changed.
-			if (px !== position.x || py !== position.y) position = { x: px, y: py };
+			ref.style.marginLeft = mx ? `${mx}px` : '';
+			ref.style.marginTop = my ? `${my}px` : '';
 		};
 		const onMove = (ev: PointerEvent) => {
 			latest = { dx: ev.clientX - startX, dy: ev.clientY - startY };
@@ -207,6 +213,16 @@
 		const onUp = (ev: PointerEvent) => {
 			if (frame) cancelAnimationFrame(frame);
 			apply(); // flush the final delta synchronously
+			// Fold the margin shift into neodrag's offset and clear the margin — a
+			// net-zero swap that leaves the pane exactly where it looks, but with
+			// neodrag's position matching the DOM again so the next drag is true.
+			const mx = parseFloat(ref!.style.marginLeft) || 0;
+			const my = parseFloat(ref!.style.marginTop) || 0;
+			if (mx || my) {
+				position = { x: startPos.x + mx, y: startPos.y + my };
+				ref!.style.marginLeft = '';
+				ref!.style.marginTop = '';
+			}
 			// Clearing `resizing` re-adds controls (see controlsComp), re-measuring
 			// the handle zone at the new size.
 			resizing = false;

package/package.json

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