@grafloria/element 0.4.30 → 0.4.32

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

@@ -156,6 +156,38 @@ export function pressOnDragHandle(sel, target, hostEl, clientX, clientY) {
 export const CAPTION_BAND = 28;
 /** A torn-out page never arrives shorter than this: a strip with no room under it is not a group. */
 export const TEAR_OUT_MIN_ROWS = 2;
+/**
+ * Steps that depend on each other's RESULT — create a group, then move a page
+ * into it, then place the group on the board; or remove a member and then the
+ * group it emptied — run as one history step. A batch checks every member's
+ * `canExecute` before running any of them and every member's `canUndo` before
+ * undoing any, and a membership command's precondition (its group exists) is
+ * exactly what a neighbouring step creates or removes. This runs the chain in
+ * order and reverses it on undo, judging nothing up front.
+ */
+export 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()) } };
+    }
+}
 /**
  * Binders on the same canvas find each other here. A WeakMap: a canvas that
  * is gone takes its (empty) peer set with it — the strong Map it replaced kept
@@ -1257,6 +1289,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         return false;
     };
     let slabGesture = null;
+    /** The slab gesture as it is NOW — read through a call so a guard's narrowing does not stick. */
+    const currentSlab = () => slabGesture;
     /** The PARENT running a resize of OUR section from a press this tool claimed. */
     let forwardSlab = null;
     const frameOfGroup = (grp) => ({ x: grp.position.x, y: grp.position.y, width: sizeOf(grp).width, height: sizeOf(grp).height });
@@ -1281,10 +1315,48 @@ export function bindDashboardGrid(api, group, options = {}) {
                 dx: edges.e ? grp.position.x + sizeOf(grp).width - ev.world.x : edges.w ? grp.position.x - ev.world.x : 0,
                 dy: edges.s ? grp.position.y + sizeOf(grp).height - ev.world.y : edges.n ? grp.position.y - ev.world.y : 0,
             },
+            move: false,
         };
         capturePointer(slabGesture.pointerId);
         api.container.style.cursor = cursorFor(edges);
     };
