@grafloria/element 0.4.2 → 0.4.3

package/src/lib/diagram-kit/card.js

@@ -81,6 +81,133 @@ export function entityAutoHeight(entity, editable = false) {
         return entity.height;
     return ER_HEAD_H + entity.columns.length * ER_ROW_H + ER_BORDER_SLACK + (editable ? ER_ADD_H : 0);
 }
+/* ---------------------------------------------------------------------------
+ * Card WIDTH — the half of the sizing contract that was missing.
+ *
+ * Height has always been derived from content (entityAutoHeight above), but
+ * width was a flat constant, so anything wider than the default simply fell off
+ * the card — and every one of those overflows was SILENT. Measured on the
+ * shipped demos: the ER head lost 125px of `A_VERY_LONG_TABLE_NAME…` with no
+ * ellipsis, `from_warehouse_id` needed 221px against the 190 it got, and a UML
+ * method signature needed 487px against 190 — 297px of it cut mid-glyph, on the
+ * one line of a class diagram that carries the actual information.
+ *
+ * So a card now sizes to its content in BOTH axes. The constants below mirror
+ * the stylesheet's box model exactly; if a rule there changes, change it here.
+ * ------------------------------------------------------------------------- */
+/** Horizontal padding shared by `.axk-row`, `.axk-entity-head`, `.axk-member`
+ *  and `.axk-uml-name` — all of them are `padding: Npx 10px`. */
+export const CARD_PAD_X = 20;
+/** `.axk-row`'s `gap: 8px`. */
+export const ER_ROW_GAP = 8;
+/** `.axk-key`'s fixed `width: 22px`. */
+export const ER_KEY_W = 22;
+/** `.axk-ty`'s `min-width: 52px` — it never measures narrower than its target. */
+export const ER_TYPE_MIN_W = 52;
+/** `.axk-col-del`'s `width: 14px` (present only when editable). */
+export const CARD_DEL_W = 14;
+/**
+ * Horizontal counterpart of ER_BORDER_SLACK: the html wrapper's padding
+ * (`html.padding ?? 4`, so 8px across) plus the card's own 1px left/right
+ * borders. The node's width is the OUTER box; the row only ever gets what is
+ * left after these, so a derived width that ignored them came out 10px short
+ * and truncated by a hair — which is exactly how it was first measured.
+ */
+export const CARD_SLACK_X = 10;
+/** Defaults, and the floor every derived width is taken against. */
+export const ER_DEFAULT_WIDTH = 190;
+export const UML_DEFAULT_WIDTH = 200;
+/**
+ * Ceiling for a DERIVED width. A card that sized itself to a pathological
+ * identifier would dominate the diagram, so past this the stylesheet's ellipsis
+ * takes over — visibly, which is the point — and an author who needs the whole
+ * string sets an explicit `width`. An explicit width is never clamped.
+ */
+export const CARD_MAX_AUTO_W = 420;
+/* The exact CSS fonts the stylesheet paints these strings with. */
+const FONT_COL = '12px system-ui, sans-serif';
+const FONT_COL_PK = '600 12px system-ui, sans-serif';
+const FONT_TYPE = '11px system-ui, sans-serif';
+const FONT_HEAD = '600 11px system-ui, sans-serif';
+const FONT_ADD = '600 11px system-ui, sans-serif';
+const FONT_MEMBER = '11px ui-monospace, Menlo, monospace';
+const FONT_UML_NAME = '700 12px system-ui, sans-serif';
+const FONT_UML_STEREO = '500 10px system-ui, sans-serif';
+/** `.axk-entity-head` is `letter-spacing: .3px`, which canvas does not apply. */
+const HEAD_TRACKING = 0.3;
+let measureCtx;
+const measureCache = new Map();
+/**
+ * Width of `text` in CSS pixels, as the browser will really lay it out.
+ *
+ * Canvas `measureText` was calibrated against live `getBoundingClientRect()`
+ * widths for these exact fonts and agreed to within 0.02px, which is what makes
+ * deriving a card's width from its content safe rather than a guess.
+ *
+ * Outside a browser (jsdom, SSR) there is no 2d context and this falls back to
+ * a per-character average. The fallback only has to be roughly right: it feeds
+ * a `Math.max` against the default width, and anything it underestimates is
+ * ellipsised by the stylesheet rather than lost.
+ */
+export function measureCardText(text, font, tracking = 0) {
+    var _a, _b;
+    if (!text)
+        return 0;
+    const key = `${font}\u0000${tracking}\u0000${text}`;
+    const hit = measureCache.get(key);
+    if (hit !== undefined)
+        return hit;
+    if (measureCtx === undefined) {
+        // Feature-DETECT rather than probe: jsdom defines CanvasRenderingContext2D
+        // only when node-canvas is installed, and calling getContext('2d') without
+        // it logs a "not implemented" through the virtual console on every suite.
+        measureCtx = null;
+        if (typeof document !== 'undefined' && typeof CanvasRenderingContext2D !== 'undefined') {
+            try {
+                measureCtx = document.createElement('canvas').getContext('2d');
+            }
+            catch (_c) {
+                measureCtx = null;
+            }
+        }
+    }
+    let width;
+    if (measureCtx) {
+        measureCtx.font = font;
+        width = measureCtx.measureText(text).width + tracking * text.length;
+    }
+    else {
+        const px = Number.parseFloat((_b = (_a = /(\d+(?:\.\d+)?)px/.exec(font)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '12');
+        width = text.length * (px * 0.55 + tracking);
+    }
+    measureCache.set(key, width);
+    return width;
+}
+/** Card width for an entity — explicit width wins, else derived from content. */
+export function entityAutoWidth(entity, editable = false) {
+    var _a, _b;
+    if (entity.width != null)
+        return entity.width;
+    // The head is uppercased and tracked by CSS, so measure what is PAINTED
+    // rather than what the author typed.
+    const title = ((_a = entity.name) !== null && _a !== void 0 ? _a : entity.id).toUpperCase();
+    let needed = CARD_PAD_X + measureCardText(title, FONT_HEAD, HEAD_TRACKING);
+    for (const c of entity.columns) {
+        const name = measureCardText(c.name, c.pk ? FONT_COL_PK : FONT_COL);
+        const type = Math.max(ER_TYPE_MIN_W, measureCardText((_b = c.type) !== null && _b !== void 0 ? _b : '', FONT_TYPE));
+        needed = Math.max(needed, CARD_PAD_X +
+            ER_KEY_W +
+            ER_ROW_GAP +
+            name +
+            ER_ROW_GAP +
+            type +
+            (editable ? ER_ROW_GAP + CARD_DEL_W : 0));
+    }
+    if (editable) {
+        needed = Math.max(needed, CARD_PAD_X + measureCardText('\uFF0B add column', FONT_ADD));
+    }
+    return Math.min(CARD_MAX_AUTO_W, Math.max(ER_DEFAULT_WIDTH, Math.ceil(needed + CARD_SLACK_X)));
+}
 /**
  * The `.axk-uml` content tree. `editable` adds a delete control per member and
  * a trailing add affordance in each compartment.
@@ -152,6 +279,28 @@ export function classAutoHeight(cls, editable = false) {
         UML_PAD * 2 +
         12);
 }
+/** Card width for a class — explicit width wins, else derived from content. */
+export function classAutoWidth(cls, editable = false) {
+    var _a, _b, _c;
+    if (cls.width != null)
+        return cls.width;
+    // `.axk-member` goes flex only when editable, and it has NO gap — the delete
+    // control sits straight against the text.
+    const del = editable ? CARD_DEL_W : 0;
+    let needed = CARD_PAD_X + measureCardText((_a = cls.name) !== null && _a !== void 0 ? _a : cls.id, FONT_UML_NAME);
+    if (cls.stereotype) {
+        needed = Math.max(needed, CARD_PAD_X + measureCardText(`\u00AB${cls.stereotype}\u00BB`, FONT_UML_STEREO));
+    }
+    for (const m of [...((_b = cls.attributes) !== null && _b !== void 0 ? _b : []), ...((_c = cls.methods) !== null && _c !== void 0 ? _c : [])]) {
+        needed = Math.max(needed, CARD_PAD_X + measureCardText(m, FONT_MEMBER) + del);
+    }
+    if (editable) {
+        for (const label of ['\uFF0B attribute', '\uFF0B method']) {
+            needed = Math.max(needed, CARD_PAD_X + measureCardText(label, FONT_ADD));
+        }
+    }
+    return Math.min(CARD_MAX_AUTO_W, Math.max(UML_DEFAULT_WIDTH, Math.ceil(needed + CARD_SLACK_X)));
+}
 /**
  * Match old columns to new columns for port reconciliation. Returns a map from
  * OLD index → NEW index; an old index absent from the map is a REMOVED column

package/src/lib/diagram-kit/er.js

@@ -22,13 +22,12 @@
  */
 import { ensureDiagramKitStyles } from './styles.js';
 import { bindRowInteractions } from './rows.js';
-import { entityCardContent, entityAutoHeight, erRowCenterY, ER_ROW_H, ER_HEAD_H } from './card.js';
+import { entityCardContent, entityAutoHeight, entityAutoWidth, erRowCenterY, ER_ROW_H, ER_HEAD_H, } from './card.js';
 import { bindCardEditing } from './editing.js';
 // Layout constants + the row-centre helper live in card.ts now (the ONE source
 // of truth shared with update.ts). Re-exported here so `import … from './er.js'`
 // keeps working.
 export { erRowCenterY, ER_ROW_H, ER_HEAD_H };
-const DEFAULT_WIDTH = 190;
 const CARDINALITY = {
     'one-to-many': { tail: 'one', head: 'crow-foot' },
     'one-to-one': { tail: 'one', head: 'one' },
@@ -68,7 +67,10 @@ export function erDiagram(options) {
     // How many edges already landed on a given entity row+side — drives the
     // spread (dy) so shared columns (a PK referenced twice) don't stack.
     const rowLandings = new Map();
-    const width = (e) => { var _a; return (_a = e.width) !== null && _a !== void 0 ? _a : DEFAULT_WIDTH; };
+    // Width is derived from content the same way height is, so a long column name
+    // or table title widens the card instead of falling off it. Ports read this
+    // same function, so they stay glued to the edge whatever it works out to.
+    const width = (e) => entityAutoWidth(e, options.editable === true);
     const fieldPort = (end, side) => {
         var _a, _b;
         const entity = end.entity;

package/src/lib/diagram-kit/styles.js

@@ -22,19 +22,42 @@ const CSS = `
   display: flex; flex-direction: column; }
 .axk-entity-body { flex: 1; min-height: 0; overflow-y: hidden; }
 .axk-entity-body.axk-scroll { overflow-y: auto; scrollbar-width: thin; }
+/* The head is sized by entityAutoWidth, but a title past the auto-width ceiling
+   still has to degrade VISIBLY: this rule used to be absent entirely, so a long
+   table name ran off the card and was cut by .axk-entity's overflow:hidden with
+   nothing to show for it (measured: 305px of name in a 180px head — 125px gone,
+   no ellipsis, no hint). nowrap also keeps the head exactly ER_HEAD_H tall,
+   which entityAutoHeight's row math depends on. */
 .axk-entity-head { background: #334155; color: #fff; font-weight: 600;
-  letter-spacing: .3px; padding: 5px 10px; text-transform: uppercase; font-size: 11px; }
+  letter-spacing: .3px; padding: 5px 10px; text-transform: uppercase; font-size: 11px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .axk-row { display: flex; align-items: center; gap: 8px; padding: 3px 10px;
   border-top: 1px solid #e2e8f0; }
 .axk-key { width: 22px; font-size: 9px; font-weight: 700; color: #b45309; }
 .axk-key.axk-fk { color: #6d28d9; }
-.axk-col { flex: 1; color: #0f172a; }
+/* ONE LINE PER COLUMN, ALWAYS — this rule is load-bearing for the card's HEIGHT.
+   entityAutoHeight allocates exactly ER_ROW_H per column, and .axk-entity-body is
+   overflow-y:hidden, so a name that wrapped to a second line pushed the last row
+   past the card's bottom edge and it silently vanished (measured: a 40px row
+   against the 25px the height math had reserved — 14px of the final column gone,
+   with no scrollbar to hint at it). Long identifiers ellipsis instead, so the
+   ROW always survives even when the text does not fit; an author who needs the
+   whole identifier visible sets an explicit width on the entity. (No title
+   attribute: the HTML-node contract deliberately passes text through
+   textContent and no attributes, and a tooltip is not worth widening it.)
+   min-width:0 is what lets a flex child shrink below its content. */
+.axk-col { flex: 1; min-width: 0; color: #0f172a;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .axk-ty {
   color: #64748b; font-size: 11px;
   /* A new column starts with an EMPTY type, which collapsed the cell to zero
      width — there was nothing to double-click, so a type could never be set on
      a field you just added. Reserve a target and hint that it is editable. */
   min-width: 52px; text-align: right; cursor: text;
+  /* Same contract as .axk-col: a long type must not wrap the row either.
+     It keeps its reserved width and never shrinks away. */
+  flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  max-width: 45%;
 }
 .axk-ty:empty::before { content: 'type'; color: #cbd5e1; font-style: italic; }
 .axk-ty:hover { color: #0f172a; }
@@ -47,14 +70,25 @@ const CSS = `
   display: flex; flex-direction: column; }
 .axk-uml-body { flex: 1; min-height: 0; overflow-y: hidden; }
 .axk-uml-body.axk-scroll { overflow-y: auto; scrollbar-width: thin; }
+/* Same one-line contract as .axk-entity-head: UML_NAME_H is what
+   classAutoHeight reserves, so a wrapped class name would push the first
+   compartment past the card's bottom edge. */
 .axk-uml-name { text-align: center; font-weight: 700; padding: 5px 10px;
-  background: #eef2ff; color: #1e1b4b; }
+  background: #eef2ff; color: #1e1b4b;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .axk-uml-name.axk-abstract { font-style: italic; }
 .axk-uml-stereo { display: block; font-size: 10px; font-weight: 500; opacity: .8; }
 .axk-uml-comp { border-top: 1px solid #475569; padding: 3px 0; }
 .axk-uml-comp.axk-empty { min-height: 8px; }
+/* Members already refused to wrap, but with no ellipsis they were cut
+   MID-GLYPH by the card's overflow:hidden — a method signature needing 487px
+   in a 190px card lost 297px of itself silently, on the one line a class
+   diagram exists to show. classAutoWidth now widens the card to fit; past its
+   ceiling this ellipsis says so. min-width:0 lets the editable flex variant
+   shrink. */
 .axk-member { padding: 1px 10px; font: 11px/1.5 ui-monospace, Menlo, monospace;
-  color: #0f172a; white-space: nowrap; }
+  color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  min-width: 0; }
 
 /* ===== Row interactivity (cards are interactive; drag stays geometric) ===== */
 .axk-entity, .axk-uml { user-select: none; -webkit-user-select: none; }
@@ -84,7 +118,8 @@ g.node-group[data-selected="true"]:has(.axk-uml) rect.diagram-node {
 /* Only editable members (which wrap their text in .axk-mtext) go flex — a
    read-only member stays a plain text div, so its golden never shifts. */
 .axk-member:has(.axk-mtext) { display: flex; align-items: center; }
-.axk-member .axk-mtext { flex: 1; }
+.axk-member .axk-mtext { flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .axk-entity-add, .axk-uml-add { padding: 3px 10px; font-size: 11px; font-weight: 600;
   color: #2563eb; cursor: pointer; border-top: 1px dashed #cbd5e1; user-select: none; }
 .axk-uml-add { color: #4f46e5; border-top: 1px dashed #c7d2fe; text-align: left; }

package/src/lib/diagram-kit/uml.js

@@ -24,9 +24,8 @@
  */
 import { ensureDiagramKitStyles } from './styles.js';
 import { bindRowInteractions } from './rows.js';
-import { classCardContent, classAutoHeight } from './card.js';
+import { classCardContent, classAutoHeight, classAutoWidth } from './card.js';
 import { bindCardEditing } from './editing.js';
-const DEFAULT_WIDTH = 200;
 const STROKE = '#475569';
 const DASH = '6,4';
 /**
@@ -70,11 +69,11 @@ export function umlDiagram(options) {
     ensureDiagramKitStyles();
     const editable = options.editable === true;
     const nodes = options.classes.map((cls, i) => {
-        var _a, _b;
+        var _a;
         return {
             id: cls.id,
             position: (_a = cls.position) !== null && _a !== void 0 ? _a : { x: 80 + (i % 3) * 320, y: 60 + Math.floor(i / 3) * 260 },
-            size: { width: (_b = cls.width) !== null && _b !== void 0 ? _b : DEFAULT_WIDTH, height: classAutoHeight(cls, editable) },
+            size: { width: classAutoWidth(cls, editable), height: classAutoHeight(cls, editable) },
             // interactive: members are real DOM targets (hover, row selection, inline
             // editing); node drag/select stay geometric in the binder.
             metadata: Object.assign({ html: { content: classCardContent(cls, editable), interactive: true }, kitClass: cls, kitEditable: editable }, (options.rowSelection === false ? { kitRowSelection: false } : {})),

package/src/lib/diagram-kit/update.js

@@ -29,7 +29,7 @@
  */
 import { __awaiter } from "tslib";
 import { Command, PortModel, LinkModel } from '@grafloria/engine';
-import { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight, erRowCenterY, rowIndexFromY, matchColumns, } from './card.js';
+import { entityCardContent, entityAutoHeight, entityAutoWidth, classCardContent, classAutoHeight, classAutoWidth, erRowCenterY, rowIndexFromY, matchColumns, } from './card.js';
 /**
  * The single undoable edit. Captures the card's whole before-state on first
  * execute and restores it on undo, so an edit — however many rows and edges it
@@ -187,7 +187,11 @@ export function updateEntity(api, entityId, delta) {
             newKit: newEntity,
             content: entityCardContent(newEntity, editable),
             height: entityAutoHeight(newEntity, editable),
-            width: newEntity.width,
+            // Derived, not carried over: renaming a column to something longer has to
+            // widen the card the same way the builder would have, or the edit lands
+            // inside a card still sized for the old text and is truncated on arrival.
+            // An explicit delta.width still wins — entityAutoWidth honours it.
+            width: entityAutoWidth(newEntity, editable),
         };
     };
     return runUpdate(api, entityId, 'er', build);
@@ -219,7 +223,7 @@ export function updateClass(api, classId, delta) {
             newKit: newClass,
             content: classCardContent(newClass, editable),
             height: classAutoHeight(newClass, editable),
-            width: newClass.width,
+            width: classAutoWidth(newClass, editable),
         };
     };
     return runUpdate(api, classId, 'uml', build);

package/src/lib/grafloria.js

@@ -12,7 +12,7 @@ import { registerNodeType, registeredNodeTypes, getNodeType } from './node-type-
  * card — `render()` is the embedding surface, not a parser.
  */
 export function render(spec, target, options = {}) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const element = typeof target === 'string'
         ? document.querySelector(target)
         : target;
@@ -22,14 +22,14 @@ export function render(spec, target, options = {}) {
     // Kit specs (dashboard()) carry looser node typing than DiagramSpec — both
     // flow into createDiagram's NodeInput[] the same way.
     const parsed = (typeof spec === 'string' ? parseSpec(spec) : spec);
-    const instance = createDiagram(element, Object.assign(Object.assign({}, options), { nodes: (_a = parsed.nodes) !== null && _a !== void 0 ? _a : [], edges: (_b = parsed.edges) !== null && _b !== void 0 ? _b : [], 
+    const instance = createDiagram(element, Object.assign(Object.assign(Object.assign({}, ((_a = parsed.renderOptions) !== null && _a !== void 0 ? _a : {})), options), { nodes: (_b = parsed.nodes) !== null && _b !== void 0 ? _b : [], edges: (_c = parsed.edges) !== null && _c !== void 0 ? _c : [], 
         // Wire the global registry in, so `registerNodeType` works for the tiny API
         // exactly as it does for `<grafloria-flow>` — unless the caller supplies their
         // own. A KIT SPEC may also carry its own painter (dashboard() does: every
         // widget is a custom HTML node), and it must be honoured — otherwise the
         // documented one-liner `render(dashboard({…}), host)` mounts a board whose
         // widgets never paint. Precedence: explicit option > spec > registry.
-        renderCustomNode: (_d = (_c = options.renderCustomNode) !== null && _c !== void 0 ? _c : parsed.renderCustomNode) !== null && _d !== void 0 ? _d : ((node, host) => { var _a; return (_a = getNodeType(node.type)) === null || _a === void 0 ? void 0 : _a(node, host); }) }));
+        renderCustomNode: (_e = (_d = options.renderCustomNode) !== null && _d !== void 0 ? _d : parsed.renderCustomNode) !== null && _e !== void 0 ? _e : ((node, host) => { var _a; return (_a = getNodeType(node.type)) === null || _a === void 0 ? void 0 : _a(node, host); }) }));
     // Diagram-kit specs (erDiagram/umlDiagram) carry a `finalize(api)` for the
     // post-render wiring that needs the LIVE instance — row interactions,
     // multiplicity chips. Auto-run it so a kit diagram is fully wired from one
@@ -39,7 +39,7 @@ export function render(spec, target, options = {}) {
         try {
             maybeFinalize(instance);
         }
-        catch (_e) {
+        catch (_f) {
             /* a kit's finalize must never break the mount */
         }
     }

package/src/lib/load.d.ts

@@ -56,6 +56,11 @@ export interface LoadedDiagramSpec {
      *    app's own painter, exactly as `dashboard({ renderWidget })` did.
      */
     readonly handle: DashboardHandle;
+    /** Instance options the loaded spec asks `render()` to apply (a fluid board pins zoom). */
+    renderOptions?: {
+        minZoom?: number;
+        maxZoom?: number;
+    };
 }
 /**
  * Turn a saved document back into something `render()` can mount.

package/src/lib/load.js

@@ -67,6 +67,8 @@ import { bindRowInteractions } from './diagram-kit/rows.js';
 import { bindCardEditing } from './diagram-kit/editing.js';
 import { ensureDiagramKitStyles } from './diagram-kit/styles.js';
 import { bindDashboardGrid } from './dashboard-kit/grid-binder.js';
+import { bindDashboardSplit, SPLIT_TREE_KEY } from './dashboard-kit/split-binder.js';
+import { gridItemFromCell } from './dashboard-kit/grid-mapping.js';
 import { cellFromGridItem } from './dashboard-kit/grid-mapping.js';
 import { ensureDashboardKitStyles } from './dashboard-kit/styles.js';
 import { defaultWidgetRenderer } from './dashboard-kit/widgets.js';
@@ -86,7 +88,9 @@ function widgetSpecOf(node) {
     if (kind === undefined)
         return null;
     const title = node.getMetadata('widgetTitle');
-    return Object.assign(Object.assign({ id: node.id, kind: kind }, (typeof title === 'string' ? { title } : {})), { data: ((_a = node.getMetadata('widgetSpec')) !== null && _a !== void 0 ? _a : {}), span: node.getMetadata('columnSpan'), rows: node.getMetadata('rowSpan') });
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id: node.id, kind: kind }, (typeof title === 'string' ? { title } : {})), { data: ((_a = node.getMetadata('widgetSpec')) !== null && _a !== void 0 ? _a : {}), span: node.getMetadata('columnSpan'), rows: node.getMetadata('rowSpan') }), (node.getMetadata('widgetLimits') !== undefined
+        ? { limits: Object.assign({}, node.getMetadata('widgetLimits')) }
+        : {})), (node.getMetadata('widgetMovable') === false ? { movable: false } : {})), (node.getMetadata('widgetResizable') === false ? { resizable: false } : {}));
 }
 /**
  * Turn a saved document back into something `render()` can mount.
@@ -101,7 +105,7 @@ function widgetSpecOf(node) {
  * of either.
  */
 export function fromDocument(document, options = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const parsed = typeof document === 'string' ? parseDocument(document) : document;
     const model = new DiagramSerializer().deserialize(parsed);
     const nodes = model.getNodes();
@@ -198,6 +202,11 @@ export function fromDocument(document, options = {}) {
         rowHeight: (_g = firstBoard === null || firstBoard === void 0 ? void 0 : firstBoard.baseRowHeight) !== null && _g !== void 0 ? _g : 130,
         boardW: (_k = (_j = (_h = viewGroups[0]) === null || _h === void 0 ? void 0 : _h.size) === null || _j === void 0 ? void 0 : _j.width) !== null && _k !== void 0 ? _k : 1180,
         boardH: (_o = (_m = (_l = viewGroups[0]) === null || _l === void 0 ? void 0 : _l.size) === null || _m === void 0 ? void 0 : _m.height) !== null && _o !== void 0 ? _o : 660,
+        // A board saved before `mode` existed carries no flag and was authored as
+        // a fixed world — it stays one. Fluid is only what was saved fluid.
+        mode: (firstBoard === null || firstBoard === void 0 ? void 0 : firstBoard.fluid) === true ? 'fluid' : 'fixed',
+        overflow: (_p = firstBoard === null || firstBoard === void 0 ? void 0 : firstBoard.overflow) !== null && _p !== void 0 ? _p : 'bounded',
+        layoutOf: new Map(viewGroups.map((g) => { var _a, _b; return [g.id, ((_b = (_a = g.getMetadata('dashboardBoard')) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : 'grid')]; })),
         // responsive is NOT in the document (a runtime seam), so it is deliberately
         // absent from the round-trip; width/height/columns/gap/sizing/float/rtl are.
         optionsBase: firstBoard
@@ -208,11 +217,15 @@ export function fromDocument(document, options = {}) {
                 sizing: firstBoard.sizing,
                 float: firstBoard.float,
                 rtl: firstBoard.rtl,
-                width: (_q = (_p = viewGroups[0]) === null || _p === void 0 ? void 0 : _p.size) === null || _q === void 0 ? void 0 : _q.width,
-                height: (_s = (_r = viewGroups[0]) === null || _r === void 0 ? void 0 : _r.size) === null || _s === void 0 ? void 0 : _s.height,
+                mode: firstBoard.fluid === true ? 'fluid' : 'fixed',
+                overflow: (_q = firstBoard.overflow) !== null && _q !== void 0 ? _q : 'bounded',
+                static: (_r = firstBoard.static) !== null && _r !== void 0 ? _r : false,
+                layout: (_s = firstBoard.layout) !== null && _s !== void 0 ? _s : 'grid',
+                width: (_u = (_t = viewGroups[0]) === null || _t === void 0 ? void 0 : _t.size) === null || _u === void 0 ? void 0 : _u.width,
+                height: (_w = (_v = viewGroups[0]) === null || _v === void 0 ? void 0 : _v.size) === null || _w === void 0 ? void 0 : _w.height,
             }
             : {},
-        active: (_t = activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.id) !== null && _t !== void 0 ? _t : 'main',
+        active: (_x = activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.id) !== null && _x !== void 0 ? _x : 'main',
         apiRef: null,
     };
     const handle = createDashboardHandle(ctx);
@@ -231,7 +244,7 @@ export function fromDocument(document, options = {}) {
         (_b = getNodeType(node.type)) === null || _b === void 0 ? void 0 : _b(node, host);
     };
     const finalize = (api) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const a = api;
         if (!a)
             return;
@@ -276,10 +289,61 @@ export function fromDocument(document, options = {}) {
             const board = group.getMetadata('dashboardBoard');
             if (!board)
                 continue;
-            boards.set(group.id, bindDashboardGrid(a, group, Object.assign({}, board)));
+            boards.set(group.id, bindBoard(group, board));
         }
+        // LIVE LAYOUT SWITCH on a loaded document — the same contract dashboard()
+        // finalize offers: cells persisted where the grid reads them, any tree and
+        // column cache cleared, the board's `layout` flag flipped, a fresh binder.
+        ctx.rebindView = (viewId, next) => {
+            var _a;
+            const group = model.getGroup(viewId);
+            const b = boards.get(viewId);
+            const board = group === null || group === void 0 ? void 0 : group.getMetadata('dashboardBoard');
+            if (!group || !b || !board)
+                return;
+            const cells = b.saveLayout().cells;
+            b.dispose();
+            model.runSystemWrite(() => {
+                var _a;
+                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));
+                }
+                group.setMetadata(SPLIT_TREE_KEY, undefined);
+                group.setMetadata('dashboardLayouts', undefined);
+                group.setMetadata('dashboardBoard', Object.assign(Object.assign({}, board), { layout: next }));
+            });
+            ctx.layoutOf.set(viewId, next);
+            boards.set(viewId, bindBoard(group, Object.assign(Object.assign({}, board), { layout: next })));
+            (_a = boards.get(viewId)) === null || _a === void 0 ? void 0 : _a.sync();
+        };
+        // A container removed and restored through the history comes back as a
+        // fresh group: bind it again from its own persisted geometry.
+        ctx.rebindContainer = (id) => {
+            const group = model.getGroup(id);
+            const board = group === null || group === void 0 ? void 0 : group.getMetadata('dashboardBoard');
+            if (!group || !board)
+                return;
+            ctx.boardGroups.set(id, group);
+            boards.set(id, bindBoard(group, board));
+        };
+        function bindBoard(group, board) {
+            return board.layout === 'split'
+                ? bindDashboardSplit(a, group, Object.assign({}, board))
+                : bindDashboardGrid(a, group, Object.assign({}, board));
+        }
+        // A loaded board follows the history exactly as an authored one does: an
+        // undo re-syncs every binder without the consumer calling refresh().
+        (_e = ctx.attachHistory) === null || _e === void 0 ? void 0 : _e.call(ctx);
     };
-    return { nodes, edges: model.getLinks(), renderCustomNode, finalize, model, boards, handle };
+    return Object.assign({ nodes, edges: model.getLinks(), renderCustomNode,
+        finalize,
+        model,
+        boards,
+        handle }, (ctx.mode === 'fluid' ? { renderOptions: { minZoom: 1, maxZoom: 1 } } : {}));
 }
 function parseDocument(json) {
     try {