@grafloria/element 0.3.23 → 0.4.0

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

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

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