@grafloria/element 0.4.32 → 0.4.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.32",
+  "version": "0.4.34",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",

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

@@ -1099,6 +1099,7 @@ export function createDashboardHandle(ctx) {
                 return { move, collapse: remaining.length > 0 ? [] : collapseOf(boardId) };
             },
             joinTargets: [...ctx.layoutOf.keys()].filter((id) => { var _a, _b; return id !== containerId && id !== pageId && ((_a = ctx.layoutOf.get(id)) !== null && _a !== void 0 ? _a : (_b = specById.get(id)) === null || _b === void 0 ? void 0 : _b.layout) === 'tabs' && !!model.getGroup(id) && !insidePage(id); }),
+            stripHeight: (targetId) => tabStripReserve(ctx.tabsOf.get(targetId), Math.max(1, liveCount(targetId))),
             stripIndex: (targetId, cx, cy) => {
                 const strip = ctx.tabStrips.get(targetId);
                 if (!strip)
@@ -1322,7 +1323,7 @@ export function createDashboardHandle(ctx) {
         },
         focusWidget(id) {
             var _a;
-            const b = binders.get((_a = viewOfWidget.get(id)) !== null && _a !== void 0 ? _a : '');
+            const b = binders.get((_a = boardOfWidget(id)) !== null && _a !== void 0 ? _a : '');
             if (!b)
                 return false;
             if (b.focusWidget(id))
@@ -1343,7 +1344,7 @@ export function createDashboardHandle(ctx) {
                     b.selectWidget(undefined);
                 return true;
             }
-            const b = binders.get((_a = viewOfWidget.get(id)) !== null && _a !== void 0 ? _a : '');
+            const b = binders.get((_a = boardOfWidget(id)) !== null && _a !== void 0 ? _a : '');
             return !!b && b.selectWidget(id);
         },
         getSelectedWidget() {
@@ -1627,16 +1628,39 @@ export function createDashboardHandle(ctx) {
             ctx.hosts.clear();
         },
     };
+    /**
+     * The board that HOLDS a widget NOW — live membership, the way toJSON reads
+     * it. A cross-board drag moves membership through the binder's own
+     * commands, which the mount-time map never sees; a handle that kept asking
+     * the widget's FIRST board answered `cell: null` for a tile that had just
+     * been dropped into a page. The map is the fallback for a widget that is
+     * not a member yet (an add still committing).
+     */
+    const boardOfWidget = (id) => {
+        var _a, _b, _c, _d;
+        for (const [cid, g] of ctx.boardGroups)
+            if ((_a = g.members) === null || _a === void 0 ? void 0 : _a.has(id))
+                return cid;
+        const model = (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.getModel();
+        if (model)
+            for (const vid of binders.keys())
+                if ((_d = (_c = model.getGroup(vid)) === null || _c === void 0 ? void 0 : _c.members) === null || _d === void 0 ? void 0 : _d.has(id))
+                    return vid;
+        return viewOfWidget.get(id);
+    };
     function makeWidgetHandle(id) {
         const spec = specById.get(id);
-        const viewId = viewOfWidget.get(id);
-        if (!spec || !viewId)
+        if (!spec || !boardOfWidget(id))
             return undefined;
-        const binder = () => binders.get(viewId);
+        const board = () => { var _a; return (_a = boardOfWidget(id)) !== null && _a !== void 0 ? _a : ''; };
+        const binder = () => binders.get(board());
         const node = () => { var _a; return (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel().getNode(id); };
         return {
             id,
-            viewId,
+            get viewId() {
+                var _a;
+                return (_a = boardOfWidget(id)) !== null && _a !== void 0 ? _a : '';
+            },
             get node() {
                 return node();
             },
@@ -1715,8 +1739,8 @@ export function createDashboardHandle(ctx) {
                     // the parent board and the parent's re-pack, as ONE undoable batch.
                     // Undo restores the groups as fresh GroupModels, so the history
                     // handler re-binds the container's grid (ctx.rebindContainer).
-                    const parentGroup = ctx.boardGroups.get(viewId);
-                    const parentBinder = binders.get(viewId);
+                    const parentGroup = ctx.boardGroups.get(board());
+                    const parentBinder = binders.get(board());
                     const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
                     if (!parentGroup || !parentBinder || !model)
                         return;
@@ -1750,7 +1774,7 @@ export function createDashboardHandle(ctx) {
                         }
                     };
                     removeSubtree(id);
-                    const registry = registryOf(id, viewId, spec);
+                    const registry = registryOf(id, board(), spec);
                     cmds.push(...nodeRemovals, ...unregisters, new RegisterWidgetCommand(registry, 'unregister'));
                     (_c = binders.get(id)) === null || _c === void 0 ? void 0 : _c.dispose();
                     binders.delete(id);
@@ -1761,7 +1785,7 @@ export function createDashboardHandle(ctx) {
                     return;
                 }
                 const n = node();
-                const group = ctx.boardGroups.get(viewId);
+                const group = ctx.boardGroups.get(board());
                 const b = binder();
                 if (!n || !group || !b)
                     return;
@@ -1774,11 +1798,11 @@ export function createDashboardHandle(ctx) {
                 // The un-registration is the LAST command so that undo — which runs
                 // the batch in reverse — re-registers the spec BEFORE the node and its
                 // membership come back and the painter is asked to paint it (D2).
-                const registry = registryOf(id, viewId, spec);
+                const registry = registryOf(id, board(), spec);
                 // …and the page it emptied, if it was one, closes with it — in which
                 // case everything rides INSIDE one sequence, or the batch could never
                 // undo (a membership command cannot undo once its group is gone).
-                const closing = (_g = (_f = ctx.closePageIfEmptied) === null || _f === void 0 ? void 0 : _f.call(ctx, viewId, id)) !== null && _g !== void 0 ? _g : [];
+                const closing = (_g = (_f = ctx.closePageIfEmptied) === null || _f === void 0 ? void 0 : _f.call(ctx, board(), id)) !== null && _g !== void 0 ? _g : [];
                 const cmds = [
                     ...survivors,
                     new RemoveFromGroupCommand(group.id, id),

package/src/lib/dashboard-kit/grid-binder.d.ts

@@ -567,6 +567,8 @@ export interface TearOutPlan {
     markDrop(targetId: string | null, index: number | null): void;
     /** The tab index a CLIENT point means along `targetId`'s strip — null when the point is not over that strip. */
     stripIndex(targetId: string, clientX: number, clientY: number): number | null;
+    /** The strip's height on `targetId`, px — the band above its body. */
+    stripHeight(targetId: string): number;
     /** The commands that REORDER the page to `index` along its own strip. Empty when nothing changes. */
     reorder(index: number): Command[];
     /**
@@ -650,17 +652,34 @@ interface AdoptedLeg {
         x: number;
         y: number;
     }): void;
+    /** Put the tile at a PRESCRIBED cell (a split's half, a docking band): sized to it, unlocked tiles pushed. Answers whether it sits there. */
+    place(cell: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }): boolean;
+    /** Every other tile's cell before the ghost entered — the layout a row insert translates. */
+    baseline(): Map<string, CellRect>;
     /** Undo the adoption: target board back to its pre-entry layout. */
     abort(): void;
     /**
      * Close the leg for commit: returns the target-side displaced commands, the
-     * tile's final cell and its projected rect. Null when the tile is somehow
-     * gone (treat as abort).
+     * tile's final cell and its projected rect — and the member GROUPS the
+     * adoption moved (the node commands skip groups; a dock that pushed sections
+     * commits them through these). Null when the tile is somehow gone.
      */
     finalize(): {
         commands: Command[];
         cell: CellRect;
         rect: WorldRect;
+        groups: Array<{
+            id: string;
+            cellBefore: CellRect;
+            cellAfter: CellRect;
+            frameBefore: WorldRect;
+            frameAfter: WorldRect;
+        }>;
     } | null;
 }
 /**

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

@@ -394,7 +394,38 @@ export function bindDashboardGrid(api, group, options = {}) {
         return e;
     };
     /** The effective row bound a gesture must respect: the strip's, else the fit capacity. */
-    const bound = () => maxRows !== null && maxRows !== void 0 ? maxRows : capacity;
+    const bound = () => { var _a; return (_a = squeezeRoom !== null && squeezeRoom !== void 0 ? squeezeRoom : maxRows) !== null && _a !== void 0 ? _a : capacity; };
+    /** Move the LIVE bound (the engine's too), the way escalation does. */
+    const setLiveBound = (n) => {
+        maxRows = n;
+        engine.maxRows = n;
+    };
+    /**
+     * Rows a SQUEEZE may use while a tile arrives by hand — the engine's bound
+     * only. The binder's `maxRows` also sets the GEOMETRY (`rows()`), and
+     * raising it to the room made every tile shrink to a 29-row grid the
+     * moment the ghost entered; the rows must shrink only as far as the
+     * content actually reaches.
+     */
+    let squeezeRoom;
+    const setSqueeze = (n) => {
+        squeezeRoom = n;
+        engine.maxRows = n !== null && n !== void 0 ? n : maxRows;
+    };
+    /**
+     * The rows a NESTED board's live frame holds at the row floor. A page's
+     * height is its container's and a section's is its slab's, so a full one
+     * cannot ask for room the way the main fit board does (`fitCapacity` reads
+     * the design height, which a nested board hands to its parent as 0).
+     */
+    const elasticRows = () => {
+        if (designRows === undefined)
+            return undefined;
+        const fh = frame().height;
+        if (fh <= 0)
+            return undefined;
+        return Math.max(1, Math.floor((fh - 2 * padding + gap) / (minRowHeight + gap)));
+    };
     /**
      * The rows the design height can hold at the row floor — what 'bounded' fit
      * enforces. A board is never bounded BELOW what it already holds: a document
@@ -2404,6 +2435,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     const adopt = (
     // Only the id is used: a tab page arriving here is a GROUP, not a node.
     node, world, pxSize, opts = {}) => {
+        var _a;
         if (disposed)
             return null;
         const f = frame();
@@ -2416,8 +2448,29 @@ export function bindDashboardGrid(api, group, options = {}) {
         if (b !== undefined)
             span.h = Math.max(1, Math.min(b, span.h));
         engine.beginGesture(); // pre-entry snapshot — abort() restores it
-        const entered = engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: span.h });
+        // A FULL nested board SQUEEZES for a tile arriving by hand, the way a fit
+        // board squeezes for its own. Its bound is the design the escalation path
+        // grows through the parent, and a page has no parent tile to grow (its
+        // height is its container's): so the rows shrink toward the floor instead
+        // of refusing the drop with no sign of why — the fluid demo's Filters page
+        // took a KPI dragged onto it and showed nothing at all. abort() puts the
+        // bound back; a commit keeps what the board then holds.
+        const squeezeBefore = squeezeRoom;
+        let entered = engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: span.h });
+        // Only a board with NO parent tile to grow through squeezes — a page. A
+        // full SECTION keeps refusing (grid-options s05: refused, then joined once
+        // a strip was removed); growing its slab for a dropped tile is the
+        // escalation path's, not a squeeze's, and is not built yet.
+        if (!entered && !parentPeer()) {
+            const room = elasticRows();
+            if (room !== undefined && room > ((_a = bound()) !== null && _a !== void 0 ? _a : 0)) {
+                setSqueeze(room);
+                span.h = Math.max(1, Math.min(room, span.h));
+                entered = engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: span.h });
+            }
+        }
         if (!entered) {
+            setSqueeze(squeezeBefore);
             engine.endGesture();
             return null; // a bounded, full board refuses the adoption
         }
@@ -2453,6 +2506,34 @@ export function bindDashboardGrid(api, group, options = {}) {
         syncPlaceholder();
         return {
             groupId: group.id,
+            baseline: () => startCells,
+            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;
+                const it = engine.getItem(node.id);
+                if (!it)
+                    return false;
+                // Shrink, move, then grow. A resize is clamped at the board's edge
+                // where the ghost SITS, so a cell wider than fits there (a full-width
+                // dock from a ghost parked mid-board) is reached by moving first —
+                // and a cell narrower than the ghost by shrinking first, so the move
+                // itself fits.
+                const w0 = Math.min(it.w, cell.w);
+                const h0 = Math.min(it.h, cell.h);
+                if (w0 !== it.w || h0 !== it.h)
+                    engine.resizeCheck(node.id, w0, h0);
+                const moved = engine.getItem(node.id);
+                if (moved && (moved.x !== cell.x || moved.y !== cell.y))
+                    engine.moveCheck(node.id, cell.x, cell.y, { gate: false });
+                const now = engine.getItem(node.id);
+                if (now && (now.w !== cell.w || now.h !== cell.h))
+                    engine.resizeCheck(node.id, cell.w, cell.h);
+                lastWant = null;
+                project();
+                syncPlaceholder();
+                const at = engine.getItem(node.id);
+                return !!at && at.x === cell.x && at.y === cell.y && at.w === cell.w && at.h === cell.h;
+            },
             move: (w) => {
                 const item = engine.getItem(node.id);
                 if (!item)
@@ -2490,6 +2571,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 if (engine.getItem(node.id))
                     engine.remove(node.id);
                 engine.cancelGesture(); // pre-entry layout, memory cleared
+                setSqueeze(squeezeBefore);
                 adoptedGhostId = null;
                 disarmGlideSoon();
                 project();
@@ -2506,11 +2588,34 @@ export function bindDashboardGrid(api, group, options = {}) {
                 const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
                 const rect = cellToRect(item, frame(), geom(), rows());
                 const commands = buildCommitCommands(deltasSince(startCells, startGeom, node.id));
+                const groups = [];
+                for (const [id, before] of startCells) {
+                    if (!isGroupMember(id))
+                        continue;
+                    const it = engine.getItem(id);
+                    const g0 = startGeom.get(id);
+                    if (!it || !g0)
+                        continue;
+                    if (it.x === before.x && it.y === before.y && it.w === before.w && it.h === before.h)
+                        continue;
+                    groups.push({
+                        id,
+                        cellBefore: before,
+                        cellAfter: { x: it.x, y: it.y, w: it.w, h: it.h },
+                        frameBefore: { x: g0.pos.x, y: g0.pos.y, width: g0.size.width, height: g0.size.height },
+                        frameAfter: cellToRect(it, frame(), geom(), rows()),
+                    });
+                }
                 engine.endGesture();
+                if (squeezeRoom !== undefined) {
+                    // What the board now HOLDS is its bound, not the squeeze's room.
+                    squeezeRoom = undefined;
+                    setLiveBound(liveBound(engine.getItems()));
+                }
                 adoptedGhostId = null;
                 disarmGlideSoon();
                 syncPlaceholder();
-                return { commands, cell, rect };
+                return { commands, cell, rect, groups };
             },
         };
     };
@@ -3136,69 +3241,374 @@ export function bindDashboardGrid(api, group, options = {}) {
             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 };
         };
-        const first = toWorld(ev.clientX, ev.clientY);
         // 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.
-        const leg = adopt({ id: plan.arrivingId }, first, plan.size, { fit: 'shrink', anchor: 'top' });
-        if (!leg)
-            return false;
+        // 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;
+        const ensureLeg = (world) => {
+            if (!leg)
+                leg = adopt({ id: plan.arrivingId }, world, plan.size, { fit: 'shrink', anchor: 'top' });
+            return leg;
+        };
+        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);
-        // Over ANOTHER tab container the page joins it instead of taking a cell:
-        // the tile leaves the board (its displaced tiles come home), the target's
-        // frame lights up and its strip marks where the tab will go.
+        const 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);
-        const targetAt = (wx, wy) => { var _a; return (_a = targets.find((t) => worldInsideGroup(t, wx, wy))) !== null && _a !== void 0 ? _a : null; };
-        let over = null;
+            .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;
+        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) };
+        };
+        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 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) => {
+            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.
+            if (target) {
+                const idx = plan.stripIndex(target.id, cx, cy);
+                if (idx !== null)
+                    return { kind: 'strip', target, index: idx };
+            }
+            else if (home) {
+                const idx = plan.stripIndex(fromGroupId, cx, cy);
+                if (idx !== null)
+                    return { kind: 'reorder', index: idx };
+            }
+            // The board's own edges beat whatever sits against them — Dockview's
+            // container edges over its groups — so a group at the top of the board
+            // still leaves the top band to the board.
+            const root = rootAt(cx, cy);
+            if (root)
+                return root;
+            if (target) {
+                const f = anchor && anchor.g === target ? anchor.frame : frameOfGroup(target);
+                const stripH = anchor && anchor.g === target ? anchor.stripH : plan.stripHeight(target.id);
+                const bodyH = Math.max(1, f.height - stripH);
+                const rx = Math.min(1, Math.max(0, (world.x - f.x) / Math.max(1, f.width)));
+                const ry = Math.min(1, Math.max(0, (world.y - f.y - stripH) / bodyH));
+                if (rx >= 1 / 3 && rx <= 2 / 3 && ry >= 1 / 3 && ry <= 2 / 3)
+                    return { kind: 'join', target };
+                const d = [['left', rx], ['right', 1 - rx], ['top', ry], ['bottom', 1 - ry]];
+                d.sort((p, q) => p[1] - q[1]);
+                const h = halves(target, d[0][0]);
+                return h ? Object.assign({ kind: 'split', target, side: d[0][0] }, h) : { kind: 'join', target };
+            }
+            if (home)
+                return { kind: 'home' };
+            return { kind: 'board' };
+        };
+        const zoneKey = (z) => JSON.stringify(z, (k, v) => (k === 'target' ? v.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
+        // preview every member group is unlocked; they are relocked when the
+        // pointer leaves the band, and their moved cells are committed with the
+        // dock.
+        let unlockedGroups = [];
+        const unlockGroups = () => {
+            if (unlockedGroups.length > 0)
+                return;
+            for (const it of engine.getItems()) {
+                if (it.id !== plan.arrivingId && it.locked && isGroupMember(it.id)) {
+                    it.locked = false;
+                    unlockedGroups.push(it.id);
+                }
+            }
+        };
+        const relockGroups = () => {
+            for (const id of unlockedGroups) {
+                const it = engine.getItem(id);
+                if (it)
+                    it.locked = true;
+            }
+            unlockedGroups = [];
+        };
+        const groupCommands = (fin, except) => fin.groups.filter((g) => g.id !== except).map((g) => new SetGroupCellCommand(g.id, g.cellBefore, g.cellAfter, g.frameBefore, g.frameAfter));
+        // 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 showJoin = (g) => {
-            if (!layer || g.id === fromGroupId)
-                return; // reordering along its own strip: the mark is enough
+        const showOverlay = (r) => {
+            if (!layer)
+                return;
             if (!joinEl) {
                 joinEl = doc.createElement('div');
                 joinEl.className = 'axdb-join';
                 layer.prepend(joinEl);
             }
-            const sz = sizeOf(g);
-            joinEl.style.left = `${g.position.x}px`;
-            joinEl.style.top = `${g.position.y}px`;
-            joinEl.style.width = `${sz.width}px`;
-            joinEl.style.height = `${sz.height}px`;
+            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 hideJoin = () => {
+        const hideOverlay = () => {
             joinEl === null || joinEl === void 0 ? void 0 : joinEl.remove();
             joinEl = null;
-            plan.markDrop(null, null);
         };
-        const setOver = (g, world) => {
-            if (g === over)
+        const undoSplitPreview = () => {
+            if (!split)
                 return;
-            over = g;
-            if (g) {
-                leg.leave();
-                showJoin(g);
-            }
-            else {
-                hideJoin();
-                leg.enter(world);
+            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);
+                it.locked = true;
             }
+            split = null;
+            project();
         };
-        const moveChip = (cx, cy) => {
-            chip.style.left = `${cx + 6}px`;
-            chip.style.top = `${cy + 6}px`;
+        const previewSplit = (z, world) => {
+            const it = engine.getItem(z.target.id);
+            const l = ensureLeg(world);
+            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 };
+            it.locked = false; // its own gesture for the moment: it may shrink and shift
+            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();
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove(); // the accent overlay says which half; the grey placeholder under it is noise
+            placeholder = null;
+            return ok;
+        };
+        let zone = { kind: 'board' };
+        let key = zoneKey(zone);
+        const applyZone = (z, world) => {
+            var _a;
+            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);
+                return;
+            }
+            undoSplitPreview();
+            undoInsertRows();
+            if (z.kind !== 'root')
+                relockGroups();
+            plan.markDrop(null, null);
+            hideOverlay();
+            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': {
+                    if (!previewSplit(z, world)) {
+                        zone = { kind: 'join', target: z.target };
+                        key = zoneKey(zone);
+                        leg === null || leg === void 0 ? void 0 : leg.leave();
+                        showOverlay(frameOfGroup(z.target));
+                        break;
+                    }
+                    showOverlay(cellToRect(z.born, frame(), geom(), rows()));
+                    break;
+                }
+                case 'root': {
+                    const l = ensureLeg(world);
+                    if (l) {
+                        unlockGroups();
+                        l.place(z.cell);
+                        insertRows(z.cell, l);
+                        project();
+                        placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
+                        placeholder = null;
+                        showOverlay(cellToRect(z.cell, frame(), geom(), rows()));
+                    }
+                    break;
+                }
+                case 'reorder':
+                    leg === null || leg === void 0 ? void 0 : leg.leave();
+                    plan.markDrop(fromGroupId, z.index);
+                    break;
+                case 'home':
+                    leg === null || leg === void 0 ? void 0 : leg.leave();
+                    break;
+                case 'board': {
+                    const l = ensureLeg(world);
+                    l === null || l === void 0 ? void 0 : l.enter(world);
+                    break;
+                }
+            }
         };
-        moveChip(ev.clientX, ev.clientY);
-        armGlide();
-        api.render();
         let last = { x: ev.clientX, y: ev.clientY };
         const detach = () => {
             window.removeEventListener('pointermove', onMove, true);
@@ -3206,85 +3616,104 @@ export function bindDashboardGrid(api, group, options = {}) {
             window.removeEventListener('pointercancel', onCancel, true);
             window.removeEventListener('keydown', onKey, true);
         };
-        let homeIndex = null;
         const onMove = (e) => {
             if (disposed)
                 return detach();
             last = { x: e.clientX, y: e.clientY };
             moveChip(e.clientX, e.clientY);
             const world = toWorld(e.clientX, e.clientY);
-            const home = worldInsideGroup(from, world.x, world.y);
-            // Over its OWN strip the tab reorders: the strip marks the slot and the
-            // tile leaves the board. Over its own body it goes home (a cancel).
-            homeIndex = home ? plan.stripIndex(fromGroupId, e.clientX, e.clientY) : null;
-            const target = home ? null : targetAt(world.x, world.y);
-            setOver(target !== null && target !== void 0 ? target : (homeIndex !== null ? from : null), world);
-            chip.classList.toggle('axdb-out', (home && homeIndex === null) || (!target && !home && !worldInsideBoardGrace(world.x, world.y)));
-            if (target)
-                plan.markDrop(target.id, plan.dropIndex(target.id, e.clientX, e.clientY));
-            else if (homeIndex !== null)
-                plan.markDrop(fromGroupId, homeIndex);
-            else if (!home)
-                leg.move(world);
+            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 === 'root' && !leg) || (zone.kind === 'board' && (!leg || !worldInsideBoardGrace(world.x, world.y))));
             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;
+            var _a, _b;
             detach();
             chip.remove();
-            hideJoin();
+            hideOverlay();
+            plan.markDrop(null, null);
             tearing = null;
             if (disposed)
                 return;
             const world = toWorld(last.x, last.y);
-            const home = worldInsideGroup(from, world.x, world.y);
-            if (commit && home && homeIndex !== null) {
-                // REORDER along its own strip.
-                leg.abort();
-                const cmds = plan.reorder(homeIndex);
+            const 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)))) {
+                undoSplitPreview();
+                leg === null || leg === void 0 ? void 0 : leg.abort();
+                relockGroups();
+                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;
-                disarmGlideSoon();
-                api.renderNow();
-                (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: changed ? 'commit' : 'cancel', kind: 'move', nodeId: pageId, changed });
+                done(changed, changed ? 'commit' : 'cancel');
                 return;
             }
-            const target = commit && !home ? targetAt(world.x, world.y) : null;
-            if (target) {
+            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.
-                const index = plan.dropIndex(target.id, last.x, last.y);
-                leg.abort();
-                const planned = plan.join(target.id, index, group.id);
-                const changed = execute('Move tab', [...planned.move, ...planned.collapse]);
-                disarmGlideSoon();
-                enforceBoardHeight();
-                persistLayouts();
-                api.renderNow();
-                (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
+                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 (!commit || home || !worldInsideBoardGrace(world.x, world.y)) {
-                leg.abort();
-                disarmGlideSoon();
-                api.renderNow();
-                (_c = options.onGesture) === null || _c === void 0 ? void 0 : _c.call(options, { type: 'cancel', kind: 'move', nodeId: pageId, changed: false });
+            if (z.kind === 'split') {
+                // SPLIT: the target keeps one half of its cell, the page's new group the
+                // 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;
+                const it = engine.getItem(z.target.id);
+                const before = split;
+                if (it)
+                    it.locked = true;
+                split = null;
+                if (!fin || !before || !it) {
+                    leg === null || leg === void 0 ? void 0 : leg.abort();
+                    done(false, 'cancel');
+                    return;
+                }
+                const keep = { x: it.x, y: it.y, w: it.w, h: it.h };
+                const planned = plan.commands(fin.cell, fin.rect, group.id);
+                const changed = execute('Split group', [
+                    ...fin.commands,
+                    ...groupCommands(fin, z.target.id),
+                    new SetGroupCellCommand(z.target.id, before.before, keep, before.frameBefore, cellToRect(keep, frame(), geom(), rows())),
+                    ...planned.move,
+                    ...planned.collapse,
+                ]);
+                done(changed, 'commit');
                 return;
             }
-            const fin = leg.finalize();
+            // 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;
+            relockGroups();
             if (!fin) {
-                disarmGlideSoon();
-                api.renderNow();
+                done(false, 'cancel');
                 return;
             }
             const planned = plan.commands(fin.cell, fin.rect, group.id);
-            // The container the page left may have been holding its last page: it
-            // goes too (the plan carries the removal's settle).
-            const changed = execute('Move tab out', [...fin.commands, ...planned.move, ...planned.collapse]);
-            disarmGlideSoon();
-            enforceBoardHeight();
-            persistLayouts();
-            api.renderNow();
-            (_d = options.onGesture) === null || _d === void 0 ? void 0 : _d.call(options, { type: 'commit', kind: 'move', nodeId: pageId, changed });
+            done(execute(z.kind === 'root' ? 'Dock tab' : 'Move tab out', [...fin.commands, ...groupCommands(fin), ...planned.move, ...planned.collapse]), 'commit');
         };
         const onUp = () => finish(true);
         const onCancel = () => finish(false);