@weasel-js/labkit 1.4.0-pre.1 → 1.4.1

package/src/passthrough/weasel-ui.test.ts

@@ -8,6 +8,8 @@ import {
   Dialog,
   Field,
   formatNumber,
+  ICON_PATHS,
+  Icon,
   Input,
   KeyCap,
   MINUS_SIGN,
@@ -69,6 +71,13 @@ describe('weasel-ui passthrough', () => {
     }
   });
 
+  it('re-exports the icon set, so a lab need not depend on weasel-ui itself', () => {
+    expect(['function', 'object']).toContain(typeof Icon);
+    expect(ICON_PATHS.layoutRows).toContain('<rect');
+    expect(ICON_PATHS.layoutColumns).toContain('<rect');
+    expect(ICON_PATHS.layoutGrid).toContain('<rect');
+  });
+
   it('re-exports app-chrome primitives as React components', () => {
     for (const C of [Sidebar, ToolPalette, KeyCap]) {
       expect(C).toBeDefined();

package/src/passthrough/weasel-ui.ts

@@ -69,6 +69,10 @@ export {
   formatShortcutParts,
   type GradientTrackOpts,
   type GridSettings,
+  ICON_PATHS,
+  Icon,
+  type IconName,
+  type IconProps,
   Input,
   type InputProps,
   type InterpolationMode,

package/src/primitives/FloatingPanel.test.tsx

@@ -313,3 +313,85 @@ describe('a clickable row nested in a list, the shape a floating panel usually h
     expect(panel.dataset.dragging).toBe('true');
   });
 });
+
+describe('FloatingPanel drag lifecycle', () => {
+  const realCapture = Element.prototype.setPointerCapture;
+  afterEach(() => {
+    Element.prototype.setPointerCapture = realCapture;
+  });
+
+  it('keeps dragging from moves the panel never sees, and ends on a release off it', () => {
+    const { panel } = renderPanel(<FloatingPanel anchor="top-left">x</FloatingPanel>);
+    fireEvent.pointerDown(panel, { pointerId: 1, buttons: 1, clientX: 100, clientY: 100 });
+    fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 1, clientX: 200, clientY: 180 });
+    expect(panel.dataset.dragging).toBe('true');
+    expect(panel.style.left).toBe('100px');
+    fireEvent.pointerUp(document.body, { pointerId: 1, clientX: 200, clientY: 180 });
+    expect(panel.dataset.dragging).toBeUndefined();
+    fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 1, clientX: 300, clientY: 180 });
+    expect(panel.style.left).toBe('100px');
+  });
+
+  it('ends the drag when capture is lost mid-gesture', () => {
+    const { panel } = renderPanel(<FloatingPanel anchor="top-left">x</FloatingPanel>);
+    fireEvent.pointerDown(panel, { pointerId: 1, buttons: 1, clientX: 100, clientY: 100 });
+    fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 1, clientX: 200, clientY: 180 });
+    fireEvent(panel, new PointerEvent('lostpointercapture', { pointerId: 1, bubbles: true }));
+    expect(panel.dataset.dragging).toBeUndefined();
+    fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 1, clientX: 300, clientY: 180 });
+    expect(panel.style.left).toBe('100px');
+  });
+
+  it('reads a move with nothing held as the release that never arrived', () => {
+    const { panel } = renderPanel(<FloatingPanel anchor="top-left">x</FloatingPanel>);
+    fireEvent.pointerDown(panel, { pointerId: 1, buttons: 1, clientX: 100, clientY: 100 });
+    fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 1, clientX: 200, clientY: 180 });
+    expect(panel.dataset.dragging).toBe('true');
+    fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 0, clientX: 300, clientY: 180 });
+    expect(panel.dataset.dragging).toBeUndefined();
+    expect(panel.style.left).toBe('100px');
+  });
+
+  it('captures the pointer only once the press crosses the drag threshold', () => {
+    // A proxy for the real symptom: jsdom's setPointerCapture never retargets,
+    // so the child click a capture-on-press would swallow cannot be observed.
+    const captured: number[] = [];
+    Element.prototype.setPointerCapture = (id: number) => {
+      captured.push(id);
+    };
+    const { panel } = renderPanel(<FloatingPanel anchor="top-left">x</FloatingPanel>);
+    fireEvent.pointerDown(panel, { pointerId: 7, buttons: 1, clientX: 100, clientY: 100 });
+    expect(captured).toEqual([]);
+    fireEvent.pointerMove(document.body, { pointerId: 7, buttons: 1, clientX: 140, clientY: 100 });
+    expect(captured).toEqual([7]);
+  });
+
+  it('drops its document listeners when the panel unmounts mid-drag', () => {
+    const added: string[] = [];
+    const removed: string[] = [];
+    const realAdd = document.addEventListener.bind(document);
+    const realRemove = document.removeEventListener.bind(document);
+    const addSpy = vi
+      .spyOn(document, 'addEventListener')
+      .mockImplementation((type, listener, opts) => {
+        added.push(String(type));
+        realAdd(type as never, listener as never, opts as never);
+      });
+    const removeSpy = vi
+      .spyOn(document, 'removeEventListener')
+      .mockImplementation((type, listener, opts) => {
+        removed.push(String(type));
+        realRemove(type as never, listener as never, opts as never);
+      });
+    try {
+      const { panel, unmount } = renderPanel(<FloatingPanel>x</FloatingPanel>);
+      fireEvent.pointerDown(panel, { pointerId: 1, buttons: 1, clientX: 100, clientY: 100 });
+      expect(added).toContain('pointermove');
+      unmount();
+      expect(removed).toContain('pointermove');
+    } finally {
+      addSpy.mockRestore();
+      removeSpy.mockRestore();
+    }
+  });
+});

