@grafloria/element 0.3.18 → 0.3.19

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

@@ -0,0 +1,1636 @@
+"use strict";
+/**
+ * `bindDashboardGrid(api, group, options)` — the dashboard-grid gesture binder
+ * (Phase 2 of the dashboard-grid plan; the plan page's Section-1 prototype is
+ * the executable spec of the feel this reproduces).
+ *
+ * One binder owns ONE `GridPackEngine` mirroring the group's members — the
+ * engine is the single source of truth for cell math (three swap shapes, the
+ * >50% anti-jitter gate, locked refusal, push-down + skipDown, teleport-home
+ * settle). This module only converts: pointer → cells in, cells → pixels out,
+ * gesture → ONE undoable BatchCommand.
+ *
+ * HOW THE RENDERER'S OWN NODE-DRAG IS BYPASSED — a registered `CanvasTool`
+ * (the renderer's wave-6 tool registry, `registerTool`). The tool makes a
+ * POINT-SPECIFIC claim (priority 2, like the whiteboard ink tool): any
+ * pointerdown whose hit node is a member of the bound group, or that lands
+ * inside a member group's frame with no node under it (the KPI-slab dead
+ * zone — otherwise the built-in group-drag would fight the pack layout
+ * there). A claimed gesture bypasses the ENTIRE built-in ladder — node-drag,
+ * selection, marquee, wave-12 resize handles — and the DomEventBinder
+ * forwards move/up/cancel with world coordinates already computed. This beats
+ * `behavior.draggable = false` (which still runs selection and shows the
+ * built-in resize handles) and beats capture-phase DOM listeners (which fight
+ * the binder's own preventDefault bookkeeping). `click` is NOT a
+ * compatibility mouse event, so the page's click-to-focus keeps firing for
+ * sub-threshold presses.
+ *
+ * DURING a gesture, positions are written through the MODEL, not commands:
+ *  - the held tile is a GHOST — transition-exempt, tracking the cursor in
+ *    WORLD coordinates (no `position: fixed` hack; the html layer carries the
+ *    camera transform, and the tool events arrive already converted);
+ *  - every cell crossing runs `engine.moveCheck` / `resizeCheck`; every item
+ *    the engine displaced is re-projected cells→pixels. Those writes are
+ *    DERIVED state, so they run inside `diagram.runSystemWrite` — which is
+ *    also what lets a PINNED tile's pixels follow a fit-mode row-height
+ *    change without violating the authoritative geometry lock (its CELLS
+ *    never change; the pin protects the document fact, not the projection);
+ *  - a dashed PLACEHOLDER (`.axdb-ph`) always shows the engine's current cell
+ *    for the held tile — the truthful drop preview.
+ *
+ * The gesture ends in ONE `BatchCommand`: `SetGridItemCommand` per tile whose
+ * cells changed (cells are the truth) + `MoveNodeCommand`/`ResizeNodeCommand`
+ * (merge-opted-OUT) per unlocked node whose geometry changed, so a bare undo
+ * restores geometry AND cells with no binder help. Escape restores the
+ * engine snapshot (`cancelGesture`) and every pixel — nothing is committed.
+ *
+ * MEMBER GROUPS (e.g. a KPI section) ride as LOCKED slab items — never
+ * pushed, never packed, drags onto them refused (the prototype's pinned
+ * full-width row). Their cells persist in group metadata `gridItem` (groups
+ * carry no GridItemConfig); their INNER layout is their own concern — bind a
+ * second `bindDashboardGrid` on the section for a nested pack grid.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bindDashboardGrid = bindDashboardGrid;
+const tslib_1 = require("tslib");
+const engine_1 = require("@grafloria/engine");
+const renderer_1 = require("@grafloria/renderer");
+const grid_mapping_1 = require("./grid-mapping");
+const styles_1 = require("./styles");
+const BOARD_REGISTRY = new Map();
+/**
+ * Undoable cell+frame write for a GROUP member (the strip's slab). The engine
+ * has Move/Resize commands for nodes but none for a group's frame, and slab
+ * cells live in group metadata — this closes nested height escalation into
+ * the gesture's single BatchCommand so one undo restores the strip too.
+ */
+class SetGroupCellCommand extends engine_1.Command {
+    constructor(groupId, cellBefore, cellAfter, frameBefore, frameAfter) {
+        super('Resize section');
+        this.groupId = groupId;
+        this.cellBefore = cellBefore;
+        this.cellAfter = cellAfter;
+        this.frameBefore = frameBefore;
+        this.frameAfter = frameAfter;
+    }
+    apply(context, cell, frame) {
+        const diagram = context.diagram;
+        const grp = diagram === null || diagram === void 0 ? void 0 : diagram.getGroup(this.groupId);
+        if (!grp)
+            return;
+        grp.setMetadata('gridItem', (0, grid_mapping_1.gridItemFromCell)(cell));
+        grp.setFrame(Object.assign({}, frame));
+    }
+    execute(context) {
+        this.apply(context, this.cellAfter, this.frameAfter);
+    }
+    undo(context) {
+        this.apply(context, this.cellBefore, this.frameBefore);
+    }
+    serialize() {
+        return {
+            id: this.id,
+            name: this.name,
+            timestamp: this.timestamp,
+            data: {
+                groupId: this.groupId,
+                cellBefore: this.cellBefore,
+                cellAfter: this.cellAfter,
+                frameBefore: this.frameBefore,
+                frameAfter: this.frameAfter,
+            },
+        };
+    }
+}
+const DRAG_THRESHOLD = 4;
+const GLIDE_OFF_DELAY = 400;
+let binderSeq = 0;
+function bindDashboardGrid(api, group, options = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    (0, styles_1.ensureDashboardKitStyles)();
+    const diagram = api.getModel();
+    /** The DECLARED count — the board's authored width, and the responsive cap. */
+    const maxColumns = (_a = options.columns) !== null && _a !== void 0 ? _a : 12;
+    /** The LIVE count. Responsive width evaluation and `setColumns` move it. */
+    let columns = maxColumns;
+    let rtl = options.rtl === true;
+    const responsive = options.responsive;
+    /** An explicit `setColumns` pins the count and stops width evaluation. */
+    let responsivePinned = false;
+    const gap = (_b = options.gap) !== null && _b !== void 0 ? _b : 12;
+    const padding = (_c = options.padding) !== null && _c !== void 0 ? _c : gap;
+    const baseRowHeight = (_d = options.baseRowHeight) !== null && _d !== void 0 ? _d : 110;
+    const minRowHeight = (_e = options.minRowHeight) !== null && _e !== void 0 ? _e : 28;
+    let float = (_f = options.float) !== null && _f !== void 0 ? _f : false;
+    const maxRows = options.maxRows;
+    const dragOut = (_g = options.dragOut) !== null && _g !== void 0 ? _g : 'cancel';
+    const wantHandles = options.resizeHandles !== false;
+    const designH = (_k = (_h = options.designHeight) !== null && _h !== void 0 ? _h : (_j = group.size) === null || _j === void 0 ? void 0 : _j.height) !== null && _k !== void 0 ? _k : 0;
+    let sizing = (_l = options.sizing) !== null && _l !== void 0 ? _l : 'fit';
+    let engine = new engine_1.GridPackEngine([], { columns, float, maxRows });
+    let gesture = null;
+    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;
+    let glideTimer = null;
+    let ghostTimer = null;
+    const frame = () => {
+        var _a, _b, _c, _d;
+        return ({
+            x: group.position.x,
+            y: group.position.y,
+            width: (_b = (_a = group.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0,
+            height: (_d = (_c = group.size) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0,
+        });
+    };
+    /** Entity size with GroupModel's optionality flattened away. */
+    const sizeOf = (e) => { var _a; return (_a = e.size) !== null && _a !== void 0 ? _a : { width: 0, height: 0 }; };
+    /** Mapping geometry. 'fit' derives row height from the LIVE frame height
+     *  (which `enforceBoardHeight` pins to the design height), so an externally
+     *  resized board still fits itself. */
+    const geom = () => ({
+        columns,
+        gap,
+        padding,
+        sizing,
+        baseRowHeight,
+        minRowHeight,
+        designHeight: sizing === 'fit' ? frame().height : designH,
+        rtl,
+    });
+    const rows = () => Math.max(1, engine.rows());
+    const htmlLayer = () => api.container.querySelector('.grafloria-html-layer');
+    const hostOf = (id) => {
+        const esc = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"');
+        return api.container.querySelector(`.grafloria-node-host[data-node-id="${esc}"]`);
+    };
+    const memberEntity = (id) => { var _a; return (_a = diagram.getNode(id)) !== null && _a !== void 0 ? _a : diagram.getGroup(id); };
+    const isGroupMember = (id) => !diagram.getNode(id) && !!diagram.getGroup(id);
+    // -- cells <-> members -----------------------------------------------------
+    /** The engine item a member should enter as (cells from GridItemConfig /
+     *  group metadata; spans falling back to metadata columnSpan/rowSpan; last
+     *  resort: adopt from the current pixel geometry). */
+    const itemFor = (id) => {
+        var _a, _b, _c, _d, _e;
+        const node = diagram.getNode(id);
+        if (node) {
+            const spanMeta = Number((_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'columnSpan')) || 0;
+            const rowsMeta = Number((_b = node.getMetadata) === null || _b === void 0 ? void 0 : _b.call(node, 'rowSpan')) || 0;
+            const locked = ((_c = node.state) === null || _c === void 0 ? void 0 : _c.locked) === true;
+            const cell = (0, grid_mapping_1.cellFromGridItem)((_d = node.getGridItem) === null || _d === void 0 ? void 0 : _d.call(node), {
+                w: spanMeta || 1,
+                h: rowsMeta || 1,
+            });
+            if (cell)
+                return Object.assign(Object.assign({ id }, cell), { locked });
+            const f = frame();
+            const g = geom();
+            if (node.position && (node.position.x !== 0 || node.position.y !== 0)) {
+                // First adoption from pixels: where the tile already sits. The SPAN is
+                // resolved first because the mirrored (RTL) mapping needs it to turn a
+                // left edge into a cell.
+                const s = (0, grid_mapping_1.sizeToSpan)(node.size.width, node.size.height, f, g, rows());
+                const p = (0, grid_mapping_1.pointToCell)(node.position.x, node.position.y, f, g, rows(), spanMeta || s.w);
+                return {
+                    id,
+                    x: Math.max(0, p.x),
+                    y: Math.max(0, p.y),
+                    w: spanMeta || s.w,
+                    h: rowsMeta || s.h,
+                    locked,
+                };
+            }
+            return { id, x: 0, y: 0, w: spanMeta || 1, h: rowsMeta || 1, locked, autoPosition: true };
+        }
+        const grp = diagram.getGroup(id);
+        const cell = grp
+            ? (0, grid_mapping_1.cellFromGridItem)((_e = grp.getMetadata) === null || _e === void 0 ? void 0 : _e.call(grp, 'gridItem'))
+            : null;
+        // Member groups are LOCKED slabs (see the module doc).
+        if (cell)
+            return Object.assign(Object.assign({ id }, cell), { locked: true });
+        return { id, x: 0, y: 0, w: columns, h: 1, locked: true, autoPosition: true };
+    };
+    /** Persist adopted cells so save/undo round-trips them. */
+    const persistAdoptedCell = (id, item) => {
+        var _a, _b;
+        const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
+        const node = diagram.getNode(id);
+        if (node) {
+            if (!(0, grid_mapping_1.cellFromGridItem)((_a = node.getGridItem) === null || _a === void 0 ? void 0 : _a.call(node)))
+                node.setGridItem((0, grid_mapping_1.gridItemFromCell)(cell));
+            return;
+        }
+        const grp = diagram.getGroup(id);
+        if (grp && !(0, grid_mapping_1.cellFromGridItem)((_b = grp.getMetadata) === null || _b === void 0 ? void 0 : _b.call(grp, 'gridItem'))) {
+            grp.setMetadata('gridItem', (0, grid_mapping_1.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();
+        const target = sizing === 'fit'
+            ? designH
+            : Math.max(designH, 2 * padding + r * baseRowHeight + (r - 1) * gap);
+        const f = frame();
+        if (Math.abs(f.height - target) > 0.5) {
+            writing = true;
+            try {
+                diagram.runSystemWrite(() => group.setFrame({ x: f.x, y: f.y, width: f.width, height: target }));
+            }
+            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, (0, grid_mapping_1.cellToRect)(item, f, g, r));
+            }
+        }
+        finally {
+            writing = false;
+        }
+        syncPlaceholder();
+    };
+    // -- 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 = (0, grid_mapping_1.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);
+    };
+    const setGhost = (id, on) => {
+        const host = hostOf(id);
+        if (!host)
+            return;
+        if (on) {
+            if (ghostTimer)
+                clearTimeout(ghostTimer);
+            host.classList.add('axdb-ghost');
+            host.classList.remove('axdb-out');
+        }
+        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);
+            ghostTimer = setTimeout(() => host.classList.remove('axdb-ghost'), 60);
+        }
+    };
+    // -- resize handles ---------------------------------------------------------
+    const syncHandles = () => {
+        var _a, _b;
+        if (!wantHandles || disposed)
+            return;
+        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
+            const node = diagram.getNode(id);
+            if (!node)
+                continue;
+            const host = hostOf(id);
+            if (!host)
+                continue;
+            const existing = host.querySelector(':scope > .axdb-rs');
+            if (((_b = node.state) === null || _b === void 0 ? void 0 : _b.locked) === true) {
+                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);
+        }
+    };
+    const hostObserver = new MutationObserver(() => syncHandles());
+    // -- gesture snapshot / commit ---------------------------------------------
+    const snapshotAll = () => {
+        const cells = new Map();
+        const geoms = new Map();
+        for (const item of engine.getItems()) {
+            cells.set(item.id, { x: item.x, y: item.y, w: item.w, h: item.h });
+            const e = memberEntity(item.id);
+            if (e) {
+                const es = sizeOf(e);
+                geoms.set(item.id, {
+                    pos: { x: e.position.x, y: e.position.y },
+                    size: { width: es.width, height: es.height, depth: es.depth },
+                });
+            }
+        }
+        return { cells, geoms };
+    };
+    const deltasSince = (startCells, startGeom, excludeId) => {
+        const out = [];
+        for (const item of engine.getItems()) {
+            if (item.id === excludeId)
+                continue;
+            const before = startCells.get(item.id);
+            const geomBefore = startGeom.get(item.id);
+            const e = memberEntity(item.id);
+            if (!before || !geomBefore || !e)
+                continue; // items added mid-gesture commit separately
+            out.push({
+                id: item.id,
+                locked: !!item.locked,
+                isGroup: isGroupMember(item.id),
+                cellBefore: before,
+                cellAfter: { x: item.x, y: item.y, w: item.w, h: item.h },
+                posBefore: geomBefore.pos,
+                posAfter: { x: e.position.x, y: e.position.y },
+                sizeBefore: geomBefore.size,
+                sizeAfter: (({ width, height, depth }) => ({ width, height, depth }))(sizeOf(e)),
+            });
+        }
+        return out;
+    };
+    const execute = (name, commands) => {
+        if (commands.length === 0)
+            return false;
+        void api.getEngine().commandManager.execute(new engine_1.BatchCommand(name, commands));
+        return true;
+    };
+    // -- membership + bounds sync ----------------------------------------------
+    const onMemberAdded = (id) => {
+        if (disposed)
+            return;
+        if (!engine.getItem(id)) {
+            const item = itemFor(id);
+            const placed = engine.add(item);
+            if (placed)
+                persistAdoptedCell(id, placed);
+        }
+        project();
+        syncHandles();
+        api.render();
+    };
+    const onMemberRemoved = (id) => {
+        if (disposed)
+            return;
+        if (gesture && gesture.id === id)
+            cancelActiveGesture(false);
+        if (!engine.getItem(id))
+            return;
+        engine.remove(id);
+        project();
+        api.render();
+    };
+    const onBoundsChanged = () => {
+        if (disposed || writing)
+            return;
+        if (evaluateResponsive())
+            return; // a column change already re-projected
+        project();
+        api.render();
+    };
+    // -- responsive column count -----------------------------------------------
+    /**
+     * The column count this board's CURRENT WIDTH asks for. Breakpoints win when
+     * given (first step, ascending, whose `w` is at least the board width);
+     * otherwise `columnWidth` divides the width. Both clamp to `[1, columnMax]`.
+     */
+    const columnsForWidth = (width) => {
+        var _a, _b, _c;
+        if (!responsive)
+            return null;
+        const max = Math.max(1, (_a = responsive.columnMax) !== null && _a !== void 0 ? _a : maxColumns);
+        if ((_b = responsive.breakpoints) === null || _b === void 0 ? void 0 : _b.length) {
+            const steps = [...responsive.breakpoints].sort((a, b) => a.w - b.w);
+            const hit = steps.find((s) => width <= s.w);
+            const c = hit ? hit.c : max;
+            return { c: Math.max(1, Math.min(max, c)), layout: (_c = hit === null || hit === void 0 ? void 0 : hit.layout) !== null && _c !== void 0 ? _c : responsive.layout };
+        }
+        if (responsive.columnWidth && responsive.columnWidth > 0) {
+            const c = Math.round(width / responsive.columnWidth);
+            return { c: Math.max(1, Math.min(max, c)), layout: responsive.layout };
+        }
+        return null;
+    };
+    /**
+     * Re-derive the column count from the board width and apply it. Returns true
+     * when the count actually changed (the caller then skips its own project(),
+     * because applyColumns already re-projected everything).
+     */
+    const evaluateResponsive = () => {
+        var _a, _b;
+        if (!responsive || responsivePinned || disposed || gesture)
+            return false;
+        const want = columnsForWidth(frame().width);
+        if (!want || want.c === columns)
+            return false;
+        return applyColumns(want.c, (_b = (_a = want.layout) !== null && _a !== void 0 ? _a : responsive.layout) !== null && _b !== void 0 ? _b : 'moveScale');
+    };
+    /**
+     * Cells written by a column change are DERIVED STATE, not an edit: they go
+     * through `runSystemWrite` exactly like the pixel projection does, never
+     * through the command stack. A browser resize must not be undoable, and the
+     * authored layout is safe regardless — the engine's cache still holds it,
+     * and `saveLayout()` serialises from the widest cached count.
+     */
+    const persistLiveCells = () => {
+        writing = true;
+        try {
+            diagram.runSystemWrite(() => {
+                var _a;
+                for (const item of engine.getItems()) {
+                    const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
+                    const node = diagram.getNode(item.id);
+                    if (node) {
+                        node.setGridItem((0, grid_mapping_1.gridItemFromCell)(cell));
+                        continue;
+                    }
+                    (_a = diagram.getGroup(item.id)) === null || _a === void 0 ? void 0 : _a.setMetadata('gridItem', (0, grid_mapping_1.gridItemFromCell)(cell));
+                }
+            });
+        }
+        finally {
+            writing = false;
+        }
+    };
+    const applyColumns = (n, layout) => {
+        var _a;
+        const prev = columns;
+        if (!engine.setColumns(n, layout))
+            return false;
+        columns = engine.columns;
+        persistLiveCells();
+        armGlide();
+        project();
+        syncPlaceholder();
+        disarmGlideSoon();
+        api.renderNow();
+        (_a = options.onColumnsChange) === null || _a === void 0 ? void 0 : _a.call(options, columns, prev);
+        return true;
+    };
+    /**
+     * The canvas container resizing is the OTHER trigger for re-evaluation: a
+     * page that sizes its boards from the viewport changes the frame in the same
+     * turn, and a page that does not still wants the check to run. The binder
+     * owns this — pages should never have to wire a ResizeObserver for it.
+     */
+    const containerObserver = responsive && typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(() => {
+            if (disposed)
+                return;
+            evaluateResponsive();
+        })
+        : null;
+    // -- board hit-testing ------------------------------------------------------
+    const boardVisualHeight = () => {
+        const f = frame();
+        const g = geom();
+        return Math.max(f.height, 2 * padding + rows() * ((0, grid_mapping_1.rowHeightFor)(g, rows()) + gap) - gap);
+    };
+    const worldInsideBoard = (x, y) => {
+        const f = frame();
+        return x >= f.x && x <= f.x + f.width && y >= f.y && y <= f.y + boardVisualHeight();
+    };
+    /** Small overshoots CLAMP onto the board instead of counting as off-board —
+     *  the plan prototype cannot leave its board at all (cells clamp at the
+     *  edges), so a 60px slip past the frame must not dim or delete. */
+    const EDGE_GRACE = 60;
+    const worldInsideBoardGrace = (x, y) => {
+        if (worldInsideBoardExtended(x, y))
+            return true;
+        const f = frame();
+        const band = (0, grid_mapping_1.rowHeightFor)(geom(), rows()) + gap;
+        return (x >= f.x - EDGE_GRACE &&
+            x <= f.x + f.width + EDGE_GRACE &&
+            y >= f.y - EDGE_GRACE &&
+            y <= f.y + boardVisualHeight() + band + EDGE_GRACE);
+    };
+    /** One extra row of grace below the frame (gridstack's extra drag row). */
+    const worldInsideBoardExtended = (x, y) => {
+        if (worldInsideBoard(x, y))
+            return true;
+        const f = frame();
+        const band = (0, grid_mapping_1.rowHeightFor)(geom(), rows()) + gap;
+        return x >= f.x && x <= f.x + f.width && y >= f.y && y <= f.y + boardVisualHeight() + band;
+    };
+    const insideMemberGroupFrame = (x, y) => {
+        var _a;
+        for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
+            const grp = diagram.getGroup(id);
+            if (!grp)
+                continue;
+            const p = grp.position;
+            const s = sizeOf(grp);
+            if (x >= p.x && x <= p.x + s.width && y >= p.y && y <= p.y + s.height)
+                return true;
+        }
+        return false;
+    };
+    const capturePointer = (pointerId) => {
+        var _a, _b;
+        if (pointerId === null)
+            return;
+        try {
+            (_b = (_a = api.container).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, pointerId);
+        }
+        catch (_c) {
+            /* capture is best-effort */
+        }
+    };
+    const releasePointer = (pointerId) => {
+        var _a, _b;
+        if (pointerId === null)
+            return;
+        try {
+            (_b = (_a = api.container).releasePointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, pointerId);
+        }
+        catch (_c) {
+            /* nothing to release */
+        }
+    };
+    // -- the gesture machine ----------------------------------------------------
+    const beginGestureVisuals = (g) => {
+        engine.beginGesture();
+        const snap = snapshotAll();
+        g.startCells = snap.cells;
+        g.startGeom = snap.geoms;
+        g.started = true;
+        armGlide();
+        if (g.kind !== 'palette') {
+            setGhost(g.id, true);
+            g.hostEl = hostOf(g.id);
+            capturePointer(g.pointerId);
+            api.container.style.cursor = g.kind === 'resize' ? 'nwse-resize' : 'grabbing';
+        }
+        syncPlaceholder();
+    };
+    /**
+     * SAME-EVENT ghost fast-path — the vanilla-parity fix. The prototype writes
+     * the tile's style inside the pointermove handler, so the ghost sits at 0px
+     * behind the cursor; writing only the MODEL leaves the host to the next
+     * render frame (~7.5px measured trailing at hand speed). Hosts live in the
+     * HTML layer whose transform carries the camera, so world px == style px;
+     * the renderer's next pass writes the identical values from the model — no
+     * fight, just no wait.
+     */
+    const ghostStyleFastPath = (g, rect) => {
+        const el = g.hostEl;
+        if (!el)
+            return;
+        if (rect.x !== undefined)
+            el.style.left = `${rect.x}px`;
+        if (rect.y !== undefined)
+            el.style.top = `${rect.y}px`;
+        if (rect.width !== undefined)
+            el.style.width = `${rect.width}px`;
+        if (rect.height !== undefined)
+            el.style.height = `${rect.height}px`;
+    };
+    const cleanupGestureVisuals = (g) => {
+        var _a;
+        if (g.kind !== 'palette')
+            setGhost(g.id, false);
+        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;
+    };
+    const commitGesture = (g) => {
+        var _a;
+        // SETTLE FIRST, then measure. Mid-drag the board can transiently hold more
+        // rows than the drop keeps (hover above a locked slab pushes everything
+        // down), and fit-mode row height shrinks with it — every displaced tile is
+        // re-projected at that TRANSIENT height. The old order computed the commit
+        // deltas from those pixels and, when the engine settled back with no cell
+        // changes, nothing ever wrote the pixels back: a refused drop left the
+        // whole board at the mid-drag height, KPI value lines clipped to nothing
+        // (live audit repro: drag the trend chart above the KPI row → every widget
+        // 122px→85px with identical cells). endGesture() keeps the settled cells;
+        // project() then derives every member's pixels — the ghost included — from
+        // that truth, so the deltas below record settled geometry and undo/redo
+        // both replay it faithfully.
+        engine.endGesture();
+        cleanupGestureVisuals(g);
+        gesture = null;
+        project();
+        const deltas = deltasSince(g.startCells, g.startGeom);
+        const commands = (0, grid_mapping_1.buildCommitCommands)(deltas);
+        if (g.esc && g.esc.rowsAdded !== 0) {
+            commands.push(new SetGroupCellCommand(group.id, g.esc.cellBefore, g.esc.cellAfter, g.esc.frameBefore, g.esc.frameAfter));
+        }
+        const changed = execute(g.kind === 'resize' ? 'Resize widget' : 'Move widget', commands);
+        api.renderNow();
+        (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed });
+    };
+    const cancelActiveGesture = (notify = true) => {
+        var _a, _b, _c;
+        const g = gesture;
+        if (!g)
+            return;
+        gesture = null;
+        if (g.kind !== 'palette' && g.leg) {
+            g.leg.adopted.abort(); // target board back to its pre-entry layout
+            g.leg = null;
+        }
+        if (g.kind !== 'palette' && g.esc && g.esc.rowsAdded !== 0) {
+            g.esc.peer.resizeMemberBy(group.id, -g.esc.rowsAdded); // slab back down
+            g.esc = null;
+        }
+        if (g.started) {
+            if (g.removedFromBoard || g.kind === 'palette') {
+                // The engine cannot resurrect a removed item — rebuild from the
+                // gesture-start snapshot (cells are pure data; the constructor
+                // honours legal layouts verbatim).
+                engine.endGesture();
+                const items = [];
+                for (const [id, c] of g.startCells) {
+                    const lockedNode = ((_b = (_a = diagram.getNode(id)) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.locked) === true;
+                    items.push(Object.assign(Object.assign({ id }, c), { locked: lockedNode || isGroupMember(id) }));
+                }
+                engine = new engine_1.GridPackEngine(items, { columns, float, maxRows });
+            }
+            else {
+                engine.cancelGesture();
+            }
+            // Restore every pixel to its gesture-start state.
+            writing = true;
+            try {
+                for (const [id, snap] of g.startGeom) {
+                    const e = memberEntity(id);
+                    if (!e)
+                        continue;
+                    const node = diagram.getNode(id);
+                    diagram.runSystemWrite(() => {
+                        var _a;
+                        if (node) {
+                            node.setPosition(snap.pos.x, snap.pos.y);
+                            node.setSize(snap.size.width, snap.size.height, (_a = snap.size.depth) !== null && _a !== void 0 ? _a : 0);
+                        }
+                        else {
+                            e.setFrame({
+                                x: snap.pos.x,
+                                y: snap.pos.y,
+                                width: snap.size.width,
+                                height: snap.size.height,
+                            });
+                        }
+                    });
+                }
+            }
+            finally {
+                writing = false;
+            }
+        }
+        else {
+            engine.endGesture();
+        }
+        cleanupGestureVisuals(g);
+        enforceBoardHeight();
+        api.renderNow();
+        if (notify) {
+            (_c = options.onGesture) === null || _c === void 0 ? void 0 : _c.call(options, { type: 'cancel', kind: g.kind, nodeId: g.id, changed: false });
+        }
+    };
+    /** Centre a w×h-span tile's top-left under the cursor, in world px. */
+    const centredTopLeft = (worldX, worldY, spans) => {
+        const f = frame();
+        const g = geom();
+        const cu = (0, grid_mapping_1.columnUnitFor)(g, f.width);
+        const rh = (0, grid_mapping_1.rowHeightFor)(g, rows());
+        return {
+            x: worldX - (spans.w * (cu + gap) - gap) / 2,
+            y: worldY - (spans.h * (rh + gap) - gap) / 2,
+        };
+    };
+    const onToolMove = (ev) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const g = gesture;
+        if (!g || g.kind === 'palette')
+            return;
+        if (!g.started) {
+            const dx = ev.screen.x - g.downClient.x;
+            const dy = ev.screen.y - g.downClient.y;
+            if (Math.abs(dx) + Math.abs(dy) < DRAG_THRESHOLD)
+                return;
+            beginGestureVisuals(g);
+        }
+        if (g.kind === 'move') {
+            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);
+            g.lastWorld = { x: ev.world.x, y: ev.world.y };
+            g.lastScreen = { x: ev.screen.x, y: ev.screen.y };
+            // Deepest board under the pointer wins: the nested KPI strip beats the
+            // tab that contains it; a foreign board beats "outside". Strict frames
+            // first; the one-row grace band below each board (gridstack's extra
+            // drag row) is consulted only when NO strict frame matched — so "under
+            // the last row" appends instead of reading as off-board.
+            const strictSelf = worldInsideBoard(ev.world.x, ev.world.y);
+            let peer = peerAt(ev.world.x, ev.world.y);
+            let inside = strictSelf;
+            if (!strictSelf && !peer) {
+                if (worldInsideBoardExtended(ev.world.x, ev.world.y))
+                    inside = true;
+                else
+                    peer = peerAt(ev.world.x, ev.world.y, true);
+                // Last resort: the grace band — a small slip past the edge stays ON
+                // this board (the engine clamps the cell; prototype parity).
+                if (!inside && !peer && worldInsideBoardGrace(ev.world.x, ev.world.y))
+                    inside = true;
+            }
+            const selfWins = inside && (!peer || boardArea() <= peer.frameArea());
+            if (peer && !selfWins) {
+                // -- HANDOFF: the pointer is over another board -------------------
+                if (g.leg && g.leg.peer === peer) {
+                    g.leg.adopted.move(ev.world);
+                }
+                else {
+                    if (g.leg) {
+                        g.leg.adopted.abort();
+                        g.leg = null;
+                    }
+                    if (!g.removedFromBoard) {
+                        g.removedFromBoard = true;
+                        engine.remove(g.id); // survivors settle home (gesture memory intact)
+                        project();
+                    }
+                    const adopted = peer.adopt(g.node, ev.world, {
+                        width: g.node.size.width,
+                        height: g.node.size.height,
+                    });
+                    if (adopted) {
+                        (_a = hostOf(g.id)) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-out');
+                        g.leg = { peer, adopted };
+                        g.leg.adopted.move(ev.world);
+                    }
+                    else {
+                        // Bounded/full board refused the adoption: dim = will snap home.
+                        (_b = hostOf(g.id)) === null || _b === void 0 ? void 0 : _b.classList.add('axdb-out');
+                    }
+                }
+            }
+            else if (inside) {
+                // -- back on (or still on) our own board --------------------------
+                if (g.leg) {
+                    g.leg.adopted.abort();
+                    g.leg = null;
+                }
+                if (g.removedFromBoard) {
+                    g.removedFromBoard = false;
+                    (_c = hostOf(g.id)) === null || _c === void 0 ? void 0 : _c.classList.remove('axdb-out');
+                    const cell = (0, grid_mapping_1.pointToCell)(desired.x, desired.y, frame(), geom(), rows(), g.spans.w);
+                    // Re-enter at the bottom edge (collision-free), then take the cursor
+                    // cell GATELESSLY — a first placement skips the anti-jitter gate.
+                    engine.add({ id: g.id, x: 0, y: engine.rows(), w: g.spans.w, h: g.spans.h });
+                    engine.moveCheck(g.id, cell.x, cell.y, { gate: false });
+                    project();
+                }
+                else {
+                    const spanW = (_e = (_d = engine.getItem(g.id)) === null || _d === void 0 ? void 0 : _d.w) !== null && _e !== void 0 ? _e : g.spans.w;
+                    const cell = (0, grid_mapping_1.pointToCell)(desired.x, desired.y, frame(), geom(), rows(), spanW);
+                    if (engine.moveCheck(g.id, cell.x, cell.y).changed)
+                        project();
+                }
+            }
+            else {
+                // -- outside every board ------------------------------------------
+                if (g.leg) {
+                    g.leg.adopted.abort();
+                    g.leg = null;
+                }
+                if (!g.removedFromBoard) {
+                    g.removedFromBoard = true;
+                    engine.remove(g.id); // survivors settle home; cells minted nowhere
+                    (_f = hostOf(g.id)) === null || _f === void 0 ? void 0 : _f.classList.add('axdb-out');
+                    project();
+                }
+            }
+            syncPlaceholder();
+            return;
+        }
+        // resize: fluid pixel preview on the ghost, cell-stepped live push.
+        //
+        // RTL: the corner handle is on the BOTTOM-LEFT and the tile grows
+        // leftwards, so the horizontal delta inverts and the tile's RIGHT edge is
+        // what stays pinned. Everything below this line — the span rounding, the
+        // engine's resizeCheck, the maxRows escalation — is in CELLS and needs no
+        // mirroring at all.
+        const dw = rtl ? g.downWorld.x - ev.world.x : ev.world.x - g.downWorld.x;
+        const dh = ev.world.y - g.downWorld.y;
+        const f = frame();
+        const gg = geom();
+        const minW = Math.max(8, (0, grid_mapping_1.columnUnitFor)(gg, f.width));
+        let w = Math.max(minW, g.startSize.width + dw);
+        // The height min-clamp is applied AFTER the escalation logic below: on a
+        // grown strip "one current row" IS the whole strip, and clamping the
+        // fluid pull to it made the de-escalation threshold unreachable — the
+        // ratchet's second disguise (grow committed; a fresh shrink gesture could
+        // never pull low enough to ask the parent for a row back).
+        let h = g.startSize.height + dh;
+        // NESTED HEIGHT ESCALATION (live report: "i cant increase height"). A
+        // bounded strip cannot grow a tile taller than itself — so pulling
+        // clearly past its bottom GROWS THE STRIP: the slab gains a row in the
+        // parent board (all tiles inside get taller together); pulling clearly
+        // back up REMOVES a row again. SYMMETRIC AND STATELESS ACROSS GESTURES:
+        // the first version only de-escalated inside the ledger of the gesture
+        // that grew ("rowsAdded > 0"), so grow → release → try to shrink was a
+        // RATCHET — the strip could only ever get taller (live report: "Total
+        // Revenue widget size can only increase"). Direction is now decided from
+        // the strip's CURRENT slab rows, whatever gesture created them; the
+        // ledger just accumulates this gesture's net change for the one-batch
+        // commit and for Escape.
+        if (maxRows !== undefined && g.kind === 'resize') {
+            const parent = parentPeer();
+            if (parent) {
+                const visual = boardVisualHeight();
+                const slabRows = (_h = (_g = parent.memberCell(group.id)) === null || _g === void 0 ? void 0 : _g.h) !== null && _h !== void 0 ? _h : 1;
+                const rowPx = visual / Math.max(1, slabRows);
+                const record = (res, d) => {
+                    if (!res.changed || !res.cellBefore || !res.cellAfter || !res.frameBefore || !res.frameAfter)
+                        return;
+                    if (!g.esc) {
+                        g.esc = {
+                            peer: parent,
+                            rowsAdded: 0,
+                            cellBefore: res.cellBefore,
+                            frameBefore: res.frameBefore,
+                            cellAfter: res.cellAfter,
+                            frameAfter: res.frameAfter,
+                        };
+                    }
+                    g.esc.rowsAdded += d;
+                    g.esc.cellAfter = res.cellAfter;
+                    g.esc.frameAfter = res.frameAfter;
+                    project();
+                };
+                if (h > visual + 24) {
+                    record(parent.resizeMemberBy(group.id, +1), +1);
+                }
+                else if (slabRows > 1 && h < visual - rowPx * 0.7) {
+                    record(parent.resizeMemberBy(group.id, -1), -1);
+                }
+            }
+        }
+        // The fluid preview must not outrun what the board can accept: on a
+        // bounded strip an unclamped ghost ballooned to 273px while the engine
+        // (rightly) refused every cell — visually indistinguishable from the
+        // squeeze bug it replaced. Clamp to the tile's maximum legal rect.
+        // (Escalation above may have just grown OR shrunk the board — re-read.)
+        const fNow = frame();
+        const ggNow = geom();
+        h = Math.max(Math.max(8, (0, grid_mapping_1.rowHeightFor)(ggNow, rows())), h);
+        const itemNow = engine.getItem(g.id);
+        if (itemNow) {
+            const cuNow = (0, grid_mapping_1.columnUnitFor)(ggNow, fNow.width);
+            const rhNow = (0, grid_mapping_1.rowHeightFor)(ggNow, rows());
+            w = Math.min(w, (columns - itemNow.x) * (cuNow + gap) - gap);
+            if (maxRows !== undefined) {
+                h = Math.min(h, Math.max(1, maxRows - itemNow.y) * (rhNow + gap) - gap);
+            }
+        }
+        g.node.setSize(w, h, (_j = g.node.size.depth) !== null && _j !== void 0 ? _j : 0);
+        if (rtl) {
+            // Keep the RIGHT edge pinned: mirrored, that is the tile's origin. The
+            // start position is recoverable from the grab offset, so this needs no
+            // extra gesture state.
+            const startLeft = g.downWorld.x - g.grab.dx;
+            const right = startLeft + g.startSize.width;
+            g.node.setPosition(right - w, g.node.position.y);
+            ghostStyleFastPath(g, { x: right - w, width: w, height: h });
+        }
+        else {
+            ghostStyleFastPath(g, { width: w, height: h });
+        }
+        const spanF = maxRows !== undefined ? frame() : f;
+        const spanG = maxRows !== undefined ? geom() : gg;
+        const span = (0, grid_mapping_1.sizeToSpan)(w, h, spanF, spanG, rows());
+        if (engine.resizeCheck(g.id, span.w, span.h).changed)
+            project();
+        syncPlaceholder();
+    };
+    const onToolUp = () => {
+        var _a, _b, _c, _d, _e, _f;
+        const g = gesture;
+        if (!g || g.kind === 'palette')
+            return;
+        if (!g.started) {
+            gesture = null; // a plain click — the page's own click-to-focus handles it
+            return;
+        }
+        if (g.leg) {
+            // -- CROSS-CONTAINER COMMIT: one batch across both boards -----------
+            const fin = g.leg.adopted.finalize();
+            if (!fin) {
+                cancelActiveGesture();
+                return;
+            }
+            const targetGroupId = g.leg.adopted.groupId;
+            // Land the ghost on its target rect before the geometry deltas read it.
+            writing = true;
+            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);
+                });
+            }
+            finally {
+                writing = false;
+            }
+            const sourceDisplaced = (0, grid_mapping_1.buildCommitCommands)(deltasSince(g.startCells, g.startGeom, g.id));
+            const before = g.startCells.get(g.id);
+            const geomBefore = g.startGeom.get(g.id);
+            const crossing = [
+                ...sourceDisplaced,
+                new engine_1.RemoveFromGroupCommand(group.id, g.id),
+                new engine_1.AddToGroupCommand(targetGroupId, g.id),
+                ...(0, grid_mapping_1.buildCommitCommands)([
+                    {
+                        id: g.id,
+                        locked: false,
+                        isGroup: false,
+                        cellBefore: before !== null && before !== void 0 ? before : fin.cell,
+                        cellAfter: fin.cell,
+                        posBefore: (_a = geomBefore === null || geomBefore === void 0 ? void 0 : geomBefore.pos) !== null && _a !== void 0 ? _a : { x: fin.rect.x, y: fin.rect.y },
+                        posAfter: { x: fin.rect.x, y: fin.rect.y },
+                        sizeBefore: (_b = geomBefore === null || geomBefore === void 0 ? void 0 : geomBefore.size) !== null && _b !== void 0 ? _b : { width: fin.rect.width, height: fin.rect.height },
+                        sizeAfter: { width: fin.rect.width, height: fin.rect.height },
+                    },
+                ]),
+            ];
+            execute('Move widget', crossing);
+            engine.endGesture();
+            cleanupGestureVisuals(g);
+            gesture = null;
+            enforceBoardHeight();
+            api.renderNow();
+            (_c = options.onGesture) === null || _c === void 0 ? void 0 : _c.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed: true });
+            return;
+        }
+        if (g.removedFromBoard && dragOut === 'cancel') {
+            // Released outside every board on a snap-home board: full restore,
+            // nothing committed (the parked-outside release).
+            cancelActiveGesture();
+            return;
+        }
+        // 'remove' fires ONLY for a release genuinely outside every board. A
+        // refused adoption (full strip) leaves removedFromBoard=true while the
+        // pointer is still over a board — releasing there must snap home, not
+        // delete the tile (the battery's S5 caught exactly that deletion).
+        const releasedOutsideAll = !g.lastWorld ||
+            (!worldInsideBoardGrace(g.lastWorld.x, g.lastWorld.y) &&
+                !peerAt(g.lastWorld.x, g.lastWorld.y, true));
+        const inRemoveZone = !options.removeZone ||
+            (g.lastScreen && g.lastWorld && options.removeZone(g.lastScreen, g.lastWorld));
+        if (g.removedFromBoard && dragOut === 'remove' && (!releasedOutsideAll || !inRemoveZone)) {
+            // Outside-but-not-over-the-trash (or a mere overshoot): snap home.
+            cancelActiveGesture();
+            return;
+        }
+        if (g.removedFromBoard && dragOut === 'remove') {
+            // Release OUTSIDE the board → remove via the page's atomic command path.
+            const displaced = (0, grid_mapping_1.buildCommitCommands)(deltasSince(g.startCells, g.startGeom, g.id));
+            const snap = g.startGeom.get(g.id);
+            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, (_d = snap.size.depth) !== null && _d !== void 0 ? _d : 0);
+            }
+            engine.endGesture();
+            cleanupGestureVisuals(g);
+            gesture = null;
+            enforceBoardHeight();
+            api.renderNow();
+            void ((_e = options.onRemoveRequest) === null || _e === void 0 ? void 0 : _e.call(options, g.id, displaced));
+            (_f = options.onGesture) === null || _f === void 0 ? void 0 : _f.call(options, { type: 'remove', kind: g.kind, nodeId: g.id, changed: true });
+            return;
+        }
+        commitGesture(g);
+    };
+    // -- cross-container peers -------------------------------------------------
+    const boardArea = () => {
+        const f = frame();
+        return f.width * boardVisualHeight();
+    };
+    const peersOnCanvas = () => {
+        let set = BOARD_REGISTRY.get(api.container);
+        if (!set) {
+            set = new Set();
+            BOARD_REGISTRY.set(api.container, set);
+        }
+        return set;
+    };
+    /** The board whose engine holds OUR group as an item (nesting parent). */
+    const parentPeer = () => {
+        for (const p of peersOnCanvas()) {
+            if (p !== selfPeer && p.hasItem(group.id))
+                return p;
+        }
+        return null;
+    };
+    /** Deepest OTHER registered board containing the world point. */
+    const peerAt = (x, y, extended = false) => {
+        let best = null;
+        for (const p of peersOnCanvas()) {
+            if (p === selfPeer)
+                continue;
+            if (!(extended ? p.containsWorldExtended(x, y) : p.containsWorld(x, y)))
+                continue;
+            if (!best || p.frameArea() < best.frameArea())
+                best = p;
+        }
+        return best;
+    };
+    /** This binder's side of an adoption: enter gateless, then live-push. */
+    const adopt = (node, world, pxSize) => {
+        if (disposed)
+            return null;
+        const f = frame();
+        const gg = geom();
+        const span = (0, grid_mapping_1.sizeToSpan)(pxSize.width, pxSize.height, f, gg, rows());
+        // Clamp to the TARGET board's shape: a tall tile entering a one-row strip
+        // arrives as a strip-height tile, not a refusal.
+        span.w = Math.max(1, Math.min(columns, span.w));
+        if (maxRows !== undefined)
+            span.h = Math.max(1, Math.min(maxRows, span.h));
+        engine.beginGesture(); // pre-entry snapshot — abort() restores it
+        const entered = engine.add({ id: node.id, x: 0, y: engine.rows(), w: span.w, h: span.h });
+        if (!entered) {
+            engine.endGesture();
+            return null; // a bounded, full board refuses the adoption
+        }
+        // Pre-entry baselines for THIS board's displaced-tile commit.
+        const startCells = new Map();
+        const startGeom = new Map();
+        for (const item of engine.getItems()) {
+            if (item.id === node.id)
+                continue;
+            startCells.set(item.id, { x: item.x, y: item.y, w: item.w, h: item.h });
+            const e = memberEntity(item.id);
+            if (e) {
+                const sz = sizeOf(e);
+                startGeom.set(item.id, {
+                    pos: { x: e.position.x, y: e.position.y },
+                    size: { width: sz.width, height: sz.height, depth: sz.depth },
+                });
+            }
+        }
+        adoptedGhostId = node.id;
+        const tl = centredTopLeft(world.x, world.y, span);
+        const cell0 = (0, grid_mapping_1.pointToCell)(tl.x, tl.y, f, gg, rows(), span.w);
+        engine.moveCheck(node.id, cell0.x, cell0.y, { gate: false });
+        armGlide();
+        project();
+        syncPlaceholder();
+        return {
+            groupId: group.id,
+            move: (w) => {
+                const item = engine.getItem(node.id);
+                if (!item)
+                    return;
+                const tlm = centredTopLeft(w.x, w.y, { w: item.w, h: item.h });
+                const cell = (0, grid_mapping_1.pointToCell)(tlm.x, tlm.y, frame(), geom(), rows(), item.w);
+                if (engine.moveCheck(node.id, cell.x, cell.y).changed)
+                    project();
+                syncPlaceholder();
+            },
+            abort: () => {
+                engine.remove(node.id);
+                engine.cancelGesture(); // pre-entry layout, memory cleared
+                adoptedGhostId = null;
+                disarmGlideSoon();
+                project();
+                syncPlaceholder();
+            },
+            finalize: () => {
+                const item = engine.getItem(node.id);
+                if (!item) {
+                    engine.endGesture();
+                    adoptedGhostId = null;
+                    syncPlaceholder();
+                    return null;
+                }
+                const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
+                const rect = (0, grid_mapping_1.cellToRect)(item, frame(), geom(), rows());
+                const commands = (0, grid_mapping_1.buildCommitCommands)(deltasSince(startCells, startGeom, node.id));
+                engine.endGesture();
+                adoptedGhostId = null;
+                disarmGlideSoon();
+                syncPlaceholder();
+                return { commands, cell, rect };
+            },
+        };
+    };
+    const selfPeer = {
+        group,
+        hasItem: (id) => !!engine.getItem(id),
+        memberCell: (id) => {
+            const it = engine.getItem(id);
+            return it ? { x: it.x, y: it.y, w: it.w, h: it.h } : undefined;
+        },
+        resizeMemberBy: (id, dRows) => {
+            const item = engine.getItem(id);
+            if (!item || disposed)
+                return { changed: false };
+            const grp = diagram.getGroup(id);
+            const cellBefore = { x: item.x, y: item.y, w: item.w, h: item.h };
+            const fb = grp
+                ? { x: grp.position.x, y: grp.position.y, width: sizeOf(grp).width, height: sizeOf(grp).height }
+                : undefined;
+            const r = engine.resizeCheck(id, item.w, item.h + dRows);
+            if (!r.changed)
+                return { changed: false };
+            project();
+            const after = engine.getItem(id);
+            const fa = grp
+                ? { x: grp.position.x, y: grp.position.y, width: sizeOf(grp).width, height: sizeOf(grp).height }
+                : undefined;
+            return {
+                changed: true,
+                cellBefore,
+                cellAfter: { x: after.x, y: after.y, w: after.w, h: after.h },
+                frameBefore: fb,
+                frameAfter: fa,
+            };
+        },
+        containsWorld: worldInsideBoard,
+        containsWorldExtended: worldInsideBoardExtended,
+        frameArea: boardArea,
+        adopt,
+    };
+    peersOnCanvas().add(selfPeer);
+    const tool = {
+        id: `dashboard-grid:${group.id}:${++binderSeq}`,
+        priority: 2, // point-specific claim — outranks mode-style tools (see ext/tools.ts)
+        hitTest(ev, hit) {
+            var _a;
+            if (disposed)
+                return false;
+            if (gesture)
+                return true; // own the rest of an in-flight gesture
+            if (hit.node)
+                return ((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(hit.node.id);
+            // Claim (and deaden) empty presses inside a member group's frame so the
+            // built-in group-drag cannot fight the pack layout for the KPI slab.
+            return insideMemberGroupFrame(ev.world.x, ev.world.y);
+        },
+        onPointerDown(ev, hit) {
+            var _a, _b, _c, _d, _e, _f;
+            if (gesture || !hit.node)
+                return; // dead zone (slab area), or mid-palette
+            const node = diagram.getNode(hit.node.id);
+            if (!node || ((_a = node.state) === null || _a === void 0 ? void 0 : _a.locked) === true)
+                return; // pinned: refuse; click still focuses
+            // Arm the glide class NOW, a full task before any displacement can
+            // happen: a transition defined in the same style recalc as the first
+            // left/top write does not run (CSS transitions fire only when the
+            // property changes while the transition exists in the BEFORE-change
+            // style) — the first pushed neighbour of every gesture TELEPORTED
+            // (measured 109px in one frame) while later ones glided.
+            armGlide();
+            const target = ((_c = (_b = ev.source) === null || _b === void 0 ? void 0 : _b.target) !== null && _c !== void 0 ? _c : null);
+            const isResize = !!((_d = target === null || target === void 0 ? void 0 : target.closest) === null || _d === void 0 ? void 0 : _d.call(target, '.axdb-rs'));
+            const it = engine.getItem(node.id);
+            gesture = {
+                kind: isResize ? 'resize' : 'move',
+                id: node.id,
+                node,
+                pointerId: typeof PointerEvent !== 'undefined' && ev.source instanceof PointerEvent
+                    ? ev.source.pointerId
+                    : null,
+                started: false,
+                downClient: { x: ev.screen.x, y: ev.screen.y },
+                downWorld: { x: ev.world.x, y: ev.world.y },
+                grab: { dx: ev.world.x - node.position.x, dy: ev.world.y - node.position.y },
+                startCells: new Map(),
+                startGeom: new Map(),
+                startSize: { width: node.size.width, height: node.size.height },
+                spans: { w: (_e = it === null || it === void 0 ? void 0 : it.w) !== null && _e !== void 0 ? _e : 1, h: (_f = it === null || it === void 0 ? void 0 : it.h) !== null && _f !== void 0 ? _f : 1 },
+                removedFromBoard: false,
+                leg: null,
+                lastWorld: null,
+                lastScreen: null,
+                hostEl: null,
+                esc: null,
+                chip: null,
+            };
+        },
+        onPointerMove(ev) {
+            onToolMove(ev);
+        },
+        onPointerUp() {
+            onToolUp();
+        },
+        onCancel() {
+            cancelActiveGesture();
+        },
+    };
+    const unregisterTool = (0, renderer_1.registerTool)(tool);
+    // -- palette drag-in --------------------------------------------------------
+    const beginPaletteDrag = (node, spec, event) => {
+        var _a, _b;
+        if (disposed || gesture)
+            return;
+        const chip = (_a = spec.chip) !== null && _a !== void 0 ? _a : null;
+        if (chip) {
+            chip.classList.add('axdb-drag-chip');
+            document.body.appendChild(chip);
+            chip.style.left = `${event.clientX + 6}px`;
+            chip.style.top = `${event.clientY + 6}px`;
+        }
+        const g = {
+            kind: 'palette',
+            id: node.id,
+            node,
+            pointerId: (_b = event.pointerId) !== null && _b !== void 0 ? _b : null,
+            started: false,
+            downClient: { x: event.clientX, y: event.clientY },
+            downWorld: { x: 0, y: 0 },
+            grab: { dx: 0, dy: 0 },
+            startCells: new Map(),
+            startGeom: new Map(),
+            startSize: { width: 0, height: 0 },
+            spans: { w: Math.max(1, spec.w), h: Math.max(1, spec.h) },
+            removedFromBoard: true,
+            leg: null,
+            lastWorld: null,
+            lastScreen: null,
+            hostEl: null,
+            esc: null,
+            chip,
+        };
+        gesture = g;
+        const toWorld = (cx, cy) => {
+            var _a;
+            const rect = api.container.getBoundingClientRect();
+            return ((_a = api.viewport) === null || _a === void 0 ? void 0 : _a.clientToWorld)
+                ? api.viewport.clientToWorld(cx, cy, rect)
+                : { x: cx - rect.left, y: cy - rect.top };
+        };
+        const detach = () => {
+            window.removeEventListener('pointermove', onMove, true);
+            window.removeEventListener('pointerup', onUp, true);
+            window.removeEventListener('keydown', onKey, true);
+        };
+        const onMove = (e) => {
+            if (gesture !== g)
+                return detach();
+            if (!g.started) {
+                if (Math.abs(e.clientX - g.downClient.x) + Math.abs(e.clientY - g.downClient.y) <
+                    DRAG_THRESHOLD) {
+                    return;
+                }
+                beginGestureVisuals(g);
+            }
+            if (chip) {
+                chip.style.left = `${e.clientX + 6}px`;
+                chip.style.top = `${e.clientY + 6}px`;
+            }
+            const world = toWorld(e.clientX, e.clientY);
+            const inside = worldInsideBoard(world.x, world.y);
+            if (inside) {
+                const tl = centredTopLeft(world.x, world.y, g.spans);
+                const cell = (0, grid_mapping_1.pointToCell)(tl.x, tl.y, frame(), geom(), rows(), g.spans.w);
+                if (g.removedFromBoard) {
+                    g.removedFromBoard = false;
+                    // Enter at the bottom edge (collision-free), then take the cursor
+                    // cell GATELESSLY — gridstack's drag-in skips the gate on entry.
+                    engine.add({ id: g.id, x: 0, y: engine.rows(), w: g.spans.w, h: g.spans.h });
+                    engine.moveCheck(g.id, cell.x, cell.y, { gate: false });
+                    project();
+                }
+                else if (engine.moveCheck(g.id, cell.x, cell.y).changed) {
+                    project();
+                }
+            }
+            else if (!g.removedFromBoard) {
+                g.removedFromBoard = true;
+                engine.remove(g.id); // displaced tiles come home (gesture memory)
+                project();
+            }
+            syncPlaceholder();
+            api.render();
+        };
+        const finish = (commit) => {
+            var _a, _b;
+            detach();
+            if (gesture !== g)
+                return;
+            if (!g.started) {
+                // Never crossed the threshold: a plain palette CLICK — the page's
+                // click-to-add handler owns it.
+                gesture = null;
+                chip === null || chip === void 0 ? void 0 : chip.remove();
+                return;
+            }
+            if (commit && !g.removedFromBoard && engine.getItem(g.id)) {
+                const item = engine.getItem(g.id);
+                const cell = { x: item.x, y: item.y, w: item.w, h: item.h };
+                node.setGridItem((0, grid_mapping_1.gridItemFromCell)(cell));
+                const displaced = (0, grid_mapping_1.buildCommitCommands)(deltasSince(g.startCells, g.startGeom, g.id));
+                engine.endGesture();
+                cleanupGestureVisuals(g);
+                gesture = null;
+                void ((_a = options.onDropIn) === null || _a === void 0 ? void 0 : _a.call(options, node, cell, displaced));
+                (_b = options.onGesture) === null || _b === void 0 ? void 0 : _b.call(options, { type: 'drop-in', kind: 'palette', nodeId: g.id, changed: true });
+                api.renderNow();
+                return;
+            }
+            // Abort (released outside, or Escape): restore the board.
+            cancelActiveGesture();
+        };
+        const onUp = () => finish(true);
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                finish(false);
+        };
+        window.addEventListener('pointermove', onMove, true);
+        window.addEventListener('pointerup', onUp, true);
+        window.addEventListener('keydown', onKey, true);
+    };
+    // -- handle -----------------------------------------------------------------
+    const subs = [
+        group.on('member:added', ((id) => onMemberAdded(id))),
+        group.on('member:removed', ((id) => onMemberRemoved(id))),
+        group.on('bounds:changed', (() => onBoundsChanged())),
+    ];
+    /** Run one programmatic gesture through the same snapshot→op→commit pipeline. */
+    const programmatic = (name, id, op) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        if (disposed || gesture || !engine.getItem(id))
+            return false;
+        engine.beginGesture();
+        const snap = snapshotAll();
+        if (!op()) {
+            engine.endGesture();
+            return false;
+        }
+        armGlide();
+        project();
+        writing = true;
+        try {
+            const it = engine.getItem(id);
+            if (it)
+                writeRect(id, (0, grid_mapping_1.cellToRect)(it, frame(), geom(), rows()));
+        }
+        finally {
+            writing = false;
+        }
+        const commands = (0, grid_mapping_1.buildCommitCommands)(deltasSince(snap.cells, snap.geoms));
+        engine.endGesture();
+        disarmGlideSoon();
+        enforceBoardHeight();
+        if (commands.length > 0) {
+            yield api.getEngine().commandManager.execute(new engine_1.BatchCommand(name, commands));
+        }
+        api.renderNow();
+        return true;
+    });
+    const handle = {
+        sync() {
+            var _a;
+            if (disposed)
+                return;
+            if (gesture)
+                cancelActiveGesture(false);
+            const items = [];
+            for (const id of (_a = group.members) !== null && _a !== void 0 ? _a : []) {
+                if (!memberEntity(id))
+                    continue;
+                items.push(itemFor(id));
+            }
+            // CARRY THE PER-COLUMN CACHE ACROSS THE REBUILD. sync() runs on every
+            // undo, member add and refresh; without this handoff a responsive board
+            // would silently lose its wide layouts the first time anything else
+            // happened, and growing back would re-derive instead of restoring.
+            const carried = engine.getLayouts();
+            engine = new engine_1.GridPackEngine(items, { columns, float, maxRows });
+            engine.setLayouts(carried);
+            for (const item of engine.getItems())
+                persistAdoptedCell(item.id, item);
+            project();
+            syncHandles();
+            api.renderNow();
+            evaluateResponsive();
+        },
+        setColumns(n, layout, opts) {
+            var _a;
+            if (disposed)
+                return false;
+            if (!(opts === null || opts === void 0 ? void 0 : opts.responsive))
+                responsivePinned = true;
+            return applyColumns(n, (_a = layout !== null && layout !== void 0 ? layout : responsive === null || responsive === void 0 ? void 0 : responsive.layout) !== null && _a !== void 0 ? _a : 'moveScale');
+        },
+        getColumns: () => columns,
+        setRtl(on) {
+            if (on === rtl)
+                return;
+            rtl = on;
+            // Pixels only — the cells are already correct in both directions.
+            project();
+            syncHandles();
+            api.renderNow();
+        },
+        getRtl: () => rtl,
+        saveLayout() {
+            const saved = engine.saveLayout();
+            return {
+                columns: saved.columns,
+                cells: new Map(saved.items.map((i) => [i.id, { x: i.x, y: i.y, w: i.w, h: i.h }])),
+            };
+        },
+        setSizing(mode) {
+            if (mode === sizing)
+                return;
+            sizing = mode;
+            project();
+            api.renderNow();
+        },
+        getSizing: () => sizing,
+        setFloat(on) {
+            if (on === float)
+                return;
+            float = on;
+            // Rebuild from persisted cells under the new mode: sync() constructs a
+            // fresh engine with the captured `float`, and gravity (when turning
+            // OFF) packs immediately through its settle.
+            this.sync();
+            api.renderNow();
+        },
+        getFloat: () => float,
+        metrics() {
+            const f = frame();
+            const g = geom();
+            const r = rows();
+            return {
+                columns,
+                maxColumns,
+                rtl,
+                responsive: !!responsive && !responsivePinned,
+                gap,
+                padding,
+                sizing,
+                rows: r,
+                rowHeight: (0, grid_mapping_1.rowHeightFor)(g, r),
+                columnUnit: (0, grid_mapping_1.columnUnitFor)(g, f.width),
+                boardHeight: f.height,
+                frame: f,
+            };
+        },
+        cellOf(id) {
+            const it = engine.getItem(id);
+            return it ? { x: it.x, y: it.y, w: it.w, h: it.h } : undefined;
+        },
+        cellRectOf(id) {
+            const it = engine.getItem(id);
+            return it ? (0, grid_mapping_1.cellToRect)(it, frame(), geom(), rows()) : undefined;
+        },
+        planRemoval(id) {
+            const it = engine.getItem(id);
+            if (!it)
+                return [];
+            const clone = new engine_1.GridPackEngine(engine.getItems().map((i) => (Object.assign({}, i))), { columns, float });
+            clone.remove(id);
+            const f = frame();
+            const g = geom();
+            const rAfter = Math.max(1, clone.rows());
+            const deltas = [];
+            for (const item of clone.getItems()) {
+                const before = engine.getItem(item.id);
+                const e = memberEntity(item.id);
+                if (!before || !e)
+                    continue;
+                const target = (0, grid_mapping_1.cellToRect)(item, f, g, rAfter);
+                deltas.push({
+                    id: item.id,
+                    locked: !!item.locked,
+                    isGroup: isGroupMember(item.id),
+                    cellBefore: { x: before.x, y: before.y, w: before.w, h: before.h },
+                    cellAfter: { x: item.x, y: item.y, w: item.w, h: item.h },
+                    posBefore: { x: e.position.x, y: e.position.y },
+                    posAfter: { x: target.x, y: target.y },
+                    sizeBefore: (({ width, height, depth }) => ({ width, height, depth }))(sizeOf(e)),
+                    sizeAfter: { width: target.width, height: target.height },
+                });
+            }
+            return (0, grid_mapping_1.buildCommitCommands)(deltas);
+        },
+        moveTo(id, x, y) {
+            return programmatic('Move widget', id, () => engine.moveCheck(id, x, y).changed);
+        },
+        resizeTo(id, w, h) {
+            return programmatic('Resize widget', id, () => engine.resizeCheck(id, w, h).changed);
+        },
+        beginPaletteDrag,
+        dispose() {
+            var _a;
+            if (disposed)
+                return;
+            cancelActiveGesture(false);
+            disposed = true;
+            peersOnCanvas().delete(selfPeer);
+            unregisterTool();
+            hostObserver.disconnect();
+            containerObserver === null || containerObserver === void 0 ? void 0 : containerObserver.disconnect();
+            for (const off of subs)
+                off();
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
+            placeholder = null;
+            if (glideTimer)
+                clearTimeout(glideTimer);
+            if (ghostTimer)
+                clearTimeout(ghostTimer);
+            (_a = htmlLayer()) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-glide');
+            api.container.style.cursor = '';
+        },
+    };
+    // Boot: adopt the current members, observe host churn for handle re-injection,
+    // and let a responsive board settle on the count its width asks for before the
+    // first frame (a 400px board declared at 12 columns must not flash at 12).
+    handle.sync();
+    const layer = htmlLayer();
+    if (layer)
+        hostObserver.observe(layer, { childList: true, subtree: true });
+    containerObserver === null || containerObserver === void 0 ? void 0 : containerObserver.observe(api.container);
+    return handle;
+}
+//# sourceMappingURL=grid-binder.js.map