@grafloria/element 0.4.30 → 0.4.32

package/src/lib/dashboard-kit/dashboard.js

@@ -44,7 +44,7 @@
  */
 import { __awaiter, __rest } from "tslib";
 import { BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, AddGroupCommand, AddToGroupCommand, RemoveFromGroupCommand, RemoveGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
-import { bindDashboardGrid, parentPeerOf, } from './grid-binder.js';
+import { bindDashboardGrid, parentPeerOf, SequenceCommand, } from './grid-binder.js';
 import { bindDashboardSplit, SPLIT_TREE_KEY } from './split-binder.js';
 import { gridItemFromCell } from './grid-mapping.js';
 import { ensureDashboardKitStyles } from './styles.js';
@@ -348,16 +348,22 @@ export function attachTabsRuntime(ctx, model, container, handle) {
     // exactly the "the content is taken and the tab remains" report — and a page
     // that arrived never got one.
     const pagesOf = (id) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const cg = (_a = ctx.boardGroups.get(id)) !== null && _a !== void 0 ? _a : model.getGroup(id);
         const authored = ((_c = (_b = ctx.specById.get(id)) === null || _b === void 0 ? void 0 : _b.widgets) !== null && _c !== void 0 ? _c : []).map((c) => c.id);
         const live = [...((_d = cg === null || cg === void 0 ? void 0 : cg.members) !== null && _d !== void 0 ? _d : [])].filter((m) => !!model.getGroup(m));
+        // A REORDERED strip persists its order on the container; it outranks the
+        // authored list, which outranks arrival order.
+        const saved = ((_f = (_e = cg === null || cg === void 0 ? void 0 : cg.getMetadata('containerWidget')) === null || _e === void 0 ? void 0 : _e.order) !== null && _f !== void 0 ? _f : []);
         const rank = (pid) => {
+            const o = saved.indexOf(pid);
+            if (o >= 0)
+                return o;
             // A plain child is wrapped as `<id>__page`, so the authored order is
             // keyed on the id BEFORE the wrap as well as after it.
             const i = authored.indexOf(pid);
             const j = i < 0 ? authored.indexOf(pid.replace(/__page$/, '')) : i;
-            return j < 0 ? Number.MAX_SAFE_INTEGER : j;
+            return j < 0 ? Number.MAX_SAFE_INTEGER : saved.length + j;
         };
         live.sort((a, b) => rank(a) - rank(b));
         return live.map((pid) => { var _a, _b; return ({ id: pid, label: (_b = (_a = ctx.specById.get(pid)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : pid }); });
@@ -404,7 +410,14 @@ export function attachTabsRuntime(ctx, model, container, handle) {
         const key = tabStripKey(pages, active, ctx.tabsOf.get(id), rtl);
         if (el.getAttribute('data-key') === key)
             return;
-        paintTabStrip(el, pages, active, ctx.tabsOf.get(id), rtl, (pid) => handle.activateTab(id, pid), () => handle.selectWidget(id), (pid, ev) => tearOut(id, pid, ev));
+        paintTabStrip(el, pages, active, ctx.tabsOf.get(id), rtl, (pid) => handle.activateTab(id, pid), (e) => {
+            var _a;
+            // The strip's empty space selects the container — and, travelled,
+            // drags the whole group by it, as a section is dragged by its caption.
+            handle.selectWidget(id);
+            if (container)
+                (_a = parentPeerOf(container, id)) === null || _a === void 0 ? void 0 : _a.dragMember(id, e);
+        }, (pid, ev) => tearOut(id, pid, ev));
         el.setAttribute('data-key', key);
     };
     const sync = (id) => {
@@ -413,12 +426,13 @@ export function attachTabsRuntime(ctx, model, container, handle) {
         if (!cg || !isTabs(id))
             return;
         const pages = pagesOf(id);
-        // The page that was showing may have just been dragged out.
+        // The page that was showing may have just been dragged out or closed:
+        // whatever shows now is the active one, and it is written back so the
+        // handle answers what the strip paints.
         let active = (_b = ctx.activeTab.get(id)) !== null && _b !== void 0 ? _b : pages[0].id;
-        if (!pages.some((p) => p.id === active)) {
+        if (!pages.some((p) => p.id === active))
             active = pages[0].id;
-            ctx.activeTab.set(id, active);
-        }
+        ctx.activeTab.set(id, active);
         const strip = tabStripReserve(ctx.tabsOf.get(id), pages.length);
         const f = { x: cg.position.x, y: cg.position.y, width: (_d = (_c = cg.size) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 0, height: (_f = (_e = cg.size) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 0 };
         const inner = { width: f.width, height: Math.max(0, f.height - strip) };
@@ -501,37 +515,6 @@ export function attachTabsRuntime(ctx, model, container, handle) {
         if (isTabs(id))
             attach(id);
 }
-/**
- * Steps that depend on each other's RESULT — create a group, then move a page
- * into it, then place the group on the board — run as one history step. A
- * batch checks every member's `canExecute` before running any of them, and
- * the second step's precondition (the group exists) is what the first step
- * creates, so as a batch the chain is refused. This runs the chain in order
- * and reverses it on undo, judging nothing up front.
- */
-class SequenceCommand extends Command {
-    constructor(name, steps) {
-        super(name);
-        this.steps = steps;
-    }
-    execute(context) {
-        for (const c of this.steps)
-            c.execute(context);
-    }
-    undo(context) {
-        for (let i = this.steps.length - 1; i >= 0; i--)
-            this.steps[i].undo(context);
-    }
-    canExecute() {
-        return true;
-    }
-    canUndo() {
-        return true;
-    }
-    serialize() {
-        return { id: this.id, name: this.name, timestamp: this.timestamp, data: { steps: this.steps.map((c) => c.serialize()) } };
-    }
-}
 /** `setCaption` as one history step: execute re-applies the value, undo the previous one. */
 class SetCaptionCommand extends Command {
     constructor(sectionId, before, after, apply) {
@@ -619,7 +602,7 @@ export function createDashboardHandle(ctx) {
      * tile under the container it is actually in, in every one of those states.
      */
     const treeOf = (boardId) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const g = ctx.boardGroups.get(boardId);
         const b = binders.get(boardId);
         if (!g)
@@ -636,7 +619,7 @@ export function createDashboardHandle(ctx) {
             if (ctx.boardGroups.has(memberId)) {
                 // The container's LIVE layout and, under split, its live tree — the
                 // authored `tree` is stale the moment a divider moves.
-                const _g = spec !== null && spec !== void 0 ? spec : {}, { tree: _authored } = _g, rest = __rest(_g, ["tree"]);
+                const _j = spec !== null && spec !== void 0 ? spec : {}, { tree: _authored } = _j, rest = __rest(_j, ["tree"]);
                 void _authored;
                 const clayout = (_c = (_b = ctx.layoutOf.get(memberId)) !== null && _b !== void 0 ? _b : spec === null || spec === void 0 ? void 0 : spec.layout) !== null && _c !== void 0 ? _c : 'grid';
                 const cb = binders.get(memberId);
@@ -656,6 +639,14 @@ export function createDashboardHandle(ctx) {
                 entries.push(entry);
             }
         }
+        if (ctx.layoutOf.get(boardId) === 'tabs') {
+            // A tab container's pages have no cells that mean anything: their order
+            // is the strip's (the authored list, as reordered), not a sort by cell.
+            const order = ((_h = (_g = specById.get(boardId)) === null || _g === void 0 ? void 0 : _g.widgets) !== null && _h !== void 0 ? _h : []).map((w) => w.id);
+            const rank = (id) => (order.indexOf(id) < 0 ? Number.MAX_SAFE_INTEGER : order.indexOf(id));
+            entries.sort((p1, p2) => rank(p1.id) - rank(p2.id));
+            return entries;
+        }
         entries.sort((p1, p2) => { var _a, _b, _c, _d; return ((_a = p1.y) !== null && _a !== void 0 ? _a : 0) - ((_b = p2.y) !== null && _b !== void 0 ? _b : 0) || ((_c = p1.x) !== null && _c !== void 0 ? _c : 0) - ((_d = p2.x) !== null && _d !== void 0 ? _d : 0); });
         return entries;
     };
@@ -670,6 +661,350 @@ export function createDashboardHandle(ctx) {
      * whose last editor leaves; undo reopens it. The board that lands it adds
      * its own displaced-tile commands around these.
      */
+    /** The tab index a CLIENT x means along a strip: before the first tab whose middle lies past it. */
+    const indexInStrip = (strip, cx) => {
+        const rtl = strip.getAttribute('dir') === 'rtl';
+        let i = 0;
+        for (const t of Array.from(strip.querySelectorAll('.axdb-tab'))) {
+            const tr = t.getBoundingClientRect();
+            const mid = tr.left + tr.width / 2;
+            if (rtl ? cx < mid : cx > mid)
+                i++;
+            else
+                break;
+        }
+        return i;
+    };
+    /** Paint (or, with null, clear) the insertion mark on a strip. */
+    const markTabDrop = (targetId, index) => {
+        for (const [id, el] of ctx.tabStrips) {
+            const on = id === targetId;
+            el.classList.toggle('axdb-tabs--drop', on);
+            const tabs = Array.from(el.querySelectorAll('.axdb-tab'));
+            tabs.forEach((t, i) => t.classList.toggle('axdb-tab--drop-before', on && index !== null && i === index));
+            el.classList.toggle('axdb-tabs--drop-end', on && index !== null && index >= tabs.length);
+        }
+    };
+    const livePages = (containerId) => {
+        var _a, _b, _c;
+        const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+        return [...((_c = (_b = ctx.boardGroups.get(containerId)) === null || _b === void 0 ? void 0 : _b.members) !== null && _c !== void 0 ? _c : [])].filter((m) => !!(model === null || model === void 0 ? void 0 : model.getGroup(m)));
+    };
+    /**
+     * CLOSE a tab container: its slab leaves `boardId` (the tiles around it
+     * settle as a removal settles them), its registry goes and its strip with
+     * it. Undo reopens it. The registry goes FIRST so that on undo it comes
+     * back AFTER the group and its slab do.
+     */
+    const closeContainer = (containerId, boardId) => {
+        var _a, _b, _c, _d;
+        const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+        if (!model)
+            return [];
+        const fromSpec = specById.get(containerId);
+        const viewId = (_b = ctx.viewOfBoard.get(containerId)) !== null && _b !== void 0 ? _b : ctx.active;
+        let fromSlot = -1;
+        const gone = {
+            register: () => {
+                var _a;
+                const live = model.getGroup(containerId);
+                if (!live)
+                    return;
+                ctx.boardGroups.set(containerId, live);
+                ctx.layoutOf.set(containerId, 'tabs');
+                ctx.viewOfBoard.set(containerId, viewId);
+                if (fromSpec)
+                    specById.set(containerId, fromSpec);
+                const arr = ctx.boardWidgets.get(boardId);
+                if (arr && fromSpec && !arr.some((w) => w.id === containerId)) {
+                    arr.splice(fromSlot < 0 ? arr.length : Math.min(fromSlot, arr.length), 0, fromSpec);
+                }
+                (_a = ctx.attachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+            },
+            unregister: () => {
+                var _a;
+                (_a = ctx.detachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                ctx.boardGroups.delete(containerId);
+                ctx.layoutOf.delete(containerId);
+                ctx.viewOfBoard.delete(containerId);
+                specById.delete(containerId);
+                const arr = ctx.boardWidgets.get(boardId);
+                if (arr) {
+                    const i = arr.findIndex((w) => w.id === containerId);
+                    if (i >= 0) {
+                        fromSlot = i;
+                        arr.splice(i, 1);
+                    }
+                }
+            },
+        };
+        return [
+            ...((_d = (_c = binders.get(boardId)) === null || _c === void 0 ? void 0 : _c.planRemoval(containerId)) !== null && _d !== void 0 ? _d : []),
+            new SequenceCommand('Close empty tab container', [
+                new RegisterWidgetCommand(gone, 'unregister'),
+                new RemoveFromGroupCommand(boardId, containerId),
+                new RemoveGroupCommand(containerId),
+            ]),
+        ];
+    };
+    /** The tab container that holds `pageId` as a page, if any. */
+    const containerOfPage = (pageId) => {
+        var _a;
+        for (const [cid, g] of ctx.boardGroups)
+            if (ctx.layoutOf.get(cid) === 'tabs' && ((_a = g.members) === null || _a === void 0 ? void 0 : _a.has(pageId)))
+                return cid;
+        return undefined;
+    };
+    /**
+     * AN EMPTY PAGE CLOSES. When a page's last widget leaves — dragged out, moved
+     * into another board, removed, made a tab of its own — the page and its tab
+     * go, and if that was the container's last page the container goes too: a
+     * tab pointing at nothing is what "the content is taken and the tab remains"
+     * looked like. Undo reopens the page (its grid re-binds on the history event)
+     * and then the widget comes back into it.
+     */
+    ctx.closePageIfEmptied = (boardId, leaving) => {
+        var _a, _b, _c, _d, _e, _f;
+        const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+        const pg = ctx.boardGroups.get(boardId);
+        if (!model || !pg)
+            return [];
+        if ([...((_b = pg.members) !== null && _b !== void 0 ? _b : [])].some((m) => m !== leaving))
+            return [];
+        const containerId = containerOfPage(boardId);
+        if (!containerId)
+            return [];
+        const container = ctx.boardGroups.get(containerId);
+        if (!container)
+            return [];
+        const hostBoard = (_d = (_c = viewOfWidget.get(containerId)) !== null && _c !== void 0 ? _c : ctx.viewOfBoard.get(containerId)) !== null && _d !== void 0 ? _d : ctx.active;
+        const viewId = (_e = ctx.viewOfBoard.get(boardId)) !== null && _e !== void 0 ? _e : ctx.active;
+        const pageSpec = specById.get(boardId);
+        const containerSpec = specById.get(containerId);
+        const layout = (_f = ctx.layoutOf.get(boardId)) !== null && _f !== void 0 ? _f : 'grid';
+        const prevActive = ctx.activeTab.get(containerId);
+        let slot = -1;
+        const page = {
+            register: () => {
+                var _a;
+                const live = model.getGroup(boardId);
+                if (!live)
+                    return;
+                ctx.boardGroups.set(boardId, live);
+                ctx.layoutOf.set(boardId, layout);
+                ctx.viewOfBoard.set(boardId, viewId);
+                if (pageSpec) {
+                    specById.set(boardId, pageSpec);
+                    ctx.boardWidgets.set(boardId, (_a = pageSpec.widgets) !== null && _a !== void 0 ? _a : []);
+                    if ((containerSpec === null || containerSpec === void 0 ? void 0 : containerSpec.widgets) && !containerSpec.widgets.some((p) => p.id === boardId)) {
+                        containerSpec.widgets.splice(slot < 0 ? containerSpec.widgets.length : Math.min(slot, containerSpec.widgets.length), 0, pageSpec);
+                    }
+                }
+                if (prevActive)
+                    ctx.activeTab.set(containerId, prevActive);
+            },
+            unregister: () => {
+                var _a;
+                (_a = binders.get(boardId)) === null || _a === void 0 ? void 0 : _a.dispose();
+                binders.delete(boardId);
+                ctx.boardGroups.delete(boardId);
+                ctx.layoutOf.delete(boardId);
+                ctx.viewOfBoard.delete(boardId);
+                specById.delete(boardId);
+                ctx.boardWidgets.delete(boardId);
+                if (containerSpec === null || containerSpec === void 0 ? void 0 : containerSpec.widgets) {
+                    const i = containerSpec.widgets.findIndex((p) => p.id === boardId);
+                    if (i >= 0) {
+                        slot = i;
+                        containerSpec.widgets.splice(i, 1);
+                    }
+                }
+                if (ctx.activeTab.get(containerId) === boardId)
+                    ctx.activeTab.delete(containerId);
+            },
+        };
+        const cmds = [
+            new SequenceCommand('Close empty tab page', [
+                new RegisterWidgetCommand(page, 'unregister'),
+                new RemoveFromGroupCommand(containerId, boardId),
+                new RemoveGroupCommand(boardId),
+            ]),
+        ];
+        if (livePages(containerId).filter((m) => m !== boardId).length === 0)
+            cmds.push(...closeContainer(containerId, hostBoard));
+        return cmds;
+    };
+    /**
+     * A WIDGET BECOMES A TAB: the commands that wrap `widgetId` into a fresh page
+     * `<widget>__page` — built as an authored page is — and put that page into
+     * `containerId` at `index`, active. `displaced` are the source board's
+     * survivors' cells (a drag has them; the API plans them). The board it left
+     * re-packs, and a page it emptied closes.
+     */
+    const moveWidgetToTabCommands = (widgetId, containerId, index, sourceBoardId, displaced) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+        const node = model === null || model === void 0 ? void 0 : model.getNode(widgetId);
+        const spec = specById.get(widgetId);
+        const container = ctx.boardGroups.get(containerId);
+        const containerSpec = specById.get(containerId);
+        if (!model || !node || !spec || spec.widgets || !container || !containerSpec)
+            return [];
+        if (((_b = ctx.layoutOf.get(containerId)) !== null && _b !== void 0 ? _b : containerSpec.layout) !== 'tabs')
+            return [];
+        const pageId = `${widgetId}__page`;
+        if (model.getGroup(pageId))
+            return [];
+        const title = (_c = spec.title) !== null && _c !== void 0 ? _c : widgetId;
+        const cw = ((_d = container.getMetadata('containerWidget')) !== null && _d !== void 0 ? _d : {});
+        const cols = Math.max(1, (_g = (_f = (_e = cw.columns) !== null && _e !== void 0 ? _e : containerSpec.columns) !== null && _f !== void 0 ? _f : spec.span) !== null && _g !== void 0 ? _g : 3);
+        const rows = Math.max(1, (_h = spec.rows) !== null && _h !== void 0 ? _h : 1);
+        const g = new GroupModel({ id: pageId, name: title });
+        g.setMetadata('frameChrome', 'none');
+        g.setMetadata('gridItem', gridItemFromCell({ x: 0, y: 0, w: cols, h: rows }));
+        g.setMetadata('containerWidget', { title, columns: cols, maxRows: rows, layout: 'grid' });
+        g.setMetadata('dashboardBoard', {
+            columns: cols,
+            gap: ctx.gap,
+            padding: 0,
+            sizing: 'fit',
+            baseRowHeight: ctx.rowHeight,
+            designHeight: 0,
+            maxRows: rows,
+            float: false,
+            rtl: (_j = ctx.optionsBase.rtl) !== null && _j !== void 0 ? _j : false,
+            layout: 'grid',
+            escalate: true,
+        });
+        g.position = { x: container.position.x, y: container.position.y };
+        g.size = { width: (_l = (_k = container.size) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : 100, height: (_o = (_m = container.size) === null || _m === void 0 ? void 0 : _m.height) !== null && _o !== void 0 ? _o : 100, depth: 0 };
+        const pageSpec = { id: pageId, title, columns: cols, widgets: [spec] };
+        const viewId = (_p = ctx.viewOfBoard.get(containerId)) !== null && _p !== void 0 ? _p : ctx.active;
+        const prevActive = ctx.activeTab.get(containerId);
+        const prevXY = { x: spec.x, y: spec.y };
+        const prevGrid = (_q = node.getGridItem) === null || _q === void 0 ? void 0 : _q.call(node);
+        let srcSlot = -1;
+        const cwOf = () => { var _a; return ((_a = container.getMetadata('containerWidget')) !== null && _a !== void 0 ? _a : {}); };
+        const reg = {
+            register: () => {
+                var _a, _b;
+                const live = model.getGroup(pageId);
+                if (!live)
+                    return;
+                ctx.boardGroups.set(pageId, live);
+                ctx.layoutOf.set(pageId, 'grid');
+                ctx.viewOfBoard.set(pageId, viewId);
+                specById.set(pageId, pageSpec);
+                ctx.boardWidgets.set(pageId, pageSpec.widgets);
+                viewOfWidget.set(pageId, containerId);
+                viewOfWidget.set(widgetId, pageId);
+                const src = ctx.boardWidgets.get(sourceBoardId);
+                if (src) {
+                    const i = src.findIndex((w) => w.id === widgetId);
+                    if (i >= 0) {
+                        srcSlot = i;
+                        src.splice(i, 1);
+                    }
+                }
+                containerSpec.widgets = (_a = containerSpec.widgets) !== null && _a !== void 0 ? _a : [];
+                if (!containerSpec.widgets.some((p) => p.id === pageId)) {
+                    containerSpec.widgets.splice(Math.max(0, Math.min(index, containerSpec.widgets.length)), 0, pageSpec);
+                }
+                spec.x = 0;
+                spec.y = 0;
+                node.setGridItem(gridItemFromCell({ x: 0, y: 0, w: Math.min(cols, (_b = spec.span) !== null && _b !== void 0 ? _b : cols), h: rows }));
+                ctx.activeTab.set(containerId, pageId);
+                containerSpec.active = pageId;
+                container.setMetadata('containerWidget', Object.assign(Object.assign({}, cwOf()), { active: pageId }));
+            },
+            unregister: () => {
+                var _a;
+                (_a = binders.get(pageId)) === null || _a === void 0 ? void 0 : _a.dispose();
+                binders.delete(pageId);
+                ctx.boardGroups.delete(pageId);
+                ctx.layoutOf.delete(pageId);
+                ctx.viewOfBoard.delete(pageId);
+                specById.delete(pageId);
+                ctx.boardWidgets.delete(pageId);
+                viewOfWidget.delete(pageId);
+                viewOfWidget.set(widgetId, sourceBoardId);
+                const src = ctx.boardWidgets.get(sourceBoardId);
+                if (src && !src.some((w) => w.id === widgetId))
+                    src.splice(srcSlot < 0 ? src.length : Math.min(srcSlot, src.length), 0, spec);
+                if (containerSpec.widgets) {
+                    const i = containerSpec.widgets.findIndex((p) => p.id === pageId);
+                    if (i >= 0)
+                        containerSpec.widgets.splice(i, 1);
+                }
+                spec.x = prevXY.x;
+                spec.y = prevXY.y;
+                if (prevGrid)
+                    node.setGridItem(prevGrid);
+                if (prevActive) {
+                    ctx.activeTab.set(containerId, prevActive);
+                    containerSpec.active = prevActive;
+                    container.setMetadata('containerWidget', Object.assign(Object.assign({}, cwOf()), { active: prevActive }));
+                }
+                else
+                    ctx.activeTab.delete(containerId);
+            },
+        };
+        return [
+            new SequenceCommand('Move widget into a new tab', [
+                ...displaced,
+                new AddGroupCommand(g),
+                new RemoveFromGroupCommand(sourceBoardId, widgetId),
+                new AddToGroupCommand(pageId, widgetId),
+                new AddToGroupCommand(containerId, pageId),
+                new RegisterWidgetCommand(reg, 'register'),
+            ]),
+            ...((_s = (_r = ctx.closePageIfEmptied) === null || _r === void 0 ? void 0 : _r.call(ctx, sourceBoardId, widgetId)) !== null && _s !== void 0 ? _s : []),
+        ];
+    };
+    /** REORDER a page along its strip: the container's spec order and its saved `order` move together. */
+    const reorderTabCommands = (containerId, pageId, index) => {
+        var _a;
+        const containerSpec = specById.get(containerId);
+        const container = ctx.boardGroups.get(containerId);
+        if (!container || !(containerSpec === null || containerSpec === void 0 ? void 0 : containerSpec.widgets) || !((_a = container.members) === null || _a === void 0 ? void 0 : _a.has(pageId)))
+            return [];
+        const before = livePages(containerId).sort((a, b) => {
+            const ia = containerSpec.widgets.findIndex((p) => p.id === a);
+            const ib = containerSpec.widgets.findIndex((p) => p.id === b);
+            return (ia < 0 ? 1e9 : ia) - (ib < 0 ? 1e9 : ib);
+        });
+        const from = before.indexOf(pageId);
+        if (from < 0)
+            return [];
+        const to = Math.max(0, Math.min(index, before.length - 1));
+        if (to === from)
+            return [];
+        const after = [...before];
+        after.splice(from, 1);
+        after.splice(to, 0, pageId);
+        const apply = (order) => {
+            var _a, _b;
+            const rank = (id) => (order.indexOf(id) < 0 ? Number.MAX_SAFE_INTEGER : order.indexOf(id));
+            containerSpec.widgets.sort((p, q) => rank(p.id) - rank(q.id));
+            container.setMetadata('containerWidget', Object.assign(Object.assign({}, ((_a = container.getMetadata('containerWidget')) !== null && _a !== void 0 ? _a : {})), { order }));
+            (_b = ctx.syncTabs) === null || _b === void 0 ? void 0 : _b.call(ctx, containerId);
+        };
+        return [new RegisterWidgetCommand({ register: () => apply(after), unregister: () => apply(before) }, 'register')];
+    };
+    ctx.tabDrop = {
+        stripAt: (cx, cy) => {
+            for (const [id, el] of ctx.tabStrips) {
+                if (!ctx.boardGroups.has(id))
+                    continue;
+                const r = el.getBoundingClientRect();
+                if (r.width > 0 && cx >= r.left && cx <= r.right && cy >= r.top && cy <= r.bottom)
+                    return { containerId: id, index: indexInStrip(el, cx) };
+            }
+            return null;
+        },
+        markDrop: markTabDrop,
+        dropIntoStrip: (widgetId, containerId, index, sourceBoardId, displaced) => moveWidgetToTabCommands(widgetId, containerId, index, sourceBoardId, displaced),
+    };
     ctx.tearOutPlan = (containerId, pageId) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
@@ -761,57 +1096,105 @@ export function createDashboardHandle(ctx) {
                         new RegisterWidgetCommand(born, 'register'),
                     ]),
                 ];
-                if (remaining.length > 0)
-                    return { move, collapse: [] };
-                // The last page left: the container closes. Its registry goes FIRST
-                // so that on undo it comes back AFTER the group and its slab do.
-                let fromSlot = -1;
-                const gone = {
+                return { move, collapse: remaining.length > 0 ? [] : collapseOf(boardId) };
+            },
+            joinTargets: [...ctx.layoutOf.keys()].filter((id) => { var _a, _b; return id !== containerId && id !== pageId && ((_a = ctx.layoutOf.get(id)) !== null && _a !== void 0 ? _a : (_b = specById.get(id)) === null || _b === void 0 ? void 0 : _b.layout) === 'tabs' && !!model.getGroup(id) && !insidePage(id); }),
+            stripIndex: (targetId, cx, cy) => {
+                const strip = ctx.tabStrips.get(targetId);
+                if (!strip)
+                    return null;
+                const r = strip.getBoundingClientRect();
+                if (r.width === 0 || cx < r.left || cx > r.right || cy < r.top || cy > r.bottom)
+                    return null;
+                return indexInStrip(strip, cx);
+            },
+            dropIndex: (targetId, cx, cy) => {
+                const strip = ctx.tabStrips.get(targetId);
+                const n = liveCount(targetId);
+                if (!strip)
+                    return n;
+                const r = strip.getBoundingClientRect();
+                if (r.width === 0 || cx < r.left || cx > r.right || cy < r.top || cy > r.bottom)
+                    return n;
+                return indexInStrip(strip, cx);
+            },
+            markDrop: markTabDrop,
+            reorder: (index) => reorderTabCommands(containerId, pageId, index),
+            join: (targetId, index, boardId) => {
+                var _a;
+                const target = (_a = ctx.boardGroups.get(targetId)) !== null && _a !== void 0 ? _a : model.getGroup(targetId);
+                const targetSpec = specById.get(targetId);
+                if (!target || !targetSpec)
+                    return { move: [], collapse: [] };
+                const prevActive = ctx.activeTab.get(targetId);
+                const cwOf = (g) => { var _a; return ((_a = g.getMetadata('containerWidget')) !== null && _a !== void 0 ? _a : {}); };
+                let slot = -1;
+                const joined = {
                     register: () => {
                         var _a;
-                        const live = model.getGroup(containerId);
-                        if (!live)
-                            return;
-                        ctx.boardGroups.set(containerId, live);
-                        ctx.layoutOf.set(containerId, 'tabs');
-                        ctx.viewOfBoard.set(containerId, viewId);
-                        if (fromSpec)
-                            specById.set(containerId, fromSpec);
-                        const arr = ctx.boardWidgets.get(boardId);
-                        if (arr && fromSpec && !arr.some((w) => w.id === containerId)) {
-                            arr.splice(fromSlot < 0 ? arr.length : Math.min(fromSlot, arr.length), 0, fromSpec);
+                        viewOfWidget.set(pageId, targetId);
+                        if (fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.widgets) {
+                            const i = fromSpec.widgets.findIndex((p) => p.id === pageId);
+                            if (i >= 0) {
+                                slot = i;
+                                fromSpec.widgets.splice(i, 1);
+                            }
                         }
-                        (_a = ctx.attachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
+                        targetSpec.widgets = (_a = targetSpec.widgets) !== null && _a !== void 0 ? _a : [];
+                        if (!targetSpec.widgets.some((p) => p.id === pageId)) {
+                            targetSpec.widgets.splice(Math.max(0, Math.min(index, targetSpec.widgets.length)), 0, pageSpec);
+                        }
+                        ctx.boardWidgets.set(targetId, targetSpec.widgets);
+                        // The moved tab is the one showing, as it is in VS Code.
+                        ctx.activeTab.set(targetId, pageId);
+                        targetSpec.active = pageId;
+                        target.setMetadata('containerWidget', Object.assign(Object.assign({}, cwOf(target)), { active: pageId }));
                     },
                     unregister: () => {
-                        var _a;
-                        (_a = ctx.detachTabsContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, containerId);
-                        ctx.boardGroups.delete(containerId);
-                        ctx.layoutOf.delete(containerId);
-                        ctx.viewOfBoard.delete(containerId);
-                        specById.delete(containerId);
-                        const arr = ctx.boardWidgets.get(boardId);
-                        if (arr) {
-                            const i = arr.findIndex((w) => w.id === containerId);
-                            if (i >= 0) {
-                                fromSlot = i;
-                                arr.splice(i, 1);
-                            }
+                        viewOfWidget.set(pageId, containerId);
+                        if (targetSpec.widgets) {
+                            const i = targetSpec.widgets.findIndex((p) => p.id === pageId);
+                            if (i >= 0)
+                                targetSpec.widgets.splice(i, 1);
+                        }
+                        if ((fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.widgets) && !fromSpec.widgets.some((p) => p.id === pageId)) {
+                            fromSpec.widgets.splice(slot < 0 ? fromSpec.widgets.length : Math.min(slot, fromSpec.widgets.length), 0, pageSpec);
+                        }
+                        if (prevActive) {
+                            ctx.activeTab.set(targetId, prevActive);
+                            targetSpec.active = prevActive;
+                            target.setMetadata('containerWidget', Object.assign(Object.assign({}, cwOf(target)), { active: prevActive }));
                         }
                     },
                 };
-                return {
-                    move,
-                    collapse: [
-                        new SequenceCommand('Close empty tab container', [
-                            new RegisterWidgetCommand(gone, 'unregister'),
-                            new RemoveFromGroupCommand(boardId, containerId),
-                            new RemoveGroupCommand(containerId),
-                        ]),
-                    ],
-                };
+                const move = [
+                    new SequenceCommand('Move tab', [
+                        new RemoveFromGroupCommand(containerId, pageId),
+                        new AddToGroupCommand(targetId, pageId),
+                        new RegisterWidgetCommand(joined, 'register'),
+                    ]),
+                ];
+                return { move, collapse: remaining.length > 0 ? [] : collapseOf(boardId) };
             },
         };
+        /** A tab container nested inside the page being moved cannot be its target. */
+        function insidePage(id) {
+            let cur = model.getGroup(id);
+            for (let i = 0; cur && i < 32; i++) {
+                if (cur.id === pageId)
+                    return true;
+                cur = cur.parentGroupId ? model.getGroup(cur.parentGroupId) : undefined;
+            }
+            return false;
+        }
+        function liveCount(id) {
+            var _a, _b;
+            return [...((_b = (_a = model.getGroup(id)) === null || _a === void 0 ? void 0 : _a.members) !== null && _b !== void 0 ? _b : [])].filter((m) => !!model.getGroup(m)).length;
+        }
+        /** The last page left: the container closes (see closeContainer). */
+        function collapseOf(boardId) {
+            return closeContainer(containerId, boardId);
+        }
     };
     /** Bookkeeping closures for one widget, shared by the add and remove
      *  commands (and applied synchronously by the handle — idempotent). */
@@ -1046,6 +1429,31 @@ export function createDashboardHandle(ctx) {
             return true;
         },
         getActiveTab: (containerId) => ctx.activeTab.get(containerId),
+        moveToTab(widgetId, containerId, index) {
+            return __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c;
+                const sourceBoardId = viewOfWidget.get(widgetId);
+                if (!sourceBoardId)
+                    return false;
+                const cmds = moveWidgetToTabCommands(widgetId, containerId, index !== null && index !== void 0 ? index : Number.MAX_SAFE_INTEGER, sourceBoardId, (_b = (_a = binders.get(sourceBoardId)) === null || _a === void 0 ? void 0 : _a.planRemoval(widgetId)) !== null && _b !== void 0 ? _b : []);
+                if (cmds.length === 0)
+                    return false;
+                yield execCommand(new BatchCommand('Move widget into a new tab', cmds));
+                (_c = ctx.apiRef) === null || _c === void 0 ? void 0 : _c.renderNow();
+                reportChanged();
+                return true;
+            });
+        },
+        moveTab(containerId, pageId, index) {
+            var _a;
+            const cmds = reorderTabCommands(containerId, pageId, index);
+            if (cmds.length === 0)
+                return false;
+            void execCommand(new BatchCommand('Reorder tab', cmds));
+            (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
+            reportChanged();
+            return true;
+        },
         setSizing(mode) {
             var _a;
             for (const b of binders.values())
@@ -1301,7 +1709,7 @@ export function createDashboardHandle(ctx) {
                     ctx.renderWidget(spec, host);
             },
             remove(displaced) {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d, _e, _f, _g, _h;
                 if (spec.widgets) {
                     // A CONTAINER (review D12): its subtree, its own group, its slab in
                     // the parent board and the parent's re-pack, as ONE undoable batch.
@@ -1367,16 +1775,21 @@ export function createDashboardHandle(ctx) {
                 // the batch in reverse — re-registers the spec BEFORE the node and its
                 // membership come back and the painter is asked to paint it (D2).
                 const registry = registryOf(id, viewId, spec);
+                // …and the page it emptied, if it was one, closes with it — in which
+                // case everything rides INSIDE one sequence, or the batch could never
+                // undo (a membership command cannot undo once its group is gone).
+                const closing = (_g = (_f = ctx.closePageIfEmptied) === null || _f === void 0 ? void 0 : _f.call(ctx, viewId, id)) !== null && _g !== void 0 ? _g : [];
                 const cmds = [
                     ...survivors,
                     new RemoveFromGroupCommand(group.id, id),
                     new RemoveNodeCommand(id),
                     new RegisterWidgetCommand(registry, 'unregister'),
+                    ...closing,
                 ];
-                void execCommand(new BatchCommand('Remove widget', cmds));
+                void execCommand(closing.length > 0 ? new SequenceCommand('Remove widget', cmds) : new BatchCommand('Remove widget', cmds));
                 registry.unregister(); // now, for the caller reading the handle next
                 b.sync();
-                (_f = ctx.apiRef) === null || _f === void 0 ? void 0 : _f.renderNow();
+                (_h = ctx.apiRef) === null || _h === void 0 ? void 0 : _h.renderNow();
             },
             repaint() {
                 const host = hostOf(id);
@@ -1780,12 +2193,12 @@ export function dashboard(options) {
             }
             function bindView(v, g, viewLayout, live) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                const common = Object.assign(Object.assign(Object.assign(Object.assign({ gap, padding: gap, rtl: (_b = (_a = live === null || live === void 0 ? void 0 : live.rtl) !== null && _a !== void 0 ? _a : options.rtl) !== null && _b !== void 0 ? _b : false, fluid: mode === 'fluid', static: (_d = (_c = live === null || live === void 0 ? void 0 : live.static) !== null && _c !== void 0 ? _c : options.static) !== null && _d !== void 0 ? _d : false, dragHandle: (_f = (_e = live === null || live === void 0 ? void 0 : live.dragHandle) !== null && _e !== void 0 ? _e : options.dragHandle) !== null && _f !== void 0 ? _f : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), ((_g = options.binder) !== null && _g !== void 0 ? _g : {})), { onGesture: (e) => {
+                const common = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ gap, padding: gap, rtl: (_b = (_a = live === null || live === void 0 ? void 0 : live.rtl) !== null && _a !== void 0 ? _a : options.rtl) !== null && _b !== void 0 ? _b : false, fluid: mode === 'fluid', static: (_d = (_c = live === null || live === void 0 ? void 0 : live.static) !== null && _c !== void 0 ? _c : options.static) !== null && _d !== void 0 ? _d : false, dragHandle: (_f = (_e = live === null || live === void 0 ? void 0 : live.dragHandle) !== null && _e !== void 0 ? _e : options.dragHandle) !== null && _f !== void 0 ? _f : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), ((_g = options.binder) !== null && _g !== void 0 ? _g : {})), { onGesture: (e) => {
                         var _a, _b;
                         if (e.type === 'commit')
                             reportChanged();
                         (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    }, onSelect: (id) => { var _a; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, v.id); } }), captionHooks(v.id));
+                    }, onSelect: (id) => { var _a; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, v.id); } }), captionHooks(v.id)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, v.id, memberId)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
                 if (viewLayout === 'split') {
                     return bindDashboardSplit(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_h = v.columns) !== null && _h !== void 0 ? _h : columns, baseRowHeight: rowHeight, designHeight: viewH(v) }), (v.tree !== undefined ? { tree: v.tree } : {})));
                 }
@@ -1798,12 +2211,12 @@ export function dashboard(options) {
                 // The LIVE switches ride on the view's binder when it exists (a
                 // container bound after a setStatic/setRtl/setDragHandle must match).
                 const vb = binders.get((_a = ctx.viewOfBoard.get(w.id)) !== null && _a !== void 0 ? _a : ctx.active);
-                const inner = Object.assign(Object.assign(Object.assign({ columns: innerColumnsOf(w), gap, padding: 0, baseRowHeight: rowHeight, rtl: (_c = (_b = vb === null || vb === void 0 ? void 0 : vb.getRtl()) !== null && _b !== void 0 ? _b : options.rtl) !== null && _c !== void 0 ? _c : false, static: (_e = (_d = vb === null || vb === void 0 ? void 0 : vb.getStatic()) !== null && _d !== void 0 ? _d : options.static) !== null && _e !== void 0 ? _e : false, dragHandle: (_g = (_f = vb === null || vb === void 0 ? void 0 : vb.getDragHandle()) !== null && _f !== void 0 ? _f : options.dragHandle) !== null && _g !== void 0 ? _g : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), { onGesture: (e) => {
+                const inner = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ columns: innerColumnsOf(w), gap, padding: 0, baseRowHeight: rowHeight, rtl: (_c = (_b = vb === null || vb === void 0 ? void 0 : vb.getRtl()) !== null && _b !== void 0 ? _b : options.rtl) !== null && _c !== void 0 ? _c : false, static: (_e = (_d = vb === null || vb === void 0 ? void 0 : vb.getStatic()) !== null && _d !== void 0 ? _d : options.static) !== null && _e !== void 0 ? _e : false, dragHandle: (_g = (_f = vb === null || vb === void 0 ? void 0 : vb.getDragHandle()) !== null && _f !== void 0 ? _f : options.dragHandle) !== null && _g !== void 0 ? _g : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), { onGesture: (e) => {
                         var _a, _b;
                         if (e.type === 'commit')
                             reportChanged();
                         (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    }, onSelect: (id) => { var _a, _b; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, (_b = ctx.viewOfBoard.get(w.id)) !== null && _b !== void 0 ? _b : ctx.active); } }), captionHooks((_h = ctx.viewOfBoard.get(w.id)) !== null && _h !== void 0 ? _h : ctx.active));
+                    }, onSelect: (id) => { var _a, _b; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, (_b = ctx.viewOfBoard.get(w.id)) !== null && _b !== void 0 ? _b : ctx.active); } }), captionHooks((_h = ctx.viewOfBoard.get(w.id)) !== null && _h !== void 0 ? _h : ctx.active)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, w.id, memberId)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
                 if (((_j = ctx.layoutOf.get(w.id)) !== null && _j !== void 0 ? _j : w.layout) === 'split') {
                     // A splitter tree covering the pane; the pane's frame is the parent's
                     // slab, so no design height of its own.