package/src/primitives/FloatingPanel.tsx

@@ -1,3 +1,4 @@
+import { openPointerSession, type PointerSession } from '@weasel-js/core';
 import type React from 'react';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -130,67 +131,84 @@ export function FloatingPanel({
     .placements.get(ITEM_ID);
 
   const dragging = useRef<{ x: number; y: number } | null>(null);
-  /** Pressed but not yet moved far enough to be a drag. */
-  const pending = useRef<{ x: number; y: number; pointerId: number } | null>(null);
+  const session = useRef<PointerSession | null>(null);
   const [isDragging, setDragging] = useState(false);
+  // A drag outlives the render that started it, so the reducer's inputs are
+  // read here and not from that render's closure — a container resized
+  // mid-drag would otherwise place the panel against its old box.
+  const layout = useRef({ container, options, item });
+  layout.current = { container, options, item };
+
+  useEffect(() => () => session.current?.cancel(), []);
 
   const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     if (isInteractive(e.target)) return;
     // The canvas stack underneath owns pan/zoom on the same pointer events.
     e.stopPropagation();
+    const origin = e.currentTarget;
+    const pointerId = e.pointerId;
+    const start = { x: e.clientX, y: e.clientY };
+
+    const end = () => {
+      session.current = null;
+      if (!dragging.current) return;
+      dragging.current = null;
+      setDragging(false);
+      try {
+        origin.releasePointerCapture?.(pointerId);
+      } catch {
+        // Capture is already gone whenever the session ended by losing it.
+      }
+    };
+
     // Armed, not capturing. Capture retargets mouseup to this element, and the
     // browser then synthesizes no `click` on the child under the cursor — so
     // capturing on press makes every non-native control in the panel dead to a
     // real mouse, silently. `isInteractive` only exempts the names it lists; a
     // `role="button"` span, a react-aria control or a canvas is not among them.
-    pending.current = { x: e.clientX, y: e.clientY, pointerId: e.pointerId };
-  };
-
-  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-    const armed = pending.current;
-    if (armed && armed.pointerId === e.pointerId && !dragging.current) {
-      if (Math.hypot(e.clientX - armed.x, e.clientY - armed.y) < DRAG_THRESHOLD) return;
-      dragging.current = { x: armed.x, y: armed.y };
-      setDragging(true);
-      e.currentTarget.setPointerCapture?.(e.pointerId);
-    }
-    const from = dragging.current;
-    if (!from) return;
-    const dx = e.clientX - from.x;
-    const dy = e.clientY - from.y;
-    if (dx === 0 && dy === 0) return;
-    dragging.current = { x: e.clientX, y: e.clientY };
-    setPlace(
-      (prev) =>
-        strategy.reduce?.(
-          { at: { [ITEM_ID]: prev }, inner: undefined },
-          {
-            affordanceId: `${FLOATING_DRAG_PREFIX}${ITEM_ID}`,
-            kind: 'drag',
-            payload: { dx, dy },
-          },
-          { container, options, items: [item] },
-        ).at[ITEM_ID] ?? prev,
+    session.current = openPointerSession(
+      origin,
+      e,
+      {
+        onMove: (ev) => {
+          if (!dragging.current) {
+            if (Math.hypot(ev.clientX - start.x, ev.clientY - start.y) < DRAG_THRESHOLD) return;
+            dragging.current = { ...start };
+            setDragging(true);
+            origin.setPointerCapture?.(pointerId);
+          }
+          const from = dragging.current;
+          const dx = ev.clientX - from.x;
+          const dy = ev.clientY - from.y;
+          if (dx === 0 && dy === 0) return;
+          dragging.current = { x: ev.clientX, y: ev.clientY };
+          const { container: box, options: opts, item: only } = layout.current;
+          setPlace(
+            (prev) =>
+              strategy.reduce?.(
+                { at: { [ITEM_ID]: prev }, inner: undefined },
+                {
+                  affordanceId: `${FLOATING_DRAG_PREFIX}${ITEM_ID}`,
+                  kind: 'drag',
+                  payload: { dx, dy },
+                },
+                { container: box, options: opts, items: [only] },
+              ).at[ITEM_ID] ?? prev,
+          );
+        },
+        onEnd: end,
+        onCancel: end,
+      },
+      { capture: false },
     );
   };
 
-  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {
-    pending.current = null;
-    if (!dragging.current) return;
-    dragging.current = null;
-    setDragging(false);
-    e.currentTarget.releasePointerCapture?.(e.pointerId);
-  };
-
   return (
     <div
       className={className ? `lk-floating-panel ${className}` : 'lk-floating-panel'}
       data-dragging={isDragging ? 'true' : undefined}
       data-placed={rect ? 'true' : undefined}
-      onPointerCancel={endDrag}
       onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={endDrag}
       ref={ref}
       style={
         {

package/src/primitives/ZoomControl.tsx

@@ -45,6 +45,7 @@ export function ZoomControl({
       <Slider
         className="lk-zoom__slider"
         ariaLabel="Zoom"
+        density="slim"
         min={toTrack(min)}
         max={toTrack(max)}
         // Detents at the octaves plus actual size, so 25/50/100/200/400% are
@@ -65,6 +66,7 @@ export function ZoomControl({
         maxValue={max}
         step={0.01}
         hideSteppers
+        ghost
         formatOptions={{ style: 'percent', maximumFractionDigits: 0 }}
         onChange={(next) => {
           if (!Number.isFinite(next)) return;

package/src/state/store.ts

@@ -34,6 +34,7 @@ export interface LabStoreActions {
   updateTrialState: <TS>(id: string, next: TS | ((prev: TS) => TS)) => void;
   updateTrialConfig: <TC>(id: string, key: keyof TC, value: TC[keyof TC]) => void;
   updateTrialView: (id: string, view: unknown) => void;
+  updateTrialSidebarWidth: (id: string, width: number) => void;
   updateTrialAnnotations: (id: string, doc: unknown) => void;
   updateTrialUndoStack: (
     id: string,
@@ -136,6 +137,15 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
       scheduleFlush();
     },
 
+    updateTrialSidebarWidth: (id, width) => {
+      set((s) => ({
+        trials: s.trials.map((w) =>
+          w.id === id && w.sidebarWidth !== width ? { ...w, sidebarWidth: width } : w,
+        ),
+      }));
+      scheduleFlush();
+    },
+
     updateTrialAnnotations: (id, doc) => {
       set((s) => ({
         trials: s.trials.map((w) =>

package/src/state/types.ts

@@ -18,6 +18,9 @@ export interface TrialRecord<TS = unknown, TC = unknown, TV = unknown> {
   view: TV;
   /** This trial's own tool slot. Undefined means it reads the lab's. */
   activeToolId?: string | null;
+  /** The extent the trial's sidebar was last dragged to, in pixels. Undefined
+   *  until someone moves the seam. */
+  sidebarWidth?: number;
   /** The marks on this trial's annotation targets, as `AnnotationsApi.toJSON`
    *  wrote them. Opaque here, and absent for a trial whose instrument declares
    *  no `annotations` — or declares its own `storage`. Not in `state`, which

package/src/surface/AGENTS.md

@@ -17,7 +17,7 @@ than a few 3D tiles have to share one surface.
 | `deviceRect.ts` | `toDeviceRect` — y-flip and device-grid snapping for a GL viewport |
 | `useTiledSurface.ts` | ResizeObserver, dirty set, rAF coalescing, DPR |
 | `SurfaceContext.ts` | Carries the handle down |
-| `useSurfaceTile.ts` | `useSurfaceTile(id)`, `useSurface()`, `useSurfaceOptional()` |
+| `useSurfaceTile.ts` | `useSurfaceTile(id)`, `useTileId(id)`, `useSurface()`, `useSurfaceOptional()` |
 
 ## Shape of a consumer
 
@@ -40,6 +40,16 @@ const surface = useTiledSurface({
 draw has to know where it is drawing relative to a surface that may have resized
 under it.
 
+## A tile id is scoped to its trial
+
+The tile namespace is one lab-wide map, but an instrument names its regions once
+and every trial of it declares those same names. `useSurfaceTile` registers under
+`useTileId(id)` — `<trial>/<id>` inside a trial — and a frame's `rects` are keyed
+the same way, so a host looking a tile up calls `useTileId` for the key. Unscoped,
+the second trial to mount takes the first one's rect *and* its painter, and the
+first is never told it moved again: it keeps the box it was measured at while it
+was the only trial open.
+
 ## The unit is a rect, not a trial
 
 `useSurfaceTile(id)` attaches to whatever element the surface should draw into. A

package/src/surface/index.ts

@@ -2,7 +2,13 @@ export { composeRects, rectsEqual } from './composeRects';
 export { toDeviceRect } from './deviceRect';
 export type { Box, Rect } from './rect';
 export { SurfaceCanvasContext, SurfaceContext } from './SurfaceContext';
-export { useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile } from './useSurfaceTile';
+export {
+  useSurface,
+  useSurfaceCanvas,
+  useSurfaceOptional,
+  useSurfaceTile,
+  useTileId,
+} from './useSurfaceTile';
 export type {
   SurfaceFrame,
   SurfaceHandle,

package/src/surface/useSurfaceTile.ts

@@ -1,4 +1,5 @@
 import { useCallback, useContext } from 'react';
+import { TrialIdContext } from '../state/context';
 import { SurfaceCanvasContext, SurfaceContext } from './SurfaceContext';
 import type { SurfaceHandle } from './useTiledSurface';
 
@@ -20,19 +21,36 @@ export function useSurface(): SurfaceHandle {
   return surface;
 }
 
+/**
+ * The key `id` is registered under, and so the key it comes back on in a
+ * frame's `rects`: `<trial>/<id>` inside a trial, and `id` alone outside one.
+ *
+ * A surface's tile namespace is flat and shared by the whole lab, but an
+ * instrument names its regions once and every trial of it declares those same
+ * names. Unscoped, the second trial to mount takes the first one's rect and its
+ * painter, and the first is never told it moved again.
+ */
+export function useTileId(id: string): string {
+  const trial = useContext(TrialIdContext);
+  return trial ? `${trial}/${id}` : id;
+}
+
 /**
  * A ref callback that publishes this element's rect to the surface under `id`.
  *
  * Attach it to whichever element the surface should draw into — that is not
  * necessarily the trial's own element, since a trial may hold a drawn pane beside
  * an undrawn one, or none at all.
+ *
+ * The frame reports it under `useTileId(id)`, not under `id`.
  */
 export function useSurfaceTile(id: string): (el: HTMLElement | null) => void {
   const surface = useSurfaceOptional();
+  const tileId = useTileId(id);
   return useCallback(
     (el: HTMLElement | null) => {
-      surface?.registerTile(id, el);
+      surface?.registerTile(tileId, el);
     },
-    [surface, id],
+    [surface, tileId],
   );
 }

package/src/surface/useTiledSurface.ts

@@ -5,7 +5,10 @@ import type { Box, Rect } from './rect';
 
 /** What a surface owner is handed once per animation frame. `rects` carries every
  *  tile, not only the dirty ones: a scissored draw has to know where it is drawing
- *  relative to a surface that may have resized under it. */
+ *  relative to a surface that may have resized under it.
+ *
+ *  Its keys are what `useTileId` returns — `<trial>/<id>` for a tile registered
+ *  inside a trial — not the bare id the tile was named with. */
 export interface SurfaceFrame {
   dirty: ReadonlySet<string>;
   rects: ReadonlyMap<string, Rect>;

package/src/theme/Interstellar.stories.tsx

@@ -91,11 +91,12 @@ function SwatchGrid({ tokens, title }: { tokens: readonly Swatch[]; title: strin
 function NebulaPreview() {
   return (
     <div>
-      <h3 className="lk-theme-doc__heading">Cosmic backdrop (`--wzl-backdrop`)</h3>
+      <h3 className="lk-theme-doc__heading">Cosmic backdrop</h3>
       <div className="lk-theme-doc__nebula" style={{ background: 'var(--wzl-backdrop)' }} />
       <p className="lk-theme-doc__note">
-        Default: four radial gradients (purple, pink, blue, then a dark void base). Override per-Lab
-        by passing <code>nebula={'{[colors]}'}</code> to the <code>&lt;Lab&gt;</code> component.
+        <code>--wzl-backdrop</code> — four radial gradients (purple, pink, blue) over a dark void
+        base. Override per-Lab by passing <code>nebula={'{[colors]}'}</code> to the{' '}
+        <code>&lt;Lab&gt;</code> component.
       </p>
     </div>
   );

package/src/theme/base.less

@@ -66,8 +66,46 @@
     }
   }
 
+  // Mirrors packages/ui/src/components/range.module.css so a consumer's bare
+  // range matches the kit's. A weasel-ui component's own module class outranks
+  // this, which is what keeps InlineRange's gradient track intact.
   :where(input[type="range"]) {
-    accent-color: var(--wzl-accent);
+    appearance: none;
+    -webkit-appearance: none;
+    height: 12px;
+    background: transparent;
+    cursor: pointer;
+
+    &::-webkit-slider-runnable-track {
+      height: var(--wzl-slider-track-h);
+      border-radius: var(--wzl-radius-sm);
+      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-tint), transparent);
+    }
+
+    &::-moz-range-track {
+      height: var(--wzl-slider-track-h);
+      border-radius: var(--wzl-radius-sm);
+      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-tint), transparent);
+    }
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      -webkit-appearance: none;
+      width: var(--wzl-slider-thumb-size);
+      height: var(--wzl-slider-thumb-size);
+      border: none;
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-tint), transparent);
+      margin-top: calc((var(--wzl-slider-track-h) - var(--wzl-slider-thumb-size)) / 2);
+    }
+
+    &::-moz-range-thumb {
+      width: var(--wzl-slider-thumb-size);
+      height: var(--wzl-slider-thumb-size);
+      border: none;
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-tint), transparent);
+    }
   }
 }
 

package/src/trial/Trial.less

@@ -20,13 +20,19 @@
     overflow: hidden;
   }
 
+  // The sidebar and the content well are a windease strip, so their extents
+  // come from the strategy and this pane only has to fill the rect it was
+  // given. `.windease-zone` supplies the containing block.
+  &__panes {
+    flex: 1;
+    min-width: 0;
+  }
+
   &__sidebar {
-    flex-shrink: 0;
-    // Stated, not content-derived: an auto-width sidebar is as wide as its
-    // widest label, so one verbose config key sets the width of the lab.
-    width: var(--lk-trial-sidebar-w, 20rem);
     display: flex;
     flex-direction: column;
+    width: 100%;
+    height: 100%;
     min-height: 0;
     // Sections floor at their content height, so without this the last ones
     // are cut rather than reachable.
@@ -40,7 +46,8 @@
   &__content {
     // The viewport region anchors against this well.
     position: relative;
-    flex: 1;
+    width: 100%;
+    height: 100%;
     min-width: 0;
     min-height: 0;
     display: flex;
@@ -89,6 +96,21 @@
     flex-shrink: 0;
   }
 
+  // The strip's own seam. windease positions and sizes it; this is only what
+  // it looks like.
+  &__panes [data-affordance-kind='resize-x'] {
+    background: var(--wzl-border);
+  }
+
+  &__panes .windease-affordance-hit:hover [data-affordance-kind='resize-x'],
+  &__panes .windease-affordance-hit:focus-visible [data-affordance-kind='resize-x'] {
+    background: var(--wzl-accent);
+  }
+
+  &__panes .windease-affordance-hit:focus-visible {
+    outline: none;
+  }
+
   &--unknown {
     display: flex;
     align-items: center;

package/src/trial/TrialBody.test.tsx

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TrialBody } from './TrialBody';
+
+const VIEWPORT = { w: 800, h: 600 };
+
+function renderBody(props: Partial<Parameters<typeof TrialBody>[0]> = {}) {
+  return render(
+    <TrialBody viewport={VIEWPORT} sidebar={<p>sidebar body</p>} {...props}>
+      <p>instrument output</p>
+    </TrialBody>,
+  );
+}
+
+describe('TrialBody', () => {
+  it('renders both panes', () => {
+    renderBody();
+    expect(screen.getByText('sidebar body')).toBeInTheDocument();
+    expect(screen.getByText('instrument output')).toBeInTheDocument();
+  });
+
+  it('puts a labeled separator between the sidebar and the content', () => {
+    renderBody({ width: 320 });
+    const seam = screen.getByRole('separator');
+    expect(seam).toHaveAttribute('aria-orientation', 'horizontal');
+    expect(seam).toHaveAttribute('aria-valuenow', '320');
+    expect(seam).toHaveAccessibleName(/sidebar/i);
+  });
+
+  it('reports the width a drag lands on', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 380, clientY: 100 });
+    fireEvent.pointerUp(seam, { clientX: 380, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(380);
+  });
+
+  it('resizes from the keyboard', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.keyDown(seam, { key: 'ArrowRight' });
+    expect(onWidthChange).toHaveBeenLastCalledWith(328);
+  });
+
+  it('refuses to drag the sidebar past its stated bounds', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, minWidth: 200, maxWidth: 400, onWidthChange });
+    const seam = screen.getByRole('separator');
+    expect(seam).toHaveAttribute('aria-valuemin', '200');
+    expect(seam).toHaveAttribute('aria-valuemax', '400');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 900, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(400);
+  });
+
+  it('leaves the content pane a floor the seam cannot cross', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, maxWidth: 10_000, contentMinWidth: 300, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 5_000, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(VIEWPORT.w - 300);
+  });
+});