@grafloria/element 0.4.55 → 0.4.56

package/package.json

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

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

@@ -619,6 +619,8 @@ export interface DashboardHandleContext {
     tearOutPlan?: (containerId: string, pageId: string) => TearOutPlan | null;
     /** The commands that close `boardId` when it is a tab PAGE about to lose its last member `leaving` — and its container when that was its last page. */
     closePageIfEmptied?: (boardId: string, leaving: string) => Command[];
+    /** The bookkeeping for a CONTAINER a gesture moved from one board to another (tile first, 4b-ii): its spec entry, its registry. */
+    moveContainerCommands?: (containerId: string, fromBoardId: string, toBoardId: string) => Command[];
     /** A widget dragged over a strip: hit-test, marks, and the drop that makes it a new tab. Handed to every binder. */
     tabDrop?: TabDropHooks;
     /** Set by finalize: the user's `onTabChange`, so the handle can fire it. */

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

@@ -790,6 +790,54 @@ export function createDashboardHandle(ctx) {
      * looked like. Undo reopens the page (its grid re-binds on the history event)
      * and then the widget comes back into it.
      */
+    /**
+     * A CONTAINER CROSSES BOARDS by hand (tile first, 4b-ii): a section carried
+     * into a page, a tab container into a section. The membership commands
+     * move it; this moves what the kit keeps beside the membership — the
+     * authored entry from the old board's list to the new one's, and which
+     * board the container is filed under — as a register/unregister pair, the
+     * way the tear-out plan files a group it creates. `toJSON()` reads the
+     * membership, so the document is right either way; the registry is what
+     * `addWidget` and the page-closing rule read.
+     */
+    ctx.moveContainerCommands = (containerId, fromBoardId, toBoardId) => {
+        if (!ctx.boardGroups.has(containerId))
+            return [];
+        const spec = specById.get(containerId);
+        const fromArr = ctx.boardWidgets.get(fromBoardId);
+        const toArr = ctx.boardWidgets.get(toBoardId);
+        const prevFiled = viewOfWidget.get(containerId);
+        let slot = -1;
+        const moved = {
+            register: () => {
+                viewOfWidget.set(containerId, toBoardId);
+                if (spec && fromArr) {
+                    const i = fromArr.findIndex((w) => w.id === containerId);
+                    if (i >= 0) {
+                        slot = i;
+                        fromArr.splice(i, 1);
+                    }
+                }
+                if (spec && toArr && !toArr.some((w) => w.id === containerId))
+                    toArr.push(spec);
+            },
+            unregister: () => {
+                if (prevFiled !== undefined)
+                    viewOfWidget.set(containerId, prevFiled);
+                else
+                    viewOfWidget.delete(containerId);
+                if (spec && toArr) {
+                    const i = toArr.findIndex((w) => w.id === containerId);
+                    if (i >= 0)
+                        toArr.splice(i, 1);
+                }
+                if (spec && fromArr && !fromArr.some((w) => w.id === containerId)) {
+                    fromArr.splice(slot < 0 ? fromArr.length : Math.min(slot, fromArr.length), 0, spec);
+                }
+            },
+        };
+        return [new RegisterWidgetCommand(moved, 'register')];
+    };
     ctx.closePageIfEmptied = (boardId, leaving) => {
         var _a, _b, _c, _d, _e, _f;
         const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
@@ -2303,7 +2351,7 @@ export function dashboard(options) {
                         if (e.type === 'commit')
                             reportChanged();
                         (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    }, onSelect: (id) => { var _a; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, v.id); } }), captionHooks(v.id)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, v.id, memberId)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
+                    }, onSelect: (id) => { var _a; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, v.id); } }), captionHooks(v.id)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, v.id, memberId)) !== null && _b !== void 0 ? _b : []; }, onMemberMoving: (memberId, from, to) => { var _a, _b; return (_b = (_a = ctx.moveContainerCommands) === null || _a === void 0 ? void 0 : _a.call(ctx, memberId, from, to)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
                 if (viewLayout === 'split') {
                     return bindDashboardSplit(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_h = v.columns) !== null && _h !== void 0 ? _h : columns, baseRowHeight: rowHeight, designHeight: viewH(v) }), (v.tree !== undefined ? { tree: v.tree } : {})));
                 }
@@ -2321,7 +2369,7 @@ export function dashboard(options) {
                         if (e.type === 'commit')
                             reportChanged();
                         (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    }, onSelect: (id) => { var _a, _b; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, (_b = ctx.viewOfBoard.get(w.id)) !== null && _b !== void 0 ? _b : ctx.active); } }), captionHooks((_h = ctx.viewOfBoard.get(w.id)) !== null && _h !== void 0 ? _h : ctx.active)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, w.id, memberId)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
