@grafloria/element 0.4.54 → 0.4.56

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

@@ -51,51 +51,21 @@
  */
 import { __awaiter } from "tslib";
 import { AddToGroupCommand, BatchCommand, GridPackEngine, RemoveFromGroupCommand, } from '@grafloria/engine';
-import { LiveRegionController, registerTool } from '@grafloria/renderer';
+import { registerTool } from '@grafloria/renderer';
 import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridItemFromCell, pointToCell, rowHeightFor, sizeToSpan, } from './grid-mapping.js';
 import { ensureDashboardKitStyles } from './styles.js';
-import { captionOfGroup, captionPainted, captionPassThrough, captionKey, paintCaptionBand, sectionCaptionReserve, sizeCaptionBand } from './caption.js';
+import { captionOfGroup, captionPassThrough, sectionCaptionReserve } from './caption.js';
 import { TAB_STRIP_HEIGHT } from './tabs.js';
 import { BESIDE_BAND, resolve as resolveZone, resolveTabZone } from './zones.js';
 import { SequenceCommand, SetGroupCellCommand, tileCommands } from './commit.js';
+import { createProjection } from './project.js';
+import { cursorFor, edgesNear, NO_EDGES, anyEdge } from './edges.js';
+import { DRAG_HANDLE_CLASS, dragHandleSelector, gripHostOf, normalizeDragHandle, pressOnDragHandle, sameDragHandle } from './grip.js';
+import { createChrome, edgeGripFor, isTabsGroup } from './chrome.js';
+import { createKeyboard, describeCell, liveRegionFor } from './keyboard.js';
+export { EDGE_GRIP, anyEdge } from './edges.js';
+export { GRIP_CLASS, DRAG_HANDLE_CLASS, CAPTION_BAND, normalizeDragHandle, dragHandleSelector, gripOf, syncGrip, gripHostOf, pressOnDragHandle } from './grip.js';
 export { SequenceCommand, SetGroupCellCommand } from './commit.js';
-/** 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. */
-export const DRAG_HANDLE_CLASS = 'axdb-drag-handle';
-/** A `dragHandle` value with its defaults filled in — the form the handle reports. */
-export const normalizeDragHandle = (v) => {
-    var _a, _b;
-    return typeof v === 'object' && v !== null && v.grip
-        ? { grip: true, position: (_a = v.position) !== null && _a !== void 0 ? _a : 'left', placement: (_b = v.placement) !== null && _b !== void 0 ? _b : 'inside' }
-        : v === true ? true : typeof v === 'string' && v.length > 0 ? v : false;
-};
-/** The selector a `dragHandle` value names — `null` when the whole card is the handle. */
-export const dragHandleSelector = (v) => v === true ? '.axdb-widget-h' : typeof v === 'string' ? v : typeof v === 'object' ? '.' + GRIP_CLASS : null;
-/** The grip config of a value, or null when it paints no grip. */
-export const gripOf = (v) => (typeof v === 'object' ? v : null);
-const sameDragHandle = (a, b) => JSON.stringify(a) === JSON.stringify(b);
-/**
- * Paint (or remove) the grip on one host, and stamp the host with the grip's
- * placement so the header can make room for it. `movable` false = no grip.
- */
-export function syncGrip(host, cfg, movable) {
-    var _a, _b, _c, _d, _e;
-    const existing = host.querySelector(':scope > .' + GRIP_CLASS);
-    host.classList.remove('axdb-gp-inside', 'axdb-gp-outside', 'axdb-gp-left', 'axdb-gp-center', 'axdb-gp-right');
-    if (!cfg || !movable) {
-        existing === null || existing === void 0 ? void 0 : existing.remove();
-        return;
-    }
-    const el = (_a = existing) !== null && _a !== void 0 ? _a : host.ownerDocument.createElement('div');
-    if (!existing) {
-        el.setAttribute('aria-hidden', 'true');
-        el.setAttribute('title', 'Drag');
-        host.appendChild(el);
-    }
-    el.className = `${GRIP_CLASS} ${GRIP_CLASS}--${(_b = cfg.position) !== null && _b !== void 0 ? _b : 'left'} ${GRIP_CLASS}--${(_c = cfg.placement) !== null && _c !== void 0 ? _c : 'inside'}`;
-    host.classList.add(`axdb-gp-${(_d = cfg.placement) !== null && _d !== void 0 ? _d : 'inside'}`, `axdb-gp-${(_e = cfg.position) !== null && _e !== void 0 ? _e : 'left'}`);
-}
 /** The member host a press on a painted grip belongs to (the grip may sit OUTSIDE the host's box). */
 /**
  * Is this press OURS? The renderer's tool registry is PAGE-GLOBAL: every
@@ -131,33 +101,6 @@ export function ownsPress(container, diagram, ev, hit) {
     }
     return true;
 }
-export function gripHostOf(target) {
-    var _a, _b;
-    const grip = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.' + GRIP_CLASS);
-    return (_b = grip === null || grip === void 0 ? void 0 : grip.closest('.grafloria-node-host')) !== null && _b !== void 0 ? _b : null;
-}
-/**
- * Did a press land on the drag handle? A press INSIDE the handle element
- * always does. The default handle is a CAPTION BAR the DevExpress way: the
- * strip from the card's top edge down to the header's bottom, padding
- * included — so the pointer need not hit the header's text to grab the tile.
- */
-export function pressOnDragHandle(sel, target, hostEl, clientX, clientY) {
-    var _a, _b;
-    const grip = (_b = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, sel)) !== null && _b !== void 0 ? _b : null;
-    if (grip && (!hostEl || hostEl.contains(grip)))
-        return true;
-    if (sel !== '.axdb-widget-h' || !hostEl)
-        return false;
-    const hr = hostEl.getBoundingClientRect();
-    const header = hostEl.querySelector('.axdb-widget-h');
-    // A host painting its own content has no kit header: its caption is the top
-    // band of the card, so `dragHandle: true` still means something there.
-    const bottom = header ? header.getBoundingClientRect().bottom : hr.top + CAPTION_BAND;
-    return clientX >= hr.left && clientX <= hr.right && clientY >= hr.top && clientY <= bottom;
-}
-/** The caption strip of a host with no kit header, px from the card's top. */
-export const CAPTION_BAND = 28;
 /** A torn-out page never arrives shorter than this: a strip with no room under it is not a group. */
 export const TEAR_OUT_MIN_ROWS = 2;
 /**
@@ -204,58 +147,9 @@ export function registerBoardPeer(container, peer) {
         s.delete(peer);
     };
 }
-/**
- * ONE aria-live region per canvas, shared by every board on it — the
- * renderer's own controller (coalescing, de-duplicating), so a dashboard
- * announces through the same channel a diagram does. WeakMap: the region
- * follows the container out of memory.
- */
-const LIVE_REGIONS = new WeakMap();
-function liveRegionFor(container) {
-    let live = LIVE_REGIONS.get(container);
-    if (!live) {
-        live = new LiveRegionController(container);
-        LIVE_REGIONS.set(container, live);
-    }
-    return live;
-}
-function directionName(dx, dy) {
-    return dx < 0 ? 'left' : dx > 0 ? 'right' : dy < 0 ? 'up' : 'down';
-}
-/** "column 4, row 2, 3 by 1" — the cell as a person hears it (1-based). */
-function describeCell(c) {
-    return `column ${c.x + 1}, row ${c.y + 1}, ${c.w} by ${c.h}`;
-}
 const DRAG_THRESHOLD = 4;
