@signal9/era-ui 1.10.4 → 1.11.1

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

@@ -84,13 +84,14 @@
 	// TEMP: show the grab zones while developing. Flip to false to hide them.
 	const SHOW_RESIZE_ZONES = true;
 
-	// Resize handles — a tidy OUTER MOAT: every hit zone sits fully OUTSIDE the
-	// pane (translate ±100%), so nothing reaches into the interior/frame and the
-	// whole content (drag bar included) is left completely clear. Edges are thin
-	// h-md/4 strips down each side; corners are h-md/2 squares filling the four
-	// diagonal gaps between them. `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.
+	// Resize handles. Every strip protrudes xs-inset-sm (= sp/2, the same inset
+	// 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, filling the close-
+	// button gap up to the button's edge. Corners are h-md/2 squares filling the
+	// four diagonal gaps. `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
@@ -101,25 +102,25 @@
 		{
 			dir: 'n',
 			cursor: 'cursor-ns-resize',
-			place: 'top:0;left:0;right:0;translate:0 -100%;height:calc(var(--era-h-md)/4)'
+			place: 'top:0;left:0;right:0;translate:0 -100%;height:var(--era-xs-inset-sm)'
 		},
 		{
 			dir: 's',
 			cursor: 'cursor-ns-resize',
-			place: 'bottom:0;left:0;right:0;translate:0 50%;height:calc(var(--era-h-md)/2)'
+			place: 'bottom:0;left:0;right:0;translate:0 50%;height:calc(var(--era-xs-inset-sm)*2)'
 		},
 		{
 			dir: 'w',
 			cursor: 'cursor-ew-resize',
-			place: 'left:0;top:0;bottom:0;translate:-100% 0;width:calc(var(--era-h-md)/4)'
+			place: 'left:0;top:0;bottom:0;translate:-100% 0;width:var(--era-xs-inset-sm)'
 		},
 		{
-			// Inset the top by the handle-bar height so its inward reach stays clear
-			// of the drag bar (keeping the whole bar draggable).
+			// Rises to top:0 (no inset) so its inward half overlays the close-button
+			// row — reaching exactly the button's edge, filling the gap on the left
+			// of the pane edge without covering the button.
 			dir: 'e',
 			cursor: 'cursor-ew-resize',
-			place:
-				'right:0;top:var(--era-h-sm);bottom:0;translate:50% 0;width:calc(var(--era-h-md)/2)'
+			place: 'right:0;top:0;bottom:0;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.

package/dist/ui/pane/pane-tab-list.svelte

@@ -6,78 +6,29 @@
 	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 
 	// When the pane is too narrow to fit every tab, the strip scrolls (min-w-0 +
-	// overflow-x-auto — chromeless via scrollbar-none; touch pans natively).
-	// data-pane-control carves it out of the pane's drag zone so a sideways drag
-	// scrolls the tabs instead of moving the pane.
+	// overflow-x-auto — chromeless via scrollbar-none). The strip stays IN the
+	// pane's drag zone (no data-pane-control) so grabbing a tab drags the pane;
+	// overflow is scrolled by the mouse wheel (below) or native touch panning
+	// (touch-pan-x), not by a pointer drag — a drag moves the pane instead.
 	//
-	// Mouse drag-to-scroll: grab anywhere in the strip and slide. A small
-	// threshold tells a scroll-drag from a tab click; once we've dragged, the
-	// trailing click is swallowed (capture phase) so a tab isn't toggled. Touch
-	// and pen fall through to native panning. A wheel handler (below) maps the
-	// vertical mouse wheel onto horizontal scroll while hovering the strip.
-	let startX = 0;
-	let startScroll = 0;
-	let dragging = false;
-	let dragged = false;
-
-	function onpointerdown(e: PointerEvent) {
-		if (!ref || e.pointerType !== 'mouse' || e.button !== 0) return;
-		dragging = true;
-		dragged = false;
-		startX = e.clientX;
-		startScroll = ref.scrollLeft;
-	}
-
-	function onpointermove(e: PointerEvent) {
-		if (!dragging || !ref) return;
-		const dx = e.clientX - startX;
-		if (!dragged && Math.abs(dx) > 3) {
-			dragged = true;
-			ref.setPointerCapture(e.pointerId);
-		}
-		if (dragged) ref.scrollLeft = startScroll - dx;
-	}
-
-	function endDrag(e: PointerEvent) {
-		if (!dragging) return;
-		dragging = false;
-		if (ref?.hasPointerCapture(e.pointerId)) ref.releasePointerCapture(e.pointerId);
-	}
-
-	// Two listeners that need non-default registration (capture / non-passive),
-	// so they're added imperatively rather than as element props:
-	//   - click (capture): swallow the click that follows a scroll-drag so the
-	//     tab under the cursor isn't selected — beats the trigger's own handler.
-	//   - wheel (non-passive): translate a vertical mouse wheel into horizontal
-	//     scroll while hovering the strip, and only consume the event when the
-	//     strip can actually move that way (otherwise the page scrolls as usual).
+	// The wheel listener needs non-passive registration (it calls preventDefault),
+	// so it's added imperatively rather than as an element prop: it translates a
+	// vertical mouse wheel into horizontal scroll while hovering the strip, and
+	// keeps the wheel captured even at an end so the page never takes over until
+	// the cursor leaves.
 	$effect(() => {
 		const node = ref;
 		if (!node) return;
-		const swallow = (e: MouseEvent) => {
-			if (dragged) {
-				e.stopPropagation();
-				e.preventDefault();
-				dragged = false;
-			}
-		};
 		const onWheel = (e: WheelEvent) => {
 			const max = node.scrollWidth - node.clientWidth;
 			if (max <= 0) return; // no overflow — let the page scroll
 			const delta = Math.abs(e.deltaY) >= Math.abs(e.deltaX) ? e.deltaY : e.deltaX;
 			if (delta === 0) return;
 			node.scrollLeft = Math.max(0, Math.min(max, node.scrollLeft + delta));
-			// Keep the wheel captured on the strip while it's hovered — even once
-			// an end is reached — so the page never takes over until the cursor
-			// leaves. (No edge bubbling.)
 			e.preventDefault();
 		};
-		node.addEventListener('click', swallow, true);
 		node.addEventListener('wheel', onWheel, { passive: false });
-		return () => {
-			node.removeEventListener('click', swallow, true);
-			node.removeEventListener('wheel', onWheel);
-		};
+		return () => node.removeEventListener('wheel', onWheel);
 	});
 </script>
 
@@ -86,11 +37,6 @@
      descenders (g/y/p) room inside the clip box (which is the padding edge). -->
 <Tabs.List
 	bind:ref
-	data-pane-control
-	{onpointerdown}
-	{onpointermove}
-	onpointerup={endDrag}
-	onpointercancel={endDrag}
 	class={cn(
 		'scrollbar-none flex min-w-0 touch-pan-x items-center gap-(--era-xs-inset-sm) overflow-x-auto py-0.5',
 		className

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

@@ -11,11 +11,12 @@
 </script>
 
 <!-- A tab trigger (era-ui Tabs.Trigger) styled as a text pill for the handle
-     Bar. data-pane-control carves it out of the drag zone so it clicks, not
-     drags. Active state paints with the hover token. -->
+     Bar. It stays IN the drag zone (no data-pane-control) so grabbing a tab
+     drags the pane, while a clean click still selects it — neodrag starts a
+     drag only on movement and suppresses the trailing click after a real one.
+     Active state paints with the hover token. -->
 <Tabs.Trigger
 	bind:ref
-	data-pane-control
 	class={cn(
 		'flex cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-xs) px-(--era-inset-sm) py-px text-body leading-none text-muted outline-none select-none hover:text-fg focus-visible:bg-(--era-highlight) data-[state=active]:bg-hover data-[state=active]:text-bright',
 		className

package/package.json

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