+    /**
+     * MOVE a section by its caption band or its strip's empty space. A section
+     * is a LOCKED tile so that nothing pushes it; for the gesture's duration the
+     * tile is unlocked (it is the one moving), other sections stay locked and
+     * still refuse it (E4b), and every unlocked tile gets pushed the way a
+     * widget pushes it. Its children ride along: the frame moves, the nested
+     * board re-projects.
+     */
+    const beginSlabMove = (id, ev) => {
+        const grp = diagram.getGroup(id);
+        const it = engine.getItem(id);
+        if (!grp || !it || gesture || slabGesture || isStatic)
+            return;
+        engine.beginGesture();
+        const snap = snapshotAll();
+        it.locked = false;
+        slabGesture = {
+            id,
+            edges: NO_EDGES,
+            pointerId: typeof PointerEvent !== 'undefined' && ev.source instanceof PointerEvent ? ev.source.pointerId : null,
+            started: false,
+            downScreen: { x: ev.screen.x, y: ev.screen.y },
+            startCells: snap.cells,
+            startGeom: snap.geoms,
+            cellBefore: { x: it.x, y: it.y, w: it.w, h: it.h },
+            frameBefore: frameOfGroup(grp),
+            grab: { dx: grp.position.x - ev.world.x, dy: grp.position.y - ev.world.y },
+            move: true,
+        };
+        capturePointer(slabGesture.pointerId);
+        api.container.style.cursor = 'grabbing';
+    };
+    const relockSlab = (id) => {
+        const it = engine.getItem(id);
+        if (it)
+            it.locked = true;
+    };
     const slabMove = (ev) => {
         const g = slabGesture;
         if (!g)
@@ -1300,6 +1372,14 @@ export function bindDashboardGrid(api, group, options = {}) {
             return;
         const f = frame();
         const gg = geom();
+        if (g.move) {
+            // The section's top-left follows the pointer by the offset it was grabbed at.
+            const cell = pointToCell(ev.world.x + g.grab.dx, ev.world.y + g.grab.dy, f, gg, rows(), it.w);
+            if ((cell.x !== it.x || cell.y !== it.y) && engine.moveCheck(g.id, cell.x, cell.y, { gate: false }).changed)
+                project();
+            syncPlaceholder();
+            return;
+        }
         const cu = columnUnitFor(gg, f.width);
         const rh = rowHeightFor(gg, rows());
         // The grid line nearest the pointer, in cells (mirrored on RTL).
@@ -1346,6 +1426,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         slabGesture = null;
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
+        if (g.move)
+            relockSlab(g.id);
         if (!g.started) {
             engine.endGesture();
             return;
@@ -1359,11 +1441,11 @@ export function bindDashboardGrid(api, group, options = {}) {
         if (it && grp && (b.x !== it.x || b.y !== it.y || b.w !== it.w || b.h !== it.h)) {
             commands.push(new SetGroupCellCommand(g.id, b, { x: it.x, y: it.y, w: it.w, h: it.h }, g.frameBefore, frameOfGroup(grp)));
         }
-        const changed = execute('Resize section', commands);
+        const changed = execute(g.move ? 'Move section' : 'Resize section', commands);
         disarmGlideSoon();
         syncHandles();
         api.renderNow();
-        (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'commit', kind: 'resize', nodeId: g.id, changed });
+        (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'commit', kind: g.move ? 'move' : 'resize', nodeId: g.id, changed });
     };
     const slabCancel = () => {
         var _a;
@@ -1373,6 +1455,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         slabGesture = null;
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
+        if (g.move)
+            relockSlab(g.id);
         if (g.started)
             engine.cancelGesture();
         else
@@ -1487,9 +1571,13 @@ export function bindDashboardGrid(api, group, options = {}) {
         (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed });
     };
     const cancelActiveGesture = (notify = true) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
+        if (gesture === null || gesture === void 0 ? void 0 : gesture.strip) {
+            (_a = options.tabDrop) === null || _a === void 0 ? void 0 : _a.markDrop(null, null);
+            gesture.strip = null;
+        }
         if (forwardSlab) {
-            (_a = forwardSlab.slabCancel) === null || _a === void 0 ? void 0 : _a.call(forwardSlab);
+            (_b = forwardSlab.slabCancel) === null || _b === void 0 ? void 0 : _b.call(forwardSlab);
             forwardSlab = null;
         }
         if (slabGesture)
@@ -1514,7 +1602,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 engine.endGesture();
                 const items = [];
                 for (const [id, c] of g.startCells) {
-                    const lockedNode = ((_c = (_b = diagram.getNode(id)) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.locked) === true;
+                    const lockedNode = ((_d = (_c = diagram.getNode(id)) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.locked) === true;
                     items.push(Object.assign(Object.assign({ id }, c), { locked: lockedNode || isGroupMember(id) }));
                 }
                 engine = engineFrom(items);
@@ -1562,7 +1650,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         enforceBoardHeight();
         api.renderNow();
         if (notify) {
-            (_d = options.onGesture) === null || _d === void 0 ? void 0 : _d.call(options, { type: 'cancel', kind: g.kind, nodeId: g.id, changed: false });
+            (_e = options.onGesture) === null || _e === void 0 ? void 0 : _e.call(options, { type: 'cancel', kind: g.kind, nodeId: g.id, changed: false });
         }
     };
     /** Centre a w×h-span tile's top-left under the cursor, in world px. */
@@ -1577,7 +1665,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         };
     };
     const onToolMove = (ev) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const g = gesture;
         if (!g || g.kind === 'palette')
             return;
