@grafloria/element 0.4.55 → 0.4.57

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

@@ -56,13 +56,16 @@ import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridI
 import { ensureDashboardKitStyles } from './styles.js';
 import { captionOfGroup, captionPassThrough, sectionCaptionReserve } from './caption.js';
 import { TAB_STRIP_HEIGHT } from './tabs.js';
-import { BESIDE_BAND, resolve as resolveZone, resolveTabZone } from './zones.js';
+import { BESIDE_BAND, resolve as resolveZone } from './zones.js';
 import { SequenceCommand, SetGroupCellCommand, tileCommands } from './commit.js';
+import { EDGE_GRACE } from './board-ctx.js';
 import { createProjection } from './project.js';
 import { cursorFor, edgesNear, NO_EDGES, anyEdge } from './edges.js';
 import { DRAG_HANDLE_CLASS, dragHandleSelector, gripHostOf, normalizeDragHandle, pressOnDragHandle, sameDragHandle } from './grip.js';
 import { createChrome, edgeGripFor, isTabsGroup } from './chrome.js';
 import { createKeyboard, describeCell, liveRegionFor } from './keyboard.js';
+import { createTearOut, TEAR_OUT_MIN_ROWS } from './tear-out.js';
+export { TEAR_OUT_MIN_ROWS } from './tear-out.js';
 export { EDGE_GRIP, anyEdge } from './edges.js';
 export { GRIP_CLASS, DRAG_HANDLE_CLASS, CAPTION_BAND, normalizeDragHandle, dragHandleSelector, gripOf, syncGrip, gripHostOf, pressOnDragHandle } from './grip.js';
 export { SequenceCommand, SetGroupCellCommand } from './commit.js';
@@ -101,8 +104,6 @@ export function ownsPress(container, diagram, ev, hit) {
     }
     return true;
 }
-/** 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;
 /**
  * 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
@@ -148,6 +149,8 @@ export function registerBoardPeer(container, peer) {
     };
 }
 const DRAG_THRESHOLD = 4;
+/** The node a gesture holds — node-only paths (the pixel ghost, a resize, a strip drop, a removal) ask through this. */
+const nodeOf = (g) => g.entity;
 let binderSeq = 0;
 export function bindDashboardGrid(api, group, options = {}) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
@@ -487,7 +490,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         hostOf,
         memberEntity,
         sizeOf,
