@grafloria/element 0.4.1 → 0.4.3

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,
@@ -129,15 +229,52 @@ function buildWidgetNode(w, rowHeight) {
         node.removePort(p.id);
     return node;
 }
+function cloneWidgets(ws) {
+    return ws.map((w) => (Object.assign(Object.assign({}, w), (w.widgets ? { widgets: cloneWidgets(w.widgets) } : {}))));
+}
+/** A container's inner column count: authored, else its own span — inner cells
+ *  then ride the parent's column rhythm, which is what a section reads as. */
+function innerColumnsOf(w) {
+    var _a, _b;
+    return Math.max(1, (_b = (_a = w.columns) !== null && _a !== void 0 ? _a : w.span) !== null && _b !== void 0 ? _b : 3);
+}
+/** The row extent of a laid-out widget list (the inner grid's design height). */
+function rowExtentOf(widgets) {
+    var _a, _b;
+    let max = 1;
+    for (const w of widgets)
+        max = Math.max(max, ((_a = w.y) !== null && _a !== void 0 ? _a : 0) + ((_b = w.rows) !== null && _b !== void 0 ? _b : 1));
+    return max;
+}
+/** Recursive `assignCells`: a container flows in its parent like any widget,
+ *  and its children flow inside its OWN column count. */
+function assignCellsDeep(widgets, columns) {
+    assignCells(widgets, columns);
+    for (const w of widgets) {
+        if (w.widgets)
+            assignCellsDeep(w.widgets, innerColumnsOf(w));
+    }
+}
 /** 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;
@@ -161,6 +298,175 @@ 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
+     * (and undo moves it back); the authored arrays do not follow. Deriving from
+     * the groups + engines is what makes toJSON() and onLayoutChange report a
+     * tile under the container it is actually in, in every one of those states.
+     */
+    const treeOf = (boardId) => {
+        var _a, _b, _c, _d;
+        const g = ctx.boardGroups.get(boardId);
+        const b = binders.get(boardId);
+        if (!g)
+            return [];
+        // Cells from the binder's serialisation (largest cached layout — the
+        // saving-on-a-phone rule), falling back to the live engine cell.
+        const saved = b === null || b === void 0 ? void 0 : b.saveLayout();
+        const cellOf = (id) => { var _a; return (_a = saved === null || saved === void 0 ? void 0 : saved.cells.get(id)) !== null && _a !== void 0 ? _a : b === null || b === void 0 ? void 0 : b.cellOf(id); };
+        const entries = [];
+        for (const memberId of (_a = g.members) !== null && _a !== void 0 ? _a : []) {
+            const spec = specById.get(memberId);
+            const cell = cellOf(memberId);
+            const at = cell ? { x: cell.x, y: cell.y, span: cell.w, rows: cell.h } : {};
+            if (ctx.boardGroups.has(memberId)) {
+                entries.push(Object.assign(Object.assign(Object.assign({ id: memberId }, (spec !== null && spec !== void 0 ? spec : {})), at), { widgets: treeOf(memberId) }));
+            }
+            else if (spec) {
+                // `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 {
@@ -181,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;
@@ -193,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);
@@ -205,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) {
@@ -225,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) {
@@ -234,29 +554,43 @@ 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;
-            const v = views.find((x) => x.id === vid);
+            // `vid` may name a view OR a container — both are boards with a group,
+            // a binder and an authored array.
+            const arr = ctx.boardWidgets.get(vid);
             const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
-            const group = groups.get(vid);
-            if (!v || !model || !group)
+            const group = ctx.boardGroups.get(vid);
+            if (!arr || !model || !group)
                 return undefined;
             const w = Object.assign(Object.assign({}, spec), { id: spec.id || `w-${++autoId}`, span: (_b = spec.span) !== null && _b !== void 0 ? _b : 3, rows: (_c = spec.rows) !== null && _c !== void 0 ? _c : 1 });
             // 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.
-            v.widgets.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() {
@@ -266,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;
@@ -292,9 +623,16 @@ export function createDashboardHandle(ctx) {
             ids.add(id);
             // Read the SPEC, not the group's member Set: membership is maintained by
             // commands and an in-flight drag can have a widget momentarily reparented.
-            // The spec is what the view IS.
-            for (const w of (_b = (_a = views.find((v) => v.id === id)) === null || _a === void 0 ? void 0 : _a.widgets) !== null && _b !== void 0 ? _b : [])
-                ids.add(w.id);
+            // The spec is what the view IS. Containers add themselves AND their
+            // subtree — an exported container without its children is an empty frame.
+            const walk = (ws) => {
+                for (const w of ws) {
+                    ids.add(w.id);
+                    if (w.widgets)
+                        walk(w.widgets);
+                }
+            };
+            walk((_b = (_a = views.find((v) => v.id === id)) === null || _a === void 0 ? void 0 : _a.widgets) !== null && _b !== void 0 ? _b : []);
             return ids;
         },
         toJSON() {
@@ -304,31 +642,49 @@ 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;
+                var _a, _b, _c, _d, _e;
                 const saved = (_a = binders.get(v.id)) === null || _a === void 0 ? void 0 : _a.saveLayout();
-                return Object.assign(Object.assign(Object.assign({}, v), (saved ? { columns: saved.columns } : {})), { widgets: v.widgets.map((w) => {
-                        var _a, _b;
-                        const cell = (_a = saved === null || saved === void 0 ? void 0 : saved.cells.get(w.id)) !== null && _a !== void 0 ? _a : (_b = binders.get(v.id)) === null || _b === void 0 ? void 0 : _b.cellOf(w.id);
-                        return cell ? Object.assign(Object.assign({}, w), { x: cell.x, y: cell.y, span: cell.w, rows: cell.h }) : Object.assign({}, w);
-                    }) });
+                const live = treeOf(v.id);
+                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 || ((_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;
+            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())
+                (_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())
-                (_b = model === null || model === void 0 ? void 0 : model.removeGroup) === null || _b === void 0 ? void 0 : _b.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();
         },
     };
@@ -377,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;
@@ -406,9 +770,59 @@ 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 (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();
-                const group = groups.get(viewId);
+                const group = ctx.boardGroups.get(viewId);
                 const b = binder();
                 if (!n || !group || !b)
                     return;
@@ -417,16 +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 v = views.find((x) => x.id === viewId);
-                if (v)
-                    v.widgets = v.widgets.filter((w) => w.id !== id);
-                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);
@@ -440,40 +859,69 @@ export function createDashboardHandle(ctx) {
     return handle;
 }
 export function dashboard(options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    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: v.widgets.map((w) => (Object.assign({}, w))) })))