@@ -1594,6 +1682,36 @@ export function bindDashboardGrid(api, group, options = {}) {
             ghostStyleFastPath(g, desired);
             g.lastWorld = { x: ev.world.x, y: ev.world.y };
             g.lastScreen = { x: ev.screen.x, y: ev.screen.y };
+            // A TAB STRIP under the pointer wins over every board: the widget will
+            // become a new tab there, so it leaves this board (survivors settle
+            // home) and the strip marks the slot.
+            if (options.tabDrop && !isStatic) {
+                const crect = api.container.getBoundingClientRect();
+                const hitStrip = options.tabDrop.stripAt(crect.left + ev.screen.x, crect.top + ev.screen.y);
+                if (hitStrip) {
+                    if (g.leg) {
+                        g.leg.adopted.abort();
+                        g.leg = null;
+                    }
+                    if (!g.removedFromBoard) {
+                        g.removedFromBoard = true;
+                        engine.remove(g.id);
+                        project();
+                    }
+                    (_a = hostOf(g.id)) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-out');
+                    if (!g.strip || g.strip.containerId !== hitStrip.containerId || g.strip.index !== hitStrip.index) {
+                        options.tabDrop.markDrop(hitStrip.containerId, hitStrip.index);
+                    }
+                    g.strip = hitStrip;
+                    syncPlaceholder();
+                    api.render();
+                    return;
+                }
+                if (g.strip) {
+                    options.tabDrop.markDrop(null, null);
+                    g.strip = null;
+                }
+            }
             // Deepest board under the pointer wins: the nested KPI strip beats the
             // tab that contains it; a foreign board beats "outside". Strict frames
             // first; the one-row grace band below each board (gridstack's extra
@@ -1633,13 +1751,13 @@ export function bindDashboardGrid(api, group, options = {}) {
                         height: g.node.size.height,
                     });
                     if (adopted) {
-                        (_a = hostOf(g.id)) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-out');
+                        (_b = hostOf(g.id)) === null || _b === void 0 ? void 0 : _b.classList.remove('axdb-out');
                         g.leg = { peer, adopted };
                         g.leg.adopted.move(ev.world);
                     }
                     else {
                         // Bounded/full board refused the adoption: dim = will snap home.
-                        (_b = hostOf(g.id)) === null || _b === void 0 ? void 0 : _b.classList.add('axdb-out');
+                        (_c = hostOf(g.id)) === null || _c === void 0 ? void 0 : _c.classList.add('axdb-out');
                     }
                 }
             }
@@ -1651,7 +1769,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 }
                 if (g.removedFromBoard) {
                     g.removedFromBoard = false;
-                    (_c = hostOf(g.id)) === null || _c === void 0 ? void 0 : _c.classList.remove('axdb-out');
+                    (_d = hostOf(g.id)) === null || _d === void 0 ? void 0 : _d.classList.remove('axdb-out');
                     const cell = pointToCell(desired.x, desired.y, frame(), geom(), rows(), g.spans.w);
                     // Re-enter at the bottom edge (collision-free), then take the cursor
                     // cell GATELESSLY — a first placement skips the anti-jitter gate.
@@ -1660,7 +1778,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                     project();
                 }
                 else {
-                    const spanW = (_e = (_d = engine.getItem(g.id)) === null || _d === void 0 ? void 0 : _d.w) !== null && _e !== void 0 ? _e : g.spans.w;
+                    const spanW = (_f = (_e = engine.getItem(g.id)) === null || _e === void 0 ? void 0 : _e.w) !== null && _f !== void 0 ? _f : g.spans.w;
                     const cell = pointToCell(desired.x, desired.y, frame(), geom(), rows(), spanW);
                     if (engine.moveCheck(g.id, cell.x, cell.y).changed)
                         project();
@@ -1675,7 +1793,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 if (!g.removedFromBoard) {
                     g.removedFromBoard = true;
                     engine.remove(g.id); // survivors settle home; cells minted nowhere
-                    (_f = hostOf(g.id)) === null || _f === void 0 ? void 0 : _f.classList.add('axdb-out');
+                    (_g = hostOf(g.id)) === null || _g === void 0 ? void 0 : _g.classList.add('axdb-out');
                     project();
                 }
             }
@@ -1785,7 +1903,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                     maxRows = n;
                     engine.maxRows = n;
                 };
-                const slabRows = (_h = (_g = parent.memberCell(group.id)) === null || _g === void 0 ? void 0 : _g.h) !== null && _h !== void 0 ? _h : maxRows;
+                const slabRows = (_j = (_h = parent.memberCell(group.id)) === null || _h === void 0 ? void 0 : _h.h) !== null && _j !== void 0 ? _j : maxRows;
                 const inner = maxRows;
                 const rhNow = rowHeightFor(geom(), rows());
                 const rowPx = rhNow + gap;
@@ -1949,7 +2067,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         const anchorBottom = liveRect ? liveRect.y + liveRect.height : bottom;
         const px = E.w ? anchorRight - w : anchorLeft;
         const py = E.n ? anchorBottom - h : anchorTop;