+                    }, onSelect: (id) => { var _a, _b; return (_a = options.onSelect) === null || _a === void 0 ? void 0 : _a.call(options, id, (_b = ctx.viewOfBoard.get(w.id)) !== null && _b !== void 0 ? _b : ctx.active); } }), captionHooks((_h = ctx.viewOfBoard.get(w.id)) !== null && _h !== void 0 ? _h : ctx.active)), { onMemberLeaving: (memberId) => { var _a, _b; return (_b = (_a = ctx.closePageIfEmptied) === null || _a === void 0 ? void 0 : _a.call(ctx, w.id, memberId)) !== null && _b !== void 0 ? _b : []; }, onMemberMoving: (memberId, from, to) => { var _a, _b; return (_b = (_a = ctx.moveContainerCommands) === null || _a === void 0 ? void 0 : _a.call(ctx, memberId, from, to)) !== null && _b !== void 0 ? _b : []; } }), (ctx.tabDrop ? { tabDrop: ctx.tabDrop } : {}));
                 if (((_j = ctx.layoutOf.get(w.id)) !== null && _j !== void 0 ? _j : w.layout) === 'split') {
                     // A splitter tree covering the pane; the pane's frame is the parent's
                     // slab, so no design height of its own.

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

@@ -203,6 +203,12 @@ export interface DashboardGridOptions {
      * it in the same batch — a tab page emptied by the move closes.
      */
     onMemberLeaving?: (memberId: string) => Command[];
+    /**
+     * A member CONTAINER is moving from this board to another by a gesture
+     * (tile first, 4b-ii). Answers the commands that carry the host's own
+     * bookkeeping for it — the spec entry, the registry — in the same batch.
+     */
+    onMemberMoving?: (memberId: string, fromBoardId: string, toBoardId: string) => Command[];
     /** A widget dragged over a tab STRIP becomes a new tab there: the hooks that hit-test, mark and commit it. */
     tabDrop?: TabDropHooks;
     /** Fires after commits/cancels/removals so the page can refocus/refit/flash. */

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

@@ -148,6 +148,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 +489,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 {
@@ -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,
@@ -3475,7 +3604,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 },

package/src/lib/dashboard-kit/zones.d.ts

@@ -88,6 +88,16 @@ export interface ResolveInput {
      * be put beside the container it is still inside.
      */
     homeChain: ReadonlySet<string>;
+    /**
+     * Containers of the source board as they stood when the gesture began (a
+     * GROUP ghost pushes solids with intent, 0.4.44). The hand over a pushed
+     * container's rest frame still means that container — its zones, its
+     * page tested at the displacement — or a group could never enter a
+     * container its own body reaches before the hand does: the target fled.
+     * The engine's memory brings the pushed container home when the ghost
+     * leaves the board.
+     */
+    restFrames?: ReadonlyMap<string, ZoneRect>;
 }
 export type Zone = {
     kind: 'off';

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

@@ -95,7 +95,12 @@ export function resolve(input) {
                 return { kind: 'beside', board, containerId: p.containerId, side: p.side, kept: true };
         }
     }
-    const opaque = (board, c) => c.static || input.ghostSubtree.has(c.id) || board.depth + 1 + input.ghostDepth > input.maxDepth;
+    // A static container and a container too deep for the ghost are obstacles:
+    // the hand over them means a cell on their parent board. The GHOST'S OWN
+    // subtree is not an obstacle but glass: a container carried by hand has its
+    // frame under the pointer at every step, and reading it as a hit answered
+    // "plain on the parent" before the walk ever looked at the page beneath.
+    const opaque = (board, c) => c.static || board.depth + 1 + input.ghostDepth > input.maxDepth;
     // The container the hand holds is read at REST: its live frame is where the
     // beside pushed or shifted it, and a hand crossing from its top band to its
     // corner would otherwise find it gone from under the pointer (0.4.48's
@@ -103,11 +108,16 @@ export function resolve(input) {
     // same displacement.
     const held = input.prev;
     const descend = (board, dx, dy) => {
+        var _a;
         const px = x + dx;
         const py = y + dy;
         for (const c of board.children()) {
-            // the held container at rest — unless the hand has left that frame for the live one
-            const atRest = held && c.id === held.containerId && inRect(held.frame0, x, y) ? held.frame0 : null;
+            if (input.ghostSubtree.has(c.id))
+                continue; // the carried container itself, and the boards inside it: glass
+            // the held container at rest — unless the hand has left that frame for the live one;
+            // and any container the ghost pushed, at rest the same way
+            const rest = (_a = input.restFrames) === null || _a === void 0 ? void 0 : _a.get(c.id);
+            const atRest = rest && inRect(rest, x, y) ? rest : held && c.id === held.containerId && inRect(held.frame0, x, y) ? held.frame0 : null;
             const frame = atRest !== null && atRest !== void 0 ? atRest : c.frame;
             const tx = atRest ? x : px;
             const ty = atRest ? y : py;