@grafloria/element 0.3.18 → 0.3.20

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

@@ -0,0 +1,448 @@
+/**
+ * In-canvas editing chrome (P2 title rename + P4 column/member editing).
+ *
+ * Bound once per container by a kit's `finalize(api)` when `editable: true`.
+ * It turns the editing affordances the card already draws (`card.ts` grows them
+ * when editable) into gestures:
+ *
+ *   - double-click the header (`.axk-entity-head` / `.axk-uml-name`) → rename
+ *     the table / class;
+ *   - double-click a column name (`.axk-col`) or a member (`.axk-member`) →
+ *     rename it in place;
+ *   - click the "＋ add column" / "＋ attribute" / "＋ method" affordance → add
+ *     one, then inline-edit its name;
+ *   - click a row's "×" delete control → remove that column / member.
+ *
+ * Every mutation goes through {@link updateEntity} / {@link updateClass} — so it
+ * is ONE undoable step and the card + ports + edges stay consistent.
+ *
+ * The inline editor is a real `<input>` mounted in the renderer's WORLD layer
+ * via `createViewportPortal`, so it pans and zooms WITH the card. When there is
+ * no world layer (a bare jsdom mount, or a host that swapped the renderer) it
+ * falls back to an absolutely-positioned input in the container — the edit
+ * still commits, it just doesn't track the camera.
+ *
+ * Control clicks are claimed in the CAPTURE phase (`stopPropagation`) so the
+ * row-selection handler and the binder's node/​waypoint double-click never also
+ * fire for the same gesture.
+ */
+import { updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt } from './update';
+const bindings = new WeakMap();
+const ROW_SELECTOR = '.axk-row, .axk-member';
+/** Resolve the node id + the clicked row's global index (among selectable rows). */
+function locate(el) {
+    const group = el.closest('[data-node-id]');
+    if (!group)
+        return null;
+    const nodeId = group.getAttribute('data-node-id');
+    if (!nodeId)
+        return null;
+    const rowEl = el.closest(ROW_SELECTOR);
+    const rows = Array.from(group.querySelectorAll(ROW_SELECTOR));
+    const rowIndex = rowEl ? rows.indexOf(rowEl) : -1;
+    return { nodeId, rowIndex, group };
+}
+const kitEntity = (api, nodeId) => { var _a; return (_a = api.getModel().getNode(nodeId)) === null || _a === void 0 ? void 0 : _a.getMetadata('kitEntity'); };
+const kitClass = (api, nodeId) => { var _a; return (_a = api.getModel().getNode(nodeId)) === null || _a === void 0 ? void 0 : _a.getMetadata('kitClass'); };
+/** UML: split a global member index into its compartment + local index. */
+function umlSection(cls, rowIndex) {
+    var _a;
+    const attrs = (_a = cls.attributes) !== null && _a !== void 0 ? _a : [];
+    return rowIndex < attrs.length
+        ? { section: 'attributes', local: rowIndex }
+        : { section: 'methods', local: rowIndex - attrs.length };
+}
+/**
+ * Mount a focused `<input>` over `targetEl`, prefilled with `value`. Commits on
+ * Enter/blur, cancels on Escape. Returns the input (already in the DOM).
+ */
+/**
+ * The inline editor currently open, if any.
+ *
+ * The editor is mounted in the renderer's WORLD layer, not inside the card, so
+ * it does not die when the card re-renders. That is what lets it survive a
+ * re-render mid-edit — and it is also why deleting the very row being edited
+ * used to leave a stray input floating over the canvas: the row vanished, the
+ * portal did not. Any structural edit now dismisses it first.
+ */
+let activeEditor = null;
+/** Dismiss any open inline editor WITHOUT committing. */
+export function dismissInlineEditor() {
+    const open = activeEditor;
+    activeEditor = null;
+    open === null || open === void 0 ? void 0 : open.cancel();
+}
+function addrOf(el) {
+    const loc = locate(el);
+    if (!loc || loc.rowIndex < 0)
+        return null;
+    const kind = el.closest('.axk-ty') ? 'type' : 'name';
+    return { nodeId: loc.nodeId, rowIndex: loc.rowIndex, kind };
+}
+/** The cell `dir` steps away in reading order (name → type → next row's name). */
+function neighbourCell(el, dir) {
+    const a = addrOf(el);
+    if (!a)
+        return null;
+    if (dir === 1) {
+        return a.kind === 'name'
+            ? Object.assign(Object.assign({}, a), { kind: 'type' }) : Object.assign(Object.assign({}, a), { rowIndex: a.rowIndex + 1, kind: 'name' });
+    }
+    return a.kind === 'type'
+        ? Object.assign(Object.assign({}, a), { kind: 'name' }) : Object.assign(Object.assign({}, a), { rowIndex: a.rowIndex - 1, kind: 'type' });
+}
+/** The same column, one row down. */
+function cellBelow(el) {
+    const a = addrOf(el);
+    return a ? Object.assign(Object.assign({}, a), { rowIndex: a.rowIndex + 1 }) : null;
+}
+/** Re-open the editor at an address, if that cell still exists. */
+function reopenAt(api, addr) {
+    const card = api.container.querySelector(`[data-node-id="${cssEscape(addr.nodeId)}"]`);
+    const row = card === null || card === void 0 ? void 0 : card.querySelectorAll('.axk-row, .axk-member')[addr.rowIndex];
+    const cell = row === null || row === void 0 ? void 0 : row.querySelector(addr.kind === 'type' ? '.axk-ty' : '.axk-col');
+    if (cell)
+        beginRename(api, cell);
+}
+/** First occurrence wins, order preserved. */
+function dedupe(values) {
+    return [...new Set(values)];
+}
+/** SQL-ish column types offered when editing a type cell. */
+export const ER_TYPE_SUGGESTIONS = [
+    'uuid', 'int', 'bigint', 'smallint', 'serial', 'decimal', 'numeric', 'real', 'double',
+    'varchar', 'text', 'char', 'boolean', 'date', 'time', 'timestamp', 'timestamptz',
+    'json', 'jsonb', 'bytea', 'enum',
+];
+function openInlineEditor(api, targetEl, value, onCommit, suggestions) {
+    const container = api.container;
+    const doc = container.ownerDocument;
+    const input = doc.createElement('input');
+    input.className = 'axk-edit-input';
+    input.value = value;
+    input.spellcheck = false;
+    input.setAttribute('autocomplete', 'off');
+    // A type is a choice, not free prose. `<datalist>` gives a real combobox —
+    // the browser filters the list AS YOU TYPE and still allows a value that is
+    // not in it, which is what a schema editor needs (custom/domain types).
+    let listEl = null;
+    if (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) {
+        listEl = doc.createElement('datalist');
+        listEl.id = `axk-types-${Math.random().toString(36).slice(2, 8)}`;
+        for (const t of suggestions) {
+            const opt = doc.createElement('option');
+            opt.value = t;
+            listEl.appendChild(opt);
+        }
+        doc.body.appendChild(listEl);
+        input.setAttribute('list', listEl.id);
+    }
+    // POSITIONING — screen space, deliberately.
+    //
+    // This used to mount the input in the renderer's world layer through a
+    // viewport portal so it would scale and pan with the canvas. That produced a
+    // steady trickle of defects: the caret landed between two rows (world/zoom
+    // maths compounding with the card's own scroll offset), and — because the
+    // world layer carries a CSS transform — the browser refused to place the
+    // native <datalist> popup, so the type dropdown never opened.
+    //
+    // An inline editor lives for a few seconds. Pinning it over the cell's actual
+    // screen rect is exact by construction (no maths to get wrong) and keeps it
+    // out of any transformed ancestor, which is what the native popup needs. The
+    // cost is that it does not follow a pan mid-edit; that is a fair trade for an
+    // editor that is reliably WHERE THE CELL IS.
+    const rect = targetEl.getBoundingClientRect();
+    const host = container.getBoundingClientRect();
+    const minW = (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) ? 132 : 72;
+    let w = Math.max(rect.width, minW);
+    let left = rect.left;
+    // Never spill past the card: slide left to fit, shrink only if the card is
+    // narrower than the floor.
+    const card = targetEl.closest('.axk-entity, .axk-uml');
+    if (card) {
+        const cb = card.getBoundingClientRect();
+        const pad = 4;
+        if (w > cb.width - pad * 2)
+            w = cb.width - pad * 2;
+        const overflow = left + w - (cb.right - pad);
+        if (overflow > 0)
+            left -= overflow;
+        if (left < cb.left + pad)
+            left = cb.left + pad;
+    }
+    // `position: fixed` keys off the viewport, exactly like getBoundingClientRect,
+    // so no ancestor offset or scroll correction can drift it.
+    input.style.cssText =
+        `position:fixed;left:${Math.round(left)}px;top:${Math.round(rect.top)}px;` +
+            `width:${Math.round(w)}px;height:${Math.round(rect.height)}px;z-index:2147483000;`;
+    void host; // container rect intentionally unused: fixed positioning needs none
+    // Mounted on the CONTAINER, not document.body: hosts (and the kit's own
+    // tests) look the editor up inside the diagram container, and moving it out
+    // silently broke every one of those lookups. `position: fixed` still keys off
+    // the viewport, so it stays exact — the point was only ever to escape the
+    // world layer's CSS transform, which is a descendant of the container.
+    container.appendChild(input);
+    /** Guards double-settling (blur fires after Enter/Escape already handled it). */
+    let done = false;
+    const self = { cancel: () => undefined };
+    const cleanup = () => {
+        if (activeEditor === self)
+            activeEditor = null;
+        listEl === null || listEl === void 0 ? void 0 : listEl.remove();
+        input.remove();
+    };
+    const commit = () => {
+        if (done)
+            return;
+        done = true;
+        const next = input.value.trim();
+        cleanup();
+        if (next.length)
+            onCommit(next);
+    };
+    const cancel = () => {
+        if (done)
+            return;
+        done = true;
+        cleanup();
+    };
+    input.addEventListener('keydown', (e) => {
+        // Keyboard navigation: TAB walks the cells (name → type → next row's name,
+        // Shift+Tab back). Enter deliberately does NOT move — it commits and
+        // closes, which is what every other inline editor in the app does and what
+        // a user pressing Enter to "finish" expects. Navigation belongs on Tab.
+        if (e.key === 'Tab') {
+            const next = neighbourCell(targetEl, e.shiftKey ? -1 : 1);
+            if (next) {
+                e.preventDefault();
+                commit();
+                // Re-open on the next cell after the card has re-rendered.
+                setTimeout(() => reopenAt(api, next), 0);
+                return;
+            }
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            commit();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            cancel();
+        }
+        e.stopPropagation();
+    });
+    // Registered AFTER commit/cancel exist so a structural edit can dismiss it.
+    self.cancel = cancel;
+    activeEditor = self;
+    input.addEventListener('blur', commit);
+    // Don't let a click INSIDE the input bubble to the canvas (deselect / pan).
+    // Keep the canvas binder OUT of the editor. It listens on POINTER events and
+    // preventDefaults them to own the gesture — which also suppressed the native
+    // <datalist> popup, so the type dropdown either never opened or flashed open
+    // and shut. Guarding `mousedown` alone was not enough: pointerdown fires
+    // first and is what the binder acts on.
+    for (const type of ['pointerdown', 'pointerup', 'mousedown', 'mouseup', 'click', 'dblclick']) {
+        input.addEventListener(type, (e) => e.stopPropagation());
+    }
+    // Focus after mount so select() works.
+    setTimeout(() => {
+        input.focus();
+        input.select();
+    }, 0);
+    return input;
+}
+/** Begin renaming whatever the clicked row/header targets. */
+function beginRename(api, target) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const loc = locate(target);
+    if (!loc)
+        return;
+    const { nodeId, rowIndex } = loc;
+    // Title (ER header / UML name).
+    if (target.closest('.axk-entity-head')) {
+        const ent = kitEntity(api, nodeId);
+        openInlineEditor(api, target.closest('.axk-entity-head'), (_a = ent === null || ent === void 0 ? void 0 : ent.name) !== null && _a !== void 0 ? _a : nodeId, (name) => void updateEntity(api, nodeId, { name }));
+        return;
+    }
+    if (target.closest('.axk-uml-name')) {
+        const cls = kitClass(api, nodeId);
+        openInlineEditor(api, target.closest('.axk-uml-name'), (_b = cls === null || cls === void 0 ? void 0 : cls.name) !== null && _b !== void 0 ? _b : nodeId, (name) => void updateClass(api, nodeId, { name }));
+        return;
+    }
+    // ER column. Which CELL was double-clicked decides what gets edited and where
+    // the input is mounted: the name span (`.axk-col`) and the type span
+    // (`.axk-ty`) are SIBLINGS inside `.axk-row`. Editing only ever handled the
+    // name and always anchored to it, so double-clicking a type either did
+    // nothing or dropped the caret over the name — the wrong field in the wrong
+    // place. A double-click anywhere else on the row falls back to the name,
+    // anchored to the name cell, so the gesture is predictable everywhere.
+    const typeEl = target.closest('.axk-ty');
+    if (typeEl && rowIndex >= 0) {
+        const ent = kitEntity(api, nodeId);
+        if (!ent)
+            return;
+        openInlineEditor(api, typeEl, (_d = (_c = ent.columns[rowIndex]) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : '', (type) => {
+            const columns = ent.columns.map((c, i) => (i === rowIndex ? Object.assign(Object.assign({}, c), { type }) : c));
+            void updateEntity(api, nodeId, { columns });
+        }, 
+        // Offer the types already used in THIS diagram first, then the standards —
+        // a schema is usually internally consistent, so what you just typed
+        // elsewhere is the likeliest next value.
+        dedupe([...ent.columns.map((c) => c.type).filter(Boolean), ...ER_TYPE_SUGGESTIONS]));
+        return;
+    }
+    const rowEl = target.closest('.axk-row');
+    const colEl = (_f = (_e = target.closest('.axk-col')) !== null && _e !== void 0 ? _e : rowEl === null || rowEl === void 0 ? void 0 : rowEl.querySelector('.axk-col')) !== null && _f !== void 0 ? _f : null;
+    if (colEl && rowIndex >= 0) {
+        const ent = kitEntity(api, nodeId);
+        if (!ent)
+            return;
+        openInlineEditor(api, colEl, (_h = (_g = ent.columns[rowIndex]) === null || _g === void 0 ? void 0 : _g.name) !== null && _h !== void 0 ? _h : '', (name) => void updateEntity(api, nodeId, { columns: renameColumnAt(ent.columns, rowIndex, name) }));
+        return;
+    }
+    // UML member rename.
+    const memberEl = target.closest('.axk-member');
+    if (memberEl && rowIndex >= 0) {
+        const cls = kitClass(api, nodeId);
+        if (!cls)
+            return;
+        const { section, local } = umlSection(cls, rowIndex);
+        const list = ((_j = cls[section]) !== null && _j !== void 0 ? _j : []).slice();
+        openInlineEditor(api, (_k = memberEl.querySelector('.axk-mtext')) !== null && _k !== void 0 ? _k : memberEl, (_l = list[local]) !== null && _l !== void 0 ? _l : '', (next) => {
+            list[local] = next;
+            void updateClass(api, nodeId, { [section]: list });
+        });
+    }
+}
+/** Add a column / member (then inline-edit the new one). Returns true if handled. */
+function handleAdd(api, target) {
+    var _a;
+    const addEr = target.closest('.axk-entity-add');
+    if (addEr) {
+        const loc = locate(addEr);
+        if (!loc)
+            return true;
+        const ent = kitEntity(api, loc.nodeId);
+        if (!ent)
+            return true;
+        const columns = addColumnAt(ent.columns, { name: 'new_column', type: '' });
+        void updateEntity(api, loc.nodeId, { columns }).then(() => {
+            const newRow = api.container.querySelectorAll(`[data-node-id="${cssEscape(loc.nodeId)}"] .axk-row`)[columns.length - 1];
+            const col = newRow === null || newRow === void 0 ? void 0 : newRow.querySelector('.axk-col');
+            if (col)
+                beginRename(api, col);
+        });
+        return true;
+    }
+    const addUml = target.closest('.axk-uml-add');
+    if (addUml) {
+        const loc = locate(addUml);
+        if (!loc)
+            return true;
+        const cls = kitClass(api, loc.nodeId);
+        if (!cls)
+            return true;
+        const comps = Array.from(loc.group.querySelectorAll('.axk-uml-comp'));
+        const section = comps.indexOf(addUml.closest('.axk-uml-comp')) === 0 ? 'attributes' : 'methods';
+        const list = [...((_a = cls[section]) !== null && _a !== void 0 ? _a : []), section === 'attributes' ? '+ field: type' : '+ method(): void'];
+        void updateClass(api, loc.nodeId, { [section]: list });
+        return true;
+    }
+    return false;
+}
+/** Delete the column / member whose "×" control was clicked. Returns true if handled. */
+function handleDelete(api, target) {
+    var _a;
+    const del = target.closest('.axk-col-del');
+    if (!del)
+        return false;
+    const loc = locate(del);
+    if (!loc || loc.rowIndex < 0)
+        return true;
+    const ent = kitEntity(api, loc.nodeId);
+    if (ent) {
+        void updateEntity(api, loc.nodeId, { columns: removeColumnAt(ent.columns, loc.rowIndex) });
+        return true;
+    }
+    const cls = kitClass(api, loc.nodeId);
+    if (cls) {
+        const { section, local } = umlSection(cls, loc.rowIndex);
+        const list = ((_a = cls[section]) !== null && _a !== void 0 ? _a : []).slice();
+        list.splice(local, 1);
+        void updateClass(api, loc.nodeId, { [section]: list });
+    }
+    return true;
+}
+function cssEscape(id) {
+    return typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id.replace(/"/g, '\\"');
+}
+/**
+ * Wire the editing gestures onto a kit container. Idempotent per container
+ * (a re-bind disposes the previous one), matching `bindRowInteractions`.
+ */
+export function bindCardEditing(api) {
+    var _a;
+    const container = api.container;
+    (_a = bindings.get(container)) === null || _a === void 0 ? void 0 : _a.dispose();
+    const onClickCapture = (event) => {
+        const target = event.target instanceof Element ? event.target : null;
+        if (!target)
+            return;
+        // Claim control clicks BEFORE row-selection / canvas handlers see them.
+        // An open editor is dismissed first: its row may be the one being removed,
+        // and committing a rename into a structural change is a race even when it
+        // is not (the card re-renders under the caret).
+        if (target.closest('.axk-col-del') || target.closest('.axk-entity-add') || target.closest('.axk-uml-add')) {
+            dismissInlineEditor();
+        }
+        if (handleDelete(api, target) || handleAdd(api, target)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    const onDblClickCapture = (event) => {
+        const target = event.target instanceof Element ? event.target : null;
+        if (!target)
+            return;
+        if (target.closest('.axk-edit-input'))
+            return; // don't re-open over our own input
+        if (target.closest('.axk-entity-head') ||
+            target.closest('.axk-uml-name') ||
+            target.closest('.axk-col') ||
+            target.closest('.axk-ty') ||
+            target.closest('.axk-row') ||
+            target.closest('.axk-member')) {
+            event.preventDefault();
+            event.stopPropagation();
+            beginRename(api, target);
+        }
+    };
+    // A control press must dismiss the editor BEFORE the browser's focus change
+    // fires `blur` → `commit`. Doing it on `click` was too late: the rename had
+    // already landed, so deleting the row you were editing renamed it first and
+    // then removed a shifted index. preventDefault keeps focus in place too.
+    const onMouseDownCapture = (event) => {
+        const t = event.target instanceof Element ? event.target : null;
+        if (!t)
+            return;
+        if (t.closest('.axk-col-del') || t.closest('.axk-entity-add') || t.closest('.axk-uml-add')) {
+            dismissInlineEditor();
+            event.preventDefault();
+        }
+    };
+    container.addEventListener('mousedown', onMouseDownCapture, true);
+    container.addEventListener('click', onClickCapture, true);
+    container.addEventListener('dblclick', onDblClickCapture, true);
+    const handle = {
+        dispose() {
+            container.removeEventListener('mousedown', onMouseDownCapture, true);
+            container.removeEventListener('click', onClickCapture, true);
+            container.removeEventListener('dblclick', onDblClickCapture, true);
+            if (bindings.get(container) === handle)
+                bindings.delete(container);
+        },
+    };
+    bindings.set(container, handle);
+    return handle;
+}
+//# sourceMappingURL=editing.js.map

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

@@ -0,0 +1,160 @@
+/**
+ * ER diagram kit — typed builders for database entity-relationship diagrams.
+ *
+ * The packaged form of what demos/diagrams/table-er.html and er-advanced.html
+ * hand-composed: HTML "table" cards (header, typed columns, PK/FK badges),
+ * crow's-foot cardinality edges, and field-level FK→PK connections via
+ * absolute-layout ports. An embedder writes data:
+ *
+ * ```ts
+ * const spec = erDiagram({
+ *   entities: [
+ *     { id: 'CUSTOMER', columns: [{ name: 'id', type: 'int', pk: true }, …] },
+ *     { id: 'ORDER',    columns: [{ name: 'customer_id', type: 'int', fk: true }, …] },
+ *   ],
+ *   relationships: [
+ *     { from: 'CUSTOMER', to: 'ORDER', label: 'places' },              // table-level
+ *     { from: 'ORDER.customer_id', to: 'CUSTOMER.id' },                // field-level
+ *   ],
+ * });
+ * render(spec, container);
+ * ```
+ */
+import { ensureDiagramKitStyles } from './styles';
+import { bindRowInteractions } from './rows';
+import { entityCardContent, entityAutoHeight, erRowCenterY, ER_ROW_H, ER_HEAD_H } from './card';
+import { bindCardEditing } from './editing';
+// 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'`
+// 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' },
+    'many-to-many': { tail: 'crow-foot', head: 'crow-foot' },
+    'one-to-zero-or-many': { tail: 'one', head: 'zero-or-many' },
+    'one-to-one-or-many': { tail: 'one', head: 'one-or-many' },
+};
+function parseEnd(ref, byId) {
+    const dot = ref.indexOf('.');
+    const entityId = dot === -1 ? ref : ref.slice(0, dot);
+    const entity = byId.get(entityId);
+    if (!entity)
+        throw new Error(`erDiagram: unknown entity "${entityId}" in relationship end "${ref}"`);
+    if (dot === -1)
+        return { entity };
+    const column = ref.slice(dot + 1);
+    const rowIndex = entity.columns.findIndex((c) => c.name === column);
+    if (rowIndex === -1) {
+        throw new Error(`erDiagram: entity "${entityId}" has no column "${column}" (relationship end "${ref}")`);
+    }
+    return { entity, column, rowIndex };
+}
+/**
+ * Build a render() spec for an ER diagram.
+ *
+ * Entities become HTML table cards; relationships become orthogonal edges with
+ * crow's-foot cardinality. A `TABLE.column` end pins the edge to that row via
+ * an absolute-layout port (the FK→PK look). Two edges landing on the same
+ * column are automatically spread apart.
+ */
+export function erDiagram(options) {
+    var _a;
+    ensureDiagramKitStyles();
+    const byId = new Map(options.entities.map((e) => [e.id, e]));
+    // Field-level ports are accumulated per entity while walking relationships.
+    const portsByEntity = new Map();
+    // 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; };
+    const fieldPort = (end, side) => {
+        var _a, _b;
+        const entity = end.entity;
+        const key = `${entity.id}#${end.rowIndex}#${side}`;
+        const landing = (_a = rowLandings.get(key)) !== null && _a !== void 0 ? _a : 0;
+        rowLandings.set(key, landing + 1);
+        // Spread repeat landings ±5px around the row centre: 0, -5, +5, -10, …
+        const dy = landing === 0 ? 0 : (landing % 2 === 1 ? -1 : 1) * Math.ceil(landing / 2) * 5;
+        const id = `${entity.id}__${end.column}__${side}__${landing}`;
+        const w = width(entity);
+        const port = {
+            id,
+            side,
+            visible: false,
+            layout: {
+                strategy: 'absolute',
+                args: {
+                    units: 'px',
+                    x: side === 'right' ? w : side === 'left' ? 0 : w / 2,
+                    y: erRowCenterY(end.rowIndex),
+                    dy,
+                },
+            },
+        };
+        const bucket = (_b = portsByEntity.get(entity.id)) !== null && _b !== void 0 ? _b : [];
+        bucket.push(port);
+        portsByEntity.set(entity.id, bucket);
+        return id;
+    };
+    const edges = ((_a = options.relationships) !== null && _a !== void 0 ? _a : []).map((rel, i) => {
+        var _a, _b, _c, _d, _e;
+        const from = parseEnd(rel.from, byId);
+        const to = parseEnd(rel.to, byId);
+        const fromSide = (_a = rel.fromSide) !== null && _a !== void 0 ? _a : 'right';
+        const toSide = (_b = rel.toSide) !== null && _b !== void 0 ? _b : 'left';
+        const markers = typeof rel.cardinality === 'object'
+            ? rel.cardinality
+            : CARDINALITY[(_c = rel.cardinality) !== null && _c !== void 0 ? _c : 'one-to-many'];
+        return {
+            id: (_d = rel.id) !== null && _d !== void 0 ? _d : `er-rel-${i + 1}`,
+            source: from.entity.id,
+            target: to.entity.id,
+            label: rel.label,
+            type: 'orthogonal',
+            sourceHandle: from.column !== undefined ? fieldPort(from, fromSide) : fromSide,
+            targetHandle: to.column !== undefined ? fieldPort(to, toSide) : toSide,
+            style: {
+                stroke: (_e = rel.color) !== null && _e !== void 0 ? _e : '#64748b',
+                strokeWidth: 1.5,
+                arrowTail: { type: markers.tail, size: 8, filled: false },
+                arrowHead: { type: markers.head, size: 9, filled: false },
+            },
+        };
+    });
+    const editable = options.editable === true;
+    const nodes = options.entities.map((entity, i) => {
+        var _a;
+        return (Object.assign({ id: entity.id, position: (_a = entity.position) !== null && _a !== void 0 ? _a : { x: 60 + (i % 3) * 340, y: 60 + Math.floor(i / 3) * 280 }, size: { width: width(entity), height: entityAutoHeight(entity, editable) }, 
+            // interactive: rows are real DOM targets (hover, row selection, inline
+            // editing) — node drag/select stay geometric in the binder.
+            metadata: Object.assign({ html: { content: entityCardContent(entity, editable), interactive: true }, kitEntity: entity, kitEditable: editable }, (options.rowSelection === false ? { kitRowSelection: false } : {})), 
+            // The card draws its own border — the node's default rectangle is hidden
+            // (and re-suppressed on selection by the kit stylesheet).
+            shape: { type: 'rect', fill: 'none', stroke: 'none' }, style: { fill: 'transparent', stroke: 'transparent', strokeWidth: 0 } }, (portsByEntity.has(entity.id) ? { ports: portsByEntity.get(entity.id) } : {})));
+    });
+    return {
+        nodes,
+        edges,
+        finalize: (api) => {
+            var _a, _b, _c, _d;
+            const a = api;
+            // The card draws its OWN selection ring — suppress the node resize handles
+            // on the live model (they'd frame the card in a SECOND rectangle). Set here
+            // because the render-input path does not honour a spec-level `behavior`.
+            const model = (_a = a === null || a === void 0 ? void 0 : a.getModel) === null || _a === void 0 ? void 0 : _a.call(a);
+            if (model)
+                for (const e of options.entities)
+                    (_d = (_c = (_b = model.getNode) === null || _b === void 0 ? void 0 : _b.call(model, e.id)) === null || _c === void 0 ? void 0 : _c.setBehavior) === null || _d === void 0 ? void 0 : _d.call(_c, { resizable: false });
+            if (options.rowSelection !== false && (a === null || a === void 0 ? void 0 : a.container))
+                bindRowInteractions(a);
+            // Editing chrome (dbl-click rename, add/delete column) — opt-in, and safe
+            // to run alongside row selection (it claims control clicks in the capture
+            // phase before the selection handler sees them).
+            if (editable && (a === null || a === void 0 ? void 0 : a.container))
+                bindCardEditing(a);
+        },
+    };
+}
+//# sourceMappingURL=er.js.map