@jbrowse/app-core 5.0.0-beta.10 → 5.0.0-beta.13

package/esm/WorkspaceLayout/tree.js

@@ -1,18 +1,7 @@
 /**
- * The layout tree, as pure functions over plain snapshots.
- *
- * This is the half of an MST-native workspace that carries the risk, so it is
- * deliberately not MST: no nodes, no parents, no lifecycle, nothing to be alive
- * or dead. Every operation is `tree in -> tree out`, which means the invariants
- * below can be tested exhaustively instead of observed to hold.
- *
- * The trade being made is worth naming, because it is not "complexity for no
- * complexity". Reconciling with dockview is replaced by **normalisation**: a
- * tree that has just had a panel removed, or a branch split, is usually not in
- * canonical form, and every operation has to put it back. That is real work and
- * it is where this design's bugs would live. What it is not is timing: there is
- * no event, no re-entrancy, no window during which the tree is half-updated,
- * and no second owner to disagree with.
+ * The layout tree as pure functions over plain snapshots, deliberately not MST
+ * so its invariants can be tested exhaustively. Every operation returns a tree
+ * in canonical form (`normalize`).
  */
 export function isBranch(node) {
     return 'children' in node;
@@ -58,14 +47,8 @@ export function panelContainingView(node, viewId) {
  *    it, its children's sizes scaled to preserve their share of the whole
  * 4. sizes are renormalised so a node's siblings always sum to 1
  *
- * Rule 3 is the one dockview cannot express: it forces orientation to alternate
- * by depth, so `row` inside `row` is not representable and a nested split gets
- * silently reparented. Here it is representable AND canonicalised, which is
- * what makes `size` work at any depth rather than only on the top-level split.
- *
- * Empty panels are NOT dropped, and neither are empty tabs. A tab with no views
- * is exactly what "new empty tab" creates — it shows the view launcher — so
- * pruning empties wholesale would delete the thing the user just asked for.
+ * Empty panels and empty tabs stay: "new empty tab" creates one on purpose, to
+ * show the view launcher.
  */
 export function normalize(node) {
     if (!isBranch(node)) {
@@ -83,30 +66,13 @@ export function normalize(node) {
     return { ...node, children: scaleSizes(children) };
 }
 /**
- * Siblings whose sizes are already right are left ALONE, rather than divided by
- * a sum of 1 and multiplied by 1.
- *
- * That round trip is not the identity in floating point, and normalisation runs
- * on every action: seven equal panes renormalise to `0.14285714285714285`,
- * which sums to `0.9999999999999998`, which renormalises to
- * `0.14285714285714288`, which sums to `1.0000000000000002`, which renormalises
- * back. So `normalize` had no fixed point — every action rewrote every size,
- * a settled layout emitted a snapshot for each one, and the undo history filled
- * with entries in which nothing observable changed. Exactly the failure
- * dockview's echoing layout event caused, arrived at from the other side.
- *
- * The tolerance is what makes it terminate; the drift it admits does not
- * accumulate, because the sizes stop moving as soon as they are inside it.
+ * Siblings already summing to the target within this tolerance are left alone.
+ * Rescaling is not the identity in floating point (seven equal panes oscillate
+ * between sums of 0.9999999999999998 and 1.0000000000000002), so without it
+ * `normalize` has no fixed point and every action fills undo with a no-op.
  */
 const SIZE_EPSILON = 1e-9;
-/**
- * Rescale a set of siblings so their sizes sum to `total`.
- *
- * Rule 4 renormalises to 1; rule 3 rescales a flattened branch's children to
- * the share that branch held, so a child at half of a branch that was a third
- * of its parent ends up at a sixth. Siblings summing to nothing take equal
- * shares — the alternative is dividing by zero.
- */
+/** Rescale siblings to sum to `total`; siblings summing to zero share equally. */
 function scaleSizes(children, total = 1) {
     const sum = children.reduce((acc, c) => acc + c.size, 0);
     if (sum <= 0) {
@@ -133,16 +99,11 @@ function mapNode(node, targetId, replacer) {
     };
 }
 /**
- * Split `panelId`, putting `newPanel` beside it in `direction`.
- *
- * Always builds a branch around the panel and lets `normalize` flatten it into
- * the parent when the directions agree. Trying to decide up front whether to
- * nest or to insert as a sibling is the same decision rule twice, and the two
- * copies drift.
+ * Split `panelId`, putting `newPanel` beside it in `direction`. Always wraps
+ * the panel in a branch and lets `normalize` flatten it when directions agree.
  */
 export function splitPanel(root, panelId, direction, newPanel, before = false) {
-    // derived rather than minted: this function is pure, and the new panel's id
-    // is already unique in the tree, so a branch named after it is too
+    // derived rather than minted: the new panel's id is unique, so this is too
     const branchId = `branch-${newPanel.id}`;
     const split = mapNode(root, panelId, found => {
         const pair = before ? [newPanel, found] : [found, newPanel];
@@ -158,11 +119,8 @@ export function splitPanel(root, panelId, direction, newPanel, before = false) {
 /** Drop a panel. Its space goes back to its siblings via renormalisation. */
 export function removePanel(root, panelId) {
     const removed = mapNode(root, panelId, () => undefined);
-    // Removing the only panel leaves nothing to render, which is not a state the
-    // workspace has: the caller gets an empty panel to put the next tab in.
-    // `activeTabId` has to go with the tabs — it named one of them, and a panel
-    // pointing at a tab it no longer has is the dangling state every other
-    // operation here is careful not to leave (see integrity.test.ts).
+    // The only panel empties instead, and `activeTabId` goes with its tabs so it
+    // cannot dangle
     return removed
         ? normalize(removed)
         : { ...root, tabs: [], activeTabId: undefined };
@@ -191,10 +149,6 @@ function mapTab(root, tabId, replacer) {
         : root;
 }
 // --- tabs ------------------------------------------------------------------
-//
-// A tab is the unit the user drags, closes and renames; a view is what lives
-// inside one. Keeping them separate is what dockview models as group/panel, and
-// it is the level the first version of this tree left out entirely.
 export function addTab(root, panelId, tab) {
     return mapPanel(root, panelId, panel => ({
         ...panel,
@@ -218,43 +172,22 @@ export function removeTab(root, tabId) {
             ...panel,
             tabs: remaining,
             activeTabId: panel.activeTabId === tabId
-                ? // Fall to the neighbour on the left — which for the leftmost tab is
-                    // the one that slid into its place. A deliberate divergence from
-                    // dockview, which opened `mostRecentlyUsed[0]`: that needs a
-                    // per-panel MRU list in the tree, which is state to persist, keep
-                    // pruned and hold as an invariant, for a difference nobody has
-                    // asked about.
+                ? // the left neighbour, or for the leftmost tab the one that slid in
                     remaining[Math.max(at - 1, 0)]?.id
                 : panel.activeTabId,
         };
     });
 }
 /**
- * Move a tab into another panel, at `index` if given.
- *
- * One function returning one tree, so there is no instant at which the tab is
- * in both panels or neither — the state the imperative bridge had to wrap an
- * explicit `runInAction` around to hide from its own reconcile autorun.
+ * Move a tab into another panel, at `index` if given, or append.
  *
- * **`index` counts the tabs as they are ordered NOW**, before the move. That is
- * the only reading a caller can supply, because it is the strip the user is
- * looking at — and it differs from the post-removal ordering exactly when the
- * tab is moving within its own panel and is currently to the LEFT of the gap it
- * was dropped in. Dragging A to the gap between B and C in `[A, B, C]` is index
- * 2 on screen; taking A out first makes that gap index 1, and inserting at 2
- * lands it after C instead. Adjusting here rather than in the caller keeps the
- * whole "remove then insert" mechanic inside the one function that does it.
- *
- * dockview reaches the same rule from the other end and it is worth knowing
- * they agree, since this is the fiddliest arithmetic in the file: its tabs
- * container computes `insertionIndex - (sourceIndex !== -1 && sourceIndex <
- * insertionIndex ? 1 : 0)`, which is the condition below with the same bounds.
+ * `index` counts the strip the user sees, before the move. Within one panel a
+ * tab left of the gap shifts it by one once removed: dragging A between B and C
+ * in `[A, B, C]` is index 2 on screen but 1 after A comes out.
  */
 export function moveTabToPanel(root, tabId, targetPanelId, index) {
     const home = findTab(root, tabId);
-    // The target has to be checked BEFORE the removal, not after. This function
-    // takes the tab out and puts it back, so a target that cannot be found and is
-    // not rejected here leaves the tab — and every view in it — nowhere at all.
+    // checked before the removal, or a missing target would delete the tab
     if (!home || !findPanel(root, targetPanelId)) {
         return root;
     }
@@ -263,10 +196,6 @@ export function moveTabToPanel(root, tabId, targetPanelId, index) {
         ? home.panel.tabs.findIndex(t => t.id === tabId)
         : -1;
     return mapPanel(removeTab(root, tabId), targetPanelId, panel => {
-        // No index means append, and it has to keep meaning that within one panel.
-        // The shift below is about reading a STATED index against the strip on
-        // screen; a caller that states nothing is not describing a gap, so shifting
-        // its position lands the tab one place short of the end.
         const at = index === undefined
             ? panel.tabs.length
             : Math.min(Math.max(from >= 0 && from < index ? index - 1 : index, 0), panel.tabs.length);
@@ -302,14 +231,8 @@ export function removeView(root, viewId) {
         : root;
 }
 /**
- * Make the tree's membership agree with the session's list of views.
- *
- * The only reconciliation left, and one-directional: `session.views` owns which
- * views exist, and nothing reads back.
- *
- * **`viewIds` is the session's WHOLE set.** A shorter list does not leave the
- * rest alone — it unhomes them, and the next homing pass sweeps them into one
- * tab.
+ * Make the tree's membership agree with `session.views`, which owns which views
+ * exist. `viewIds` is the WHOLE set: a shorter list unhomes the rest.
  */
 export function homeViews(root, viewIds, activePanelId, nextTabId) {
     const all = panels(root);
@@ -320,9 +243,7 @@ export function homeViews(root, viewIds, activePanelId, nextTabId) {
     let next = root;
     let homeTabId = activeTabIn(target)?.id;
     if (!homeTabId) {
-        // A panel with no tabs is legal, but it cannot be where a view lands — so
-        // this mints one rather than declining, which also means a blank cell built
-        // by `closePanel` on the last panel is repaired by the next homing pass.
+        // a tabless panel is legal but cannot hold a view, so give it a tab
         homeTabId = nextTabId();
         next = addTab(next, target.id, { id: homeTabId, viewIds: [] });
     }
@@ -331,8 +252,6 @@ export function homeViews(root, viewIds, activePanelId, nextTabId) {
             next = addViewToTab(next, homeTabId, viewId);
         }
     }
-    // read the memberships once, then drop: `removeView` returns a new tree each
-    // call, so a list taken from a tree it has already replaced goes stale
     const owned = new Set(viewIds);
     const departed = tabs(next)
         .flatMap(t => t.viewIds)
@@ -343,13 +262,8 @@ export function homeViews(root, viewIds, activePanelId, nextTabId) {
     return next;
 }
 /**
- * Drop a panel that has been left with no tabs, unless it is the only one.
- *
- * Deliberately NOT a normalisation rule. A panel with no tabs is reachable on
- * purpose, so pruning empties wholesale would delete a space the user asked
- * for. It is a step the *drag* gesture takes about its own source panel,
- * because dragging the last tab out of a split and leaving a blank half is the
- * one place an empty panel is clearly not what was meant.
+ * Drop a panel left with no tabs, unless it is the only one. Not a
+ * normalisation rule: only the gesture that emptied the panel calls it.
  */
 export function pruneEmptyPanel(root, panelId) {
     const found = findPanel(root, panelId);
@@ -358,16 +272,9 @@ export function pruneEmptyPanel(root, panelId) {
         : root;
 }
 /**
- * Drop a tab that a move has left with no views, unless it is the panel's last.
- *
- * The mirror of `pruneEmptyPanel`, and deliberately as narrow: an empty tab is
- * legitimate (it shows the view launcher), so this only ever runs on the tab a
- * move just emptied, never as a rule over the tree.
- *
- * Which is why closing a tab's last VIEW leaves the tab standing where a move
- * out of it does not: the move acted somewhere else and left this behind, and
- * the close acted here, where an empty tab is a usable place to open the next
- * thing. A cell's last tab prunes because a blank cell is not usable.
+ * Drop a tab a move has left with no views, unless it is the panel's last.
+ * Closing a tab's last view leaves the tab standing, as a place to open the
+ * next one; only a move out of it prunes.
  */
 export function pruneEmptyTabIn(root, panelId, tabId) {
     const found = findPanel(root, panelId);

package/esm/WorkspaceLayout/useLayoutDrag.d.ts

@@ -4,31 +4,13 @@ export interface DragState extends DropTarget {
     tabId: string;
     panelId: string;
 }
-export interface TabDragHandlers {
-    onTabPointerDown: (tabId: string, event: React.PointerEvent<HTMLElement>) => void;
-    onTabPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
-    onTabPointerUp: (event: React.PointerEvent<HTMLElement>) => void;
-    onTabPointerCancel: (event: React.PointerEvent<HTMLElement>) => void;
-}
 /**
- * Dragging a tab: pointer events, not HTML5 drag-and-drop.
- *
- * HTML5 DnD would hand us a drag image we don't want, a `dragover` we can't
- * read coordinates from reliably across browsers, and no pointer capture — so
- * releasing outside the window leaves the drag stuck on. Pointer events give
- * capture for free, which is what makes "let go anywhere" behave.
- *
- * The in-flight drag is React state, deliberately NOT in MST. It is transient
- * UI, and putting it in the session would put every intermediate hover into the
- * undo history — which is the mistake `dockviewLayout` made in the other
- * direction, persisting something that was really a view of live state.
+ * Dragging a tab. Pointer events rather than HTML5 dnd, for capture; the
+ * in-flight drag is React state rather than MST, so hovers stay out of undo.
  */
 export declare function useLayoutDrag(layout: WorkspaceLayout): {
     drag: DragState | undefined;
-    handlers: {
-        onTabPointerDown: (tabId: string, event: React.PointerEvent<HTMLElement>) => void;
-        onTabPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
-        onTabPointerUp: (event: React.PointerEvent<HTMLElement>) => void;
-        onTabPointerCancel: (event: React.PointerEvent<HTMLElement>) => void;
+    handlers: import("./usePointerGesture.ts").PointerGestureHandlers & {
+        cancel: () => void;
     };
 };

package/esm/WorkspaceLayout/useLayoutDrag.js

@@ -1,16 +1,8 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { dropZoneAt, splitForZone, stripDropAt } from './dropZone.js';
-/**
- * Two drags that would paint the same thing.
- *
- * The indicator is a function of the cell and the zone — or, on a strip, the gap
- * — and a pointer produces events far faster than it crosses between any of
- * them. Publishing a fresh object per move re-rendered the cell under the
- * pointer at pointer-event rate, and a cell's render rebuilds its `ViewStack`;
- * `renderTabContent` hands back a new `views` array each time, so nothing
- * downstream memoises it away. That is the same cost the memoised `handlers`
- * removed for every OTHER cell, still being paid by the one being dragged over.
- */
+import { usePointerGesture } from './usePointerGesture.js';
+// the indicator is a function of the cell and the zone or strip gap, so a move
+// that paints the same one publishes nothing
 function samePlace(a, b) {
     return (a?.tabId === b?.tabId &&
         a?.panelId === b?.panelId &&
@@ -18,46 +10,19 @@ function samePlace(a, b) {
         a?.strip?.index === b?.strip?.index &&
         a?.strip?.left === b?.strip?.left);
 }
-/**
- * A drop `dropTabInPanel` would decline, so there is nothing to draw for it —
- * the centre wash promises "be a tab of this cell" to a tab already in it, held
- * for the whole hover and then dropped on release.
- *
- * Declining here rather than at the release makes it one decision: nothing is
- * published, so `onTabPointerUp` finds an empty `dragRef` and needs no case.
- * `pendingRef` stays armed, so the drag resumes on crossing back out.
- */
+// a centre drop on the tab's own cell, which `dropTabInPanel` declines, so it
+// paints nothing either
 function declines(layout, drag) {
     return (!drag.strip &&
         drag.zone === 'center' &&
         layout.findTab(drag.tabId)?.panel.id === drag.panelId);
 }
 /**
- * Dragging a tab: pointer events, not HTML5 drag-and-drop.
- *
- * HTML5 DnD would hand us a drag image we don't want, a `dragover` we can't
- * read coordinates from reliably across browsers, and no pointer capture — so
- * releasing outside the window leaves the drag stuck on. Pointer events give
- * capture for free, which is what makes "let go anywhere" behave.
- *
- * The in-flight drag is React state, deliberately NOT in MST. It is transient
- * UI, and putting it in the session would put every intermediate hover into the
- * undo history — which is the mistake `dockviewLayout` made in the other
- * direction, persisting something that was really a view of live state.
+ * Dragging a tab. Pointer events rather than HTML5 dnd, for capture; the
+ * in-flight drag is React state rather than MST, so hovers stay out of undo.
  */
 export function useLayoutDrag(layout) {
     const [drag, setDrag] = useState(undefined);
-    // the pointer has gone down on a tab but may still turn out to be a click.
-    // `pointerId` is what makes every handler below about ONE pointer: a second
-    // finger elsewhere in the strip otherwise steers the first one's drag, and
-    // its release ends it. dockview tracks the same id for the same reason.
-    const pendingRef = useRef(undefined);
-    /**
-     * The drag, mirrored into a ref so the handlers can read it without depending
-     * on it — which keeps them identity-stable. They go into `PanelChrome`, so
-     * handlers that changed on every pointer move re-rendered every cell in the
-     * workspace, and a cell's render rebuilds its `ViewStack`.
-     */
     const dragRef = useRef(undefined);
     const showDrag = useCallback((next) => {
         if (samePlace(dragRef.current, next)) {
@@ -76,9 +41,7 @@ export function useLayoutDrag(layout) {
         }
         const panelId = panelEl.dataset.panelId;
         const panelRect = panelEl.getBoundingClientRect();
-        // The strip is a finer answer than `center`, and it has to be tested first:
-        // the strip sits inside the panel's top edge band, so `dropZoneAt` alone
-        // reads a drop between two tabs as "split this cell upwards".
+        // the strip first: it sits inside the panel's top edge band
         const stripEl = under.find(el => 'tabStrip' in el.dataset);
         if (stripEl) {
             // panel-relative, so the caret can be drawn inside the panel's own box
@@ -99,134 +62,43 @@ export function useLayoutDrag(layout) {
         }
         return { panelId, zone: dropZoneAt(panelRect, x, y) };
     }, []);
-    /**
-     * A drag starts on the PRIMARY button of the primary pointer, and on nothing
-     * else.
-     *
-     * dockview never had to say this: its tab drags over HTML5 dnd, where the
-     * browser owns the rule, and its pointer source is touch/pen only by default.
-     * Pointer events here are for capture (release outside the window ends the
-     * drag), which means owning the rule too — and without it a right-drag moved
-     * a tab, and a right-press left `pending` armed with no `pointerup` to clear
-     * it, because the native context menu eats that one. The next move of a
-     * button-less pointer then dragged the tab, and the click that dismissed the
-     * menu dropped it.
-     */
-    const onTabPointerDown = useCallback((tabId, event) => {
-        if (event.button !== 0 || !event.isPrimary) {
-            return;
-        }
-        // a fresh press is a fresh gesture: anything left over from a drag that
-        // ended without a drop would otherwise skip the slop below and start on
-        // the first pixel
-        showDrag(undefined);
-        pendingRef.current = {
-            tabId,
-            pointerId: event.pointerId,
-            x: event.clientX,
-            y: event.clientY,
-        };
-        event.currentTarget.setPointerCapture(event.pointerId);
-    }, [showDrag]);
-    const onTabPointerMove = useCallback((event) => {
-        const pending = pendingRef.current;
-        if (pending?.pointerId !== event.pointerId) {
-            return;
-        }
-        // a few pixels of slop, so a tab click is a click and not a zero-distance
-        // drag that lands the tab back where it started
-        const moved = Math.abs(event.clientX - pending.x) +
-            Math.abs(event.clientY - pending.y);
-        if (!dragRef.current && moved < 5) {
-            return;
-        }
-        const target = resolveTarget(event.clientX, event.clientY);
-        const next = target ? { tabId: pending.tabId, ...target } : undefined;
-        showDrag(next && !declines(layout, next) ? next : undefined);
-    }, [layout, resolveTarget, showDrag]);
-    /**
-     * The gesture ended without a drop: the browser took the pointer away.
-     *
-     * A long-press on a touch device does exactly this — the platform opens its
-     * own context menu and cancels the pointer — and there is no `pointerup` to
-     * follow, so the indicator stayed painted over the cell and the drag resumed
-     * from the next move. The same clearing as Escape, and for the same reason:
-     * clearing only what is on screen leaves `pending` to rebuild it.
-     *
-     * Capture is already gone by the time this fires, so there is nothing to
-     * release.
-     */
-    const onTabPointerCancel = useCallback((event) => {
-        const pending = pendingRef.current;
-        if (pending && pending.pointerId !== event.pointerId) {
-            return;
-        }
-        pendingRef.current = undefined;
-        showDrag(undefined);
-    }, [showDrag]);
-    const onTabPointerUp = useCallback((event) => {
-        const pending = pendingRef.current;
-        // No pending at all still releases: Escape cancels the drag and leaves
-        // capture held, so this is the only thing that gives it back.
-        if (pending && pending.pointerId !== event.pointerId) {
-            return;
-        }
-        pendingRef.current = undefined;
-        event.currentTarget.releasePointerCapture(event.pointerId);
-        const current = dragRef.current;
-        showDrag(undefined);
-        if (!pending || !current) {
-            return;
-        }
-        // a drop on the strip says where in the order; anywhere else appends
-        if (current.strip) {
-            layout.dropTabInPanel(current.tabId, current.panelId, current.strip.index);
-            return;
-        }
-        const split = splitForZone(current.zone);
-        if (split) {
-            layout.dropTabInNewSplit(current.tabId, current.panelId, split.direction, split.before);
-        }
-        else {
-            layout.dropTabInPanel(current.tabId, current.panelId);
-        }
-    }, [layout, showDrag]);
-    /**
-     * Escape abandons an in-flight drag.
-     *
-     * On `window`, because pointer capture routes POINTER events to the tab and
-     * does nothing for the keyboard — focus is wherever it was when the drag
-     * started, which is usually not the tab.
-     *
-     * Clearing `pendingRef` as well as the drag state is the part that matters:
-     * the drag is rebuilt from `pending` on every move, so cancelling the visible
-     * state alone would let the next pixel of movement resume it.
-     *
-     * `drag` is the dependency here on purpose, where the handlers avoid it: the
-     * listener should exist only while a drag does.
-     */
-    useEffect(() => {
-        if (!drag) {
-            return;
-        }
-        function onKeyDown(event) {
-            if (event.key === 'Escape') {
-                pendingRef.current = undefined;
-                showDrag(undefined);
+    const handlers = usePointerGesture({
+        escapeCancels: true,
+        start(event) {
+            const { tabId } = event.currentTarget.dataset;
+            return tabId === undefined
+                ? undefined
+                : { tabId, x: event.clientX, y: event.clientY };
+        },
+        move(pending, event) {
+            // slop, so a click is not a zero-distance drag
+            const moved = Math.abs(event.clientX - pending.x) +
+                Math.abs(event.clientY - pending.y);
+            if (!dragRef.current && moved < 5) {
+                return;
             }
-        }
-        window.addEventListener('keydown', onKeyDown);
-        return () => {
-            window.removeEventListener('keydown', onKeyDown);
-        };
-    }, [drag, showDrag]);
-    // one object, memoised: it goes into `PanelChrome`, which every panel holds,
-    // so a fresh one per render is a re-render of every cell in the workspace
-    const handlers = useMemo(() => ({
-        onTabPointerDown,
-        onTabPointerMove,
-        onTabPointerUp,
-        onTabPointerCancel,
-    }), [onTabPointerDown, onTabPointerMove, onTabPointerUp, onTabPointerCancel]);
+            const target = resolveTarget(event.clientX, event.clientY);
+            const next = target ? { tabId: pending.tabId, ...target } : undefined;
+            showDrag(next && !declines(layout, next) ? next : undefined);
+        },
+        end(_pending, completed) {
+            const current = dragRef.current;
+            showDrag(undefined);
+            if (!completed || !current) {
+                return;
+            }
+            if (current.strip) {
+                layout.dropTabInPanel(current.tabId, current.panelId, current.strip.index);
+                return;
+            }
+            const split = splitForZone(current.zone);
+            if (split) {
+                layout.dropTabInNewSplit(current.tabId, current.panelId, split.direction, split.before);
+            }
+            else {
+                layout.dropTabInPanel(current.tabId, current.panelId);
+            }
+        },
+    });
     return { drag, handlers };
 }

package/esm/WorkspaceLayout/usePointerGesture.d.ts

@@ -0,0 +1,24 @@
+export interface PointerGestureHandlers {
+    onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+    onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
+    onPointerUp: (event: React.PointerEvent<HTMLElement>) => void;
+    onPointerCancel: (event: React.PointerEvent<HTMLElement>) => void;
+    onLostPointerCapture: (event: React.PointerEvent<HTMLElement>) => void;
+}
+export interface PointerGesture<S> {
+    /** the gesture's state, or undefined to decline the press */
+    start: (event: React.PointerEvent<HTMLElement>) => S | undefined;
+    move: (state: S, event: React.PointerEvent<HTMLElement>) => void;
+    /** `completed` is true for a release, false for any way of abandoning it */
+    end?: (state: S, completed: boolean) => void;
+    escapeCancels?: boolean;
+}
+/**
+ * One pointer drag, owning the rules every gesture here needs: the primary
+ * button of the primary pointer starts it, one `pointerId` steers it, capture
+ * routes it, and a cancel, a lost capture or (opted in) Escape abandons it.
+ * The handlers are identity-stable, so they can sit in memoised chrome.
+ */
+export declare function usePointerGesture<S>(gesture: PointerGesture<S>): PointerGestureHandlers & {
+    cancel: () => void;
+};

package/esm/WorkspaceLayout/usePointerGesture.js

@@ -0,0 +1,83 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+/**
+ * One pointer drag, owning the rules every gesture here needs: the primary
+ * button of the primary pointer starts it, one `pointerId` steers it, capture
+ * routes it, and a cancel, a lost capture or (opted in) Escape abandons it.
+ * The handlers are identity-stable, so they can sit in memoised chrome.
+ */
+export function usePointerGesture(gesture) {
+    const gestureRef = useRef(gesture);
+    useLayoutEffect(() => {
+        gestureRef.current = gesture;
+    });
+    const activeRef = useRef(undefined);
+    const handlers = useMemo(() => {
+        function finish(completed) {
+            const active = activeRef.current;
+            if (!active) {
+                return;
+            }
+            activeRef.current = undefined;
+            window.removeEventListener('keydown', onKeyDown);
+            if (active.element.hasPointerCapture(active.pointerId)) {
+                active.element.releasePointerCapture(active.pointerId);
+            }
+            gestureRef.current.end?.(active.state, completed);
+        }
+        function onKeyDown(event) {
+            if (event.key === 'Escape') {
+                finish(false);
+            }
+        }
+        function owns(event) {
+            return activeRef.current?.pointerId === event.pointerId;
+        }
+        return {
+            onPointerDown(event) {
+                if (event.button !== 0 || !event.isPrimary) {
+                    return;
+                }
+                finish(false);
+                const state = gestureRef.current.start(event);
+                if (state === undefined) {
+                    return;
+                }
+                activeRef.current = {
+                    pointerId: event.pointerId,
+                    element: event.currentTarget,
+                    state,
+                };
+                event.currentTarget.setPointerCapture(event.pointerId);
+                if (gestureRef.current.escapeCancels) {
+                    window.addEventListener('keydown', onKeyDown);
+                }
+            },
+            onPointerMove(event) {
+                const active = activeRef.current;
+                if (active && owns(event)) {
+                    gestureRef.current.move(active.state, event);
+                }
+            },
+            onPointerUp(event) {
+                if (owns(event)) {
+                    finish(true);
+                }
+            },
+            onPointerCancel(event) {
+                if (owns(event)) {
+                    finish(false);
+                }
+            },
+            onLostPointerCapture(event) {
+                if (owns(event)) {
+                    finish(false);
+                }
+            },
+            cancel() {
+                finish(false);
+            },
+        };
+    }, []);
+    useEffect(() => handlers.cancel, [handlers]);
+    return handlers;
+}