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

package/dist/surface/index.d.ts

@@ -30,7 +30,10 @@ declare function toDeviceRect(rect: Rect, surfaceHeight: number, dpr: number): R
 
 /** 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. */
 interface SurfaceFrame {
     dirty: ReadonlySet<string>;
     rects: ReadonlyMap<string, Rect>;
@@ -80,14 +83,26 @@ declare function useSurfaceCanvas(): HTMLCanvasElement | null;
 declare function useSurfaceOptional(): SurfaceHandle | null;
 /** The surface above. Throws where a caller cannot work without one. */
 declare function useSurface(): SurfaceHandle;
+/**
+ * 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.
+ */
+declare function useTileId(id: string): string;
 /**
  * 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`.
  */
 declare function useSurfaceTile(id: string): (el: HTMLElement | null) => void;
 
-export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTiledSurface };
+export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface };
 export type { Box, Rect, SurfaceFrame, SurfaceHandle, TilePainter, UseTiledSurfaceOptions };

package/dist/surface/index.js

@@ -1,4 +1,5 @@
-export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTiledSurface } from '../chunk-ESIQNQ6K.js';
-import '../chunk-L5QJOOLV.js';
+export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTileId, useTiledSurface } from '../chunk-OFCBEZMU.js';
+import '../chunk-2YILQ7Y5.js';
+import '../chunk-DG2IFMLA.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/ui/layers/index.js

@@ -1,4 +1,4 @@
-export { c3 as LayerStack } from '../../chunk-RBGKL7NF.js';
-import '../../chunk-L5QJOOLV.js';
+export { c3 as LayerStack } from '../../chunk-J6SBFZYT.js';
+import '../../chunk-DG2IFMLA.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/undo/index.d.ts

@@ -1,10 +1,11 @@
-export { a0 as UndoCapability } from '../_dts/frac-C-2c72Ij.js';
+export { a0 as UndoCapability } from '../_dts/frac-X7mWgd7y.js';
 import 'react';
-import '../_dts/types-D6s4b7if.js';
-import '../_dts/PrefsForm-BkUJZx0A.js';
-import '../_dts/types-DYMaEvM5.js';
+import '../_dts/types-lg4TSCb2.js';
+import '../_dts/weasel-canvas-FJTFi3ZZ.js';
+import 'react/jsx-runtime';
+import '../_dts/PrefsForm.d-CgxUequc.js';
+import '../_dts/types-ChVJJHvk.js';
 import '../_dts/types-DJ79Tg5J.js';
-import '../_dts/types-C-gh9Ap-.js';
 
 /** A subscriber to a named event. */
 type EventListener = () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.4.0-pre.1",
+  "version": "1.4.1",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -93,7 +93,7 @@
     "dev:drag": "LABKIT_EXAMPLE=drag-lab vite",
     "dev:weasel": "LABKIT_EXAMPLE=weasel-lab vite",
     "build": "tsup && npm run build:dts && npm run build:css && npm run build:fonts",
-    "build:dts": "tsx scripts/build-dts.mts",
+    "build:dts": "NODE_OPTIONS=--max-old-space-size=3072 tsx scripts/build-dts.mts",
     "prepublishOnly": "npm run build",
     "build:css": "node scripts/build-css.mjs",
     "build:fonts": "mkdir -p dist/fonts && cp ../theme/fonts/*.woff2 dist/fonts/",
@@ -114,11 +114,11 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/core": "1.4.0-pre.1",
-    "@weasel-js/loupe": "1.4.0-pre.1",
-    "@weasel-js/svg": "1.4.0-pre.1",
-    "@weasel-js/theme": "1.4.0-pre.1",
-    "@weasel-js/ui": "1.4.0-pre.1",
+    "@weasel-js/core": "1.4.1",
+    "@weasel-js/loupe": "1.4.1",
+    "@weasel-js/svg": "1.4.1",
+    "@weasel-js/theme": "1.4.1",
+    "@weasel-js/ui": "1.4.1",
     "earcut": "2.2.4",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
@@ -129,7 +129,7 @@
     "@biomejs/biome": "^2.4.12",
     "@rollup/plugin-alias": "^6.0.0",
     "@testing-library/jest-dom": "^6.6.0",
-    "@weasel-js/modes": "1.4.0-pre.1",
+    "@weasel-js/modes": "1.4.1",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/annotations/AnnotationOverlay.tsx

