@jbrowse/app-core 4.3.0 → 5.0.0-beta.1

package/esm/WorkspaceLayout/LayoutRenderer.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useRef } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import { PanelView } from './PanelView.js';
+import { dv } from './dockviewTheme.js';
+import { pairSpan, withBoundaryAt } from './splitter.js';
+import { isBranch } from './tree.js';
+/**
+ * A node's share of its parent's space — the whole grid engine. The `min*: 0`
+ * are what stop a flex item refusing to shrink below its content; without them
+ * a wide view pushes its own cell past its share.
+ */
+function paneStyle(size) {
+    return {
+        display: 'flex',
+        flexGrow: size,
+        flexBasis: 0,
+        minWidth: 0,
+        minHeight: 0,
+    };
+}
+export const LayoutRenderer = observer(function LayoutRenderer(props) {
+    const { node, layout, drag } = props;
+    if (!isBranch(node)) {
+        return (_jsx("div", { style: paneStyle(node.size), children: _jsx(PanelView, { panel: node, layout: layout, chrome: props.chrome, drop: drag?.panelId === node.id ? drag : undefined }) }));
+    }
+    return (_jsx("div", { style: { ...paneStyle(node.size), flexDirection: node.direction }, children: node.children.map((child, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx(Splitter, { branch: node, index: i, layout: layout }), _jsx(LayoutRenderer, { ...props, node: child })] }, child.id))) }));
+});
+/**
+ * The pixels the two panes either side of a handle occupy. Read from the DOM
+ * because sizes are shares of a container whose width only the browser knows.
+ * The panes are the handle's siblings minus the other handles, which is what
+ * `data-splitter` marks.
+ */
+function measurePairPx(handle, index, horizontal) {
+    const panes = [...(handle.parentElement?.children ?? [])].filter(el => !Object.hasOwn(el.dataset, 'splitter'));
+    const before = panes[index - 1]?.getBoundingClientRect();
+    const after = panes[index]?.getBoundingClientRect();
+    if (!before || !after) {
+        return 0;
+    }
+    return horizontal ? before.width + after.width : before.height + after.height;
+}
+// dockview's sash is a transparent grab strip with a 1px separator line drawn
+// down the middle of it — the line is what you see, the 4px is what you can
+// hit. Its dark theme deliberately gives the sash no hover colour at all.
+const useSplitterStyles = makeStyles()({
+    splitter: {
+        flex: `0 0 ${dv.sashSize}px`,
+        position: 'relative',
+        background: 'transparent',
+        touchAction: 'none',
+        // it is focusable, so it has to show focus — dockview's sash deliberately
+        // has no HOVER colour, which is a different thing and still holds
+        '&:focus-visible': {
+            outline: `2px solid ${dv.edgeDockIndicatorColor}`,
+            outlineOffset: -1,
+        },
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            background: dv.separatorBorder,
+        },
+    },
+    horizontal: {
+        '&::before': { top: 0, bottom: 0, left: '50%', width: 1 },
+    },
+    vertical: {
+        '&::before': { left: 0, right: 0, top: '50%', height: 1 },
+    },
+});
+/**
+ * Drags the boundary between children `index - 1` and `index`.
+ *
+ * The DOM half only: it measures, and hands position and pair span to
+ * `splitter.ts`, which decides where the boundary is allowed to land. Same
+ * split as the drag — geometry pure, wiring dumb.
+ */
+const Splitter = observer(function Splitter({ branch, index, layout, }) {
+    const { classes, cx } = useSplitterStyles();
+    const dragRef = useRef(undefined);
+    const horizontal = branch.direction === 'row';
+    /**
+     * The same three rules the tab drag owns (see `useLayoutDrag`), on the handle
+     * that was written before they were written down.
+     *
+     * A resize starts on the PRIMARY button of the primary pointer. A right-press
+     * armed the drag and then lost its `pointerup` to the native context menu,
+     * and capture routes every later move back here — so a button-less pointer
+     * went on resizing from the start position the right-press recorded.
+     */
+    const onPointerDown = useCallback((event) => {
+        if (event.button !== 0 || !event.isPrimary) {
+            return;
+        }
+        const pairPx = measurePairPx(event.currentTarget, index, horizontal);
+        if (pairPx <= 0) {
+            return;
+        }
+        dragRef.current = {
+            pointerId: event.pointerId,
+            axis: horizontal ? 'clientX' : 'clientY',
+            start: horizontal ? event.clientX : event.clientY,
+            pairPx,
+            startSizes: branch.children.map(c => c.size),
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }, [branch, index, horizontal]);
+    // One `pointerId` per gesture: a second finger landing on the handle steered
+    // the first one's resize from the first one's start position, and its release
+    // ended the gesture the first one was still holding.
+    const onPointerMove = useCallback((event) => {
+        const drag = dragRef.current;
+        if (drag?.pointerId !== event.pointerId) {
+            return;
+        }
+        // the pointer's travel as a fraction of the pair's pixels, applied to the
+        // pair's share — so the handle tracks the pointer whatever the units are
+        const delta = (event[drag.axis] - drag.start) / drag.pairPx;
+        const sizes = drag.startSizes;
+        layout.setSizes(branch.id, withBoundaryAt(sizes, index, sizes[index - 1] + delta * pairSpan(sizes, index), drag.pairPx));
+    }, [branch.id, index, layout]);
+    const endDrag = useCallback(() => {
+        dragRef.current = undefined;
+    }, []);
+    const onPointerUp = useCallback((event) => {
+        if (dragRef.current && dragRef.current.pointerId !== event.pointerId) {
+            return;
+        }
+        endDrag();
+        event.currentTarget.releasePointerCapture(event.pointerId);
+    }, [endDrag]);
+    // `pointercancel` ends the gesture — a touch long-press opens the platform's
+    // context menu and cancels the pointer with no `pointerup` behind it. A
+    // browser also fires `lostpointercapture` for that, so this is the rule
+    // stated where it belongs rather than inferred from a second event.
+    const onPointerCancel = useCallback((event) => {
+        if (dragRef.current?.pointerId === event.pointerId) {
+            endDrag();
+        }
+    }, [endDrag]);
+    // A `separator` that can be moved is focusable and takes the arrow keys; one
+    // that cannot is just decoration and should not claim the role. This one
+    // claimed it while being neither focusable nor operable, which announces an
+    // affordance to a screen reader that its user then cannot find.
+    const onKeyDown = useCallback((event) => {
+        const sizes = branch.children.map(c => c.size);
+        const pair = pairSpan(sizes, index);
+        const decrease = horizontal ? 'ArrowLeft' : 'ArrowUp';
+        const increase = horizontal ? 'ArrowRight' : 'ArrowDown';
+        // 2% of the PAIR per press, matching the drag: the boundary moves within
+        // the two panes either side of it and every other pane holds still
+        const step = pair * 0.02;
+        let moved;
+        if (event.key === decrease) {
+            moved = sizes[index - 1] - step;
+        }
+        else if (event.key === increase) {
+            moved = sizes[index - 1] + step;
+        }
+        else if (event.key === 'Home') {
+            moved = 0;
+        }
+        else if (event.key === 'End') {
+            moved = pair;
+        }
+        if (moved === undefined) {
+            return;
+        }
+        event.preventDefault();
+        // Home/End mean "as far as this goes", which is the minimum rather than
+        // zero — the same stop the drag hits
+        layout.setSizes(branch.id, withBoundaryAt(sizes, index, moved, measurePairPx(event.currentTarget, index, horizontal)));
+    }, [branch, index, horizontal, layout]);
+    // the pane BEFORE the handle, as a percentage of the pair it divides — which
+    // is what the handle actually moves
+    const sizes = branch.children.map(c => c.size);
+    const valueNow = Math.round((sizes[index - 1] / pairSpan(sizes, index)) * 100);
+    return (_jsx("div", { "data-splitter": true, role: "separator", tabIndex: 0, "aria-orientation": horizontal ? 'vertical' : 'horizontal', "aria-label": horizontal ? 'Resize panels' : 'Resize rows', "aria-valuenow": valueNow, "aria-valuemin": 0, "aria-valuemax": 100, onKeyDown: onKeyDown, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, 
+        // capture can end without a pointerup — the browser drops it if the
+        // element is removed, and then the next pointer that merely passes over
+        // the handle would go on resizing from the stale start sizes
+        onLostPointerCapture: endDrag, className: cx(classes.splitter, horizontal ? classes.horizontal : classes.vertical), style: { cursor: horizontal ? 'ew-resize' : 'ns-resize' } }));
+});

package/esm/WorkspaceLayout/PanelView.d.ts

@@ -0,0 +1,13 @@
+import type { DropTarget } from './dropZone.ts';
+import type { WorkspaceLayout } from './model.ts';
+import type { PanelChrome } from './panelChrome.ts';
+import type { PanelNode } from './tree.ts';
+interface PanelViewProps {
+    panel: PanelNode;
+    layout: WorkspaceLayout;
+    chrome: PanelChrome;
+    /** where an in-flight drag would land in THIS cell, if it is over this one */
+    drop?: DropTarget;
+}
+export declare const PanelView: ({ panel, layout, chrome, drop, }: PanelViewProps) => import("react").JSX.Element;
+export {};

package/esm/WorkspaceLayout/PanelView.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { persistentScrollbarStyle } from '@jbrowse/core/ui/persistentScrollbarStyle';
+import { useScrollPortHeightVar } from '@jbrowse/core/util/hooks';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import { TabStrip } from './TabStrip.js';
+import { dv } from './dockviewTheme.js';
+import { indicatorRect } from './dropZone.js';
+import { tabDomId, tabPanelDomId } from './panelChrome.js';
+import { activeTabIn } from './tree.js';
+/**
+ * One cell of the grid: a tab strip, and the content of whichever tab is
+ * showing.
+ *
+ * The strip and its state are `TabStrip`; this is the frame around them, and
+ * has no state of its own — it is a function of its node, which is the whole
+ * point of the layout being one MST tree.
+ *
+ * The line between chrome and content is the strip's lower edge: everything
+ * above it is dockview's dark theme in either JBrowse theme (see
+ * `dockviewTheme.ts`), everything below it follows the app's.
+ */
+const useStyles = makeStyles()(theme => ({
+    // `flex: 1` and `minWidth: 0` are load-bearing, not tidiness. This is a child
+    // of a `display: flex` row, so without them its width is its CONTENT's width
+    // — and a view measures its container to decide how wide to draw
+    // (useWidthSetter), so the two settle at the view's intrinsic width and the
+    // panel renders at half the window with dead space beside it.
+    panel: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        minWidth: 0,
+        minHeight: 0,
+        // the surface the views sit on, so it is the app's background and not
+        // dockview's — see `dockviewTheme.ts`. A cell is taller than its views
+        // whenever they don't fill it, so this is most of what a panel shows.
+        background: theme.palette.background.default,
+    },
+    content: {
+        flex: 1,
+        minWidth: 0,
+        minHeight: 0,
+        overflow: 'auto',
+        ...persistentScrollbarStyle(theme),
+    },
+    indicator: {
+        position: 'absolute',
+        pointerEvents: 'none',
+        // above this panel's own content and nothing else — the panel is
+        // position:relative, so an app-wide z-index would let it cover menus
+        zIndex: 1,
+        background: dv.dragOverBackground,
+        outline: `1px solid ${dv.edgeDockIndicatorColor}`,
+    },
+    // where a tab dragged onto the strip would land
+    caret: {
+        position: 'absolute',
+        pointerEvents: 'none',
+        zIndex: 1,
+        top: 0,
+        width: 2,
+        height: dv.tabsHeight,
+        background: dv.edgeDockIndicatorColor,
+    },
+}));
+export const PanelView = observer(function PanelView({ panel, layout, chrome, drop, }) {
+    const { classes } = useStyles();
+    const active = activeTabIn(panel);
+    const contentRef = useScrollPortHeightVar();
+    return (_jsxs("div", { "data-panel-id": panel.id, className: classes.panel, onPointerDownCapture: () => {
+            // clicking anywhere in a cell makes it the one a new view lands in.
+            // Capture, so it still registers when the click is consumed by a
+            // control inside the view.
+            if (layout.activePanelId !== panel.id) {
+                layout.setActivePanelId(panel.id);
+            }
+        }, children: [_jsx(TabStrip, { panel: panel, layout: layout, chrome: chrome, active: active, groupActive: layout.activePanelId === panel.id }), _jsx("div", { role: "tabpanel", id: tabPanelDomId(panel.id), "aria-labelledby": active ? tabDomId(active.id) : undefined, className: classes.content, ref: contentRef, children: active ? chrome.renderTabContent(active) : null }), _jsx(DropIndicator, { drop: drop, classes: classes })] }));
+});
+/**
+ * Where a drop would land, drawn over the cell.
+ *
+ * A strip drop gets a caret at the gap rather than a wash over half the cell:
+ * it is a position in the tab order, and shading half the panel would say
+ * "split this cell", which is the wrong thing.
+ */
+const DropIndicator = observer(function DropIndicator({ drop, classes, }) {
+    if (drop?.strip) {
+        return (_jsx("div", { "data-drop-caret": drop.strip.index, className: classes.caret, 
+            // A scrolled strip's left-most gap has a negative panel-relative x, and
+            // the panel has no `overflow: hidden` — the caret drew into the
+            // neighbour. Clamped here because `stripDropAt` is deliberately
+            // ignorant of which coordinate space it was handed, so it cannot know
+            // where zero is.
+            style: { left: Math.max(0, drop.strip.left) } }));
+    }
+    return drop ? (_jsx("div", { "data-drop-indicator": drop.zone, className: classes.indicator, style: indicatorRect(drop.zone) })) : null;
+});