-const GLIDE_OFF_DELAY = 400;
-/** A press this close (CSS px) to a tile's border takes that edge for a resize. */
-export const EDGE_GRIP = 7;
-const NO_EDGES = { n: false, e: false, s: false, w: false };
-/** Which of a host's edges a client point is within EDGE_GRIP of (none when outside). */
-function edgesNear(host, cx, cy) {
-    const r = host.getBoundingClientRect();
-    if (cx < r.left - 2 || cx > r.right + 2 || cy < r.top - 2 || cy > r.bottom + 2)
-        return NO_EDGES;
-    return {
-        n: cy - r.top <= EDGE_GRIP,
-        s: r.bottom - cy <= EDGE_GRIP,
-        w: cx - r.left <= EDGE_GRIP,
-        e: r.right - cx <= EDGE_GRIP,
-    };
-}
-export const anyEdge = (E) => E.n || E.e || E.s || E.w;
-/** The resize cursor for a set of edges ('' when none). */
-function cursorFor(E) {
-    const v = E.n || E.s;
-    const h = E.e || E.w;
-    if (v && h)
-        return (E.n && E.w) || (E.s && E.e) ? 'nwse-resize' : 'nesw-resize';
-    if (v)
-        return 'ns-resize';
-    if (h)
-        return 'ew-resize';
-    return '';
-}
+/** 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;
@@ -442,13 +336,10 @@ export function bindDashboardGrid(api, group, options = {}) {
     let disposed = false;
     /** Reentrancy guard: our own derived frame writes must not re-project. */
     let writing = false;
-    let placeholder = null;
     /** Foreign tile currently adopted from another binder's gesture. */
     let adoptedGhostId = null;
     /** The tab page this board is currently tearing out of a container, if any. */
     let tearing = null;
