@grafloria/element 0.3.19 → 0.3.20

package/esm/src/lib/dashboard-kit/grid-mapping.js

@@ -0,0 +1,164 @@
+/**
+ * Dashboard-kit pure math — Phase 2 of the dashboard-grid plan
+ * (`documentation/api-architecture/dashboard-grid-plan.html`).
+ *
+ * Everything here is DOM-free and instance-free so it can be table-driven from
+ * a jest spec: the cell↔pixel mapping in both sizing modes, the
+ * GridItemConfig↔GridPackItem round-trip, and the gesture commit-batch
+ * construction. The stateful binder (`grid-binder.ts`) is a thin pointer loop
+ * over these functions plus the engine's `GridPackEngine` — the engine owns
+ * ALL cell math (push/swap/gate/settle); this module owns only how cells and
+ * pixels convert into each other and into undoable commands.
+ *
+ * SIZING MODES (user decision, recorded in the plan's Section 6):
+ *   'fit'  — DevExtreme-style compact. The board keeps its DESIGN height and
+ *            the row height re-derives from the content's row count, so every
+ *            widget always stays inside the frame — nothing can be pushed out
+ *            of reach. Guarded by `minRowHeight` so a pathological row count
+ *            squeezes to a floor instead of zero.
+ *   'grow' — rows keep `baseRowHeight` and the board frame extends downward
+ *            to hold them (never below the design height). Camera refit after
+ *            growth is the page's concern (its existing `frameTab`).
+ */
+import { MoveNodeCommand, ResizeNodeCommand, SetGridItemCommand, } from '@grafloria/engine';
+/** Row height for a board currently `rows` rows tall (both modes). */
+export function rowHeightFor(g, rows) {
+    if (g.sizing === 'grow')
+        return g.baseRowHeight;
+    const r = Math.max(1, rows);
+    // design = 2*padding + r*rowH + (r-1)*gap  →  solve for rowH.
+    return Math.max(g.minRowHeight, (g.designHeight - 2 * g.padding - (r - 1) * g.gap) / r);
+}
+/** The board frame height the mode implies for `rows` rows. */
+export function boardHeightFor(g, rows) {
+    if (g.sizing === 'fit')
+        return g.designHeight;
+    const r = Math.max(0, rows);
+    const content = 2 * g.padding + (r === 0 ? 0 : r * g.baseRowHeight + (r - 1) * g.gap);
+    return Math.max(g.designHeight, content);
+}
+/** Width of one column cell for a board `width` px wide. */
+export function columnUnitFor(g, width) {
+    return (width - 2 * g.padding - (g.columns - 1) * g.gap) / g.columns;
+}
+/** Width in px of a `w`-column span (the pitch identity used by both mappings). */
+export function spanWidthPx(w, g, frameWidth) {
+    const cu = columnUnitFor(g, frameWidth);
+    return w * cu + (w - 1) * g.gap;
+}
+/**
+ * Project integer cells into a world rectangle inside `frame`.
+ *
+ * RTL mirrors about the board's vertical centre line: the distance from the
+ * board's RIGHT padding edge to the tile's RIGHT edge equals what the LTR
+ * distance from the left padding edge to the tile's LEFT edge would be. Only
+ * the x term changes — rows, heights and spans are direction-agnostic.
+ */
+export function cellToRect(cell, frame, g, rows) {
+    const cu = columnUnitFor(g, frame.width);
+    const rh = rowHeightFor(g, rows);
+    const width = cell.w * cu + (cell.w - 1) * g.gap;
+    return {
+        x: g.rtl
+            ? frame.x + frame.width - g.padding - cell.x * (cu + g.gap) - width
+            : frame.x + g.padding + cell.x * (cu + g.gap),
+        y: frame.y + g.padding + cell.y * (rh + g.gap),
+        width,
+        height: cell.h * rh + (cell.h - 1) * g.gap,
+    };
+}
+/**
+ * The cell whose slot a tile TOP-LEFT at world (x, y) is closest to — the
+ * prototype's margin-adjusted midpoint rounding (`round(L / cellPitch)`).
+ * Clamping to the board is the ENGINE's job (moveCheck clamps), not ours.
+ *
+ * `spanW` is the tile's COLUMN SPAN and is used only when `g.rtl`: mirrored,
+ * the cell is decided by the tile's RIGHT edge (its leading edge), so the
+ * span is what converts the given left edge into it. LTR ignores it entirely,
+ * which is why every existing call site keeps its exact behaviour. Getting
+ * this wrong is the classic RTL drag bug — the tile lands a span away from
+ * the placeholder — so the e2e battery asserts drop-on-placeholder in RTL.
+ */
+export function pointToCell(x, y, frame, g, rows, spanW = 1) {
+    const cu = columnUnitFor(g, frame.width);
+    const rh = rowHeightFor(g, rows);
+    const right = x + spanWidthPx(spanW, g, frame.width);
+    return {
+        x: g.rtl
+            ? Math.round((frame.x + frame.width - g.padding - right) / (cu + g.gap))
+            : Math.round((x - frame.x - g.padding) / (cu + g.gap)),
+        y: Math.round((y - frame.y - g.padding) / (rh + g.gap)),
+    };
+}
+/**
+ * The integer span a fluid pixel size rounds to — the prototype's
+ * `round((W + margin) / cellPitch)`, floored at 1×1.
+ */
+export function sizeToSpan(widthPx, heightPx, frame, g, rows) {
+    const cu = columnUnitFor(g, frame.width);
+    const rh = rowHeightFor(g, rows);
+    return {
+        w: Math.max(1, Math.round((widthPx + g.gap) / (cu + g.gap))),
+        h: Math.max(1, Math.round((heightPx + g.gap) / (rh + g.gap))),
+    };
+}
+// ---------------------------------------------------------------------------
+// GridItemConfig ↔ engine cells.
+//
+// The cell state lives in the EXISTING GridItemConfig (1-based, exclusive-end
+// line numbers — CSS grid vocabulary): columnStart/rowStart are the cell + 1,
+// columnEnd/rowEnd are cell + span + 1. Nothing new is persisted; save/load
+// already round-trips gridItem.
+// ---------------------------------------------------------------------------
+/** Engine cells → the GridItemConfig that persists them. */
+export function gridItemFromCell(cell) {
+    return {
+        columnStart: cell.x + 1,
+        columnEnd: cell.x + cell.w + 1,
+        rowStart: cell.y + 1,
+        rowEnd: cell.y + cell.h + 1,
+    };
+}
+/**
+ * GridItemConfig → engine cells, or null when the config carries no usable
+ * placement (absent, or 'auto' lines). `fallback` fills spans a partial
+ * config omits — the first-adoption path uses metadata `columnSpan` there.
+ */
+export function cellFromGridItem(gi, fallback) {
+    var _a, _b;
+    if (!gi)
+        return null;
+    const num = (v) => typeof v === 'number' && Number.isFinite(v) ? v : null;
+    const cs = num(gi.columnStart);
+    const rs = num(gi.rowStart);
+    if (cs === null || rs === null)
+        return null;
+    const ce = num(gi.columnEnd);
+    const re = num(gi.rowEnd);
+    const w = ce !== null ? ce - cs : (_a = fallback === null || fallback === void 0 ? void 0 : fallback.w) !== null && _a !== void 0 ? _a : 1;
+    const h = re !== null ? re - rs : (_b = fallback === null || fallback === void 0 ? void 0 : fallback.h) !== null && _b !== void 0 ? _b : 1;
+    return { x: cs - 1, y: rs - 1, w: Math.max(1, w), h: Math.max(1, h) };
+}
+const cellsDiffer = (a, b) => a.x !== b.x || a.y !== b.y || a.w !== b.w || a.h !== b.h;
+const EPS = 0.5;
+export function buildCommitCommands(deltas) {
+    const commands = [];
+    for (const d of deltas) {
+        const cellChanged = cellsDiffer(d.cellBefore, d.cellAfter);
+        if (cellChanged && !d.isGroup) {
+            commands.push(new SetGridItemCommand(d.id, gridItemFromCell(d.cellAfter)));
+        }
+        if (d.locked || d.isGroup)
+            continue;
+        if (Math.abs(d.posAfter.x - d.posBefore.x) > EPS ||
+            Math.abs(d.posAfter.y - d.posBefore.y) > EPS) {
+            commands.push(new MoveNodeCommand(d.id, Object.assign({}, d.posAfter), Object.assign({}, d.posBefore), { mergeable: false }));
+        }
+        if (Math.abs(d.sizeAfter.width - d.sizeBefore.width) > EPS ||
+            Math.abs(d.sizeAfter.height - d.sizeBefore.height) > EPS) {
+            commands.push(new ResizeNodeCommand(d.id, Object.assign({ depth: 0 }, d.sizeAfter), Object.assign({ depth: 0 }, d.sizeBefore)));
+        }
+    }
+    return commands;
+}
+//# sourceMappingURL=grid-mapping.js.map

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

