@signal9/era-ui 1.10.4 → 1.11.0

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