@grafloria/element 0.4.2 → 0.4.4

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

@@ -43,8 +43,9 @@
  * round-trips with no extra work — same as every other kit.
  */
 import { __awaiter } from "tslib";
-import { AddToGroupCommand, BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, RemoveFromGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
+import { BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, RemoveFromGroupCommand, RemoveGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
 import { bindDashboardGrid, } from './grid-binder.js';
+import { bindDashboardSplit, SPLIT_TREE_KEY } from './split-binder.js';
 import { gridItemFromCell } from './grid-mapping.js';
 import { ensureDashboardKitStyles } from './styles.js';
 import { defaultWidgetRenderer } from './widgets.js';
@@ -60,26 +61,41 @@ import { defaultWidgetRenderer } from './widgets.js';
  * unwinds both in undo().
  */
 class AddWidgetCommand extends Command {
-    constructor(node, groupId) {
+    /**
+     * `registry` is the kit's bookkeeping for the widget (see
+     * RegisterWidgetCommand): it is applied INSIDE this command rather than in a
+     * batch beside it, because a batch runs its members across awaits and the
+     * node would reach the model a microtask after the caller's `addWidget()`
+     * returned — every consumer that read the model right after would have
+     * broken. `nodeWasInModel` covers re-adding a node that already exists
+     * (membership only), the case that used to be a separate AddToGroupCommand.
+     */
+    constructor(node, groupId, registry, nodeWasInModel = false) {
         super('Add widget');
         this.node = node;
         this.groupId = groupId;
+        this.registry = registry;
+        this.nodeWasInModel = nodeWasInModel;
     }
     execute(context) {
-        var _a;
+        var _a, _b;
         const diagram = context.diagram;
         if (!diagram)
             return;
-        diagram.addNode(this.node);
-        (_a = diagram.getGroup(this.groupId)) === null || _a === void 0 ? void 0 : _a.addMember(this.node.id);
+        (_a = this.registry) === null || _a === void 0 ? void 0 : _a.register();
+        if (!this.nodeWasInModel && !diagram.getNode(this.node.id))
+            diagram.addNode(this.node);
+        (_b = diagram.getGroup(this.groupId)) === null || _b === void 0 ? void 0 : _b.addMember(this.node.id);
     }
     undo(context) {
-        var _a;
+        var _a, _b;
         const diagram = context.diagram;
         if (!diagram)
             return;
         (_a = diagram.getGroup(this.groupId)) === null || _a === void 0 ? void 0 : _a.removeMember(this.node.id);
-        diagram.removeNode(this.node.id);
+        if (!this.nodeWasInModel)
+            diagram.removeNode(this.node.id);
+        (_b = this.registry) === null || _b === void 0 ? void 0 : _b.unregister();
     }
     serialize() {
         return {
@@ -90,6 +106,81 @@ class AddWidgetCommand extends Command {
         };
     }
 }
+/**
+ * The kit's BOOKKEEPING for a widget — its spec, its board, its slot in the
+ * authored array — travels through the history WITH the node.
+ *
+ * It did not, and that was D2 of the 2026-09-06 review: `remove()` deleted the
+ * spec synchronously while the removal itself was a command, so undo restored
+ * the node and the membership through the model and the painter — asked to
+ * paint a node whose id the kit no longer knew — returned without drawing. A
+ * blank host where the donut was, `widget(id)` undefined, not listed. The
+ * comment on AddWidgetCommand already warns that the painter needs the spec
+ * BEFORE the node reaches the model; the same holds on the way back in.
+ *
+ * `register`/`unregister` are idempotent so the handle may also apply them
+ * synchronously (execute() is async, and the caller reads the handle right
+ * after) without double-counting when the command runs.
+ */
+class RegisterWidgetCommand extends Command {
+    constructor(registry, direction) {
+        super(direction === 'register' ? 'Register widget' : 'Unregister widget');
+        this.registry = registry;
+        this.direction = direction;
+    }
+    execute() {
+        if (this.direction === 'register')
+            this.registry.register();
+        else
+            this.registry.unregister();
+    }
+    undo() {
+        if (this.direction === 'register')
+            this.registry.unregister();
+        else
+            this.registry.register();
+    }
+    serialize() {
+        return { id: this.id, name: this.name, timestamp: this.timestamp, data: { direction: this.direction } };
+    }
+}
+/**
+ * Pin as ONE undoable step. `pin()` wrote the node's lock directly, which made
+ * it the only layout mutation outside the history (Ctrl-Z after a pin undid the
+ * gesture before it) and the reason toJSON() never saw it — D5. `before` is
+ * captured at construction so the handle can apply the lock synchronously and
+ * let the command re-apply it idempotently when it runs.
+ */
+class SetWidgetLockCommand extends Command {
+    constructor(nodeId, before, after) {
+        super(after ? 'Pin widget' : 'Unpin widget');
+        this.nodeId = nodeId;
+        this.before = before;
+        this.after = after;
+    }
+    apply(context, locked) {
+        var _a;
+        const diagram = context.diagram;
+        (_a = diagram === null || diagram === void 0 ? void 0 : diagram.getNode(this.nodeId)) === null || _a === void 0 ? void 0 : _a.setState({ locked });
+    }
+    execute(context) {
+        this.apply(context, this.after);
+    }
+    undo(context) {
+        this.apply(context, this.before);
+    }
+    serialize() {
+        return {
+            id: this.id,
+            name: this.name,
+            timestamp: this.timestamp,
+            data: { nodeId: this.nodeId, before: this.before, after: this.after },
+        };
+    }
+}
+/** The history events a layout can change on — the engine's DiagramEventTypes
+ *  values, spelled out so the kit needs no import from the engine's type bag. */
+const HISTORY_EVENTS = ['command:executed', 'command:undone', 'command:redone'];
 const DEFAULTS = { columns: 12, gap: 8, rowHeight: 130, width: 1180, height: 660 };
 const OFFSCREEN_X = -20000;
 let autoId = 0;
@@ -115,6 +206,15 @@ function buildWidgetNode(w, rowHeight) {
         node.setMetadata('widgetTitle', w.title);
     node.setMetadata('columnSpan', (_c = w.span) !== null && _c !== void 0 ? _c : 3);
     node.setMetadata('rowSpan', (_d = w.rows) !== null && _d !== void 0 ? _d : 1);
+    // Limits and the two pointer flags reach the node too, so the binder reads
+    // them and a reload rebuilds them (only when authored — an unconstrained
+    // widget serialises exactly as it always did).
+    if (w.limits !== undefined)
+        node.setMetadata('widgetLimits', Object.assign({}, w.limits));
+    if (w.movable === false)
+        node.setMetadata('widgetMovable', false);
+    if (w.resizable === false)
+        node.setMetadata('widgetResizable', false);
     if (w.x !== undefined && w.y !== undefined) {
         node.setGridItem({
             columnStart: w.x + 1,
@@ -157,13 +257,24 @@ function assignCellsDeep(widgets, columns) {
 }
 /** Flow widgets that declared no cell: left-to-right, wrapping at `columns`. */
 function assignCells(widgets, columns) {
-    var _a, _b;
+    var _a, _b, _c;
     let x = 0;
     let y = 0;
     let rowMax = 0;
     for (const w of widgets) {
-        const span = Math.max(1, Math.min(columns, (_a = w.span) !== null && _a !== void 0 ? _a : 3));
-        const rows = Math.max(1, (_b = w.rows) !== null && _b !== void 0 ? _b : 1);
+        const lim = (_a = w.limits) !== null && _a !== void 0 ? _a : {};
+        let span = Math.max(1, Math.min(columns, (_b = w.span) !== null && _b !== void 0 ? _b : 3));
+        if (lim.minSpan !== undefined)
+            span = Math.max(span, lim.minSpan);
+        if (lim.maxSpan !== undefined)
+            span = Math.min(span, lim.maxSpan);
+        span = Math.max(1, Math.min(columns, span));
+        let rows = Math.max(1, (_c = w.rows) !== null && _c !== void 0 ? _c : 1);
+        if (lim.minRows !== undefined)
+            rows = Math.max(rows, lim.minRows);
+        if (lim.maxRows !== undefined)
+            rows = Math.min(rows, lim.maxRows);
+        rows = Math.max(1, rows);
         if (w.x === undefined || w.y === undefined) {
             if (x + span > columns) {
                 x = 0;
@@ -187,6 +298,58 @@ function assignCells(widgets, columns) {
 export function createDashboardHandle(ctx) {
     const { views, groups, binders, specById, viewOfWidget } = ctx;
     const hostOf = (id) => ctx.hosts.get(id);
+    /**
+     * Put the camera on a view. FLUID: the board IS the container, so the camera
+     * sits at zoom 1 with the board's origin at the top-left — never a fit, which
+     * is what made a dashboard a scaled picture (D1). FIXED: frame the board.
+     */
+    const frameView = (g) => {
+        var _a, _b, _c;
+        const vp = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.viewport;
+        if (!vp)
+            return;
+        const gs = (_b = g.size) !== null && _b !== void 0 ? _b : { width: ctx.boardW, height: ctx.boardH };
+        if (ctx.mode === 'fluid' && vp.setViewport && vp.getViewport) {
+            (_c = vp.setZoom) === null || _c === void 0 ? void 0 : _c.call(vp, 1);
+            const cur = vp.getViewport();
+            vp.setViewport({ x: g.position.x, y: g.position.y, width: cur.width, height: cur.height });
+            return;
+        }
+        vp.fitToBounds({ x: g.position.x, y: g.position.y, width: gs.width, height: gs.height }, 26, { maxZoom: 1 });
+    };
+    /**
+     * FLUID: the camera is a SCROLL POSITION over the board, never a free pan.
+     * Bounded to the active board's frame — the page-scroll model of every grid
+     * library — so a wheel cannot run past the last row, and a frame that
+     * shrinks under a scrolled camera (Fit after a scroll in Grow; an undo that
+     * removes rows) pulls the camera back into the board. Found by the user
+     * switching Fit and Grow on the live page: Fit shrank the board to the
+     * canvas while the camera stayed 600 px down — the top half of the board
+     * out of view above an empty canvas. FIXED boards are diagrams and pan free.
+     */
+    let clamping = false;
+    const clampCamera = () => {
+        var _a, _b;
+        if (ctx.mode !== 'fluid' || clamping)
+            return;
+        const vp = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.viewport;
+        const g = groups.get(ctx.active);
+        if (!(vp === null || vp === void 0 ? void 0 : vp.getViewport) || !vp.setViewport || !g)
+            return;
+        const cur = vp.getViewport();
+        const gs = (_b = g.size) !== null && _b !== void 0 ? _b : { width: ctx.boardW, height: ctx.boardH };
+        const x = Math.min(Math.max(cur.x, g.position.x), g.position.x + Math.max(0, gs.width - cur.width));
+        const y = Math.min(Math.max(cur.y, g.position.y), g.position.y + Math.max(0, gs.height - cur.height));
+        if (Math.abs(x - cur.x) < 0.5 && Math.abs(y - cur.y) < 0.5)
+            return;
+        clamping = true;
+        try {
+            vp.setViewport({ x, y, width: cur.width, height: cur.height });
+        }
+        finally {
+            clamping = false;
+        }
+    };
     /**
      * A board's widgets as a NESTED tree, derived from LIVE membership — not the
      * authored arrays. A cross-boundary drag moves membership through commands
@@ -195,7 +358,7 @@ export function createDashboardHandle(ctx) {
      * tile under the container it is actually in, in every one of those states.
      */
     const treeOf = (boardId) => {
-        var _a;
+        var _a, _b, _c, _d;
         const g = ctx.boardGroups.get(boardId);
         const b = binders.get(boardId);
         if (!g)
@@ -213,12 +376,97 @@ export function createDashboardHandle(ctx) {
                 entries.push(Object.assign(Object.assign(Object.assign({ id: memberId }, (spec !== null && spec !== void 0 ? spec : {})), at), { widgets: treeOf(memberId) }));
             }
             else if (spec) {
-                entries.push(Object.assign(Object.assign({}, spec), at));
+                // `pinned` is read from the NODE's lock, not the authored spec: pin()
+                // changes the node, and a saved board must come back pinned the way
+                // the user left it (D5). Written only when true, so an unpinned
+                // widget serialises exactly as it always did.
+                const entry = Object.assign(Object.assign({}, spec), at);
+                if (((_d = (_c = (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.getModel().getNode(memberId)) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.locked) === true)
+                    entry.pinned = true;
+                else
+                    delete entry.pinned;
+                entries.push(entry);
             }
         }
         entries.sort((p1, p2) => { var _a, _b, _c, _d; return ((_a = p1.y) !== null && _a !== void 0 ? _a : 0) - ((_b = p2.y) !== null && _b !== void 0 ? _b : 0) || ((_c = p1.x) !== null && _c !== void 0 ? _c : 0) - ((_d = p2.x) !== null && _d !== void 0 ? _d : 0); });
         return entries;
     };
+    /** Bookkeeping closures for one widget, shared by the add and remove
+     *  commands (and applied synchronously by the handle — idempotent). */
+    const registryOf = (id, boardId, spec) => {
+        let slot = -1;
+        return {
+            register: () => {
+                specById.set(id, spec);
+                viewOfWidget.set(id, boardId);
+                const arr = ctx.boardWidgets.get(boardId);
+                if (arr && !arr.some((w) => w.id === id)) {
+                    arr.splice(slot < 0 ? arr.length : Math.min(slot, arr.length), 0, spec);
+                }
+            },
+            unregister: () => {
+                specById.delete(id);
+                viewOfWidget.delete(id);
+                const arr = ctx.boardWidgets.get(boardId);
+                if (arr) {
+                    const i = arr.findIndex((w) => w.id === id);
+                    if (i >= 0) {
+                        slot = i; // remembered so undo puts it back where it was
+                        arr.splice(i, 1);
+                    }
+                }
+            },
+        };
+    };
+    // ONE reporter for every path that changes a layout (D3). Diff-based: a
+    // pointer commit reports synchronously, the history event that follows finds
+    // nothing new and stays quiet.
+    const lastReported = new Map();
+    const reportChanged = () => {
+        if (!ctx.onLayoutChange || !ctx.apiRef)
+            return;
+        for (const v of handle.toJSON().views) {
+            const key = JSON.stringify(v.widgets);
+            if (lastReported.get(v.id) === key)
+                continue;
+            lastReported.set(v.id, key);
+            ctx.onLayoutChange(v.id, v.widgets);
+        }
+    };
+    ctx.reportChanged = reportChanged;
+    // The boards follow the HISTORY, not the consumer's memory of it: after any
+    // command lands, is undone or redone, every binder re-reads the model and the
+    // reporter runs. This is what retires "call refresh() after undo".
+    ctx.attachHistory = () => {
+        var _a, _b, _c, _d, _e;
+        const bus = (_c = (_b = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getEngine) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.eventBus;
+        if (!bus)
+            return;
+        // Prime the reporter so the boot layout is never reported as a change.
+        for (const v of handle.toJSON().views)
+            lastReported.set(v.id, JSON.stringify(v.widgets));
+        const onHistory = () => {
+            var _a;
+            if (!ctx.apiRef)
+                return;
+            const model = ctx.apiRef.getModel();
+            for (const id of [...ctx.boardGroups.keys()]) {
+                if (!binders.has(id) && model.getGroup(id))
+                    (_a = ctx.rebindContainer) === null || _a === void 0 ? void 0 : _a.call(ctx, id);
+            }
+            for (const b of binders.values())
+                b.sync();
+            clampCamera();
+            ctx.apiRef.renderNow();
+            reportChanged();
+        };
+        ctx.subscriptions = (_d = ctx.subscriptions) !== null && _d !== void 0 ? _d : [];
+        for (const ev of HISTORY_EVENTS)
+            ctx.subscriptions.push(bus.on(ev, onHistory));
+        const vp = (_e = ctx.apiRef) === null || _e === void 0 ? void 0 : _e.viewport;
+        if (ctx.mode === 'fluid' && (vp === null || vp === void 0 ? void 0 : vp.onChange))
+            ctx.subscriptions.push(vp.onChange(() => clampCamera()));
+    };
     const execCommand = (cmd) => {
         var _a, _b, _c, _d;
         try {
@@ -239,7 +487,7 @@ export function createDashboardHandle(ctx) {
             return ctx.active;
         },
         showView(id) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c;
             if (!groups.has(id))
                 return;
             ctx.active = id;
@@ -251,9 +499,7 @@ export function createDashboardHandle(ctx) {
             }
             (_b = binders.get(id)) === null || _b === void 0 ? void 0 : _b.sync();
             (_c = ctx.apiRef) === null || _c === void 0 ? void 0 : _c.renderNow();
-            const g = groups.get(id);
-            const gs = (_d = g.size) !== null && _d !== void 0 ? _d : { width: ctx.boardW, height: ctx.boardH };
-            (_f = (_e = ctx.apiRef) === null || _e === void 0 ? void 0 : _e.viewport) === null || _f === void 0 ? void 0 : _f.fitToBounds({ x: g.position.x, y: g.position.y, width: gs.width, height: gs.height }, 26, { maxZoom: 1 });
+            frameView(groups.get(id));
         },
         widget(id) {
             return makeWidgetHandle(id);
@@ -263,18 +509,33 @@ export function createDashboardHandle(ctx) {
             const v = views.find((x) => x.id === (viewId !== null && viewId !== void 0 ? viewId : ctx.active));
             return ((_a = v === null || v === void 0 ? void 0 : v.widgets) !== null && _a !== void 0 ? _a : []).map((w) => makeWidgetHandle(w.id)).filter(Boolean);
         },
+        setLayout(layout, viewId) {
+            var _a, _b, _c;
+            const vid = viewId !== null && viewId !== void 0 ? viewId : ctx.active;
+            if (!views.some((v) => v.id === vid))
+                return;
+            if (((_a = ctx.layoutOf.get(vid)) !== null && _a !== void 0 ? _a : 'grid') === layout)
+                return;
+            (_b = ctx.rebindView) === null || _b === void 0 ? void 0 : _b.call(ctx, vid, layout);
+            clampCamera();
+            (_c = ctx.apiRef) === null || _c === void 0 ? void 0 : _c.renderNow();
+            reportChanged();
+        },
+        getLayout: (viewId) => { var _a; return (_a = ctx.layoutOf.get(viewId !== null && viewId !== void 0 ? viewId : ctx.active)) !== null && _a !== void 0 ? _a : 'grid'; },
         setSizing(mode) {
             var _a;
             for (const b of binders.values())
                 b.setSizing(mode);
+            clampCamera();
             (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
         },
-        getSizing: () => { var _a, _b, _c; return (_b = (_a = binders.get(ctx.active)) === null || _a === void 0 ? void 0 : _a.getSizing()) !== null && _b !== void 0 ? _b : ((_c = ctx.optionsBase.sizing) !== null && _c !== void 0 ? _c : 'fit'); },
+        getSizing: () => { var _a, _b, _c; return (_c = (_b = (_a = binders.get(ctx.active)) === null || _a === void 0 ? void 0 : _a.getSizing()) !== null && _b !== void 0 ? _b : ctx.optionsBase.sizing) !== null && _c !== void 0 ? _c : (ctx.mode === 'fluid' ? 'grow' : 'fit'); },
         setFloat(on) {
             var _a;
             for (const b of binders.values())
                 b.setFloat(on);
             (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
+            reportChanged(); // gravity re-packs when float turns off
         },
         getFloat: () => { var _a, _b, _c; return (_b = (_a = binders.get(ctx.active)) === null || _a === void 0 ? void 0 : _a.getFloat()) !== null && _b !== void 0 ? _b : ((_c = ctx.optionsBase.float) !== null && _c !== void 0 ? _c : false); },
         setColumns(n, layout, viewId) {
@@ -283,6 +544,7 @@ export function createDashboardHandle(ctx) {
             for (const b of targets)
                 b === null || b === void 0 ? void 0 : b.setColumns(n, layout);
             (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
+            reportChanged(); // derived state, never a command — report it here
         },
         getColumns: (viewId) => { var _a, _b; return (_b = (_a = binders.get(viewId !== null && viewId !== void 0 ? viewId : ctx.active)) === null || _a === void 0 ? void 0 : _a.getColumns()) !== null && _b !== void 0 ? _b : ctx.columns; },
         setRtl(on) {
@@ -292,8 +554,15 @@ export function createDashboardHandle(ctx) {
             (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
         },
         getRtl: () => { var _a, _b, _c; return (_b = (_a = binders.get(ctx.active)) === null || _a === void 0 ? void 0 : _a.getRtl()) !== null && _b !== void 0 ? _b : ((_c = ctx.optionsBase.rtl) !== null && _c !== void 0 ? _c : false); },
+        setStatic(on) {
+            var _a;
+            for (const b of binders.values())
+                b.setStatic(on);
+            (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
+        },
+        getStatic: () => { var _a, _b, _c; return (_b = (_a = binders.get(ctx.active)) === null || _a === void 0 ? void 0 : _a.getStatic()) !== null && _b !== void 0 ? _b : ((_c = ctx.optionsBase.static) !== null && _c !== void 0 ? _c : false); },
         addWidget(spec, viewId) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             const vid = viewId !== null && viewId !== void 0 ? viewId : ctx.active;
             // `vid` may name a view OR a container — both are boards with a group,
             // a binder and an authored array.
@@ -306,17 +575,22 @@ export function createDashboardHandle(ctx) {
             // REGISTER FIRST: a custom node mounts exactly once, and the painter
             // returns early for an id the spec does not know — so the widget must be
             // known before the node reaches the model, or it paints blank forever.
-            arr.push(w);
-            specById.set(w.id, w);
-            viewOfWidget.set(w.id, vid);
+            // The registration ALSO rides in the batch, so undo un-lists the widget
+            // and redo lists it again before the node comes back.
+            // A bounded fit board with no room says so HERE, before anything is
+            // created: undefined, the same answer as an unknown board.
+            if (((_d = binders.get(vid)) === null || _d === void 0 ? void 0 : _d.willItFit(w.span, w.rows)) === false)
+                return undefined;
+            const registry = registryOf(w.id, vid, w);
+            registry.register();
             const existing = model.getNode(w.id);
             const node = existing !== null && existing !== void 0 ? existing : buildWidgetNode(w, ctx.rowHeight);
             if (w.pinned)
                 node.setState({ locked: true });
-            // ONE undoable step (see AddWidgetCommand for why this cannot be a batch).
-            execCommand(existing ? new AddToGroupCommand(group.id, w.id) : new AddWidgetCommand(node, group.id));
-            (_d = binders.get(vid)) === null || _d === void 0 ? void 0 : _d.sync();
-            (_e = ctx.apiRef) === null || _e === void 0 ? void 0 : _e.renderNow();
+            // ONE undoable step, registration included (see AddWidgetCommand).
+            execCommand(new AddWidgetCommand(node, group.id, registry, !!existing));
+            (_e = binders.get(vid)) === null || _e === void 0 ? void 0 : _e.sync();
+            (_f = ctx.apiRef) === null || _f === void 0 ? void 0 : _f.renderNow();
             return makeWidgetHandle(w.id);
         },
         refresh() {
@@ -326,12 +600,9 @@ export function createDashboardHandle(ctx) {
             (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
         },
         fit(viewId) {
-            var _a, _b, _c;
             const g = groups.get(viewId !== null && viewId !== void 0 ? viewId : ctx.active);
-            if (!g)
-                return;
-            const gs = (_a = g.size) !== null && _a !== void 0 ? _a : { width: ctx.boardW, height: ctx.boardH };
-            (_c = (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.viewport) === null || _c === void 0 ? void 0 : _c.fitToBounds({ x: g.position.x, y: g.position.y, width: gs.width, height: gs.height }, 26, { maxZoom: 1 });
+            if (g)
+                frameView(g);
         },
         metrics(viewId) {
             var _a;
@@ -371,34 +642,47 @@ export function createDashboardHandle(ctx) {
             // layout its user authored — and the view's `columns` is that count, so
             // feeding this straight back into dashboard() rebuilds the wide board.
             const savedViews = views.map((v) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 const saved = (_a = binders.get(v.id)) === null || _a === void 0 ? void 0 : _a.saveLayout();
                 const live = treeOf(v.id);
-                return Object.assign(Object.assign(Object.assign({}, v), (saved ? { columns: saved.columns } : {})), { 
+                const layout = (_b = ctx.layoutOf.get(v.id)) !== null && _b !== void 0 ? _b : 'grid';
+                const split = binders.get(v.id);
+                const tree = layout === 'split' && (split === null || split === void 0 ? void 0 : split.getSplitTree) ? split.getSplitTree() : undefined;
+                return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, v), (saved ? { columns: saved.columns } : {})), { layout }), (tree !== undefined ? { tree } : {})), { 
                     // Live membership when the view is mounted; the authored tree before
                     // finalize (a spec serialised without ever rendering keeps its shape).
-                    widgets: live.length > 0 || ((_d = (_c = (_b = ctx.boardGroups.get(v.id)) === null || _b === void 0 ? void 0 : _b.members) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 0) > 0 ? live : v.widgets.map((w) => (Object.assign({}, w))) });
+                    widgets: live.length > 0 || ((_e = (_d = (_c = ctx.boardGroups.get(v.id)) === null || _c === void 0 ? void 0 : _c.members) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : 0) > 0 ? live : v.widgets.map((w) => (Object.assign({}, w))) });
             });
             // Board options come off the LIVE board wherever the handle can see it —
             // `sizing` and `float` are the two a user changes from the toolbar, and
             // reading them from the authored literal would restore the board they
             // started with rather than the one they are looking at.
-            return Object.assign(Object.assign({}, ctx.optionsBase), { renderWidget: undefined, onLayoutChange: undefined, columns: ctx.columns, gap: ctx.gap, rowHeight: ctx.rowHeight, sizing: handle.getSizing(), float: handle.getFloat(), rtl: handle.getRtl(), views: savedViews });
+            return Object.assign(Object.assign({}, ctx.optionsBase), { renderWidget: undefined, onLayoutChange: undefined, columns: ctx.columns, gap: ctx.gap, rowHeight: ctx.rowHeight, mode: ctx.mode, overflow: ctx.overflow, sizing: handle.getSizing(), float: handle.getFloat(), rtl: handle.getRtl(), static: handle.getStatic(), layout: handle.getLayout(), views: savedViews });
         },
         dispose() {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
+            for (const off of (_a = ctx.subscriptions) !== null && _a !== void 0 ? _a : [])
+                off();
+            ctx.subscriptions = [];
             for (const b of binders.values())
                 b.dispose();
             binders.clear();
             // The groups finalize() created are ours to clean up — leaving them
             // behind made a rebuild stack a second set of boards on the first.
-            const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+            const model = (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.getModel();
+            // …and so are the widget NODES (D9): they used to stay behind with live
+            // hosts, so a consumer switching dashboards in one canvas accumulated
+            // orphans, and a rebuild with the same ids re-added nodes that existed.
+            for (const id of specById.keys()) {
+                if (!ctx.boardGroups.has(id))
+                    (_c = model === null || model === void 0 ? void 0 : model.removeNode) === null || _c === void 0 ? void 0 : _c.call(model, id);
+            }
             // Deepest first: a container group removed after its parent is an orphan
             // the model never saw inside a board.
             for (const id of [...ctx.boardGroups.keys()].reverse())
-                (_b = model === null || model === void 0 ? void 0 : model.removeGroup) === null || _b === void 0 ? void 0 : _b.call(model, id);
+                (_d = model === null || model === void 0 ? void 0 : model.removeGroup) === null || _d === void 0 ? void 0 : _d.call(model, id);
             for (const id of groups.keys())
-                (_c = model === null || model === void 0 ? void 0 : model.removeGroup) === null || _c === void 0 ? void 0 : _c.call(model, id);
+                (_e = model === null || model === void 0 ? void 0 : model.removeGroup) === null || _e === void 0 ? void 0 : _e.call(model, id);
             groups.clear();
             ctx.boardGroups.clear();
             ctx.hosts.clear();
@@ -449,12 +733,20 @@ export function createDashboardHandle(ctx) {
                 const n = node();
                 if (!n)
                     return;
-                n.setState({ locked: on !== null && on !== void 0 ? on : !(((_a = n.state) === null || _a === void 0 ? void 0 : _a.locked) === true) });
+                const before = ((_a = n.state) === null || _a === void 0 ? void 0 : _a.locked) === true;
+                const after = on !== null && on !== void 0 ? on : !before;
+                if (after === before)
+                    return;
+                // Applied now so the handle reads back correctly at once, AND recorded
+                // as one undoable step (D5) — the command re-applies idempotently.
+                n.setState({ locked: after });
+                execCommand(new SetWidgetLockCommand(id, before, after));
                 // Re-sync so the ENGINE's locked flag (never pushed, drags refused)
                 // and the hidden corner handle take effect on this frame, not the next
                 // gesture.
                 (_b = binder()) === null || _b === void 0 ? void 0 : _b.sync();
                 (_c = ctx.apiRef) === null || _c === void 0 ? void 0 : _c.renderNow();
+                reportChanged();
             },
             bringToFront() {
                 var _a;
@@ -478,12 +770,55 @@ export function createDashboardHandle(ctx) {
                     ctx.renderWidget(spec, host);
             },
             remove(displaced) {
-                var _a, _b;
+                var _a, _b, _c, _d, _e, _f;
                 if (spec.widgets) {
-                    // A container is a GROUP, not a node — RemoveNodeCommand would
-                    // silently no-op and strand the children. Container removal is not
-                    // supported through the widget handle (yet); say so loudly.
-                    console.warn('[dashboard] remove() on a container is not supported');
+                    // A CONTAINER (review D12): its subtree, its own group, its slab in
+                    // the parent board and the parent's re-pack, as ONE undoable batch.
+                    // Undo restores the groups as fresh GroupModels, so the history
+                    // handler re-binds the container's grid (ctx.rebindContainer).
+                    const parentGroup = ctx.boardGroups.get(viewId);
+                    const parentBinder = binders.get(viewId);
+                    const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+                    if (!parentGroup || !parentBinder || !model)
+                        return;
+                    // ORDER MATTERS FOR UNDO. A batch may only undo when EVERY member
+                    // can, checked before any of them runs — and RemoveFromGroupCommand
+                    // can undo only while its group exists. So no membership commands
+                    // for the members of a group that is going: the group is removed
+                    // FIRST (its serialized members ride with it and come back on undo),
+                    // its nodes after; on undo the nodes return, then the group with its
+                    // membership, then the slab's membership in the parent.
+                    const cmds = [
+                        ...((_b = displaced) !== null && _b !== void 0 ? _b : parentBinder.planRemoval(id)),
+                        new RemoveFromGroupCommand(parentGroup.id, id),
+                    ];
+                    const nodeRemovals = [];
+                    const unregisters = [];
+                    const removeSubtree = (boardId) => {
+                        var _a, _b;
+                        const g = ctx.boardGroups.get(boardId);
+                        cmds.push(new RemoveGroupCommand(boardId));
+                        for (const m of [...((_a = g === null || g === void 0 ? void 0 : g.members) !== null && _a !== void 0 ? _a : [])]) {
+                            const mSpec = specById.get(m);
+                            if (mSpec)
+                                unregisters.push(new RegisterWidgetCommand(registryOf(m, boardId, mSpec), 'unregister'));
+                            if (ctx.boardGroups.has(m))
+                                removeSubtree(m);
+                            else
+                                nodeRemovals.push(new RemoveNodeCommand(m));
+                            (_b = binders.get(m)) === null || _b === void 0 ? void 0 : _b.dispose();
+                            binders.delete(m);
+                        }
+                    };
+                    removeSubtree(id);
+                    const registry = registryOf(id, viewId, spec);
+                    cmds.push(...nodeRemovals, ...unregisters, new RegisterWidgetCommand(registry, 'unregister'));
+                    (_c = binders.get(id)) === null || _c === void 0 ? void 0 : _c.dispose();
+                    binders.delete(id);
+                    void execCommand(new BatchCommand('Remove section', cmds));
+                    registry.unregister();
+                    parentBinder.sync();
+                    (_d = ctx.apiRef) === null || _d === void 0 ? void 0 : _d.renderNow();
                     return;
                 }
                 const n = node();
@@ -496,19 +831,21 @@ export function createDashboardHandle(ctx) {
                 // computed the survivors passes them in: after a drag-out the tile is
                 // gone from the engine, so planRemoval() would return [] and the
                 // survivors' cells would never commit.
-                const survivors = (_a = displaced) !== null && _a !== void 0 ? _a : b.planRemoval(id);
-                const cmds = [...survivors, new RemoveFromGroupCommand(group.id, id), new RemoveNodeCommand(id)];
+                const survivors = (_e = displaced) !== null && _e !== void 0 ? _e : b.planRemoval(id);
+                // The un-registration is the LAST command so that undo — which runs
+                // the batch in reverse — re-registers the spec BEFORE the node and its
+                // membership come back and the painter is asked to paint it (D2).
+                const registry = registryOf(id, viewId, spec);
+                const cmds = [
+                    ...survivors,
+                    new RemoveFromGroupCommand(group.id, id),
+                    new RemoveNodeCommand(id),
+                    new RegisterWidgetCommand(registry, 'unregister'),
+                ];
                 void execCommand(new BatchCommand('Remove widget', cmds));
-                const arr = ctx.boardWidgets.get(viewId);
-                if (arr) {
-                    const i = arr.findIndex((w) => w.id === id);
-                    if (i >= 0)
-                        arr.splice(i, 1);
-                }
-                specById.delete(id);
-                viewOfWidget.delete(id);
+                registry.unregister(); // now, for the caller reading the handle next
                 b.sync();
-                (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.renderNow();
+                (_f = ctx.apiRef) === null || _f === void 0 ? void 0 : _f.renderNow();
             },
             repaint() {
                 const host = hostOf(id);
@@ -522,18 +859,25 @@ export function createDashboardHandle(ctx) {
     return handle;
 }
 export function dashboard(options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     ensureDashboardKitStyles();
     const columns = (_a = options.columns) !== null && _a !== void 0 ? _a : DEFAULTS.columns;
     const gap = (_b = options.gap) !== null && _b !== void 0 ? _b : DEFAULTS.gap;
     const rowHeight = (_c = options.rowHeight) !== null && _c !== void 0 ? _c : DEFAULTS.rowHeight;
     const boardW = (_d = options.width) !== null && _d !== void 0 ? _d : DEFAULTS.width;
     const boardH = (_e = options.height) !== null && _e !== void 0 ? _e : DEFAULTS.height;
+    // An explicit width is a fixed world; everything else lays out fluid.
+    const mode = (_f = options.mode) !== null && _f !== void 0 ? _f : (options.width !== undefined ? 'fixed' : 'fluid');
+    const overflow = (_g = options.overflow) !== null && _g !== void 0 ? _g : 'bounded';
+    // A fluid board grows (fixed row heights, the board extends); a fixed board
+    // fits (its authored height is the picture).
+    const sizing = (_h = options.sizing) !== null && _h !== void 0 ? _h : (mode === 'fluid' ? 'grow' : 'fit');
+    const layout = (_j = options.layout) !== null && _j !== void 0 ? _j : 'grid';
     const views = options.views
         ? options.views.map((v) => (Object.assign(Object.assign({}, v), { widgets: cloneWidgets(v.widgets) })))
-        : [{ id: 'main', widgets: cloneWidgets((_f = options.widgets) !== null && _f !== void 0 ? _f : []) }];
+        : [{ id: 'main', widgets: cloneWidgets((_k = options.widgets) !== null && _k !== void 0 ? _k : []) }];
     for (const v of views)
-        assignCellsDeep(v.widgets, (_g = v.columns) !== null && _g !== void 0 ? _g : columns);
+        assignCellsDeep(v.widgets, (_l = v.columns) !== null && _l !== void 0 ? _l : columns);
     // -- the render spec: one custom-HTML node per widget ----------------------
     const nodes = [];
     const specById = new Map();
@@ -565,7 +909,7 @@ export function dashboard(options) {
                 position: { x: 0, y: 0 },
                 size: { width: 100, height: rowHeight },
                 custom: true,
-                metadata: Object.assign(Object.assign({ useHTMLLayer: true, widgetKind: (_a = w.kind) !== null && _a !== void 0 ? _a : 'widget', widgetSpec: (_b = w.data) !== null && _b !== void 0 ? _b : {} }, (w.title !== undefined ? { widgetTitle: w.title } : {})), { columnSpan: w.span, rowSpan: w.rows, gridItem: { columnStart: w.x + 1, columnEnd: w.x + 1 + w.span, rowStart: w.y + 1, rowEnd: w.y + 1 + w.rows } }),
+                metadata: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ useHTMLLayer: true, widgetKind: (_a = w.kind) !== null && _a !== void 0 ? _a : 'widget', widgetSpec: (_b = w.data) !== null && _b !== void 0 ? _b : {} }, (w.title !== undefined ? { widgetTitle: w.title } : {})), (w.limits !== undefined ? { widgetLimits: Object.assign({}, w.limits) } : {})), (w.movable === false ? { widgetMovable: false } : {})), (w.resizable === false ? { widgetResizable: false } : {})), { columnSpan: w.span, rowSpan: w.rows, gridItem: { columnStart: w.x + 1, columnEnd: w.x + 1 + w.span, rowStart: w.y + 1, rowEnd: w.y + 1 + w.rows } }),
             });
         }
     };
@@ -577,7 +921,7 @@ export function dashboard(options) {
     // No renderWidget → the built-in renderers draw the declared `kind` from the
     // developer's own `data` (widgets.ts), unknown kinds landing on the titled
     // frame they always did.
-    const renderWidget = (_h = options.renderWidget) !== null && _h !== void 0 ? _h : defaultWidgetRenderer;
+    const renderWidget = (_m = options.renderWidget) !== null && _m !== void 0 ? _m : defaultWidgetRenderer;
     // -- runtime: ONE shared handle over a boxed context -----------------------
     // The two MUTABLE cells the handle used to close over as free `let`s —
     // `active` (showView reassigns it) and `apiRef` (finalize sets it) — are boxed
@@ -600,37 +944,44 @@ export function dashboard(options) {
         rowHeight,
         boardW,
         boardH,
+        mode,
+        overflow,
+        layoutOf: new Map(views.map((v) => { var _a; return [v.id, (_a = v.layout) !== null && _a !== void 0 ? _a : layout]; })),
         optionsBase: options,
-        active: (_k = (_j = views[0]) === null || _j === void 0 ? void 0 : _j.id) !== null && _k !== void 0 ? _k : 'main',
+        active: (_p = (_o = views[0]) === null || _o === void 0 ? void 0 : _o.id) !== null && _p !== void 0 ? _p : 'main',
         apiRef: null,
+        onLayoutChange: options.onLayoutChange,
     };
     const { binders, groups } = ctx;
     const handle = createDashboardHandle(ctx);
-    return {
-        nodes,
-        edges: [],
-        renderCustomNode: (node, host) => {
+    return Object.assign(Object.assign({ nodes, edges: [] }, (mode === 'fluid' ? { renderOptions: { minZoom: 1, maxZoom: 1 } } : {})), { renderCustomNode: (node, host) => {
             const n = node;
             const spec = specById.get(n.id);
             if (!spec)
                 return;
             ctx.hosts.set(n.id, host);
             renderWidget(spec, host);
-        },
-        get handle() {
+        }, get handle() {
             return handle;
-        },
-        finalize: (api) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        }, finalize: (api) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const a = api;
             if (!a)
                 return;
             ctx.apiRef = a;
             const model = a.getModel();
+            // FLUID: the board starts at the container's box when it can be measured
+            // (the binder keeps it there); the authored defaults only fill in for a
+            // container with no size yet.
+            const box = mode === 'fluid'
+                ? { w: ((_a = a.container) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, h: ((_b = a.container) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0 }
+                : { w: 0, h: 0 };
+            const viewW = (v) => { var _a; return (mode === 'fluid' && box.w > 0 ? box.w : (_a = v.width) !== null && _a !== void 0 ? _a : boardW); };
+            const viewH = (v) => { var _a; return (mode === 'fluid' && box.h > 0 ? box.h : (_a = v.height) !== null && _a !== void 0 ? _a : boardH); };
             for (const v of views) {
                 // One board per view; the group is a pure LAYOUT CONTAINER, so its
                 // chrome is suppressed (frameChrome) exactly as a dashboard needs.
-                const g = new GroupModel({ id: v.id, name: (_a = v.name) !== null && _a !== void 0 ? _a : v.id });
+                const g = new GroupModel({ id: v.id, name: (_c = v.name) !== null && _c !== void 0 ? _c : v.id });
                 model.addGroup(g);
                 g.setMetadata('frameChrome', 'none');
                 // THE BOARD'S GEOMETRY, PERSISTED. Cells alone do not describe a board:
@@ -640,28 +991,72 @@ export function dashboard(options) {
                 // reload would be a picture of a dashboard rather than a dashboard.
                 // Serializable values only: the binder's callbacks belong to the app.
                 g.setMetadata('dashboardBoard', {
-                    columns: (_b = v.columns) !== null && _b !== void 0 ? _b : columns,
+                    columns: (_d = v.columns) !== null && _d !== void 0 ? _d : columns,
                     gap,
                     padding: gap,
-                    sizing: (_c = options.sizing) !== null && _c !== void 0 ? _c : 'fit',
+                    sizing,
                     baseRowHeight: rowHeight,
-                    designHeight: (_d = v.height) !== null && _d !== void 0 ? _d : boardH,
+                    designHeight: viewH(v),
                     float: (_e = options.float) !== null && _e !== void 0 ? _e : false,
                     rtl: (_f = options.rtl) !== null && _f !== void 0 ? _f : false,
+                    fluid: mode === 'fluid',
+                    overflow,
+                    static: (_g = options.static) !== null && _g !== void 0 ? _g : false,
+                    layout: (_h = ctx.layoutOf.get(v.id)) !== null && _h !== void 0 ? _h : layout,
                 });
-                g.size = { width: (_g = v.width) !== null && _g !== void 0 ? _g : boardW, height: (_h = v.height) !== null && _h !== void 0 ? _h : boardH, depth: 0 };
+                if (((_j = ctx.layoutOf.get(v.id)) !== null && _j !== void 0 ? _j : layout) === 'split' && v.tree !== undefined)
+                    g.setMetadata(SPLIT_TREE_KEY, v.tree);
+                g.size = { width: viewW(v), height: viewH(v), depth: 0 };
                 g.position = { x: v.id === ctx.active ? 0 : OFFSCREEN_X, y: 0 };
                 groups.set(v.id, g);
                 ctx.boardGroups.set(v.id, g);
                 mountBoard(v.id, v.id, v.widgets, g);
-                binders.set(v.id, bindDashboardGrid(a, g, Object.assign(Object.assign(Object.assign({ columns: (_j = v.columns) !== null && _j !== void 0 ? _j : columns, gap, padding: gap, sizing: (_k = options.sizing) !== null && _k !== void 0 ? _k : 'fit', baseRowHeight: rowHeight, designHeight: (_l = v.height) !== null && _l !== void 0 ? _l : boardH, float: (_m = options.float) !== null && _m !== void 0 ? _m : false, rtl: (_o = options.rtl) !== null && _o !== void 0 ? _o : false }, (options.responsive ? { responsive: options.responsive } : {})), ((_p = options.binder) !== null && _p !== void 0 ? _p : {})), { onGesture: (e) => {
-                        var _a, _b;
-                        if (e.type === 'commit')
-                            reportLayoutChange(v.id);
-                        (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                    } })));
+                binders.set(v.id, bindView(v, g, (_k = ctx.layoutOf.get(v.id)) !== null && _k !== void 0 ? _k : layout));
             }
+            // LIVE LAYOUT SWITCH (setLayout): keep the picture, swap the binder.
+            // Either way the outgoing binder's cells are written where the grid
+            // binder reads members' cells (gridItem metadata): grid → split derives
+            // its tree from exactly those, so any stale tree is cleared first;
+            // split → grid rebuilds from them, so the column cache goes too.
+            ctx.rebindView = (viewId, next) => {
+                var _a;
+                const v = views.find((x) => x.id === viewId);
+                const g = groups.get(viewId);
+                const b = binders.get(viewId);
+                if (!v || !g || !b)
+                    return;
+                const cells = b.saveLayout().cells;
+                b.dispose();
+                const write = (fn) => (model.runSystemWrite ? model.runSystemWrite(fn) : fn());
+                write(() => {
+                    var _a, _b;
+                    for (const [id, cell] of cells) {
+                        const n = model.getNode(id);
+                        if (n)
+                            n.setMetadata('gridItem', gridItemFromCell(cell));
+                        else
+                            (_a = model.getGroup(id)) === null || _a === void 0 ? void 0 : _a.setMetadata('gridItem', gridItemFromCell(cell));
+                    }
+                    g.setMetadata(SPLIT_TREE_KEY, undefined);
+                    g.setMetadata('dashboardLayouts', undefined);
+                    const board = (_b = g.getMetadata('dashboardBoard')) !== null && _b !== void 0 ? _b : {};
+                    g.setMetadata('dashboardBoard', Object.assign(Object.assign({}, board), { layout: next }));
+                });
+                ctx.layoutOf.set(viewId, next);
+                binders.set(viewId, bindView(v, g, next));
+                (_a = binders.get(viewId)) === null || _a === void 0 ? void 0 : _a.sync();
+            };
             handle.showView(ctx.active);
+            ctx.rebindContainer = (id) => {
+                var _a;
+                const g = model.getGroup(id);
+                const w = specById.get(id);
+                if (!g || !w || !w.widgets)
+                    return;
+                ctx.boardGroups.set(id, g);
+                bindContainer(g, w, (_a = ctx.viewOfBoard.get(id)) !== null && _a !== void 0 ? _a : ctx.active);
+            };
+            (_l = ctx.attachHistory) === null || _l === void 0 ? void 0 : _l.call(ctx);
             return;
             /**
              * Mount one board's widgets into its group — and recurse for CONTAINERS.
@@ -673,7 +1068,7 @@ export function dashboard(options) {
              * hit-testing and the height-escalation ratchet all apply unchanged.
              */
             function mountBoard(boardId, viewId, widgets, boardGroup) {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d, _e;
                 for (const w of widgets) {
                     if (w.widgets) {
                         const innerColumns = innerColumnsOf(w);
@@ -704,23 +1099,7 @@ export function dashboard(options) {
                         boardGroup.addMember(w.id);
                         ctx.boardGroups.set(w.id, cg);
                         mountBoard(w.id, viewId, w.widgets, cg);
-                        binders.set(w.id, bindDashboardGrid(a, cg, {
-                            columns: innerColumns,
-                            gap,
-                            padding: 0,
-                            sizing: 'fit',
-                            baseRowHeight: rowHeight,
-                            designHeight: 0,
-                            maxRows: innerRows,
-                            float: false,
-                            rtl: (_d = options.rtl) !== null && _d !== void 0 ? _d : false,
-                            onGesture: (e) => {
-                                var _a, _b;
-                                if (e.type === 'commit')
-                                    reportLayoutChange(viewId);
-                                (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                            },
-                        }));
+                        bindContainer(cg, w, viewId);
                         continue;
                     }
                     const n = model.getNode(w.id);
@@ -734,7 +1113,7 @@ export function dashboard(options) {
                     // and made toJSON() → dashboard() NOT round-trip (a saved layout
                     // rebuilt back into its declaration order rather than its cells).
                     if (w.x !== undefined && w.y !== undefined) {
-                        n.setGridItem(gridItemFromCell({ x: w.x, y: w.y, w: (_e = w.span) !== null && _e !== void 0 ? _e : 3, h: (_f = w.rows) !== null && _f !== void 0 ? _f : 1 }));
+                        n.setGridItem(gridItemFromCell({ x: w.x, y: w.y, w: (_d = w.span) !== null && _d !== void 0 ? _d : 3, h: (_e = w.rows) !== null && _e !== void 0 ? _e : 1 }));
                     }
                     if (w.pinned)
                         n.setState({ locked: true });
@@ -751,22 +1130,54 @@ export function dashboard(options) {
                     boardGroup.addMember(w.id);
                 }
             }
+            /** Bind a VIEW's board on its group, under the given layout. */
+            function bindView(v, g, viewLayout) {
+                var _a, _b, _c, _d, _e, _f;
+                const common = Object.assign(Object.assign({ gap, padding: gap, rtl: (_a = options.rtl) !== null && _a !== void 0 ? _a : false, fluid: mode === 'fluid', static: (_b = options.static) !== null && _b !== void 0 ? _b : false }, ((_c = options.binder) !== null && _c !== void 0 ? _c : {})), { onGesture: (e) => {
+                        var _a, _b;
+                        if (e.type === 'commit')
+                            reportChanged();
+                        (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    } });
+                if (viewLayout === 'split') {
+                    return bindDashboardSplit(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_d = v.columns) !== null && _d !== void 0 ? _d : columns, baseRowHeight: rowHeight, designHeight: viewH(v) }), (v.tree !== undefined ? { tree: v.tree } : {})));
+                }
+                return bindDashboardGrid(a, g, Object.assign(Object.assign(Object.assign({}, common), { columns: (_e = v.columns) !== null && _e !== void 0 ? _e : columns, sizing, baseRowHeight: rowHeight, designHeight: viewH(v), float: (_f = options.float) !== null && _f !== void 0 ? _f : false, overflow }), (options.responsive ? { responsive: options.responsive } : {})));
+            }
+            /** Bind (or re-bind) a container's inner grid on its group. */
+            function bindContainer(cg, w, viewId) {
+                var _a, _b, _c, _d;
+                binders.set(w.id, bindDashboardGrid(a, cg, {
+                    columns: innerColumnsOf(w),
+                    gap,
+                    padding: 0,
+                    sizing: 'fit',
+                    baseRowHeight: rowHeight,
+                    designHeight: 0,
+                    maxRows: (_a = w.maxRows) !== null && _a !== void 0 ? _a : rowExtentOf((_b = w.widgets) !== null && _b !== void 0 ? _b : []),
+                    float: false,
+                    rtl: (_c = options.rtl) !== null && _c !== void 0 ? _c : false,
+                    static: (_d = options.static) !== null && _d !== void 0 ? _d : false,
+                    onGesture: (e) => {
+                        var _a, _b;
+                        if (e.type === 'commit')
+                            reportChanged();
+                        (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    },
+                }));
+            }
             /**
              * One reporter for every binder on a view — the view's own and each
-             * container's. The payload is the view's FULL NESTED TREE derived from
-             * live membership (handle.toJSON()), so an inner commit reports the same
-             * truth an outer one does, and a tile that crossed a boundary shows up
-             * under its NEW parent. (The old per-view lookup found nothing for a
-             * container binder and silently reported nothing.)
+             * container's — and for every API call, undo and redo (D3): the handle's
+             * diff-based `reportChanged`. The payload is the view's FULL NESTED TREE
+             * derived from live membership (handle.toJSON()), so an inner commit
+             * reports the same truth an outer one does, and a tile that crossed a
+             * boundary shows up under its NEW parent.
              */
-            function reportLayoutChange(viewId) {
-                if (!options.onLayoutChange)
-                    return;
-                const snapshot = handle.toJSON().views.find((x) => x.id === viewId);
-                if (snapshot)
-                    options.onLayoutChange(viewId, snapshot.widgets);
+            function reportChanged() {
+                var _a;
+                (_a = ctx.reportChanged) === null || _a === void 0 ? void 0 : _a.call(ctx);
             }
-        },
-    };
+        } });
 }
 //# sourceMappingURL=dashboard.js.map