@jbrowse/app-core 5.0.0-beta.11 → 5.0.0-beta.14

package/esm/WorkspaceLayout/LayoutRenderer.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useRef } from 'react';
+import { Fragment } 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';
+import { usePointerGesture } from './usePointerGesture.js';
+import { workspaceTheme } from './workspaceTheme.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.
+ * A node's share of its parent's space, as `flex-grow`, so window resizes need
+ * no code. `min*: 0` stops a wide view pushing its cell past its share.
  */
 function paneStyle(size) {
     return {
@@ -27,12 +27,7 @@ export const LayoutRenderer = observer(function LayoutRenderer(props) {
     }
     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.
- */
+/** The pixels the two panes either side of a handle occupy. */
 function measurePairPx(handle, index, horizontal) {
     const panes = [...(handle.parentElement?.children ?? [])].filter(el => !Object.hasOwn(el.dataset, 'splitter'));
     const before = panes[index - 1]?.getBoundingClientRect();
@@ -42,25 +37,21 @@ function measurePairPx(handle, index, horizontal) {
     }
     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.
+// a transparent grab strip with a 1px line drawn down its middle
 const useSplitterStyles = makeStyles()({
     splitter: {
-        flex: `0 0 ${dv.sashSize}px`,
+        flex: `0 0 ${workspaceTheme.splitterSize}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}`,
+            outline: `2px solid ${workspaceTheme.accent}`,
             outlineOffset: -1,
         },
         '&::before': {
             content: '""',
             position: 'absolute',
-            background: dv.separatorBorder,
+            background: workspaceTheme.splitterLine,
         },
     },
     horizontal: {
@@ -71,86 +62,35 @@ const useSplitterStyles = makeStyles()({
     },
 });
 /**
- * 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.
+ * Drags the boundary between children `index - 1` and `index`; `splitter.ts`
+ * decides where it may land.
  */
 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 gesture = usePointerGesture({
+        start(event) {
+            const pairPx = measurePairPx(event.currentTarget, index, horizontal);
+            return pairPx > 0
+                ? {
+                    axis: horizontal ? 'clientX' : 'clientY',
+                    start: horizontal ? event.clientX : event.clientY,
+                    pairPx,
+                    startSizes: branch.children.map(c => c.size),
+                }
+                : undefined;
+        },
+        move(drag, event) {
+            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));
+        },
+    });
+    const onKeyDown = (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) {
@@ -169,17 +109,10 @@ const Splitter = observer(function Splitter({ branch, index, layout, }) {
             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
+    };
+    // the pane before the handle, as a percentage of the pair it divides
     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' } }));
+    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: gesture.onPointerDown, onPointerMove: gesture.onPointerMove, onPointerUp: gesture.onPointerUp, onPointerCancel: gesture.onPointerCancel, onLostPointerCapture: gesture.onLostPointerCapture, className: cx(classes.splitter, horizontal ? classes.horizontal : classes.vertical), style: { cursor: horizontal ? 'ew-resize' : 'ns-resize' } }));
 });

package/esm/WorkspaceLayout/PanelView.js

@@ -4,28 +4,13 @@ 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.
- */
+import { workspaceTheme } from './workspaceTheme.js';
 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.
+    // without `flex: 1` and `minWidth: 0` the cell takes its content's width, and
+    // a view sizes itself to its container, so both settle too narrow
     panel: {
         position: 'relative',
         display: 'flex',
@@ -33,9 +18,7 @@ const useStyles = makeStyles()(theme => ({
         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.
+        // below the strip the cell follows the app theme, not `workspaceTheme`
         background: theme.palette.background.default,
     },
     content: {
@@ -48,51 +31,42 @@ const useStyles = makeStyles()(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
+        // local to the position:relative panel, so it cannot cover menus
         zIndex: 1,
-        background: dv.dragOverBackground,
-        outline: `1px solid ${dv.edgeDockIndicatorColor}`,
+        background: workspaceTheme.dropWash,
+        outline: `1px solid ${workspaceTheme.accent}`,
     },
-    // 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,
+        height: workspaceTheme.stripHeight,
+        background: workspaceTheme.accent,
     },
 }));
 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.
+            // capture phase, so a control inside the view that consumes the click
+            // still activates the cell
             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 })] }));
