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

package/esm/WorkspaceLayout/WorkspacePanelActions.d.ts

@@ -0,0 +1,24 @@
+import type { WorkspaceSessionType } from '../ui/App/types.ts';
+import type { WorkspaceLayout } from './model.ts';
+import type { PanelNode } from './tree.ts';
+/**
+ * The per-cell buttons: new tab, split, close.
+ *
+ * Every one of these is a single MST action on the layout, where the dockview
+ * versions were an api call plus a session write that had to be kept consistent
+ * with it — `handleSplit` was `containerApi.addGroup(...)` followed by
+ * `addEmptyTab(newGroup)`, and the gap between those two was where the
+ * "resource is already disposed" crash lived.
+ */
+export declare const WorkspacePanelActions: ({ panel, session, onClose, }: {
+    panel: PanelNode;
+    session: WorkspaceSessionType & WorkspaceLayout;
+    /**
+     * Closing a cell closes the views its tabs held, and the layout does not own
+     * views — so the pair is one function at the call site, the same way
+     * `WorkspaceTab` takes its `onClose`. Spelled here as well, this file would
+     * be the third place stating "and also remove the views", which is one more
+     * than the number that can be kept in step.
+     */
+    onClose: () => void;
+}) => import("react").JSX.Element;

package/esm/WorkspaceLayout/WorkspacePanelActions.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import AddIcon from '@mui/icons-material/Add';
+import CloseIcon from '@mui/icons-material/Close';
+import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import HorizontalSplitIcon from '@mui/icons-material/HorizontalSplit';
+import OpenInFullIcon from '@mui/icons-material/OpenInFull';
+import TabIcon from '@mui/icons-material/Tab';
+import TableRowsIcon from '@mui/icons-material/TableRows';
+import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+import { dv } from './dockviewTheme.js';
+const useStyles = makeStyles()({
+    actions: { display: 'flex', alignItems: 'center', flex: '0 0 auto' },
+    // dockview's `.dv-default-tab-action`: inherits the strip's colour, and takes
+    // a small rounded chip on hover rather than MUI's circular ripple surface
+    button: {
+        padding: 4,
+        borderRadius: 2,
+        color: dv.activeGroupHiddenTabColor,
+        '&:hover': { background: dv.iconHoverBackground, borderRadius: 2 },
+    },
+    icon: { fontSize: 16 },
+});
+/**
+ * The per-cell buttons: new tab, split, close.
+ *
+ * Every one of these is a single MST action on the layout, where the dockview
+ * versions were an api call plus a session write that had to be kept consistent
+ * with it — `handleSplit` was `containerApi.addGroup(...)` followed by
+ * `addEmptyTab(newGroup)`, and the gap between those two was where the
+ * "resource is already disposed" crash lived.
+ */
+export const WorkspacePanelActions = observer(function WorkspacePanelActions({ panel, session, onClose, }) {
+    const { classes } = useStyles();
+    const canClose = session.panels.length > 1;
+    const maximized = session.maximizedPanelId === panel.id;
+    const tile = (mode) => {
+        session.tileViews(mode, session.views.map(v => v.id));
+    };
+    return (_jsxs("div", { className: classes.actions, children: [_jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'New empty tab',
+                        icon: TabIcon,
+                        onClick: () => {
+                            session.addTab(panel.id);
+                        },
+                    },
+                    {
+                        label: 'New empty split horizontal',
+                        icon: VerticalSplitIcon,
+                        onClick: () => {
+                            session.splitPanel(panel.id, 'row');
+                        },
+                    },
+                    {
+                        label: 'New empty split vertical',
+                        icon: HorizontalSplitIcon,
+                        onClick: () => {
+                            session.splitPanel(panel.id, 'column');
+                        },
+                    },
+                    // The strip's double-click is the gesture; this is how anyone finds
+                    // it, and the only way to reach it from the keyboard. Gated on there
+                    // being another cell to hide, since maximizing the only one is a
+                    // no-op with a label promising otherwise.
+                    ...(session.panels.length > 1 || maximized
+                        ? [
+                            {
+                                label: maximized ? 'Restore panel' : 'Maximize panel',
+                                icon: maximized ? CloseFullscreenIcon : OpenInFullIcon,
+                                onClick: () => {
+                                    session.toggleMaximizedPanel(panel.id);
+                                },
+                            },
+                        ]
+                        : []),
+                    // The whole-workspace commands, kept behind the same "Global:" prefix
+                    // and the same >1-view gate they had on the dockview header, so a
+                    // returning user finds them where they were and the label still says
+                    // that the button in THIS cell rearranges every cell.
+                    ...(session.views.length > 1
+                        ? [
+                            {
+                                label: 'Global: change layout into set of tabs',
+                                icon: DynamicFeedIcon,
+                                onClick: () => {
+                                    tile('tabs');
+                                },
+                            },
+                            {
+                                label: 'Global: tile horizontally',
+                                icon: ViewColumnIcon,
+                                onClick: () => {
+                                    tile('horizontal');
+                                },
+                            },
+                            {
+                                label: 'Global: tile vertically',
+                                icon: TableRowsIcon,
+                                onClick: () => {
+                                    tile('vertical');
+                                },
+                            },
+                            {
+                                label: 'Global: tile grid',
+                                icon: ViewModuleIcon,
+                                onClick: () => {
+                                    tile('grid');
+                                },
+                            },
+                        ]
+                        : []),
+                ], size: "small", className: classes.button, children: _jsx(AddIcon, { className: classes.icon }) }), canClose ? (_jsx(Tooltip, { title: "Close panel", children: _jsx(IconButton, { size: "small", className: classes.button, onClick: onClose, children: _jsx(CloseIcon, { className: classes.icon }) }) })) : null] }));
+});