-    let glideTimer = null;
-    let ghostTimer = null;
     /**
      * OUR OWN CAPTION RESERVE: a section carrying a caption gives the band's
      * pixels up at the top of its frame, so no child may take them — and the
@@ -574,172 +465,57 @@ export function bindDashboardGrid(api, group, options = {}) {
             grp.setMetadata('gridItem', gridItemFromCell(cell));
         }
     };
-    // -- projection: cells -> pixels -------------------------------------------
-    /** Write one member's projected rect (derived state → system write). */
-    const writeRect = (id, r) => {
-        const node = diagram.getNode(id);
-        if (node) {
-            if (Math.abs(node.position.x - r.x) > 0.25 ||
-                Math.abs(node.position.y - r.y) > 0.25 ||
-                Math.abs(node.size.width - r.width) > 0.25 ||
-                Math.abs(node.size.height - r.height) > 0.25) {
-                diagram.runSystemWrite(() => {
-                    var _a;
-                    node.setPosition(r.x, r.y);
-                    node.setSize(r.width, r.height, (_a = node.size.depth) !== null && _a !== void 0 ? _a : 0);
-                });
-            }
-            return;
-        }
-        const grp = diagram.getGroup(id);
-        if (grp) {
-            const p = grp.position;
-            const s = sizeOf(grp);
-            if (Math.abs(p.x - r.x) > 0.25 ||
-                Math.abs(p.y - r.y) > 0.25 ||
-                Math.abs(s.width - r.width) > 0.25 ||
-                Math.abs(s.height - r.height) > 0.25) {
-                diagram.runSystemWrite(() => grp.setFrame(Object.assign({}, r)));
-            }
-        }
-    };
-    /** Enforce the board-frame height the sizing mode implies. */
-    const enforceBoardHeight = () => {
-        if (designH <= 0)
-            return;
-        const r = rows();
-        // FIT keeps its design height, full stop — the user's rule: "the board
-        // stays the same and the widgets change size so all of them fit". Only
-        // overflow:'scroll' lets the frame EXTEND to hold the rows at the floor
-        // height (and the canvas pan). Grow extends at the base row height.
-        const target = sizing === 'fit'
-            ? overflow === 'scroll'
-                ? Math.max(designH, 2 * padding + r * minRowHeight + (r - 1) * gap)
-                : designH
-            : Math.max(designH, 2 * padding + r * baseRowHeight + (r - 1) * gap);
-        const f = frame();
-        if (Math.abs(f.height - target) > 0.5) {
+    // -- the board, as its modules see it (tile first, step 4b-i) --------------
+    const ctx = {
+        api,
+        group,
+        diagram,
+        options,
+        gap,
+        padding,
+        baseRowHeight,
+        minRowHeight,
+        overflow,
+        engine: () => engine,
+        frame,
+        geom,
+        rows,
+        sizing: () => sizing,
+        designH: () => designH,
+        rtl: () => rtl,
+        isStatic: () => isStatic,
+        disposed: () => disposed,
+        htmlLayer,
+        hostOf,
+        memberEntity,
+        sizeOf,
+        // 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 {
-                diagram.runSystemWrite(() => group.setFrame({ x: f.x, y: f.y, width: f.width, height: target }));
+                fn();
             }
             finally {
                 writing = false;
             }
-        }
-    };
-    /** Project every member from its engine cells (the ghost is exempt). */
-    const project = () => {
-        enforceBoardHeight();
-        writing = true;
-        try {
-            const f = frame();
-            const g = geom();
-            const r = rows();
-            for (const item of engine.getItems()) {
-                if ((gesture === null || gesture === void 0 ? void 0 : gesture.started) && item.id === gesture.id)
-                    continue; // the ghost
-                if (item.id === adoptedGhostId)
-                    continue; // a ghost adopted from another binder
-                writeRect(item.id, cellToRect(item, f, g, r));
-            }
-        }
-        finally {
-            writing = false;
-        }
-        syncPlaceholder();
-        // The section overlays are projected chrome like the placeholder: they
-        // follow every frame write, not only a rebuild. Painted at bind time only,
-        // a section two levels down kept the geometry of its parent's placeholder
-        // frame (100 × 34) after the view board had laid the parent out (the kit
-        // lab's L47, 2026-09-08).
-        syncSlabs();
-    };
-    // -- placeholder / ghost chrome --------------------------------------------
-    /** The placeholder exists ONLY while a gesture is live — so at any moment
-     *  the DOM holds at most one `.axdb-ph` per active gesture, not one idle
-     *  div per bound board. */
-    const syncPlaceholder = () => {
-        const ghostId = adoptedGhostId !== null && adoptedGhostId !== void 0 ? adoptedGhostId : ((gesture === null || gesture === void 0 ? void 0 : gesture.started) && !gesture.removedFromBoard ? gesture.id : null);
-        const item = ghostId ? engine.getItem(ghostId) : undefined;
-        const live = !!item;
-        if (!live || !item) {
-            placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
-            placeholder = null;
-            return;
-        }
-        const layer = htmlLayer();
-        if (!layer)
-            return;
-        if (!placeholder || placeholder.parentElement !== layer) {
-            placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
-            placeholder = document.createElement('div');
-            placeholder.className = 'axdb-ph';
-            layer.prepend(placeholder);
-        }
-        const r = cellToRect(item, frame(), geom(), rows());
-        placeholder.style.display = 'block';
-        placeholder.style.left = `${r.x}px`;
-        placeholder.style.top = `${r.y}px`;
-        placeholder.style.width = `${r.width}px`;
-        placeholder.style.height = `${r.height}px`;
-    };
-    const armGlide = () => {
-        var _a;
-        (_a = htmlLayer()) === null || _a === void 0 ? void 0 : _a.classList.add('axdb-glide');
-        if (glideTimer)
-            clearTimeout(glideTimer);
-    };
-    const disarmGlideSoon = () => {
-        if (glideTimer)
-            clearTimeout(glideTimer);
-        glideTimer = setTimeout(() => { var _a; return (_a = htmlLayer()) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-glide'); }, GLIDE_OFF_DELAY);
-    };
-    /** The host whose ghost class the pending timer will lift. */
-    let ghostHost = null;
-    /**
-     * Lift a pending ghost NOW. One timer serves every host, so superseding it
-     * (a new gesture within 60 ms of the last drop — ③ then ④ in the
-     * nested-containers checks — or a dispose on a rebind) used to clear the
-     * timer and leave the previous tile lifted for good: a permanent drop
-     * shadow the visual gate finally caught.
-     */
-    const flushGhost = () => {
-        if (ghostTimer)
-            clearTimeout(ghostTimer);
-        ghostTimer = null;
-        ghostHost === null || ghostHost === void 0 ? void 0 : ghostHost.classList.remove('axdb-ghost', 'axdb-out');
-        ghostHost = null;
-    };
-    const setGhost = (id, on) => {
-        const host = hostOf(id);
-        if (!host)
-            return;
-        if (ghostHost && ghostHost !== host)
-            flushGhost();
-        if (on) {
-            if (ghostTimer)
-                clearTimeout(ghostTimer);
-            ghostTimer = null;
-            host.classList.add('axdb-ghost');
-            host.classList.remove('axdb-out');
-            ghostHost = host;
-        }
-        else {
-            host.classList.remove('axdb-out');
-            // Keep transition-exemption through the drop write so the snap into the
-            // placeholder is INSTANT (gridstack-style), then let glides resume.
-            if (ghostTimer)
-                clearTimeout(ghostTimer);
-            ghostHost = host;
-            ghostTimer = setTimeout(() => {
-                host.classList.remove('axdb-ghost');
-                ghostTimer = null;
-                if (ghostHost === host)
-                    ghostHost = null;
-            }, 60);
-        }
+        },
     };
+    // -- projection: cells -> pixels (project.ts) ------------------------------
+    const projection = createProjection(ctx, { afterProject: () => syncSlabs() });
+    const { writeRect, enforceBoardHeight, project, syncPlaceholder, hidePlaceholder, armGlide, disarmGlideSoon, flushGhost, setGhost } = projection;
+    // -- chrome: slabs, frames, captions, handles, cursors (chrome.ts) ---------
+    const chrome = createChrome(ctx, {
+        selectedId: () => selectedId,
+        syncA11y: (only) => syncA11y(only),
+        grabbing: () => !!slabGesture,
+        gestureRunning: () => !!gesture,
+        memberGroupAt: (x, y) => memberGroupAt(x, y),
+        slabEdgesNear: (grp, x, y) => slabEdgesNear(grp, x, y),
+        dragHandle: () => dragHandle,
+        wantHandles,
+    });
+    const { syncSlabs, syncHandles, setCarried, flushCarried, showRefusal, ensureStaticGuard } = chrome;
     // -- resize handles ---------------------------------------------------------
     /** The accessible name of a widget: its title, else its kind, else its id. */
     const nameOf = (node) => {
@@ -813,82 +589,6 @@ export function bindDashboardGrid(api, group, options = {}) {
             host.classList.toggle('axdb-selected', id === selectedId);
         }
     };
-    /**
-     * The chrome on every member host: the painted grip (or none) and the corner
-     * resize handle — ONE host lookup per member, which the host observer's
-     * budget counts (a repaint of one host must cost that host's lookup, not a
-     * second pass).
-     */
-    const syncHandles = (only) => {
-        var _a, _b, _c, _d, _e;
-        syncA11y(only);
-        if (disposed)
-            return;
-        ensureStaticGuard();
-        syncSlabs();
-        const grip = gripOf(dragHandle);
-        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
-            if (only && !only.has(id))
-                continue;
-            const node = diagram.getNode(id);
-            if (!node)
-                continue;
-            const host = hostOf(id);
-            if (!host)
-                continue;
-            syncGrip(host, grip, ((_b = node.state) === null || _b === void 0 ? void 0 : _b.locked) !== true && !isStatic && ((_c = node.getMetadata) === null || _c === void 0 ? void 0 : _c.call(node, 'widgetMovable')) !== false);
-            if (!wantHandles)
-                continue;
-            const existing = host.querySelector(':scope > .axdb-rs');
-            if (((_d = node.state) === null || _d === void 0 ? void 0 : _d.locked) === true || isStatic || ((_e = node.getMetadata) === null || _e === void 0 ? void 0 : _e.call(node, 'widgetResizable')) === false) {
-                existing === null || existing === void 0 ? void 0 : existing.remove();
-                continue;
-            }
-            const rs = existing !== null && existing !== void 0 ? existing : document.createElement('div');
-            if (!existing) {
-                rs.className = 'axdb-rs';
-                rs.setAttribute('title', 'Resize');
-                host.appendChild(rs);
-            }
-            // The grab corner mirrors with the board: bottom-right LTR, bottom-left
-            // RTL — the same corner the tile actually grows from in each direction.
-            rs.classList.toggle('axdb-rs--rtl', rtl);
-        }
-    };
-    /**
-     * Only a HOST-LEVEL change matters: a host arriving (a mount) or a host's
-     * own children changing (a repaint that wiped the injected handle). A
-     * chart's internal churn — most of what a live dashboard mutates — targets
-     * deeper nodes and is ignored, and the hosts the records DO name are the
-     * only ones re-synced. This was members × repaints `querySelector` calls
-     * per wave (9,216 at 96 widgets, review D10); it is now proportional to the
-     * hosts that actually changed.
-     */
-    const hostObserver = new MutationObserver((records) => {
-        const touched = new Set();
-        const noteHost = (el) => {
-            var _a;
-            const e = el;
-            if ((_a = e === null || e === void 0 ? void 0 : e.classList) === null || _a === void 0 ? void 0 : _a.contains('grafloria-node-host')) {
-                const id = e.getAttribute('data-node-id');
-                if (id)
-                    touched.add(id);
-            }
-        };
-        for (const r of records) {
-            // Our own re-injected handle arriving is not a change to answer — it
-            // would echo one more pass per repaint.
-            const ownEcho = r.removedNodes.length === 0 &&
-                r.addedNodes.length > 0 &&
-                Array.from(r.addedNodes).every((n) => { var _a; return (_a = n.classList) === null || _a === void 0 ? void 0 : _a.contains('axdb-rs'); });
-            if (ownEcho)
-                continue;
-            noteHost(r.target);
-            r.addedNodes.forEach((n) => noteHost(n));
-        }
-        if (touched.size)
-            syncHandles(touched);
-    });
     // -- gesture snapshot / commit ---------------------------------------------
     const snapshotAll = () => {
         const cells = new Map();
@@ -1165,54 +865,6 @@ export function bindDashboardGrid(api, group, options = {}) {
         const s = sizeOf(grp);
         return { n: y - p.y <= grip, s: p.y + s.height - y <= grip, w: x - p.x <= grip, e: p.x + s.width - x <= grip };
     };
-    /**
-     * SECTION CHROME. A section (member group) paints no card of its own, so it
-     * had nothing to press: a click on its empty band cleared the selection and
-     * its frame had no handle and no edge — a section with many children could
-     * not be selected at all, and could only be resized by pulling a child
-     * (Quantia, Groups page). Every section gets a pointer-transparent overlay
-     * in the HTML layer that wears the selection ring and, while selected, the
-     * corner handle; its frame edges answer the resize cursor.
-     */
-    const slabEls = new Map();
-    /**
-     * GROUP FRAME (0.4.43): a TAB CONTAINER wears a frame by default — its slab
-     * is bordered and a tinted surface lies under its pages, first in the layer
-     * so the tiles paint over it. A page torn out with two widgets under its tab
-     * read as a strip floating over two loose cards: nothing said the second
-     * card was the tab's. A plain section keeps its invisible slab.
-     */
-    const groupBgs = new Map();
-    const syncGroupBg = (layer, id, on, x, y, w, h) => {
-        var _a;
-        let bg = (_a = groupBgs.get(id)) !== null && _a !== void 0 ? _a : null;
-        if (!on) {
-            bg === null || bg === void 0 ? void 0 : bg.remove();
-            groupBgs.delete(id);
-            return;
-        }
-        if (!bg || bg.parentElement !== layer) {
-            bg === null || bg === void 0 ? void 0 : bg.remove();
-            bg = document.createElement('div');
-            bg.className = 'axdb-group-bg';
-            bg.setAttribute('data-group-bg', id);
-            layer.prepend(bg);
-            groupBgs.set(id, bg);
-        }
-        bg.style.left = `${x}px`;
-        bg.style.top = `${y}px`;
-        bg.style.width = `${w}px`;
-        bg.style.height = `${h}px`;
-    };
-    const isTabsGroup = (grp) => { var _a; return ((_a = grp.getMetadata('containerWidget')) === null || _a === void 0 ? void 0 : _a.layout) === 'tabs'; };
-    /**
-     * A TAB CONTAINER's frame is its drag handle (0.4.43): its 8-px margin —
-     * under the strip, beside the pages — moves the group, so the edge-resize
-     * zone shrinks to 3 px there (the corner handle still resizes). A section's
-     * edges keep the full grip: its empty band is a drop target, not a handle.
-     */
-    const TAB_FRAME_GRIP = 3;
-    const edgeGripFor = (grp) => (isTabsGroup(grp) ? TAB_FRAME_GRIP : EDGE_GRIP);
     /**
      * 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
@@ -1298,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);
@@ -1305,180 +963,6 @@ export function bindDashboardGrid(api, group, options = {}) {
         }
         besideOn(g.id, g.spans, z, row);
     };
-    /**
-     * CARRIED (0.4.43): a group dragged by its strip or band moves as ONE thing.
-     * The held TILE is transition-exempt (the ghost), but a group has no host of
-     * its own: its strip jumped to the pointer while its pages' tiles GLIDED
-     * after it — on the live demo the content trailed the strip by up to 140 px
-     * at every step. Everything in the group's subtree — tiles, strips, slabs,
-     * the surface — is exempt for the gesture and, like the ghost, through the
-     * drop write; then the glides resume.
-     */
-    const carriedEls = new Set();
-    let carriedTimer = null;
-    const subtreeIds = (id) => {
-        var _a;
-        const groups = [];
-        const nodes = [];
-        const queue = [id];
-        const seen = new Set();
-        while (queue.length) {
-            const cur = queue.shift();
-            if (seen.has(cur))
-                continue;
-            seen.add(cur);
-            const grp = diagram.getGroup(cur);
-            if (grp) {
-                groups.push(cur);
-                for (const m of (_a = grp.members) !== null && _a !== void 0 ? _a : [])
-                    queue.push(m);
-            }
-            else if (diagram.getNode(cur))
-                nodes.push(cur);
-        }
-        return { groups, nodes };
-    };
-    const cssId = (id) => (typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"'));
-    const setCarried = (id, on) => {
-        const layer = htmlLayer();
-        if (!layer)
-            return;
-        if (carriedTimer) {
-            clearTimeout(carriedTimer);
-            carriedTimer = null;
-        }
-        if (on) {
-            const { groups, nodes } = subtreeIds(id);
-            const els = [];
-            for (const n of nodes) {
-                const h = hostOf(n);
-                if (h)
-                    els.push(h);
-            }
-            for (const g of groups) {
-                els.push(...Array.from(layer.querySelectorAll(`:scope > .axdb-tabs[data-tabs-id="${cssId(g)}"], :scope > .axdb-slab[data-slab-id="${cssId(g)}"], :scope > .axdb-group-bg[data-group-bg="${cssId(g)}"]`)));
-            }
-            for (const el of els) {
-                el.classList.add('axdb-carried');
-                carriedEls.add(el);
-            }
-            return;
-        }
-        carriedTimer = setTimeout(() => {
-            for (const el of carriedEls)
-                el.classList.remove('axdb-carried');
-            carriedEls.clear();
-            carriedTimer = null;
-        }, 60);
-    };
-    const flushCarried = () => {
-        if (carriedTimer)
-            clearTimeout(carriedTimer);
-        carriedTimer = null;
-        for (const el of carriedEls)
-            el.classList.remove('axdb-carried');
-        carriedEls.clear();
-    };
-    let slabLayer = null;
-    const syncSlabs = () => {
-        var _a, _b, _c;
-        if (disposed)
-            return;
-        const layer = (slabLayer === null || slabLayer === void 0 ? void 0 : slabLayer.isConnected) ? slabLayer : (slabLayer = htmlLayer());
-        if (!layer)
-            return;
-        const seen = new Set();
-        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
-            const grp = diagram.getGroup(id);
-            if (!grp || diagram.getNode(id))
-                continue;
-            seen.add(id);
-            let el = slabEls.get(id);
-            if (!el || el.parentElement !== layer) {
-                el === null || el === void 0 ? void 0 : el.remove();
-                el = document.createElement('div');
-                el.className = 'axdb-slab';
-                el.setAttribute('data-slab-id', id);
-                const rs = document.createElement('div');
-                rs.className = 'axdb-rs';
-                rs.setAttribute('title', 'Resize section');
-                el.appendChild(rs);
-                layer.appendChild(el);
-                slabEls.set(id, el);
-            }
-            const p = grp.position;
-            const sz = sizeOf(grp);
-            el.style.left = `${p.x}px`;
-            el.style.top = `${p.y}px`;
-            el.style.width = `${sz.width}px`;
-            el.style.height = `${sz.height}px`;
-            el.classList.toggle('axdb-slab--selected', selectedId === id);
-            el.classList.toggle('axdb-slab--static', isStatic);
-            (_b = el.querySelector(':scope > .axdb-rs')) === null || _b === void 0 ? void 0 : _b.classList.toggle('axdb-rs--rtl', rtl);
-            const tabs = isTabsGroup(grp);
-            el.classList.toggle('axdb-slab--tabs', tabs);
-            syncGroupBg(layer, id, tabs, p.x, p.y, sz.width, sz.height);
-            syncCaption(el, id, grp, sz.height);
-        }
-        for (const [id, el] of slabEls) {
-            if (!seen.has(id)) {
-                el.remove();
-                hoverSlabs.delete(el);
-                slabEls.delete(id);
-                (_c = groupBgs.get(id)) === null || _c === void 0 ? void 0 : _c.remove();
-                groupBgs.delete(id);
-            }
-        }
-    };
-    /**
-     * THE CAPTION BAND of a section, on its slab overlay. Painted from the
-     * group's persisted caption; repainted only when its identity changes (the
-     * options, RTL, static, the tier) so a custom `renderCaption` is not run
-     * per frame. The band takes the pointer (the slab itself does not): a press
-     * on it selects the section, an action fires, pass-through reaches content.
-     */
-    const syncCaption = (el, id, grp, sectionH) => {
-        const cap = captionOfGroup(grp);
-        let band = el.querySelector(':scope > .axdb-slab-h');
-        if (!cap || !captionPainted(cap, isStatic)) {
-            band === null || band === void 0 ? void 0 : band.remove();
-            hoverSlabs.delete(el);
-            el.classList.remove('axdb-slab--hot');
-            el.removeAttribute('aria-label');
-            el.removeAttribute('role');
-            return;
-        }
-        if (cap.show === 'hover')
-            hoverSlabs.add(el);
-        else {
-            hoverSlabs.delete(el);
-            el.classList.remove('axdb-slab--hot');
-        }
-        const ctx = { rtl, static: isStatic, sectionH };
-        const key = captionKey(cap, ctx);
-        if (band && band.getAttribute('data-key') === key) {
-            sizeCaptionBand(band, cap, sectionH); // the tier follows the live size
-            return;
-        }
-        band === null || band === void 0 ? void 0 : band.remove();
-        band = document.createElement('div');
-        el.prepend(band);
-        const render = options.renderCaption;
-        paintCaptionBand(band, cap, Object.assign(Object.assign(Object.assign({}, ctx), (render ? { render: (host) => render(id, host) } : {})), { onAction: (actionId) => { var _a; return (_a = options.onCaptionAction) === null || _a === void 0 ? void 0 : _a.call(options, id, actionId); } }));
-        band.setAttribute('data-key', key);
-        // A named group, so the caption text is the section's name in the
-        // accessibility tree rather than a stray label on an unnamed div. (The
-        // band is not a tab stop yet — the actions are deliberately out of the
-        // tab order so a board keeps exactly ONE stop; see the plan.)
-        if (cap.text) {
-            el.setAttribute('role', 'group');
-            el.setAttribute('aria-label', cap.text);
-        }
-        else {
-            el.removeAttribute('role');
-            el.removeAttribute('aria-label');
-        }
-    };
     const insideMemberGroupFrame = (x, y) => {
         var _a;
         for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
@@ -1493,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 });
@@ -1542,48 +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';
-    };
-    /** The cell a slab move asked for and could not have — painted so the refusal is visible; null clears it. */
-    let refusal = null;
-    const showRefusal = (cell, w, h) => {
-        const layer = htmlLayer();
-        if (!cell || !layer) {
-            refusal === null || refusal === void 0 ? void 0 : refusal.remove();
-            refusal = null;
-            api.container.style.cursor = slabGesture ? 'grabbing' : '';
-            return;
-        }
-        if (!refusal || refusal.parentElement !== layer) {
-            refusal === null || refusal === void 0 ? void 0 : refusal.remove();
-            refusal = document.createElement('div');
-            refusal.className = 'axdb-ph axdb-ph--no';
-            layer.prepend(refusal);
-        }
-        const r = cellToRect({ x: cell.x, y: cell.y, w, h }, frame(), geom(), rows());
-        refusal.style.left = `${r.x}px`;
-        refusal.style.top = `${r.y}px`;
-        refusal.style.width = `${r.width}px`;
-        refusal.style.height = `${r.height}px`;
-        api.container.style.cursor = 'not-allowed';
     };
     const slabMove = (ev) => {
+        if ((gesture === null || gesture === void 0 ? void 0 : gesture.subject) === 'group')
+            return onToolMove(ev);
         const g = slabGesture;
         if (!g)
             return;
@@ -1668,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;
@@ -1694,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;
@@ -1741,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';
         }