+        }, children: [layout.panels.length > 1 || panel.tabs.length > 1 ? (_jsx(TabStrip, { panel: panel, layout: layout, chrome: chrome, active: active, cellActive: layout.activePanelId === panel.id })) : null, active ? (_jsx(TabPanel, { panelId: panel.id, tab: active, chrome: chrome, className: classes.content }, active.id)) : (_jsx("div", { role: "tabpanel", className: classes.content })), _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.
- */
+// keyed by tab, so a switch gets a fresh ViewStack and scroll port
+const TabPanel = observer(function TabPanel({ panelId, tab, chrome, className, }) {
+    const ref = useScrollPortHeightVar();
+    return (_jsx("div", { role: "tabpanel", id: tabPanelDomId(panelId), "aria-labelledby": tabDomId(tab.id), className: className, ref: ref, children: chrome.renderTabContent(tab) }));
+});
+/** Where a drop would land: a caret at a strip gap, or a wash over a zone. */
 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.
+            // a scrolled strip's first gap is left of the panel, which does not clip
             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

@@ -8,7 +8,7 @@ interface TabStripProps {
     /** 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;
+    cellActive: boolean;
 }
-export declare const TabStrip: ({ panel, layout, chrome, active, groupActive, }: TabStripProps) => import("react").JSX.Element;
+export declare const TabStrip: ({ panel, layout, chrome, active, cellActive, }: TabStripProps) => import("react").JSX.Element;
 export {};

package/esm/WorkspaceLayout/TabStrip.js

@@ -2,37 +2,23 @@ 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.
- */
+import { tabColors, workspaceTheme } from './workspaceTheme.js';
 const useStyles = makeStyles()({
     strip: {
         display: 'flex',
         flexShrink: 0,
         boxSizing: 'border-box',
-        height: dv.tabsHeight,
-        fontSize: dv.tabsFontSize,
-        background: dv.tabsBackground,
+        height: workspaceTheme.stripHeight,
+        fontSize: workspaceTheme.stripFontSize,
+        background: workspaceTheme.stripBackground,
     },
     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.
+        // never grow, so the `+` after the list sits beside the last tab
         flex: '0 1 auto',
         minWidth: 0,
-        // the strip is chrome, so a scrollbar across it would be noise
         scrollbarWidth: 'none',
         '&::-webkit-scrollbar': { display: 'none' },
     },
@@ -46,31 +32,16 @@ const useStyles = makeStyles()({
         cursor: 'pointer',
         userSelect: 'none',
         touchAction: 'none',
-        borderRight: `1px solid ${dv.tabDividerColor}`,
+        borderRight: `1px solid ${workspaceTheme.tabDivider}`,
         '&: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}`,
+            outline: `2px solid ${workspaceTheme.accent}`,
             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.
- */
+// Firefox reports a mouse wheel in lines (`deltaMode: 1`, `deltaY: ±3`)
 const WHEEL_LINE_PX = 16;
 function wheelDeltaPixels(event, pageSize) {
     switch (event.deltaMode) {
@@ -82,40 +53,23 @@ function wheelDeltaPixels(event, pageSize) {
             return event.deltaY;
     }
 }
-export const TabStrip = observer(function TabStrip({ panel, layout, chrome, active, groupActive, }) {
+export const TabStrip = observer(function TabStrip({ panel, layout, chrome, active, cellActive, }) {
     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.
+    // roving tabindex; focus differs from selection because activation is manual
     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
+    // not an attribute selector: a nanoid needs CSS.escape, which jsdom lacks
     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.
-     */
+    // for a tab made current without being touched, e.g. by `+` on a full strip;
+    // `block: 'nearest'` keeps it from scrolling an ancestor vertically
     useEffect(() => {
         tabElement(active?.id)?.scrollIntoView({
             block: 'nearest',
@@ -123,14 +77,9 @@ export const TabStrip = observer(function TabStrip({ panel, layout, chrome, acti
         });
     }, [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.
+     * Manual activation (arrows focus, Enter/Space selects), the WAI-ARIA
+     * exception for expensive tabs: showing one mounts views that each cost
+     * WebGL2 contexts.
      */
     function onKeyDown(event, tabId) {
         const ids = panel.tabs.map(t => t.id);
@@ -157,70 +106,53 @@ export const TabStrip = observer(function TabStrip({ panel, layout, chrome, acti
         }
     }
     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 `+`.
+        // empty strip space only, so a tab's rename double-click does not bubble
+        // into a maximize
         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.
+        }, children: [_jsx("div", { role: "tablist", ref: stripRef, className: classes.tabs, onBlur: event => {
+                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                        setFocusedTabId(undefined);
+                    }
+                }, 
+                // translate a vertical wheel to horizontal scroll; a trackpad's larger
+                // `deltaX` is already applied by the browser
                 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)] }));
+                }, children: panel.tabs.map(tab => (_jsx(Tab, { tab: tab, panel: panel, layout: layout, chrome: chrome, className: classes.tab, selected: tab.id === active?.id, cellActive: cellActive, 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 Tab = observer(function Tab({ tab, panel, layout, chrome, className, selected, cellActive, 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);
+            // keys from a control inside the tab belong to that control
+            if (event.target === event.currentTarget) {
+                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.
+            // Stops middle-button autoscroll; Pointer Events L3 still dispatches
+            // the `auxclick` that closes the tab
             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.
+            // only the left button activates: showing a tab mounts views
             if (event.button !== 0) {
                 return;
             }
             layout.setActiveTab(panel.id, tab.id);
-            dragHandlers.onTabPointerDown(tab.id, event);
+            dragHandlers.onPointerDown(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) }));
+        }, onPointerMove: dragHandlers.onPointerMove, onPointerUp: dragHandlers.onPointerUp, onPointerCancel: dragHandlers.onPointerCancel, onLostPointerCapture: dragHandlers.onLostPointerCapture, className: className, style: tabColors(cellActive, selected), children: renderTabLabel(tab) }));
 });

package/esm/WorkspaceLayout/WorkspaceContainer.d.ts

@@ -1,15 +1,6 @@
 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;