package/esm/WorkspaceLayout/WorkspaceTab.d.ts

@@ -0,0 +1,27 @@
+import type { WorkspaceSessionType } from '../ui/App/types.ts';
+import type { WorkspaceLayout } from './model.ts';
+import type { TabNode } from './tree.ts';
+import type { AbstractViewModel } from '@jbrowse/core/util';
+/**
+ * A tab's name is **derived** from the views it holds, unless the user set one.
+ *
+ * `title === undefined` is the sentinel for "not renamed", which is a plain
+ * `maybe` on the tab rather than the comparison the dockview version needed:
+ * dockview restores an unset title as the panel id, so telling a real title
+ * from a restored one meant testing `title !== panelId` and hoping nobody named
+ * a tab after a panel.
+ */
+export declare function tabDisplayName(tab: TabNode, views: AbstractViewModel[], session: WorkspaceSessionType): string;
+export declare const WorkspaceTab: ({ tab, views, session, layout, onClose, }: {
+    tab: TabNode;
+    views: AbstractViewModel[];
+    session: WorkspaceSessionType;
+    layout: WorkspaceLayout;
+    /**
+     * Closing a tab closes the views it held, and the layout does not own views —
+     * so the pair is one function at the call site rather than spelled out here.
+     * The strip's middle-click needs the same pair, and two spellings of "and
+     * also remove the views" is how one of them comes to be missing it.
+     */
+    onClose: () => void;
+}) => import("react").JSX.Element;

package/esm/WorkspaceLayout/WorkspaceTab.js