-        g.node.setSize(w, h, (_j = g.node.size.depth) !== null && _j !== void 0 ? _j : 0);
+        g.node.setSize(w, h, (_k = g.node.size.depth) !== null && _k !== void 0 ? _k : 0);
         g.node.setPosition(px, py);
         ghostStyleFastPath(g, { x: px, y: py, width: w, height: h });
         const spanF = bound() !== undefined ? frame() : f;
@@ -1990,7 +2108,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         syncPlaceholder();
     };
     const onToolUp = () => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const g = gesture;
         if (!g || g.kind === 'palette')
             return;
@@ -1998,6 +2116,36 @@ export function bindDashboardGrid(api, group, options = {}) {
             gesture = null; // a plain click — the page's own click-to-focus handles it
             return;
         }
+        if (g.strip && options.tabDrop) {
+            // -- INTO A STRIP: the widget becomes a new tab of that container ------
+            const target = g.strip;
+            g.strip = null;
+            options.tabDrop.markDrop(null, null);
+            if (g.leg) {
+                g.leg.adopted.abort();
+                g.leg = null;
+            }
+            const displaced = buildCommitCommands(deltasSince(g.startCells, g.startGeom, g.id));
+            const snap = g.startGeom.get(g.id);
+            if (snap) {
+                g.node.setPosition(snap.pos.x, snap.pos.y);
+                g.node.setSize(snap.size.width, snap.size.height, (_a = snap.size.depth) !== null && _a !== void 0 ? _a : 0);
+            }
+            const cmds = options.tabDrop.dropIntoStrip(g.id, target.containerId, target.index, group.id, displaced);
+            if (cmds.length === 0) {
+                cancelActiveGesture();
+                return;
+            }
+            engine.endGesture();
+            cleanupGestureVisuals(g);
+            gesture = null;
+            execute('Move widget into a new tab', cmds);
+            enforceBoardHeight();
+            persistLayouts();
+            api.renderNow();
+            (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed: true });
+            return;
+        }
         if (g.leg) {
             // -- CROSS-CONTAINER COMMIT: one batch across both boards -----------
             const fin = g.leg.adopted.finalize();
@@ -2040,21 +2188,25 @@ export function bindDashboardGrid(api, group, options = {}) {
                         isGroup: false,
                         cellBefore: before !== null && before !== void 0 ? before : fin.cell,
                         cellAfter: fin.cell,
-                        posBefore: (_a = geomBefore === null || geomBefore === void 0 ? void 0 : geomBefore.pos) !== null && _a !== void 0 ? _a : { x: fin.rect.x, y: fin.rect.y },
+                        posBefore: (_c = geomBefore === null || geomBefore === void 0 ? void 0 : geomBefore.pos) !== null && _c !== void 0 ? _c : { x: fin.rect.x, y: fin.rect.y },
                         posAfter: { x: fin.rect.x, y: fin.rect.y },
-                        sizeBefore: (_b = geomBefore === null || geomBefore === void 0 ? void 0 : geomBefore.size) !== null && _b !== void 0 ? _b : { width: fin.rect.width, height: fin.rect.height },
+                        sizeBefore: (_d = geomBefore === null || geomBefore === void 0 ? void 0 : geomBefore.size) !== null && _d !== void 0 ? _d : { width: fin.rect.width, height: fin.rect.height },
                         sizeAfter: { width: fin.rect.width, height: fin.rect.height },
                     },
                 ]),
             ];
-            execute('Move widget', crossing);
+            // …and whatever follows a member out of this board: an emptied page
+            // closes — in which case the membership commands ride INSIDE one
+            // sequence with it, or the batch could never undo (its group is gone).
+            const leaving = (_f = (_e = options.onMemberLeaving) === null || _e === void 0 ? void 0 : _e.call(options, g.id)) !== null && _f !== void 0 ? _f : [];
+            execute('Move widget', leaving.length > 0 ? [new SequenceCommand('Move widget', [...crossing, ...leaving])] : crossing);
             engine.endGesture();
             cleanupGestureVisuals(g);
             gesture = null;
             enforceBoardHeight();
             persistLayouts();
             api.renderNow();
