@grafloria/element 0.3.19 → 0.3.20

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

@@ -0,0 +1,199 @@
+/**
+ * Card building — the ONE source of truth for the ER/UML card HTML trees, the
+ * layout constants and the size math.
+ *
+ * Both the builders (er.ts / uml.ts, which emit the initial render() spec) and
+ * the live editor (update.ts, which regenerates a card after an edit) call
+ * these. Keeping them here is what stops the two paths from drifting: an edited
+ * card is byte-for-byte the card the builder would have produced for the same
+ * data, so a re-rendered table looks identical to a freshly built one.
+ *
+ * `editable` threads through: when true the card grows the in-canvas editing
+ * chrome (a per-row delete control and a trailing "add" affordance). That
+ * chrome is DELIBERATELY not a `.axk-row`/`.axk-member` — the row-selection and
+ * port-reconciliation code count those, and the affordance is neither a column
+ * nor a member.
+ */
+/** Row height / header height of the entity card — sizing is derived from these. */
+export const ER_ROW_H = 25;
+export const ER_HEAD_H = 28;
+/**
+ * Auto-height slack: the html wrapper's padding (8px) + the card's 1px
+ * top/bottom borders + the head rendering slightly under ER_HEAD_H. Measured
+ * live — with less, an auto-sized card overflows a few px, and the wheel
+ * delegation would steal that much scroll on EVERY card.
+ */
+export const ER_BORDER_SLACK = 9;
+/** The editable "add column" affordance row's height (excluded from row math). */
+export const ER_ADD_H = 26;
+/** UML compartment metrics (mirrors the pre-kit demos, measured live). */
+export const UML_LINE_H = 19;
+export const UML_NAME_H = 30;
+export const UML_STEREO_H = 14;
+export const UML_PAD = 8;
+/** Node-local y of a row's centre (the +1 offsets past the card's top border). */
+export function erRowCenterY(rowIndex) {
+    return ER_HEAD_H + rowIndex * ER_ROW_H + ER_ROW_H / 2 + 1;
+}
+/** Inverse of {@link erRowCenterY}: which column row a pinned port sits on. */
+export function rowIndexFromY(y) {
+    return Math.round((y - ER_HEAD_H - ER_ROW_H / 2 - 1) / ER_ROW_H);
+}
+/**
+ * The `.axk-entity` content tree — the SAME tree er.ts ships and update.ts
+ * regenerates. `editable` adds the delete control per row and the trailing add
+ * affordance.
+ */
+export function entityCardContent(entity, editable = false) {
+    var _a;
+    const rows = entity.columns.map((c) => {
+        var _a;
+        const children = [
+            { tag: 'span', className: 'axk-key' + (c.fk ? ' axk-fk' : ''), text: c.pk ? 'PK' : c.fk ? 'FK' : '' },
+            { tag: 'span', className: 'axk-col', text: c.name },
+            { tag: 'span', className: 'axk-ty', text: (_a = c.type) !== null && _a !== void 0 ? _a : '' },
+        ];
+        // The delete control is a real child so it survives re-renders (the card is
+        // regenerated wholesale on every edit) and hover-reveals via CSS only.
+        if (editable)
+            children.push({ tag: 'span', className: 'axk-col-del', text: '×' });
+        return { tag: 'div', className: 'axk-row' + (c.pk ? ' axk-pk' : ''), children };
+    });
+    const body = {
+        // Scroll is OPT-IN via an explicit height: an auto-sized card fits by
+        // construction and must never trap the wheel, not even by a pixel.
+        tag: 'div',
+        className: entity.height != null ? 'axk-entity-body axk-scroll' : 'axk-entity-body',
+        children: rows,
+    };
+    const children = [
+        { tag: 'div', className: 'axk-entity-head', text: (_a = entity.name) !== null && _a !== void 0 ? _a : entity.id },
+        body,
+    ];
+    // The affordance sits OUTSIDE the (scrollable) body so it is always reachable.
+    if (editable)
+        children.push({ tag: 'div', className: 'axk-entity-add', text: '＋ add column' });
+    return { tag: 'div', className: 'axk-entity', children };
+}
+/** Card height for an entity — explicit height wins, else derived from columns. */
+export function entityAutoHeight(entity, editable = false) {
+    if (entity.height != null)
+        return entity.height;
+    return ER_HEAD_H + entity.columns.length * ER_ROW_H + ER_BORDER_SLACK + (editable ? ER_ADD_H : 0);
+}
+/**
+ * The `.axk-uml` content tree. `editable` adds a delete control per member and
+ * a trailing add affordance in each compartment.
+ */
+export function classCardContent(cls, editable = false) {
+    var _a, _b, _c;
+    const attrs = (_a = cls.attributes) !== null && _a !== void 0 ? _a : [];
+    const methods = (_b = cls.methods) !== null && _b !== void 0 ? _b : [];
+    const italic = cls.abstract || cls.stereotype === 'abstract' || cls.stereotype === 'interface';
+    // Non-editable output stays BYTE-IDENTICAL to the pre-editing builder (a
+    // member is a text div); editable additions are purely additive.
+    const member = (text) => editable
+        ? {
+            tag: 'div',
+            className: 'axk-member',
+            children: [
+                { tag: 'span', className: 'axk-mtext', text },
+                { tag: 'span', className: 'axk-col-del', text: '×' },
+            ],
+        }
+        : { tag: 'div', className: 'axk-member', text };
+    const compartment = (members, section) => {
+        const children = members.map(member);
+        if (editable) {
+            children.push({
+                tag: 'div',
+                className: 'axk-uml-add',
+                text: section === 'attributes' ? '＋ attribute' : '＋ method',
+            });
+        }
+        return {
+            tag: 'div',
+            className: 'axk-uml-comp' + (members.length ? '' : ' axk-empty'),
+            children,
+        };
+    };
+    const name = {
+        tag: 'div',
+        className: 'axk-uml-name' + (italic ? ' axk-abstract' : ''),
+        children: [
+            ...(cls.stereotype ? [{ tag: 'span', className: 'axk-uml-stereo', text: `«${cls.stereotype}»` }] : []),
+            { tag: 'span', text: (_c = cls.name) !== null && _c !== void 0 ? _c : cls.id },
+        ],
+    };
+    return {
+        tag: 'div',
+        className: 'axk-uml',
+        children: [
+            name,
+            {
+                tag: 'div',
+                className: cls.height != null ? 'axk-uml-body axk-scroll' : 'axk-uml-body',
+                children: [compartment(attrs, 'attributes'), compartment(methods, 'methods')],
+            },
+        ],
+    };
+}
+/** Card height for a class — explicit height wins, else derived from members. */
+export function classAutoHeight(cls, editable = false) {
+    var _a, _b;
+    if (cls.height != null)
+        return cls.height;
+    const attrs = (_a = cls.attributes) !== null && _a !== void 0 ? _a : [];
+    const methods = (_b = cls.methods) !== null && _b !== void 0 ? _b : [];
+    const addRows = editable ? 2 : 0; // one "add" affordance per compartment
+    return (UML_NAME_H +
+        (cls.stereotype ? UML_STEREO_H : 0) +
+        (attrs.length + methods.length + addRows) * UML_LINE_H +
+        UML_PAD * 2 +
+        12);
+}
+/**
+ * Match old columns to new columns for port reconciliation. Returns a map from
+ * OLD index → NEW index; an old index absent from the map is a REMOVED column
+ * (its pinned ports and their edges are dropped).
+ *
+ * Three passes, most-certain first, so a single edit is always read the way a
+ * human means it:
+ *   1. object identity — reorder / add / remove that preserved references;
+ *   2. name — a retype (same name, new object) or a rebuilt array;
+ *   3. positional remainder — the leftovers matched in order, which is exactly
+ *      what a rename is (one old + one new in the same slot). Without pass 3 a
+ *      rename reads as remove+add and the edge is severed.
+ */
+export function matchColumns(oldCols, newCols) {
+    const out = new Map();
+    const usedNew = new Set();
+    const matchedOld = new Set();
+    const claim = (oldIdx, newIdx) => {
+        out.set(oldIdx, newIdx);
+        usedNew.add(newIdx);
+        matchedOld.add(oldIdx);
+    };
+    // Pass 1: object identity.
+    oldCols.forEach((oc, oi) => {
+        const ni = newCols.indexOf(oc);
+        if (ni !== -1 && !usedNew.has(ni))
+            claim(oi, ni);
+    });
+    // Pass 2: by name, among the unmatched.
+    oldCols.forEach((oc, oi) => {
+        if (matchedOld.has(oi))
+            return;
+        const ni = newCols.findIndex((nc, i) => !usedNew.has(i) && nc.name === oc.name);
+        if (ni !== -1)
+            claim(oi, ni);
+    });
+    // Pass 3: positional remainder (rename / retype-and-rename).
+    const remOld = oldCols.map((_, i) => i).filter((i) => !matchedOld.has(i));
+    const remNew = newCols.map((_, i) => i).filter((i) => !usedNew.has(i));
+    const n = Math.min(remOld.length, remNew.length);
+    for (let k = 0; k < n; k++)
+        claim(remOld[k], remNew[k]);
+    return out;
+}
+//# sourceMappingURL=card.js.map

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