@@ -0,0 +1,109 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { InputBase, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import JBrowseTabMenu from '../ui/App/JBrowseTabMenu.js';
+const useStyles = makeStyles()(theme => ({
+    // Only the label and its menu. The background, the selected state and the
+    // hover live on the strip's own `[role=tab]` wrapper, which is where the
+    // selection is known — two places styling one tab is how they drift.
+    tab: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        minWidth: 0,
+    },
+    // dockview's `.dv-default-tab-content`: takes the space, truncates with an
+    // ellipsis, and takes its colour from the tab, which is what encodes
+    // active/inactive
+    title: {
+        flexGrow: 1,
+        marginRight: 4,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontSize: 'inherit',
+        color: 'inherit',
+    },
+    editInput: {
+        fontSize: 'inherit',
+        padding: '2px 4px',
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+        flex: 1,
+    },
+}));
+/**
+ * A tab's name is **derived** from the views it holds, unless the user set one.
+ *
+ * `title === undefined` is the sentinel for "not renamed", which is a plain
+ * `maybe` on the tab rather than the comparison the dockview version needed:
+ * dockview restores an unset title as the panel id, so telling a real title
+ * from a restored one meant testing `title !== panelId` and hoping nobody named
+ * a tab after a panel.
+ */
+export function tabDisplayName(tab, views, session) {
+    if (tab.title) {
+        return tab.title;
+    }
+    if (views.length === 0) {
+        return 'Empty';
+    }
+    if (views.length === 1) {
+        const view = views[0];
+        return (view.displayName ||
+            view.assemblyNames
+                ?.map(r => session.assemblyManager.getDisplayName(r))
+                .join(',') ||
+            'View');
+    }
+    return `${views.length} views`;
+}
+export const WorkspaceTab = observer(function WorkspaceTab({ tab, views, session, layout, onClose, }) {
+    const { classes } = useStyles();
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState('');
+    const title = tabDisplayName(tab, views, session);
+    const save = () => {
+        // An empty box means "go back to the automatic name". `title === undefined`
+        // is the sentinel for "not renamed" and `renameTab` takes it, but nothing
+        // in the UI passed it: clearing the box just discarded the edit, so a
+        // rename could be made and never unmade.
+        layout.renameTab(tab.id, draft.trim() || undefined);
+        setEditing(false);
+    };
+    return (_jsx("div", { className: classes.tab, children: editing ? (_jsx(InputBase, { autoFocus: true, className: classes.editInput, value: draft, onChange: e => {
+                setDraft(e.target.value);
+            }, onFocus: e => {
+                e.target.select();
+            }, onBlur: save, onKeyDown: e => {
+                // The box sits INSIDE the `role="tab"` that owns the strip's roving
+                // tabindex, and every key it handles — the arrows, Home, End, Enter
+                // and Space — it also preventDefault()s. All of them reach that
+                // handler by bubbling out of here, so while the box is open the
+                // arrows jumped to the next tab instead of moving the caret and a
+                // space never reached the input at all: a tab could not be given a
+                // name with a space in it.
+                e.stopPropagation();
+                if (e.key === 'Enter') {
+                    save();
+                }
+                else if (e.key === 'Escape') {
+                    setEditing(false);
+                }
+            }, 
+            // the tab strip starts a drag on pointerdown; renaming must not
+            onPointerDown: e => {
+                e.stopPropagation();
+            }, onClick: e => {
+                e.stopPropagation();
+            } })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { className: classes.title, variant: "body2", onDoubleClick: () => {
+                        setDraft(title);
+                        setEditing(true);
+                    }, children: title }), _jsx(JBrowseTabMenu, { onRename: () => {
+                        setDraft(title);
+                        setEditing(true);
+                    }, onClose: onClose })] })) }));
+});

package/esm/WorkspaceLayout/dockviewTheme.d.ts

