@grafloria/element 0.3.18 → 0.3.20

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

@@ -0,0 +1,590 @@
+/**
+ * `dashboard({ views, widgets })` — the DATA-FIRST dashboard authoring API.
+ *
+ * The exact shape `erDiagram()` / `umlDiagram()` have for ER and UML: you
+ * describe WHAT the dashboard is, `render()` runs the returned `finalize(api)`
+ * automatically, and every interactive part (the pack grid, drag/resize with
+ * live push and a truthful placeholder, fit/grow, float, pin, undoable
+ * commands) wires itself.
+ *
+ * Before this, a developer got `bindDashboardGrid()` — a gesture BINDER one
+ * layer down — and had to hand-assemble everything above it: a GroupModel per
+ * view, a NodeModel per widget, `useHTMLLayer` / `widgetKind` metadata, grid
+ * cells, membership, then the bind. The demo page needed ~143 lines just to
+ * build its boards. That was the missing authoring layer; this is it:
+ *
+ * ```js
+ * const SPEC = dashboard({
+ *   columns: 12,
+ *   sizing: 'fit',
+ *   views: [{
+ *     id: 'overview', name: 'Overview',
+ *     widgets: [
+ *       { id: 'rev',   kind: 'kpi',   span: 3, rows: 1, data: {…} },
+ *       { id: 'trend', kind: 'line',  span: 8, rows: 2, data: {…} },
+ *       { id: 'mix',   kind: 'donut', span: 4, rows: 2, pinned: true },
+ *     ],
+ *   }],
+ *   renderWidget: (widget, host) => { … },   // optional: your charts
+ * });
+ * render(SPEC, host);
+ * ```
+ *
+ * WHAT IT DELIBERATELY DOES NOT DO: pick a charting library. `renderWidget` is
+ * the seam — the kit hands you the widget and a raw HTML host (the renderer's
+ * custom-node path, which unlike `metadata.html` is not sanitised, so real
+ * `<svg>`/`<canvas>` is fine). Omit it and `defaultWidgetRenderer` (widgets.ts)
+ * draws the declared `kind` from your own `data` with hand-rolled inline SVG —
+ * kpi / line / bar / donut / funnel / table, no dependency, no sample dataset —
+ * falling back to a titled frame for kinds it does not know, so a layout is
+ * testable before any chart exists.
+ *
+ * Cells are the truth and live in the existing `GridItemConfig`, so save/load
+ * 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 { bindDashboardGrid, } from './grid-binder';
+import { gridItemFromCell } from './grid-mapping';
+import { ensureDashboardKitStyles } from './styles';
+import { defaultWidgetRenderer } from './widgets';
+/**
+ * Add a widget node AND its board membership as ONE undoable step.
+ *
+ * A `BatchCommand([AddNodeCommand, AddToGroupCommand])` cannot express this:
+ * the manager validates the whole batch up front, and
+ * `AddToGroupCommand.canExecute` pre-gates on the node ALREADY being in the
+ * diagram — which it is not until the first command runs. Sequencing two
+ * commands works but costs two undo steps, so an interactive "add widget"
+ * would need two Ctrl-Z. This composite does both in its own execute(), and
+ * unwinds both in undo().
+ */
+class AddWidgetCommand extends Command {
+    constructor(node, groupId) {
+        super('Add widget');
+        this.node = node;
+        this.groupId = groupId;
+    }
+    execute(context) {
+        var _a;
+        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);
+    }
+    undo(context) {
+        var _a;
+        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);
+    }
+    serialize() {
+        return {
+            id: this.id,
+            name: this.name,
+            timestamp: this.timestamp,
+            data: { nodeId: this.node.id, groupId: this.groupId },
+        };
+    }
+}
+const DEFAULTS = { columns: 12, gap: 8, rowHeight: 130, width: 1180, height: 660 };
+const OFFSCREEN_X = -20000;
+let autoId = 0;
+/** The node a widget spec becomes — one place, so addWidget() and the initial
+ *  spec build can never drift apart on metadata. */
+function buildWidgetNode(w, rowHeight) {
+    var _a, _b, _c, _d, _e, _f;
+    const node = new NodeModel({
+        id: w.id,
+        type: 'widget',
+        position: { x: 0, y: 0 },
+        size: { width: 120, height: rowHeight, depth: 0 },
+    });
+    node.setMetadata('useHTMLLayer', true);
+    node.setMetadata('widgetKind', (_a = w.kind) !== null && _a !== void 0 ? _a : 'widget');
+    node.setMetadata('widgetSpec', (_b = w.data) !== null && _b !== void 0 ? _b : {});
+    // The TITLE was the one authored field that never reached the node — so a
+    // document-level reload rebuilt every card with `titleOf()` falling through to
+    // the kind, and a board of "Revenue vs target" / "Top reps by revenue" came
+    // back as "line" / "table". Only written when authored, so an untitled widget
+    // serialises exactly as it always did.
+    if (w.title !== undefined)
+        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);
+    if (w.x !== undefined && w.y !== undefined) {
+        node.setGridItem({
+            columnStart: w.x + 1,
+            columnEnd: w.x + 1 + ((_e = w.span) !== null && _e !== void 0 ? _e : 3),
+            rowStart: w.y + 1,
+            rowEnd: w.y + 1 + ((_f = w.rows) !== null && _f !== void 0 ? _f : 1),
+        });
+    }
+    // A dashboard widget is not a wiring endpoint: no ports, no hover glyphs.
+    node.setBehavior({ connectable: false });
+    for (const p of [...node.getPorts().values()])
+        node.removePort(p.id);
+    return node;
+}
+/** Flow widgets that declared no cell: left-to-right, wrapping at `columns`. */
+function assignCells(widgets, columns) {
+    var _a, _b;
+    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);
+        if (w.x === undefined || w.y === undefined) {
+            if (x + span > columns) {
+                x = 0;
+                y += rowMax || 1;
+                rowMax = 0;
+            }
+            w.x = x;
+            w.y = y;
+            x += span;
+            rowMax = Math.max(rowMax, rows);
+        }
+        w.span = span;
+        w.rows = rows;
+    }
+}
+/**
+ * Build THE `DashboardHandle` — the one and only implementation, shared by
+ * `dashboard()` and `fromDocument()`. Reads/writes the mutable `ctx.active` /
+ * `ctx.apiRef` cells so the caller's finalize can wire the API in afterwards.
+ */
+export function createDashboardHandle(ctx) {
+    const { views, groups, binders, specById, viewOfWidget } = ctx;
+    const hostOf = (id) => ctx.hosts.get(id);
+    const execCommand = (cmd) => {
+        var _a, _b, _c, _d;
+        try {
+            const r = (_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.commandManager.execute(cmd);
+            // Fire-and-forget like the binder's own commits, but never leave an
+            // unhandled rejection: a refused command is a no-op, not a crash.
+            (_d = r === null || r === void 0 ? void 0 : r.catch) === null || _d === void 0 ? void 0 : _d.call(r, () => undefined);
+        }
+        catch (_e) {
+            /* a refused command must not break the caller */
+        }
+    };
+    const handle = {
+        get views() {
+            return views.map((v) => v.id);
+        },
+        get activeView() {
+            return ctx.active;
+        },
+        showView(id) {
+            var _a, _b, _c, _d, _e, _f;
+            if (!groups.has(id))
+                return;
+            ctx.active = id;
+            for (const [vid, g] of groups) {
+                const x = vid === id ? 0 : OFFSCREEN_X;
+                const s = (_a = g.size) !== null && _a !== void 0 ? _a : { width: ctx.boardW, height: ctx.boardH };
+                if (g.position.x !== x)
+                    g.setFrame({ x, y: 0, width: s.width, height: s.height });
+            }
+            (_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 });
+        },
+        widget(id) {
+            return makeWidgetHandle(id);
+        },
+        widgetsOf(viewId) {
+            var _a;
+            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);
+        },
+        setSizing(mode) {
+            var _a;
+            for (const b of binders.values())
+                b.setSizing(mode);
+            (_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'); },
+        setFloat(on) {
+            var _a;
+            for (const b of binders.values())
+                b.setFloat(on);
+            (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
+        },
+        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) {
+            var _a;
+            const targets = viewId ? [binders.get(viewId)] : [...binders.values()];
+            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();
+        },
+        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) {
+            var _a;
+            for (const b of binders.values())
+                b.setRtl(on);
+            (_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); },
+        addWidget(spec, viewId) {
+            var _a, _b, _c, _d, _e;
+            const vid = viewId !== null && viewId !== void 0 ? viewId : ctx.active;
+            const v = views.find((x) => x.id === vid);
+            const model = (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel();
+            const group = groups.get(vid);
+            if (!v || !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);
+            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();
+            return makeWidgetHandle(w.id);
+        },
+        refresh() {
+            var _a;
+            for (const b of binders.values())
+                b.sync();
+            (_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 });
+        },
+        metrics(viewId) {
+            var _a;
+            return (_a = binders.get(viewId !== null && viewId !== void 0 ? viewId : ctx.active)) === null || _a === void 0 ? void 0 : _a.metrics();
+        },
+        binderOf(viewId) {
+            return binders.get(viewId !== null && viewId !== void 0 ? viewId : ctx.active);
+        },
+        exportIds(viewId) {
+            var _a, _b;
+            const id = viewId !== null && viewId !== void 0 ? viewId : ctx.active;
+            const ids = new Set();
+            // A view with no group is a view that was never finalized — an empty set
+            // is the honest answer, and scoping an export to nothing is a visible
+            // failure rather than a silently enormous document.
+            if (!groups.has(id))
+                return ids;
+            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);
+            return ids;
+        },
+        toJSON() {
+            // SAVING ON A PHONE SAVES THE DESKTOP LAYOUT. The binder serialises from
+            // the engine's LARGEST cached column count (gridstack's `save()`), so a
+            // board currently squeezed to 1 column still writes out the 12-column
+            // 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;
+                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);
+                    }) });
+            });
+            // 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 });
+        },
+        dispose() {
+            var _a, _b;
+            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();
+            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);
+            groups.clear();
+            ctx.hosts.clear();
+        },
+    };
+    function makeWidgetHandle(id) {
+        const spec = specById.get(id);
+        const viewId = viewOfWidget.get(id);
+        if (!spec || !viewId)
+            return undefined;
+        const binder = () => binders.get(viewId);
+        const node = () => { var _a; return (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.getModel().getNode(id); };
+        return {
+            id,
+            viewId,
+            get node() {
+                return node();
+            },
+            get spec() {
+                return spec;
+            },
+            get cell() {
+                var _a;
+                return (_a = binder()) === null || _a === void 0 ? void 0 : _a.cellOf(id);
+            },
+            get rect() {
+                var _a;
+                return (_a = binder()) === null || _a === void 0 ? void 0 : _a.cellRectOf(id);
+            },
+            get pinned() {
+                var _a, _b;
+                return ((_b = (_a = node()) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.locked) === true;
+            },
+            resize(span, rows) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    var _a, _b;
+                    return (_b = (yield ((_a = binder()) === null || _a === void 0 ? void 0 : _a.resizeTo(id, span, rows)))) !== null && _b !== void 0 ? _b : false;
+                });
+            },
+            moveTo(x, y) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    var _a, _b;
+                    return (_b = (yield ((_a = binder()) === null || _a === void 0 ? void 0 : _a.moveTo(id, x, y)))) !== null && _b !== void 0 ? _b : false;
+                });
+            },
+            pin(on) {
+                var _a, _b, _c;
+                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) });
+                // 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();
+            },
+            bringToFront() {
+                var _a;
+                execCommand(new BringNodeToFrontCommand(id));
+                (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
+            },
+            sendToBack() {
+                var _a;
+                execCommand(new SendNodeToBackCommand(id));
+                (_a = ctx.apiRef) === null || _a === void 0 ? void 0 : _a.renderNow();
+            },
+            update(patch) {
+                if (patch.data !== undefined)
+                    spec.data = patch.data;
+                if (patch.title !== undefined)
+                    spec.title = patch.title;
+                if (patch.kind !== undefined)
+                    spec.kind = patch.kind;
+                const host = hostOf(id);
+                if (host)
+                    ctx.renderWidget(spec, host);
+            },
+            remove(displaced) {
+                var _a, _b;
+                const n = node();
+                const group = groups.get(viewId);
+                const b = binder();
+                if (!n || !group || !b)
+                    return;
+                // ONE undoable step, survivors' re-pack folded in — the same atomic
+                // shape the kit's own drag-out-to-remove uses. A gesture that ALREADY
+                // 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)];
+                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);
+                b.sync();
+                (_b = ctx.apiRef) === null || _b === void 0 ? void 0 : _b.renderNow();
+            },
+            repaint() {
+                const host = hostOf(id);
+                if (host)
+                    ctx.renderWidget(spec, host);
+            },
+            // (hosts are captured in renderCustomNode, so repaint works for every
+            //  widget the renderer has mounted — including after a rebuild.)
+        };
+    }
+    return handle;
+}
+export function dashboard(options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    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;
+    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))) }];
+    for (const v of views)
+        assignCells(v.widgets, (_g = v.columns) !== null && _g !== void 0 ? _g : 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) {
+            specById.set(w.id, w);
+            viewOfWidget.set(w.id, v.id);
+            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 } }),
+            });
+        }
+    }
+    // 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;
+    // -- 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
+    // on `ctx`, so the SAME builder that fromDocument() calls reads and writes
+    // them. Everything else is the stable state; the handle is identical to what
+    // was inline here, moved verbatim into createDashboardHandle().
+    const ctx = {
+        views,
+        groups: new Map(),
+        binders: new Map(),
+        specById,
+        viewOfWidget,
+        hosts: new Map(),
+        renderWidget,
+        columns,
+        gap,
+        rowHeight,
+        boardW,
+        boardH,
+        optionsBase: options,
+        active: (_m = (_l = views[0]) === null || _l === void 0 ? void 0 : _l.id) !== null && _m !== void 0 ? _m : 'main',
+        apiRef: null,
+    };
+    const { binders, groups } = ctx;
+    const handle = createDashboardHandle(ctx);
+    return {
+        nodes,
+        edges: [],
+        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() {
+            return handle;
+        },
+        finalize: (api) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            const a = api;
+            if (!a)
+                return;
+            ctx.apiRef = a;
+            const model = a.getModel();
+            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 });
+                model.addGroup(g);
+                g.setMetadata('frameChrome', 'none');
+                // THE BOARD'S GEOMETRY, PERSISTED. Cells alone do not describe a board:
+                // the column count, gap and sizing mode are what turn them into pixels,
+                // and they live only in the `dashboard()` call. Without them a reloaded
+                // document could paint the widgets but never rebind the grid — the
+                // 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,
+                    gap,
+                    padding: gap,
+                    sizing: (_c = options.sizing) !== null && _c !== void 0 ? _c : 'fit',
+                    baseRowHeight: rowHeight,
+                    designHeight: (_d = v.height) !== null && _d !== void 0 ? _d : boardH,
+                    float: (_e = options.float) !== null && _e !== void 0 ? _e : false,
+                    rtl: (_f = options.rtl) !== null && _f !== void 0 ? _f : false,
+                });
+                g.size = { width: (_g = v.width) !== null && _g !== void 0 ? _g : boardW, height: (_h = v.height) !== null && _h !== void 0 ? _h : boardH, 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) {
+                    const n = model.getNode(w.id);
+                    if (!n)
+                        continue;
+                    // DECLARED CELLS ARE AUTHORITATIVE. `metadata.gridItem` on the node
+                    // SPEC is inert — the model's GridItemConfig is a real field
+                    // (`setGridItem`), and it is the only thing the binder reads. Without
+                    // this write the board silently auto-positioned instead, which
+                    // matched the declaration only while flow order happened to agree,
+                    // 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 }));
+                    }
+                    if (w.pinned)
+                        n.setState({ locked: true });
+                    // A dashboard widget is not a wiring endpoint. This MUST happen here
+                    // rather than on the node spec: the render-input path IGNORES a
+                    // spec-level `behavior` (the same trap erDiagram documents for
+                    // `resizable`), so a DECLARED widget shipped connectable with four
+                    // default ports and sprouted glyphs on hover — while addWidget()'s
+                    // directly-built nodes were already correct. One path being right is
+                    // exactly what hid it, and why the tooth now covers both.
+                    n.setBehavior({ connectable: false });
+                    for (const p of [...n.getPorts().values()])
+                        n.removePort(p.id);
+                    g.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) => {
+                        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);
+                        }
+                        (_b = (_a = options.binder) === null || _a === void 0 ? void 0 : _a.onGesture) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    } })));
+            }
+            handle.showView(ctx.active);
+        },
+    };
+}
+//# sourceMappingURL=dashboard.js.map