@signal9/era-ui 1.10.3 → 1.11.0

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

@@ -93,7 +93,36 @@
 	// 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 }[] = [
-		// corners: a square just OUTSIDE each corner (diagonal gap filler)
+		// edges FIRST so the corners (rendered after) paint on top of them and win
+		// the hit test where they overlap — a corner press always resizes
+		// diagonally, never along a single axis. n + w stay OUTSIDE only
+		// (translate ±100%); s + e straddle (translate ±50%) so the right and
+		// bottom also reach ~6px inward.
+		{
+			dir: 'n',
+			cursor: 'cursor-ns-resize',
+			place: 'top:0;left:0;right:0;translate:0 -100%;height:calc(var(--era-h-md)/4)'
+		},
+		{
+			dir: 's',
+			cursor: 'cursor-ns-resize',
+			place: 'bottom:0;left:0;right:0;translate:0 50%;height:calc(var(--era-h-md)/2)'
+		},
+		{
+			dir: 'w',
+			cursor: 'cursor-ew-resize',
+			place: 'left:0;top:0;bottom:0;translate:-100% 0;width:calc(var(--era-h-md)/4)'
+		},
+		{
+			// Inset the top by the handle-bar height so its inward reach stays clear
+			// of the drag bar (keeping the whole bar draggable).
+			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)'
+		},
+		// 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.
 		{
 			dir: 'nw',
 			cursor: 'cursor-nwse-resize',
@@ -119,31 +148,6 @@
 			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)'
-		},
-		// edges. n + w stay OUTSIDE only (translate ±100%); s + e straddle
-		// (translate ±50%) so the right and bottom also reach ~6px inward.
-		{
-			dir: 'n',
-			cursor: 'cursor-ns-resize',
-			place: 'top:0;left:0;right:0;translate:0 -100%;height:calc(var(--era-h-md)/4)'
-		},
-		{
-			dir: 's',
-			cursor: 'cursor-ns-resize',
-			place: 'bottom:0;left:0;right:0;translate:0 50%;height:calc(var(--era-h-md)/2)'
-		},
-		{
-			dir: 'w',
-			cursor: 'cursor-ew-resize',
-			place: 'left:0;top:0;bottom:0;translate:-100% 0;width:calc(var(--era-h-md)/4)'
-		},
-		{
-			// Inset the top by the handle-bar height so its inward reach stays clear
-			// of the drag bar (keeping the whole bar draggable).
-			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)'
 		}
 	];
 

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.3",
+	"version": "1.11.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",