package/esm/WorkspaceLayout/TabStrip.d.ts

@@ -0,0 +1,14 @@
+import type { WorkspaceLayout } from './model.ts';
+import type { PanelChrome } from './panelChrome.ts';
+import type { PanelNode, TabNode } from './tree.ts';
+interface TabStripProps {
+    panel: PanelNode;
+    layout: WorkspaceLayout;
+    chrome: PanelChrome;
+    /** the tab this panel is showing — the strip does not decide it */
+    active: TabNode | undefined;
+    /** whether this is the cell a newly launched view lands in */
+    groupActive: boolean;
+}
+export declare const TabStrip: ({ panel, layout, chrome, active, groupActive, }: TabStripProps) => import("react").JSX.Element;
+export {};

package/esm/WorkspaceLayout/TabStrip.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import { dv, tabColors } from './dockviewTheme.js';
+import { tabDomId, tabPanelDomId } from './panelChrome.js';
+/**
+ * A panel's tab strip: the tabs, and the panel's own buttons beside them.
+ *
+ * Everything with state in a cell lives here — the roving tabindex, the wheel
+ * translation, the scroll-into-view — which leaves `PanelView` a pure function
+ * of its node. The strip is dockview's dark theme, transcribed in
+ * `dockviewTheme.ts`; see there for why it is fixed rather than derived from
+ * the MUI theme.
+ */
+const useStyles = makeStyles()({
+    strip: {
+        display: 'flex',
+        flexShrink: 0,
+        boxSizing: 'border-box',
+        height: dv.tabsHeight,
+        fontSize: dv.tabsFontSize,
+        background: dv.tabsBackground,
+    },
+    tabs: {
+        display: 'flex',
+        overflowX: 'auto',
+        // shrink but never GROW: the panel actions are the next child of the strip,
+        // so a tab list that takes the leftover space pushes the `+` to the far
+        // right edge, arbitrarily far from the tab it acts on. `0 1 auto` sizes the
+        // list to its tabs and leaves the `+` beside the last one, and the shrink
+        // half is what makes it scroll here rather than push the `+` off the strip.
+        flex: '0 1 auto',
+        minWidth: 0,
+        // the strip is chrome, so a scrollbar across it would be noise
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': { display: 'none' },
+    },
+    tab: {
+        display: 'flex',
+        alignItems: 'center',
+        flexShrink: 0,
+        boxSizing: 'border-box',
+        maxWidth: 240,
+        padding: '0.25rem 0.5rem',
+        cursor: 'pointer',
+        userSelect: 'none',
+        touchAction: 'none',
+        borderRight: `1px solid ${dv.tabDividerColor}`,
+        '&:hover .jbrowse-tab-menu': { visibility: 'visible' },
+        // a keyboard user needs the ⋮ too, and hover is not a thing they can do
+        '&:focus-within .jbrowse-tab-menu': { visibility: 'visible' },
+        // the strip is dark in either theme, so the focus ring is the drop
+        // indicator's blue rather than the UA default black-on-dark
+        '&:focus-visible': {
+            outline: `2px solid ${dv.edgeDockIndicatorColor}`,
+            outlineOffset: -2,
+        },
+    },
+});
+/**
+ * A wheel event's delta in PIXELS.
+ *
+ * `deltaY` is only pixels when `deltaMode` says so. Firefox reports whole lines
+ * for a mouse wheel — `deltaMode: 1`, `deltaY: ±3` — where Chrome reports
+ * `deltaMode: 0`, `deltaY: ±100`. Using the raw number moves the strip three
+ * pixels per notch there: scrolling, technically, and unusable in practice.
+ *
+ * The line height is nominal rather than measured. `getComputedStyle` per wheel
+ * event to resolve a `line-height: normal` that is itself font-dependent buys
+ * accuracy nobody can perceive in a scroll gesture, and the strip is a fixed
+ * 35px of chrome in one size.
+ */
+const WHEEL_LINE_PX = 16;
+function wheelDeltaPixels(event, pageSize) {
+    switch (event.deltaMode) {
+        case 1:
+            return event.deltaY * WHEEL_LINE_PX;
+        case 2:
+            return event.deltaY * pageSize;
+        default:
+            return event.deltaY;
+    }
+}
+export const TabStrip = observer(function TabStrip({ panel, layout, chrome, active, groupActive, }) {
+    const { classes } = useStyles();
+    const { renderPanelActions } = chrome;
+    // Roving tabindex: the strip is ONE tab stop, and the arrow keys move within
+    // it. Focus is tracked separately from selection because activation here is
+    // manual (see `onKeyDown`), so the two genuinely differ while arrowing.
+    const stripRef = useRef(null);
+    const [focusedTabId, setFocusedTabId] = useState(undefined);
+    const roving = panel.tabs.find(t => t.id === focusedTabId)?.id ?? active?.id;
+    // by dataset rather than an interpolated attribute selector: a tab id is
+    // nanoid output and would need CSS.escape, which jsdom does not have
+    function tabElement(tabId) {
+        return [...(stripRef.current?.children ?? [])].find(child => child.dataset.tabId === tabId);
+    }
+    function focusTab(tabId) {
+        setFocusedTabId(tabId);
+        // focusing scrolls it into view on its own, which is the whole reason the
+        // keyboard could always reach an overflowing strip when the mouse could not
+        tabElement(tabId)?.focus();
+    }
+    /**
+     * Keep the shown tab in view.
+     *
+     * The strip scrolls, so a tab can become current while sitting outside it —
+     * `+` on a full strip appends a tab, makes it active, and leaves the user
+     * looking at the tabs it scrolled past. Clicking never needs this (you
+     * clicked something visible) and arrowing gets it from `focus()`, so this is
+     * for the tab that becomes current without being touched.
+     *
+     * `block: 'nearest'` so it cannot scroll an ancestor vertically. jsdom has no
+     * scrollIntoView at all, but `config/jest/scrollIntoView.js` already no-ops it
+     * for the whole suite — don't add an optional call for that, it reads as a
+     * browser that might not have the method.
+     */
+    useEffect(() => {
+        tabElement(active?.id)?.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }, [active?.id]);
+    /**
+     * MANUAL activation: arrows move focus, Enter/Space selects.
+     *
+     * The automatic form (arrowing selects as it goes) is the more common reading
+     * of the tabs pattern, and is wrong here for the reason WAI-ARIA names as its
+     * exception — showing a tab is expensive. Only the selected tab's views are
+     * mounted, and a JBrowse view costs a WebGL2 context per display against a
+     * ceiling of 16, so arrowing across five tabs would build and tear down five
+     * sets of them to pass through.
+     */
+    function onKeyDown(event, tabId) {
+        const ids = panel.tabs.map(t => t.id);
+        const i = ids.indexOf(tabId);
+        const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+        let next;
+        if (step !== 0) {
+            next = ids[(i + step + ids.length) % ids.length];
+        }
+        else if (event.key === 'Home') {
+            next = ids[0];
+        }
+        else if (event.key === 'End') {
+            next = ids.at(-1);
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            layout.setActiveTab(panel.id, tabId);
+            return;
+        }
+        if (next !== undefined) {
+            event.preventDefault();
+            focusTab(next);
+        }
+    }
+    return (_jsxs("div", { "data-tab-strip": true, className: classes.strip, 
+        // Double-clicking the strip's empty space maximizes the cell and
+        // restores it — the IDE convention, and free here because the strip's
+        // only other `onDoubleClick` is the one on a tab's own label, for rename.
+        //
+        // `target === currentTarget` is what keeps those two apart, and it is the
+        // test rather than a `stopPropagation` in `WorkspaceTab` because it holds
+        // for anything ever put on the strip: a rename double-click bubbles out
+        // of the label to here, and so would a double-click on the `+`.
+        onDoubleClick: event => {
+            if (event.target === event.currentTarget) {
+                layout.toggleMaximizedPanel(panel.id);
+            }
+        }, children: [_jsx("div", { role: "tablist", ref: stripRef, className: classes.tabs, 
+                // A mouse wheel only has a vertical axis, and this scrolls
+                // horizontally — so without translating it, a strip with more tabs
+                // than fit is reachable by trackpad swipe and by keyboard and NOT AT
+                // ALL by mouse. The scrollbar is hidden on purpose (the strip is
+                // chrome) which removes the other way of noticing there is more.
+                //
+                // `deltaX` is a trackpad's own horizontal axis and the browser has
+                // already applied it; taking the larger axis leaves that gesture alone
+                // rather than doubling it.
+                onWheel: event => {
+                    const el = stripRef.current;
+                    if (!el || Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+                        return;
+                    }
+                    el.scrollLeft += wheelDeltaPixels(event, el.clientWidth);
+                }, children: panel.tabs.map(tab => (_jsx(Tab, { tab: tab, panel: panel, layout: layout, chrome: chrome, className: classes.tab, selected: tab.id === active?.id, groupActive: groupActive, tabIndex: tab.id === roving ? 0 : -1, onKeyDown: onKeyDown, onFocus: setFocusedTabId }, tab.id))) }), renderPanelActions?.(panel)] }));
+});
+const Tab = observer(function Tab({ tab, panel, layout, chrome, className, selected, groupActive, tabIndex, onKeyDown, onFocus, }) {
+    const { renderTabLabel, dragHandlers, onTabClose } = chrome;
+    return (_jsx("div", { role: "tab", id: tabDomId(tab.id), "data-tab-id": tab.id, "aria-selected": selected, "aria-controls": selected ? tabPanelDomId(panel.id) : undefined, tabIndex: tabIndex, onKeyDown: event => {
+            onKeyDown(event, tab.id);
+        }, onFocus: () => {
+            onFocus(tab.id);
+        }, onPointerDown: event => {
+            // The middle button closes rather than drags, and its default action is
+            // the browser's autoscroll — which would otherwise start the moment a
+            // tab is middle-pressed.
+            //
+            // Cancelling pointerdown suppresses the compatibility mouse events
+            // (which is what stops the autoscroll) and NOT `click` / `auxclick`:
+            // Pointer Events L3 dispatches those two independently of that mapping.
+            // So the close below still fires, which is the thing this looks like it
+            // would break.
+            if (event.button === 1) {
+                event.preventDefault();
+                return;
+            }
+            // Showing a tab is expensive — it mounts a stack of views, each display
+            // costing a WebGL2 context — so it is the LEFT button that asks for it,
+            // the same gate dockview puts on `_activateOnPointerDown`. A right-press
+            // is on its way to a context menu and is not a request to look at
+            // anything.
+            if (event.button !== 0) {
+                return;
+            }
+            layout.setActiveTab(panel.id, tab.id);
+            dragHandlers.onTabPointerDown(tab.id, event);
+        }, onAuxClick: event => {
+            if (event.button === 1) {
+                event.preventDefault();
+                onTabClose?.(tab.id);
+            }
+        }, onPointerMove: dragHandlers.onTabPointerMove, onPointerUp: dragHandlers.onTabPointerUp, onPointerCancel: dragHandlers.onTabPointerCancel, className: className, style: tabColors(groupActive, selected), children: renderTabLabel(tab) }));
+});