-            (_c = options.onGesture) === null || _c === void 0 ? void 0 : _c.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed: true });
+            (_g = options.onGesture) === null || _g === void 0 ? void 0 : _g.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed: true });
             return;
         }
         if (g.removedFromBoard && dragOut === 'cancel') {
@@ -2085,15 +2237,15 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // Park the node on its start rect so the page's RemoveNodeCommand
                 // captures sane geometry for undo.
                 g.node.setPosition(snap.pos.x, snap.pos.y);
-                g.node.setSize(snap.size.width, snap.size.height, (_d = snap.size.depth) !== null && _d !== void 0 ? _d : 0);
+                g.node.setSize(snap.size.width, snap.size.height, (_h = snap.size.depth) !== null && _h !== void 0 ? _h : 0);
             }
             engine.endGesture();
             cleanupGestureVisuals(g);
             gesture = null;
             enforceBoardHeight();
             api.renderNow();
-            void ((_e = options.onRemoveRequest) === null || _e === void 0 ? void 0 : _e.call(options, g.id, displaced));
-            (_f = options.onGesture) === null || _f === void 0 ? void 0 : _f.call(options, { type: 'remove', kind: g.kind, nodeId: g.id, changed: true });
+            void ((_j = options.onRemoveRequest) === null || _j === void 0 ? void 0 : _j.call(options, g.id, displaced));
+            (_k = options.onGesture) === null || _k === void 0 ? void 0 : _k.call(options, { type: 'remove', kind: g.kind, nodeId: g.id, changed: true });
             return;
         }
         commitGesture(g);
@@ -2314,8 +2466,29 @@ export function bindDashboardGrid(api, group, options = {}) {
                     project();
                 syncPlaceholder();
             },
+            leave: () => {
+                if (!engine.getItem(node.id))
+                    return;
+                engine.remove(node.id); // displaced tiles come home (gesture memory)
+                lastWant = null;
+                project();
+                syncPlaceholder();
+            },
+            enter: (w) => {
+                if (!engine.getItem(node.id) && !engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: hNatural }))
+                    return;
+                const item = engine.getItem(node.id);
+                if (!item)
+                    return;
+                const cell = wantedCell(w.x, w.y, item.w, opts.fit === 'shrink' ? hNatural : item.h);
+                lastWant = cell;
+                place(cell, item.w);
+                project();
+                syncPlaceholder();
+            },
             abort: () => {
-                engine.remove(node.id);
+                if (engine.getItem(node.id))
+                    engine.remove(node.id);
                 engine.cancelGesture(); // pre-entry layout, memory cleared
                 adoptedGhostId = null;
                 disarmGlideSoon();
@@ -2367,6 +2540,56 @@ export function bindDashboardGrid(api, group, options = {}) {
             beginSlabResize(id, edges, ev);
             return (slabGesture === null || slabGesture === void 0 ? void 0 : slabGesture.id) === id;
         },
+        beginSlabMove: (id, ev) => {
+            if (isStatic)
+                return false;
+            beginSlabMove(id, ev);
+            return (slabGesture === null || slabGesture === void 0 ? void 0 : slabGesture.id) === id;
+        },
+        dragMember: (id, ev) => {
+            var _a;
+            if (isStatic || disposed || !engine.getItem(id) || gesture || slabGesture)
+                return false;
+            const toTool = (e) => {
+                var _a;
+                const rect = api.container.getBoundingClientRect();
+                const world = ((_a = api.viewport) === null || _a === void 0 ? void 0 : _a.clientToWorld) ? api.viewport.clientToWorld(e.clientX, e.clientY, rect) : { x: e.clientX - rect.left, y: e.clientY - rect.top };
+                return { world, screen: { x: e.clientX - rect.left, y: e.clientY - rect.top }, source: e };
+            };
+            beginSlabMove(id, toTool(ev));
+            if (((_a = currentSlab()) === null || _a === void 0 ? void 0 : _a.id) !== id)
+                return false;
+            const detachAll = () => {
+                window.removeEventListener('pointermove', onMove, true);
+                window.removeEventListener('pointerup', onUp, true);
+                window.removeEventListener('pointercancel', onCancel, true);
+                window.removeEventListener('keydown', onKey, true);
+            };
+            const onMove = (e) => {
+                var _a;
+                if (disposed || ((_a = currentSlab()) === null || _a === void 0 ? void 0 : _a.id) !== id)
+                    return detachAll();
+                slabMove(toTool(e));
+                api.render();
+            };
+            const onUp = () => {
+                detachAll();
+                slabUp();
+            };
+            const onCancel = () => {
+                detachAll();
+                slabCancel();
+            };
+            const onKey = (e) => {
+                if (e.key === 'Escape')
+                    onCancel();
+            };
+            window.addEventListener('pointermove', onMove, true);
+            window.addEventListener('pointerup', onUp, true);
+            window.addEventListener('pointercancel', onCancel, true);
+            window.addEventListener('keydown', onKey, true);
+            return true;
+        },
         slabMove: (ev) => slabMove(ev),
         slabUp: () => slabUp(),
         slabCancel: () => slabCancel(),
@@ -2473,7 +2696,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             return insideMemberGroupFrame(ev.world.x, ev.world.y) || worldInsideBoard(ev.world.x, ev.world.y);
         },
         onPointerDown(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
             if (gesture)
                 return; // mid-palette
             const target = ((_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) !== null && _b !== void 0 ? _b : null);
@@ -2511,6 +2734,10 @@ export function bindDashboardGrid(api, group, options = {}) {
                         : slabEdgesNear(grp, ev.world.x, ev.world.y);
                     if (anyEdge(edges))
                         beginSlabResize(slabId, edges, ev);
+                    // The caption band is the section's handle: pressed and travelled,
+                    // it moves the whole section (its inner empty space only selects).
+                    else if (ownCaption)
+                        beginSlabMove(slabId, ev);
                     return;
                 }
                 // OUR OWN empty band, and we are a section of a parent board: the
@@ -2527,12 +2754,14 @@ export function bindDashboardGrid(api, group, options = {}) {
                             : slabEdgesNear(group, ev.world.x, ev.world.y);
                         if (anyEdge(edges) && parent.beginSlabResize(group.id, edges, ev))
                             forwardSlab = parent;
+                        else if (!anyEdge(edges) && captionId === group.id && ((_r = parent.beginSlabMove) === null || _r === void 0 ? void 0 : _r.call(parent, group.id, ev)))
+                            forwardSlab = parent;
                     }
                     return;
                 }
                 // The board's own empty area: a void click. Nothing to drag, and the
                 // selection clears exactly as a click outside any board would.
