@signal9/era-ui 1.7.1 → 1.7.3

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { Button } from '../button';
+	import { cn } from '../../utils/index.js';
 	import X from '@lucide/svelte/icons/x';
 
 	let {
@@ -17,13 +18,16 @@
      corner). A clean click still closes — neodrag only starts a drag on pointer
      movement, and it suppresses the trailing click after an actual drag, so a
      stationary click fires immediately with no delay. -->
+<!-- Sized to h-xxs (matching the tab pills' highlight height) rather than the
+     icon default (h-xs), so the close hover box and the active-tab highlight are
+     the same size in the handle bar; aspect-square keeps it a square. -->
 <Button
 	bind:ref
 	icon
 	size="icon"
 	tone="destructive"
 	aria-label="Close"
-	class={className}
+	class={cn('h-(--era-h-xxs) min-w-(--era-h-xxs)', className)}
 	{...restProps}
 >
 	<X class="size-(--era-h-xs)" />

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

@@ -65,13 +65,21 @@
 
 	let resizing = $state(false);
 
-	// neodrag's `controls` plugin caches the handle's allow-zone at setup and
-	// only refreshes it mid-drag. After a resize the widened handle bar would
-	// keep the old (narrow) zone, so its new area wouldn't initiate a drag until
-	// the next one. Bumping this on resize-end re-creates the draggable
-	// attachment below, re-running controls' setup so the zone matches the
-	// current width — the whole bar stays a handle at any size.
-	let dragGeneration = $state(0);
+	// The handle bar is the drag zone. neodrag's `controls` plugin measures that
+	// zone once at setup and only refreshes it mid-drag, so after a resize the
+	// widened bar keeps the old (narrow) zone and its new area won't start a drag.
+	// Recompute it by dropping controls while resizing and re-adding on release: a
+	// Compartment null→plugin swap re-runs the plugin's setup, re-measuring the
+	// handle at its new width — without re-initializing the whole draggable. You
+	// can't drag mid-resize anyway (the grip owns the pointer).
+	const controlsComp = Compartment.of(() =>
+		resizing
+			? null
+			: controls({
+					allow: ControlFrom.selector('[data-pane-handle]'),
+					block: ControlFrom.selector('[data-pane-control]')
+				})
+	);
 
 	// Corner-grip resize. The grip sits outside the handle allow-zone and is
 	// marked data-pane-control, so a drag can never start from it. Pointer
@@ -96,50 +104,22 @@
 			};
 		};
 		const onUp = (ev: PointerEvent) => {
+			// Clearing `resizing` re-adds controls (see controlsComp), re-measuring
+			// the handle zone at the new size.
 			resizing = false;
 			grip.releasePointerCapture(ev.pointerId);
 			grip.removeEventListener('pointermove', onMove);
 			grip.removeEventListener('pointerup', onUp);
-			// Recompute the handle drag-zone at the new size (see dragGeneration).
-			dragGeneration += 1;
 		};
 		grip.addEventListener('pointermove', onMove);
 		grip.addEventListener('pointerup', onUp);
 	}
-
-	// Reading dragGeneration ties this attachment's identity to it, so a resize
-	// re-creates the draggable and re-runs controls' setup (fresh handle zone).
-	// Position/disabled stay reactive without re-init via their Compartments.
-	const paneDraggable = $derived.by(() => {
-		void dragGeneration;
-		return draggable(() => [
-			// The handle bar initiates a drag; interactive controls inside it
-			// (close button, tab triggers) are carved back out so they click, not drag.
-			controls({
-				allow: ControlFrom.selector('[data-pane-handle]'),
-				block: ControlFrom.selector('[data-pane-control]')
-			}),
-			// Exposes data-neodrag-state="idle | dragging" (and a drag count) on
-			// the root — the hover-highlight and layer-promotion hooks hang off it.
-			stateMarker(),
-			events({
-				onDragStart,
-				onDrag: (data) => {
-					sync(data);
-					onDrag?.(data);
-				},
-				onDragEnd: (data) => {
-					sync(data);
-					onDragEnd?.(data);
-				}
-			}),
-			positionComp,
-			disabledComp,
-			...(typeof plugins === 'function' ? plugins() : plugins)
-		]);
-	});
 </script>
 
+<!-- Size via style: DIRECTIVES, not a style="…" string. neodrag positions the
+     pane by writing element.style.transform imperatively; a whole-attribute
+     style binding would clobber that transform on every size change, snapping
+     the pane to 0,0 mid-resize. Directives set individual properties only. -->
 <div
 	bind:this={ref}
 	class={cn(
@@ -154,9 +134,31 @@
 		'data-[neodrag-state=dragging]:will-change-transform',
 		className
 	)}
-	style={size ? `width:${size.width}px;height:${size.height}px` : undefined}
 	{...restProps}
-	{@attach paneDraggable}
+	style:width={size ? `${size.width}px` : undefined}
+	style:height={size ? `${size.height}px` : undefined}
+	{@attach draggable(() => [
+		// controlsComp restricts drags to the handle bar (and carves interactive
+		// controls back out); it re-measures the handle after a resize. See above.
+		controlsComp,
+		// Exposes data-neodrag-state="idle | dragging" on the root — the drag-only
+		// layer-promotion hook hangs off it.
+		stateMarker(),
+		events({
+			onDragStart,
+			onDrag: (data) => {
+				sync(data);
+				onDrag?.(data);
+			},
+			onDragEnd: (data) => {
+				sync(data);
+				onDragEnd?.(data);
+			}
+		}),
+		positionComp,
+		disabledComp,
+		...(typeof plugins === 'function' ? plugins() : plugins)
+	])}
 >
 	{@render children?.()}
 	{#if resizable}

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

@@ -17,7 +17,7 @@
 	bind:ref
 	data-pane-control
 	class={cn(
-		'flex cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-xs) px-(--era-inset-sm) py-0.5 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',
+		'flex h-(--era-h-xxs) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-xs) px-(--era-inset-sm) 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
 	)}
 	{...restProps}

package/package.json

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