@@ -9,7 +9,7 @@ import {
 import { type CSSProperties, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { Rect } from '../surface/rect';
-import { useSurfaceCanvas, useSurfaceOptional } from '../surface/useSurfaceTile';
+import { useSurfaceCanvas, useSurfaceOptional, useTileId } from '../surface/useSurfaceTile';
 import { createMarkDrawOne } from './drawOne';
 import type { WorldRect } from './frac';
 import { seenFrom } from './staleness';
@@ -101,12 +101,16 @@ export function AnnotationOverlay({
   configRef.current = config;
 
   const id = target.id;
+  // The surface's tile namespace is the whole lab's, and every trial of an
+  // instrument declares the same target ids — so the tile is registered under
+  // the trial-scoped key, not under `id`.
+  const tileId = useTileId(id);
   const lastTile = useRef<HTMLElement | null>(null);
   useEffect(() => {
     const el = target.ref.current ?? null;
     if (el === lastTile.current) return;
     lastTile.current = el;
-    surface?.registerTile(id, el);
+    surface?.registerTile(tileId, el);
   });
   useEffect(
     () => () => {
@@ -114,20 +118,20 @@ export function AnnotationOverlay({
       // commit. StrictMode's mount / unmount / mount would otherwise take the
       // tile out and never put it back, and the surface would measure nothing.
       lastTile.current = null;
-      surface?.registerTile(id, null);
+      surface?.registerTile(tileId, null);
     },
-    [surface, id],
+    [surface, tileId],
   );
 
   useEffect(
     () =>
-      surface?.registerPainter(id, (next) => {
+      surface?.registerPainter(tileId, (next) => {
         setRect((prev) => (sameRect(prev, next) ? prev : next));
         // The shared buffer was cleared if it resized this frame; this pane's
         // own loop has no way to know that.
         sceneCanvas.current?.requestRedraw();
       }),
-    [surface, id],
+    [surface, tileId],
   );
 
   const container = surface?.getContainer() ?? null;

package/src/annotations/Annotations.less

@@ -61,6 +61,12 @@
   cursor: pointer;
 }
 
+// Box and typography come from <Input>. This only says how the field shares
+// the row.
+.lk-mark-list__title {
+  width: 100%;
+}
+
 // The export panel: a target to export, how, and at what resolution. Held in
 // a popover because a mark belongs to a target — with more than one pane,
 // "export" on its own does not say what.

package/src/annotations/Annotations.overlay.test.tsx

@@ -10,7 +10,9 @@
 import { act, render } from '@testing-library/react';
 import { StrictMode, useRef } from 'react';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TrialIdProvider } from '../state/context';
 import { SurfaceCanvasContext, SurfaceContext } from '../surface/SurfaceContext';
+import type { SurfaceHandle } from '../surface/useTiledSurface';
 import { useTiledSurface } from '../surface/useTiledSurface';
 import { AnnotationTargets } from './AnnotationTargets';
 import { createAnnotationStore } from './store';
@@ -140,3 +142,114 @@ describe('<AnnotationTargets>', () => {
     expect(document.querySelectorAll('.lk-annotate__input')).toHaveLength(0);
   });
 });
+
+/** One trial's worth of the harness above: its own pane element, its own
+ *  overlay, and the target id every trial of an instrument shares. */
+function OneTrial({
+  trialId,
+  box,
+}: {
+  trialId: string;
+  box: { left: number; top: number; width: number; height: number };
+}) {
+  const pane = useRef<HTMLDivElement | null>(null);
+  const annotations = useRef(createAnnotationStore({ targets: () => [] })).current;
+  const capability: AnnotationsCapability = {
+    targets: (): AnnotationTarget[] => [{ id: 'pane:a', ref: pane, content: { w: 200, h: 100 } }],
+  };
+  return (
+    <TrialIdProvider trialId={trialId}>
+      <div
+        data-testid={trialId}
+        ref={(el) => {
+          pane.current = el;
+          if (el) stubBox(el, box.left, box.top, box.width, box.height);
+        }}
+      />
+      <AnnotationTargets
+        capability={capability}
+        state={{}}
+        config={{}}
+        annotations={annotations}
+        activeToolId="rect"
+      />
+    </TrialIdProvider>
+  );
+}
+
+describe('two trials of one instrument', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) =>
+      setTimeout(() => cb(0), 16),
+    );
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => clearTimeout(id));
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  // An instrument names its regions once, so every trial of it declares the
+  // same target id. Sharing the surface's tile namespace, the trial that opens
+  // second takes the first one's rect, its observer registration and its
+  // painter — and the first is never told it moved again, so it keeps the box
+  // it was measured at while it was the only trial open.
+  it('re-measures a trial that was alone when a second one opens beside it', () => {
+    let handle: SurfaceHandle | null = null;
+
+    function Trials({ second }: { second: boolean }) {
+      const surface = useTiledSurface({ onFrame: () => {} });
+      handle = surface;
+      return (
+        <SurfaceContext.Provider value={surface}>
+          <SurfaceCanvasContext.Provider value={null}>
+            <div
+              ref={(el) => {
+                if (!el) return;
+                stubBox(el, 0, 0, 1200, 700);
+                surface.containerRef(el);
+              }}
+            >
+              <OneTrial
+                trialId="t1"
+                box={{ left: 0, top: 0, width: second ? 476 : 666, height: 639 }}
+              />
+              {second ? (
+                <OneTrial trialId="t2" box={{ left: 500, top: 0, width: 476, height: 639 }} />
+              ) : null}
+            </div>
+          </SurfaceCanvasContext.Provider>
+        </SurfaceContext.Provider>
+      );
+    }
+
+    const boxes = (root: HTMLElement) => [
+      ...root.querySelectorAll<HTMLElement>('.lk-annotate__input'),
+    ];
+    const widths = (root: HTMLElement) =>
+      boxes(root).map((el) => el.style.getPropertyValue('--lk-anno-w'));
+
+    const { container, rerender } = render(<Trials second={false} />, { wrapper: StrictMode });
+    act(() => {
+      vi.advanceTimersByTime(64);
+    });
+    expect(widths(container)).toEqual(['666px']);
+
+    // The grid halves the open trial to make room. jsdom's ResizeObserver never
+    // fires, so this takes `Workspace`'s path — the one it takes anyway for a
+    // tile that moves without resizing, which no observer would have seen.
+    rerender(<Trials second={true} />);
+    act(() => {
+      handle?.invalidateRects();
+      vi.advanceTimersByTime(64);
+    });
+
+    expect(widths(container)).toEqual(['476px', '476px']);
+    expect(boxes(container).map((el) => el.style.getPropertyValue('--lk-anno-x'))).toEqual([
+      '0px',
+      '500px',
+    ]);
+  });
+});

