@grafloria/element 0.3.23 → 0.4.0

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

@@ -1,448 +0,0 @@
-/**
- * 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

@@ -1,160 +0,0 @@
-/**
- * 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