package/esm/WorkspaceLayout/WorkspaceContainer.d.ts

@@ -0,0 +1,16 @@
+import type { WorkspaceSessionType } from '../ui/App/types.ts';
+import type { WorkspaceLayout } from './model.ts';
+type WorkspaceSession = WorkspaceSessionType & WorkspaceLayout;
+/**
+ * The workspace. Compare `TiledViewsContainer` + `useDockviewController`, which
+ * this replaces: there is no api to hold, no `onReady`, no event to subscribe
+ * to, and no reconciliation — the layout is session state and this renders it.
+ *
+ * The one reaction left is homing: `session.views` is owned by the session, so
+ * a view launched from a menu arrives belonging to no tab and has to land
+ * somewhere. That is one-directional and idempotent, and nothing reads back.
+ */
+export declare const WorkspaceContainer: ({ session, }: {
+    session: WorkspaceSession;
+}) => import("react").JSX.Element;
+export {};

package/esm/WorkspaceLayout/WorkspaceContainer.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy, useCallback, useEffect, useMemo } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+import ViewStack from '../ui/App/ViewStack.js';
+import { LayoutRenderer } from './LayoutRenderer.js';
+import { WorkspacePanelActions } from './WorkspacePanelActions.js';
+import { WorkspaceTab } from './WorkspaceTab.js';
+import { useLayoutDrag } from './useLayoutDrag.js';
+const ViewLauncher = lazy(() => import('../ui/App/ViewLauncher.js'));
+const useStyles = makeStyles()(theme => ({
+    container: {
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        gridRow: 'components',
+        background: theme.palette.background.default,
+    },
+    stack: {
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 0,
+    },
+    empty: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+    },
+}));
+/**
+ * The workspace. Compare `TiledViewsContainer` + `useDockviewController`, which
+ * this replaces: there is no api to hold, no `onReady`, no event to subscribe
+ * to, and no reconciliation — the layout is session state and this renders it.
+ *
+ * The one reaction left is homing: `session.views` is owned by the session, so
+ * a view launched from a menu arrives belonging to no tab and has to land
+ * somewhere. That is one-directional and idempotent, and nothing reads back.
+ */
+export const WorkspaceContainer = observer(function WorkspaceContainer({ session, }) {
+    const { classes } = useStyles();
+    const { drag, handlers } = useLayoutDrag(session);
+    useEffect(() => autorun(() => {
+        // reads session.views itself, so it re-runs when the view set changes;
+        // homeUnassignedViews is an action and would not be tracked from inside
+        session.homeUnassignedViews(session.views.map(v => v.id));
+    }), [session]);
+    // The layout does not own views, so closing anything that holds them is
+    // explicitly the pair. Stated ONCE, here, because every spelling of it is a
+    // chance to drop the node and leave its views in the session forever — and
+    // three gestures want it now: the tab's ⋮ menu, middle-clicking the tab, and
+    // the cell's ×.
+    const closeViews = useCallback((viewIds) => {
+        for (const view of viewsOf(session, viewIds)) {
+            session.removeView(view);
+        }
+    }, [session]);
+    const closeTab = useCallback((tabId) => {
+        const tab = session.findTab(tabId)?.tab;
+        if (!tab) {
+            return;
+        }
+        closeViews(tab.viewIds);
+        session.closeTab(tabId);
+    }, [session, closeViews]);
+    const closePanel = useCallback((panelId) => {
+        const panel = session.panels.find(p => p.id === panelId);
+        if (!panel) {
+            return;
+        }
+        closeViews(panel.tabs.flatMap(t => t.viewIds));
+        session.closePanel(panelId);
+    }, [session, closeViews]);
+    /**
+     * Memoised because this reaches every panel, so a fresh one per render
+     * defeats `observer`'s memo for all of them and each re-render rebuilds a
+     * `ViewStack`. `drag` is deliberately NOT in here — it goes down its own prop
+     * so it reaches only the cell it describes.
+     *
+     * Nothing does this for us: `observer(function(){})` is not compiled by the
+     * React Compiler.
+     */
+    const chrome = useMemo(() => ({
+        dragHandlers: handlers,
+        onTabClose: closeTab,
+        renderPanelActions: panel => (_jsx(WorkspacePanelActions, { panel: panel, session: session, onClose: () => {
+                closePanel(panel.id);
+            } })),
+        renderTabLabel: tab => (_jsx(WorkspaceTab, { tab: tab, views: viewsOf(session, tab.viewIds), session: session, layout: session, onClose: () => {
+                closeTab(tab.id);
+            } })),
+        renderTabContent: tab => {
+            const views = viewsOf(session, tab.viewIds);
+            return views.length > 0 ? (_jsx(ViewStack, { views: views, session: session, className: classes.stack })) : (_jsx("div", { className: classes.empty, children: _jsx(Suspense, { fallback: null, children: _jsx(ViewLauncher, { session: session }) }) }));
+        },
+    }), [session, handlers, closeTab, closePanel, classes.stack, classes.empty]);
+    return (_jsx("div", { className: classes.container, "data-testid": "workspace", children: _jsx(LayoutRenderer, { node: session.visibleTree, layout: session, drag: drag, chrome: chrome }) }));
+});
+// `session.views` is the one ordering of views, in both layout modes, so a
+// tab's membership list is filtered through it rather than read as an order.
+function viewsOf(session, viewIds) {
+    const members = new Set(viewIds);
+    return session.views.filter(v => members.has(v.id));
+}