@grafloria/element 0.4.34 → 0.4.36

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

@@ -1348,6 +1348,13 @@ export function bindDashboardGrid(api, group, options = {}) {
             },
             move: false,
         };
+        // A TOP or LEFT edge moves the slab's origin, and the engine refuses to
+        // move a locked tile: the move never landed, only the resize did, and a
+        // section pulled up by its caption grew DOWNWARD a row per pointer step
+        // — 18 rows for a 2-row pull (identification round, F16). Unlocked for
+        // its own gesture, as a move is; relocked on release.
+        if (edges.n || edges.w)
+            it.locked = false;
         capturePointer(slabGesture.pointerId);
         api.container.style.cursor = cursorFor(edges);
     };
@@ -1388,6 +1395,29 @@ export function bindDashboardGrid(api, group, options = {}) {
         if (it)
             it.locked = true;
     };
+    /** The cell a slab move asked for and could not have — painted so the refusal is visible; null clears it. */
+    let refusal = null;
+    const showRefusal = (cell, w, h) => {
+        const layer = htmlLayer();
+        if (!cell || !layer) {
+            refusal === null || refusal === void 0 ? void 0 : refusal.remove();
+            refusal = null;
+            api.container.style.cursor = slabGesture ? 'grabbing' : '';
+            return;
+        }
+        if (!refusal || refusal.parentElement !== layer) {
+            refusal === null || refusal === void 0 ? void 0 : refusal.remove();
+            refusal = document.createElement('div');
+            refusal.className = 'axdb-ph axdb-ph--no';
+            layer.prepend(refusal);
+        }
+        const r = cellToRect({ x: cell.x, y: cell.y, w, h }, frame(), geom(), rows());
+        refusal.style.left = `${r.x}px`;
+        refusal.style.top = `${r.y}px`;
+        refusal.style.width = `${r.width}px`;
+        refusal.style.height = `${r.height}px`;
+        api.container.style.cursor = 'not-allowed';
+    };
     const slabMove = (ev) => {
         const g = slabGesture;
         if (!g)
@@ -1406,8 +1436,26 @@ export function bindDashboardGrid(api, group, options = {}) {
         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();
+            if (cell.x !== it.x || cell.y !== it.y) {
+                // The cell under the pointer, else the nearest legal one — a widget
+                // slides along its row past a locked tile; a section grabbed 60 px
+                // from its left edge used to have its right edge refused by the
+                // locked panel at every cell and simply not move, with nothing on
+                // screen to say why (identification round, D6/D7). When even that
+                // fails the wanted cell is painted as refused.
+                // Along its ROW only: a section dragged LEFT that wandered DOWN its
+                // column (the row search) read as the wrong tile moving.
+                const was = { x: it.x, y: it.y };
+                const moved = engine.moveCheck(g.id, cell.x, cell.y, { gate: false }).changed || placeOnRow(g.id, cell.x, cell.y, it.w);
+                if (moved)
+                    project();
+                // STUCK: the pointer asks for another cell and the slab did not budge
+                // (placeOnRow counts "already on a legal cell" as placed) — paint what
+                // was asked for as refused.
+                const now = engine.getItem(g.id);
+                const stuck = !!now && now.x === was.x && now.y === was.y && (cell.x !== was.x || cell.y !== was.y);
+                showRefusal(stuck ? cell : null, it.w, it.h);
+            }
             syncPlaceholder();
             return;
         }
@@ -1455,10 +1503,10 @@ export function bindDashboardGrid(api, group, options = {}) {
         if (!g)
             return;
         slabGesture = null;
+        showRefusal(null, 0, 0);
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
-        if (g.move)
-            relockSlab(g.id);
+        relockSlab(g.id);
         if (!g.started) {
             engine.endGesture();
             return;
@@ -1486,8 +1534,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         slabGesture = null;
         releasePointer(g.pointerId);
         api.container.style.cursor = '';
-        if (g.move)
-            relockSlab(g.id);
+        relockSlab(g.id);
         if (g.started)
             engine.cancelGesture();
         else
@@ -2507,6 +2554,14 @@ export function bindDashboardGrid(api, group, options = {}) {
         return {
             groupId: group.id,
             baseline: () => startCells,
+            cell: () => {
+                const it = engine.getItem(node.id);
+                return it ? { x: it.x, y: it.y, w: it.w, h: it.h } : null;
+            },
+            rect: () => {
+                const it = engine.getItem(node.id);
+                return it ? cellToRect(it, frame(), geom(), rows()) : null;
+            },
             place: (cell) => {
                 if (!engine.getItem(node.id) && !engine.add({ id: node.id, x: 0, y: engine.rows(), w: cell.w, h: cell.h }))
                     return false;
@@ -2737,23 +2792,37 @@ export function bindDashboardGrid(api, group, options = {}) {
     selfPeerRef = selfPeer;
     // The board's gap, for chrome that must fit BETWEEN tiles (the outside grip tab).
     api.container.style.setProperty('--axdb-gap', `${gap}px`);
+    /** A press on one of our containers' strips, claimed so the renderer stays out of it. */
+    let stripPress = false;
     const tool = {
         id: `dashboard-grid:${group.id}:${++binderSeq}`,
         priority: 2, // point-specific claim — outranks mode-style tools (see ext/tools.ts)
         hitTest(ev, hit) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             if (disposed)
                 return false;
-            if (gesture || slabGesture || forwardSlab)
+            if (gesture || slabGesture || forwardSlab || stripPress)
                 return true; // own the rest of an in-flight gesture
+            // A press on one of OUR containers' TAB STRIPS is ours to CLAIM and then
+            // leave alone: the strip's own listeners run the click, the tab drag and
+            // the container move. Left unclaimed (ownsPress calls a strip "content")
+            // the renderer's ladder cleared the selection and armed its empty-canvas
+            // PAN, and the camera slid 10–20 px under every tab drag — the reorder
+            // mark lost after a detour, a release outside the canvas that committed,
+            // the strip end reading as the right band (identification round, 2026-09-09).
+            const stripEl = (_d = (_c = (_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, '.axdb-tabs')) !== null && _d !== void 0 ? _d : null;
+            if (stripEl) {
+                const cid = stripEl.getAttribute('data-tabs-id');
+                return !!cid && ((_e = group.members) !== null && _e !== void 0 ? _e : new Set()).has(cid) && api.container.contains(stripEl);
+            }
             if (!ownsPress(api.container, diagram, ev, hit))
                 return false;
             // A press on one of OUR sections' caption bands is ours by the DOM: a
             // 'tab' band sits above the frame, over the gap or the tile above,
             // where the geometry says otherwise.
-            const chrome = (_c = (_b = (_a = ev.source) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, '.axdb-slab > .axdb-slab-h, .axdb-slab > .axdb-rs');
-            const chromeId = (_d = chrome === null || chrome === void 0 ? void 0 : chrome.parentElement) === null || _d === void 0 ? void 0 : _d.getAttribute('data-slab-id');
-            const mine = !!chromeId && ((_e = group.members) !== null && _e !== void 0 ? _e : new Set()).has(chromeId);
+            const chrome = (_h = (_g = (_f = ev.source) === null || _f === void 0 ? void 0 : _f.target) === null || _g === void 0 ? void 0 : _g.closest) === null || _h === void 0 ? void 0 : _h.call(_g, '.axdb-slab > .axdb-slab-h, .axdb-slab > .axdb-rs');
+            const chromeId = (_j = chrome === null || chrome === void 0 ? void 0 : chrome.parentElement) === null || _j === void 0 ? void 0 : _j.getAttribute('data-slab-id');
+            const mine = !!chromeId && ((_k = group.members) !== null && _k !== void 0 ? _k : new Set()).has(chromeId);
             if (mine)
                 return true;
             // Someone else's SECTION HANDLE is never ours to claim. A tab
@@ -2766,7 +2835,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (chromeId && (chrome === null || chrome === void 0 ? void 0 : chrome.classList.contains('axdb-rs')))
                 return false;
             if (hit.node) {
-                if (((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(hit.node.id))
+                if (((_l = group.members) !== null && _l !== void 0 ? _l : new Set()).has(hit.node.id))
                     return true;
                 // A press on a tile that belongs to a NESTED board must reach that
                 // board's tool. The dead-zone claim below deadens the slab's EMPTY
@@ -2775,7 +2844,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // parent's tool won the registration-order tie and the child's resize
                 // never armed; grid-options binds parent-first and worked by
                 // accident).
-                for (const p of (_g = BOARD_REGISTRY.get(api.container)) !== null && _g !== void 0 ? _g : []) {
+                for (const p of (_m = BOARD_REGISTRY.get(api.container)) !== null && _m !== void 0 ? _m : []) {
                     if (p !== selfPeer && p.hasItem(hit.node.id))
                         return false;
                 }
@@ -2788,8 +2857,8 @@ export function bindDashboardGrid(api, group, options = {}) {
             // divider press in a split section (dead dividers) and, near the
             // section's edge, turned it into a section resize (the width changed
             // while a control's height was being dragged — Quantia, Groups page).
-            for (const p of (_h = BOARD_REGISTRY.get(api.container)) !== null && _h !== void 0 ? _h : []) {
-                if (p !== selfPeer && ((_j = group.members) !== null && _j !== void 0 ? _j : new Set()).has(p.group.id) && p.containsWorld(ev.world.x, ev.world.y))
+            for (const p of (_o = BOARD_REGISTRY.get(api.container)) !== null && _o !== void 0 ? _o : []) {
+                if (p !== selfPeer && ((_p = group.members) !== null && _p !== void 0 ? _p : new Set()).has(p.group.id) && p.containsWorld(ev.world.x, ev.world.y))
                     return false;
             }
             // Claim (and deaden) empty presses inside a member group's frame so the
@@ -2801,34 +2870,38 @@ 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, _z;
+            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, _0;
             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);
+            if ((_c = target === null || target === void 0 ? void 0 : target.closest) === null || _c === void 0 ? void 0 : _c.call(target, '.axdb-tabs')) {
+                stripPress = true; // claimed for the strip: nothing of ours starts
+                return;
+            }
             // A press on a painted grip names its widget by the DOM: an OUTSIDE tab
             // sits above the card's box, where the hit test sees the gap or the
             // neighbour above.
             const gripHost = gripHostOf(target);
-            const gripId = (_c = gripHost === null || gripHost === void 0 ? void 0 : gripHost.getAttribute('data-node-id')) !== null && _c !== void 0 ? _c : null;
-            const onGrip = !!gripId && ((_d = group.members) !== null && _d !== void 0 ? _d : new Set()).has(gripId);
+            const gripId = (_d = gripHost === null || gripHost === void 0 ? void 0 : gripHost.getAttribute('data-node-id')) !== null && _d !== void 0 ? _d : null;
+            const onGrip = !!gripId && ((_e = group.members) !== null && _e !== void 0 ? _e : new Set()).has(gripId);
             // A SECTION's corner handle sits on top of whatever tile shares that
             // corner; the DOM target names the section, the hit test the tile.
-            const sectionHandle = (_e = target === null || target === void 0 ? void 0 : target.closest) === null || _e === void 0 ? void 0 : _e.call(target, '.axdb-slab > .axdb-rs');
+            const sectionHandle = (_f = target === null || target === void 0 ? void 0 : target.closest) === null || _f === void 0 ? void 0 : _f.call(target, '.axdb-slab > .axdb-rs');
             // A SECTION's CAPTION BAND names its section the same way — a 'tab'
             // band sits above the frame, over the gap or the tile above. An action
             // button in it fires and does nothing else.
-            const captionBand = (_f = target === null || target === void 0 ? void 0 : target.closest) === null || _f === void 0 ? void 0 : _f.call(target, '.axdb-slab > .axdb-slab-h');
-            const captionId = (_h = (_g = captionBand === null || captionBand === void 0 ? void 0 : captionBand.parentElement) === null || _g === void 0 ? void 0 : _g.getAttribute('data-slab-id')) !== null && _h !== void 0 ? _h : null;
-            const ownCaption = !!captionId && ((_j = group.members) !== null && _j !== void 0 ? _j : new Set()).has(captionId);
+            const captionBand = (_g = target === null || target === void 0 ? void 0 : target.closest) === null || _g === void 0 ? void 0 : _g.call(target, '.axdb-slab > .axdb-slab-h');
+            const captionId = (_j = (_h = captionBand === null || captionBand === void 0 ? void 0 : captionBand.parentElement) === null || _h === void 0 ? void 0 : _h.getAttribute('data-slab-id')) !== null && _j !== void 0 ? _j : null;
+            const ownCaption = !!captionId && ((_k = group.members) !== null && _k !== void 0 ? _k : new Set()).has(captionId);
             // (An action button never reaches here: it is pass-through, and its own
             // `click` fires onCaptionAction — see captionPassThrough.)
             if ((!hit.node && !onGrip) || sectionHandle || ownCaption) {
                 // A press on a SECTION — its empty band, its caption, its corner
                 // handle or its frame edge — selects the section; the handle or an
                 // edge resizes it.
-                const slabHandle = (_k = target === null || target === void 0 ? void 0 : target.closest) === null || _k === void 0 ? void 0 : _k.call(target, '.axdb-slab > .axdb-rs');
-                const slabId = (_o = (_m = (_l = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _l === void 0 ? void 0 : _l.getAttribute('data-slab-id')) !== null && _m !== void 0 ? _m : (ownCaption ? captionId : null)) !== null && _o !== void 0 ? _o : memberGroupAt(ev.world.x, ev.world.y);
-                const grp = slabId && ((_p = group.members) !== null && _p !== void 0 ? _p : new Set()).has(slabId) ? diagram.getGroup(slabId) : undefined;
+                const slabHandle = (_l = target === null || target === void 0 ? void 0 : target.closest) === null || _l === void 0 ? void 0 : _l.call(target, '.axdb-slab > .axdb-rs');
+                const slabId = (_p = (_o = (_m = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _m === void 0 ? void 0 : _m.getAttribute('data-slab-id')) !== null && _o !== void 0 ? _o : (ownCaption ? captionId : null)) !== null && _p !== void 0 ? _p : memberGroupAt(ev.world.x, ev.world.y);
+                const grp = slabId && ((_q = group.members) !== null && _q !== void 0 ? _q : new Set()).has(slabId) ? diagram.getGroup(slabId) : undefined;
                 if (slabId && grp) {
                     selectWidget(slabId);
                     api.render();
@@ -2851,7 +2924,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // forwards the pointer sequence.
                 const parent = parentPeer();
                 if ((parent === null || parent === void 0 ? void 0 : parent.selectMember) && worldInsideBoard(ev.world.x, ev.world.y)) {
-                    const ownHandle = ((_q = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _q === void 0 ? void 0 : _q.getAttribute('data-slab-id')) === group.id;
+                    const ownHandle = ((_r = slabHandle === null || slabHandle === void 0 ? void 0 : slabHandle.parentElement) === null || _r === void 0 ? void 0 : _r.getAttribute('data-slab-id')) === group.id;
                     parent.selectMember(group.id);
                     if (!isStatic && parent.beginSlabResize) {
                         const edges = ownHandle
@@ -2859,14 +2932,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)))
+                        else if (!anyEdge(edges) && captionId === group.id && ((_s = parent.beginSlabMove) === null || _s === void 0 ? void 0 : _s.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.
-                (_t = (_s = diagram).clearSelection) === null || _t === void 0 ? void 0 : _t.call(_s);
+                (_u = (_t = diagram).clearSelection) === null || _u === void 0 ? void 0 : _u.call(_t);
                 selectWidget(undefined);
                 api.render();
                 return;
@@ -2875,17 +2948,17 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (!node)
                 return;
             selectWidget(node.id); // a press selects, whether or not it starts a gesture
-            if (((_u = node.state) === null || _u === void 0 ? void 0 : _u.locked) === true)
+            if (((_v = node.state) === null || _v === void 0 ? void 0 : _v.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 = !!((_v = target === null || target === void 0 ? void 0 : target.closest) === null || _v === void 0 ? void 0 : _v.call(target, '.axdb-rs'));
+            const onHandle = !!((_w = target === null || target === void 0 ? void 0 : target.closest) === null || _w === void 0 ? void 0 : _w.call(target, '.axdb-rs'));
             const hostEl = hostOf(node.id);
-            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;
+            const resizable = ((_x = node.getMetadata) === null || _x === void 0 ? void 0 : _x.call(node, 'widgetResizable')) !== false;
+            const movable = ((_y = node.getMetadata) === null || _y === void 0 ? void 0 : _y.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.
@@ -2933,7 +3006,7 @@ 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: (_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 },
+                spans: { w: (_z = it === null || it === void 0 ? void 0 : it.w) !== null && _z !== void 0 ? _z : 1, h: (_0 = it === null || it === void 0 ? void 0 : it.h) !== null && _0 !== void 0 ? _0 : 1 },
                 removedFromBoard: false,
                 leg: null,
                 strip: null,
@@ -2946,6 +3019,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         },
         onPointerMove(ev) {
             var _a;
+            if (stripPress)
+                return;
             if (forwardSlab)
                 (_a = forwardSlab.slabMove) === null || _a === void 0 ? void 0 : _a.call(forwardSlab, ev);
             else if (slabGesture)
@@ -2954,20 +3029,45 @@ export function bindDashboardGrid(api, group, options = {}) {
                 onToolMove(ev);
         },
         onPointerUp() {
-            var _a;
-            if (forwardSlab) {
-                (_a = forwardSlab.slabUp) === null || _a === void 0 ? void 0 : _a.call(forwardSlab);
-                forwardSlab = null;
+            if (stripPress) {
+                stripPress = false;
+                return;
+            }
+            try {
+                onPointerUpInner();
+            }
+            finally {
+                flushDeferredRebuild();
+                // EVERY press ends disarmed. The press armed the glide (a task ahead
+                // of any displacement — see onPointerDown); a drop disarms on its own
+                // path, but a press that never travelled — a plain CLICK — left it
+                // armed for good, and every later left/top write eased: a tab switch
+                // slid its page in from 20,000 px off canvas over 280 ms (0.4.36).
+                disarmGlideSoon();
             }
-            else if (slabGesture)
-                slabUp();
-            else
-                onToolUp();
         },
         onCancel() {
-            cancelActiveGesture();
+            stripPress = false;
+            try {
+                cancelActiveGesture();
+            }
+            finally {
+                flushDeferredRebuild();
+                disarmGlideSoon();
+            }
         },
     };
+    const onPointerUpInner = () => {
+        var _a;
+        if (forwardSlab) {
+            (_a = forwardSlab.slabUp) === null || _a === void 0 ? void 0 : _a.call(forwardSlab);
+            forwardSlab = null;
+        }
+        else if (slabGesture)
+            slabUp();
+        else
+            onToolUp();
+    };
     const unregisterTool = registerTool(tool);
     /**
      * Edge affordance: the cursor says which border a press would take, the
@@ -3250,11 +3350,42 @@ export function bindDashboardGrid(api, group, options = {}) {
         // 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;
-        const ensureLeg = (world) => {
-            if (!leg)
-                leg = adopt({ id: plan.arrivingId }, world, plan.size, { fit: 'shrink', anchor: 'top' });
+        /** 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) };
@@ -3337,13 +3468,60 @@ export function bindDashboardGrid(api, group, options = {}) {
                 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, rowsWithout(plan.arrivingId));
+            const rows = Math.max(TEAR_OUT_MIN_ROWS, baseRows());
             const w = dockSpan.w;
             const h = dockSpan.h;
             if (cy - v.top <= ROOT_TOP)
@@ -3390,6 +3568,11 @@ export function bindDashboardGrid(api, group, options = {}) {
                 : { 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.
+            if (!clientInsideCanvasGrace(cx, cy))
+                return { kind: 'off' };
             const target = targetAt(world.x, world.y);
             const home = !target && worldInsideGroup(from, world.x, world.y);
             // A strip is the most precise target there is: anyone's wins outright.
@@ -3424,9 +3607,12 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
             if (home)
                 return { kind: 'home' };
+            const foreign = foreignAt(world.x, world.y);
+            if (foreign && (!worldInsideBoard(world.x, world.y) || foreign.frameArea() < boardArea()))
+                return { kind: 'board', peer: foreign };
             return { kind: 'board' };
         };
-        const zoneKey = (z) => JSON.stringify(z, (k, v) => (k === 'target' ? v.id : v));
+        const zoneKey = (z) => JSON.stringify(z, (k, v) => (k === 'target' ? v.id : k === 'peer' ? v.group.id : v));
         // DOCKING PUSHES SECTIONS. A section is a locked tile so that a widget
         // never pushes it; a group docked against the board's edge is the one
         // gesture that must — everything below the top band moves down. For the
@@ -3526,7 +3712,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         };
         const previewSplit = (z, world) => {
             const it = engine.getItem(z.target.id);
-            const l = ensureLeg(world);
+            const l = ensureLeg(world, null);
             if (!it || !l)
                 return false;
             split = { id: z.target.id, before: { x: it.x, y: it.y, w: it.w, h: it.h }, frameBefore: frameOfGroup(z.target), keep: z.keep };
@@ -3545,14 +3731,14 @@ export function bindDashboardGrid(api, group, options = {}) {
         let zone = { kind: 'board' };
         let key = zoneKey(zone);
         const applyZone = (z, world) => {
-            var _a;
+            var _a, _b, _c;
             const k = zoneKey(z);
             const same = k === key;
             key = k;
             zone = z;
             if (same) {
                 if (z.kind === 'board')
-                    (_a = ensureLeg(world)) === null || _a === void 0 ? void 0 : _a.move(world);
+                    (_b = ensureLeg(world, (_a = z.peer) !== null && _a !== void 0 ? _a : null)) === null || _b === void 0 ? void 0 : _b.move(world);
                 return;
             }
             undoSplitPreview();
@@ -3583,7 +3769,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                     break;
                 }
                 case 'root': {
-                    const l = ensureLeg(world);
+                    const l = ensureLeg(world, null);
                     if (l) {
                         unlockGroups();
                         l.place(z.cell);
@@ -3600,10 +3786,11 @@ export function bindDashboardGrid(api, group, options = {}) {
                     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);
+                    const l = ensureLeg(world, (_c = z.peer) !== null && _c !== void 0 ? _c : null);
                     l === null || l === void 0 ? void 0 : l.enter(world);
                     break;
                 }
@@ -3626,7 +3813,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             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 === 'root' && !leg) || (zone.kind === 'board' && (!leg || !worldInsideBoardGrace(world.x, world.y))));
+            chip.classList.toggle('axdb-out', zone.kind === 'home' || zone.kind === 'off' || (zone.kind === 'root' && !leg) || (zone.kind === 'board' && (!leg || landingHidden())));
             api.render();
         };
         const done = (changed, kind) => {
@@ -3638,7 +3825,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             (_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;
+            var _a, _b, _c, _d;
             detach();
             chip.remove();
             hideOverlay();
@@ -3650,7 +3837,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             const z = commit ? zoneAt(last.x, last.y, world) : { kind: 'home' };
             if (z.kind !== 'root')
                 undoInsertRows();
-            if (!commit || z.kind === 'home' || (z.kind === 'root' && !ensureLeg(world)) || (z.kind === 'board' && (!ensureLeg(world) || !worldInsideBoardGrace(world.x, world.y)))) {
+            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();
                 relockGroups();
@@ -3680,7 +3867,9 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // other. The preview already holds both in the engine; commit them.
                 if (!split || split.id !== z.target.id || zoneKey(zone) !== zoneKey(z))
                     applyZone(z, world);
-                const fin = (_a = leg === null || leg === void 0 ? void 0 : leg.finalize()) !== null && _a !== void 0 ? _a : null;
+                hideOverlay(); // a re-applied zone repaints its preview; the release is not a preview
+                plan.markDrop(null, null);
+                const fin = (_b = leg === null || leg === void 0 ? void 0 : leg.finalize()) !== null && _b !== void 0 ? _b : null;
                 const it = engine.getItem(z.target.id);
                 const before = split;
                 if (it)
@@ -3706,13 +3895,15 @@ export function bindDashboardGrid(api, group, options = {}) {
             // ROOT DOCK or a free cell on the board: the leg sits where it will land.
             if (zoneKey(zone) !== zoneKey(z))
                 applyZone(z, world);
-            const fin = (_b = leg === null || leg === void 0 ? void 0 : leg.finalize()) !== null && _b !== void 0 ? _b : null;
+            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;
             relockGroups();
             if (!fin) {
                 done(false, 'cancel');
                 return;
             }
-            const planned = plan.commands(fin.cell, fin.rect, group.id);
+            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, ...groupCommands(fin), ...planned.move, ...planned.collapse]), 'commit');
         };
         const onUp = () => finish(true);
@@ -3917,12 +4108,33 @@ export function bindDashboardGrid(api, group, options = {}) {
     });
     /** Rebuild the engine from the members' persisted cells. `pack` runs gravity
      *  over the result (boot, float→off); a plain sync keeps the cells verbatim. */
+    /**
+     * A rebuild asked for while a gesture is live waits for the gesture. The
+     * pointer's own crossing re-lays boards — adopting a widget into the Nested
+     * page moved the inner tabs container, the tabs runtime re-placed its
+     * pages, and the inner page's binder rebuilt from the model: its gesture
+     * cancelled mid-drag, the dragged widget re-added, the ghost class gone
+     * and the target's placeholder leaked through release and undo
+     * (identification round, L5). The frame change itself is answered by
+     * `onBoundsChanged` (a re-projection); the model is rebuilt afterwards.
+     */
+    let rebuildDeferred = null;
+    const flushDeferredRebuild = () => {
+        if (!rebuildDeferred || gesture || slabGesture)
+            return;
+        const { pack } = rebuildDeferred;
+        rebuildDeferred = null;
+        rebuild(pack);
+    };
     const rebuild = (pack) => {
         var _a, _b, _c, _d;
         if (disposed)
             return;
-        if (gesture)
-            cancelActiveGesture(false);
+        if (gesture || slabGesture) {
+            rebuildDeferred = { pack: pack || (rebuildDeferred === null || rebuildDeferred === void 0 ? void 0 : rebuildDeferred.pack) === true };
+            project();
+            return;
+        }
         applyFluidFrame();
         const items = [];
         for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {