@grafloria/element 0.4.2 → 0.4.4

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

@@ -51,10 +51,38 @@
  */
 import { __awaiter } from "tslib";
 import { AddToGroupCommand, BatchCommand, Command, GridPackEngine, RemoveFromGroupCommand, } from '@grafloria/engine';
-import { registerTool } from '@grafloria/renderer';
+import { LiveRegionController, registerTool } from '@grafloria/renderer';
 import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridItemFromCell, pointToCell, rowHeightFor, sizeToSpan, } from './grid-mapping.js';
 import { ensureDashboardKitStyles } from './styles.js';
-const BOARD_REGISTRY = new Map();
+/**
+ * Binders on the same canvas find each other here. A WeakMap: a canvas that
+ * is gone takes its (empty) peer set with it — the strong Map it replaced kept
+ * every container element a dashboard had ever mounted for the life of the
+ * page (review D12).
+ */
+const BOARD_REGISTRY = new WeakMap();
+/**
+ * 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}`;
+}
 /**
  * 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
@@ -101,9 +129,37 @@ class SetGroupCellCommand extends Command {
 }
 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. */
+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,
+    };
+}
+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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     ensureDashboardKitStyles();
     const diagram = api.getModel();
     /** The DECLARED count — the board's authored width, and the responsive cap. */
