@grafloria/element 0.3.18 → 0.3.19

package/src/libs/element/src/lib/diagram-kit/rows.js

@@ -0,0 +1,147 @@
+"use strict";
+/**
+ * Row interactions — "select a column / field" on kit cards (P1 of the
+ * ER/UML editing track).
+ *
+ * Kit cards are `interactive: true` (their rows are real DOM targets — the
+ * binder's node click/drag resolution is geometric, so dragging and selecting
+ * the TABLE keeps working; proven live before this was built). This module is
+ * the runtime the kit's `finalize(api)` binds once per diagram:
+ *
+ *  - click a row → it becomes THE selected row (one per diagram), painted with
+ *    `.axk-row-selected`; click again or click anywhere else → deselected;
+ *  - every row click dispatches `axk:row-click` on the container, and every
+ *    selection CHANGE dispatches `axk:row-select` — both bubbling
+ *    CustomEvents, matching the element package's "DOM events out" contract;
+ *  - the selected row survives card re-renders: the renderer keys the
+ *    foreignObject by content hash, so an html edit swaps the subtree and
+ *    drops the class — a MutationObserver re-applies it by (nodeId, rowIndex);
+ *  - selection is EPHEMERAL view state, exactly like node selection: never
+ *    serialized, never in the op log, not undoable.
+ *
+ * Row identity: `rowIndex` is the position among the card's rows (ER columns,
+ * or UML members across both compartments); `name` resolves from the spec the
+ * kit stored in node metadata (`kitEntity` / `kitClass`), falling back to the
+ * row's text.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bindRowInteractions = bindRowInteractions;
+const ROW_SELECTOR = '.axk-row, .axk-member';
+const SELECTED_CLASS = 'axk-row-selected';
+/** One binding per container — rebinding disposes the previous one. */
+const bindings = new WeakMap();
+function rowsOfNode(container, nodeId) {
+    const esc = (window.CSS && CSS.escape) ? CSS.escape(nodeId) : nodeId.replace(/"/g, '\\"');
+    const group = container.querySelector(`[data-node-id="${esc}"]`);
+    return group ? Array.from(group.querySelectorAll(ROW_SELECTOR)) : [];
+}
+function resolveRef(container, api, rowEl) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const group = rowEl.closest('[data-node-id]');
+    if (!group)
+        return null;
+    const nodeId = group.getAttribute('data-node-id');
+    const rows = Array.from(group.querySelectorAll(ROW_SELECTOR));
+    const rowIndex = rows.indexOf(rowEl);
+    if (rowIndex === -1)
+        return null;
+    const kind = rowEl.classList.contains('axk-member') ? 'uml' : 'er';
+    const node = (_c = (_a = api.getModel) === null || _a === void 0 ? void 0 : (_b = _a.call(api)).getNode) === null || _c === void 0 ? void 0 : _c.call(_b, nodeId);
+    const meta = (key) => { var _a; return (_a = node === null || node === void 0 ? void 0 : node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, key); };
+    if (kind === 'er') {
+        const entity = meta('kitEntity');
+        const name = (_h = (_f = (_e = (_d = entity === null || entity === void 0 ? void 0 : entity.columns) === null || _d === void 0 ? void 0 : _d[rowIndex]) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : (_g = rowEl.querySelector('.axk-col')) === null || _g === void 0 ? void 0 : _g.textContent) !== null && _h !== void 0 ? _h : undefined;
+        return { nodeId, rowIndex, name: name !== null && name !== void 0 ? name : undefined, kind };
+    }
+    const cls = meta('kitClass');
+    const attrCount = (_k = (_j = cls === null || cls === void 0 ? void 0 : cls.attributes) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : countFirstCompartment(rowEl);
+    const section = rowIndex < attrCount ? 'attributes' : 'methods';
+    const name = (_q = (_o = (section === 'attributes' ? (_l = cls === null || cls === void 0 ? void 0 : cls.attributes) === null || _l === void 0 ? void 0 : _l[rowIndex] : (_m = cls === null || cls === void 0 ? void 0 : cls.methods) === null || _m === void 0 ? void 0 : _m[rowIndex - attrCount])) !== null && _o !== void 0 ? _o : (_p = rowEl.textContent) === null || _p === void 0 ? void 0 : _p.trim()) !== null && _q !== void 0 ? _q : undefined;
+    return { nodeId, rowIndex, name, kind, section };
+}
+/** Without spec metadata, the first compartment's member count splits sections. */
+function countFirstCompartment(rowEl) {
+    const card = rowEl.closest('.axk-uml');
+    const firstComp = card === null || card === void 0 ? void 0 : card.querySelector('.axk-uml-comp');
+    return firstComp ? firstComp.querySelectorAll('.axk-member').length : Number.MAX_SAFE_INTEGER;
+}
+function bindRowInteractions(api) {
+    var _a;
+    const container = api.container;
+    (_a = bindings.get(container)) === null || _a === void 0 ? void 0 : _a.dispose();
+    let selected = null;
+    const paint = () => {
+        var _a;
+        for (const el of Array.from(container.querySelectorAll(`.${SELECTED_CLASS}`))) {
+            el.classList.remove(SELECTED_CLASS);
+        }
+        if (selected)
+            (_a = rowsOfNode(container, selected.nodeId)[selected.rowIndex]) === null || _a === void 0 ? void 0 : _a.classList.add(SELECTED_CLASS);
+    };
+    const emitSelect = () => {
+        container.dispatchEvent(new CustomEvent('axk:row-select', { bubbles: true, detail: { selected } }));
+    };
+    const setSelected = (next) => {
+        const same = (next === null && selected === null) ||
+            (next !== null && selected !== null && next.nodeId === selected.nodeId && next.rowIndex === selected.rowIndex);
+        if (same)
+            return;
+        selected = next;
+        paint();
+        emitSelect();
+    };
+    const onClick = (event) => {
+        var _a;
+        const target = event.target instanceof Element ? event.target : null;
+        const rowEl = (_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, ROW_SELECTOR);
+        if (!rowEl || !container.contains(rowEl)) {
+            setSelected(null);
+            return;
+        }
+        const ref = resolveRef(container, api, rowEl);
+        if (!ref)
+            return;
+        container.dispatchEvent(new CustomEvent('axk:row-click', { bubbles: true, detail: Object.assign({}, ref) }));
+        const isReclick = selected && selected.nodeId === ref.nodeId && selected.rowIndex === ref.rowIndex;
+        setSelected(isReclick ? null : ref);
+    };
+    // Card re-renders replace the foreignObject subtree (content-hash keyed) and
+    // lose the class — re-apply whenever the selected row's paint went missing.
+    const observer = new MutationObserver(() => {
+        if (!selected)
+            return;
+        const el = rowsOfNode(container, selected.nodeId)[selected.rowIndex];
+        if (el && !el.classList.contains(SELECTED_CLASS))
+            paint();
+        else if (!el) {
+            // The row (or its node) is gone — the selection dies with it.
+            setSelected(null);
+        }
+    });
+    container.addEventListener('click', onClick);
+    observer.observe(container, { childList: true, subtree: true });
+    const handle = {
+        getSelected: () => (selected ? Object.assign({}, selected) : null),
+        select: (ref) => {
+            if (ref === null) {
+                setSelected(null);
+                return;
+            }
+            const el = rowsOfNode(container, ref.nodeId)[ref.rowIndex];
+            if (!el)
+                return;
+            const resolved = resolveRef(container, api, el);
+            if (resolved)
+                setSelected(resolved);
+        },
+        dispose: () => {
+            container.removeEventListener('click', onClick);
+            observer.disconnect();
+            if (bindings.get(container) === handle)
+                bindings.delete(container);
+        },
+    };
+    bindings.set(container, handle);
+    return handle;
+}
+//# sourceMappingURL=rows.js.map

package/src/libs/element/src/lib/diagram-kit/rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rows.js","sourceRoot":"","sources":["../../../../../lib/diagram-kit/rows.ts"],"names":[],"mappings":"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"}

package/src/libs/element/src/lib/diagram-kit/styles.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Diagram-kit stylesheet — injected once, on first use of any kit builder.
+ *
+ * Everything is prefixed `axk-` and the selection overrides are scoped with
+ * `:has(...)` to kit cards only, so embedding the kit can never restyle a
+ * host's own nodes. The rules encode the lessons the diagrams/* demos learned
+ * the hard way:
+ *  - the card fills the node and draws the ONLY border (the node's own rect is
+ *    hidden by the builders, and suppressed again on selection because the
+ *    theme paints `.selected` with an accent stroke that overrides inline
+ *    transparency);
+ *  - the default `.selection-highlight` outline (a dashed rect a few px
+ *    OUTSIDE the node) reads as a second floating box around a bordered card —
+ *    the kit hides it and rings the card itself instead.
+ */
+export declare const DIAGRAM_KIT_STYLE_ID = "grafloria-diagram-kit-styles";
+/** Inject the kit stylesheet once. Safe to call repeatedly and in SSR. */
+export declare function ensureDiagramKitStyles(doc?: Document | undefined): void;

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

@@ -0,0 +1,122 @@
+"use strict";
+/**
+ * Diagram-kit stylesheet — injected once, on first use of any kit builder.
+ *
+ * Everything is prefixed `axk-` and the selection overrides are scoped with
+ * `:has(...)` to kit cards only, so embedding the kit can never restyle a
+ * host's own nodes. The rules encode the lessons the diagrams/* demos learned
+ * the hard way:
+ *  - the card fills the node and draws the ONLY border (the node's own rect is
+ *    hidden by the builders, and suppressed again on selection because the
+ *    theme paints `.selected` with an accent stroke that overrides inline
+ *    transparency);
+ *  - the default `.selection-highlight` outline (a dashed rect a few px
+ *    OUTSIDE the node) reads as a second floating box around a bordered card —
+ *    the kit hides it and rings the card itself instead.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DIAGRAM_KIT_STYLE_ID = void 0;
+exports.ensureDiagramKitStyles = ensureDiagramKitStyles;
+exports.DIAGRAM_KIT_STYLE_ID = 'grafloria-diagram-kit-styles';
+const CSS = `
+/* ===== ER entity (table) cards ===== */
+.axk-entity { font: 12px/1.5 system-ui, sans-serif; border: 1px solid #64748b;
+  border-radius: 6px; overflow: hidden; background: #fff;
+  width: 100%; height: 100%; box-sizing: border-box;
+  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; }
+.axk-entity-head { background: #334155; color: #fff; font-weight: 600;
+  letter-spacing: .3px; padding: 5px 10px; text-transform: uppercase; font-size: 11px; }
+.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; }
+.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;
+}
+.axk-ty:empty::before { content: 'type'; color: #cbd5e1; font-style: italic; }
+.axk-ty:hover { color: #0f172a; }
+.axk-row.axk-pk .axk-col { font-weight: 600; }
+
+/* ===== UML class cards ===== */
+.axk-uml { font: 12px/1.5 system-ui, sans-serif; border: 1px solid #475569;
+  border-radius: 4px; overflow: hidden; background: #fff;
+  width: 100%; height: 100%; box-sizing: border-box;
+  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; }
+.axk-uml-name { text-align: center; font-weight: 700; padding: 5px 10px;
+  background: #eef2ff; color: #1e1b4b; }
+.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; }
+.axk-member { padding: 1px 10px; font: 11px/1.5 ui-monospace, Menlo, monospace;
+  color: #0f172a; white-space: nowrap; }
+
+/* ===== Row interactivity (cards are interactive; drag stays geometric) ===== */
+.axk-entity, .axk-uml { user-select: none; -webkit-user-select: none; }
+.axk-row:hover { background: rgba(37, 99, 235, .07); }
+.axk-member:hover { background: rgba(79, 70, 229, .07); }
+.axk-row-selected, .axk-row-selected:hover { background: rgba(37, 99, 235, .16);
+  box-shadow: inset 2px 0 0 #2563eb; }
+.axk-member.axk-row-selected, .axk-member.axk-row-selected:hover {
+  background: rgba(79, 70, 229, .16); box-shadow: inset 2px 0 0 #4f46e5; }
+
+/* ===== Selection: ring the CARD, never a detached rectangle ===== */
+g.node-group:has(.axk-entity) .selection-highlight,
+g.node-group:has(.axk-uml) .selection-highlight { display: none; }
+g.node-group[data-selected="true"] .axk-entity {
+  border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .45); }
+g.node-group[data-selected="true"] .axk-uml {
+  border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, .45); }
+g.node-group[data-selected="true"]:has(.axk-entity) rect.diagram-node,
+g.node-group[data-selected="true"]:has(.axk-uml) rect.diagram-node {
+  stroke: transparent !important; fill: none !important; }
+
+/* ===== In-canvas editing chrome (only present when editable) ===== */
+.axk-col-del { width: 14px; text-align: center; color: #94a3b8; cursor: pointer;
+  font-weight: 700; opacity: 0; transition: opacity .1s; flex: 0 0 auto; }
+.axk-row:hover .axk-col-del, .axk-member:hover .axk-col-del { opacity: 1; }
+.axk-col-del:hover { color: #dc2626; }
+/* 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-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; }
+.axk-entity-add:hover, .axk-uml-add:hover { background: rgba(37, 99, 235, .08); }
+.axk-edit-input { font: 12px/1.4 system-ui, sans-serif; box-sizing: border-box;
+  border: 1px solid #2563eb; border-radius: 3px; padding: 1px 6px; margin: 0;
+  background: #fff; color: #0f172a; outline: none; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
+
+/* ===== Dark mode ===== */
+@media (prefers-color-scheme: dark) {
+  .axk-entity { background: #1e293b; border-color: #475569; }
+  .axk-row { border-top-color: #334155; }
+  .axk-col { color: #e2e8f0; }
+  .axk-uml { background: #1e293b; border-color: #64748b; }
+  .axk-uml-name { background: #312e81; color: #e0e7ff; }
+  .axk-uml-comp { border-top-color: #64748b; }
+  .axk-member { color: #e2e8f0; }
+}
+`;
+/** Inject the kit stylesheet once. Safe to call repeatedly and in SSR. */
+function ensureDiagramKitStyles(doc = typeof document !== 'undefined' ? document : undefined) {
+    if (!doc)
+        return;
+    if (doc.getElementById(exports.DIAGRAM_KIT_STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = exports.DIAGRAM_KIT_STYLE_ID;
+    style.textContent = CSS;
+    doc.head.appendChild(style);
+}
+//# sourceMappingURL=styles.js.map

package/src/libs/element/src/lib/diagram-kit/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../lib/diagram-kit/styles.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;AAgGH,wDAOC;AArGY,QAAA,oBAAoB,GAAG,8BAA8B,CAAC;AAEnE,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFX,CAAC;AAEF,0EAA0E;AAC1E,SAAgB,sBAAsB,CAAC,MAA4B,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;IACvH,IAAI,CAAC,GAAG;QAAE,OAAO;IACjB,IAAI,GAAG,CAAC,cAAc,CAAC,4BAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,4BAAoB,CAAC;IAChC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC"}

package/src/libs/element/src/lib/diagram-kit/uml.d.ts

@@ -0,0 +1,59 @@
+export interface UmlClassSpec {
+    id: string;
+    /** Displayed name. Defaults to the id. */
+    name?: string;
+    /** Renders as «stereotype» above the name (e.g. 'interface', 'abstract', 'enum'). */
+    stereotype?: string;
+    /** Italicises the name (also set automatically for stereotype 'abstract'/'interface'). */
+    abstract?: boolean;
+    attributes?: string[];
+    methods?: string[];
+    position?: {
+        x: number;
+        y: number;
+    };
+    width?: number;
+    /** Fixed card height — smaller than the content makes the compartments scroll. */
+    height?: number;
+}
+export type UmlRelationKind = 'inheritance' | 'realization' | 'association' | 'directed-association' | 'aggregation' | 'composition' | 'dependency';
+export type UmlSide = 'left' | 'right' | 'top' | 'bottom';
+export interface UmlRelationshipSpec {
+    from: string;
+    to: string;
+    /** Default 'association'. */
+    kind?: UmlRelationKind;
+    label?: string;
+    /** Multiplicity / role chips at the [from, to] ends (e.g. ['0..*', '1']). */
+    multiplicity?: [string, string];
+    fromSide?: UmlSide;
+    toSide?: UmlSide;
+    id?: string;
+}
+export interface UmlDiagramOptions {
+    classes: UmlClassSpec[];
+    relationships?: UmlRelationshipSpec[];
+    /**
+     * Members are selectable by default: click one to select it (painted with
+     * .axk-row-selected; axk:row-click / axk:row-select CustomEvents fire on the
+     * container). Set false to opt out.
+     */
+    rowSelection?: boolean;
+    /**
+     * In-canvas editing (opt-in, default false). When true: double-click the
+     * class name to rename it, double-click a member to rename it, an "add"
+     * affordance per compartment and a per-member delete control — all routed
+     * through {@link updateClass} as one undoable step.
+     */
+    editable?: boolean;
+}
+/**
+ * Build a render() spec for a UML class diagram. Call `spec.finalize(api)`
+ * after render() — multiplicity chips are positioned labels, which only the
+ * live model's `link.addLabel` can express.
+ */
+export declare function umlDiagram(options: UmlDiagramOptions): {
+    nodes: Array<Record<string, unknown>>;
+    edges: Array<Record<string, unknown>>;
+    finalize: (api: unknown) => void;
+};

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

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.umlDiagram = umlDiagram;
+/**
+ * UML class-diagram kit — typed builders for the full relationship vocabulary.
+ *
+ * The packaged form of demos/diagrams/class-uml.html + uml-relationships.html:
+ * three-compartment class cards («stereotype», name, attributes, methods) and
+ * every standard relationship with its real notation:
+ *
+ *   inheritance          ── solid,  hollow triangle at the parent
+ *   realization          ┄┄ dashed, hollow triangle at the interface
+ *   association          ── plain line (multiplicity chips optional)
+ *   directed-association ── open arrow at the target
+ *   aggregation          ── hollow diamond at the whole (source)
+ *   composition          ── FILLED diamond at the whole (source)
+ *   dependency           ┄┄ dashed, open arrow («uses»)
+ *
+ * ```ts
+ * const spec = umlDiagram({
+ *   classes: [{ id: 'Shape', abstract: true, attributes: ['# x: float'], methods: ['+ area(): float'] }],
+ *   relationships: [{ from: 'Circle', to: 'Shape', kind: 'inheritance' }],
+ * });
+ * const api = render(spec, container);
+ * spec.finalize(api); // attaches multiplicity chips (needs the live model)
+ * ```
+ */
+const styles_1 = require("./styles");
+const rows_1 = require("./rows");
+const card_1 = require("./card");
+const editing_1 = require("./editing");
+const DEFAULT_WIDTH = 200;
+const STROKE = '#475569';
+const DASH = '6,4';
+/**
+ * The notation table. Every kind sets arrowHead EXPLICITLY — a plain line must
+ * carry `arrowHead: none`, or the renderer paints its default arrow (the
+ * stray-arrowhead bug the demos hit live).
+ */
+function edgeStyleFor(kind) {
+    const none = { type: 'none', size: 0, filled: false };
+    switch (kind) {
+        case 'inheritance':
+            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: { type: 'generalization', size: 16, filled: false }, arrowTail: none };
+        case 'realization':
+            return { stroke: STROKE, strokeWidth: 1.5, strokeDasharray: DASH, arrowHead: { type: 'generalization', size: 16, filled: false }, arrowTail: none };
+        case 'association':
+            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: none, arrowTail: none };
+        case 'directed-association':
+            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: { type: 'open-arrow', size: 12, filled: false }, arrowTail: none };
+        case 'aggregation':
+            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: none, arrowTail: { type: 'hollow-diamond', size: 14, filled: false } };
+        case 'composition':
+            return { stroke: STROKE, strokeWidth: 1.5, arrowHead: none, arrowTail: { type: 'filled-diamond', size: 14, filled: true } };
+        case 'dependency':
+            return { stroke: STROKE, strokeWidth: 1.5, strokeDasharray: DASH, arrowHead: { type: 'open-arrow', size: 12, filled: false }, arrowTail: none };
+    }
+}
+/** Multiplicity chip, positioned near an edge end. */
+const chip = (text, slot) => ({
+    text,
+    slot,
+    offset: { x: 0, y: -7 },
+    style: { fontSize: 11, fontWeight: '600', color: '#0f172a', background: '#ffffffdd', padding: 1, borderRadius: 2 },
+});
+/**
+ * Build a render() spec for a UML class diagram. Call `spec.finalize(api)`
+ * after render() — multiplicity chips are positioned labels, which only the
+ * live model's `link.addLabel` can express.
+ */
+function umlDiagram(options) {
+    var _a;
+    (0, styles_1.ensureDiagramKitStyles)();
+    const editable = options.editable === true;
+    const nodes = options.classes.map((cls, i) => {
+        var _a, _b;
+        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: (0, card_1.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: (0, card_1.classCardContent)(cls, editable), interactive: true }, kitClass: cls, kitEditable: editable }, (options.rowSelection === false ? { kitRowSelection: false } : {})),
+            shape: { type: 'rect', fill: 'none', stroke: 'none' },
+            style: { fill: 'transparent', stroke: 'transparent', strokeWidth: 0 },
+        };
+    });
+    const rels = (_a = options.relationships) !== null && _a !== void 0 ? _a : [];
+    const edges = rels.map((rel, i) => {
+        var _a, _b;
+        return (Object.assign(Object.assign(Object.assign({ id: (_a = rel.id) !== null && _a !== void 0 ? _a : `uml-rel-${i + 1}`, source: rel.from, target: rel.to, label: rel.label, type: 'orthogonal' }, (rel.fromSide ? { sourceHandle: rel.fromSide } : {})), (rel.toSide ? { targetHandle: rel.toSide } : {})), { style: edgeStyleFor((_b = rel.kind) !== null && _b !== void 0 ? _b : 'association') }));
+    });
+    // finalize is idempotent per api: render() auto-runs it, and a demo may also
+    // call it — chips must not be added twice.
+    const finalized = new WeakSet();
+    const finalize = (api) => {
+        var _a, _b, _c, _d, _e, _f;
+        const a0 = api;
+        // Own card ring only — suppress the node resize handles on the live model
+        // (the render-input path does not honour a spec-level `behavior`).
+        const m0 = (_a = a0 === null || a0 === void 0 ? void 0 : a0.getModel) === null || _a === void 0 ? void 0 : _a.call(a0);
+        if (m0)
+            for (const cls of options.classes)
+                (_d = (_c = (_b = m0.getNode) === null || _b === void 0 ? void 0 : _b.call(m0, cls.id)) === null || _c === void 0 ? void 0 : _c.setBehavior) === null || _d === void 0 ? void 0 : _d.call(_c, { resizable: false });
+        if (options.rowSelection !== false) {
+            const a = api;
+            // bindRowInteractions disposes any prior binding for the container, so it
+            // is safe to run twice.
+            if (a === null || a === void 0 ? void 0 : a.container)
+                (0, rows_1.bindRowInteractions)(a);
+        }
+        if (editable && (a0 === null || a0 === void 0 ? void 0 : a0.container))
+            (0, editing_1.bindCardEditing)(a0);
+        if (api && typeof api === 'object') {
+            if (finalized.has(api))
+                return;
+            finalized.add(api);
+        }
+        const model = (_e = api === null || api === void 0 ? void 0 : api.getModel) === null || _e === void 0 ? void 0 : _e.call(api);
+        if (!model)
+            return;
+        let added = false;
+        rels.forEach((rel, i) => {
+            if (!rel.multiplicity)
+                return;
+            const link = model.getLink(edges[i].id);
+            if (!link)
+                return;
+            link.addLabel(chip(rel.multiplicity[0], 'start'));
+            link.addLabel(chip(rel.multiplicity[1], 'end'));
+            added = true;
+        });
+        if (added)
+            (_f = api === null || api === void 0 ? void 0 : api.renderNow) === null || _f === void 0 ? void 0 : _f.call(api);
+    };
+    return { nodes, edges, finalize };
+}
+//# sourceMappingURL=uml.js.map

package/src/libs/element/src/lib/diagram-kit/uml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uml.js","sourceRoot":"","sources":["../../../../../lib/diagram-kit/uml.ts"],"names":[],"mappings":"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"}

package/src/libs/element/src/lib/diagram-kit/update.d.ts

@@ -0,0 +1,133 @@
+/**
+ * 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 type { ErColumn } from './er';
+/** What an ER table edit can change. Omitted fields are left as they were. */
+export interface ErEntityDelta {
+    name?: string;
+    width?: number;
+    height?: number;
+    /**
+     * The NEW full column list. Survivors are matched to the old columns to move
+     * their ports (object identity → name → positional remainder), so a rename,
+     * a retype, a reorder, an insert and a delete are all understood without the
+     * caller preserving object references. See {@link matchColumns}.
+     */
+    columns?: ErColumn[];
+}
+/** What a UML class edit can change. */
+export interface UmlClassDelta {
+    name?: string;
+    stereotype?: string;
+    abstract?: boolean;
+    width?: number;
+    height?: number;
+    attributes?: string[];
+    methods?: string[];
+}
+interface LivePort {
+    id: string;
+    offset?: {
+        x: number;
+        y: number;
+    };
+    alignment?: {
+        side?: string;
+    };
+    layout?: {
+        strategy?: string;
+        args?: {
+            units?: string;
+            x?: number;
+            y?: number;
+            dy?: number;
+        };
+    };
+    serialize(): Record<string, unknown>;
+    setOffset(o: {
+        x: number;
+        y: number;
+    }): void;
+}
+interface LiveLink {
+    id: string;
+    sourcePortId?: string;
+    targetPortId?: string;
+    serialize(): Record<string, unknown>;
+}
+interface LiveNode {
+    size: {
+        width: number;
+        height: number;
+    };
+    getMetadata(key: string): unknown;
+    setMetadata(key: string, value: unknown): void;
+    setSize(w: number, h: number): void;
+    getPorts(): LivePort[];
+    getPort(id: string): LivePort | undefined;
+    addPort(p: unknown): void;
+    removePort(id: string): unknown;
+}
+interface LiveModel {
+    getNode(id: string): LiveNode | undefined;
+    getLinks(): LiveLink[];
+    getLink(id: string): LiveLink | undefined;
+    removeLink(id: string): unknown;
+    addLink(l: unknown): void;
+}
+interface KitApi {
+    getModel?: () => LiveModel;
+    getEngine?: () => {
+        commandManager?: {
+            execute: (c: unknown) => Promise<void>;
+        };
+    } | undefined;
+    renderNow?: () => void;
+}
+/**
+ * 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 declare function updateEntity(api: KitApi, entityId: string, delta: ErEntityDelta): Promise<boolean>;
+/**
+ * Edit a rendered UML class in place. `delta` may change the name, stereotype,
+ * abstract flag, attributes, methods, and width/height. One undoable step.
+ */
+export declare function updateClass(api: KitApi, classId: string, delta: UmlClassDelta): Promise<boolean>;
+/** Append a column (immutably) — returns the new column array. */
+export declare function addColumnAt(columns: ErColumn[], column: ErColumn, at?: number): ErColumn[];
+/** Remove the column at `index` — returns the new column array. */
+export declare function removeColumnAt(columns: ErColumn[], index: number): ErColumn[];
+/** Rename the column at `index` — returns a new array with a NEW object there. */
+export declare function renameColumnAt(columns: ErColumn[], index: number, name: string): ErColumn[];
+export {};