-                (_s = (_r = diagram).clearSelection) === null || _s === void 0 ? void 0 : _s.call(_r);
+                (_t = (_s = diagram).clearSelection) === null || _t === void 0 ? void 0 : _t.call(_s);
                 selectWidget(undefined);
                 api.render();
                 return;
@@ -2541,17 +2770,17 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (!node)
                 return;
             selectWidget(node.id); // a press selects, whether or not it starts a gesture
-            if (((_t = node.state) === null || _t === void 0 ? void 0 : _t.locked) === true)
+            if (((_u = node.state) === null || _u === void 0 ? void 0 : _u.locked) === true)
                 return; // pinned: refuse; click still focuses
             if (isStatic)
                 return; // a static board: claimed and deadened, click still focuses
             // Which edges did the press take? The corner handle names its own (s+e,
             // or s+w on RTL); a bare press within EDGE_GRIP of the tile's border
             // takes that border; anywhere else is a move. A grip press is a move.
-            const onHandle = !!((_u = target === null || target === void 0 ? void 0 : target.closest) === null || _u === void 0 ? void 0 : _u.call(target, '.axdb-rs'));
+            const onHandle = !!((_v = target === null || target === void 0 ? void 0 : target.closest) === null || _v === void 0 ? void 0 : _v.call(target, '.axdb-rs'));
             const hostEl = hostOf(node.id);
-            const resizable = ((_v = node.getMetadata) === null || _v === void 0 ? void 0 : _v.call(node, 'widgetResizable')) !== false;
-            const movable = ((_w = node.getMetadata) === null || _w === void 0 ? void 0 : _w.call(node, 'widgetMovable')) !== false;
+            const resizable = ((_w = node.getMetadata) === null || _w === void 0 ? void 0 : _w.call(node, 'widgetResizable')) !== false;
+            const movable = ((_x = node.getMetadata) === null || _x === void 0 ? void 0 : _x.call(node, 'widgetMovable')) !== false;
             // `ev.screen` is ELEMENT-LOCAL px; host rects are in client px. Compare
             // like with like — the source event's clientX/Y when there is one, else
             // the container's origin plus the local offset.