-        ghostId: () => adoptedGhostId !== null && adoptedGhostId !== void 0 ? adoptedGhostId : ((gesture === null || gesture === void 0 ? void 0 : gesture.started) ? gesture.id : null),
+        // A NODE ghost follows the hand by pixels and gets the placeholder; a GROUP ghost (a container adopted here) is projected to its cell like any tile, carried.
+        ghostId: () => (adoptedGhostId && !diagram.getGroup(adoptedGhostId) ? adoptedGhostId : (gesture === null || gesture === void 0 ? void 0 : gesture.started) && gesture.subject === 'node' ? gesture.id : null),
         write: (fn) => {
             writing = true;
             try {
@@ -818,7 +822,6 @@ export function bindDashboardGrid(api, group, options = {}) {
     /** Small overshoots CLAMP onto the board instead of counting as off-board —
      *  the plan prototype cannot leave its board at all (cells clamp at the
      *  edges), so a 60px slip past the frame must not dim or delete. */
-    const EDGE_GRACE = 60;
     /** A point inside a member group's own frame (its strip and its pages). */
     const worldInsideGroup = (g, x, y) => {
         const s = sizeOf(g);
@@ -947,6 +950,12 @@ export function bindDashboardGrid(api, group, options = {}) {
             g.leg.adopted.abort();
             g.leg = null;
         }
+        if (g.subject === 'group' && !g.removedFromBoard && !beside) {
+            // A group ghost pushed its way here with intent: the containers it moved
+            // come home (the engine's memory) before the beside is measured on them.
+            engine.remove(g.id);
+            g.removedFromBoard = true;
+        }
         if (g.removedFromBoard) {
             g.removedFromBoard = false;
             setDim(g, false);
@@ -968,8 +977,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 gesture as it is NOW, for the same reason. */
+    const currentGesture = () => gesture;
     /** 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 });
@@ -1017,25 +1026,45 @@ export function bindDashboardGrid(api, group, options = {}) {
         const it = engine.getItem(id);
         if (!grp || !it || gesture || slabGesture || isStatic)
             return;
-        engine.beginGesture();
-        const snap = snapshotAll();
-        slabGesture = {
+        // A GROUP MOVE IS A GESTURE OF THE ONE MACHINE (tile first, 4b-ii): the
+        // same threshold, snapshot, zone walk, legs, beside and commit a widget
+        // gets — the group being the subject. The frame follows its cell.
+        //
+        // THE PRESS ARMS NOTHING. `beginGestureVisuals` arms the glide when the
+        // threshold is crossed, as it does for a widget: arming it here left a
+        // plain CLICK on a caption band gliding for 400 ms, and everything the
+        // page did next — a caption change, a layout switch — animated instead of
+        // landing (the gallery's fluid-board: "and the rows are back" measured a
+        // tile still travelling).
+        gesture = {
+            kind: 'move',
             id,
-            edges: NO_EDGES,
+            subject: 'group',
+            entity: grp,
             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,
+            downClient: { x: ev.screen.x, y: ev.screen.y },
+            downWorld: { x: ev.world.x, y: ev.world.y },
+            grab: { dx: ev.world.x - grp.position.x, dy: ev.world.y - grp.position.y },
+            startCells: new Map(),
+            startGeom: new Map(),
+            startSize: { width: sizeOf(grp).width, height: sizeOf(grp).height },
+            startPos: { x: grp.position.x, y: grp.position.y },
+            edges: NO_EDGES,
+            spans: { w: it.w, h: it.h },
+            removedFromBoard: false,
+            leg: null,
+            strip: null,
+            lastWorld: null,
+            lastScreen: null,
+            hostEl: null,
+            esc: null,
+            chip: null,
         };
-        capturePointer(slabGesture.pointerId);
-        api.container.style.cursor = 'grabbing';
     };
     const slabMove = (ev) => {
+        if ((gesture === null || gesture === void 0 ? void 0 : gesture.subject) === 'group')
+            return onToolMove(ev);
         const g = slabGesture;
         if (!g)
             return;
@@ -1120,6 +1149,8 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const slabUp = () => {
         var _a;
+        if ((gesture === null || gesture === void 0 ? void 0 : gesture.subject) === 'group')
+            return onToolUp();
         const g = slabGesture;
         if (!g)
             return;
@@ -1146,6 +1177,8 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const slabCancel = () => {
         var _a;
+        if ((gesture === null || gesture === void 0 ? void 0 : gesture.subject) === 'group')
+            return cancelActiveGesture();
         const g = slabGesture;
         if (!g)
             return;
@@ -1193,8 +1226,12 @@ export function bindDashboardGrid(api, group, options = {}) {
         g.started = true;
         armGlide();
         if (g.kind !== 'palette') {
-            setGhost(g.id, true);
-            g.hostEl = hostOf(g.id);
+            if (g.subject === 'node') {
+                setGhost(g.id, true);
+                g.hostEl = hostOf(g.id);
+            }
+            else
+                setCarried(g.id, true); // a group moves as one thing: its whole subtree is exempt from the glide
             capturePointer(g.pointerId);
             api.container.style.cursor = g.kind === 'resize' ? 'nwse-resize' : 'grabbing';
         }
@@ -1230,8 +1267,14 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const cleanupGestureVisuals = (g) => {
         var _a;
-        if (g.kind !== 'palette')
-            setGhost(g.id, false);
+        if (g.kind !== 'palette') {
+            if (g.subject === 'node')
+                setGhost(g.id, false);
+            else {
+                setCarried(g.id, false); // exempt through the drop write, then the glides resume
+                showRefusal(null, 0, 0);
+            }
+        }
         disarmGlideSoon();
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
@@ -1266,8 +1309,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         persistLayouts(); // an edit at a narrow count propagated into the wide cache
         if (changed) {
             const it = engine.getItem(g.id);
-            if (it)
-                live.announce(`${nameOf(g.node)} ${g.kind === 'resize' ? 'resized' : 'moved'} to ${describeCell(it)}`);
+            if (it && g.subject === 'node')
+                live.announce(`${nameOf(nodeOf(g))} ${g.kind === 'resize' ? 'resized' : 'moved'} to ${describeCell(it)}`);
         }
         syncA11y();
         api.renderNow();
@@ -1367,14 +1410,17 @@ export function bindDashboardGrid(api, group, options = {}) {
     const moveGhost = (g, ev) => {
         var _a;
         const desired = { x: ev.world.x - g.grab.dx, y: ev.world.y - g.grab.dy };
-        g.node.setPosition(desired.x, desired.y);
-        ghostStyleFastPath(g, desired);
+        if (g.subject === 'node') {
+            // The pixel ghost follows the hand; a group's frame is projected from its cell, carried.
+            nodeOf(g).setPosition(desired.x, desired.y);
+            ghostStyleFastPath(g, desired);
+        }
         g.lastWorld = { x: ev.world.x, y: ev.world.y };
         g.lastScreen = { x: ev.screen.x, y: ev.screen.y };
         /** The ghost's pixel size on THIS board — a palette chip has spans, not a size. */
         const pxSize = () => {
             if (g.kind !== 'palette')
-                return { width: g.node.size.width, height: g.node.size.height };
+                return sizeOf(g.entity);
             const f = frame();
             const gg = geom();
             return { width: g.spans.w * (columnUnitFor(gg, f.width) + gap) - gap, height: g.spans.h * (rowHeightFor(gg, rows()) + gap) - gap };
@@ -1403,7 +1449,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 project();
             }
             if (!g.leg) {
-                const adopted = peer.adopt(g.node, ev.world, pxSize(), opts);
+                const adopted = peer.adopt(g.entity, ev.world, pxSize(), opts);
                 if (!adopted)
                     return false;
                 g.leg = { peer, adopted };
@@ -1416,7 +1462,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         // BEFORE any engine is asked anything. The strip still wins over every
         // board; a band's stickiness and the vacated cell still hold a beside.
         const z = resolveTileZone(g, ev);
-        if (z.kind === 'strip' && options.tabDrop && !isStatic && g.kind !== 'palette') {
+        if (z.kind === 'strip' && options.tabDrop && !isStatic && g.kind !== 'palette' && g.subject === 'node') {
             // -- INTO A STRIP: the widget becomes a new tab there, so it leaves
             // this board (survivors settle home) and the strip marks the slot.
             endBeside(true); // a band's shift gives way to the strip: the container comes back
@@ -1514,7 +1560,10 @@ export function bindDashboardGrid(api, group, options = {}) {
                 g.leg = null;
             }
             setDim(g, false);
-            placeOnSelf(g, desired);
+            // A group moved by hand takes the cell under the hand and PUSHES what
+            // stands in its way (0.4.44) — and the zone walk reads the containers
+            // it pushed at REST, so the hand still finds their zones where they were.
+            placeOnSelf(g, desired, g.subject === 'group');
         }
         else {
             // -- outside every board ------------------------------------------
@@ -1522,6 +1571,10 @@ export function bindDashboardGrid(api, group, options = {}) {
             setDim(g, true);
         }
         syncPlaceholder();
+        // A carried group's slab and frame are this board's chrome, but its frame
+        // is written by whichever board holds it now: re-sync so they follow.
+        if (g.subject === 'group')
+            syncSlabs();
     };
     const onToolMove = (ev) => {
         var _a, _b, _c;
@@ -1806,8 +1859,8 @@ 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, (_c = g.node.size.depth) !== null && _c !== void 0 ? _c : 0);
-        g.node.setPosition(px, py);
+        nodeOf(g).setSize(w, h, (_c = nodeOf(g).size.depth) !== null && _c !== void 0 ? _c : 0);
+        nodeOf(g).setPosition(px, py);
         ghostStyleFastPath(g, { x: px, y: py, width: w, height: h });
         const spanF = bound() !== undefined ? frame() : f;
         const spanG = bound() !== undefined ? geom() : gg;
@@ -1847,7 +1900,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         syncPlaceholder();
     };
     const onToolUp = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const g = gesture;
         if (!g || g.kind === 'palette')
             return;
@@ -1867,8 +1920,8 @@ export function bindDashboardGrid(api, group, options = {}) {
             const displaced = tileCommands(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);
+                nodeOf(g).setPosition(snap.pos.x, snap.pos.y);
+                nodeOf(g).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) {
@@ -1898,8 +1951,12 @@ export function bindDashboardGrid(api, group, options = {}) {
             try {
                 diagram.runSystemWrite(() => {
                     var _a;
-                    g.node.setPosition(fin.rect.x, fin.rect.y);
-                    g.node.setSize(fin.rect.width, fin.rect.height, (_a = g.node.size.depth) !== null && _a !== void 0 ? _a : 0);
+                    if (g.subject === 'node') {
+                        nodeOf(g).setPosition(fin.rect.x, fin.rect.y);
+                        nodeOf(g).setSize(fin.rect.width, fin.rect.height, (_a = nodeOf(g).size.depth) !== null && _a !== void 0 ? _a : 0);
+                    }
+                    else
+                        g.entity.setFrame(Object.assign({}, fin.rect));
                 });
             }
             finally {
@@ -1908,6 +1965,27 @@ export function bindDashboardGrid(api, group, options = {}) {
             const sourceDisplaced = tileCommands(deltasSince(g.startCells, g.startGeom, g.id));
             const before = g.startCells.get(g.id);
             const geomBefore = g.startGeom.get(g.id);
+            // A GROUP crossing boards: its cell-and-frame command, and the host's
+            // bookkeeping for a container that changed boards (the spec entry, the
+            // registry) rides along through `onMemberMoving` (tile first, 4b-ii).
+            const own = g.subject === 'group'
+                ? [
+                    new SetGroupCellCommand(g.id, before !== null && before !== void 0 ? before : fin.cell, fin.cell, geomBefore ? { x: geomBefore.pos.x, y: geomBefore.pos.y, width: geomBefore.size.width, height: geomBefore.size.height } : fin.rect, fin.rect),
+                    ...((_d = (_c = options.onMemberMoving) === null || _c === void 0 ? void 0 : _c.call(options, g.id, group.id, targetGroupId)) !== null && _d !== void 0 ? _d : []),
+                ]
+                : buildCommitCommands([
+                    {
+                        id: g.id,
+                        locked: false,
+                        isGroup: false,
+                        cellBefore: before !== null && before !== void 0 ? before : fin.cell,
+                        cellAfter: fin.cell,
+                        posBefore: (_e = geomBefore === null || geomBefore === void 0 ? void 0 : geomBefore.pos) !== null && _e !== void 0 ? _e : { x: fin.rect.x, y: fin.rect.y },
+                        posAfter: { x: fin.rect.x, y: fin.rect.y },
+                        sizeBefore: (_f = geomBefore === null || geomBefore === void 0 ? void 0 : geomBefore.size) !== null && _f !== void 0 ? _f : { width: fin.rect.width, height: fin.rect.height },
+                        sizeAfter: { width: fin.rect.width, height: fin.rect.height },
+                    },
+                ]);
             const crossing = [
                 ...sourceDisplaced,
                 // …and the TARGET board's own displaced tiles. Dropping onto an
@@ -1920,24 +1998,12 @@ export function bindDashboardGrid(api, group, options = {}) {
                 ...fin.commands,
                 new RemoveFromGroupCommand(group.id, g.id),
                 new AddToGroupCommand(targetGroupId, g.id),
-                ...buildCommitCommands([
-                    {
-                        id: g.id,
-                        locked: false,
-                        isGroup: false,
-                        cellBefore: before !== null && before !== void 0 ? before : fin.cell,
-                        cellAfter: fin.cell,
-                        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: (_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 },
-                    },
-                ]),
+                ...own,
             ];
             // …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 : [];
+            const leaving = (_h = (_g = options.onMemberLeaving) === null || _g === void 0 ? void 0 : _g.call(options, g.id)) !== null && _h !== void 0 ? _h : [];
             execute('Move widget', leaving.length > 0 ? [new SequenceCommand('Move widget', [...crossing, ...leaving])] : crossing);
             engine.endGesture();
             cleanupGestureVisuals(g);
@@ -1945,10 +2011,10 @@ export function bindDashboardGrid(api, group, options = {}) {
             enforceBoardHeight();
             persistLayouts();
             api.renderNow();
-            (_g = options.onGesture) === null || _g === void 0 ? void 0 : _g.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed: true });
+            (_j = options.onGesture) === null || _j === void 0 ? void 0 : _j.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed: true });
             return;
         }
-        if (g.removedFromBoard && dragOut === 'cancel') {
+        if (g.removedFromBoard && (dragOut === 'cancel' || g.subject === 'group')) {
             // Released outside every board on a snap-home board: full restore,
             // nothing committed (the parked-outside release).
             cancelActiveGesture();
@@ -1975,16 +2041,16 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (snap) {
                 // 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, (_h = snap.size.depth) !== null && _h !== void 0 ? _h : 0);
+                nodeOf(g).setPosition(snap.pos.x, snap.pos.y);
+                nodeOf(g).setSize(snap.size.width, snap.size.height, (_k = snap.size.depth) !== null && _k !== void 0 ? _k : 0);
             }
             engine.endGesture();
             cleanupGestureVisuals(g);
             gesture = null;
             enforceBoardHeight();
             api.renderNow();
-            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 });
+            void ((_l = options.onRemoveRequest) === null || _l === void 0 ? void 0 : _l.call(options, g.id, displaced));
+            (_m = options.onGesture) === null || _m === void 0 ? void 0 : _m.call(options, { type: 'remove', kind: g.kind, nodeId: g.id, changed: true });
             return;
         }
         commitGesture(g);
@@ -2062,6 +2128,27 @@ export function bindDashboardGrid(api, group, options = {}) {
                 placeNear(g.id, cell.x, cell.y, g.spans.w, pushSolid);
             project();
         }
+        else if (g.subject === 'group') {
+            // The cell under the pointer, else the nearest legal one ALONG ITS ROW
+            // (a section dragged left that wandered down its column read as the
+            // wrong tile moving); when even that fails the wanted cell is painted
+            // as refused (identification round, D6/D7).
+            const it = engine.getItem(g.id);
+            if (!it)
+                return;
+            const cell = pointToCell(desired.x, desired.y, frame(), geom(), rows(), it.w);
+            if (cell.x === it.x && cell.y === it.y)
+                return;
+            const was = { x: it.x, y: it.y };
+            const moved = engine.moveCheck(g.id, cell.x, cell.y, { gate: false, pushSolid: true }).changed || placeOnRow(g.id, cell.x, cell.y, it.w, true);
+            if (moved) {
+                project();
+                setCarried(g.id, true); // chrome repainted by the projection is carried too
+            }
+            const now = engine.getItem(g.id);
+            const stuck = !!now && now.x === was.x && now.y === was.y;
+            showRefusal(stuck ? cell : null, it.w, it.h);
+        }
         else {
             const spanW = (_b = (_a = engine.getItem(g.id)) === null || _a === void 0 ? void 0 : _a.w) !== null && _b !== void 0 ? _b : g.spans.w;
             const cell = pointToCell(desired.x, desired.y, frame(), geom(), rows(), spanW);
@@ -2073,24 +2160,65 @@ export function bindDashboardGrid(api, group, options = {}) {
     const resolveTileZone = (g, ev) => {
         var _a, _b;
         let strip = null;
-        if (options.tabDrop && !isStatic && g.kind !== 'palette') {
+        if (options.tabDrop && !isStatic && g.kind !== 'palette' && g.subject === 'node') {
+            // A group never becomes a tab: over a container's strip it is over the
+            // container's margin — a cell on the parent board, pushing with intent.
             const crect = api.container.getBoundingClientRect();
             strip = options.tabDrop.stripAt(crect.left + ev.screen.x, crect.top + ev.screen.y);
         }
-        return resolveZone({
-            x: ev.world.x,
-            y: ev.world.y,
-            roots: zoneRoots(),
-            strip,
-            prev: beside
+        return resolveZone(Object.assign(Object.assign({ x: ev.world.x, y: ev.world.y, roots: zoneRoots(), strip, prev: beside
                 ? { containerId: beside.id, side: beside.side, frame0: beside.frame0, vacated: cellToRect({ x: beside.vacated.x, y: beside.vacated.y, w: g.spans.w, h: g.spans.h }, frame(), geom(), rows()) }
-                : ((_b = (_a = g.leg) === null || _a === void 0 ? void 0 : _a.adopted.besideState()) !== null && _b !== void 0 ? _b : null), // a beside another board holds for the ghost, through its leg
-            maxDepth: nesting,
-            ghostDepth: 0,
-            ghostSubtree: EMPTY_SUBTREE,
-            gap,
-            homeChain: homeChain(),
-        });
+                : ((_b = (_a = g.leg) === null || _a === void 0 ? void 0 : _a.adopted.besideState()) !== null && _b !== void 0 ? _b : null), maxDepth: nesting, ghostDepth: g.subject === 'group' ? 1 + levelsInside(g.id) : 0 }, (g.subject === 'group' ? { restFrames: restFramesOf(g) } : {})), { ghostSubtree: g.subject === 'group' ? descendantGroups(g.id) : EMPTY_SUBTREE, gap, homeChain: homeChain() }));
+    };
+    /** This board's containers as they stood at the press: a group ghost's intent pushes never change what the hand means. */
+    const restFramesOf = (g) => {
+        const out = new Map();
+        for (const [id, snap] of g.startGeom) {
+            if (id === g.id || !isGroupMember(id))
+                continue;
+            out.set(id, { x: snap.pos.x, y: snap.pos.y, width: snap.size.width, height: snap.size.height });
+        }
+        return out;
+    };
+    /** Every group under `id`, itself included — the boards a group ghost may never enter. */
+    const descendantGroups = (id) => {
+        var _a;
+        const out = new Set();
+        const queue = [id];
+        while (queue.length) {
+            const cur = queue.shift();
+            if (out.has(cur))
+                continue;
+            const grp = diagram.getGroup(cur);
+            if (!grp)
+                continue;
+            out.add(cur);
+            for (const m of (_a = grp.members) !== null && _a !== void 0 ? _a : [])
+                if (diagram.getGroup(m))
+                    queue.push(m);
+        }
+        return out;
+    };
+    /**
+     * The container LEVELS a group carries INSIDE it: 0 for a section of
+     * widgets or a tab container of plain pages (a container and its page are
+     * one level), 1 for a section holding a section, and so on. The group's own
+     * level is the +1 above: its widgets sit one board deeper than the board it
+     * lands on. The nesting policy counts both.
+     */
+    const levelsInside = (id) => {
+        var _a;
+        const grp = diagram.getGroup(id);
+        if (!grp)
+            return 0;
+        const tabs = isTabsGroup(grp);
+        let deepest = 0;
+        for (const m of (_a = grp.members) !== null && _a !== void 0 ? _a : []) {
+            if (!diagram.getGroup(m))
+                continue;
+            deepest = Math.max(deepest, tabs ? levelsInside(m) : 1 + levelsInside(m));
+        }
+        return deepest;
     };
     /** The groups this board sits in, all the way up: their bands never apply to a tile of this board. */
     const homeChain = () => {
@@ -2472,7 +2600,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (isStatic)
                 return false;
             beginSlabMove(id, ev);
-            return (slabGesture === null || slabGesture === void 0 ? void 0 : slabGesture.id) === id;
+            return (gesture === null || gesture === void 0 ? void 0 : gesture.id) === id;
         },
         dragMember: (id, ev) => {
             var _a;
@@ -2485,7 +2613,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 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)
+            if (((_a = currentGesture()) === null || _a === void 0 ? void 0 : _a.id) !== id)
                 return false;
             const detachAll = () => {
                 window.removeEventListener('pointermove', onMove, true);
@@ -2495,7 +2623,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             };
             const onMove = (e) => {
                 var _a;
-                if (disposed || ((_a = currentSlab()) === null || _a === void 0 ? void 0 : _a.id) !== id)
+                if (disposed || ((_a = currentGesture()) === null || _a === void 0 ? void 0 : _a.id) !== id)
                     return detachAll();
                 slabMove(toTool(e));
                 api.render();
@@ -2765,7 +2893,8 @@ export function bindDashboardGrid(api, group, options = {}) {
             gesture = {
                 kind: isResize ? 'resize' : 'move',
                 id: node.id,
-                node,
+                subject: 'node',
+                entity: node,
                 pointerId: typeof PointerEvent !== 'undefined' && ev.source instanceof PointerEvent
                     ? ev.source.pointerId
                     : null,
@@ -2860,606 +2989,29 @@ export function bindDashboardGrid(api, group, options = {}) {
     api.container.addEventListener('focusin', keyboard.onFocusIn);
     api.container.addEventListener('keydown', keyboard.onKey);
     // -- tab tear-out -----------------------------------------------------------
-    /**
-     * A press that TRAVELLED on a tab drags the whole page onto this board, the
-     * way dragging a VS Code tab out of its group makes a group of its own. The
-     * page is a GROUP, so it rides the same `adopt` leg a widget uses — entry at
-     * the bottom, `placeNear` under the pointer, the dashed placeholder drawn
-     * from the live cell — and the commit is one batch: the cell and frame it
-     * landed on, out of the container, into this board, plus every tile this
-     * board had to push aside.
-     *
-     * Like VS Code, the page itself does not follow the pointer; a chip carrying
-     * the tab's label does, and the placeholder shows where the drop will land.
-     */
-    const beginTearOut = (pageId, fromGroupId, ev, plan) => {
-        var _a;
-        if (disposed || gesture || slabGesture || isStatic || tearing)
-            return false;
-        const from = diagram.getGroup(fromGroupId);
-        if (!from || !diagram.getGroup(pageId) || !engine.getItem(fromGroupId))
-            return false;
-        const toWorld = (cx, cy) => {
-            var _a;
-            const rect = api.container.getBoundingClientRect();
-            return ((_a = api.viewport) === null || _a === void 0 ? void 0 : _a.clientToWorld) ? api.viewport.clientToWorld(cx, cy, rect) : { x: cx - rect.left, y: cy - rect.top };
-        };
-        // The board holds the NEW group, not the bare page: it is adopted under the
-        // group's id, sized for the page plus its strip, taking the room under the
-        // pointer with its top edge at the pointer — the tab is what the pointer
-        // holds, the page hangs below it. NOT at the press: a ghost in the engine
-        // costs rows, and on a fit board every tile squeezes the moment it enters,
-        // so the ghost enters only when the pointer is over free board space, and
-        // leaves whenever it is over a strip, a group or an edge. A full board that
-        // refuses the ghost still lets the page join, reorder or split.
-        let leg = null;
-        /** The board holding the leg: null = this one, else the foreign peer under the pointer. */
-        let legPeer = null;
-        const ensureLeg = (world, peer = null) => {
-            // The page TRAVELS at most half the board tall (the dock's measure): at
-            // its natural height — a page fills its container, eight rows on the
-            // demo — the ghost crossing the KPI row tore the whole dashboard apart
-            // on its way to a cell (identification round, D1 03–08).
-            const capPx = dockSpan.h * (rowHeightFor(geom(), rows()) + gap) - gap;
-            const size = { width: plan.size.width, height: Math.min(plan.size.height, capPx) };
-            // A different board under the pointer takes the leg over, the old one
-            // back to its pre-entry layout first. An INNER tab used to know only
-            // the board owning its container — over the main board the chip dimmed
-            // and the release did nothing (identification round, L2).
-            if (leg && legPeer !== peer) {
-                leg.abort();
-                leg = null;
-            }
-            if (!leg) {
-                leg = peer ? peer.adopt({ id: plan.arrivingId }, world, size, { fit: 'shrink', anchor: 'top' }) : adopt({ id: plan.arrivingId }, world, size, { fit: 'shrink', anchor: 'top' });
-                legPeer = leg ? peer : null;
-            }
-            return leg;
-        };
-        /** The deepest OTHER board under the point that may take the page — never one of the page's own boards. */
-        const foreignAt = (wx, wy) => {
-            let best = null;
-            for (const p of peersOnCanvas()) {
-                if (p === selfPeer || plan.ownBoards.includes(p.group.id))
-                    continue;
-                if (!p.containsWorld(wx, wy))
-                    continue;
-                if (!best || p.frameArea() < best.frameArea())
-                    best = p;
-            }
-            return best;
-        };
-        const naturalSpan = (() => {
-            const sp = sizeToSpan(plan.size.width, plan.size.height, frame(), geom(), rows());
-            return { w: Math.max(1, Math.min(columns, sp.w)), h: Math.max(TEAR_OUT_MIN_ROWS, sp.h) };
-        })();
-        // A DOCKED group takes at most HALF the board — VS Code's edge drop splits
-        // the area in two. A page as tall as the container it left would
-        // otherwise shove the whole dashboard out of view. Half of the board as
-        // it stood at the press, and of what the canvas shows, whichever is less.
-        const dockSpan = (() => {
-            const rows0 = rows();
-            const rect = api.container.getBoundingClientRect();
-            const rh = rowHeightFor(geom(), rows0) + gap;
-            const visible = rect.height > 0 && rh > 0 ? Math.max(1, Math.floor((rect.height + gap) / rh)) : rows0;
-            const halfRows = Math.max(TEAR_OUT_MIN_ROWS, Math.ceil(Math.min(rows0, visible) / 2));
-            const halfCols = Math.max(1, Math.ceil(columns / 2));
-            return { w: Math.min(naturalSpan.w, halfCols), h: Math.min(naturalSpan.h, halfRows) };
-        })();
-        tearing = pageId;
-        const doc = (_a = api.container.ownerDocument) !== null && _a !== void 0 ? _a : document;
-        const chip = doc.createElement('div');
-        chip.className = 'axdb-drag-chip axdb-tab-chip';
-        chip.textContent = plan.label;
-        doc.body.appendChild(chip);
-        const moveChip = (cx, cy) => {
-            chip.style.left = `${cx + 6}px`;
-            chip.style.top = `${cy + 6}px`;
-        };
-        moveChip(ev.clientX, ev.clientY);
-        armGlide();
-        api.render();
-        const layer = htmlLayer();
-        const area = (g) => {
-            const sz = sizeOf(g);
-            return sz.width * sz.height;
-        };
-        const targets = plan.joinTargets
-            .map((id) => diagram.getGroup(id))
-            .filter((g) => !!g && g.id !== fromGroupId)
-            .sort((a, b) => area(a) - area(b));
-        // GEOMETRY MUST NOT MOVE WITH THE GHOST. On a fit board the rows squeeze
-        // while the ghost occupies some and relax when it leaves, so a target's
-        // frame changes with the very decision being made about it: a join makes
-        // the ghost leave, the frame grows, and the same pointer now reads as a
-        // split. The target and its frame are therefore anchored when the pointer
-        // enters it and kept until it leaves; the board frame is the one at press.
-        let anchor = null;
-        const inRect = (r, wx, wy) => wx >= r.x && wx <= r.x + r.width && wy >= r.y && wy <= r.y + r.height;
-        const targetAt = (wx, wy) => {
-            var _a;
-            if (anchor && inRect(anchor.frame, wx, wy))
-                return anchor.g;
-            const t = (_a = targets.find((x) => worldInsideGroup(x, wx, wy))) !== null && _a !== void 0 ? _a : null;
-            if (t)
-                leg === null || leg === void 0 ? void 0 : leg.leave(); // the ghost leaves first, so the frame anchored is the relaxed one
-            anchor = t ? { g: t, frame: frameOfGroup(t), stripH: plan.stripHeight(t.id) } : null;
-            return t;
-        };
-        // THE BANDS ARE ON THE SCREEN. Dockview measures its container edges on
-        // the element, and so must we: the camera moves during the drag (the
-        // board glides, the ghost adds rows a bounded scroll answers to), so a
-        // band fixed in world space at the press drifts away from the edge the
-        // user sees. The frame is mapped to client space through the live
-        // camera and clipped to the canvas, so a scrolled board's bands sit at
-        // its VISIBLE edges.
-        const ROOT_TOP = 20;
-        const ROOT_BOTTOM = 20;
-        const ROOT_SIDE = 40;
-        // THE EDGE BANDS ARE A FIFTH OF THE BODY — Dockview's activation size, not
-        // VS Code's third. Two thirds of every group read as "beside" under the
-        // thirds, and the user, putting a page back into the panel it came from,
-        // never found the "into": "close to the edge means beside it, the content
-        // area means inside, the header means a new tab" (0.4.42).
-        const EDGE_BAND = BESIDE_BAND; // one band for a tab's split and a widget's beside (zones.ts)
-        const visibleFrame = () => {
-            const rect = api.container.getBoundingClientRect();
-            const o = toWorld(rect.left, rect.top);
-            const u = toWorld(rect.left + 100, rect.top + 100);
-            const sx = 100 / (u.x - o.x || 100);
-            const sy = 100 / (u.y - o.y || 100);
-            const f = frame();
-            const left = rect.left + (f.x - o.x) * sx;
-            const top = rect.top + (f.y - o.y) * sy;
-            const right = left + f.width * sx;
-            const bottom = top + f.height * sy;
-            if (rect.width <= 0 || rect.height <= 0)
-                return { left, top, right, bottom }; // unlaid-out: nothing to clip to
-            return { left: Math.max(left, rect.left), top: Math.max(top, rect.top), right: Math.min(right, rect.right), bottom: Math.min(bottom, rect.bottom) };
-        };
-        /** Inside the VISIBLE canvas plus the grace band, on the screen — a camera that moved must not turn a pointer outside the canvas into a world point inside the board. */
-        const clientInsideCanvasGrace = (cx, cy) => {
-            // The CANVAS, not this board's frame: a nested page's binder runs the
-            // tear-out of the tabs inside it, and its pages must still land on the
-            // boards around it. An unmeasurable container (no layout) is never off.
-            const rect = api.container.getBoundingClientRect();
-            if (rect.width <= 0 || rect.height <= 0)
-                return true;
-            return cx >= rect.left - EDGE_GRACE && cx <= rect.right + EDGE_GRACE && cy >= rect.top - EDGE_GRACE && cy <= rect.bottom + EDGE_GRACE;
-        };
-        /**
-         * The board's rows for a dock: as they stood BEFORE the ghost entered.
-         * Read live, the ghost's own pushing inflated them on every re-entry —
-         * side docks 14, 21, 104 rows tall, a bottom dock landing at row 29.
-         */
-        const baseRows = () => {
-            const b = leg === null || leg === void 0 ? void 0 : leg.baseline();
-            if (!b)
-                return rowsWithout(plan.arrivingId);
-            let r = 0;
-            for (const c of b.values())
-                r = Math.max(r, c.y + c.h);
-            return r;
-        };
-        const worldToClient = (wx, wy) => {
-            const rect = api.container.getBoundingClientRect();
-            const o = toWorld(rect.left, rect.top);
-            const u = toWorld(rect.left + 100, rect.top + 100);
-            return { x: rect.left + (wx - o.x) * (100 / (u.x - o.x || 100)), y: rect.top + (wy - o.y) * (100 / (u.y - o.y || 100)) };
-        };
-        /**
-         * Would the page land where the user cannot see it? A cell whose room
-         * lies below the fold (the only cell left under a locked section — D1
-         * hold3) used to take the drop a screen away. Hidden = not one pixel of
-         * the cell inside the visible canvas: a landing whose top edge shows,
-         * the rest below the fold of a small canvas, is a landing the user can
-         * see and a grow board scrolls to (lab L61 dropped at the canvas foot).
-         */
-        const landingHidden = () => {
-            const r = leg === null || leg === void 0 ? void 0 : leg.rect();
-            const rect = api.container.getBoundingClientRect();
-            if (!r || rect.width <= 0 || rect.height <= 0)
-                return false;
-            const tl = worldToClient(r.x, r.y);
-            const br = worldToClient(r.x + r.width, r.y + r.height);
-            return tl.y >= rect.bottom || br.y <= rect.top || tl.x >= rect.right || br.x <= rect.left;
-        };
-        const rootAt = (cx, cy) => {
-            // The bands reach a little OUTSIDE the frame too: a pointer that
-            // overshoots the board's top edge by a few pixels means "the top".
-            const v = visibleFrame();
-            if (cx < v.left - ROOT_SIDE || cx > v.right + ROOT_SIDE || cy < v.top - ROOT_TOP || cy > v.bottom + ROOT_BOTTOM)
-                return null;
-            const rows = Math.max(TEAR_OUT_MIN_ROWS, baseRows());
-            const w = dockSpan.w;
-            const h = dockSpan.h;
-            if (cy - v.top <= ROOT_TOP)
-                return { kind: 'root', side: 'top', cell: { x: 0, y: 0, w: columns, h } };
-            if (cx - v.left <= ROOT_SIDE)
-                return { kind: 'root', side: 'left', cell: { x: 0, y: 0, w, h: rows } };
-            if (v.right - cx <= ROOT_SIDE)
-                return { kind: 'root', side: 'right', cell: { x: Math.max(0, columns - w), y: 0, w, h: rows } };
-            if (v.bottom - cy <= ROOT_BOTTOM)
-                return { kind: 'root', side: 'bottom', cell: { x: 0, y: rows, w: columns, h } };
-            return null;
-        };
-        const rowsWithout = (id) => {
-            let r = 0;
-            for (const it of engine.getItems())
-                if (it.id !== id)
-                    r = Math.max(r, it.y + it.h);
-            return r;
-        };
-        /** A split being previewed: the target shrunk to its half, to be restored when the pointer leaves. */
-        let split = null;
-        const halves = (target, side) => {
-            // The cell to halve is the target's own — not the half it is already
-            // shrunk to while a split is being previewed.
-            const live = engine.getItem(target.id);
-            const it = split && split.id === target.id ? split.before : live;
-            if (!it || !live)
-                return null; // a group on another board: no cell of ours to halve
-            if (side === 'left' || side === 'right') {
-                if (it.w < 2)
-                    return null;
-                const a = Math.ceil(it.w / 2);
-                const b = it.w - a;
-                return side === 'right'
-                    ? { keep: { x: it.x, y: it.y, w: a, h: it.h }, born: { x: it.x + a, y: it.y, w: b, h: it.h } }
-                    : { keep: { x: it.x + b, y: it.y, w: a, h: it.h }, born: { x: it.x, y: it.y, w: b, h: it.h } };
-            }
-            if (it.h < 2 * TEAR_OUT_MIN_ROWS)
-                return null;
-            const a = Math.ceil(it.h / 2);
-            const b = it.h - a;
-            return side === 'bottom'
-                ? { keep: { x: it.x, y: it.y, w: it.w, h: a }, born: { x: it.x, y: it.y + a, w: it.w, h: b } }
-                : { keep: { x: it.x, y: it.y + b, w: it.w, h: a }, born: { x: it.x, y: it.y, w: it.w, h: b } };
-        };
-        const zoneAt = (cx, cy, world) => {
-            // A pointer OUTSIDE the visible canvas is off, full stop: a camera that
-            // moved can map it to a world point inside a group, and that group
-            // took a join or a split from a release in the page header. The
-            // target is looked up (and anchored) only inside it.
-            const clientInside = clientInsideCanvasGrace(cx, cy);
-            const target = clientInside ? targetAt(world.x, world.y) : null;
-            const root = clientInside ? rootAt(cx, cy) : null;
-            const foreign = foreignAt(world.x, world.y);
-            // The ORDER is zones.ts's, shared with the split board: a strip, the
-            // board's own edges, the target's fifth or middle, home, then a board.
-            const tz = resolveTabZone({
-                x: world.x,
-                y: world.y,
-                clientInside,
-                ownStrip: plan.stripIndex(fromGroupId, cx, cy),
-                stripOf: (id) => plan.stripIndex(id, cx, cy),
-                root: root && root.kind === 'root' ? { side: root.side } : null,
-                target: target
-                    ? {
-                        id: target.id,
-                        frame: anchor && anchor.g === target ? anchor.frame : frameOfGroup(target),
-                        stripHeight: anchor && anchor.g === target ? anchor.stripH : plan.stripHeight(target.id),
-                    }
-                    : null,
-                home: worldInsideGroup(from, world.x, world.y) ? frameOfGroup(from) : null,
-                homeBand: 0, // on a grid board the whole source frame is home
-                band: EDGE_BAND,
-                canSplit: (_id, side) => !!target && !!halves(target, side),
-                pane: false,
-                foreign: !!foreign && (!worldInsideBoard(world.x, world.y) || foreign.frameArea() < boardArea()),
-            });
-            switch (tz.kind) {
-                case 'off':
-                    return { kind: 'off' };
-                case 'strip':
-                    return { kind: 'strip', target: target, index: tz.index };
-                case 'reorder':
-                    return { kind: 'reorder', index: tz.index };
-                case 'root':
-                    return root;
-                case 'join':
-                    return { kind: 'join', target: target };
-                case 'split': {
-                    const h = halves(target, tz.side);
-                    return h ? Object.assign({ kind: 'split', target: target, side: tz.side }, h) : { kind: 'join', target: target };
-                }
-                case 'home':
-                    return { kind: 'home' };
-                default:
-                    return tz.kind === 'board' && tz.foreign && foreign ? { kind: 'board', peer: foreign } : { kind: 'board' };
-            }
-        };
-        const zoneKey = (z) => JSON.stringify(z, (k, v) => (k === 'target' ? v.id : k === 'peer' ? v.group.id : v));
-        // A TOP DOCK INSERTS ROWS. The engine's push cascade resolves the band's
-        // collisions one tile at a time and scrambles what stood beneath it (the
-        // demo's KPI row came apart, two of its tiles under the chart). VS Code
-        // shoves the whole area down intact, so after the ghost takes the band
-        // every tile that stood at or below it is put back at its own column,
-        // exactly the band's height lower — a translation of a layout without
-        // overlaps has none — and comes back the same way when the pointer leaves.
-        // The layout translated is the one from BEFORE the ghost entered (the
-        // leg's baseline), not the engine's mid-gesture state: the adoption
-        // itself pushes tiles about, and a snapshot taken after it would carry
-        // that cascade into the insert.
-        let inserted = null;
-        const insertRows = (cell, l) => {
-            if (cell.w < columns)
-                return; // a side dock has no whole rows to insert
-            inserted = l.baseline();
-            for (const [id, c] of inserted) {
-                const it = engine.getItem(id);
-                if (!it)
-                    continue;
-                it.x = c.x;
-                it.y = c.y >= cell.y ? c.y + cell.h : c.y;
-            }
-        };
-        const undoInsertRows = () => {
-            if (!inserted)
-                return;
-            leg === null || leg === void 0 ? void 0 : leg.leave(); // the ghost frees its rows first
-            for (const [id, c] of inserted) {
-                const it = engine.getItem(id);
-                if (it) {
-                    it.x = c.x;
-                    it.y = c.y;
-                }
-            }
-            inserted = null;
-            project();
-        };
-        let joinEl = null;
-        const showOverlay = (r) => {
-            if (!layer)
-                return;
-            if (!joinEl) {
-                joinEl = doc.createElement('div');
-                joinEl.className = 'axdb-join';
-                layer.prepend(joinEl);
-            }
-            joinEl.style.left = `${r.x}px`;
-            joinEl.style.top = `${r.y}px`;
-            joinEl.style.width = `${r.width}px`;
-            joinEl.style.height = `${r.height}px`;
-        };
-        const hideOverlay = () => {
-            joinEl === null || joinEl === void 0 ? void 0 : joinEl.remove();
-            joinEl = null;
-        };
-        const undoSplitPreview = () => {
-            if (!split)
-                return;
-            const it = engine.getItem(split.id);
-            leg === null || leg === void 0 ? void 0 : leg.leave(); // the born half must be free before the target grows back into it
-            if (it) {
-                if (it.x !== split.before.x || it.y !== split.before.y)
-                    engine.moveCheck(split.id, split.before.x, split.before.y, { gate: false });
-                if (it.w !== split.before.w || it.h !== split.before.h)
-                    engine.resizeCheck(split.id, split.before.w, split.before.h);
-            }
-            split = null;
-            project();
-        };
-        const previewSplit = (z, world) => {
-            const it = engine.getItem(z.target.id);
-            if (!it)
-                return false;
-            // The target's cell AT REST is the one the commit restores — read it
-            // BEFORE the leg enters: the arriving ghost is placed under the pointer
-            // first, and a target that is a tile like any other is pushed by it
-            // for a moment (tile first, step 3) until it takes its half below.
-            const before = { x: it.x, y: it.y, w: it.w, h: it.h };
-            const frameBefore = frameOfGroup(z.target);
-            const l = ensureLeg(world, null);
-            if (!l)
-                return false;
-            split = { id: z.target.id, before, frameBefore, keep: z.keep };
-            if (it.w !== z.keep.w || it.h !== z.keep.h)
-                engine.resizeCheck(z.target.id, z.keep.w, z.keep.h);
-            const now = engine.getItem(z.target.id);
-            if (now && (now.x !== z.keep.x || now.y !== z.keep.y))
-                engine.moveCheck(z.target.id, z.keep.x, z.keep.y, { gate: false });
-            const ok = l.place(z.born);
-            project();
-            hidePlaceholder(); // the accent overlay says which half; the grey placeholder under it is noise
-            return ok;
-        };
-        /** The band a dock is promised: the cell it takes — a BOTTOM dock's lies past the last row, so its tint sits on the board's last rows instead. */
-        const dockOverlayRect = (z) => {
-            const cell = z.side === 'bottom' ? Object.assign(Object.assign({}, z.cell), { y: Math.max(0, z.cell.y - z.cell.h) }) : z.cell;
-            return cellToRect(cell, frame(), geom(), rows());
-        };
-        /** The dock, applied for real at the release: the ghost takes the band, every member group is pushed, a top dock inserts rows. */
-        const realizeDock = (z, world) => {
-            const l = ensureLeg(world, null);
-            if (!l)
-                return false;
-            l.place(z.cell, true); // DOCKING PUSHES SECTIONS: everything below the band moves down, solid or not
-            insertRows(z.cell, l);
-            project();
-            hidePlaceholder();
-            return true;
-        };
-        let zone = { kind: 'board' };
-        let key = zoneKey(zone);
-        const applyZone = (z, world) => {
-            var _a, _b, _c;
-            const k = zoneKey(z);
-            const same = k === key;
-            key = k;
-            zone = z;
-            if (same) {
-                if (z.kind === 'board')
-                    (_b = ensureLeg(world, (_a = z.peer) !== null && _a !== void 0 ? _a : null)) === null || _b === void 0 ? void 0 : _b.move(world);
-                return;
-            }
-            undoSplitPreview();
-            undoInsertRows();
-            plan.markDrop(null, null);
-            hideOverlay();
-            // A PREVIEW IS AN OVERLAY. A split and a dock used to be applied LIVE
-            // while the pointer hovered — the target halved and moved to its other
-            // half, a top dock shoved every tile down — so the very group the user
-            // was entering jumped away from under the pointer (the fluid demo's
-            // side panel went off the screen in one frame as a page came back to
-            // it). VS Code, Dockview and Golden Layout tint the half or the band and
-            // move nothing until the drop; so does this now: the layout stays where
-            // the user sees it, and the halving or the row insert happens on release.
-            switch (z.kind) {
-                case 'strip':
-                    leg === null || leg === void 0 ? void 0 : leg.leave();
-                    showOverlay(frameOfGroup(z.target));
-                    plan.markDrop(z.target.id, z.index);
-                    break;
-                case 'join':
-                    leg === null || leg === void 0 ? void 0 : leg.leave();
-                    showOverlay(frameOfGroup(z.target));
-                    break;
-                case 'split':
-                    leg === null || leg === void 0 ? void 0 : leg.leave(); // the ghost leaves first, so the half is measured on the relaxed board
-                    showOverlay(cellToRect(z.born, frame(), geom(), rows()));
-                    break;
-                case 'root':
-                    leg === null || leg === void 0 ? void 0 : leg.leave();
-                    showOverlay(dockOverlayRect(z));
-                    break;
-                case 'reorder':
-                    leg === null || leg === void 0 ? void 0 : leg.leave();
-                    plan.markDrop(fromGroupId, z.index);
-                    break;
-                case 'home':
-                case 'off':
-                    leg === null || leg === void 0 ? void 0 : leg.leave();
-                    break;
-                case 'board': {
-                    const l = ensureLeg(world, (_c = z.peer) !== null && _c !== void 0 ? _c : null);
-                    l === null || l === void 0 ? void 0 : l.enter(world);
-                    break;
-                }
-            }
-        };
-        let last = { x: ev.clientX, y: ev.clientY };
-        const detach = () => {
-            window.removeEventListener('pointermove', onMove, true);
-            window.removeEventListener('pointerup', onUp, true);
-            window.removeEventListener('pointercancel', onCancel, true);
-            window.removeEventListener('keydown', onKey, true);
-        };
-        const onMove = (e) => {
-            if (disposed)
-                return detach();
-            last = { x: e.clientX, y: e.clientY };
-            moveChip(e.clientX, e.clientY);
-            const world = toWorld(e.clientX, e.clientY);
-            const z = zoneAt(e.clientX, e.clientY, world);
-            applyZone(z, world);
-            // Dimmed = a release here does nothing: home, off the board, or a board
-            // that refused the ghost (bounded and full).
-            chip.classList.toggle('axdb-out', zone.kind === 'home' || zone.kind === 'off' || (zone.kind === 'board' && (!leg || landingHidden())));
-            api.render();
-        };
-        const done = (changed, kind) => {
-            var _a;
-            disarmGlideSoon();
-            enforceBoardHeight();
-            persistLayouts();
-            api.renderNow();
-            (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: kind, kind: 'move', nodeId: pageId, changed });
-        };
-        const finish = (commit) => {
-            var _a, _b, _c, _d;
-            detach();
-            chip.remove();
-            hideOverlay();
-            plan.markDrop(null, null);
-            tearing = null;
-            if (disposed)
-                return;
-            const world = toWorld(last.x, last.y);
-            const z = commit ? zoneAt(last.x, last.y, world) : { kind: 'home' };
-            if (z.kind !== 'root')
-                undoInsertRows();
-            if (!commit || z.kind === 'home' || z.kind === 'off' || (z.kind === 'root' && !ensureLeg(world, null)) || (z.kind === 'board' && (!ensureLeg(world, (_a = z.peer) !== null && _a !== void 0 ? _a : null) || landingHidden()))) {
-                undoSplitPreview();
-                leg === null || leg === void 0 ? void 0 : leg.abort();
-                done(false, 'cancel');
-                return;
-            }
-            if (z.kind === 'reorder') {
-                undoSplitPreview();
-                leg === null || leg === void 0 ? void 0 : leg.abort();
-                const cmds = plan.reorder(z.index);
-                const changed = cmds.length > 0 ? execute('Reorder tab', cmds) : false;
-                done(changed, changed ? 'commit' : 'cancel');
-                return;
-            }
-            if (z.kind === 'strip' || z.kind === 'join') {
-                // JOIN: no cell on this board — the leg is abandoned (its displaced
-                // tiles are already home) and the page becomes the target's tab.
-                undoSplitPreview();
-                const index = z.kind === 'strip' ? z.index : plan.dropIndex(z.target.id, last.x, last.y);
-                leg === null || leg === void 0 ? void 0 : leg.abort();
-                const planned = plan.join(z.target.id, index, group.id);
-                done(execute('Move tab', [...planned.move, ...planned.collapse]), 'commit');
-                return;
-            }
-            if (z.kind === 'split') {
-                // SPLIT: the target keeps one half of its cell, the page's new group the
-                // other. The hover only tinted the half; the halving happens NOW.
-                hideOverlay();
-                plan.markDrop(null, null);
-                if (!previewSplit(z, world)) {
-                    // The half cannot be taken (a bounded board with no room for the
-                    // ghost): the page joins the target instead, as it would have had
-                    // the target been too small to halve.
-                    leg === null || leg === void 0 ? void 0 : leg.abort();
-                    const planned = plan.join(z.target.id, plan.dropIndex(z.target.id, last.x, last.y), group.id);
-                    done(execute('Move tab', [...planned.move, ...planned.collapse]), 'commit');
-                    return;
-                }
-                const fin = (_b = leg === null || leg === void 0 ? void 0 : leg.finalize()) !== null && _b !== void 0 ? _b : null;
-                const halved = !!split && !!engine.getItem(z.target.id);
-                split = null;
-                if (!fin || !halved) {
-                    leg === null || leg === void 0 ? void 0 : leg.abort();
-                    done(false, 'cancel');
-                    return;
-                }
-                const planned = plan.commands(fin.cell, fin.rect, group.id);
-                // The target's halving is in the leg's own deltas: its cell at rest was
-                // snapshotted when the ghost entered, and its half is where it stands now.
-                const changed = execute('Split group', [...fin.commands, ...planned.move, ...planned.collapse]);
-                done(changed, 'commit');
-                return;
-            }
-            // ROOT DOCK: the hover only tinted the band; the ghost takes it NOW. A
-            // free cell on the board: the leg already sits where it will land.
-            if (z.kind === 'root')
-                realizeDock(z, world);
-            else if (zoneKey(zone) !== zoneKey(z))
-                applyZone(z, world);
-            hideOverlay(); // a re-applied zone repaints its preview; the release is not a preview
-            plan.markDrop(null, null);
-            const fin = (_c = leg === null || leg === void 0 ? void 0 : leg.finalize()) !== null && _c !== void 0 ? _c : null;
-            if (!fin) {
-                done(false, 'cancel');
-                return;
-            }
-            const planned = plan.commands(fin.cell, fin.rect, (_d = leg === null || leg === void 0 ? void 0 : leg.groupId) !== null && _d !== void 0 ? _d : group.id);
-            done(execute(z.kind === 'root' ? 'Dock tab' : 'Move tab out', [...fin.commands, ...planned.move, ...planned.collapse]), 'commit');
-        };
-        const onUp = () => finish(true);
-        const onCancel = () => finish(false);
-        const onKey = (e) => {
-            if (e.key === 'Escape')
-                finish(false);
-        };
-        window.addEventListener('pointermove', onMove, true);
-        window.addEventListener('pointerup', onUp, true);
-        window.addEventListener('pointercancel', onCancel, true);
-        window.addEventListener('keydown', onKey, true);
-        return true;
-    };
+    // -- tab tear-out (tear-out.ts) --------------------------------------------
+    const beginTearOut = createTearOut(ctx, {
+        columns: () => columns,
+        adopt: (node, world, pxSize, opts) => adopt(node, world, pxSize, opts),
+        boardArea,
+        peersOnCanvas,
+        selfPeer: () => selfPeer,
+        worldInsideBoard,
+        worldInsideGroup,
+        frameOfGroup,
+        execute,
+        project,
+        hidePlaceholder,
+        armGlide,
+        disarmGlideSoon,
+        enforceBoardHeight,
+        persistLayouts,
+        busy: () => !!gesture || !!slabGesture,
+        tearing: () => tearing,
+        setTearing: (id) => {
+            tearing = id;
+        },
+    });
     // -- palette drag-in --------------------------------------------------------
     const beginPaletteDrag = (node, spec, event) => {
         var _a, _b;
@@ -3475,7 +3027,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         const g = {
             kind: 'palette',
             id: node.id,
-            node,
+            subject: 'node',
+            entity: node,
             pointerId: (_b = event.pointerId) !== null && _b !== void 0 ? _b : null,
             started: false,
             downClient: { x: event.clientX, y: event.clientY },