@cerebro-labs/agentnava-sdk 0.53.2 → 0.75.0

package/react.css

@@ -12,17 +12,17 @@
   --an-w-ink: #16181d;
   --an-w-muted: #6b7280;
   --an-w-line: #e5e7eb;
-  --an-w-surface: #f8f9fb;
-  --an-w-tint: #eef2f7;
+  --an-w-surface: #f8f8f6;
+  --an-w-tint: #f1f0ec;
   --an-w-accent: #1f2937;
   --an-w-accent-ink: #ffffff;
-  --an-w-s0: #2563eb;
-  --an-w-s1: #d97706;
-  --an-w-s2: #059669;
-  --an-w-s3: #7c3aed;
-  --an-w-high: #dc2626;
+  --an-w-s0: #2f6b55;
+  --an-w-s1: #b08a3e;
+  --an-w-s2: #4a6c8f;
+  --an-w-s3: #b4472f;
+  --an-w-high: #b4472f;
   --an-w-medium: #d97706;
-  --an-w-good: #059669;
+  --an-w-good: #3e7c59;
   --an-w-info: #2563eb;
   --an-w-radius: 8px;
 }
@@ -87,8 +87,10 @@
 .an-w-card > img {
   display: block;
   width: 100%;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 1 / 1;
+  max-height: 320px;
   object-fit: cover;
+  object-position: center 22%;
 }
 .an-w-card-body {
   display: flex;
@@ -103,6 +105,35 @@
 .an-w-card-link:hover .an-w-card {
   border-color: var(--an-w-muted);
 }
+.an-w-card.has-action {
+  display: flex;
+  flex-direction: column;
+}
+.an-w-card-main {
+  display: block;
+  flex: 1;
+  color: inherit;
+  text-decoration: none;
+}
+.an-w-card-main > img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  max-height: 320px;
+  object-fit: cover;
+  object-position: center 22%;
+}
+.an-w-card-action {
+  display: block;
+  margin: 0 12px 12px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  text-align: center;
+  font-weight: 600;
+  text-decoration: none;
+  background: var(--an-w-accent);
+  color: var(--an-w-accent-ink);
+}
 
 .an-w-text.is-title {
   font-size: 1.15em;
@@ -125,23 +156,39 @@
 .an-w-stat {
   display: flex;
   flex-direction: column;
-  gap: 1px;
-  padding: 8px 10px;
-  border-radius: var(--an-w-radius);
-  background: var(--an-w-tint);
+  gap: 4px;
+  padding: 18px 20px 16px;
+  border: 1px solid var(--an-w-line);
+  border-radius: 14px;
+  background: linear-gradient(180deg, #ffffff, var(--an-w-surface));
+  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.04), 0 6px 18px rgba(16, 16, 16, 0.05);
 }
-.an-w-stat strong {
-  font-size: 1.25em;
+.an-w-stat span {
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
+  font-size: 0.95em;
+  color: var(--an-w-ink);
 }
-.an-w-stat span {
-  font-weight: 500;
+.an-w-stat strong {
+  font-size: 2.1em;
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--an-w-ink);
+  font-variant-numeric: tabular-nums;
 }
 .an-w-stat small {
   color: var(--an-w-muted);
-  font-size: 0.85em;
-  line-height: 1.3;
+  font-size: 0.9em;
+  line-height: 1.35;
+}
+.an-w-stat small b {
+  font-weight: 600;
+}
+.an-w-stat small b.is-up {
+  color: var(--an-w-good);
+}
+.an-w-stat small b.is-down {
+  color: var(--an-w-high);
 }
 
 .an-w-kv dl > div {
@@ -169,6 +216,12 @@
 
 .an-w-table {
   overflow-x: auto;
+  border: 1px solid var(--an-w-line);
+  border-radius: 12px;
+  background: #fff;
+}
+.an-w-table > .an-w-title {
+  padding: 10px 12px 0;
 }
 .an-w-table table {
   border-collapse: collapse;
@@ -177,17 +230,24 @@
 .an-w-table th,
 .an-w-table td {
   text-align: left;
-  padding: 5px 10px 5px 0;
+  padding: 9px 12px;
   border-bottom: 1px solid var(--an-w-line);
-  white-space: nowrap;
+  vertical-align: top;
+}
+.an-w-table tbody tr:last-child td {
+  border-bottom: 0;
 }
 .an-w-table th {
-  color: var(--an-w-muted);
-  font-weight: 500;
+  color: var(--an-w-ink);
+  font-weight: 600;
+  background: var(--an-w-surface);
+  white-space: nowrap;
 }
+.an-w-table th.is-num,
 .an-w-table td.is-num {
   text-align: right;
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .an-w-chart figcaption {
@@ -196,16 +256,103 @@
   font-weight: 500;
   margin-bottom: 6px;
 }
+.an-w-chart-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin: -2px 0 6px;
+}
+.an-w-chart-head strong {
+  font-size: 1.9em;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--an-w-ink);
+  font-variant-numeric: tabular-nums;
+}
+.an-w-chart-head span {
+  color: var(--an-w-muted);
+  font-size: 0.9em;
+  font-variant-numeric: tabular-nums;
+}
+.an-w-chart-box {
+  position: relative;
+  width: 100%;
+}
 .an-w-chart svg {
   display: block;
-  width: 100%;
-  height: auto;
+  max-width: 100%;
   overflow: visible;
 }
 .an-w-chart text {
-  font-size: 10px;
+  font-size: 11px;
   fill: var(--an-w-muted);
+  font-variant-numeric: tabular-nums;
+}
+.an-w-chart text.an-w-val {
+  fill: var(--an-w-ink);
+  font-weight: 500;
+}
+.an-w-grid line {
+  stroke: var(--an-w-line);
+  stroke-width: 1;
+}
+.an-w-zero {
+  stroke: var(--an-w-muted);
+  stroke-opacity: 0.5;
+}
+.an-w-cross {
+  stroke: var(--an-w-muted);
+  stroke-opacity: 0.4;
+  stroke-dasharray: 3 3;
 }
+.an-w-chart rect.is-dim {
+  opacity: 0.45;
+}
+.an-w-chart circle {
+  stroke: #fff;
+  stroke-width: 2;
+  filter: drop-shadow(0 1px 3px rgba(16, 16, 16, 0.25));
+}
+.an-w-area {
+  stroke: none;
+}
+.an-w-stop.an-w-s0 { stop-color: var(--an-w-s0); }
+.an-w-stop.an-w-s1 { stop-color: var(--an-w-s1); }
+.an-w-stop.an-w-s2 { stop-color: var(--an-w-s2); }
+.an-w-stop.an-w-s3 { stop-color: var(--an-w-s3); }
+.an-w-tip {
+  position: absolute;
+  top: 8px;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 9px;
+  border: 1px solid var(--an-w-line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.78);
+  -webkit-backdrop-filter: blur(14px) saturate(1.5);
+  backdrop-filter: blur(14px) saturate(1.5);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 6px 20px rgba(16, 16, 16, 0.1);
+  font-size: 12px;
+  white-space: nowrap;
+}
+.an-w-tip b {
+  color: var(--an-w-muted);
+  font-weight: 500;
+}
+.an-w-tip i {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+.an-w-tip i.an-w-s0 { background: var(--an-w-s0); }
+.an-w-tip i.an-w-s1 { background: var(--an-w-s1); }
+.an-w-tip i.an-w-s2 { background: var(--an-w-s2); }
+.an-w-tip i.an-w-s3 { background: var(--an-w-s3); }
 .an-w-chart rect.an-w-s0,
 .an-w-chart circle.an-w-s0 {
   fill: var(--an-w-s0);
@@ -224,7 +371,9 @@
 }
 .an-w-line {
   fill: none;
-  stroke-width: 2;
+  stroke-width: 2.25;
+  stroke-linejoin: round;
+  stroke-linecap: round;
 }
 .an-w-line.an-w-s0 {
   stroke: var(--an-w-s0);

package/react.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Ready-made React views for the widgets an agent draws in its replies.
 //
 //   import { ReplyView } from '@cerebro-labs/agentnava-sdk/react'
@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // once, even if two containers name it; links and pictures open only over
 // https:// (narrow it further with `allowUrl`); and a widget that throws while
 // drawing is left out rather than breaking the screen around it.
-import { Component, Fragment } from 'react';
+import { Component, Fragment, useEffect, useId, useRef, useState } from 'react';
 import { placeWidgets } from "./widgets.js";
 export { placeWidgets } from "./widgets.js";
 const str = (v) => (typeof v === 'string' || typeof v === 'number' ? String(v) : '');
@@ -34,7 +34,63 @@ class Boundary extends Component {
         return this.state.failed ? null : this.props.children;
     }
 }
+/** A caption's leading figure is bold; a signed one ("-1.55%", "+12") is red or green too. */
+function caption(text) {
+    const m = /^([+\-\u2212]?[$\u20ac\u00a3\u20b9]?\d[\d,.]*[%KMBTx]?)(.*)$/s.exec(text);
+    if (!m)
+        return text;
+    // Only a signed figure says which way it moved; "12 errors" is not good news.
+    const dir = /^[-\u2212]/.test(m[1]) ? 'is-down' : m[1].startsWith('+') ? 'is-up' : '';
+    return (_jsxs(_Fragment, { children: [_jsx("b", { className: dir || undefined, children: m[1] }), m[2]] }));
+}
+/** Round numbers for the y axis: about `count` steps of 1, 2, 2.5 or 5 x 10^n. */
+function niceTicks(lo, hi, count = 4) {
+    if (lo === hi) {
+        const pad = Math.abs(lo) * 0.1 || 1;
+        lo -= pad;
+        hi += pad;
+    }
+    const raw = (hi - lo) / count;
+    const mag = 10 ** Math.floor(Math.log10(raw));
+    const step = ([1, 2, 2.5, 5, 10].find((m) => m * mag >= raw) ?? 10) * mag;
+    const ticks = [];
+    for (let t = Math.floor(lo / step) * step; t <= hi + step * 1e-9; t += step)
+        ticks.push(Number(t.toPrecision(12)));
+    if (ticks[ticks.length - 1] < hi)
+        ticks.push(Number((ticks[ticks.length - 1] + step).toPrecision(12)));
+    return ticks;
+}
+/** Short axis numbers: 1.2K, 3.4M, 5B. */
+function compact(n, locale) {
+    try {
+        return new Intl.NumberFormat(locale, {
+            notation: 'compact',
+            maximumFractionDigits: 1,
+        }).format(n);
+    }
+    catch {
+        return String(n);
+    }
+}
 function Chart({ part, ctx }) {
+    const box = useRef(null);
+    const gid = `an-w-g${useId().replace(/:/g, '')}`;
+    // Drawn in real pixels at the box's own width, so text stays at body size
+    // however wide the card is (a scaled viewBox blew 10px labels up to 40px).
+    const [W, setW] = useState(560);
+    const [hover, setHover] = useState(null);
+    useEffect(() => {
+        const el = box.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(([e]) => {
+            const w = Math.round(e.contentRect.width);
+            if (w > 0)
+                setW(w);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
     const series = list(part.series)
         .map((s) => ({
         name: str(s?.name),
@@ -44,26 +100,70 @@ function Chart({ part, ctx }) {
     if (series.length === 0)
         return null;
     const xs = series[0].points.map((p) => str(p.x));
+    const n = Math.max(...series.map((s) => s.points.length));
     const ref = part.reference;
     const refY = typeof ref?.y === 'number' && Number.isFinite(ref.y) ? ref.y : undefined;
+    const isBar = part.type === 'bar';
     const ys = [...series.flatMap((s) => s.points.map((p) => p.y)), ...(refY === undefined ? [] : [refY])];
-    // Zero sits between the extremes, so a negative value draws below the zero
-    // line instead of collapsing onto it and reading as 0.
-    const lo = Math.min(...ys, 0);
-    const span = Math.max(...ys, 0) - lo || 1;
-    const W = 320;
-    const H = 140;
-    const step = W / Math.max(xs.length, 1);
-    const fmt = (n) => (part.unit === 'currency' ? ctx.money(n) : part.unit === 'percent' ? `${ctx.number(n)}%` : ctx.number(n));
-    const yOf = (y) => H - ((y - lo) / span) * (H - 18);
-    const zero = yOf(0);
-    const labelled = series.length === 1 && xs.length <= 6;
-    return (_jsxs("figure", { className: "an-w-chart", children: [str(part.title) && _jsx("figcaption", { children: str(part.title) }), _jsxs("svg", { viewBox: `0 0 ${W} ${H + 18}`, role: "img", "aria-label": str(part.title) || 'Chart', children: [series.map((s, si) => part.type === 'bar' ? (s.points.map((p, i) => {
-                        const bw = (step * 0.7) / series.length;
-                        const x = i * step + step * 0.15 + si * bw;
-                        const y = yOf(p.y);
-                        return (_jsxs("g", { children: [_jsx("rect", { className: `an-w-s${si % 4}`, x: x, y: Math.min(y, zero), width: bw, height: Math.abs(zero - y), rx: 2, children: _jsx("title", { children: `${str(p.x)}: ${fmt(p.y)}` }) }), labelled && (_jsx("text", { x: x + bw / 2, y: Math.min(y, zero) - 4, textAnchor: "middle", children: fmt(p.y) }))] }, `${si}-${i}`));
-                    })) : (_jsxs("g", { children: [_jsx("polyline", { className: `an-w-line an-w-s${si % 4}${part.type === 'area' ? ' is-area' : ''}`, points: s.points.map((p, i) => `${i * step + step / 2},${yOf(p.y)}`).join(' ') }), s.points.map((p, i) => (_jsxs("g", { children: [_jsx("circle", { className: `an-w-s${si % 4}`, cx: i * step + step / 2, cy: yOf(p.y), r: 3, children: _jsx("title", { children: `${str(p.x)}: ${fmt(p.y)}` }) }), labelled && (_jsx("text", { x: i * step + step / 2, y: yOf(p.y) - 7, textAnchor: "middle", children: fmt(p.y) }))] }, i)))] }, si))), lo < 0 && _jsx("line", { x1: 0, x2: W, y1: zero, y2: zero, stroke: "currentColor", strokeOpacity: 0.4 }), refY !== undefined && (_jsxs("g", { className: "an-w-ref", children: [_jsx("line", { x1: 0, x2: W, y1: yOf(refY), y2: yOf(refY) }), str(ref?.label) && (_jsx("text", { x: W, y: yOf(refY) - 4, textAnchor: "end", children: str(ref?.label) }))] })), xs.map((x, i) => (_jsx("text", { x: i * step + step / 2, y: H + 14, textAnchor: "middle", children: x }, i)))] }), series.length > 1 && (_jsx("div", { className: "an-w-legend", children: series.map((s, si) => (_jsxs("span", { children: [_jsx("i", { className: `an-w-s${si % 4}` }), s.name] }, si))) }))] }));
+    // Bars measure from zero, so zero is always in range. A line shows change,
+    // so it fits its own range: a price moving 520 to 540 must not draw flat.
+    const dataLo = Math.min(...ys);
+    const dataHi = Math.max(...ys);
+    const ticks = isBar ? niceTicks(Math.min(dataLo, 0), Math.max(dataHi, 0)) : niceTicks(dataLo, dataHi);
+    const lo = ticks[0];
+    const hi = ticks[ticks.length - 1];
+    const span = hi - lo || 1;
+    const fmt = (v) => (part.unit === 'currency' ? ctx.money(v) : part.unit === 'percent' ? `${ctx.number(v)}%` : ctx.number(v));
+    const axis = (v) => {
+        const short = Math.abs(hi) >= 10000 || Math.abs(lo) >= 10000 ? compact(v, ctx.props.locale) : ctx.number(v);
+        return part.unit === 'currency' ? (fmt(0).replace(/[\d.,\s]+/g, '') || '') + short : part.unit === 'percent' ? `${short}%` : short;
+    };
+    const H = 220;
+    const top = 12;
+    const bottom = 26;
+    const left = Math.max(...ticks.map((t) => axis(t).length)) * 6.5 + 10;
+    const right = Math.max(12, Math.max(...xs.map((x) => x.length), 1) * 3.3);
+    const plotW = Math.max(W - left - right, 40);
+    const plotH = H - top - bottom;
+    const yOf = (y) => top + plotH - ((y - lo) / span) * plotH;
+    const step = plotW / Math.max(n, 1);
+    const xOf = (i) => (isBar ? left + i * step + step / 2 : left + (n === 1 ? plotW / 2 : (i / (n - 1)) * plotW));
+    const zero = yOf(Math.max(lo, Math.min(0, hi)));
+    // Thin the x labels until each fits in the room it has.
+    const longest = Math.max(...xs.map((x) => x.length), 1);
+    const every = Math.max(1, Math.ceil((longest * 6.5 + 12) / (plotW / Math.max(n, 1))));
+    const showDots = false;
+    const pick = (e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        const px = ((e.clientX - r.left) / r.width) * W;
+        let best = 0;
+        for (let i = 1; i < n; i++)
+            if (Math.abs(xOf(i) - px) < Math.abs(xOf(best) - px))
+                best = i;
+        setHover(best);
+    };
+    const tipX = hover === null ? 0 : xOf(hover);
+    // One trend line leads with where it ended and how far it moved, like a stat.
+    const only = series.length === 1 && !isBar && series[0].points.length >= 2 ? series[0].points : undefined;
+    const headline = only
+        ? (() => {
+            const first = only[0].y;
+            const last = only[only.length - 1].y;
+            const delta = last - first;
+            const abs = part.unit === 'percent' ? `${ctx.number(Math.abs(delta))} pts` : fmt(Math.abs(delta)).replace('-', '');
+            const pct = part.unit !== 'percent' && first > 0 && last >= 0 ? ` (${ctx.number(Math.round((Math.abs(delta) / first) * 1000) / 10)}%)` : '';
+            return { last, delta, change: abs + pct, from: str(only[0].x) };
+        })()
+        : undefined;
+    return (_jsxs("figure", { className: "an-w-chart", children: [str(part.title) && _jsx("figcaption", { children: str(part.title) }), headline && (_jsxs("div", { className: "an-w-chart-head", children: [_jsx("strong", { children: fmt(headline.last) }), _jsxs("span", { children: [headline.delta === 0 ? 'No change' : `${headline.delta > 0 ? '\u25B2' : '\u25BC'} ${headline.change}`, " since ", headline.from] })] })), _jsxs("div", { ref: box, className: "an-w-chart-box", children: [_jsxs("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": str(part.title) || 'Chart', onMouseMove: pick, onMouseLeave: () => setHover(null), children: [_jsx("defs", { children: [0, 1, 2, 3].map((k) => (_jsxs("linearGradient", { id: `${gid}-${k}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "0%", className: `an-w-stop an-w-s${k}`, stopOpacity: part.type === 'area' ? 0.28 : 0.18 }), _jsx("stop", { offset: "100%", className: `an-w-stop an-w-s${k}`, stopOpacity: 0 })] }, k))) }), ticks.map((t) => (_jsxs("g", { className: "an-w-grid", children: [_jsx("line", { x1: left, x2: W - right, y1: yOf(t), y2: yOf(t) }), _jsx("text", { x: left - 8, y: yOf(t), dy: "0.32em", textAnchor: "end", children: axis(t) })] }, t))), series.map((s, si) => isBar ? (s.points.map((p, i) => {
+                                const bw = Math.min((step * 0.7) / series.length, 48);
+                                const x = xOf(i) - (bw * series.length) / 2 + si * bw;
+                                const y = yOf(p.y);
+                                return (_jsxs("g", { children: [_jsx("rect", { className: `an-w-s${si % 4}${hover !== null && hover !== i ? ' is-dim' : ''}`, x: x + 1, y: Math.min(y, zero), width: Math.max(bw - 2, 1), height: Math.max(Math.abs(zero - y), 1), rx: 3 }), series.length === 1 && n <= 8 && (_jsx("text", { className: "an-w-val", x: x + bw / 2, y: Math.min(y, zero) - 6, textAnchor: "middle", children: fmt(p.y) }))] }, `${si}-${i}`));
+                            })) : (_jsxs("g", { children: [(part.type === 'area' || series.length === 1) && (_jsx("path", { className: `an-w-area an-w-s${si % 4}`, fill: `url(#${gid}-${si % 4})`, d: `M${xOf(0)},${zero} ${s.points.map((p, i) => `L${xOf(i)},${yOf(p.y)}`).join(' ')} L${xOf(s.points.length - 1)},${zero}Z` })), _jsx("polyline", { className: `an-w-line an-w-s${si % 4}`, points: s.points.map((p, i) => `${xOf(i)},${yOf(p.y)}`).join(' ') }), s.points.map((p, i) => showDots || hover === i || (series.length === 1 && i === s.points.length - 1) ? (_jsx("circle", { className: `an-w-s${si % 4}`, cx: xOf(i), cy: yOf(p.y), r: hover === i ? 4.5 : 4 }, i)) : null)] }, si))), lo < 0 && hi > 0 && _jsx("line", { className: "an-w-zero", x1: left, x2: W - right, y1: zero, y2: zero }), refY !== undefined && (_jsxs("g", { className: "an-w-ref", children: [_jsx("line", { x1: left, x2: W - right, y1: yOf(refY), y2: yOf(refY) }), str(ref?.label) && (_jsx("text", { x: W - right, y: yOf(refY) - 5, textAnchor: "end", children: str(ref?.label) }))] })), xs.map((x, i) => i % every === 0 ? (_jsx("text", { x: xOf(i), y: H - 8, textAnchor: "middle", children: x }, i)) : null), hover !== null && !isBar && _jsx("line", { className: "an-w-cross", x1: tipX, x2: tipX, y1: top, y2: top + plotH })] }), hover !== null && (_jsxs("div", { className: "an-w-tip", style: {
+                            left: tipX,
+                            transform: `translateX(${tipX > W / 2 ? 'calc(-100% - 10px)' : '10px'})`,
+                        }, children: [_jsx("b", { children: xs[hover] }), series.map((s, si) => s.points[hover] ? (_jsxs("span", { children: [_jsx("i", { className: `an-w-s${si % 4}` }), series.length > 1 && `${s.name} `, _jsx("strong", { children: fmt(s.points[hover].y) })] }, si)) : null)] }))] }), series.length > 1 && (_jsx("div", { className: "an-w-legend", children: series.map((s, si) => (_jsxs("span", { children: [_jsx("i", { className: `an-w-s${si % 4}` }), s.name] }, si))) }))] }));
 }
 /** The default look of one part. `kids` is its children, already drawn. */
 function defaultPart(part, kids, ctx) {
@@ -76,6 +176,14 @@ function defaultPart(part, kids, ctx) {
         case 'Card': {
             const image = ctx.url(part.image, 'image');
             const href = ctx.url(part.href, 'link');
+            const actionHref = ctx.url(part.actionHref, 'link');
+            const actionLabel = str(part.actionLabel);
+            if (actionHref && actionLabel) {
+                // The card's one button ("Add to cart") is a link beside the card's
+                // own link, never inside it.
+                const inner = (_jsxs(_Fragment, { children: [image && _jsx("img", { src: image, alt: str(part.imageAlt), referrerPolicy: "no-referrer", loading: "lazy" }), _jsx("div", { className: "an-w-card-body", children: kids })] }));
+                return (_jsxs("div", { className: "an-w-card has-action", children: [href ? (_jsx("a", { className: "an-w-card-main", href: href, target: "_blank", rel: "noreferrer noopener", children: inner })) : (_jsx("div", { className: "an-w-card-main", children: inner })), _jsx("a", { className: "an-w-card-action", href: actionHref, target: "_blank", rel: "noreferrer noopener", children: actionLabel })] }));
+            }
             const body = (_jsxs("div", { className: "an-w-card", children: [image && _jsx("img", { src: image, alt: str(part.imageAlt), referrerPolicy: "no-referrer", loading: "lazy" }), _jsx("div", { className: "an-w-card-body", children: kids })] }));
             return href ? (_jsx("a", { className: "an-w-card-link", href: href, target: "_blank", rel: "noreferrer noopener", children: body })) : (body);
         }
@@ -88,7 +196,7 @@ function defaultPart(part, kids, ctx) {
         case 'Stat':
             if (!str(part.value))
                 return null;
-            return (_jsxs("div", { className: "an-w-stat", children: [_jsx("strong", { children: str(part.value) }), str(part.label) && _jsx("span", { children: str(part.label) }), str(part.caption) && _jsx("small", { children: str(part.caption) })] }));
+            return (_jsxs("div", { className: "an-w-stat", children: [str(part.label) && _jsx("span", { children: str(part.label) }), _jsx("strong", { children: str(part.value) }), str(part.caption) && _jsx("small", { children: caption(str(part.caption)) })] }));
         case 'KeyValue': {
             const rows = list(part.rows).filter((r) => str(r?.label) || str(r?.value));
             if (rows.length === 0)
@@ -100,7 +208,15 @@ function defaultPart(part, kids, ctx) {
             const rows = list(part.rows).filter(Array.isArray);
             if (cols.length === 0 && rows.length === 0)
                 return null;
-            return (_jsxs("div", { className: "an-w-table", children: [str(part.title) && _jsx("div", { className: "an-w-title", children: str(part.title) }), _jsxs("table", { children: [cols.length > 0 && (_jsx("thead", { children: _jsx("tr", { children: cols.map((c, j) => (_jsx("th", { children: c }, j))) }) })), _jsx("tbody", { children: rows.map((r, i) => (_jsx("tr", { children: r.map((c, j) => (_jsx("td", { className: typeof c === 'number' ? 'is-num' : undefined, children: typeof c === 'number' ? ctx.number(c) : str(c) }, j))) }, i))) })] })] }));
+            // A column is numeric when every filled cell is a figure ("521.91", "-1.55%", "$3.2B"),
+            // and then its header lines up with its numbers on the right.
+            const figure = (c) => typeof c === 'number' || (typeof c === 'string' && /^[+\-\u2212]?[$\u20ac\u00a3\u20b9]?\d[\d,.]*\s?[%KMBTx]?$/.test(c.trim()));
+            const numCol = (j) => {
+                const filled = rows.map((r) => r[j]).filter((c) => c !== null && c !== undefined && c !== '');
+                return filled.length > 0 && filled.every(figure);
+            };
+            const nums = Array.from({ length: Math.max(cols.length, ...rows.map((r) => r.length)) }, (_, j) => numCol(j));
+            return (_jsxs("div", { className: "an-w-table", children: [str(part.title) && _jsx("div", { className: "an-w-title", children: str(part.title) }), _jsxs("table", { children: [cols.length > 0 && (_jsx("thead", { children: _jsx("tr", { children: cols.map((c, j) => (_jsx("th", { className: nums[j] ? 'is-num' : undefined, children: c }, j))) }) })), _jsx("tbody", { children: rows.map((r, i) => (_jsx("tr", { children: r.map((c, j) => (_jsx("td", { className: nums[j] ? 'is-num' : undefined, children: typeof c === 'number' ? ctx.number(c) : str(c) }, j))) }, i))) })] })] }));
         }
         case 'Chart':
             return _jsx(Chart, { part: part, ctx: ctx });
@@ -171,7 +287,11 @@ export function WidgetView(props) {
         return null;
     let moneyFormat;
     try {
-        moneyFormat = new Intl.NumberFormat(locale, { style: 'currency', currency, maximumFractionDigits: 0 });
+        moneyFormat = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            maximumFractionDigits: 0,
+        });
     }
     catch {
         moneyFormat = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 });