@grafloria/element 0.3.19 → 0.3.20

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

@@ -0,0 +1,244 @@
+/**
+ * Live editing — `updateEntity` / `updateClass` mutate a rendered kit card in
+ * place (P3, the foundation the in-canvas editing chrome is built on).
+ *
+ * A delta changes the DATA (a table's name, its columns; a class's name,
+ * attributes, methods, width/height) and this module:
+ *   1. reads the stored spec (`kitEntity` / `kitClass`) — the source of truth;
+ *   2. applies the delta to a NEW spec (the caller's objects are never mutated,
+ *      so undo can restore the old one cleanly);
+ *   3. regenerates the card html from the SAME builder er.ts/uml.ts use
+ *      (`card.ts`), so an edited card is identical to a freshly-built one;
+ *   4. recomputes the node size;
+ *   5. RECONCILES the field ports — every port pinned to a surviving column
+ *      moves to that column's new row (`erRowCenterY`), ports on a removed
+ *      column are dropped along with their edges. Port ids never change, so an
+ *      edge stays glued to its row across inserts/removes/reorders (the exact
+ *      failure this solves: a port frozen at the old row while the rows shifted
+ *      under it);
+ *   6. repaints — as ONE undoable step.
+ *
+ * ONE UNDO STEP. The change is applied through `api.getEngine().commandManager`
+ * — the same public seam `renderer/ext/public-api.ts` uses — wrapped in a
+ * single kit-local {@link Command}. There is no `SetNodeMetadataCommand` in the
+ * engine (the html/kit-spec mutation has no built-in command), so rather than
+ * reach into engine internals or compose a half-undoable macro, the whole edit
+ * lives in one Command subclass here (subclassing `Command` is the engine's
+ * intended extension point — every basic command does it). When no engine is
+ * present the edit still applies, just non-undoably.
+ */
+import { __awaiter } from "tslib";
+import { Command, PortModel, LinkModel } from '@grafloria/engine';
+import { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight, erRowCenterY, rowIndexFromY, matchColumns, } from './card';
+/**
+ * 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
+ * touched — is one Ctrl+Z.
+ */
+class UpdateCardCommand extends Command {
+    constructor(nodeId, kind, build) {
+        super(kind === 'er' ? 'Edit table' : 'Edit class');
+        this.nodeId = nodeId;
+        this.kind = kind;
+        this.build = build;
+        this.captured = false;
+    }
+    execute(context) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const model = context.diagram;
+        const node = model.getNode(this.nodeId);
+        if (!node)
+            return;
+        const kitKey = this.kind === 'er' ? 'kitEntity' : 'kitClass';
+        const oldKit = ((_a = node.getMetadata(kitKey)) !== null && _a !== void 0 ? _a : {});
+        if (!this.captured) {
+            this.captured = true;
+            this.before = {
+                html: node.getMetadata('html'),
+                kit: oldKit,
+                size: Object.assign({}, node.size),
+                ports: node.getPorts().map((p) => p.serialize()),
+                links: [],
+            };
+        }
+        const result = this.build(oldKit);
+        const newWidth = (_b = result.width) !== null && _b !== void 0 ? _b : node.size.width;
+        const removedLinks = [];
+        if (this.kind === 'er') {
+            const oldCols = ((_c = oldKit['columns']) !== null && _c !== void 0 ? _c : []);
+            const newCols = ((_d = result.newKit['columns']) !== null && _d !== void 0 ? _d : []);
+            const map = matchColumns(oldCols, newCols);
+            for (const port of [...node.getPorts()]) {
+                const args = (_e = port.layout) === null || _e === void 0 ? void 0 : _e.args;
+                if (((_f = port.layout) === null || _f === void 0 ? void 0 : _f.strategy) !== 'absolute' || !args || args.units !== 'px' || args.y == null)
+                    continue;
+                const oldIdx = rowIndexFromY(args.y);
+                if (oldIdx < 0 || oldIdx >= oldCols.length)
+                    continue; // not a row-pinned field port
+                const newIdx = map.get(oldIdx);
+                if (newIdx === undefined) {
+                    // The column is gone — drop the port and every edge riding it.
+                    for (const link of model.getLinks()) {
+                        if (link.sourcePortId === port.id || link.targetPortId === port.id)
+                            removedLinks.push(link.serialize());
+                    }
+                    for (const link of model.getLinks().filter((l) => l.sourcePortId === port.id || l.targetPortId === port.id)) {
+                        model.removeLink(link.id);
+                    }
+                    node.removePort(port.id);
+                }
+                else {
+                    // Move the port to its column's NEW row; keep the ±dy spread. x tracks
+                    // the (possibly changed) width by side, so a widened table stays pinned.
+                    args.y = erRowCenterY(newIdx);
+                    const side = (_g = port.alignment) === null || _g === void 0 ? void 0 : _g.side;
+                    args.x = side === 'left' ? 0 : side === 'right' ? newWidth : newWidth / 2;
+                    // A nested-arg mutation is not tracked — nudge the port so the model
+                    // marks it dirty and the renderer repositions it this frame.
+                    port.setOffset(Object.assign({}, ((_h = port.offset) !== null && _h !== void 0 ? _h : { x: 0, y: 0 })));
+                }
+            }
+        }
+        node.setMetadata('html', { content: result.content, interactive: true });
+        node.setMetadata(kitKey, result.newKit);
+        node.setSize(newWidth, result.height);
+        if (this.before)
+            this.before.links = removedLinks;
+    }
+    undo(context) {
+        var _a;
+        const model = context.diagram;
+        const node = model.getNode(this.nodeId);
+        if (!node || !this.before)
+            return;
+        node.setMetadata('html', this.before.html);
+        node.setMetadata(this.kind === 'er' ? 'kitEntity' : 'kitClass', this.before.kit);
+        node.setSize(this.before.size.width, this.before.size.height);
+        const beforeIds = new Set(this.before.ports.map((p) => p['id']));
+        for (const p of [...node.getPorts()])
+            if (!beforeIds.has(p.id))
+                node.removePort(p.id);
+        for (const sp of this.before.ports) {
+            const live = node.getPort(sp['id']);
+            if (live) {
+                live.layout = sp['layout'];
+                live.setOffset(Object.assign({}, ((_a = sp['offset']) !== null && _a !== void 0 ? _a : { x: 0, y: 0 })));
+            }
+            else {
+                node.addPort(PortModel.fromJSON(sp));
+            }
+        }
+        for (const sl of this.before.links) {
+            if (!model.getLink(sl['id']))
+                model.addLink(LinkModel.fromJSON(sl));
+        }
+    }
+    canExecute(context) {
+        var _a;
+        return !!((_a = context.diagram) === null || _a === void 0 ? void 0 : _a.getNode(this.nodeId));
+    }
+    serialize() {
+        return { id: this.id, name: this.name, timestamp: this.timestamp, data: { nodeId: this.nodeId, kind: this.kind } };
+    }
+}
+/** Route a build through the engine's command stack (one undo step) or apply it directly. */
+function runUpdate(api, nodeId, kind, build) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e;
+        const model = (_a = api.getModel) === null || _a === void 0 ? void 0 : _a.call(api);
+        const node = (_b = model === null || model === void 0 ? void 0 : model.getNode) === null || _b === void 0 ? void 0 : _b.call(model, nodeId);
+        if (!model || !node)
+            return false;
+        const command = new UpdateCardCommand(nodeId, kind, build);
+        const cm = (_d = (_c = api.getEngine) === null || _c === void 0 ? void 0 : _c.call(api)) === null || _d === void 0 ? void 0 : _d.commandManager;
+        if (cm === null || cm === void 0 ? void 0 : cm.execute) {
+            yield cm.execute(command); // ONE undoable step (Command enters history once)
+        }
+        else {
+            command.execute({ diagram: model }); // no engine — apply, non-undoably
+        }
+        (_e = api.renderNow) === null || _e === void 0 ? void 0 : _e.call(api);
+        return true;
+    });
+}
+const isEditable = (node) => (node === null || node === void 0 ? void 0 : node.getMetadata('kitEditable')) === true;
+/**
+ * Edit a rendered ER table in place. `delta` may change the name, the column
+ * list (add / remove / reorder / rename / retype), and the width/height. Field
+ * ports and their edges are reconciled so the diagram stays correct, as ONE
+ * undoable step.
+ *
+ * @returns whether the node existed and the edit was applied.
+ */
+export function updateEntity(api, entityId, delta) {
+    var _a, _b, _c;
+    const editable = isEditable((_c = (_b = (_a = api.getModel) === null || _a === void 0 ? void 0 : _a.call(api)) === null || _b === void 0 ? void 0 : _b.getNode) === null || _c === void 0 ? void 0 : _c.call(_b, entityId));
+    const build = (oldKit) => {
+        const newEntity = Object.assign({}, oldKit);
+        if (delta.name !== undefined)
+            newEntity.name = delta.name;
+        if (delta.width !== undefined)
+            newEntity.width = delta.width;
+        if (delta.height !== undefined)
+            newEntity.height = delta.height;
+        if (delta.columns !== undefined)
+            newEntity.columns = delta.columns;
+        return {
+            newKit: newEntity,
+            content: entityCardContent(newEntity, editable),
+            height: entityAutoHeight(newEntity, editable),
+            width: newEntity.width,
+        };
+    };
+    return runUpdate(api, entityId, 'er', build);
+}
+/**
+ * Edit a rendered UML class in place. `delta` may change the name, stereotype,
+ * abstract flag, attributes, methods, and width/height. One undoable step.
+ */
+export function updateClass(api, classId, delta) {
+    var _a, _b, _c;
+    const editable = isEditable((_c = (_b = (_a = api.getModel) === null || _a === void 0 ? void 0 : _a.call(api)) === null || _b === void 0 ? void 0 : _b.getNode) === null || _c === void 0 ? void 0 : _c.call(_b, classId));
+    const build = (oldKit) => {
+        const newClass = Object.assign({}, oldKit);
+        if (delta.name !== undefined)
+            newClass.name = delta.name;
+        if (delta.stereotype !== undefined)
+            newClass.stereotype = delta.stereotype;
+        if (delta.abstract !== undefined)
+            newClass.abstract = delta.abstract;
+        if (delta.width !== undefined)
+            newClass.width = delta.width;
+        if (delta.height !== undefined)
+            newClass.height = delta.height;
+        if (delta.attributes !== undefined)
+            newClass.attributes = delta.attributes;
+        if (delta.methods !== undefined)
+            newClass.methods = delta.methods;
+        return {
+            newKit: newClass,
+            content: classCardContent(newClass, editable),
+            height: classAutoHeight(newClass, editable),
+            width: newClass.width,
+        };
+    };
+    return runUpdate(api, classId, 'uml', build);
+}
+// -- small column helpers, for the editing chrome and embedders --------------
+/** Append a column (immutably) — returns the new column array. */
+export function addColumnAt(columns, column, at = columns.length) {
+    const next = columns.slice();
+    next.splice(Math.max(0, Math.min(at, next.length)), 0, column);
+    return next;
+}
+/** Remove the column at `index` — returns the new column array. */
+export function removeColumnAt(columns, index) {
+    const next = columns.slice();
+    next.splice(index, 1);
+    return next;
+}
+/** Rename the column at `index` — returns a new array with a NEW object there. */
+export function renameColumnAt(columns, index, name) {
+    return columns.map((c, i) => (i === index ? Object.assign(Object.assign({}, c), { name }) : c));
+}
+//# sourceMappingURL=update.js.map