@@ -0,0 +1,69 @@
+/**
+ * dockview's `dockview-theme-dark`, transcribed.
+ *
+ * We render the workspace ourselves now, but the look is deliberately not a new
+ * design — it is the theme we already shipped, so nothing about the chrome
+ * changed for users when the engine underneath it did. Every value below is
+ * copied from `dockview/dist/styles/dockview.css`'s `.dockview-theme-dark`
+ * block (v8.0.0); the names are its CSS custom properties with the `--dv-`
+ * prefix dropped.
+ *
+ * **Fixed, not theme-derived.** These apply in a light JBrowse theme too, the
+ * same way the app bar is dark in both — the chrome frames the content rather
+ * than matching it. Don't wire them to `theme.palette`: a light strip reads as
+ * content, which is exactly what it looked like before this file existed.
+ *
+ * **This is the chrome only, and the panel BODY is not chrome.** dockview also
+ * has a `--dv-group-view-background-color` (`#1e1e1e`) for the surface a tab's
+ * content sits on, and transcribing it is what made a light JBrowse theme come
+ * up dark below the views — the frame swallowing the thing it frames. The body
+ * follows `theme.palette.background.default` in `PanelView` instead, so the
+ * cell matches every other surface the app draws content on. It is deliberately
+ * absent here rather than present and unused, since an unused colour named
+ * after the panel reads as a value someone forgot to wire up.
+ *
+ * A consequence worth knowing before "fixing" it: dockview's selected tab is
+ * `#1e1e1e` **because** the body was, so the tab merged into its content. Ours
+ * cannot merge into a light body, and the four values below are kept anyway —
+ * darker-than-the-strip still reads as selected, and it is the one cue that
+ * survives being the only dark band on screen.
+ *
+ * Kept in one module because four components draw parts of the same chrome, and
+ * the four-way tab colouring below is a rule about the whole, not about any one
+ * of them.
+ */
+export declare const dv: {
+    /** the tab strip itself */
+    readonly tabsBackground: '#252526';
+    readonly activeGroupVisibleTabBackground: '#1e1e1e';
+    readonly activeGroupHiddenTabBackground: '#2d2d2d';
+    readonly inactiveGroupVisibleTabBackground: '#1e1e1e';
+    readonly inactiveGroupHiddenTabBackground: '#2d2d2d';
+    readonly activeGroupVisibleTabColor: 'white';
+    readonly activeGroupHiddenTabColor: '#969696';
+    readonly inactiveGroupVisibleTabColor: '#8f8f8f';
+    readonly inactiveGroupHiddenTabColor: '#626262';
+    readonly tabDividerColor: '#1e1e1e';
+    readonly separatorBorder: 'rgb(68, 68, 68)';
+    readonly iconHoverBackground: 'rgba(90, 93, 94, 0.31)';
+    readonly dragOverBackground: 'rgba(83, 89, 93, 0.5)';
+    readonly edgeDockIndicatorColor: 'rgba(56, 139, 253, 0.9)';
+    readonly tabsHeight: 35;
+    readonly tabsFontSize: 13;
+    /** the sash is 4px of grab area with a 1px line drawn inside it */
+    readonly sashSize: 4;
+};
+/** The background and text a tab takes, given where it sits. */
+export declare function tabColors(groupActive: boolean, visible: boolean): {
+    background: "#1e1e1e";
+    color: "white";
+} | {
+    background: "#2d2d2d";
+    color: "#969696";
+} | {
+    background: "#1e1e1e";
+    color: "#8f8f8f";
+} | {
+    background: "#2d2d2d";
+    color: "#626262";
+};

package/esm/WorkspaceLayout/dockviewTheme.js