package/src/annotations/MarkList.tsx

@@ -1,3 +1,4 @@
+import { Input } from '../passthrough/weasel-ui';
 import { useAnnotations } from './AnnotationsContext';
 import type { AnnotationMeaning } from './types';
 
@@ -43,12 +44,12 @@ export function MarkList({ meaning, config }: MarkListProps) {
                 ×
               </button>
             </div>
-            <input
+            <Input
               className="lk-mark-list__title"
               aria-label={`Title of ${a.kind} on ${a.target}`}
               value={a.title ?? ''}
               placeholder="Untitled"
-              onChange={(e) => marks.update(a.id, { title: e.target.value })}
+              onChange={(next) => marks.update(a.id, { title: next })}
             />
             {statuses.length > 0 ? (
               // A native select: it carries role, name and keyboard operability

package/src/canvas/CanvasStack.tsx

@@ -81,7 +81,14 @@ export function CanvasStack({
 
   const frame = useMemo(() => resolveFrame(worldSpec, size), [worldSpec, size]);
 
-  const handlers = usePanZoom({ view, onViewChange, minZoom, maxZoom, frame });
+  const onTap = (e: PointerEvent) => {
+    const el = containerRef.current;
+    if (!onHitTest || !el) return;
+    const rect = el.getBoundingClientRect();
+    onHitTest(screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top }, view, frame));
+  };
+
+  const handlers = usePanZoom({ view, onViewChange, minZoom, maxZoom, frame, onTap });
   useLayerScheduler({ layers, view, frame, canvasRefs: canvasMap, size, host: containerRef });
 
   const ctxValue = useMemo(
@@ -103,16 +110,6 @@ export function CanvasStack({
     height: size.height,
   };
 
-  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
-    const wasDragging = handlers.isDragging();
-    handlers.onPointerUp(e);
-    if (!wasDragging && onHitTest && containerRef.current) {
-      const rect = containerRef.current.getBoundingClientRect();
-      const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-      onHitTest(screenToWorld(screen, view, frame));
-    }
-  };
-
   return (
     <CanvasStackContext.Provider value={ctxValue}>
       <div
@@ -121,8 +118,6 @@ export function CanvasStack({
         style={containerStyle}
         onWheel={handlers.onWheel}
         onPointerDown={handlers.onPointerDown}
-        onPointerMove={handlers.onPointerMove}
-        onPointerUp={handlePointerUp}
       >
         {layers.map((layer) => (
           <canvas

package/src/canvas/useOrbit.test.ts

@@ -1,5 +1,15 @@
+import { act, renderHook } from '@testing-library/react';
+import type { PointerEvent as ReactPointerEvent } from 'react';
 import { describe, expect, it } from 'vitest';
-import { clampPitch, orbitAfterDrag, orbitAfterWheel, PITCH_LIMIT, wrapYaw } from './useOrbit';
+import {
+  clampPitch,
+  type OrbitView,
+  orbitAfterDrag,
+  orbitAfterWheel,
+  PITCH_LIMIT,
+  useOrbit,
+  wrapYaw,
+} from './useOrbit';
 
 const view = { yaw: 0, pitch: 0, distance: 5, target: { x: 0, y: 0, z: 0 } };
 
@@ -69,3 +79,85 @@ describe('orbitAfterWheel', () => {
     expect(orbitAfterWheel(view, -100_000, 0.5, 50).distance).toBe(0.5);
   });
 });
+
+/** The fields `useOrbit` reads off a React pointerdown, plus the element the
+ *  session hangs its document listeners off. */
+function press(
+  el: HTMLElement,
+  x: number,
+  y: number,
+  init: { pointerId?: number; button?: number; buttons?: number } = {},
+): ReactPointerEvent<HTMLElement> {
+  return {
+    pointerId: init.pointerId ?? 1,
+    button: init.button ?? 0,
+    buttons: init.buttons ?? 1,
+    clientX: x,
+    clientY: y,
+    currentTarget: el,
+  } as unknown as ReactPointerEvent<HTMLElement>;
+}
+
+function dispatchOn(target: EventTarget, type: string, init: PointerEventInit) {
+  act(() => {
+    target.dispatchEvent(new PointerEvent(type, { pointerId: 1, bubbles: true, ...init }));
+  });
+}
+
+function dragSetup() {
+  let current: OrbitView = view;
+  const onViewChange = (v: OrbitView) => {
+    current = v;
+  };
+  const { result, unmount } = renderHook(() => useOrbit({ view, onViewChange }));
+  const el = document.createElement('div');
+  document.body.appendChild(el);
+  return { result, unmount, el, getView: () => current };
+}
+
+describe('useOrbit dragging', () => {
+  it('turns from a move the element never sees', () => {
+    const { result, el, getView } = dragSetup();
+    act(() => result.current.onPointerDown(press(el, 100, 100)));
+    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 200, clientY: 150 });
+    expect(getView()).toEqual(orbitAfterDrag(view, 100, 50));
+  });
+
+  it('ends the drag on a release dispatched off the element', () => {
+    const { result, el, getView } = dragSetup();
+    act(() => result.current.onPointerDown(press(el, 100, 100)));
+    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 200, clientY: 150 });
+    dispatchOn(document, 'pointerup', { clientX: 200, clientY: 150 });
+    expect(result.current.isDragging()).toBe(false);
+    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 400, clientY: 400 });
+    expect(getView()).toEqual(orbitAfterDrag(view, 100, 50));
+  });
+
+  it('ends the drag when capture is lost mid-gesture', () => {
+    const { result, el, getView } = dragSetup();
+    act(() => result.current.onPointerDown(press(el, 100, 100)));
+    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 200, clientY: 150 });
+    dispatchOn(el, 'lostpointercapture', {});
+    expect(result.current.isDragging()).toBe(false);
+    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 400, clientY: 400 });
+    expect(getView()).toEqual(orbitAfterDrag(view, 100, 50));
+  });
+
+  it('reads a move with nothing held as the release that never arrived', () => {
+    const { result, el, getView } = dragSetup();
+    act(() => result.current.onPointerDown(press(el, 100, 100, { buttons: 1 })));
+    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 200, clientY: 150 });
+    expect(getView()).toEqual(orbitAfterDrag(view, 100, 50));
+    dispatchOn(document, 'pointermove', { buttons: 0, clientX: 400, clientY: 400 });
+    expect(getView()).toEqual(orbitAfterDrag(view, 100, 50));
+    expect(result.current.isDragging()).toBe(false);
+  });
+
+  it('drops its listeners when the hook unmounts mid-drag', () => {
+    const { result, el, unmount, getView } = dragSetup();
+    act(() => result.current.onPointerDown(press(el, 100, 100)));
+    unmount();
+    dispatchOn(document, 'pointermove', { buttons: 1, clientX: 400, clientY: 400 });
+    expect(getView()).toEqual(view);
+  });
+});