@@ -2599,9 +2828,10 @@ export function bindDashboardGrid(api, group, options = {}) {
                 startSize: { width: node.size.width, height: node.size.height },
                 startPos: { x: node.position.x, y: node.position.y },
                 edges,
-                spans: { w: (_x = it === null || it === void 0 ? void 0 : it.w) !== null && _x !== void 0 ? _x : 1, h: (_y = it === null || it === void 0 ? void 0 : it.h) !== null && _y !== void 0 ? _y : 1 },
+                spans: { w: (_y = it === null || it === void 0 ? void 0 : it.w) !== null && _y !== void 0 ? _y : 1, h: (_z = it === null || it === void 0 ? void 0 : it.h) !== null && _z !== void 0 ? _z : 1 },
                 removedFromBoard: false,
                 leg: null,
+                strip: null,
                 lastWorld: null,
                 lastScreen: null,
                 hostEl: null,
@@ -2920,6 +3150,48 @@ export function bindDashboardGrid(api, group, options = {}) {
         chip.className = 'axdb-drag-chip axdb-tab-chip';
         chip.textContent = plan.label;
         doc.body.appendChild(chip);
+        // Over ANOTHER tab container the page joins it instead of taking a cell:
+        // the tile leaves the board (its displaced tiles come home), the target's
+        // frame lights up and its strip marks where the tab will go.
+        const layer = htmlLayer();
+        const targets = plan.joinTargets
+            .map((id) => diagram.getGroup(id))
+            .filter((g) => !!g && g.id !== fromGroupId);
+        const targetAt = (wx, wy) => { var _a; return (_a = targets.find((t) => worldInsideGroup(t, wx, wy))) !== null && _a !== void 0 ? _a : null; };
+        let over = null;
+        let joinEl = null;
+        const showJoin = (g) => {
+            if (!layer || g.id === fromGroupId)
+                return; // reordering along its own strip: the mark is enough
+            if (!joinEl) {
+                joinEl = doc.createElement('div');
+                joinEl.className = 'axdb-join';
+                layer.prepend(joinEl);
+            }
+            const sz = sizeOf(g);
+            joinEl.style.left = `${g.position.x}px`;
+            joinEl.style.top = `${g.position.y}px`;
+            joinEl.style.width = `${sz.width}px`;
+            joinEl.style.height = `${sz.height}px`;
+        };
+        const hideJoin = () => {
+            joinEl === null || joinEl === void 0 ? void 0 : joinEl.remove();
+            joinEl = null;
+            plan.markDrop(null, null);
+        };
+        const setOver = (g, world) => {
+            if (g === over)
+                return;
+            over = g;
+            if (g) {
+                leg.leave();
+                showJoin(g);
+            }
+            else {
+                hideJoin();
+                leg.enter(world);
+            }
+        };
         const moveChip = (cx, cy) => {
             chip.style.left = `${cx + 6}px`;
             chip.style.top = `${cy + 6}px`;
@@ -2934,6 +3206,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             window.removeEventListener('pointercancel', onCancel, true);
             window.removeEventListener('keydown', onKey, true);
         };
+        let homeIndex = null;
         const onMove = (e) => {
             if (disposed)
                 return detach();
@@ -2941,27 +3214,60 @@ export function bindDashboardGrid(api, group, options = {}) {
             moveChip(e.clientX, e.clientY);
             const world = toWorld(e.clientX, e.clientY);
             const home = worldInsideGroup(from, world.x, world.y);
-            // Over its own container it goes home: a tab dragged around its own
-            // strip must not tear itself out.
-            chip.classList.toggle('axdb-out', home || !worldInsideBoardGrace(world.x, world.y));
-            if (!home)
+            // Over its OWN strip the tab reorders: the strip marks the slot and the
+            // tile leaves the board. Over its own body it goes home (a cancel).
+            homeIndex = home ? plan.stripIndex(fromGroupId, e.clientX, e.clientY) : null;
+            const target = home ? null : targetAt(world.x, world.y);
+            setOver(target !== null && target !== void 0 ? target : (homeIndex !== null ? from : null), world);
+            chip.classList.toggle('axdb-out', (home && homeIndex === null) || (!target && !home && !worldInsideBoardGrace(world.x, world.y)));
+            if (target)
+                plan.markDrop(target.id, plan.dropIndex(target.id, e.clientX, e.clientY));
+            else if (homeIndex !== null)
+                plan.markDrop(fromGroupId, homeIndex);
+            else if (!home)
                 leg.move(world);
             api.render();
         };
         const finish = (commit) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             detach();
             chip.remove();
+            hideJoin();
             tearing = null;
             if (disposed)
                 return;
             const world = toWorld(last.x, last.y);
             const home = worldInsideGroup(from, world.x, world.y);
+            if (commit && home && homeIndex !== null) {
+                // REORDER along its own strip.
+                leg.abort();
+                const cmds = plan.reorder(homeIndex);
+                const changed = cmds.length > 0 ? execute('Reorder tab', cmds) : false;
+                disarmGlideSoon();
+                api.renderNow();
+                (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: changed ? 'commit' : 'cancel', kind: 'move', nodeId: pageId, changed });
+                return;
+            }
+            const target = commit && !home ? targetAt(world.x, world.y) : null;
+            if (target) {
+                // JOIN: no cell on this board — the leg is abandoned (its displaced
+                // tiles are already home) and the page becomes the target's tab.
+                const index = plan.dropIndex(target.id, last.x, last.y);
+                leg.abort();
+                const planned = plan.join(target.id, index, group.id);
+                const changed = execute('Move tab', [...planned.move, ...planned.collapse]);
+                disarmGlideSoon();
+                enforceBoardHeight();
+                persistLayouts();
+                api.renderNow();
+                (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
+                return;
+            }
             if (!commit || home || !worldInsideBoardGrace(world.x, world.y)) {
                 leg.abort();
                 disarmGlideSoon();
                 api.renderNow();
-                (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'cancel', kind: 'move', nodeId: pageId, changed: false });
+                (_c = options.onGesture) === null || _c === void 0 ? void 0 : _c.call(options, { type: 'cancel', kind: 'move', nodeId: pageId, changed: false });
                 return;
             }
             const fin = leg.finalize();
@@ -2972,15 +3278,13 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
             const planned = plan.commands(fin.cell, fin.rect, group.id);
             // The container the page left may have been holding its last page: it
-            // goes too, and the tiles around its slab settle the way a removal
-            // settles them (VS Code closes a group whose last editor leaves).
-            const collapse = planned.collapse.length > 0 ? [...planRemovalOf(fromGroupId), ...planned.collapse] : [];
-            const changed = execute('Move tab out', [...fin.commands, ...planned.move, ...collapse]);
+            // goes too (the plan carries the removal's settle).
+            const changed = execute('Move tab out', [...fin.commands, ...planned.move, ...planned.collapse]);
             disarmGlideSoon();
             enforceBoardHeight();
             persistLayouts();
             api.renderNow();
-            (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
+            (_d = options.onGesture) === null || _d === void 0 ? void 0 : _d.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
         };
         const onUp = () => finish(true);
         const onCancel = () => finish(false);
@@ -3023,6 +3327,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             spans: { w: Math.max(1, spec.w), h: Math.max(1, spec.h) },
             removedFromBoard: true,
             leg: null,
+            strip: null,
             lastWorld: null,
             lastScreen: null,
             hostEl: null,
@@ -3136,7 +3441,15 @@ export function bindDashboardGrid(api, group, options = {}) {
             return false;
         engine.beginGesture();
         const snap = snapshotAll();
-        if (!op()) {
+        // A section is a LOCKED tile; for ITS OWN move it is the one moving.
+        const self = engine.getItem(id);
+        const wasLocked = !!(self === null || self === void 0 ? void 0 : self.locked);
+        if (self && isGroupMember(id))
+            self.locked = false;
+        const ok = op();
+        if (self && isGroupMember(id))
+            self.locked = wasLocked;
+        if (!ok) {
             engine.endGesture();
             return false;
         }