@weasel-js/labkit 1.4.0 → 1.4.2

package/src/layers/LayerList.test.tsx

@@ -1,7 +1,7 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import type { LayerDescriptor } from '../instrument/types';
-import { LayerList } from './LayerList';
+import { LayerList, type LayerListProps, type LayerTreeNode } from './LayerList';
 
 describe('<LayerList>', () => {
   it('renders one row per layer', () => {
@@ -47,3 +47,186 @@ describe('<LayerList>', () => {
     expect(onToggle).toHaveBeenCalledWith('a', false);
   });
 });
+
+const twoLayers: LayerDescriptor[] = [
+  { id: 'a', label: 'A' },
+  { id: 'b', label: 'B' },
+];
+
+function dispatchOn(target: EventTarget, type: string, init: PointerEventInit) {
+  act(() => {
+    target.dispatchEvent(new PointerEvent(type, { pointerId: 1, bubbles: true, ...init }));
+  });
+}
+
+/** jsdom measures every row at zero height, so `startDrag` falls back to a
+ *  pitch of 1: one pixel of travel is one row. */
+function renderDraggable(onReorder = vi.fn()) {
+  const result = render(
+    <LayerList
+      layers={twoLayers}
+      visibility={{ a: true, b: true }}
+      onReorder={onReorder}
+      onToggle={vi.fn()}
+    />,
+  );
+  return { ...result, onReorder, handle: screen.getByLabelText('Reorder A') };
+}
+
+/** Index of the row the drag currently marks, or -1 when nothing is dragging. */
+function draggingRow(container: HTMLElement): number {
+  const rows = Array.from(container.querySelectorAll('.lk-layer-list__row'));
+  return rows.findIndex((r) => r.classList.contains('lk-layer-list__row--dragging'));
+}
+
+describe('<LayerList> reordering', () => {
+  it('reorders from a release that lands off the handle', () => {
+    const { onReorder, handle } = renderDraggable();
+    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
+    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
+    dispatchOn(document, 'pointerup', { clientY: 1 });
+    expect(onReorder).toHaveBeenCalledTimes(1);
+    expect(onReorder.mock.calls[0][0].map((l: LayerDescriptor) => l.id)).toEqual(['b', 'a']);
+  });
+
+  // The other half of the rule — a detached origin does cancel — is owned by
+  // pointerSession.test.ts, which exercises it without React in the way.
+  it('keeps dragging when capture is lost and the handle is still in the document', () => {
+    const { onReorder, handle, container } = renderDraggable();
+    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
+    // Chrome releases capture a beat before it delivers pointerup, so ending
+    // here throws away a release that has already been dispatched.
+    dispatchOn(handle, 'lostpointercapture', {});
+    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
+    expect(draggingRow(container)).toBe(1);
+    dispatchOn(document, 'pointerup', { clientY: 1 });
+    expect(onReorder).toHaveBeenCalledTimes(1);
+    expect(onReorder.mock.calls[0][0].map((l: LayerDescriptor) => l.id)).toEqual(['b', 'a']);
+  });
+
+  it('reads a move with nothing held as the release that never arrived', () => {
+    const { onReorder, handle } = renderDraggable();
+    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
+    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
+    dispatchOn(document, 'pointermove', { buttons: 0, clientY: 40 });
+    expect(onReorder).toHaveBeenCalledTimes(1);
+    expect(onReorder.mock.calls[0][0].map((l: LayerDescriptor) => l.id)).toEqual(['b', 'a']);
+  });
+
+  it('drops its listeners when the list unmounts mid-drag', () => {
+    const { onReorder, handle, unmount } = renderDraggable();
+    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
+    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
+    unmount();
+    dispatchOn(document, 'pointerup', { clientY: 1 });
+    expect(onReorder).not.toHaveBeenCalled();
+  });
+
+  it('does not capture a second pointer into the same drag', () => {
+    const { onReorder, handle } = renderDraggable();
+    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
+    dispatchOn(document, 'pointermove', { pointerId: 2, buttons: 1, clientY: 40 });
+    dispatchOn(document, 'pointerup', { pointerId: 1, clientY: 0 });
+    expect(onReorder).not.toHaveBeenCalled();
+  });
+});
+
+const tree: LayerTreeNode[] = [
+  {
+    id: 'a',
+    label: 'A',
+    children: [
+      { id: 'a1', label: 'A1' },
+      { id: 'a2', label: 'A2' },
+    ],
+  },
+  { id: 'b', label: 'B' },
+];
+
+function renderTree(props: Partial<LayerListProps> = {}) {
+  return render(
+    <LayerList layers={tree} visibility={{}} onReorder={vi.fn()} onToggle={vi.fn()} {...props} />,
+  );
+}
+
+describe('<LayerList> nesting', () => {
+  it('renders a row for each descendant of an expanded node', () => {
+    const { container } = renderTree();
+    expect(container.querySelectorAll('.lk-layer-list__row')).toHaveLength(4);
+    expect(screen.getByText('A1')).toBeInTheDocument();
+  });
+
+  it('hides the children of a collapsed node', () => {
+    const { container } = renderTree();
+    fireEvent.click(screen.getByLabelText('A sublayers'));
+    expect(container.querySelectorAll('.lk-layer-list__row')).toHaveLength(2);
+    expect(screen.queryByText('A1')).toBeNull();
+  });
+
+  it('starts collapsed when the node says so', () => {
+    render(
+      <LayerList
+        layers={[{ ...tree[0], defaultCollapsed: true }, tree[1]]}
+        visibility={{}}
+        onReorder={vi.fn()}
+        onToggle={vi.fn()}
+      />,
+    );
+    expect(screen.queryByText('A1')).toBeNull();
+  });
+
+  it('takes collapse from collapsedIds and reports the next set', () => {
+    const onCollapsedChange = vi.fn();
+    renderTree({ collapsedIds: ['a'], onCollapsedChange });
+    expect(screen.queryByText('A1')).toBeNull();
+    fireEvent.click(screen.getByLabelText('A sublayers'));
+    expect(onCollapsedChange).toHaveBeenCalledWith([]);
+    // Controlled: the click alone does not open it.
+    expect(screen.queryByText('A1')).toBeNull();
+  });
+
+  it('ties the twisty to the subtree it reveals', () => {
+    const { container } = renderTree();
+    const controls = screen.getByLabelText('A sublayers').getAttribute('aria-controls');
+    expect(controls).toBeTruthy();
+    expect(container.querySelector(`[id="${controls}"]`)).toHaveClass('lk-layer-list__children');
+  });
+
+  it('spends no twisty column on a flat list', () => {
+    const { container } = render(
+      <LayerList layers={twoLayers} visibility={{}} onReorder={vi.fn()} onToggle={vi.fn()} />,
+    );
+    expect(container.querySelector('.lk-layer-list__twisty-gap')).toBeNull();
+    expect(screen.queryByLabelText(/sublayers$/)).toBeNull();
+  });
+
+  it('holds the twisty column open on childless siblings', () => {
+    const { container } = renderTree();
+    expect(container.querySelectorAll('.lk-layer-list__twisty-gap')).toHaveLength(3);
+  });
+
+  it('reorders within a subtree and leaves the rest of the tree alone', () => {
+    const onReorder = vi.fn();
+    renderTree({ onReorder });
+    const handle = screen.getByLabelText('Reorder A1');
+    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
+    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
+    dispatchOn(document, 'pointerup', { clientY: 1 });
+    expect(onReorder).toHaveBeenCalledTimes(1);
+    const next = onReorder.mock.calls[0][0] as LayerTreeNode[];
+    expect(next.map((l) => l.id)).toEqual(['a', 'b']);
+    expect(next[0].children?.map((l) => l.id)).toEqual(['a2', 'a1']);
+  });
+
+  it('reorders the top level without disturbing a subtree', () => {
+    const onReorder = vi.fn();
+    renderTree({ onReorder });
+    const handle = screen.getByLabelText('Reorder A');
+    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
+    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
+    dispatchOn(document, 'pointerup', { clientY: 1 });
+    const next = onReorder.mock.calls[0][0] as LayerTreeNode[];
+    expect(next.map((l) => l.id)).toEqual(['b', 'a']);
+    expect(next[1].children?.map((l) => l.id)).toEqual(['a1', 'a2']);
+  });
+});

package/src/layers/LayerList.tsx

@@ -1,31 +1,131 @@
-import { type PointerEvent, useRef, useState } from 'react';
+import { openPointerSession, type PointerSession } from '@weasel-js/core';
+import { Disclosure } from '@weasel-js/ui';
+import {
+  Fragment,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
 import type { LayerDescriptor } from '../instrument/types';
 import { DragHandleGlyph } from '../passthrough/weasel-ui';
 
+/** A layer that may itself contain layers. A plain `LayerDescriptor` is one
+ *  of these with no children, so a flat list needs no change. */
+export interface LayerTreeNode extends LayerDescriptor {
+  children?: LayerTreeNode[];
+  /** Render this node's children hidden on first paint. Ignored once
+   *  `collapsedIds` is supplied. */
+  defaultCollapsed?: boolean;
+}
+
 /** Props for `<LayerList>`. */
 export interface LayerListProps {
-  layers: LayerDescriptor[];
+  layers: LayerTreeNode[];
   visibility: Record<string, boolean>;
-  onReorder: (newOrder: LayerDescriptor[]) => void;
+  /** The whole tree, with the dragged node moved. Reordering is scoped to a
+   *  node's siblings: a drag never changes which parent a layer sits under. */
+  onReorder: (newOrder: LayerTreeNode[]) => void;
   onToggle: (id: string, visible: boolean) => void;
+  /** Ids whose children are hidden. Supplying it makes collapse controlled;
+   *  without it the list keeps its own, seeded from `defaultCollapsed`. */
+  collapsedIds?: readonly string[];
+  onCollapsedChange?: (ids: string[]) => void;
   className?: string;
 }
 
 interface DragState {
-  pointerId: number;
+  /** Id of the dragged row's parent, or null at the top level. */
+  parentId: string | null;
   fromIndex: number;
+  toIndex: number;
   startY: number;
   /** Row height plus row gap, measured when the drag starts. */
   pitch: number;
 }
 
+/** Which row the drag currently marks. */
+interface DragMark {
+  parentId: string | null;
+  index: number;
+}
+
+function findNode(nodes: LayerTreeNode[], id: string): LayerTreeNode | null {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    const hit = node.children ? findNode(node.children, id) : null;
+    if (hit) return hit;
+  }
+  return null;
+}
+
+function siblingsOf(layers: LayerTreeNode[], parentId: string | null): LayerTreeNode[] {
+  if (parentId === null) return layers;
+  return findNode(layers, parentId)?.children ?? [];
+}
+
+function withChildren(
+  nodes: LayerTreeNode[],
+  parentId: string | null,
+  next: LayerTreeNode[],
+): LayerTreeNode[] {
+  if (parentId === null) return next;
+  return nodes.map((node) => {
+    if (node.id === parentId) return { ...node, children: next };
+    if (node.children) return { ...node, children: withChildren(node.children, parentId, next) };
+    return node;
+  });
+}
+
+function collectCollapsed(nodes: LayerTreeNode[], into: Set<string>): Set<string> {
+  for (const node of nodes) {
+    if (node.defaultCollapsed) into.add(node.id);
+    if (node.children) collectCollapsed(node.children, into);
+  }
+  return into;
+}
+
+function anyNested(nodes: LayerTreeNode[]): boolean {
+  return nodes.some((n) => (n.children?.length ?? 0) > 0);
+}
+
 /** A reorderable list of layers with per-layer visibility toggles. Layers
- *  marked `alwaysOn` are pinned and cannot be reordered or hidden. */
-export function LayerList({ layers, visibility, onReorder, onToggle, className }: LayerListProps) {
-  const reorderable = layers.filter((l) => !l.alwaysOn);
-  const pinned = layers.filter((l) => l.alwaysOn);
-  const [dragIndex, setDragIndex] = useState<number | null>(null);
+ *  marked `alwaysOn` are pinned and cannot be reordered or hidden. Layers with
+ *  `children` render as an expandable subtree. */
+export function LayerList({
+  layers,
+  visibility,
+  onReorder,
+  onToggle,
+  collapsedIds,
+  onCollapsedChange,
+  className,
+}: LayerListProps) {
+  const [dragMark, setDragMark] = useState<DragMark | null>(null);
+  const [ownCollapsed, setOwnCollapsed] = useState<Set<string>>(() =>
+    collectCollapsed(layers, new Set()),
+  );
   const dragRef = useRef<DragState | null>(null);
+  const sessionRef = useRef<PointerSession | null>(null);
+  const uid = useId();
+  // The session's callbacks outlive the render that opened them, so the commit
+  // reads its inputs here rather than from that render's closure.
+  const commitRef = useRef({ layers, onReorder });
+  commitRef.current = { layers, onReorder };
+
+  useEffect(() => () => sessionRef.current?.cancel(), []);
+
+  const collapsed = collapsedIds ? new Set(collapsedIds) : ownCollapsed;
+
+  const toggleCollapsed = (id: string) => {
+    const next = new Set(collapsed);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    if (!collapsedIds) setOwnCollapsed(next);
+    onCollapsedChange?.([...next]);
+  };
 
   if (layers.length === 0) {
     return (
@@ -35,87 +135,134 @@ export function LayerList({ layers, visibility, onReorder, onToggle, className }
     );
   }
 
-  const startDrag = (e: PointerEvent<HTMLElement>, index: number) => {
-    e.currentTarget.setPointerCapture(e.pointerId);
+  const clearDrag = () => {
+    dragRef.current = null;
+    sessionRef.current = null;
+    setDragMark(null);
+  };
+
+  const startDrag = (e: ReactPointerEvent<HTMLElement>, parentId: string | null, index: number) => {
     // Measured at grab time rather than hardcoded: a restyle that changes row
     // height or gap would otherwise silently skew every drag distance.
     const row = e.currentTarget.closest('.lk-layer-list__row');
     const list = row?.parentElement;
     const gap = list ? Number.parseFloat(getComputedStyle(list).rowGap) || 0 : 0;
     const pitch = row ? row.getBoundingClientRect().height + gap : 0;
-    dragRef.current = {
-      pointerId: e.pointerId,
+    const drag: DragState = {
+      parentId,
       fromIndex: index,
+      toIndex: index,
       startY: e.clientY,
       pitch: pitch > 0 ? pitch : 1,
     };
-    setDragIndex(index);
+    dragRef.current = drag;
+    setDragMark({ parentId, index });
+    sessionRef.current = openPointerSession(e.currentTarget, e, {
+      onMove: (ev) => {
+        const delta = Math.round((ev.clientY - drag.startY) / drag.pitch);
+        const siblings = siblingsOf(commitRef.current.layers, parentId);
+        const last = siblings.filter((l) => !l.alwaysOn).length - 1;
+        drag.toIndex = Math.min(last, Math.max(0, drag.fromIndex + delta));
+        setDragMark({ parentId, index: drag.toIndex });
+      },
+      onEnd: () => {
+        const { layers: tree, onReorder: commit } = commitRef.current;
+        const { fromIndex, toIndex } = drag;
+        clearDrag();
+        if (toIndex === fromIndex) return;
+        const siblings = siblingsOf(tree, parentId);
+        const rows = siblings.filter((l) => !l.alwaysOn);
+        const locked = siblings.filter((l) => l.alwaysOn);
+        const next = [...rows];
+        const [moved] = next.splice(fromIndex, 1);
+        if (moved) next.splice(toIndex, 0, moved);
+        commit(withChildren(tree, parentId, [...next, ...locked]));
+      },
+      // An interrupted drag never named a destination, so it reorders nothing.
+      onCancel: clearDrag,
+    });
   };
 
-  const moveDrag = (e: PointerEvent<HTMLElement>) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    const delta = Math.round((e.clientY - drag.startY) / drag.pitch);
-    const target = Math.min(reorderable.length - 1, Math.max(0, drag.fromIndex + delta));
-    setDragIndex(target);
-  };
+  // A twisty column on every row keeps labels aligned across depths, but a
+  // flat list would only be paying 20px for it.
+  const nested = anyNested(layers);
 
-  const endDrag = (e: PointerEvent<HTMLElement>) => {
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    }
-    if (dragIndex !== null && dragIndex !== drag.fromIndex) {
-      const next = [...reorderable];
-      const [moved] = next.splice(drag.fromIndex, 1);
-      if (moved) next.splice(dragIndex, 0, moved);
-      onReorder([...next, ...pinned]);
-    }
-    dragRef.current = null;
-    setDragIndex(null);
-  };
+  function renderRow(
+    layer: LayerTreeNode,
+    parentId: string | null,
+    index: number,
+    path: string,
+    pinned: boolean,
+  ): ReactNode {
+    const kids = layer.children ?? [];
+    const open = kids.length > 0 && !collapsed.has(layer.id);
+    const bodyId = `${uid}${path}`;
+    const dragging = !pinned && dragMark?.parentId === parentId && dragMark.index === index;
+    const cls = ['lk-layer-list__row'];
+    if (dragging) cls.push('lk-layer-list__row--dragging');
+    if (pinned) cls.push('lk-layer-list__row--pinned');
+    return (
+      <Fragment key={layer.id}>
+        <div className={cls.join(' ')}>
+          {nested &&
+            (kids.length > 0 ? (
+              <Disclosure
+                open={open}
+                onToggle={() => toggleCollapsed(layer.id)}
+                label={`${layer.label} sublayers`}
+                controls={bodyId}
+              />
+            ) : (
+              <span className="lk-layer-list__twisty-gap" />
+            ))}
+          {pinned ? (
+            <span className="lk-layer-list__lock" role="img" aria-label="Always on">
+              🔒
+            </span>
+          ) : (
+            <>
+              <button
+                type="button"
+                className="lk-layer-list__handle"
+                aria-label={`Reorder ${layer.label}`}
+                onPointerDown={(e) => startDrag(e, parentId, index)}
+              >
+                <DragHandleGlyph size={13} />
+              </button>
+              <input
+                className="lk-layer-list__check"
+                type="checkbox"
+                checked={visibility[layer.id] !== false}
+                onChange={(e) => onToggle(layer.id, e.target.checked)}
+                aria-label={`Toggle ${layer.label}`}
+              />
+            </>
+          )}
+          <span className="lk-layer-list__label">{layer.label}</span>
+        </div>
+        {open && (
+          <div id={bodyId} className="lk-layer-list__children">
+            {renderLevel(kids, layer.id, path)}
+          </div>
+        )}
+      </Fragment>
+    );
+  }
+
+  function renderLevel(nodes: LayerTreeNode[], parentId: string | null, path: string): ReactNode {
+    const reorderable = nodes.filter((l) => !l.alwaysOn);
+    const pinned = nodes.filter((l) => l.alwaysOn);
+    return (
+      <>
+        {reorderable.map((layer, i) => renderRow(layer, parentId, i, `${path}-${i}`, false))}
+        {pinned.map((layer, i) => renderRow(layer, parentId, i, `${path}-p${i}`, true))}
+      </>
+    );
+  }
 
   return (
     <div className={className ? `lk-layer-list ${className}` : 'lk-layer-list'}>
-      {reorderable.map((layer, i) => {
-        const isDragging = dragIndex === i;
-        return (
-          <div
-            key={layer.id}
-            className={
-              isDragging ? 'lk-layer-list__row lk-layer-list__row--dragging' : 'lk-layer-list__row'
-            }
-          >
-            <button
-              type="button"
-              className="lk-layer-list__handle"
-              aria-label={`Reorder ${layer.label}`}
-              onPointerDown={(e) => startDrag(e, i)}
-              onPointerMove={moveDrag}
-              onPointerUp={endDrag}
-            >
-              <DragHandleGlyph size={13} />
-            </button>
-            <input
-              className="lk-layer-list__check"
-              type="checkbox"
-              checked={visibility[layer.id] !== false}
-              onChange={(e) => onToggle(layer.id, e.target.checked)}
-              aria-label={`Toggle ${layer.label}`}
-            />
-            <span className="lk-layer-list__label">{layer.label}</span>
-          </div>
-        );
-      })}
-      {pinned.map((layer) => (
-        <div key={layer.id} className="lk-layer-list__row lk-layer-list__row--pinned">
-          <span className="lk-layer-list__lock" role="img" aria-label="Always on">
-            🔒
-          </span>
-          <span className="lk-layer-list__label">{layer.label}</span>
-        </div>
-      ))}
+      {renderLevel(layers, null, '')}
     </div>
   );
 }

package/src/layers/index.ts

@@ -1,3 +1,3 @@
 export type { LayerCapability, LayerDescriptor } from '../instrument/types';
-export type { LayerListProps } from './LayerList';
+export type { LayerListProps, LayerTreeNode } from './LayerList';
 export { LayerList } from './LayerList';

package/src/passthrough/weasel-ui.ts

@@ -51,6 +51,11 @@ export {
   type DataGridProps,
   Dialog,
   type DialogProps,
+  Disclosure,
+  type DisclosureDirection,
+  type DisclosureProps,
+  DisclosureRow,
+  type DisclosureRowProps,
   DragHandleGlyph,
   type DragHandleGlyphProps,
   detectPlatform,

package/src/primitives/FloatingPanel.test.tsx

@@ -313,3 +313,90 @@ 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');
+  });
+
+  // The other half of the rule — a detached origin does cancel — is owned by
+  // pointerSession.test.ts, which exercises it without React in the way.
+  it('keeps dragging when capture is lost and the panel is still in the document', () => {
+    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.style.left).toBe('100px');
+    // Chrome releases capture a beat before it delivers pointerup, so ending
+    // here throws away a release that has already been dispatched.
+    fireEvent(panel, new PointerEvent('lostpointercapture', { pointerId: 1, bubbles: true }));
+    expect(panel.dataset.dragging).toBe('true');
+    fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 1, clientX: 300, clientY: 180 });
+    expect(panel.style.left).toBe('200px');
+  });
+
+  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();
+    }
+  });
+});