@@ -1778,14 +1267,19 @@ 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 = '';
         (_a = g.chip) === null || _a === void 0 ? void 0 : _a.remove();
-        placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
-        placeholder = null;
+        hidePlaceholder();
     };
     const commitGesture = (g) => {
         var _a;
@@ -1815,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();
@@ -1916,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 };
@@ -1952,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 };
@@ -1965,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
@@ -2063,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 ------------------------------------------
@@ -2071,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;
@@ -2355,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;
@@ -2396,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;
@@ -2416,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) {
@@ -2447,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 {
@@ -2457,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
@@ -2469,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);
@@ -2494,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();
@@ -2524,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);
@@ -2611,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);
@@ -2622,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 = () => {
@@ -3021,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;
@@ -3034,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);
@@ -3044,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();
@@ -3314,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,
@@ -3390,253 +2970,24 @@ export function bindDashboardGrid(api, group, options = {}) {
             onToolUp();
     };
     const unregisterTool = registerTool(tool);
-    /**
-     * Edge affordance: the cursor says which border a press would take, the
-     * way gridstack's invisible edge handles do. One passive listener on the
-     * container; the corner handle keeps its own cursor from the stylesheet.
-     */
-    let hoverHost = null;
-    /**
-     * A `show: 'hover'` caption cannot ride CSS `:hover`: the slab overlay takes
-     * no pointer (by design — it must never steal a press), and while the band
-     * is hidden it takes none either, so nothing in the section is ever hovered
-     * in CSS terms. The binder already tracks the pointer; it marks the section
-     * under it instead.
-     */
-    /** Only the sections carrying a `show: 'hover'` band — usually none, so the
-     *  pointer handler costs nothing on a board that has no hover caption. */
-    const hoverSlabs = new Set();
-    const markHotSection = (clientX, clientY) => {
-        if (!hoverSlabs.size)
-            return;
-        for (const el of hoverSlabs) {
-            const r = el.getBoundingClientRect();
-            el.classList.toggle('axdb-slab--hot', clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom);
-        }
-    };
-    const onHoverLeave = () => {
-        for (const el of hoverSlabs)
-            el.classList.remove('axdb-slab--hot');
-    };
-    const onHover = (e) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (disposed || gesture)
-            return;
-        markHotSection(e.clientX, e.clientY);
-        // The event may target the host, its content, or (when a host's content
-        // is pointer-transparent) the canvas under it — find the member host by
-        // the pointer's position in that case.
-        let host = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.grafloria-node-host');
-        if (!host) {
-            for (const id of (_c = group.members) !== null && _c !== void 0 ? _c : []) {
-                const h = hostOf(id);
-                if (!h)
-                    continue;
-                const r = h.getBoundingClientRect();
-                if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) {
-                    host = h;
-                    break;
-                }
-            }
-        }
-        if (hoverHost && hoverHost !== host) {
-            hoverHost.style.cursor = '';
-            hoverHost.removeAttribute('data-axdb-edge'); // the affordance follows the pointer off a tile
-        }
-        hoverHost = host;
-        if (!host) {
-            // No tile under the pointer: a SECTION's frame edge still says resize.
-            const wpt = ((_d = api.viewport) === null || _d === void 0 ? void 0 : _d.clientToWorld) ? api.viewport.clientToWorld(e.clientX, e.clientY, api.container.getBoundingClientRect()) : null;
-            const sid = wpt ? memberGroupAt(wpt.x, wpt.y) : null;
-            const grp = sid ? diagram.getGroup(sid) : undefined;
-            const c = grp && wpt && !isStatic ? cursorFor(slabEdgesNear(grp, wpt.x, wpt.y)) : '';
-            if (!slabGesture)
-                api.container.style.cursor = c;
-            return;
-        }
-        if (!slabGesture && api.container.style.cursor)
-            api.container.style.cursor = '';
-        const id = (_e = host.getAttribute('data-node-id')) !== null && _e !== void 0 ? _e : '';
-        if (!((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(id))
-            return;
-        const node = diagram.getNode(id);
-        const resizable = !!node && !isStatic && ((_g = node.state) === null || _g === void 0 ? void 0 : _g.locked) !== true && ((_h = node.getMetadata) === null || _h === void 0 ? void 0 : _h.call(node, 'widgetResizable')) !== false;
-        const cursor = resizable ? cursorFor(edgesNear(host, e.clientX, e.clientY)) : '';
-        // The affordance rides on an ATTRIBUTE, not the inline style: a repaint
-        // rewrites the host's style and used to clear the cursor mid-hover, and
-        // content that sets its own cursor (a chart canvas) hid it — the
-        // stylesheet applies the attribute's cursor to the host and everything in it.
-        if (cursor)
-            host.setAttribute('data-axdb-edge', cursor);
-        else
-            host.removeAttribute('data-axdb-edge');
-    };
-    api.container.addEventListener('pointermove', onHover, { passive: true });
-    api.container.addEventListener('pointerleave', onHoverLeave, { passive: true });
-    /**
-     * STATIC BOARDS LET CONTENT BE CLICKED. The renderer prevents the default of
-     * every press a tool claims, which cancels the compatibility mouse events —
-     * a chart inside a read-only board could not be clicked. So under `static`
-     * a press inside a member's CONTENT (not on kit chrome) is stopped on the
-     * HTML layer, in the bubble phase: the content has already received it, the
-     * renderer never does, nothing is prevented.
-     */
-    const staticGuard = (e) => {
-        var _a, _b, _c, _d;
-        if (!isStatic || disposed)
-            return;
-        const t = e.target;
-        const host = (_a = t === null || t === void 0 ? void 0 : t.closest) === null || _a === void 0 ? void 0 : _a.call(t, '.grafloria-node-host');
-        if (!host || !((_b = group.members) !== null && _b !== void 0 ? _b : new Set()).has((_c = host.getAttribute('data-node-id')) !== null && _c !== void 0 ? _c : ''))
-            return;
-        if ((_d = t === null || t === void 0 ? void 0 : t.closest) === null || _d === void 0 ? void 0 : _d.call(t, '.axdb-rs, .axdb-grip, .axdb-div'))
-            return;
-        e.stopPropagation();
-    };
-    let guardedLayer = null;
-    const ensureStaticGuard = () => {
-        // One lookup, ever: the host observer budgets container lookups per
-        // repaint, and the layer element lives as long as the instance.
-        if (guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.isConnected)
-            return;
-        const layer = htmlLayer();
-        if (!layer)
-            return;
-        guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
-        guardedLayer = layer;
-        layer.addEventListener('pointerdown', staticGuard);
-    };
-    /**
-     * KEYBOARD OPERATION (WCAG 2.1.1, and the non-drag alternative 2.5.7 asks
-     * for): on a focused member, arrows move it one cell, Shift+arrows resize it
-     * one cell, Home/End jump to the first/last member. Every move and resize is
-     * the same programmatic gesture the API uses — one undoable step, reported
-     * through onLayoutChange — and every outcome is spoken: the tile's new
-     * cell, each neighbour it displaced, or why it was refused. Handled keys
-     * stop here so the renderer's own pixel nudge never fights the grid.
-     */
-    const memberHostAt = (target) => {
-        var _a, _b, _c;
-        const host = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '.grafloria-node-host');
-        if (!host)
-            return null;
-        const id = (_b = host.getAttribute('data-node-id')) !== null && _b !== void 0 ? _b : '';
-        if (!((_c = group.members) !== null && _c !== void 0 ? _c : new Set()).has(id) || !diagram.getNode(id))
-            return null;
-        return { id, host };
-    };
-    const onFocusIn = (e) => {
-        const hit = memberHostAt(e.target);
-        if (!hit || disposed)
-            return;
-        if (focusedId !== hit.id || selectedId !== hit.id) {
-            focusedId = hit.id;
-            selectWidget(hit.id);
-            syncA11y();
-        }
-    };
-    const onKey = (e) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (disposed || gesture)
-            return;
-        const hit = memberHostAt(e.target);
-        if (!hit) {
-            // Tab reaches the diagram's own root (the svg) before any widget. An
-            // arrow or Enter there hands focus to the board's tab stop, so a
-            // keyboard user is never parked on "Diagram, 8 nodes" with nowhere to go.
-            const el = e.target;
-            const onRoot = !!el && ((_a = el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'svg' && ((_b = el.classList) === null || _b === void 0 ? void 0 : _b.contains('grafloria-diagram'));
-            if (onRoot && (e.key.startsWith('Arrow') || e.key === 'Enter' || e.key === ' ')) {
-                const members = [...((_c = group.members) !== null && _c !== void 0 ? _c : [])].filter((id) => !!diagram.getNode(id) && !!hostOf(id));
-                const target = focusedId && members.includes(focusedId) ? focusedId : members[0];
-                if (target && handle.focusWidget(target)) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            }
-            return;
-        }
-        const members = [...((_d = group.members) !== null && _d !== void 0 ? _d : [])].filter((id) => !!diagram.getNode(id) && !!hostOf(id));
-        if (e.key === 'Home' || e.key === 'End') {
-            const id = e.key === 'Home' ? members[0] : members[members.length - 1];
-            if (id)
-                handle.focusWidget(id);
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        const arrow = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
-        if (!arrow)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        if (isStatic)
-            return; // readable, not editable
-        const node = diagram.getNode(hit.id);
-        const item = engine.getItem(hit.id);
-        if (!node || !item)
-            return;
-        const name = nameOf(node);
-        if (((_e = node.state) === null || _e === void 0 ? void 0 : _e.locked) === true) {
-            live.announceError(`${name} is pinned`);
-            return;
-        }
-        const [dx, dy] = arrow;
-        const before = new Map(engine.getItems().map((i) => [i.id, { x: i.x, y: i.y, w: i.w, h: i.h }]));
-        const resize = e.shiftKey;
-        if (resize && ((_f = node.getMetadata) === null || _f === void 0 ? void 0 : _f.call(node, 'widgetResizable')) === false) {
-            live.announceError(`${name} cannot be resized`);
-            return;
-        }
-        if (!resize && ((_g = node.getMetadata) === null || _g === void 0 ? void 0 : _g.call(node, 'widgetMovable')) === false) {
-            live.announceError(`${name} cannot be moved`);
-            return;
-        }
-        // A one-cell keyboard step onto a neighbour would be refused by the
-        // pointer's anti-jitter gate (a 3-wide covering a third of its neighbour
-        // is not "more than half"). A key press is deliberate, so when the step
-        // is refused and a neighbour sits there, aim at the neighbour's far edge —
-        // the same swap a full drag lands on.
-        const stepOrSwap = () => __awaiter(this, void 0, void 0, function* () {
-            if (yield handle.moveTo(hit.id, item.x + dx, item.y + dy))
-                return true;
-            const probe = { x: item.x + dx, y: item.y + dy, w: item.w, h: item.h };
-            const c = engine
-                .getItems()
-                .find((o) => o.id !== hit.id && probe.x < o.x + o.w && o.x < probe.x + probe.w && probe.y < o.y + o.h && o.y < probe.y + probe.h);
-            if (!c)
-                return false;
-            const tx = dx > 0 ? c.x + c.w - item.w : dx < 0 ? c.x : item.x;
-            const ty = dy > 0 ? c.y + c.h - item.h : dy < 0 ? c.y : item.y;
-            return handle.moveTo(hit.id, tx, ty);
-        });
-        const op = resize ? handle.resizeTo(hit.id, item.w + dx, item.h + dy) : stepOrSwap();
-        void op.then((ok) => {
-            var _a, _b;
-            if (disposed)
-                return;
-            const after = engine.getItem(hit.id);
-            if (!ok || !after) {
-                live.announceError(resize ? `Cannot resize ${name} that way` : `Cannot move ${name} ${directionName(dx, dy)}`);
-                return;
-            }
-            const parts = [`${name} ${resize ? 'resized' : 'moved'} to ${describeCell(after)}`];
-            for (const other of engine.getItems()) {
-                if (other.id === hit.id)
-                    continue;
-                const was = before.get(other.id);
-                if (!was || (was.x === other.x && was.y === other.y))
-                    continue;
-                const o = diagram.getNode(other.id);
-                parts.push(`${o ? nameOf(o) : other.id} moved to ${describeCell(other)}`);
-            }
-            live.announce(parts.join('. '), 'polite', true);
-            syncA11y();
-            (_b = (_a = hostOf(hit.id)) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a, { preventScroll: true });
-        });
-    };
-    api.container.addEventListener('focusin', onFocusIn);
-    api.container.addEventListener('keydown', onKey);
+    api.container.addEventListener('pointermove', chrome.onHover, { passive: true });
+    api.container.addEventListener('pointerleave', chrome.onHoverLeave, { passive: true });
+    // -- keyboard operation (keyboard.ts) --------------------------------------
+    const keyboard = createKeyboard(ctx, {
+        handle: () => handle,
+        live,
+        nameOf,
+        focusedId: () => focusedId,
+        setFocusedId: (id) => {
+            focusedId = id;
+        },
+        selectedId: () => selectedId,
+        selectWidget,
+        syncA11y: () => syncA11y(),
+        gestureRunning: () => !!gesture,
+    });
+    api.container.addEventListener('focusin', keyboard.onFocusIn);
+    api.container.addEventListener('keydown', keyboard.onKey);
     // -- tab tear-out -----------------------------------------------------------
     /**
      * A press that TRAVELLED on a tab drags the whole page onto this board, the
@@ -4039,8 +3390,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 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;
+            hidePlaceholder(); // the accent overlay says which half; the grey placeholder under it is noise
             return ok;
         };
         /** The band a dock is promised: the cell it takes — a BOTTOM dock's lies past the last row, so its tint sits on the board's last rows instead. */
@@ -4056,8 +3406,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             l.place(z.cell, true); // DOCKING PUSHES SECTIONS: everything below the band moves down, solid or not
             insertRows(z.cell, l);
             project();
-            placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
-            placeholder = null;
+            hidePlaceholder();
             return true;
         };
         let zone = { kind: 'board' };
@@ -4255,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 },
@@ -4667,19 +4017,17 @@ export function bindDashboardGrid(api, group, options = {}) {
         },
         beginPaletteDrag,
         dispose() {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             if (disposed)
                 return;
             cancelActiveGesture(false);
             disposed = true;
             peersOnCanvas().delete(selfPeer);
             unregisterTool();
-            api.container.removeEventListener('pointermove', onHover);
-            api.container.removeEventListener('pointerleave', onHoverLeave);
-            guardedLayer === null || guardedLayer === void 0 ? void 0 : guardedLayer.removeEventListener('pointerdown', staticGuard);
-            api.container.removeEventListener('focusin', onFocusIn);
-            api.container.removeEventListener('keydown', onKey);
-            hostObserver.disconnect();
+            api.container.removeEventListener('pointermove', chrome.onHover);
+            api.container.removeEventListener('pointerleave', chrome.onHoverLeave);
+            api.container.removeEventListener('focusin', keyboard.onFocusIn);
+            api.container.removeEventListener('keydown', keyboard.onKey);
             containerObserver === null || containerObserver === void 0 ? void 0 : containerObserver.disconnect();
             tearing = null;
             for (const off of subs)
@@ -4688,23 +4036,8 @@ export function bindDashboardGrid(api, group, options = {}) {
             // split layout must not keep showing a resize corner it cannot act on.
             for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : [])
                 (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.querySelector(':scope > .axdb-rs')) === null || _c === void 0 ? void 0 : _c.remove();
-            placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
-            placeholder = null;
-            if (glideTimer)
-                clearTimeout(glideTimer);
-            for (const el of slabEls.values())
-                el.remove();
-            slabEls.clear();
-            hoverSlabs.clear();
-            for (const bg of groupBgs.values())
-                bg.remove();
-            groupBgs.clear();
-            // A rebind inside the 60 ms window (a layout switch right after an undo)
-            // disposed this binder with the timer pending — the host kept its
-            // lifted ghost for good (visual gate, nested-containers ⑤).
-            flushGhost();
-            flushCarried();
-            (_d = htmlLayer()) === null || _d === void 0 ? void 0 : _d.classList.remove('axdb-glide');
+            chrome.dispose(); // slabs, frames, the refused cell, the carried subtree, the host observer, the static guard
+            projection.dispose(); // the placeholder, the glide timer, a pending ghost
             api.container.style.cursor = '';
         },
     };
@@ -4716,7 +4049,7 @@ export function bindDashboardGrid(api, group, options = {}) {
     rebuild(true);
     const layer = htmlLayer();
     if (layer)
-        hostObserver.observe(layer, { childList: true, subtree: true });
+        chrome.observe(layer);
     containerObserver === null || containerObserver === void 0 ? void 0 : containerObserver.observe(api.container);
     return handle;
 }