@grafloria/element 0.3.20 → 0.3.21

package/src/libs/element/src/lib/dashboard-kit/widgets.d.ts

@@ -1,112 +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 type { DashboardWidgetSpec } from './dashboard';
-/** The signature every renderer here (and `renderWidget`) satisfies. */
-export type WidgetRenderer = (widget: DashboardWidgetSpec, host: HTMLElement) => void;
-/** `kind: 'kpi'` — one headline number, an optional change, an optional trend. */
-export interface KpiWidgetData {
-    /** Small caption above the number (falls back to `widget.title`). */
-    label?: string;
-    /** The headline — pre-formatted by you, so units/currency stay yours. */
-    value?: string | number;
-    /** Signed percentage change. Positive paints up/green, negative down/red. */
-    delta?: number;
-    /** Caption after the delta (default 'vs previous'). */
-    deltaLabel?: string;
-    /** Sparkline values, oldest → newest. Fewer than 2 points draws nothing. */
-    spark?: number[];
-}
-/** One named line of a `kind: 'line'` chart. */
-export interface LineSeries {
-    name?: string;
-    values: number[];
-}
-/** `kind: 'line'` — one or many series over a shared x axis (area + line). */
-export interface LineWidgetData {
-    /** A bare `number[]` is the single-series shorthand. */
-    series?: number[] | LineSeries[];
-    /** X-axis tick labels, positionally matched to the values. */
-    labels?: string[];
-}
-/** `kind: 'bar'` — categorical columns. */
-export interface BarWidgetData {
-    bars?: Array<{
-        label?: string;
-        value?: number;
-    }>;
-}
-/** `kind: 'donut'` — parts of a whole, with a legend and a centre figure. */
-export interface DonutWidgetData {
-    slices?: Array<{
-        label?: string;
-        value?: number;
-        color?: string;
-    }>;
-    /** Centre figure (default: the compacted total). */
-    centerLabel?: string;
-    /** Caption under the centre figure (default 'total'). */
-    centerCaption?: string;
-}
-/** `kind: 'funnel'` — ordered stages, each bar scaled against the first. */
-export interface FunnelWidgetData {
-    stages?: Array<{
-        label?: string;
-        value?: number;
-    }>;
-}
-/** `kind: 'table'` — plain rows. Numbers right-align on their own. */
-export interface TableWidgetData {
-    columns?: string[];
-    rows?: Array<Array<string | number>>;
-}
-/** The kinds `defaultWidgetRenderer` knows; anything else gets the placeholder. */
-export declare const BUILT_IN_WIDGET_KINDS: readonly ["kpi", "line", "bar", "donut", "funnel", "table"];
-/** `{ label, value, delta?, spark? }` — headline number + change + sparkline. */
-export declare const renderKpiWidget: WidgetRenderer;
-/** `{ series, labels? }` — area under the first series, a line per series. */
-export declare const renderLineWidget: WidgetRenderer;
-/** `{ bars: [{label, value}] }` — columns, value above, category below. */
-export declare const renderBarWidget: WidgetRenderer;
-/** `{ slices: [{label, value, color?}], centerLabel? }` — ring + legend. */
-export declare const renderDonutWidget: WidgetRenderer;
-/** `{ stages: [{label, value}] }` — centred bars scaled against the first stage. */
-export declare const renderFunnelWidget: WidgetRenderer;
-/** `{ columns, rows }` — plain rows; numeric cells right-align themselves. */
-export declare const renderTableWidget: WidgetRenderer;
-/**
- * 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 declare const defaultWidgetRenderer: WidgetRenderer;

package/src/libs/element/src/lib/dashboard-kit/widgets.js

@@ -1,389 +0,0 @@
-"use strict";
-/**
- * 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).
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultWidgetRenderer = exports.renderTableWidget = exports.renderFunnelWidget = exports.renderDonutWidget = exports.renderBarWidget = exports.renderLineWidget = exports.renderKpiWidget = exports.BUILT_IN_WIDGET_KINDS = void 0;
-const styles_1 = require("./styles");
-/** The kinds `defaultWidgetRenderer` knows; anything else gets the placeholder. */
-exports.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;
-    (0, styles_1.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. */
-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;
-};
-exports.renderKpiWidget = renderKpiWidget;
-// -- 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. */
-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) }); })) : '');
-};
-exports.renderLineWidget = renderLineWidget;
-// -- bar ----------------------------------------------------------------------
-/** `{ bars: [{label, value}] }` — columns, value above, category below. */
-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>`;
-};
-exports.renderBarWidget = renderBarWidget;
-// -- 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. */
-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);
-};
-exports.renderDonutWidget = renderDonutWidget;
-// -- funnel -------------------------------------------------------------------
-/** `{ stages: [{label, value}] }` — centred bars scaled against the first stage. */
-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>`;
-};
-exports.renderFunnelWidget = renderFunnelWidget;
-// -- table --------------------------------------------------------------------
-/** `{ columns, rows }` — plain rows; numeric cells right-align themselves. */
-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>`;
-};
-exports.renderTableWidget = renderTableWidget;
-// -- dispatch -----------------------------------------------------------------
-const BY_KIND = {
-    kpi: exports.renderKpiWidget,
-    line: exports.renderLineWidget,
-    bar: exports.renderBarWidget,
-    donut: exports.renderDonutWidget,
-    funnel: exports.renderFunnelWidget,
-    table: exports.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.
- */
-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: '' }));
-};
-exports.defaultWidgetRenderer = defaultWidgetRenderer;
-//# sourceMappingURL=widgets.js.map

package/src/libs/element/src/lib/diagram-kit/card.d.ts

@@ -1,75 +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.
- */
-import type { ErColumn, ErEntitySpec } from './er';
-import type { UmlClassSpec } from './uml';
-/** Row height / header height of the entity card — sizing is derived from these. */
-export declare const ER_ROW_H = 25;
-export declare 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 declare const ER_BORDER_SLACK = 9;
-/** The editable "add column" affordance row's height (excluded from row math). */
-export declare const ER_ADD_H = 26;
-/** UML compartment metrics (mirrors the pre-kit demos, measured live). */
-export declare const UML_LINE_H = 19;
-export declare const UML_NAME_H = 30;
-export declare const UML_STEREO_H = 14;
-export declare const UML_PAD = 8;
-/** Node-local y of a row's centre (the +1 offsets past the card's top border). */
-export declare function erRowCenterY(rowIndex: number): number;
-/** Inverse of {@link erRowCenterY}: which column row a pinned port sits on. */
-export declare function rowIndexFromY(y: number): number;
-/** A node's html-content tree node (the shape the renderer's html layer eats). */
-export interface HtmlNode {
-    tag: string;
-    className?: string;
-    text?: string;
-    children?: HtmlNode[];
-}
-/**
- * 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 declare function entityCardContent(entity: ErEntitySpec, editable?: boolean): HtmlNode;
-/** Card height for an entity — explicit height wins, else derived from columns. */
-export declare function entityAutoHeight(entity: ErEntitySpec, editable?: boolean): number;
-/**
- * The `.axk-uml` content tree. `editable` adds a delete control per member and
- * a trailing add affordance in each compartment.
- */
-export declare function classCardContent(cls: UmlClassSpec, editable?: boolean): HtmlNode;
-/** Card height for a class — explicit height wins, else derived from members. */
-export declare function classAutoHeight(cls: UmlClassSpec, editable?: boolean): number;
-/**
- * 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 declare function matchColumns(oldCols: ErColumn[], newCols: ErColumn[]): Map<number, number>;