package/esm/src/lib/grafloria-flow-element.js

@@ -0,0 +1,266 @@
+import { createDiagram, DARK_THEME, LIGHT_THEME } from '@grafloria/renderer';
+import { getNodeType, renderFromTemplate } from './node-type-registry';
+/**
+ * `<grafloria-flow>` — the universal embed.
+ *
+ * React Flow serves React. ngx-vflow serves Angular. Each is a wall around one
+ * framework. A custom element has no wall: Vue, Svelte, Solid, Lit, Alpine,
+ * plain HTML, a CMS block, a Jupyter/Observable cell and a static site all speak
+ * "HTML element with attributes and events". This is the piece that lets Grafloria
+ * reach the long tail those libraries cannot.
+ *
+ * ```html
+ * <grafloria-flow theme="dark" fit-view
+ *             nodes='[{"id":"a","position":{"x":0,"y":0},"label":"A"}]'
+ *             edges='[{"source":"a","target":"b"}]'>
+ *   <template data-node-type="card">
+ *     <div class="card"><h4 data-field="title"></h4></div>
+ *   </template>
+ * </grafloria-flow>
+ *
+ * <script>
+ *   document.querySelector('grafloria-flow')
+ *     .addEventListener('grafloria-connect', e => console.log(e.detail.link));
+ * </script>
+ * ```
+ *
+ * Rich data goes in as PROPERTIES (`el.nodes = [...]`) and simple data as
+ * ATTRIBUTES (JSON strings) — the standard custom-element contract that every
+ * framework's template binding already targets:
+ * `:nodes` in Vue, `nodes={...}` in Svelte/Solid, `[attr.nodes]` in Angular.
+ *
+ * Everything it does is delegation. There is no diagram logic in this file.
+ */
+const THEMES = {
+    light: LIGHT_THEME,
+    dark: DARK_THEME,
+};
+/** Events emitted on the element. All bubble and cross shadow boundaries. */
+export const GRAFLORIA_EVENTS = {
+    ready: 'grafloria-ready',
+    nodesChange: 'grafloria-nodes-change',
+    edgesChange: 'grafloria-edges-change',
+    selectionChange: 'grafloria-selection-change',
+    connect: 'grafloria-connect',
+    nodeClick: 'grafloria-node-click',
+    edgeClick: 'grafloria-edge-click',
+    viewportChange: 'grafloria-viewport-change',
+};
+// wave11/gallery BUG FIX — worker-safe base class.
+//
+// `class GrafloriaFlowElement extends HTMLElement` evaluates `HTMLElement` at MODULE
+// LOAD, so merely IMPORTING this package threw `HTMLElement is not defined` in any
+// context without a DOM — a Web Worker, or Node. The package doc already promised
+// the import is "a no-op on the server", and `defineGrafloriaFlow()` guards
+// `customElements`; but the class declaration itself did not, so the promise was
+// only half true. It matters concretely: the off-thread-layout demo runs the
+// engine's `serveLayout` INSIDE a real Worker by importing this very bundle, which
+// is impossible if the top-level class reference throws. The element only ever
+// EXTENDS the real HTMLElement in a browser (a worker never instantiates it), so a
+// guarded base is behaviourally identical on the client and merely importable off it.
+const HTMLElementBase = typeof HTMLElement !== 'undefined'
+    ? HTMLElement
+    : class {
+    };
+export class GrafloriaFlowElement extends HTMLElementBase {
+    constructor() {
+        super(...arguments);
+        this.instance = null;
+        this.canvas = null;
+        this._nodes = [];
+        this._edges = [];
+        this.connected = false;
+    }
+    static get observedAttributes() {
+        return [
+            'nodes',
+            'edges',
+            'theme',
+            'fit-view',
+            'readonly',
+            'zoom',
+            'min-zoom',
+            'max-zoom',
+            'pan',
+            'wheel-zoom',
+        ];
+    }
+    // -- properties (the rich path) ---------------------------------------------
+    get nodes() {
+        return this._nodes;
+    }
+    set nodes(value) {
+        var _a;
+        this._nodes = value !== null && value !== void 0 ? value : [];
+        (_a = this.instance) === null || _a === void 0 ? void 0 : _a.setNodes(this._nodes);
+    }
+    get edges() {
+        return this._edges;
+    }
+    set edges(value) {
+        var _a;
+        this._edges = value !== null && value !== void 0 ? value : [];
+        (_a = this.instance) === null || _a === void 0 ? void 0 : _a.setEdges(this._edges);
+    }
+    /** The headless instance — the escape hatch to everything else. */
+    get diagram() {
+        return this.instance;
+    }
+    // -- lifecycle ---------------------------------------------------------------
+    connectedCallback() {
+        if (this.connected)
+            return;
+        this.connected = true;
+        // Attributes may have been parsed before we upgraded.
+        this.readAttributeModel();
+        // Light DOM, not shadow DOM: the diagram's stylesheet is injected into
+        // <head> and its CSS variables cascade — a shadow root would cut both off,
+        // and hosts routinely want to style nodes from their own stylesheet.
+        this.canvas = document.createElement('div');
+        this.canvas.className = 'grafloria-flow-canvas';
+        this.canvas.setAttribute('style', 'position:relative;width:100%;height:100%');
+        this.appendChild(this.canvas);
+        if (!this.style.display)
+            this.style.display = 'block';
+        this.instance = createDiagram(this.canvas, this.buildOptions());
+        this.wireEvents(this.instance);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.connected = false;
+        (_a = this.instance) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.instance = null;
+        (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.remove();
+        this.canvas = null;
+    }
+    attributeChangedCallback(name, previous, next) {
+        var _a, _b;
+        if (previous === next)
+            return;
+        switch (name) {
+            case 'nodes':
+                this._nodes = parseJsonAttribute(next, []);
+                (_a = this.instance) === null || _a === void 0 ? void 0 : _a.setNodes(this._nodes);
+                return;
+            case 'edges':
+                this._edges = parseJsonAttribute(next, []);
+                (_b = this.instance) === null || _b === void 0 ? void 0 : _b.setEdges(this._edges);
+                return;
+            case 'theme':
+                if (this.instance)
+                    this.instance.setTheme(this.resolveTheme());
+                return;
+            case 'fit-view':
+                if (this.instance && next !== null)
+                    this.instance.fitView();
+                return;
+            case 'zoom':
+                if (this.instance && next !== null)
+                    this.instance.viewport.setZoom(Number(next));
+                return;
+            default:
+                // pan / wheel-zoom / readonly / min-zoom / max-zoom are read at mount:
+                // they configure the event binder, which is created once. Changing them
+                // afterwards is rare enough that we do not tear the instance down.
+                return;
+        }
+    }
+    // -- API ---------------------------------------------------------------------
+    fitView(padding) {
+        var _a;
+        (_a = this.instance) === null || _a === void 0 ? void 0 : _a.fitView(padding);
+    }
+    // -- internals ---------------------------------------------------------------
+    buildOptions() {
+        return {
+            nodes: this._nodes,
+            edges: this._edges,
+            theme: this.resolveTheme(),
+            fitView: this.hasAttribute('fit-view'),
+            readonly: this.hasAttribute('readonly'),
+            enablePan: this.getAttribute('pan') !== 'false',
+            enableZoom: this.getAttribute('wheel-zoom') !== 'false',
+            zoom: this.hasAttribute('zoom') ? Number(this.getAttribute('zoom')) : undefined,
+            minZoom: this.hasAttribute('min-zoom')
+                ? Number(this.getAttribute('min-zoom'))
+                : undefined,
+            maxZoom: this.hasAttribute('max-zoom')
+                ? Number(this.getAttribute('max-zoom'))
+                : undefined,
+            renderCustomNode: (node, element) => this.renderCustomNode(node, element),
+        };
+    }
+    /**
+     * Custom nodes, two ways and no framework: a registered renderer
+     * (`Grafloria.registerNodeType`), or a slotted `<template data-node-type="…">`.
+     */
+    renderCustomNode(node, element) {
+        const renderer = getNodeType(node.type);
+        if (renderer) {
+            renderer(node, element);
+            return;
+        }
+        const template = this.querySelector(`template[data-node-type="${cssEscape(node.type)}"]`);
+        if (template) {
+            renderFromTemplate(template, node, element);
+            return;
+        }
+        // Nothing registered: leave the host empty rather than throwing inside a
+        // render. The node still exists, is selectable and is draggable.
+    }
+    resolveTheme() {
+        var _a, _b;
+        return (_b = THEMES[(_a = this.getAttribute('theme')) !== null && _a !== void 0 ? _a : 'light']) !== null && _b !== void 0 ? _b : LIGHT_THEME;
+    }
+    readAttributeModel() {
+        if (this._nodes.length === 0 && this.hasAttribute('nodes')) {
+            this._nodes = parseJsonAttribute(this.getAttribute('nodes'), []);
+        }
+        if (this._edges.length === 0 && this.hasAttribute('edges')) {
+            this._edges = parseJsonAttribute(this.getAttribute('edges'), []);
+        }
+    }
+    /** Instance events → DOM CustomEvents. `composed` so they escape a shadow root. */
+    wireEvents(instance) {
+        const forward = (type, detail) => {
+            this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+        };
+        instance.on('ready', () => forward(GRAFLORIA_EVENTS.ready, { diagram: instance }));
+        instance.on('nodes:change', (payload) => forward(GRAFLORIA_EVENTS.nodesChange, payload));
+        instance.on('edges:change', (payload) => forward(GRAFLORIA_EVENTS.edgesChange, payload));
+        instance.on('selection:change', (payload) => forward(GRAFLORIA_EVENTS.selectionChange, payload));
+        instance.on('connect', (payload) => forward(GRAFLORIA_EVENTS.connect, payload));
+        instance.on('node:click', (payload) => forward(GRAFLORIA_EVENTS.nodeClick, payload));
+        instance.on('edge:click', (payload) => forward(GRAFLORIA_EVENTS.edgeClick, payload));
+        instance.on('viewport:change', (payload) => forward(GRAFLORIA_EVENTS.viewportChange, payload));
+    }
+}
+/** JSON attribute → value. A malformed attribute must not take the page down. */
+function parseJsonAttribute(raw, fallback) {
+    if (!raw)
+        return fallback;
+    try {
+        return JSON.parse(raw);
+    }
+    catch (_a) {
+        console.warn('[grafloria-flow] ignoring malformed JSON attribute:', raw);
+        return fallback;
+    }
+}
+/** Minimal CSS.escape for the attribute selector (jsdom/older browsers lack it). */
+function cssEscape(value) {
+    return value.replace(/["\\]/g, '\\$&');
+}
+/**
+ * Register the element. Idempotent, and safe to call on the server (where
+ * `customElements` does not exist) — which is what lets a bundle be imported
+ * from an SSR entry point without a `typeof window` dance at every call site.
+ */
+export function defineGrafloriaFlow(tagName = 'grafloria-flow') {
+    if (typeof customElements === 'undefined')
+        return;
+    if (customElements.get(tagName))
+        return;
+    customElements.define(tagName, GrafloriaFlowElement);
+}
+//# sourceMappingURL=grafloria-flow-element.js.map

package/esm/src/lib/grafloria.js

@@ -0,0 +1,69 @@
+import { createDiagram, renderToStaticSVG } from '@grafloria/renderer';
+import { defineGrafloriaFlow } from './grafloria-flow-element';
+import { registerNodeType, registeredNodeTypes, getNodeType } from './node-type-registry';
+/**
+ * Mount `spec` into `target` and return the live instance.
+ *
+ * `target` may be an element or a CSS selector. Custom nodes (`custom: true`)
+ * are rendered by the types registered with {@link registerNodeType}.
+ *
+ * SCOPE, stated plainly: `spec` is data (an object or its JSON), not a Mermaid-
+ * style text DSL. The engine does have a DSL, but wiring it in is a separate
+ * card — `render()` is the embedding surface, not a parser.
+ */
+export function render(spec, target, options = {}) {
+    var _a, _b, _c, _d;
+    const element = typeof target === 'string'
+        ? document.querySelector(target)
+        : target;
+    if (!element) {
+        throw new Error(`Grafloria.render: no element matched ${JSON.stringify(target)}`);
+    }
+    // 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 : [], 
+        // 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); }) }));
+    // 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
+    // render() call; finalize is idempotent, so a caller may still call it too.
+    const maybeFinalize = spec.finalize;
+    if (typeof maybeFinalize === 'function') {
+        try {
+            maybeFinalize(instance);
+        }
+        catch (_e) {
+            /* a kit's finalize must never break the mount */
+        }
+    }
+    return instance;
+}
+/** Server-side render (Card 6). Re-exported so the tiny API is self-contained. */
+export function renderStatic(options = {}) {
+    return renderToStaticSVG(options);
+}
+function parseSpec(spec) {
+    try {
+        return JSON.parse(spec);
+    }
+    catch (error) {
+        throw new Error(`Grafloria.render: spec must be an object or a JSON string (${error.message})`);
+    }
+}
+/** The namespace object, for `import { Grafloria }` and for `<script>` globals. */
+export const Grafloria = {
+    render,
+    renderStatic,
+    registerNodeType,
+    registeredNodeTypes,
+    /** Register `<grafloria-flow>` (called for you when you import this package). */
+    define: defineGrafloriaFlow,
+};
+//# sourceMappingURL=grafloria.js.map