@grafloria/element 0.4.48 → 0.4.50

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.48",
+  "version": "0.4.50",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "peerDependencies": {
-    "@grafloria/engine": "^0.3.0",
+    "@grafloria/engine": "^0.3.8",
     "@grafloria/renderer": "^0.4.0"
   },
   "dependencies": {

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

@@ -227,6 +227,8 @@ export interface DashboardOptions {
      * so a designer/viewer pair is one flag apart. Live: `handle.setStatic()`.
      */
     static?: boolean;
+    /** The deepest board a drop may enter (a view is 0; default 2). See the grid binder's `nesting`. */
+    nesting?: number;
     /**
      * DRAG HANDLE — DevExpress drags an item by its caption. `true`: the caption
      * strip is the only handle (the header shows grip dots); a selector string:

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

@@ -2293,7 +2293,7 @@ export function dashboard(options) {
             }
             function bindView(v, g, viewLayout, live) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                const common = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ gap, padding: gap, rtl: (_b = (_a = live === null || live === void 0 ? void 0 : live.rtl) !== null && _a !== void 0 ? _a : options.rtl) !== null && _b !== void 0 ? _b : false, fluid: mode === 'fluid', static: (_d = (_c = live === null || live === void 0 ? void 0 : live.static) !== null && _c !== void 0 ? _c : options.static) !== null && _d !== void 0 ? _d : false, dragHandle: (_f = (_e = live === null || live === void 0 ? void 0 : live.dragHandle) !== null && _e !== void 0 ? _e : options.dragHandle) !== null && _f !== void 0 ? _f : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), ((_g = options.binder) !== null && _g !== void 0 ? _g : {})), { onGesture: (e) => {
+                const common = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ gap, padding: gap, rtl: (_b = (_a = live === null || live === void 0 ? void 0 : live.rtl) !== null && _a !== void 0 ? _a : options.rtl) !== null && _b !== void 0 ? _b : false, fluid: mode === 'fluid', static: (_d = (_c = live === null || live === void 0 ? void 0 : live.static) !== null && _c !== void 0 ? _c : options.static) !== null && _d !== void 0 ? _d : false }, (options.nesting !== undefined ? { nesting: options.nesting } : {})), { dragHandle: (_f = (_e = live === null || live === void 0 ? void 0 : live.dragHandle) !== null && _e !== void 0 ? _e : options.dragHandle) !== null && _f !== void 0 ? _f : false }), (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), ((_g = options.binder) !== null && _g !== void 0 ? _g : {})), { onGesture: (e) => {
                         var _a, _b;
                         if (e.type === 'commit')
                             reportChanged();
@@ -2311,7 +2311,7 @@ export function dashboard(options) {
                 // The LIVE switches ride on the view's binder when it exists (a
                 // container bound after a setStatic/setRtl/setDragHandle must match).
                 const vb = binders.get((_a = ctx.viewOfBoard.get(w.id)) !== null && _a !== void 0 ? _a : ctx.active);
-                const inner = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ columns: innerColumnsOf(w), gap, padding: 0, baseRowHeight: rowHeight, rtl: (_c = (_b = vb === null || vb === void 0 ? void 0 : vb.getRtl()) !== null && _b !== void 0 ? _b : options.rtl) !== null && _c !== void 0 ? _c : false, static: (_e = (_d = vb === null || vb === void 0 ? void 0 : vb.getStatic()) !== null && _d !== void 0 ? _d : options.static) !== null && _e !== void 0 ? _e : false, dragHandle: (_g = (_f = vb === null || vb === void 0 ? void 0 : vb.getDragHandle()) !== null && _f !== void 0 ? _f : options.dragHandle) !== null && _g !== void 0 ? _g : false }, (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), { onGesture: (e) => {
+                const inner = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ columns: innerColumnsOf(w), gap, padding: 0, baseRowHeight: rowHeight, rtl: (_c = (_b = vb === null || vb === void 0 ? void 0 : vb.getRtl()) !== null && _b !== void 0 ? _b : options.rtl) !== null && _c !== void 0 ? _c : false, static: (_e = (_d = vb === null || vb === void 0 ? void 0 : vb.getStatic()) !== null && _d !== void 0 ? _d : options.static) !== null && _e !== void 0 ? _e : false, dragHandle: (_g = (_f = vb === null || vb === void 0 ? void 0 : vb.getDragHandle()) !== null && _f !== void 0 ? _f : options.dragHandle) !== null && _g !== void 0 ? _g : false }, (options.nesting !== undefined ? { nesting: options.nesting } : {})), (options.squeeze !== undefined ? { squeeze: options.squeeze } : {})), { onGesture: (e) => {
                         var _a, _b;
                         if (e.type === 'commit')
                             reportChanged();

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

@@ -238,6 +238,14 @@ export interface DashboardGridOptions {
      * still works. The viewer's mode — see `setStatic` for the live switch.
      */
     static?: boolean;
+    /**
+     * NESTING POLICY (tile first, step 2): the deepest board a DROP may enter,
+     * counting a view as 0 — a widget into a section is 1, into a section
+     * inside a tab page is 2. Deeper containers are opaque to a drag: the
+     * pointer over them means a cell on their parent board (or beside them).
+     * Default 2, the depth the gates exercise.
+     */
+    nesting?: number;
     /**
      * DRAG HANDLE (DevExpress drags an item by its caption; gridstack's
      * `handle`). `true` — the CAPTION STRIP is the handle (the header shows grip
@@ -493,6 +501,8 @@ interface BinderPeer {
      */
     containsWorldExtended(x: number, y: number): boolean;
     frameArea(): number;
+    /** A static board is opaque to the zone walk: never entered (tile first, step 2). */
+    isStatic?(): boolean;
     adopt(node: {
         id: string;
     }, world: {

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

@@ -56,6 +56,7 @@ import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridI
 import { ensureDashboardKitStyles } from './styles.js';
 import { captionOfGroup, captionPainted, captionPassThrough, captionKey, paintCaptionBand, sectionCaptionReserve, sizeCaptionBand } from './caption.js';
 import { TAB_STRIP_HEIGHT } from './tabs.js';
+import { BESIDE_BAND, resolve as resolveZone } from './zones.js';
 /** The class of the painted grip element (a child of the node host). */
 export const GRIP_CLASS = 'axdb-grip';
 /** The container class that turns the caption strip's grip dots on. */
@@ -196,6 +197,8 @@ export class SequenceCommand extends Command {
  * page (review D12).
  */
 const BOARD_REGISTRY = new WeakMap();
+/** A widget carries no boards: nothing for the zone walk to refuse as its own descendant. */
+const EMPTY_SUBTREE = new Set();
 /**
  * Register a board that is NOT a grid (the split binder on a container) as a
  * peer on its canvas, so the parent grid's hitTest defers a press on one of
@@ -329,7 +332,7 @@ function cursorFor(E) {
 }
 let binderSeq = 0;
 export function bindDashboardGrid(api, group, options = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     ensureDashboardKitStyles();
     const diagram = api.getModel();
     /** The DECLARED count — the board's authored width, and the responsive cap. */
@@ -364,6 +367,8 @@ export function bindDashboardGrid(api, group, options = {}) {
     const fluid = options.fluid === true;
     const overflow = (_h = options.overflow) !== null && _h !== void 0 ? _h : 'bounded';
     let isStatic = options.static === true;
+    /** The deepest board a drop may enter — a root is 0; two levels are what the gates exercise (tile first, step 2). */
+    const nesting = (_j = options.nesting) !== null && _j !== void 0 ? _j : 2;
     let dragHandle = normalizeDragHandle(options.dragHandle);
     let dragSel = dragHandleSelector(dragHandle);
     api.container.classList.toggle(DRAG_HANDLE_CLASS, dragHandle === true);
@@ -371,10 +376,10 @@ export function bindDashboardGrid(api, group, options = {}) {
     let focusedId;
     const live = liveRegionFor(api.container);
     /** The design height. Fluid boards re-read it from the container. */
-    let designH = (_l = (_j = options.designHeight) !== null && _j !== void 0 ? _j : (_k = group.size) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : 0;
+    let designH = (_m = (_k = options.designHeight) !== null && _k !== void 0 ? _k : (_l = group.size) === null || _l === void 0 ? void 0 : _l.height) !== null && _m !== void 0 ? _m : 0;
     /** Fit-mode CAPACITY in rows (see `overflow`). Undefined = unbounded. */
     let capacity;
-    let sizing = (_m = options.sizing) !== null && _m !== void 0 ? _m : 'fit';
+    let sizing = (_o = options.sizing) !== null && _o !== void 0 ? _o : 'fit';
     /**
      * A fresh engine holding `items` VERBATIM. The constructor add()s each item
      * and settles after every one, so in gravity mode a legal layout with a gap
@@ -1263,61 +1268,54 @@ export function bindDashboardGrid(api, group, options = {}) {
      */
     const TAB_FRAME_GRIP = 3;
     const edgeGripFor = (grp) => (isTabsGroup(grp) ? TAB_FRAME_GRIP : EDGE_GRIP);
-    const BESIDE_BAND = 0.2;
-    /** How much wider the band is for a pointer ALREADY in it — a hand resting on the boundary must not flicker between beside and into. */
-    const BESIDE_STAY = 0.05;
-    /** The outer band of a container FRAME the point is in — null in the strip, in the middle, or outside. */
-    const bandOf = (f, wx, wy, band = BESIDE_BAND) => {
-        if (wx < f.x || wx > f.x + f.width || wy < f.y || wy > f.y + f.height)
-            return null;
-        const bodyY = f.y + TAB_STRIP_HEIGHT;
-        const bodyH = Math.max(1, f.height - TAB_STRIP_HEIGHT);
-        const rx = (wx - f.x) / Math.max(1, f.width);
-        const ry = (wy - bodyY) / bodyH;
-        if (ry < 0)
-            return null; // the strip: a new tab, the strip's own business
-        if (rx < band)
-            return 'left'; // the sides first: they take the corners
-        if (rx > 1 - band)
-            return 'right';
-        if (ry < band)
-            return 'top';
-        if (ry > 1 - band)
-            return 'bottom';
-        return null; // the middle: into the page
-    };
-    const besideZoneAt = (wx, wy) => {
-        var _a;
-        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
-            const grp = diagram.getGroup(id);
-            if (!grp || diagram.getNode(id) || !isTabsGroup(grp))
-                continue;
-            const side = bandOf(frameOfGroup(grp), wx, wy);
-            if (side)
-                return { id, side };
-        }
-        return null;
-    };
+    /**
+     * BESIDE (0.4.45): a WIDGET dragged onto a tab container's outer band — a
+     * fifth of its body, the same bands a tab's split uses — lands next to it
+     * on that side; the middle still goes INTO its page and the strip still
+     * makes a tab. At the board's edge, where there is no room on that side,
+     * the container shifts over by the widget's span and the widget takes the
+     * edge: the fluid demo's side panel sits at the right edge, and "after it"
+     * was nowhere (the user: "if the tab is at an edge I can't add something
+     * after it").
+     *
+     * The container gives way LIVE, with the glide every pushed widget gets
+     * (0.4.48): a group is a widget first, and its tab behaviours sit on top of
+     * that default. 0.4.47 had frozen the hover behind an overlay, the way a
+     * tab's split preview works, and the user missed the slide at once. What
+     * his 3440-px frame had caught was the corner: the panel was pushed DOWN
+     * as a widget crossed its top band on the way to its right — so the left
+     * and right bands win the corners (VS Code's precedence): a one-row widget
+     * carried along the top of a tall panel to its far right means "after it",
+     * not "above it". The shift is undone if the pointer leaves the band.
+     */
     /** The container a BESIDE drop unlocked (and maybe shifted): relocked, and put back if asked, when the zone or the gesture ends. */
     let beside = null;
     const endBeside = (restore) => {
         if (!beside)
             return;
         const it = engine.getItem(beside.id);
+        let moved = false;
         if (it && restore && (it.x !== beside.from.x || it.y !== beside.from.y))
-            engine.moveCheck(beside.id, beside.from.x, beside.from.y, { gate: false });
+            moved = engine.moveCheck(beside.id, beside.from.x, beside.from.y, { gate: false }).changed || moved;
         if (restore) {
             // The sections the shift pushed come back with it.
             for (const [oid, c] of beside.others) {
                 const o = engine.getItem(oid);
                 if (o && (o.x !== c.x || o.y !== c.y))
-                    engine.moveCheck(oid, c.x, c.y, { gate: false });
+                    moved = engine.moveCheck(oid, c.x, c.y, { gate: false }).changed || moved;
             }
         }
         if (it)
             it.locked = true;
         relockOthersForSlab();
         beside = null;
+        // The frames the zone test reads are the MODEL's: a restore that moved
+        // the container without projecting left its frame where the push had
+        // put it, so the next test read the pointer as OUTSIDE it (the user's
+        // 3440-px corner on 0.4.48: along the top band the panel was pushed
+        // down, and the corner never turned into "right").
+        if (moved)
+            project();
     };
     const applyBeside = (g, z) => {
         var _a;
@@ -2050,7 +2048,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         };
     };
     const onToolMove = (ev) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const g = gesture;
         if (!g || g.kind === 'palette')
             return;
@@ -2067,95 +2065,57 @@ export function bindDashboardGrid(api, group, options = {}) {
             ghostStyleFastPath(g, desired);
             g.lastWorld = { x: ev.world.x, y: ev.world.y };
             g.lastScreen = { x: ev.screen.x, y: ev.screen.y };
-            // A TAB STRIP under the pointer wins over every board: the widget will
-            // become a new tab there, so it leaves this board (survivors settle
-            // home) and the strip marks the slot.
-            if (options.tabDrop && !isStatic) {
-                const crect = api.container.getBoundingClientRect();
-                const hitStrip = options.tabDrop.stripAt(crect.left + ev.screen.x, crect.top + ev.screen.y);
-                if (hitStrip) {
-                    if (g.leg) {
-                        g.leg.adopted.abort();
-                        g.leg = null;
-                    }
-                    endBeside(true); // a band's shift gives way to the strip: the container comes back
-                    if (!g.removedFromBoard) {
-                        g.removedFromBoard = true;
-                        engine.remove(g.id);
-                        project();
-                    }
-                    (_a = hostOf(g.id)) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-out');
-                    if (!g.strip || g.strip.containerId !== hitStrip.containerId || g.strip.index !== hitStrip.index) {
-                        options.tabDrop.markDrop(hitStrip.containerId, hitStrip.index);
-                    }
-                    g.strip = hitStrip;
-                    syncPlaceholder();
-                    api.render();
-                    return;
-                }
-                if (g.strip) {
-                    options.tabDrop.markDrop(null, null);
-                    g.strip = null;
+            // THE ZONE (tile first, step 2): one recursive resolve over the boards'
+            // membership tree — a strip slot, a cell beside a container, a plain
+            // cell on the deepest board the pointer may enter, or off — decided
+            // 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) {
+                // -- INTO A STRIP: the widget becomes a new tab there, so it leaves
+                // this board (survivors settle home) and the strip marks the slot.
+                if (g.leg) {
+                    g.leg.adopted.abort();
+                    g.leg = null;
                 }
-            }
-            // BESIDE a tab container (0.4.45): its outer band puts the widget next
-            // to it — at the board's edge the container shifts over to make room,
-            // live and gliding, like any widget gives way (0.4.48).
-            if (!isStatic) {
-                const z = besideZoneAt(ev.world.x, ev.world.y);
-                if (z) {
-                    applyBeside(g, z);
-                    syncPlaceholder();
-                    return;
+                endBeside(true); // a band's shift gives way to the strip: the container comes back
+                if (!g.removedFromBoard) {
+                    g.removedFromBoard = true;
+                    engine.remove(g.id);
+                    project();
                 }
-                if (beside) {
-                    // Off the band: the container comes back unless the POINTER is
-                    // still over the cell it vacated — the widget's own landing, which
-                    // is what "beside" leaves under the pointer once the container has
-                    // shifted away (the ghost's wanted cell carries the grab offset and
-                    // read as "elsewhere" a move later, and the shift undid itself).
-                    // "Still here" is the pointer in the SAME band of the container's
-                    // ORIGINAL frame (it asked for beside from there, and the container
-                    // is what moved; the band is a little wider for a hand already in
-                    // it, so it does not flicker against "into the page" at the line)
-                    // or over the cell the widget took: a one-row widget's cell is not
-                    // where a hand hovering the band sits, and testing only that undid
-                    // the shift on the next move, which pushed the widget to the bottom
-                    // as the panel came back (live walk N). "Anywhere inside the
-                    // original frame" is too much: a hand crossing the bottom band on
-                    // its way to the middle never reached the page (lab L73) — the
-                    // middle of the original frame is a zone change.
-                    const r = cellToRect({ x: beside.vacated.x, y: beside.vacated.y, w: g.spans.w, h: g.spans.h }, frame(), geom(), rows());
-                    const inR = (q) => ev.world.x >= q.x - gap && ev.world.x <= q.x + q.width + gap && ev.world.y >= q.y - gap && ev.world.y <= q.y + q.height + gap;
-                    const over = bandOf(beside.frame0, ev.world.x, ev.world.y, BESIDE_BAND + BESIDE_STAY) === beside.side || inR(r);
-                    if (!over)
-                        endBeside(true);
-                    else {
-                        syncPlaceholder();
-                        return;
-                    }
+                (_a = hostOf(g.id)) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-out');
+                if (!g.strip || g.strip.containerId !== z.containerId || g.strip.index !== z.index) {
+                    options.tabDrop.markDrop(z.containerId, z.index);
                 }
+                g.strip = { containerId: z.containerId, index: z.index };
+                syncPlaceholder();
+                api.render();
+                return;
             }
-            // Deepest board under the pointer wins: the nested KPI strip beats the
-            // tab that contains it; a foreign board beats "outside". Strict frames
-            // first; the one-row grace band below each board (gridstack's extra
-            // drag row) is consulted only when NO strict frame matched — so "under
-            // the last row" appends instead of reading as off-board.
-            const strictSelf = worldInsideBoard(ev.world.x, ev.world.y);
-            let peer = peerAt(ev.world.x, ev.world.y);
-            let inside = strictSelf;
-            if (!strictSelf && !peer) {
-                if (worldInsideBoardExtended(ev.world.x, ev.world.y))
-                    inside = true;
-                else
-                    peer = peerAt(ev.world.x, ev.world.y, true);
-                // Last resort: the grace band — a small slip past the edge stays ON
-                // this board (the engine clamps the cell; prototype parity).
-                if (!inside && !peer && worldInsideBoardGrace(ev.world.x, ev.world.y))
-                    inside = true;
+            if (g.strip) {
+                (_b = options.tabDrop) === null || _b === void 0 ? void 0 : _b.markDrop(null, null);
+                g.strip = null;
             }
-            const selfWins = inside && (!peer || boardArea() <= peer.frameArea());
-            if (peer && !selfWins) {
+            // -- BESIDE a tab container of THIS board: its outer band puts the
+            // widget next to it — at the board's edge the container shifts over
+            // to make room, live and gliding, like any widget gives way (0.4.48).
+            // (A container on another board still resolves as a plain cell there
+            // until the gesture scope spans boards — step 3.)
+            if (z.kind === 'beside' && !isStatic && z.board.ref === selfPeer) {
+                if (!z.kept)
+                    applyBeside(g, { id: z.containerId, side: z.side });
+                syncPlaceholder();
+                return;
+            }
+            if (beside)
+                endBeside(true); // the hand left the band: the container comes back
+            // Last resort: the grace band — a small slip past the edge stays ON
+            // this board (the engine clamps the cell; prototype parity).
+            const onSelf = z.kind !== 'off' && z.kind !== 'strip' && z.board.ref === selfPeer;
+            const inside = onSelf || (z.kind === 'off' && worldInsideBoardGrace(ev.world.x, ev.world.y));
+            const peer = !onSelf && z.kind !== 'off' && z.kind !== 'strip' ? z.board.ref : null;
+            if (peer) {
                 // -- HANDOFF: the pointer is over another board -------------------
                 if (g.leg && g.leg.peer === peer) {
                     g.leg.adopted.move(ev.world);
@@ -2175,13 +2135,13 @@ export function bindDashboardGrid(api, group, options = {}) {
                         height: g.node.size.height,
                     });
                     if (adopted) {
-                        (_b = hostOf(g.id)) === null || _b === void 0 ? void 0 : _b.classList.remove('axdb-out');
+                        (_c = hostOf(g.id)) === null || _c === void 0 ? void 0 : _c.classList.remove('axdb-out');
                         g.leg = { peer, adopted };
                         g.leg.adopted.move(ev.world);
                     }
                     else {
                         // Bounded/full board refused the adoption: dim = will snap home.
-                        (_c = hostOf(g.id)) === null || _c === void 0 ? void 0 : _c.classList.add('axdb-out');
+                        (_d = hostOf(g.id)) === null || _d === void 0 ? void 0 : _d.classList.add('axdb-out');
                     }
                 }
             }
@@ -2193,7 +2153,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 }
                 if (g.removedFromBoard) {
                     g.removedFromBoard = false;
-                    (_d = hostOf(g.id)) === null || _d === void 0 ? void 0 : _d.classList.remove('axdb-out');
+                    (_e = hostOf(g.id)) === null || _e === void 0 ? void 0 : _e.classList.remove('axdb-out');
                     const cell = pointToCell(desired.x, desired.y, frame(), geom(), rows(), g.spans.w);
                     // Re-enter at the bottom edge (collision-free), then take the cursor
                     // cell GATELESSLY — a first placement skips the anti-jitter gate.
@@ -2202,7 +2162,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                     project();
                 }
                 else {
-                    const spanW = (_f = (_e = engine.getItem(g.id)) === null || _e === void 0 ? void 0 : _e.w) !== null && _f !== void 0 ? _f : g.spans.w;
+                    const spanW = (_g = (_f = engine.getItem(g.id)) === null || _f === void 0 ? void 0 : _f.w) !== null && _g !== void 0 ? _g : g.spans.w;
                     const cell = pointToCell(desired.x, desired.y, frame(), geom(), rows(), spanW);
                     if (engine.moveCheck(g.id, cell.x, cell.y).changed)
                         project();
@@ -2217,7 +2177,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 if (!g.removedFromBoard) {
                     g.removedFromBoard = true;
                     engine.remove(g.id); // survivors settle home; cells minted nowhere
-                    (_g = hostOf(g.id)) === null || _g === void 0 ? void 0 : _g.classList.add('axdb-out');
+                    (_h = hostOf(g.id)) === null || _h === void 0 ? void 0 : _h.classList.add('axdb-out');
                     project();
                 }
             }
@@ -2327,7 +2287,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                     maxRows = n;
                     engine.maxRows = n;
                 };
-                const slabRows = (_j = (_h = parent.memberCell(group.id)) === null || _h === void 0 ? void 0 : _h.h) !== null && _j !== void 0 ? _j : maxRows;
+                const slabRows = (_k = (_j = parent.memberCell(group.id)) === null || _j === void 0 ? void 0 : _j.h) !== null && _k !== void 0 ? _k : maxRows;
                 const inner = maxRows;
                 const rhNow = rowHeightFor(geom(), rows());
                 const rowPx = rhNow + gap;
@@ -2491,7 +2451,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         const anchorBottom = liveRect ? liveRect.y + liveRect.height : bottom;
         const px = E.w ? anchorRight - w : anchorLeft;
         const py = E.n ? anchorBottom - h : anchorTop;
-        g.node.setSize(w, h, (_k = g.node.size.depth) !== null && _k !== void 0 ? _k : 0);
+        g.node.setSize(w, h, (_l = g.node.size.depth) !== null && _l !== void 0 ? _l : 0);
         g.node.setPosition(px, py);
         ghostStyleFastPath(g, { x: px, y: py, width: w, height: h });
         const spanF = bound() !== undefined ? frame() : f;
@@ -2687,6 +2647,73 @@ export function bindDashboardGrid(api, group, options = {}) {
         }
         return set;
     };
+    /**
+     * The boards of this canvas as the zone walk sees them (tile first, step
+     * 2): a ROOT is a board whose group has no parent group (a view); a board's
+     * children are its member groups that are containers, each with the board a
+     * descent enters — a tab container's ACTIVE page, a section's own board —
+     * one level deeper. Built from the peers and the model on every move: a
+     * handful of groups, and the frames are live.
+     */
+    const zoneRoots = () => {
+        const peers = [...peersOnCanvas()];
+        const byGroup = new Map(peers.map((p) => [p.group.id, p]));
+        const boardRef = (p, depth) => ({
+            id: p.group.id,
+            depth,
+            ref: p,
+            contains: (x, y) => p.containsWorld(x, y),
+            containsExtended: (x, y) => p.containsWorldExtended(x, y),
+            children: () => {
+                var _a, _b, _c, _d, _e;
+                const out = [];
+                for (const id of (_a = p.group.members) !== null && _a !== void 0 ? _a : []) {
+                    const grp = diagram.getGroup(id);
+                    if (!grp || diagram.getNode(id))
+                        continue;
+                    const cw = ((_b = grp.getMetadata('containerWidget')) !== null && _b !== void 0 ? _b : {});
+                    const layout = cw.layout === 'tabs' ? 'tabs' : cw.layout === 'split' ? 'split' : 'grid';
+                    let innerPeer;
+                    if (layout === 'tabs') {
+                        const pageId = cw.active && byGroup.has(cw.active) ? cw.active : [...((_c = grp.members) !== null && _c !== void 0 ? _c : [])].find((m) => byGroup.has(m));
+                        innerPeer = pageId ? byGroup.get(pageId) : undefined;
+                    }
+                    else
+                        innerPeer = byGroup.get(id);
+                    out.push({
+                        id,
+                        layout,
+                        static: (_e = (_d = innerPeer === null || innerPeer === void 0 ? void 0 : innerPeer.isStatic) === null || _d === void 0 ? void 0 : _d.call(innerPeer)) !== null && _e !== void 0 ? _e : false,
+                        frame: frameOfGroup(grp),
+                        stripHeight: layout === 'tabs' ? TAB_STRIP_HEIGHT : 0,
+                        band: layout === 'tabs' ? BESIDE_BAND : 0, // a section's whole body is "into" (Quantia's Groups page)
+                        inner: innerPeer ? boardRef(innerPeer, depth + 1) : null,
+                    });
+                }
+                return out;
+            },
+        });
+        return peers.filter((p) => !p.group.parentGroupId).map((p) => boardRef(p, 0));
+    };
+    /** What the pointer means for the dragged tile: the resolve over the live tree, with the beside the hand holds. */
+    const resolveTileZone = (g, ev) => {
+        let strip = null;
+        if (options.tabDrop && !isStatic) {
+            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 ? { 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()) } : null,
+            maxDepth: nesting,
+            ghostDepth: 0,
+            ghostSubtree: EMPTY_SUBTREE,
+            gap,
+        });
+    };
     /** The board whose engine holds OUR group as an item (nesting parent). */
     const parentPeer = () => {
         for (const p of peersOnCanvas()) {
@@ -3022,6 +3049,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     const selfPeer = {
         group,
+        isStatic: () => isStatic,
         tearOutMember: (pageId, fromGroupId, ev, plan) => beginTearOut(pageId, fromGroupId, ev, plan),
         clearSelection: () => {
             var _a;

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

@@ -1744,6 +1744,7 @@ export function bindDashboardSplit(api, group, options = {}) {
     // as a peer so the parent's hitTest hands presses on our tiles to us.
     const selfPeer = {
         group,
+        isStatic: () => isStatic,
         clearSelection: () => {
             var _a;
             if (selectedId === undefined)

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

@@ -0,0 +1,113 @@
+/**
+ * zones — where a dragged tile lands, decided once, recursively (tile first,
+ * step 2).
+ *
+ * Every board is an engine; every container is a tile of its parent's board
+ * and a board for its own children. `resolve` walks that tree from the roots
+ * inward and answers, for a pointer, one of four things:
+ *
+ *   - `strip`  — a tab slot in a container's strip (the client-space hit the
+ *                binder supplies wins over every board, as it always has);
+ *   - `beside` — the outer fifth of a container: a cell next to it on the
+ *                board the container itself sits on;
+ *   - `plain`  — a cell on the deepest board under the pointer that can be
+ *                entered; "into a container" is nothing more than descending
+ *                one level, so it needs no kind of its own;
+ *   - `off`    — outside every board.
+ *
+ * A container is OPAQUE — never entered, its bands still answering — when it
+ * is static, when entering it would exceed the depth policy, or when it is
+ * part of the dragged subtree (a container cannot be dropped into its own
+ * descendant). The strip rows of a tab container are nobody's band, and its
+ * margin (inside the frame, outside the page) is a plain cell on the parent.
+ *
+ * This module is pure geometry: no DOM, no engine, no model. The binder
+ * builds the tree for each move from its peers and the model, and acts on
+ * the answer.
+ */
+export interface ZoneRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type BesideSide = 'left' | 'right' | 'top' | 'bottom';
+/** A board in the walk: the binder's peer behind it rides in `ref`. */
+export interface ZoneBoard {
+    id: string;
+    /** Roots are 0; a container's inner board is its board's depth + 1. */
+    depth: number;
+    ref?: unknown;
+    contains(x: number, y: number): boolean;
+    /** Containment plus the one-row grace under the board (gridstack's extra drag row). */
+    containsExtended(x: number, y: number): boolean;
+    children(): ZoneContainer[];
+}
+/** A container as the walk sees it: a frame on its board, a layout, and the board inside it. */
+export interface ZoneContainer {
+    id: string;
+    layout: 'grid' | 'split' | 'tabs';
+    static: boolean;
+    frame: ZoneRect;
+    /** The rows at the top that belong to the strip: never a band. 0 for a section. */
+    stripHeight: number;
+    /** The outer fraction of the body that means "beside"; 0 for a container whose whole body is "into" (a section). */
+    band: number;
+    /** The board a descent enters: a tab container's ACTIVE page, a section's own board. Null: nothing to enter. */
+    inner: ZoneBoard | null;
+}
+export interface StripHit {
+    containerId: string;
+    index: number;
+}
+/** The beside the hand already holds, with the container's frame AT REST and the cell the widget took. */
+export interface BesideMemory {
+    containerId: string;
+    side: BesideSide;
+    frame0: ZoneRect;
+    vacated: ZoneRect;
+}
+export interface ResolveInput {
+    x: number;
+    y: number;
+    roots: ZoneBoard[];
+    strip: StripHit | null;
+    prev: BesideMemory | null;
+    /** The deepest board a drop may enter (a root is 0). */
+    maxDepth: number;
+    /** The depth of the dragged subtree: 0 for a widget, 1 for a section, 2 for a section holding a section. */
+    ghostDepth: number;
+    /** The groups inside the dragged tile: never entered. */
+    ghostSubtree: ReadonlySet<string>;
+    /** The board's gap, the tolerance around the vacated cell. */
+    gap: number;
+}
+export type Zone = {
+    kind: 'off';
+} | {
+    kind: 'plain';
+    board: ZoneBoard;
+    grace: boolean;
+} | {
+    kind: 'strip';
+    containerId: string;
+    index: number;
+} | {
+    kind: 'beside';
+    board: ZoneBoard;
+    containerId: string;
+    side: BesideSide;
+    kept: boolean;
+};
+/** The outer fifth of a container's body is beside it — the bands a tab's split uses. */
+export declare const BESIDE_BAND = 0.2;
+/** How much wider a band is for a hand ALREADY in it: a hand resting on the line must not flicker. */
+export declare const BESIDE_STAY = 0.05;
+/**
+ * The band of a container frame a point is in: null in the strip rows, in
+ * the middle, or outside. The left and right bands take the corners (VS
+ * Code's precedence): a one-row widget carried along the top of a tall panel
+ * to its far right means "after it", not "above it".
+ */
+export declare function bandOf(f: ZoneRect, stripHeight: number, x: number, y: number, band?: number): BesideSide | null;
+export declare function resolve(input: ResolveInput): Zone;

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

@@ -0,0 +1,162 @@
+/**
+ * zones — where a dragged tile lands, decided once, recursively (tile first,
+ * step 2).
+ *
+ * Every board is an engine; every container is a tile of its parent's board
+ * and a board for its own children. `resolve` walks that tree from the roots
+ * inward and answers, for a pointer, one of four things:
+ *
+ *   - `strip`  — a tab slot in a container's strip (the client-space hit the
+ *                binder supplies wins over every board, as it always has);
+ *   - `beside` — the outer fifth of a container: a cell next to it on the
+ *                board the container itself sits on;
+ *   - `plain`  — a cell on the deepest board under the pointer that can be
+ *                entered; "into a container" is nothing more than descending
+ *                one level, so it needs no kind of its own;
+ *   - `off`    — outside every board.
+ *
+ * A container is OPAQUE — never entered, its bands still answering — when it
+ * is static, when entering it would exceed the depth policy, or when it is
+ * part of the dragged subtree (a container cannot be dropped into its own
+ * descendant). The strip rows of a tab container are nobody's band, and its
+ * margin (inside the frame, outside the page) is a plain cell on the parent.
+ *
+ * This module is pure geometry: no DOM, no engine, no model. The binder
+ * builds the tree for each move from its peers and the model, and acts on
+ * the answer.
+ */
+/** The outer fifth of a container's body is beside it — the bands a tab's split uses. */
+export const BESIDE_BAND = 0.2;
+/** How much wider a band is for a hand ALREADY in it: a hand resting on the line must not flicker. */
+export const BESIDE_STAY = 0.05;
+const inRect = (r, x, y, tol = 0) => x >= r.x - tol && x <= r.x + r.width + tol && y >= r.y - tol && y <= r.y + r.height + tol;
+/**
+ * The band of a container frame a point is in: null in the strip rows, in
+ * the middle, or outside. The left and right bands take the corners (VS
+ * Code's precedence): a one-row widget carried along the top of a tall panel
+ * to its far right means "after it", not "above it".
+ */
+export function bandOf(f, stripHeight, x, y, band = BESIDE_BAND) {
+    if (band <= 0 || !inRect(f, x, y))
+        return null;
+    const bodyY = f.y + stripHeight;
+    const bodyH = Math.max(1, f.height - stripHeight);
+    const rx = (x - f.x) / Math.max(1, f.width);
+    const ry = (y - bodyY) / bodyH;
+    if (ry < 0)
+        return null; // the strip: a new tab, the strip's own business
+    if (rx < band)
+        return 'left';
+    if (rx > 1 - band)
+        return 'right';
+    if (ry < band)
+        return 'top';
+    if (ry > 1 - band)
+        return 'bottom';
+    return null;
+}
+/** The board a container sits on, found by id through the tree. */
+function boardOf(roots, containerId) {
+    const visit = (b) => {
+        for (const c of b.children()) {
+            if (c.id === containerId)
+                return b;
+            const deeper = c.inner ? visit(c.inner) : null;
+            if (deeper)
+                return deeper;
+        }
+        return null;
+    };
+    for (const r of roots) {
+        const found = visit(r);
+        if (found)
+            return found;
+    }
+    return null;
+}
+export function resolve(input) {
+    const { x, y } = input;
+    if (input.strip)
+        return { kind: 'strip', containerId: input.strip.containerId, index: input.strip.index };
+    // The beside the hand already holds: the same band of the container's
+    // ORIGINAL frame (a little wider), or the cell the widget took, keeps it —
+    // the container is what moved, and its live frame is no guide. A different
+    // band of that frame is a zone change and wins over the vacated cell; the
+    // middle of it is a zone change too (into the page).
+    if (input.prev) {
+        const p = input.prev;
+        const stripH = stripHeightOf(input.roots, p.containerId);
+        const stay = bandOf(p.frame0, stripH, x, y, BESIDE_BAND + BESIDE_STAY);
+        const other = bandOf(p.frame0, stripH, x, y);
+        const held = stay === p.side || (!(other !== null && other !== p.side) && inRect(p.vacated, x, y, input.gap));
+        if (held) {
+            const board = boardOf(input.roots, p.containerId);
+            if (board)
+                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;
+    // 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
+    // corner). Its subtree moved with it, so those boards are tested at the
+    // same displacement.
+    const held = input.prev;
+    const descend = (board, dx, dy) => {
+        const px = x + dx;
+        const py = y + dy;
+        for (const c of board.children()) {
+            const atRest = held && c.id === held.containerId ? held.frame0 : null;
+            const frame = atRest !== null && atRest !== void 0 ? atRest : c.frame;
+            const tx = atRest ? x : px;
+            const ty = atRest ? y : py;
+            if (!inRect(frame, tx, ty))
+                continue;
+            const side = bandOf(frame, c.stripHeight, tx, ty, c.band);
+            if (side)
+                return { kind: 'beside', board, containerId: c.id, side, kept: false };
+            if (opaque(board, c) || !c.inner)
+                return { kind: 'plain', board, grace: false };
+            const ndx = atRest ? c.frame.x - atRest.x : dx;
+            const ndy = atRest ? c.frame.y - atRest.y : dy;
+            if (!c.inner.contains(x + ndx, y + ndy))
+                return { kind: 'plain', board, grace: false }; // the margin: the container's own frame
+            return descend(c.inner, ndx, ndy);
+        }
+        return { kind: 'plain', board, grace: false };
+    };
+    for (const root of input.roots)
+        if (root.contains(x, y))
+            return descend(root, 0, 0);
+    // Nothing strict matched: the deepest board whose grace row holds the point.
+    let deepest = null;
+    const visit = (b) => {
+        if (b.containsExtended(x, y) && (!deepest || b.depth > deepest.depth))
+            deepest = b;
+        for (const c of b.children())
+            if (c.inner)
+                visit(c.inner);
+    };
+    for (const root of input.roots)
+        visit(root);
+    return deepest ? { kind: 'plain', board: deepest, grace: true } : { kind: 'off' };
+}
+function stripHeightOf(roots, containerId) {
+    const visit = (b) => {
+        for (const c of b.children()) {
+            if (c.id === containerId)
+                return c.stripHeight;
+            const deeper = c.inner ? visit(c.inner) : null;
+            if (deeper !== null)
+                return deeper;
+        }
+        return null;
+    };
+    for (const r of roots) {
+        const h = visit(r);
+        if (h !== null)
+            return h;
+    }
+    return 0;
+}
+//# sourceMappingURL=zones.js.map