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

package/esm/WorkspaceLayout/WorkspaceContainer.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense, useCallback, useEffect, useMemo } from 'react';
+import { Suspense, useCallback, 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 { ViewLauncher } from '../ui/App/lazyParts.js';
@@ -17,11 +16,6 @@ const useStyles = makeStyles()(theme => ({
         gridRow: 'components',
         background: theme.palette.background.default,
     },
-    stack: {
-        display: 'flex',
-        flexDirection: 'column',
-        minWidth: 0,
-    },
     empty: {
         display: 'flex',
         alignItems: 'center',
@@ -29,30 +23,11 @@ const useStyles = makeStyles()(theme => ({
         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);
-    // #region autorunInEffect
-    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]);
-    // #endregion
-    // 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 ×.
+    // the layout does not own views, so every close gesture goes through here
+    // or leaks them
     const closeViews = useCallback((viewIds) => {
         for (const view of viewsOf(session, viewIds)) {
             session.removeView(view);
@@ -74,33 +49,25 @@ export const WorkspaceContainer = observer(function WorkspaceContainer({ session
         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.
-     */
+    // memoised by hand (the React Compiler skips `observer`): a fresh object
+    // re-renders every panel's ViewStack. `drag` stays out for the same reason.
     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: () => {
+        renderTabLabel: tab => (_jsx(WorkspaceTab, { tab: tab, views: viewsOf(session, tab.viewIds), session: 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 }) }) }));
+            return views.length > 0 ? (_jsx(ViewStack, { views: views, session: session })) : (_jsx("div", { className: classes.empty, children: _jsx(Suspense, { fallback: null, children: _jsx(ViewLauncher, { session: session }) }) }));
         },
-    }), [session, handlers, closeTab, closePanel, classes.stack, classes.empty]);
+    }), [session, handlers, closeTab, closePanel, 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.
+// `session.views` is the order; a tab's `viewIds` is membership only
 function viewsOf(session, viewIds) {
     const members = new Set(viewIds);
     return session.views.filter(v => members.has(v.id));

package/esm/WorkspaceLayout/WorkspacePanelActions.d.ts

@@ -1,24 +1,9 @@
 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.
-     */
+    /** closes the cell and the views its tabs hold */
     onClose: () => void;
 }) => import("react").JSX.Element;

package/esm/WorkspaceLayout/WorkspacePanelActions.js

@@ -14,34 +14,26 @@ 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';
+import { stripIconColor, workspaceTheme } from './workspaceTheme.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 },
+        color: stripIconColor,
+        '&:hover': {
+            background: workspaceTheme.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));
+        session.tileViews(mode);
     };
     return (_jsxs("div", { className: classes.actions, children: [_jsx(CascadingMenuButton, { menuItems: [
                     {
@@ -52,23 +44,21 @@ export const WorkspacePanelActions = observer(function WorkspacePanelActions({ p
                         },
                     },
                     {
-                        label: 'New empty split horizontal',
+                        label: 'New empty split (right)',
                         icon: VerticalSplitIcon,
                         onClick: () => {
                             session.splitPanel(panel.id, 'row');
                         },
                     },
                     {
-                        label: 'New empty split vertical',
+                        label: 'New empty split (below)',
                         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.
+                    // the keyboard route to the strip's double-click; hidden when there
+                    // is no other cell to hide
                     ...(session.panels.length > 1 || maximized
                         ? [
                             {
@@ -80,41 +70,46 @@ export const WorkspacePanelActions = observer(function WorkspacePanelActions({ p
                             },
                         ]
                         : []),
-                    // 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',
+                                label: 'Arrange all views',
                                 icon: ViewModuleIcon,
-                                onClick: () => {
-                                    tile('grid');
-                                },
+                                type: 'subMenu',
+                                subMenu: [
+                                    {
+                                        label: 'As tabs',
+                                        icon: DynamicFeedIcon,
+                                        onClick: () => {
+                                            tile('tabs');
+                                        },
+                                    },
+                                    {
+                                        label: 'Side by side',
+                                        icon: ViewColumnIcon,
+                                        onClick: () => {
+                                            tile('horizontal');
+                                        },
+                                    },
+                                    {
+                                        label: 'Stacked',
+                                        icon: TableRowsIcon,
+                                        onClick: () => {
+                                            tile('vertical');
+                                        },
+                                    },
+                                    {
+                                        label: '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] }));
+                ], tooltip: "Panel menu", size: "small", className: classes.button, children: _jsx(AddIcon, { className: classes.icon }) }), maximized ? (_jsx(Tooltip, { title: "Restore panel", children: _jsx(IconButton, { size: "small", className: classes.button, onClick: () => {
+                        session.restorePanels();
+                    }, children: _jsx(CloseFullscreenIcon, { className: classes.icon }) }) })) : null, 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

@@ -2,26 +2,10 @@ 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, }: {
+export declare const WorkspaceTab: ({ tab, views, session, 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.
-     */
+    session: WorkspaceSessionType & WorkspaceLayout;
+    /** closes the tab and the views it holds */
     onClose: () => void;
 }) => import("react").JSX.Element;

package/esm/WorkspaceLayout/WorkspaceTab.js

@@ -4,20 +4,15 @@ 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';
-import { viewName } from '../ui/App/viewTitle.js';
+import { tabDisplayName } from './tabName.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.
+    // the `[role=tab]` wrapper in TabStrip owns background and selected state
     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,
@@ -36,38 +31,20 @@ const useStyles = makeStyles()(theme => ({
         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) {
-        return viewName(views[0], r => session.assemblyManager.getDisplayName(r));
-    }
-    return `${views.length} views`;
-}
-export const WorkspaceTab = observer(function WorkspaceTab({ tab, views, session, layout, onClose, }) {
+export const WorkspaceTab = observer(function WorkspaceTab({ tab, views, session, onClose, }) {
     const { classes } = useStyles();
     const [editing, setEditing] = useState(false);
     const [draft, setDraft] = useState('');
     const title = tabDisplayName(tab, views, session);
+    const startEditing = () => {
+        setDraft(title);
+        setEditing(true);
+    };
+    // an empty box or the unchanged automatic name keeps the name automatic
     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);
+        const name = draft.trim();
+        const automatic = tabDisplayName({ ...tab, title: undefined }, views, session);
+        session.renameTab(tab.id, name && name !== automatic ? name : undefined);
         setEditing(false);
     };
     return (_jsx("div", { className: classes.tab, children: editing ? (_jsx(InputBase, { autoFocus: true, className: classes.editInput, value: draft, onChange: e => {
@@ -75,13 +52,6 @@ export const WorkspaceTab = observer(function WorkspaceTab({ tab, views, session
             }, 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();
@@ -95,11 +65,5 @@ export const WorkspaceTab = observer(function WorkspaceTab({ tab, views, session
                 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 })] })) }));
+            } })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { className: classes.title, variant: "body2", onDoubleClick: startEditing, children: title }), _jsx(JBrowseTabMenu, { onRename: startEditing, onClose: onClose })] })) }));
 });

package/esm/WorkspaceLayout/dropZone.d.ts

@@ -1,11 +1,4 @@
-/**
- * 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.
- */
+/** Drop geometry over plain rects, so it is testable without a DOM. */
 export type DropZone = 'center' | 'left' | 'right' | 'top' | 'bottom';
 export interface Rect {
     left: number;
@@ -13,11 +6,7 @@ export interface Rect {
     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.
- */
+/** `strip` is set on the tab strip, and gives a position in the tab order. */
 export interface DropTarget {
     zone: DropZone;
     strip?: StripDrop;
@@ -30,33 +19,14 @@ export interface StripDrop {
     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%.
+ * `center` adds as a tab; an edge splits the panel. Bands are proportional and
+ * capped below half, so a narrow panel keeps a centre. A corner goes to the
+ * edge the pointer is proportionally deeper into.
  */
 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.
+ * The gap between tabs nearest `x`, by tab midpoint so every x has exactly one.
+ * `x` is in the rects' coordinate space, whichever that is.
  */
 export declare function stripDropAt(rects: Rect[], x: number): StripDrop;
 /**

package/esm/WorkspaceLayout/dropZone.js

@@ -1,26 +1,8 @@
+/** Drop geometry over plain rects, so it is testable without a DOM. */
 /**
- * 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%.
+ * `center` adds as a tab; an edge splits the panel. Bands are proportional and
+ * capped below half, so a narrow panel keeps a centre. A corner goes to the
+ * edge the pointer is proportionally deeper into.
  */
 export function dropZoneAt(rect, x, y, edgeFraction = 0.25) {
     const fraction = Math.min(Math.max(edgeFraction, 0), 0.49);
@@ -43,16 +25,8 @@ export function dropZoneAt(rect, x, y, edgeFraction = 0.25) {
     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.
+ * The gap between tabs nearest `x`, by tab midpoint so every x has exactly one.
+ * `x` is in the rects' coordinate space, whichever that is.
  */
 export function stripDropAt(rects, x) {
     for (const [i, rect] of rects.entries()) {
@@ -66,18 +40,7 @@ export function stripDropAt(rects, x) {
         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.
- */
+// one table, so the shaded half and the half a drop lands in cannot disagree
 const ZONES = {
     left: {
         split: { direction: 'row', before: true },