-        : [{ id: 'main', widgets: ((_f = options.widgets) !== null && _f !== void 0 ? _f : []).map((w) => (Object.assign({}, w))) }];
+        ? options.views.map((v) => (Object.assign(Object.assign({}, v), { widgets: cloneWidgets(v.widgets) })))
+        : [{ id: 'main', widgets: cloneWidgets((_k = options.widgets) !== null && _k !== void 0 ? _k : []) }];
     for (const v of views)
-        assignCells(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();
     const viewOfWidget = new Map();
-    for (const v of views) {
-        for (const w of v.widgets) {
+    const boardWidgets = new Map();
+    const viewOfBoard = new Map();
+    // Recursive walk: a CONTAINER contributes no node (it becomes a group in
+    // finalize) but registers like a widget, and its children flatten into the
+    // render spec with the container as their board.
+    const flatten = (boardId, viewId, widgets) => {
+        for (const w of widgets) {
             specById.set(w.id, w);
-            viewOfWidget.set(w.id, v.id);
+            viewOfWidget.set(w.id, boardId);
+            if (w.widgets) {
+                boardWidgets.set(w.id, w.widgets);
+                viewOfBoard.set(w.id, viewId);
+                flatten(w.id, viewId, w.widgets);
+                continue;
+            }
+            pushWidgetNode(w);
+        }
+    };
+    const pushWidgetNode = (w) => {
+        var _a, _b;
+        {
             nodes.push({
                 id: w.id,
                 type: 'widget',
                 position: { x: 0, y: 0 },
                 size: { width: 100, height: rowHeight },
                 custom: true,
-                metadata: Object.assign(Object.assign({ useHTMLLayer: true, widgetKind: (_h = w.kind) !== null && _h !== void 0 ? _h : 'widget', widgetSpec: (_j = w.data) !== null && _j !== void 0 ? _j : {} }, (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 } }),
             });
         }
+    };
+    for (const v of views) {
+        boardWidgets.set(v.id, v.widgets);
+        viewOfBoard.set(v.id, v.id);
+        flatten(v.id, v.id, v.widgets);
     }
     // 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 = (_k = options.renderWidget) !== null && _k !== void 0 ? _k : 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
@@ -486,6 +934,9 @@ export function dashboard(options) {
         binders: new Map(),
         specById,
         viewOfWidget,
+        boardGroups: new Map(),
+        boardWidgets,
+        viewOfBoard,
         hosts: new Map(),
         renderWidget,
         columns,
@@ -493,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: (_m = (_l = views[0]) === null || _l === void 0 ? void 0 : _l.id) !== null && _m !== void 0 ? _m : '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, _q, _r;
+        }, 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:
@@ -533,19 +991,117 @@ 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);
-                for (const w of v.widgets) {
+                ctx.boardGroups.set(v.id, g);
+                mountBoard(v.id, v.id, v.widgets, g);
+                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.
+             * A container is a view's construction one level down: a frameless
+             * member group with a slab cell in the PARENT's grid, its own
+             * `dashboardBoard` metadata (so `fromDocument()` rebinds it like any
+             * board), and a second `bindDashboardGrid` on the same canvas — which
+             * registers it as a BinderPeer, so cross-boundary drag, deepest-wins
+             * hit-testing and the height-escalation ratchet all apply unchanged.
+             */
+            function mountBoard(boardId, viewId, widgets, boardGroup) {
+                var _a, _b, _c, _d, _e;
+                for (const w of widgets) {
+                    if (w.widgets) {
+                        const innerColumns = innerColumnsOf(w);
+                        const innerRows = (_a = w.maxRows) !== null && _a !== void 0 ? _a : rowExtentOf(w.widgets);
+                        const cg = new GroupModel({ id: w.id, name: (_b = w.title) !== null && _b !== void 0 ? _b : w.id });
+                        model.addGroup(cg);
+                        cg.setMetadata('frameChrome', 'none');
+                        // Slab cells live in GROUP metadata (groups carry no GridItemConfig).
+                        cg.setMetadata('gridItem', gridItemFromCell({ x: w.x, y: w.y, w: w.span, h: w.rows }));
+                        // The container's own spec fields, persisted ON the group — a
+                        // reloaded document has no authored literal to read them from.
+                        cg.setMetadata('containerWidget', Object.assign(Object.assign(Object.assign(Object.assign({}, (w.kind !== undefined ? { kind: w.kind } : {})), (w.title !== undefined ? { title: w.title } : {})), { columns: innerColumns, maxRows: innerRows }), (w.data !== undefined ? { data: w.data } : {})));
+                        cg.setMetadata('dashboardBoard', {
+                            columns: innerColumns,
+                            gap,
+                            padding: 0,
+                            sizing: 'fit',
+                            baseRowHeight: rowHeight,
+                            // The slab's height is the PARENT's business — 0 hands it over,
+                            // which is what makes escalation grow the slab instead of the
+                            // container fighting its own frame.
+                            designHeight: 0,
+                            maxRows: innerRows,
+                            float: false,
+                            rtl: (_c = options.rtl) !== null && _c !== void 0 ? _c : false,
+                        });
+                        cg.size = { width: 100, height: rowHeight, depth: 0 };
+                        boardGroup.addMember(w.id);
+                        ctx.boardGroups.set(w.id, cg);
+                        mountBoard(w.id, viewId, w.widgets, cg);
+                        bindContainer(cg, w, viewId);
+                        continue;
+                    }
                     const n = model.getNode(w.id);
                     if (!n)
                         continue;
@@ -557,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: (_j = w.span) !== null && _j !== void 0 ? _j : 3, h: (_k = w.rows) !== null && _k !== void 0 ? _k : 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 });
@@ -571,20 +1127,57 @@ export function dashboard(options) {
                     n.setBehavior({ connectable: false });
                     for (const p of [...n.getPorts().values()])
                         n.removePort(p.id);
-                    g.addMember(w.id);
+                    boardGroup.addMember(w.id);
                 }
-                binders.set(v.id, bindDashboardGrid(a, g, Object.assign(Object.assign(Object.assign({ columns: (_l = v.columns) !== null && _l !== void 0 ? _l : columns, gap, padding: gap, sizing: (_m = options.sizing) !== null && _m !== void 0 ? _m : 'fit', baseRowHeight: rowHeight, designHeight: (_o = v.height) !== null && _o !== void 0 ? _o : boardH, float: (_p = options.float) !== null && _p !== void 0 ? _p : false, rtl: (_q = options.rtl) !== null && _q !== void 0 ? _q : false }, (options.responsive ? { responsive: options.responsive } : {})), ((_r = options.binder) !== null && _r !== void 0 ? _r : {})), { onGesture: (e) => {
+            }
+            /** 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' && options.onLayoutChange) {
-                            const snapshot = handle.toJSON().views.find((x) => x.id === v.id);
-                            if (snapshot)
-                                options.onLayoutChange(v.id, snapshot.widgets);
-                        }
+                        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 } : {})));
             }
-            handle.showView(ctx.active);
-        },
-    };
+            /** 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 — 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 reportChanged() {
+                var _a;
+                (_a = ctx.reportChanged) === null || _a === void 0 ? void 0 : _a.call(ctx);
+            }
+        } });
 }
 //# sourceMappingURL=dashboard.js.map