package/src/canvas/useOrbit.ts

@@ -1,4 +1,11 @@
-import { type PointerEvent, useCallback, useRef, type WheelEvent } from 'react';
+import { openPointerSession, type PointerSession } from '@weasel-js/core';
+import {
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  type WheelEvent,
+} from 'react';
 
 /** A point in the space the instrument works in. */
 export interface Vec3 {
@@ -70,15 +77,12 @@ export interface UseOrbitOptions {
 
 export interface OrbitHandlers {
   onWheel: (e: WheelEvent<HTMLElement>) => void;
-  onPointerDown: (e: PointerEvent<HTMLElement>) => void;
-  onPointerMove: (e: PointerEvent<HTMLElement>) => void;
-  onPointerUp: (e: PointerEvent<HTMLElement>) => void;
+  onPointerDown: (e: ReactPointerEvent<HTMLElement>) => void;
   onDoubleClick: () => void;
   isDragging: () => boolean;
 }
 
 interface DragState {
-  pointerId: number;
   startX: number;
   startY: number;
   startView: OrbitView;
@@ -95,8 +99,11 @@ export function useOrbit({
   maxDistance = 1000,
 }: UseOrbitOptions): OrbitHandlers {
   const dragRef = useRef<DragState | null>(null);
+  const sessionRef = useRef<PointerSession | null>(null);
   const viewRef = useRef(view);
   viewRef.current = view;
+  const onViewChangeRef = useRef(onViewChange);
+  onViewChangeRef.current = onViewChange;
   const homeRef = useRef(home ?? view);
   if (home) homeRef.current = home;
 
@@ -108,42 +115,42 @@ export function useOrbit({
     [onViewChange, minDistance, maxDistance],
   );
 
-  const onPointerDown = useCallback((e: PointerEvent<HTMLElement>) => {
-    if (e.button !== 0) return;
-    e.currentTarget.setPointerCapture(e.pointerId);
-    dragRef.current = {
-      pointerId: e.pointerId,
-      startX: e.clientX,
-      startY: e.clientY,
-      startView: viewRef.current,
-      moved: false,
-    };
+  const clearDrag = useCallback(() => {
+    dragRef.current = null;
+    sessionRef.current = null;
   }, []);
 
-  const onPointerMove = useCallback(
-    (e: PointerEvent<HTMLElement>) => {
-      const drag = dragRef.current;
-      if (!drag || drag.pointerId !== e.pointerId) return;
-      const dx = e.clientX - drag.startX;
-      const dy = e.clientY - drag.startY;
-      if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
-      drag.moved = true;
-      onViewChange(orbitAfterDrag(drag.startView, dx, dy));
+  const onPointerDown = useCallback(
+    (e: ReactPointerEvent<HTMLElement>) => {
+      if (e.button !== 0) return;
+      const drag: DragState = {
+        startX: e.clientX,
+        startY: e.clientY,
+        startView: viewRef.current,
+        moved: false,
+      };
+      dragRef.current = drag;
+      sessionRef.current = openPointerSession(e.currentTarget, e, {
+        onMove: (ev) => {
+          const dx = ev.clientX - drag.startX;
+          const dy = ev.clientY - drag.startY;
+          if (!drag.moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+          drag.moved = true;
+          onViewChangeRef.current(orbitAfterDrag(drag.startView, dx, dy));
+        },
+        onEnd: clearDrag,
+        // A cancelled turn keeps where it got to: every move was committed as
+        // it arrived, so there is nothing left to undo.
+        onCancel: clearDrag,
+      });
     },
-    [onViewChange],
+    [clearDrag],
   );
 
-  const onPointerUp = useCallback((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);
-    }
-    dragRef.current = null;
-  }, []);
+  useEffect(() => () => sessionRef.current?.cancel(), []);
 
   const onDoubleClick = useCallback(() => onViewChange(homeRef.current), [onViewChange]);
   const isDragging = useCallback(() => dragRef.current?.moved === true, []);
 
-  return { onWheel, onPointerDown, onPointerMove, onPointerUp, onDoubleClick, isDragging };
+  return { onWheel, onPointerDown, onDoubleClick, isDragging };
 }