@@ -0,0 +1,82 @@
+/**
+ * dockview's `dockview-theme-dark`, transcribed.
+ *
+ * We render the workspace ourselves now, but the look is deliberately not a new
+ * design — it is the theme we already shipped, so nothing about the chrome
+ * changed for users when the engine underneath it did. Every value below is
+ * copied from `dockview/dist/styles/dockview.css`'s `.dockview-theme-dark`
+ * block (v8.0.0); the names are its CSS custom properties with the `--dv-`
+ * prefix dropped.
+ *
+ * **Fixed, not theme-derived.** These apply in a light JBrowse theme too, the
+ * same way the app bar is dark in both — the chrome frames the content rather
+ * than matching it. Don't wire them to `theme.palette`: a light strip reads as
+ * content, which is exactly what it looked like before this file existed.
+ *
+ * **This is the chrome only, and the panel BODY is not chrome.** dockview also
+ * has a `--dv-group-view-background-color` (`#1e1e1e`) for the surface a tab's
+ * content sits on, and transcribing it is what made a light JBrowse theme come
+ * up dark below the views — the frame swallowing the thing it frames. The body
+ * follows `theme.palette.background.default` in `PanelView` instead, so the
+ * cell matches every other surface the app draws content on. It is deliberately
+ * absent here rather than present and unused, since an unused colour named
+ * after the panel reads as a value someone forgot to wire up.
+ *
+ * A consequence worth knowing before "fixing" it: dockview's selected tab is
+ * `#1e1e1e` **because** the body was, so the tab merged into its content. Ours
+ * cannot merge into a light body, and the four values below are kept anyway —
+ * darker-than-the-strip still reads as selected, and it is the one cue that
+ * survives being the only dark band on screen.
+ *
+ * Kept in one module because four components draw parts of the same chrome, and
+ * the four-way tab colouring below is a rule about the whole, not about any one
+ * of them.
+ */
+export const dv = {
+    /** the tab strip itself */
+    tabsBackground: '#252526',
+    // A tab's colours depend on TWO things: whether its panel is the active one,
+    // and whether it is the tab that panel is showing. dockview enumerates all
+    // four rather than dimming one axis, so the focused panel's selected tab is
+    // the only fully-white label on screen.
+    activeGroupVisibleTabBackground: '#1e1e1e',
+    activeGroupHiddenTabBackground: '#2d2d2d',
+    inactiveGroupVisibleTabBackground: '#1e1e1e',
+    inactiveGroupHiddenTabBackground: '#2d2d2d',
+    activeGroupVisibleTabColor: 'white',
+    activeGroupHiddenTabColor: '#969696',
+    inactiveGroupVisibleTabColor: '#8f8f8f',
+    inactiveGroupHiddenTabColor: '#626262',
+    tabDividerColor: '#1e1e1e',
+    separatorBorder: 'rgb(68, 68, 68)',
+    iconHoverBackground: 'rgba(90, 93, 94, 0.31)',
+    dragOverBackground: 'rgba(83, 89, 93, 0.5)',
+    edgeDockIndicatorColor: 'rgba(56, 139, 253, 0.9)',
+    tabsHeight: 35,
+    tabsFontSize: 13,
+    /** the sash is 4px of grab area with a 1px line drawn inside it */
+    sashSize: 4,
+};
+/** The background and text a tab takes, given where it sits. */
+export function tabColors(groupActive, visible) {
+    if (groupActive) {
+        return visible
+            ? {
+                background: dv.activeGroupVisibleTabBackground,
+                color: dv.activeGroupVisibleTabColor,
+            }
+            : {
+                background: dv.activeGroupHiddenTabBackground,
+                color: dv.activeGroupHiddenTabColor,
+            };
+    }
+    return visible
+        ? {
+            background: dv.inactiveGroupVisibleTabBackground,
+            color: dv.inactiveGroupVisibleTabColor,
+        }
+        : {
+            background: dv.inactiveGroupHiddenTabBackground,
+            color: dv.inactiveGroupHiddenTabColor,
+        };
+}