@@ -0,0 +1,8 @@
+export { bindDashboardGrid, } from './grid-binder';
+export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, } from './grid-mapping';
+export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles';
+// The DATA-FIRST authoring API (the erDiagram/umlDiagram equivalent).
+export { dashboard, } from './dashboard';
+// The built-in renderers behind `kind` — dashboard()'s default renderWidget.
+export { defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './widgets';
+//# sourceMappingURL=index.js.map

package/{src/lib/dashboard-kit/styles.ts → esm/src/lib/dashboard-kit/styles.js}

@@ -20,9 +20,7 @@
  *    injects it into each member host and re-injects if the host repaints
  *    (pages own their card innerHTML).
  */
-
 export const DASHBOARD_KIT_STYLE_ID = 'grafloria-dashboard-kit-styles';
-
 const CSS = `
 /* ===== reflow glide (armed on the html layer for the whole gesture) ===== */
 .grafloria-html-layer.axdb-glide > .grafloria-node-host {
@@ -195,12 +193,13 @@ const CSS = `
   }
 }
 `;
-
 /** Idempotently inject the kit stylesheet (safe to call per binder). */
-export function ensureDashboardKitStyles(doc: Document = document): void {
-  if (doc.getElementById(DASHBOARD_KIT_STYLE_ID)) return;
-  const style = doc.createElement('style');
-  style.id = DASHBOARD_KIT_STYLE_ID;
-  style.textContent = CSS;
-  doc.head.appendChild(style);
+export function ensureDashboardKitStyles(doc = document) {
+    if (doc.getElementById(DASHBOARD_KIT_STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = DASHBOARD_KIT_STYLE_ID;
+    style.textContent = CSS;
+    doc.head.appendChild(style);
 }
+//# sourceMappingURL=styles.js.map

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