@signal9/era-ui 1.11.4 → 1.11.5

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

@@ -156,10 +156,16 @@
 		}
 	];
 
-	// 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();
@@ -180,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 };
@@ -208,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.4",
+	"version": "1.11.5",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",