package/esm/WorkspaceLayout/dropZone.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Where a pointer sitting over a panel would drop a view.
+ *
+ * Kept as geometry over a plain rect rather than reading the DOM, because this
+ * is the part of drag-and-drop with actual decisions in it — the edge band, the
+ * tie-break between two edges, what happens in the middle — and all of it is
+ * checkable without rendering anything or synthesising a pointer.
+ */
+export type DropZone = 'center' | 'left' | 'right' | 'top' | 'bottom';
+export interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Where a drop would land. `zone` alone says which half of a cell; `strip` is
+ * set when the pointer is on the tab strip itself, which is a finer answer than
+ * `center` — that one appends, this one says where in the order.
+ */
+export interface DropTarget {
+    zone: DropZone;
+    strip?: StripDrop;
+}
+/** A drop on the strip: the position in the tab order, and where to draw it. */
+export interface StripDrop {
+    /** insertion index into the target panel's tabs, as they are ordered NOW */
+    index: number;
+    /** x of that gap, in the same space as the rects it was computed from */
+    left: number;
+}
+/**
+ * `center` means "add as a tab in this panel"; an edge means "split this panel
+ * and put the view in the new half".
+ *
+ * The bands are proportional rather than a fixed pixel depth so a narrow panel
+ * stays droppable — at a fixed 40px a 100px-wide panel would be all edge and
+ * have no centre to drop a tab into. `edgeFraction` is capped below 0.5 for the
+ * same reason: at 0.5 the centre vanishes entirely.
+ *
+ * Corners go to whichever edge the pointer is proportionally deeper into, so
+ * the diagonal is the tie-break and neither axis silently wins. **This is a
+ * deliberate divergence from dockview**, whose `calculateQuadrantAsPercentage`
+ * tests left, right, top, bottom in that order and returns the first hit — so
+ * in its top-left corner `left` always wins, however far into the top band the
+ * pointer is. Its band is 20% where this defaults to 25%.
+ */
+export declare function dropZoneAt(rect: Rect, x: number, y: number, edgeFraction?: number): DropZone;
+/**
+ * Which gap between tabs a pointer at `x` is nearest — the insertion index a
+ * drop there would use, and the x to draw the caret at.
+ *
+ * The test is each tab's MIDPOINT rather than its edges, so every x belongs to
+ * exactly one gap and there is no dead band between tabs where a drop would
+ * have to fall back to appending. `rects` are in strip order and `x` is in
+ * their coordinate space, whatever that is — this function does not know
+ * whether it was handed viewport or panel-relative numbers.
+ *
+ * An empty strip is index 0, which is the only sensible place for a first tab.
+ */
+export declare function stripDropAt(rects: Rect[], x: number): StripDrop;
+/**
+ * The split a drop on `zone` asks for: which way the panel divides, and whether
+ * the new half goes first. `center` is not a split.
+ */
+export declare function splitForZone(zone: DropZone): {
+    readonly direction: 'row';
+    readonly before: true;
+} | {
+    readonly direction: 'row';
+    readonly before: false;
+} | {
+    readonly direction: 'column';
+    readonly before: true;
+} | {
+    readonly direction: 'column';
+    readonly before: false;
+} | undefined;
+/** Where the drop indicator goes, as CSS percentages of the panel. */
+export declare function indicatorRect(zone: DropZone): {
+    readonly left: '0%';
+    readonly top: '0%';
+    readonly width: '50%';
+    readonly height: '100%';
+} | {
+    readonly left: '50%';
+    readonly top: '0%';
+    readonly width: '50%';
+    readonly height: '100%';
+} | {
+    readonly left: '0%';
+    readonly top: '0%';
+    readonly width: '100%';
+    readonly height: '50%';
+} | {
+    readonly left: '0%';
+    readonly top: '50%';
+    readonly width: '100%';
+    readonly height: '50%';
+} | {
+    readonly left: '0%';
+    readonly top: '0%';
+    readonly width: '100%';
+    readonly height: '100%';
+};

package/esm/WorkspaceLayout/dropZone.js

