@grafloria/element 0.3.18 → 0.3.20

package/esm/src/lib/dashboard-kit/widgets.js

@@ -0,0 +1,379 @@
+/**
+ * BUILT-IN WIDGET RENDERERS — what `kind` means when you write no `renderWidget`.
+ *
+ * `dashboard({ views: [...] })` is data-first: a widget is `{ id, kind, span,
+ * rows, data }`. Until now `kind` was a free-form string that only meant
+ * something if the page supplied `renderWidget`; omitting it drew a titled
+ * empty frame. This module is the other half — six real renderers driven by
+ * the DEVELOPER'S OWN `data`, so a dashboard is useful from pure data alone:
+ *
+ * ```js
+ * dashboard({ widgets: [
+ *   { id: 'rev',   kind: 'kpi',   span: 3, data: { label: 'Revenue', value: '$6.8M', delta: 12.4 } },
+ *   { id: 'trend', kind: 'line',  span: 8, rows: 2, data: { series: [10, 14, 12, 19] } },
+ * ]});   // no renderWidget, no charting library, real widgets
+ * ```
+ *
+ * TWO THINGS THIS DELIBERATELY IS NOT:
+ *  - A charting library. Every mark is hand-drawn inline SVG (the same
+ *    technique the dashboard demo uses), so the kit still adds ZERO
+ *    dependencies and the whole file is readable.
+ *  - A dataset. Nothing here ships sample numbers; every renderer reads the
+ *    `data` the developer declared and degrades to an empty-state note when it
+ *    is missing, partial or the wrong shape. A widget renderer must NEVER
+ *    throw: it paints into a live board, mid-gesture, on every reflow.
+ *
+ * `renderWidget` remains the seam for anything richer — and it composes:
+ * call `defaultWidgetRenderer(widget, host)` first, then decorate the host
+ * (that is exactly what demos/dashboard/dashboard-builder.html does for its
+ * focus ring and pin marker).
+ */
+import { ensureDashboardKitStyles } from './styles';
+/** The kinds `defaultWidgetRenderer` knows; anything else gets the placeholder. */
+export const BUILT_IN_WIDGET_KINDS = ['kpi', 'line', 'bar', 'donut', 'funnel', 'table'];
+/**
+ * Categorical default palette — readable on both light and dark cards. Per-mark
+ * overrides win (`slices[].color`); everything else cycles this list.
+ */
+const PALETTE = ['#3b52d9', '#0ea5e9', '#14b8a6', '#f59e0b', '#8b5cf6', '#64748b'];
+const colorAt = (i) => PALETTE[((i % PALETTE.length) + PALETTE.length) % PALETTE.length];
+// -- primitives ---------------------------------------------------------------
+const esc = (v) => String(v !== null && v !== void 0 ? v : '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+/** Finite numbers only — a NaN in the data must not become a NaN in a path. */
+const num = (v, fallback = 0) => (typeof v === 'number' && Number.isFinite(v) ? v : fallback);
+const isNum = (v) => typeof v === 'number' && Number.isFinite(v);
+/** 6730 → '6.7k'. Axis and centre figures only; your `value` is never touched. */
+function compact(n) {
+    const a = Math.abs(n);
+    if (a >= 1e9)
+        return `${(n / 1e9).toFixed(1)}B`;
+    if (a >= 1e6)
+        return `${(n / 1e6).toFixed(1)}M`;
+    if (a >= 1e4)
+        return `${(n / 1e3).toFixed(1)}k`;
+    return `${Math.round(n * 100) / 100}`;
+}
+/** Round an axis maximum up to a friendly step (762 → 800, 2860 → 3000). */
+function niceMax(v) {
+    if (!(v > 0))
+        return 1;
+    const step = Math.pow(10, Math.floor(Math.log10(v))) / 2;
+    return Math.ceil(v / step) * step;
+}
+/** The card shell: `<div class="axdb-widget"><div h/><div b/></div>`, body returned. */
+function card(host, widget, title) {
+    var _a, _b;
+    const doc = (_a = host.ownerDocument) !== null && _a !== void 0 ? _a : document;
+    ensureDashboardKitStyles(doc);
+    host.innerHTML = '';
+    const root = doc.createElement('div');
+    root.className = `axdb-widget axdb-widget--${(_b = widget.kind) !== null && _b !== void 0 ? _b : 'widget'}`;
+    const head = doc.createElement('div');
+    head.className = 'axdb-widget-h';
+    head.textContent = title;
+    const body = doc.createElement('div');
+    body.className = 'axdb-widget-b';
+    root.appendChild(head);
+    root.appendChild(body);
+    host.appendChild(root);
+    return body;
+}
+/** Header text: an explicit title wins, then a data-supplied label, then the kind. */
+function titleOf(widget, label) {
+    var _a, _b, _c;
+    const t = (_c = (_b = (_a = widget.title) !== null && _a !== void 0 ? _a : (typeof label === 'string' && label ? label : undefined)) !== null && _b !== void 0 ? _b : widget.kind) !== null && _c !== void 0 ? _c : widget.id;
+    return String(t);
+}
+/** The one empty state, so every kind fails the same readable way. */
+function empty(body, note = 'no data') {
+    body.innerHTML = `<div class="axdb-widget-empty">${esc(note)}</div>`;
+}
+const data = (widget) => { var _a; return ((_a = widget.data) !== null && _a !== void 0 ? _a : {}); };
+const legend = (items, column = false) => `<div class="axdb-lg${column ? ' axdb-lg--col' : ''}">` +
+    items.map((i) => `<i><b style="background:${esc(i.color)}"></b>${esc(i.label)}</i>`).join('') +
+    '</div>';
+// -- kpi ----------------------------------------------------------------------
+/** `{ label, value, delta?, spark? }` — headline number + change + sparkline. */
+export const renderKpiWidget = (widget, host) => {
+    var _a;
+    const d = data(widget);
+    const body = card(host, widget, titleOf(widget, d.label));
+    const value = d.value === undefined || d.value === null || d.value === '' ? '—' : d.value;
+    let html = `<div class="axdb-kpi-v">${esc(value)}</div>`;
+    if (isNum(d.delta)) {
+        const up = d.delta >= 0;
+        html +=
+            `<div class="axdb-kpi-d ${up ? 'up' : 'down'}">${up ? '▲' : '▼'} ${Math.abs(d.delta)}% ` +
+                `<span>${esc((_a = d.deltaLabel) !== null && _a !== void 0 ? _a : 'vs previous')}</span></div>`;
+    }
+    const spark = (Array.isArray(d.spark) ? d.spark : []).filter(isNum);
+    if (spark.length > 1) {
+        const W = 240;
+        const H = 40;
+        const max = Math.max(...spark);
+        const min = Math.min(...spark);
+        const pts = spark.map((v, i) => {
+            const x = (i / (spark.length - 1)) * W;
+            const y = H - ((v - min) / (max - min || 1)) * (H - 6) - 3;
+            return `${x.toFixed(1)},${y.toFixed(1)}`;
+        });
+        html +=
+            `<svg class="axdb-kpi-s" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" aria-hidden="true">` +
+                `<path d="M0,${H} L${pts.join(' L')} L${W},${H} Z" fill="${colorAt(0)}" fill-opacity="0.12"></path>` +
+                `<polyline points="${pts.join(' ')}" fill="none" stroke="${colorAt(0)}" stroke-width="2" ` +
+                `stroke-linejoin="round" stroke-linecap="round"></polyline></svg>`;
+    }
+    body.classList.add('axdb-kpi');
+    body.innerHTML = html;
+};
+// -- line ---------------------------------------------------------------------
+/** Accept both `number[]` and `{name, values}[]`, drop anything unusable. */
+function normalizeSeries(raw) {
+    if (!Array.isArray(raw) || raw.length === 0)
+        return [];
+    if (raw.every((s) => typeof s === 'number')) {
+        const values = raw.filter(isNum);
+        return values.length ? [{ values }] : [];
+    }
+    return raw
+        .filter((s) => !!s && Array.isArray(s.values))
+        .map((s) => ({ name: s.name, values: s.values.filter(isNum) }))
+        .filter((s) => s.values.length > 0);
+}
+/** `{ series, labels? }` — area under the first series, a line per series. */
+export const renderLineWidget = (widget, host) => {
+    const d = data(widget);
+    const body = card(host, widget, titleOf(widget));
+    const series = normalizeSeries(d.series);
+    if (!series.length)
+        return empty(body);
+    const W = 640;
+    const H = 250;
+    const pad = { l: 34, r: 12, t: 12, b: 22 };
+    const iw = W - pad.l - pad.r;
+    const ih = H - pad.t - pad.b;
+    const all = series.flatMap((s) => s.values);
+    const count = Math.max(...series.map((s) => s.values.length));
+    const max = niceMax(Math.max(...all));
+    const min = Math.min(0, ...all);
+    const xAt = (i) => pad.l + (count > 1 ? (i / (count - 1)) * iw : iw / 2);
+    const yAt = (v) => pad.t + ih - ((v - min) / (max - min || 1)) * ih;
+    const grid = [0, 0.25, 0.5, 0.75, 1]
+        .map((f) => {
+        const y = pad.t + ih - f * ih;
+        return (`<line x1="${pad.l}" y1="${y.toFixed(1)}" x2="${W - pad.r}" y2="${y.toFixed(1)}" ` +
+            `stroke="var(--axdb-grid)" stroke-width="1"></line>` +
+            `<text x="${pad.l - 6}" y="${(y + 3).toFixed(1)}" text-anchor="end" font-size="9" ` +
+            `fill="var(--axdb-muted)">${esc(compact(min + f * (max - min)))}</text>`);
+    })
+        .join('');
+    const labels = Array.isArray(d.labels) ? d.labels : [];
+    const every = labels.length > 8 ? 2 : 1;
+    const ticks = labels
+        .slice(0, count)
+        .map((l, i) => i % every === 0
+        ? `<text x="${xAt(i).toFixed(1)}" y="${H - 6}" text-anchor="middle" font-size="9" ` +
+            `fill="var(--axdb-muted)">${esc(l)}</text>`
+        : '')
+        .join('');
+    const marks = series
+        .map((s, si) => {
+        const pts = s.values.map((v, i) => `${xAt(i).toFixed(1)},${yAt(v).toFixed(1)}`).join(' ');
+        const area = si === 0 && s.values.length > 1
+            ? `<path d="M${xAt(0).toFixed(1)},${(pad.t + ih).toFixed(1)} L${pts.replace(/ /g, ' L')} ` +
+                `L${xAt(s.values.length - 1).toFixed(1)},${(pad.t + ih).toFixed(1)} Z" ` +
+                `fill="${colorAt(si)}" fill-opacity="0.10"></path>`
+            : '';
+        return (area +
+            `<polyline points="${pts}" fill="none" stroke="${colorAt(si)}" stroke-width="${si === 0 ? 2.4 : 1.8}" ` +
+            `stroke-linejoin="round" stroke-linecap="round"></polyline>`);
+    })
+        .join('');
+    const named = series.filter((s) => s.name);
+    if (named.length)
+        body.classList.add('axdb-has-lg');
+    body.innerHTML =
+        `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
+            `aria-label="${esc(titleOf(widget))}">${grid}${ticks}${marks}</svg>` +
+            (named.length ? legend(series.map((s, i) => { var _a; return ({ label: String((_a = s.name) !== null && _a !== void 0 ? _a : ''), color: colorAt(i) }); })) : '');
+};
+// -- bar ----------------------------------------------------------------------
+/** `{ bars: [{label, value}] }` — columns, value above, category below. */
+export const renderBarWidget = (widget, host) => {
+    const d = data(widget);
+    const body = card(host, widget, titleOf(widget));
+    const bars = (Array.isArray(d.bars) ? d.bars : []).filter((b) => !!b);
+    if (!bars.length)
+        return empty(body);
+    const W = 640;
+    const H = 250;
+    const pad = { l: 34, r: 12, t: 12, b: 26 };
+    const iw = W - pad.l - pad.r;
+    const ih = H - pad.t - pad.b;
+    const max = niceMax(Math.max(...bars.map((b) => num(b.value))));
+    const slot = iw / bars.length;
+    const bw = slot * 0.56;
+    const grid = [0, 0.5, 1]
+        .map((f) => {
+        const y = pad.t + ih - f * ih;
+        return (`<line x1="${pad.l}" y1="${y.toFixed(1)}" x2="${W - pad.r}" y2="${y.toFixed(1)}" ` +
+            `stroke="var(--axdb-grid)" stroke-width="1"></line>` +
+            `<text x="${pad.l - 6}" y="${(y + 3).toFixed(1)}" text-anchor="end" font-size="9" ` +
+            `fill="var(--axdb-muted)">${esc(compact(f * max))}</text>`);
+    })
+        .join('');
+    const marks = bars
+        .map((b, i) => {
+        var _a;
+        const v = Math.max(0, num(b.value));
+        const h = (v / max) * ih;
+        const x = pad.l + i * slot + (slot - bw) / 2;
+        const y = pad.t + ih - h;
+        return (`<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${bw.toFixed(1)}" height="${h.toFixed(1)}" ` +
+            `rx="4" fill="${colorAt(i)}"></rect>` +
+            `<text x="${(x + bw / 2).toFixed(1)}" y="${(y - 4).toFixed(1)}" text-anchor="middle" font-size="9.5" ` +
+            `font-weight="600" fill="var(--axdb-ink)">${esc(compact(num(b.value)))}</text>` +
+            `<text x="${(x + bw / 2).toFixed(1)}" y="${H - 8}" text-anchor="middle" font-size="9" ` +
+            `fill="var(--axdb-muted)">${esc((_a = b.label) !== null && _a !== void 0 ? _a : '')}</text>`);
+    })
+        .join('');
+    body.innerHTML =
+        `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
+            `aria-label="${esc(titleOf(widget))}">${grid}${marks}</svg>`;
+};
+// -- donut --------------------------------------------------------------------
+/** One arc of the ring, as an SVG path command. */
+function arcPath(cx, cy, r, a0, a1) {
+    const at = (a) => [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+    const [x0, y0] = at(a0);
+    const [x1, y1] = at(a1);
+    return `M${x0.toFixed(2)},${y0.toFixed(2)} A${r},${r} 0 ${a1 - a0 > Math.PI ? 1 : 0} 1 ${x1.toFixed(2)},${y1.toFixed(2)}`;
+}
+/** `{ slices: [{label, value, color?}], centerLabel? }` — ring + legend. */
+export const renderDonutWidget = (widget, host) => {
+    var _a, _b;
+    const d = data(widget);
+    const body = card(host, widget, titleOf(widget));
+    const slices = (Array.isArray(d.slices) ? d.slices : []).filter((s) => !!s && num(s.value) > 0);
+    const total = slices.reduce((s, x) => s + num(x.value), 0);
+    if (!slices.length || total <= 0)
+        return empty(body);
+    const cx = 90;
+    const cy = 90;
+    const r = 66;
+    let a = -Math.PI / 2;
+    const segs = slices
+        .map((s, i) => {
+        var _a;
+        const sweep = (num(s.value) / total) * Math.PI * 2;
+        const a1 = a + sweep;
+        // A hair of padding each side keeps neighbouring arcs visually separate —
+        // clamped so a very thin slice cannot invert into a backwards arc.
+        const inset = Math.min(0.02, sweep / 4);
+        const path = arcPath(cx, cy, r, a + inset, a1 - inset);
+        a = a1;
+        return `<path d="${path}" fill="none" stroke="${esc((_a = s.color) !== null && _a !== void 0 ? _a : colorAt(i))}" stroke-width="26" stroke-linecap="round"></path>`;
+    })
+        .join('');
+    body.classList.add('axdb-donut');
+    body.innerHTML =
+        `<svg viewBox="0 0 180 180" preserveAspectRatio="xMidYMid meet" role="img" aria-label="${esc(titleOf(widget))}">` +
+            segs +
+            `<text x="${cx}" y="${cy - 2}" text-anchor="middle" font-size="20" font-weight="700" ` +
+            `fill="var(--axdb-ink)">${esc((_a = d.centerLabel) !== null && _a !== void 0 ? _a : compact(total))}</text>` +
+            `<text x="${cx}" y="${cy + 16}" text-anchor="middle" font-size="10" ` +
+            `fill="var(--axdb-muted)">${esc((_b = d.centerCaption) !== null && _b !== void 0 ? _b : 'total')}</text>` +
+            '</svg>' +
+            legend(slices.map((s, i) => {
+                var _a, _b;
+                return ({
+                    label: `${(_a = s.label) !== null && _a !== void 0 ? _a : ''} · ${Math.round((num(s.value) / total) * 100)}%`,
+                    color: (_b = s.color) !== null && _b !== void 0 ? _b : colorAt(i),
+                });
+            }), true);
+};
+// -- funnel -------------------------------------------------------------------
+/** `{ stages: [{label, value}] }` — centred bars scaled against the first stage. */
+export const renderFunnelWidget = (widget, host) => {
+    const d = data(widget);
+    const body = card(host, widget, titleOf(widget));
+    const stages = (Array.isArray(d.stages) ? d.stages : []).filter((s) => !!s);
+    if (!stages.length)
+        return empty(body);
+    const W = 260;
+    const rowH = 34;
+    const gap = 8;
+    const H = stages.length * (rowH + gap);
+    const max = Math.max(...stages.map((s) => num(s.value)), 1);
+    const track = W - 90;
+    const marks = stages
+        .map((s, i) => {
+        var _a;
+        const w = Math.max(2, (num(s.value) / max) * track);
+        const x = (track - w) / 2 + 8;
+        const y = i * (rowH + gap);
+        return (`<rect x="${x.toFixed(1)}" y="${y}" width="${w.toFixed(1)}" height="${rowH}" rx="6" fill="${colorAt(i)}"></rect>` +
+            `<text x="${(x + w / 2).toFixed(1)}" y="${y + rowH / 2 + 4}" text-anchor="middle" font-size="11" ` +
+            `font-weight="600" fill="#fff">${esc(compact(num(s.value)))}</text>` +
+            `<text x="${W - 78}" y="${y + rowH / 2 + 4}" font-size="10.5" fill="var(--axdb-muted)">${esc((_a = s.label) !== null && _a !== void 0 ? _a : '')}</text>`);
+    })
+        .join('');
+    body.innerHTML =
+        `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" ` +
+            `aria-label="${esc(titleOf(widget))}">${marks}</svg>`;
+};
+// -- table --------------------------------------------------------------------
+/** `{ columns, rows }` — plain rows; numeric cells right-align themselves. */
+export const renderTableWidget = (widget, host) => {
+    const d = data(widget);
+    const body = card(host, widget, titleOf(widget));
+    const columns = Array.isArray(d.columns) ? d.columns : [];
+    const rows = (Array.isArray(d.rows) ? d.rows : []).filter((r) => Array.isArray(r));
+    if (!columns.length && !rows.length)
+        return empty(body);
+    const head = columns.length
+        ? `<thead><tr>${columns.map((c) => `<th>${esc(c)}</th>`).join('')}</tr></thead>`
+        : '';
+    const cols = columns.length || Math.max(0, ...rows.map((r) => r.length));
+    const tbody = rows
+        .map((r) => '<tr>' +
+        Array.from({ length: cols }, (_, i) => r[i])
+            .map((cell) => `<td class="${isNum(cell) ? 'num' : ''}">${esc(cell !== null && cell !== void 0 ? cell : '')}</td>`)
+            .join('') +
+        '</tr>')
+        .join('');
+    body.classList.add('axdb-scroll');
+    body.innerHTML = `<table class="axdb-table">${head}<tbody>${tbody}</tbody></table>`;
+};
+// -- dispatch -----------------------------------------------------------------
+const BY_KIND = {
+    kpi: renderKpiWidget,
+    line: renderLineWidget,
+    bar: renderBarWidget,
+    donut: renderDonutWidget,
+    funnel: renderFunnelWidget,
+    table: renderTableWidget,
+};
+/**
+ * Paint `widget` into `host` by its `kind` — `dashboard()`'s default
+ * `renderWidget`, and the composable base for your own.
+ *
+ * An unknown (or absent) kind falls back to the titled placeholder frame, so a
+ * board of not-yet-implemented widgets still lays out and is still testable.
+ * Never throws: bad data paints an empty state.
+ */
+export const defaultWidgetRenderer = (widget, host) => {
+    var _a;
+    const renderer = BY_KIND[(_a = widget === null || widget === void 0 ? void 0 : widget.kind) !== null && _a !== void 0 ? _a : ''];
+    if (renderer) {
+        try {
+            renderer(widget, host);
+            return;
+        }
+        catch (_b) {
+            /* a broken widget must not take the board down — fall through to the frame */
+        }
+    }
+    card(host, widget !== null && widget !== void 0 ? widget : { id: '' }, titleOf(widget !== null && widget !== void 0 ? widget : { id: '' }));
+};
+//# sourceMappingURL=widgets.js.map

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