@@ -119,12 +175,118 @@ export function bindDashboardGrid(api, group, options = {}) {
     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;
+    /** The AUTHORED bound — a nested strip's design (row-first push, escalation). */
     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 GridPackEngine([], { columns, float, maxRows });
+    const fluid = options.fluid === true;
+    const overflow = (_h = options.overflow) !== null && _h !== void 0 ? _h : 'bounded';
+    let isStatic = options.static === true;
+    /** The member the ROVING TABINDEX rests on (one tab stop per board). */
+    let focusedId;
+    const live = liveRegionFor(api.container);
+    /** The design height. Fluid boards re-read it from the container. */
+    let designH = (_l = (_j = options.designHeight) !== null && _j !== void 0 ? _j : (_k = group.size) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : 0;
+    /** Fit-mode CAPACITY in rows (see `overflow`). Undefined = unbounded. */
+    let capacity;
+    let sizing = (_m = options.sizing) !== null && _m !== void 0 ? _m : 'fit';
+    /**
+     * A fresh engine holding `items` VERBATIM. The constructor add()s each item
+     * and settles after every one, so in gravity mode a legal layout with a gap
+     * — a tile dropped below free space, exactly what the placeholder promised —
+     * was re-packed on every rebuild: refresh(), undo, and (since the kit follows
+     * the history) every commit moved a tile the user had just placed. The
+     * persisted cells are the truth; a rebuild must not edit them. Float while
+     * constructing, then restore the real mode for everything that follows.
+     *
+     * `pack` is for the two moments gravity IS wanted: the first adoption of the
+     * authored spec (a declared cell hovering over an empty row settles — the
+     * kit's documented boot contract) and turning float off.
+     */
+    const engineFrom = (items, pack = false, at = columns) => {
+        const e = new GridPackEngine(items, { columns: at, float: pack ? float : true, maxRows, capacity });
+        e.float = float;
+        return e;
+    };
+    /** The effective row bound a gesture must respect: the strip's, else the fit capacity. */
+    const bound = () => maxRows !== null && maxRows !== void 0 ? maxRows : capacity;
+    /**
+     * The rows the design height can hold at the row floor — what 'bounded' fit
+     * enforces. A board is never bounded BELOW what it already holds: a document
+     * loaded with more rows than fit keeps every tile (the frame extends, see
+     * enforceBoardHeight) and only further growth is refused.
+     */
+    const fitCapacity = () => {
+        if (maxRows !== undefined || sizing !== 'fit' || overflow === 'scroll' || designH <= 0)
+            return undefined;
+        const rowsThatFit = Math.floor((designH - 2 * padding + gap) / (minRowHeight + gap));
+        return Math.max(1, rowsThatFit, engine.rows());
+    };
+    /** Re-derive the capacity; true when the engine must be rebuilt to carry it. */
+    const refreshCapacity = () => {
+        const next = fitCapacity();
+        if (next === capacity)
+            return false;
+        capacity = next;
+        return true;
+    };
+    /** The canvas container's CSS-pixel box (0 when unmeasurable, e.g. jsdom). */
+    const containerBox = () => ({
+        w: api.container.clientWidth || 0,
+        h: api.container.clientHeight || 0,
+    });
+    /**
+     * FLUID: make the group's frame the container's box. Width always; the
+     * design height follows too, so fit capacity follows the viewport (a shorter
+     * window holds fewer rows) and grow never shrinks below the visible area.
+     * Returns true when the frame changed. A container that cannot be measured
+     * (width 0) leaves the authored frame alone.
+     */
+    const applyFluidFrame = () => {
+        if (!fluid || disposed)
+            return false;
+        const box = containerBox();
+        if (box.w <= 0)
+            return false;
+        if (box.h > 0)
+            designH = box.h;
+        const f = frame();
+        const height = sizing === 'fit' && box.h > 0 ? box.h : f.height;
+        if (Math.abs(f.width - box.w) < 0.5 && Math.abs(f.height - height) < 0.5)
+            return false;
+        writing = true;
+        try {
+            diagram.runSystemWrite(() => group.setFrame({ x: f.x, y: f.y, width: box.w, height }));
+        }
+        finally {
+            writing = false;
+        }
+        return true;
+    };
+    /**
+     * THE PERSISTED COLUMN CACHE (D4). `toJSON()` always saved the wide layout —
+     * it reads the engine's widest cached count. The DOCUMENT path read the
+     * node's GridItemConfig, and a responsive column change writes the live,
+     * NARROW cells into exactly that field: a board saved on a phone reloaded as
+     * 1-wide tiles crammed into the left of a 12-column board, because the cache
+     * that knew better lived only in this closure. It now rides on the group as
+     * `dashboardLayouts` — the cache as plain data plus the live count the
+     * GridItemConfigs belong to — and `rebuild()` reads it back on a fresh bind.
+     * Written only when there is a cache, so a board that never changed column
+     * count serialises exactly as before.
+     */
+    const persistLayouts = () => {
+        if (disposed || engine.cachedColumns().length === 0)
+            return;
+        writing = true;
+        try {
+            diagram.runSystemWrite(() => group.setMetadata('dashboardLayouts', { columns: engine.columns, layouts: engine.getLayouts() }));
+        }
+        finally {
+            writing = false;
+        }
+    };
+    let engine = engineFrom([]);
     let gesture = null;
     let disposed = false;
     /** Reentrancy guard: our own derived frame writes must not re-project. */
@@ -154,7 +316,10 @@ export function bindDashboardGrid(api, group, options = {}) {
         padding,
         sizing,
         baseRowHeight,
-        minRowHeight,
+        // BOUNDED FIT NEVER SCROLLS: the floor is a capacity for growth, not a
+        // reason to paint past the frame. A board already holding more rows than
+        // fit (a Grow→Fit switch, a loaded document) squeezes below it instead.
+        minRowHeight: sizing === 'fit' && overflow !== 'scroll' ? 1 : minRowHeight,
         designHeight: sizing === 'fit' ? frame().height : designH,
         rtl,
     });
@@ -171,18 +336,22 @@ export function bindDashboardGrid(api, group, options = {}) {
      *  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;
+        var _a, _b, _c, _d, _e, _f, _g;
         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 = cellFromGridItem((_d = node.getGridItem) === null || _d === void 0 ? void 0 : _d.call(node), {
+            // Per-widget size limits ride on the node as `widgetLimits` and reach the
+            // engine as gridstack's minW/maxW/minH/maxH.
+            const lim = ((_e = (_d = node.getMetadata) === null || _d === void 0 ? void 0 : _d.call(node, 'widgetLimits')) !== null && _e !== void 0 ? _e : {});
+            const limits = Object.assign(Object.assign(Object.assign(Object.assign({}, (lim.minSpan !== undefined ? { minW: lim.minSpan } : {})), (lim.maxSpan !== undefined ? { maxW: lim.maxSpan } : {})), (lim.minRows !== undefined ? { minH: lim.minRows } : {})), (lim.maxRows !== undefined ? { maxH: lim.maxRows } : {}));
+            const cell = cellFromGridItem((_f = node.getGridItem) === null || _f === void 0 ? void 0 : _f.call(node), {
                 w: spanMeta || 1,
                 h: rowsMeta || 1,
             });
             if (cell)
-                return Object.assign(Object.assign({ id }, cell), { locked });
+                return Object.assign(Object.assign(Object.assign({ id }, cell), { locked }), limits);
             const f = frame();
             const g = geom();
             if (node.position && (node.position.x !== 0 || node.position.y !== 0)) {
@@ -191,20 +360,13 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // left edge into a cell.
                 const s = sizeToSpan(node.size.width, node.size.height, f, g, rows());
                 const p = 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 Object.assign({ id, x: Math.max(0, p.x), y: Math.max(0, p.y), w: spanMeta || s.w, h: rowsMeta || s.h, locked }, limits);
             }
-            return { id, x: 0, y: 0, w: spanMeta || 1, h: rowsMeta || 1, locked, autoPosition: true };
+            return Object.assign({ id, x: 0, y: 0, w: spanMeta || 1, h: rowsMeta || 1, locked, autoPosition: true }, limits);
         }
         const grp = diagram.getGroup(id);
         const cell = grp
-            ? cellFromGridItem((_e = grp.getMetadata) === null || _e === void 0 ? void 0 : _e.call(grp, 'gridItem'))
+            ? cellFromGridItem((_g = grp.getMetadata) === null || _g === void 0 ? void 0 : _g.call(grp, 'gridItem'))
             : null;
         // Member groups are LOCKED slabs (see the module doc).
         if (cell)
@@ -260,8 +422,14 @@ export function bindDashboardGrid(api, group, options = {}) {
         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'
-            ? designH
+            ? 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) {
@@ -355,11 +523,61 @@ export function bindDashboardGrid(api, group, options = {}) {
         }
     };
     // -- resize handles ---------------------------------------------------------
-    const syncHandles = () => {
+    /** The accessible name of a widget: its title, else its kind, else its id. */
+    const nameOf = (node) => {
+        var _a, _b, _c, _d;
+        const title = (_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'widgetTitle');
+        if (typeof title === 'string' && title)
+            return title;
+        // The visible header falls back to a data label (a KPI's `label`) before
+        // the kind — the spoken name must agree with what is painted.
+        const label = (_c = (_b = node.getMetadata) === null || _b === void 0 ? void 0 : _b.call(node, 'widgetSpec')) === null || _c === void 0 ? void 0 : _c.label;
+        if (typeof label === 'string' && label)
+            return label;
+        const kind = (_d = node.getMetadata) === null || _d === void 0 ? void 0 : _d.call(node, 'widgetKind');
+        return typeof kind === 'string' && kind && kind !== 'widget' ? `${kind} widget` : node.id;
+    };
+    /**
+     * ACCESSIBLE CHROME on every member host (WCAG 4.1.2 name/role/value): a
+     * group role, a widget role description, a label that carries the cell,
+     * and the ROVING TABINDEX — exactly one member per board is a tab stop.
+     * Runs with the handles, so a repainted host gets it back too.
+     */
+    const syncA11y = (only) => {
         var _a, _b;
+        if (disposed)
+            return;
+        const members = [...((_a = group.members) !== null && _a !== void 0 ? _a : [])].filter((id) => !!diagram.getNode(id));
+        if (focusedId && !members.includes(focusedId))
+            focusedId = undefined;
+        const stop = focusedId !== null && focusedId !== void 0 ? focusedId : members[0];
+        for (const id of members) {
+            if (only && !only.has(id))
+                continue;
+            const node = diagram.getNode(id);
+            const host = hostOf(id);
+            if (!node || !host)
+                continue;
+            const cell = engine.getItem(id);
+            const bits = [nameOf(node)];
+            if (cell)
+                bits.push(describeCell(cell));
+            if (((_b = node.state) === null || _b === void 0 ? void 0 : _b.locked) === true)
+                bits.push('pinned');
+            host.setAttribute('role', 'group');
+            host.setAttribute('aria-roledescription', 'dashboard widget');
+            host.setAttribute('aria-label', bits.join(', '));
+            host.setAttribute('tabindex', id === stop ? '0' : '-1');
+        }
+    };
+    const syncHandles = (only) => {
+        var _a, _b, _c;
+        syncA11y(only);
         if (!wantHandles || disposed)
             return;
         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;
@@ -367,7 +585,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (!host)
                 continue;
             const existing = host.querySelector(':scope > .axdb-rs');
-            if (((_b = node.state) === null || _b === void 0 ? void 0 : _b.locked) === true) {
+            if (((_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, 'widgetResizable')) === false) {
                 existing === null || existing === void 0 ? void 0 : existing.remove();
                 continue;
             }
@@ -382,7 +600,40 @@ export function bindDashboardGrid(api, group, options = {}) {
             rs.classList.toggle('axdb-rs--rtl', rtl);
         }
     };
-    const hostObserver = new MutationObserver(() => syncHandles());
+    /**
+     * 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();
@@ -432,11 +683,21 @@ export function bindDashboardGrid(api, group, options = {}) {
     };
     // -- membership + bounds sync ----------------------------------------------
     const onMemberAdded = (id) => {
+        var _a;
         if (disposed)
             return;
         if (!engine.getItem(id)) {
             const item = itemFor(id);
-            const placed = engine.add(item);
+            let placed = engine.add(item);
+            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 = (_a = engine.getItem(id)) !== null && _a !== void 0 ? _a : null;
+                refreshCapacity();
+            }
             if (placed)
                 persistAdoptedCell(id, placed);
         }
@@ -534,6 +795,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             return false;
         columns = engine.columns;
         persistLiveCells();
+        persistLayouts();
         armGlide();
         project();
         syncPlaceholder();
@@ -548,10 +810,17 @@ export function bindDashboardGrid(api, group, options = {}) {
      * 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'
+    const containerObserver = (responsive || fluid) && typeof ResizeObserver !== 'undefined'
         ? new ResizeObserver(() => {
             if (disposed)
                 return;
+            if (applyFluidFrame()) {
+                if (refreshCapacity())
+                    rebuild(false);
+                else
+                    project();
+                api.renderNow();
+            }
             evaluateResponsive();
         })
         : null;
@@ -695,6 +964,13 @@ export function bindDashboardGrid(api, group, options = {}) {
             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);
+        persistLayouts(); // an edit at a narrow count propagated into the wide cache
+        if (changed) {
+            const it = engine.getItem(g.id);
+            if (it)
+                live.announce(`${nameOf(g.node)} ${g.kind === 'resize' ? 'resized' : 'moved'} to ${describeCell(it)}`);
+        }
+        syncA11y();
         api.renderNow();
         (_a = options.onGesture) === null || _a === void 0 ? void 0 : _a.call(options, { type: 'commit', kind: g.kind, nodeId: g.id, changed });
     };
@@ -723,7 +999,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                     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 GridPackEngine(items, { columns, float, maxRows });
+                engine = engineFrom(items);
             }
             else {
                 engine.cancelGesture();
@@ -886,23 +1162,40 @@ export function bindDashboardGrid(api, group, options = {}) {
         }
         // 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;
+        // ANCHORED ON THE OPPOSITE EDGE. The gesture carries which edges the press
+        // took (the corner handle is s+e — s+w on an RTL board, whose corner sits
+        // bottom-left — and a press near any border takes that edge), and the
+        // tile's rect is rebuilt from its start rect with only those edges moved.
+        // A pull from the west or north keeps the right/bottom edge pinned, in
+        // cells too: the target cell is anchored, and the engine is driven MOVE
+        // then RESIZE when growing (so the push happens on the side that grows)
+        // and RESIZE then MOVE when shrinking. The s+e case reproduces the old
+        // corner maths exactly, which the scenario battery pins.
+        const dx = ev.world.x - g.downWorld.x;
+        const dy = ev.world.y - g.downWorld.y;
+        const E = g.edges;
+        let left = g.startPos.x;
+        let right = g.startPos.x + g.startSize.width;
+        let top = g.startPos.y;
+        let bottom = g.startPos.y + g.startSize.height;
+        if (E.e)
+            right += dx;
+        if (E.w)
+            left += dx;
+        if (E.s)
+            bottom += dy;
+        if (E.n)
+            top += dy;
         const f = frame();
         const gg = geom();
         const minW = Math.max(8, columnUnitFor(gg, f.width));
-        let w = Math.max(minW, g.startSize.width + dw);
+        let w = Math.max(minW, right - left);
         // 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;
+        let h = bottom - top;
         // 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
@@ -950,38 +1243,71 @@ export function bindDashboardGrid(api, group, options = {}) {
         // 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.
+        // squeeze bug it replaced. Clamp to the tile's maximum legal rect: the
+        // growing side can reach the board edge on ITS side — column 0 / row 0
+        // for a west / north pull, the last column / the bound otherwise.
         // (Escalation above may have just grown OR shrunk the board — re-read.)
         const fNow = frame();
         const ggNow = geom();
         h = Math.max(Math.max(8, rowHeightFor(ggNow, rows())), h);
         const itemNow = engine.getItem(g.id);
+        const pullsX = E.e || E.w;
+        const pullsY = E.n || E.s;
         if (itemNow) {
             const cuNow = columnUnitFor(ggNow, fNow.width);
             const rhNow = 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);
-            }
+            const wCells = E.w ? itemNow.x + itemNow.w : columns - itemNow.x;
+            w = Math.min(w, wCells * (cuNow + gap) - gap);
+            const b = bound();
+            const hCells = E.n ? itemNow.y + itemNow.h : b !== undefined ? Math.max(1, b - itemNow.y) : Infinity;
+            if (hCells !== Infinity)
+                h = Math.min(h, hCells * (rhNow + gap) - gap);
+            // AN AXIS NOBODY PULLED KEEPS ITS CELLS. In fit mode a push during the
+            // gesture reflows the board and the row height shrinks, so a pixel
+            // height that never changed re-quantises to MORE rows (measured: a west
+            // pull took a 3-row donut to 5). The un-pulled axis follows the live
+            // projection of its cell span instead of the start-of-gesture pixels.
+            if (!pullsX)
+                w = itemNow.w * (cuNow + gap) - gap;
+            if (!pullsY)
+                h = itemNow.h * (rhNow + gap) - gap;
         }
+        // Anchor: the pulled edges follow w/h, the opposite ones stay put — on
+        // the LIVE projection of the tile's cell, not the start-of-gesture pixels.
+        // In fit mode a push during the gesture reflows every row, so the row the
+        // tile sits in moves; anchoring on the start rect drew the ghost a row or
+        // two below its own placeholder (visual audit, west pull on the donut).
+        const liveRect = itemNow ? cellToRect(itemNow, fNow, ggNow, rows()) : null;
+        const anchorLeft = liveRect && !E.w && !E.e ? liveRect.x : left;
+        const anchorRight = liveRect ? liveRect.x + liveRect.width : right;
+        const anchorTop = liveRect && !E.n && !E.s ? liveRect.y : top;
+        const anchorBottom = liveRect ? liveRect.y + liveRect.height : bottom;
+        const px = E.w ? anchorRight - w : anchorLeft;
+        const py = E.n ? anchorBottom - h : anchorTop;
         g.node.setSize(w, h, (_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;
+        g.node.setPosition(px, py);
+        ghostStyleFastPath(g, { x: px, y: py, width: w, height: h });
+        const spanF = bound() !== undefined ? frame() : f;
+        const spanG = bound() !== undefined ? geom() : gg;
         const span = sizeToSpan(w, h, spanF, spanG, rows());
-        if (engine.resizeCheck(g.id, span.w, span.h).changed)
-            project();
+        if (itemNow) {
+            if (!pullsX)
+                span.w = itemNow.w;
+            if (!pullsY)
+                span.h = itemNow.h;
+            const tx = E.w ? itemNow.x + itemNow.w - span.w : itemNow.x;
+            const ty = E.n ? itemNow.y + itemNow.h - span.h : itemNow.y;
+            const moves = tx !== itemNow.x || ty !== itemNow.y;
+            const growing = span.w > itemNow.w || span.h > itemNow.h;
+            let changed = false;
+            if (moves && growing)
+                changed = engine.moveCheck(g.id, tx, ty, { gate: false }).changed || changed;
+            changed = engine.resizeCheck(g.id, span.w, span.h).changed || changed;
+            if (moves && !growing)
+                changed = engine.moveCheck(g.id, tx, ty, { gate: false }).changed || changed;
+            if (changed)
+                project();
+        }
         syncPlaceholder();
     };
     const onToolUp = () => {
@@ -1039,6 +1365,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             cleanupGestureVisuals(g);
             gesture = null;
             enforceBoardHeight();
+            persistLayouts();
             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;
@@ -1128,8 +1455,9 @@ export function bindDashboardGrid(api, group, options = {}) {
         // 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));
+        const b = bound();
+        if (b !== undefined)
+            span.h = Math.max(1, Math.min(b, 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) {
@@ -1262,16 +1590,55 @@ export function bindDashboardGrid(api, group, options = {}) {
                 return insideMemberGroupFrame(ev.world.x, ev.world.y);
             }
             // 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);
+            // built-in group-drag cannot fight the pack layout for the KPI slab —
+            // and empty presses on the BOARD itself: its group is a layout
+            // container, not a thing to drag around the canvas, and on a fluid
+            // board there is no void outside it, so the space between tiles IS the
+            // void (a click there clears the selection, see onPointerDown).
+            return insideMemberGroupFrame(ev.world.x, ev.world.y) || worldInsideBoard(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
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            if (gesture)
+                return; // mid-palette
+            if (!hit.node) {
+                // The board's own empty area: a void click. Nothing to drag, and the
+                // selection clears exactly as a click outside any board would.
+                (_b = (_a = diagram).clearSelection) === null || _b === void 0 ? void 0 : _b.call(_a);
+                api.render();
+                return;
+            }
             const node = diagram.getNode(hit.node.id);
-            if (!node || ((_a = node.state) === null || _a === void 0 ? void 0 : _a.locked) === true)
+            if (!node || ((_c = node.state) === null || _c === void 0 ? void 0 : _c.locked) === true)
                 return; // pinned: refuse; click still focuses
+            if (isStatic)
+                return; // a static board: claimed and deadened, click still focuses
+            // Which edges did the press take? The corner handle names its own (s+e,
+            // or s+w on RTL); a bare press within EDGE_GRIP of the tile's border
+            // takes that border; anywhere else is a move.
+            const target = ((_e = (_d = ev.source) === null || _d === void 0 ? void 0 : _d.target) !== null && _e !== void 0 ? _e : null);
+            const onHandle = !!((_f = target === null || target === void 0 ? void 0 : target.closest) === null || _f === void 0 ? void 0 : _f.call(target, '.axdb-rs'));
+            const hostEl = hostOf(node.id);
+            const resizable = ((_g = node.getMetadata) === null || _g === void 0 ? void 0 : _g.call(node, 'widgetResizable')) !== false;
+            const movable = ((_h = node.getMetadata) === null || _h === void 0 ? void 0 : _h.call(node, 'widgetMovable')) !== false;
+            let edges = NO_EDGES;
+            if (resizable) {
+                if (onHandle)
+                    edges = rtl ? { n: false, e: false, s: true, w: true } : { n: false, e: true, s: true, w: false };
+                else if (hostEl) {
+                    // `ev.screen` is ELEMENT-LOCAL px; the host rect is in client px.
+                    // Compare like with like — the source event's clientX/Y when there
+                    // is one, else the container's origin plus the local offset.
+                    const src = ev.source;
+                    const cr = api.container.getBoundingClientRect();
+                    const cx = typeof (src === null || src === void 0 ? void 0 : src.clientX) === 'number' ? src.clientX : cr.left + ev.screen.x;
+                    const cy = typeof (src === null || src === void 0 ? void 0 : src.clientY) === 'number' ? src.clientY : cr.top + ev.screen.y;
+                    edges = edgesNear(hostEl, cx, cy);
+                }
+            }
+            const isResize = anyEdge(edges);
+            if (!isResize && !movable)
+                return; // a fixed tile: refuse the drag, 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
@@ -1279,8 +1646,6 @@ export function bindDashboardGrid(api, group, options = {}) {
             // 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',
@@ -1296,7 +1661,9 @@ export function bindDashboardGrid(api, group, options = {}) {
                 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 },
+                startPos: { x: node.position.x, y: node.position.y },
+                edges,
+                spans: { w: (_j = it === null || it === void 0 ? void 0 : it.w) !== null && _j !== void 0 ? _j : 1, h: (_k = it === null || it === void 0 ? void 0 : it.h) !== null && _k !== void 0 ? _k : 1 },
                 removedFromBoard: false,
                 leg: null,
                 lastWorld: null,
@@ -1317,10 +1684,179 @@ export function bindDashboardGrid(api, group, options = {}) {
         },
     };
     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;
+    const onHover = (e) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (disposed || gesture)
+            return;
+        // 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 = host;
+        if (!host)
+            return;
+        const id = (_d = host.getAttribute('data-node-id')) !== null && _d !== void 0 ? _d : '';
+        if (!((_e = group.members) !== null && _e !== void 0 ? _e : new Set()).has(id))
+            return;
+        const node = diagram.getNode(id);
+        const resizable = !!node && !isStatic && ((_f = node.state) === null || _f === void 0 ? void 0 : _f.locked) !== true && ((_g = node.getMetadata) === null || _g === void 0 ? void 0 : _g.call(node, 'widgetResizable')) !== false;
+        host.style.cursor = resizable ? cursorFor(edgesNear(host, e.clientX, e.clientY)) : '';
+    };
+    api.container.addEventListener('pointermove', onHover, { passive: true });
+    /**
+     * 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) {
+            focusedId = 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);
     // -- palette drag-in --------------------------------------------------------
     const beginPaletteDrag = (node, spec, event) => {
         var _a, _b;
-        if (disposed || gesture)
+        if (disposed || gesture || isStatic)
             return;
         const chip = (_a = spec.chip) !== null && _a !== void 0 ? _a : null;
         if (chip) {
@@ -1341,6 +1877,8 @@ export function bindDashboardGrid(api, group, options = {}) {
             startCells: new Map(),
             startGeom: new Map(),
             startSize: { width: 0, height: 0 },
+            startPos: { x: 0, y: 0 },
+            edges: NO_EDGES,
             spans: { w: Math.max(1, spec.w), h: Math.max(1, spec.h) },
             removedFromBoard: true,
             leg: null,
@@ -1386,8 +1924,12 @@ export function bindDashboardGrid(api, group, options = {}) {
                     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 });
+                    // A bounded board with no room refuses the entry: the chip dims to
+                    // say so, and the release will snap it home.
+                    const entered = engine.add({ id: g.id, x: 0, y: engine.rows(), w: g.spans.w, h: g.spans.h });
+                    chip === null || chip === void 0 ? void 0 : chip.classList.toggle('axdb-out', !entered);
+                    if (entered)
+                        engine.moveCheck(g.id, cell.x, cell.y, { gate: false });
                     project();
                 }
                 else if (engine.moveCheck(g.id, cell.x, cell.y).changed) {
@@ -1396,6 +1938,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             }
             else if (!g.removedFromBoard) {
                 g.removedFromBoard = true;
+                chip === null || chip === void 0 ? void 0 : chip.classList.remove('axdb-out');
                 engine.remove(g.id); // displaced tiles come home (gesture memory)
                 project();
             }
@@ -1423,6 +1966,7 @@ export function bindDashboardGrid(api, group, options = {}) {
                 cleanupGestureVisuals(g);
                 gesture = null;
                 void ((_a = options.onDropIn) === null || _a === void 0 ? void 0 : _a.call(options, node, cell, displaced));
+                persistLayouts();
                 (_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;
@@ -1473,35 +2017,63 @@ export function bindDashboardGrid(api, group, options = {}) {
         if (commands.length > 0) {
             yield api.getEngine().commandManager.execute(new BatchCommand(name, commands));
         }
+        persistLayouts();
         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 GridPackEngine(items, { columns, float, maxRows });
-            engine.setLayouts(carried);
+    /** Rebuild the engine from the members' persisted cells. `pack` runs gravity
+     *  over the result (boot, float→off); a plain sync keeps the cells verbatim. */
+    const rebuild = (pack) => {
+        var _a, _b, _c, _d;
+        if (disposed)
+            return;
+        if (gesture)
+            cancelActiveGesture(false);
+        applyFluidFrame();
+        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. On a
+        // FRESH bind (a loaded document) the cache comes from the group instead.
+        const persisted = (_b = group.getMetadata) === null || _b === void 0 ? void 0 : _b.call(group, 'dashboardLayouts');
+        const carried = engine.cachedColumns().length > 0 ? engine.getLayouts() : ((_c = persisted === null || persisted === void 0 ? void 0 : persisted.layouts) !== null && _c !== void 0 ? _c : {});
+        // The document's cells belong to the count it was SAVED at. When that is
+        // not the count this board is bound at, build the engine at the saved
+        // count — where the cells are legal — hand it the cache, and let its own
+        // column change bring the board to the bound count: known items come back
+        // from the cache exactly, the rest scale. (Only a fresh bind can see a
+        // mismatch; every later rebuild finds cells the binder itself wrote.)
+        const savedAt = engine.cachedColumns().length === 0 && typeof (persisted === null || persisted === void 0 ? void 0 : persisted.columns) === 'number' ? persisted.columns : columns;
+        engine = engineFrom(items, pack, savedAt);
+        engine.setLayouts(carried);
+        const converted = savedAt !== columns && engine.setColumns(columns, (_d = responsive === null || responsive === void 0 ? void 0 : responsive.layout) !== null && _d !== void 0 ? _d : 'moveScale');
+        // A PACKED or CONVERTED rebuild may have moved cells; write them all back
+        // so the next verbatim sync reads the settled board, not the pre-pack one.
+        // A verbatim rebuild only fills in cells that were never persisted.
+        if (pack || converted)
+            persistLiveCells();
+        else
             for (const item of engine.getItems())
                 persistAdoptedCell(item.id, item);
-            project();
-            syncHandles();
-            api.renderNow();
-            evaluateResponsive();
+        // The capacity is derived from the design height AND floors at the content
+        // just rebuilt, so it is computed here and carried into the engine.
+        if (refreshCapacity())
+            engine = engineFrom(engine.getItems().map((i) => (Object.assign({}, i))), false);
+        persistLayouts();
+        project();
+        syncHandles();
+        api.renderNow();
+        evaluateResponsive();
+    };
+    const handle = {
+        sync() {
+            rebuild(false);
         },
         setColumns(n, layout, opts) {
             var _a;
@@ -1522,6 +2094,26 @@ export function bindDashboardGrid(api, group, options = {}) {
             api.renderNow();
         },
         getRtl: () => rtl,
+        focusWidget(id) {
+            var _a, _b, _c;
+            if (disposed || !((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
+                return false;
+            focusedId = id;
+            syncA11y();
+            (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b, { preventScroll: true });
+            return true;
+        },
+        getFocusedWidget: () => focusedId,
+        setStatic(on) {
+            if (on === isStatic)
+                return;
+            isStatic = on;
+            if (gesture)
+                cancelActiveGesture(false);
+            syncHandles();
+            api.renderNow();
+        },
+        getStatic: () => isStatic,
         saveLayout() {
             const saved = engine.saveLayout();
             return {
@@ -1533,7 +2125,11 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (mode === sizing)
                 return;
             sizing = mode;
-            project();
+            applyFluidFrame();
+            if (refreshCapacity())
+                rebuild(false);
+            else
+                project();
             api.renderNow();
         },
         getSizing: () => sizing,
@@ -1541,10 +2137,9 @@ export function bindDashboardGrid(api, group, options = {}) {
             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();
+            // Rebuild from persisted cells under the new mode, PACKED: gravity (when
+            // float turns off) applies immediately through the rebuild's settle.
+            rebuild(true);
             api.renderNow();
         },
         getFloat: () => float,
@@ -1557,6 +2152,9 @@ export function bindDashboardGrid(api, group, options = {}) {
                 maxColumns,
                 rtl,
                 responsive: !!responsive && !responsivePinned,
+                fluid,
+                static: isStatic,
+                capacity,
                 gap,
                 padding,
                 sizing,
@@ -1567,6 +2165,12 @@ export function bindDashboardGrid(api, group, options = {}) {
                 frame: f,
             };
         },
+        willItFit(w, h) {
+            if (bound() === undefined)
+                return true;
+            const probe = engineFrom(engine.getItems().map((i) => (Object.assign({}, i))));
+            return probe.add({ id: '\u0000probe', x: 0, y: 0, w: Math.max(1, w), h: Math.max(1, h), autoPosition: true }) !== null;
+        },
         cellOf(id) {
             const it = engine.getItem(id);
             return it ? { x: it.x, y: it.y, w: it.w, h: it.h } : undefined;
@@ -1613,31 +2217,40 @@ export function bindDashboardGrid(api, group, options = {}) {
         },
         beginPaletteDrag,
         dispose() {
-            var _a;
+            var _a, _b, _c, _d;
             if (disposed)
                 return;
             cancelActiveGesture(false);
             disposed = true;
             peersOnCanvas().delete(selfPeer);
             unregisterTool();
+            api.container.removeEventListener('pointermove', onHover);
+            api.container.removeEventListener('focusin', onFocusIn);
+            api.container.removeEventListener('keydown', onKey);
             hostObserver.disconnect();
             containerObserver === null || containerObserver === void 0 ? void 0 : containerObserver.disconnect();
             for (const off of subs)
                 off();
+            // The corner handles are THIS binder's affordance: a board re-bound as a
+            // 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);
             if (ghostTimer)
                 clearTimeout(ghostTimer);
-            (_a = htmlLayer()) === null || _a === void 0 ? void 0 : _a.classList.remove('axdb-glide');
+            (_d = htmlLayer()) === null || _d === void 0 ? void 0 : _d.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();
+    // Boot: adopt the current members (PACKED — a declared cell hovering over an
+    // empty row settles, the documented contract), 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).
+    rebuild(true);
     const layer = htmlLayer();
     if (layer)
         hostObserver.observe(layer, { childList: true, subtree: true });