@@ -0,0 +1,113 @@
+/**
+ * Where a pointer sitting over a panel would drop a view.
+ *
+ * Kept as geometry over a plain rect rather than reading the DOM, because this
+ * is the part of drag-and-drop with actual decisions in it — the edge band, the
+ * tie-break between two edges, what happens in the middle — and all of it is
+ * checkable without rendering anything or synthesising a pointer.
+ */
+/**
+ * `center` means "add as a tab in this panel"; an edge means "split this panel
+ * and put the view in the new half".
+ *
+ * The bands are proportional rather than a fixed pixel depth so a narrow panel
+ * stays droppable — at a fixed 40px a 100px-wide panel would be all edge and
+ * have no centre to drop a tab into. `edgeFraction` is capped below 0.5 for the
+ * same reason: at 0.5 the centre vanishes entirely.
+ *
+ * Corners go to whichever edge the pointer is proportionally deeper into, so
+ * the diagonal is the tie-break and neither axis silently wins. **This is a
+ * deliberate divergence from dockview**, whose `calculateQuadrantAsPercentage`
+ * tests left, right, top, bottom in that order and returns the first hit — so
+ * in its top-left corner `left` always wins, however far into the top band the
+ * pointer is. Its band is 20% where this defaults to 25%.
+ */
+export function dropZoneAt(rect, x, y, edgeFraction = 0.25) {
+    const fraction = Math.min(Math.max(edgeFraction, 0), 0.49);
+    if (rect.width <= 0 || rect.height <= 0) {
+        return 'center';
+    }
+    // 0 at the left/top edge, 1 at the right/bottom
+    const px = (x - rect.left) / rect.width;
+    const py = (y - rect.top) / rect.height;
+    // how far into an edge band the pointer is, as a share of that band
+    const depths = [
+        { zone: 'left', depth: (fraction - px) / fraction },
+        { zone: 'right', depth: (px - (1 - fraction)) / fraction },
+        { zone: 'top', depth: (fraction - py) / fraction },
+        { zone: 'bottom', depth: (py - (1 - fraction)) / fraction },
+    ].filter(candidate => candidate.depth > 0);
+    if (depths.length === 0) {
+        return 'center';
+    }
+    return depths.reduce((best, candidate) => candidate.depth > best.depth ? candidate : best).zone;
+}
+/**
+ * Which gap between tabs a pointer at `x` is nearest — the insertion index a
+ * drop there would use, and the x to draw the caret at.
+ *
+ * The test is each tab's MIDPOINT rather than its edges, so every x belongs to
+ * exactly one gap and there is no dead band between tabs where a drop would
+ * have to fall back to appending. `rects` are in strip order and `x` is in
+ * their coordinate space, whatever that is — this function does not know
+ * whether it was handed viewport or panel-relative numbers.
+ *
+ * An empty strip is index 0, which is the only sensible place for a first tab.
+ */
+export function stripDropAt(rects, x) {
+    for (const [i, rect] of rects.entries()) {
+        if (x < rect.left + rect.width / 2) {
+            return { index: i, left: rect.left };
+        }
+    }
+    const last = rects.at(-1);
+    return {
+        index: rects.length,
+        left: last ? last.left + last.width : 0,
+    };
+}
+/**
+ * What each zone means, in one table.
+ *
+ * `split` is the split a drop there asks for — which way the panel divides and
+ * whether the new half goes first; `center` is not a split. `rect` is where the
+ * indicator is drawn, as CSS percentages of the panel.
+ *
+ * One table rather than two switches because the pair has to agree: the shaded
+ * half IS the half the drop lands in, and that is the whole content of the
+ * indicator. Written apart, `right` could shade the left half and nothing would
+ * be wrong with either function on its own.
+ */
+const ZONES = {
+    left: {
+        split: { direction: 'row', before: true },
+        rect: { left: '0%', top: '0%', width: '50%', height: '100%' },
+    },
+    right: {
+        split: { direction: 'row', before: false },
+        rect: { left: '50%', top: '0%', width: '50%', height: '100%' },
+    },
+    top: {
+        split: { direction: 'column', before: true },
+        rect: { left: '0%', top: '0%', width: '100%', height: '50%' },
+    },
+    bottom: {
+        split: { direction: 'column', before: false },
+        rect: { left: '0%', top: '50%', width: '100%', height: '50%' },
+    },
+    center: {
+        split: undefined,
+        rect: { left: '0%', top: '0%', width: '100%', height: '100%' },
+    },
+};
+/**
+ * The split a drop on `zone` asks for: which way the panel divides, and whether
+ * the new half goes first. `center` is not a split.
+ */
+export function splitForZone(zone) {
+    return ZONES[zone].split;
+}
+/** Where the drop indicator goes, as CSS percentages of the panel. */
+export function indicatorRect(zone) {
+    return ZONES[zone].rect;
+}

package/esm/WorkspaceLayout/index.d.ts

@@ -0,0 +1,8 @@
+export { WorkspaceLayoutMixin, isSessionWithWorkspaceLayout } from './model.ts';
+export { WorkspaceContainer } from './WorkspaceContainer.tsx';
+export { LayoutRenderer } from './LayoutRenderer.tsx';
+export { useLayoutDrag } from './useLayoutDrag.ts';
+export type { WorkspaceLayoutMixinType, WorkspaceLayout } from './model.ts';
+export type { LayoutTree, PanelNode, TabNode, BranchNode, TabHome, } from './tree.ts';
+export type { LayoutSpecNode, PendingMove, TileMode } from './spec.ts';
+export type { DropZone } from './dropZone.ts';

package/esm/WorkspaceLayout/index.js

@@ -0,0 +1,4 @@
+export { WorkspaceLayoutMixin, isSessionWithWorkspaceLayout } from './model.js';
+export { WorkspaceContainer } from './WorkspaceContainer.js';
+export { LayoutRenderer } from './LayoutRenderer.js';
+export { useLayoutDrag } from './useLayoutDrag.js';