@grafloria/element 0.4.53 → 0.4.55

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,7 @@ 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 '';
-}
 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 +334,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 +463,56 @@ 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,
+        ghostId: () => adoptedGhostId !== null && adoptedGhostId !== void 0 ? adoptedGhostId : ((gesture === null || gesture === void 0 ? void 0 : gesture.started) ? 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 +586,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();
@@ -947,23 +644,38 @@ export function bindDashboardGrid(api, group, options = {}) {
      */
     let pendingDrop = null;
     const onMemberAdded = (id) => {
-        var _a, _b;
+        var _a, _b, _c;
         if (disposed)
             return;
-        if (pendingDrop && pendingDrop !== id && engine.getItem(pendingDrop) && !((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(pendingDrop)) {
-            engine.remove(pendingDrop);
+        // The cell a waiting tile held for an arriving member of ANOTHER id. The
+        // removal settles the board — the tiles the drop pushed float back into
+        // the hole — so the member cannot simply be added there: it collided and
+        // auto-positioned to the left edge (Quantia's "lands on the cell it was
+        // aimed at"). It enters at the bottom edge instead and takes the cell
+        // gatelessly, pushing them down again, all inside this one call.
+        let claim = null;
+        if (pendingDrop && pendingDrop !== id) {
+            const ph = engine.getItem(pendingDrop);
+            if (ph && !((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(pendingDrop)) {
+                claim = { x: ph.x, y: ph.y };
+                engine.remove(pendingDrop);
+            }
         }
         pendingDrop = null;
         if (!engine.getItem(id)) {
             const item = itemFor(id);
-            let placed = engine.add(item);
+            let placed = claim ? engine.add(Object.assign(Object.assign({}, item), { x: 0, y: engine.rows(), autoPosition: false })) : engine.add(item);
+            if (placed && claim) {
+                engine.moveCheck(id, claim.x, claim.y, { gate: false, pushSolid: !!placed.solid });
+                placed = (_b = engine.getItem(id)) !== null && _b !== void 0 ? _b : placed;
+            }
             if (!placed && capacity !== undefined) {
                 // Membership is a document fact (an undo just restored it, say); a
                 // bounded board must not strand the node invisible. Lift the capacity
                 // for this adoption — it floors at the content on the next refresh.
                 capacity = undefined;
                 engine = engineFrom([...engine.getItems().map((i) => (Object.assign({}, i))), item]);
-                placed = (_b = engine.getItem(id)) !== null && _b !== void 0 ? _b : null;
+                placed = (_c = engine.getItem(id)) !== null && _c !== void 0 ? _c : null;
                 refreshCapacity();
             }
             if (placed)
@@ -1150,54 +862,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
@@ -1290,180 +954,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 : []) {
@@ -1545,29 +1035,6 @@ export function bindDashboardGrid(api, group, options = {}) {
         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) => {
         const g = slabGesture;
         if (!g)
@@ -1769,8 +1236,7 @@ export function bindDashboardGrid(api, group, options = {}) {
         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;
@@ -3375,253 +2841,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
@@ -4024,8 +3261,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. */
@@ -4041,8 +3277,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' };
@@ -4652,19 +3887,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)
@@ -4673,23 +3906,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 = '';
         },
     };
@@ -4701,7 +3919,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;
 }