@aparte/plugin-cards 0.0.0-stage → 0.29.1

package/dist/stats.js

@@ -0,0 +1,1085 @@
+import { b as defineCard, q as str, r as word, h as formatNumber, e as el, t as toDate, n as intlTag, l as formatWhen, a as currencyCode, p as num, m as glyph, k as formatUnit } from "./format-BFq79ydr.js";
+import { s as sparkline } from "./sparkline-C-cA9obz.js";
+const svg = (body) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">${body}</svg>`;
+const MONEY = svg('<ellipse cx="12" cy="6.5" rx="6.5" ry="2.7"/><path d="M5.5 6.5v5c0 1.5 2.9 2.7 6.5 2.7s6.5-1.2 6.5-2.7v-5"/><path d="M5.5 11.5v5c0 1.5 2.9 2.7 6.5 2.7s6.5-1.2 6.5-2.7v-5"/>');
+const USERS = svg('<circle cx="9" cy="8.5" r="3.2"/><path d="M3.2 19.2c.6-3.1 2.9-5 5.8-5s5.2 1.9 5.8 5"/><path d="M15.2 5.6a3.1 3.1 0 0 1 0 5.9"/><path d="M17.4 14.5c1.9.6 3.1 2.3 3.4 4.7"/>');
+const CART = svg('<path d="M3 4h2.2l2.1 10.4a1.6 1.6 0 0 0 1.6 1.3h8a1.6 1.6 0 0 0 1.6-1.2L20.2 8H6.1"/><circle cx="9.5" cy="19.3" r="1.3"/><circle cx="17" cy="19.3" r="1.3"/>');
+const CHART = svg('<path d="M4 4v15.5a.5.5 0 0 0 .5.5H20"/><path d="M7.5 15.5l3.6-4.2 3 2.6 5.1-6.4"/><path d="M16.3 7.5h2.9v2.9"/>');
+const CLOCK = svg('<circle cx="12" cy="12" r="8.2"/><path d="M12 7.6V12l2.9 1.9"/>');
+const STAR = svg('<path d="M12 3.6l2.5 5.2 5.7.8-4.1 4 1 5.6L12 16.5l-5.1 2.7 1-5.6-4.1-4 5.7-.8z"/>');
+const STAT_ICONS = { money: MONEY, users: USERS, cart: CART, chart: CHART, clock: CLOCK, star: STAR };
+const BARS = svg('<path d="M5 20V13.5"/><path d="M12 20V8.5"/><path d="M19 20V4.5"/><path d="M3 20h18"/>');
+const statsStyles = `/* =========================================
+   The stats card — @aparte/plugin-cards/stats
+   =========================================
+   Three variants of one card, chosen by \`data-variant\` on its root:
+     tiles  a tile per figure — label, big number, the change as a pill, a sparkline —
+            in a grid of two or three columns that drops to one on a narrow card.
+     list   a fact sheet: the label at the start of each row, the value at its end.
+     hero   the first figure large over a wide chart, the others small in a band under it.
+   A change is green when it went the way \`good\` says, red when not, neutral otherwise —
+   always with its arrow and its sign, so the colour is never the only one saying it.
+   Every colour is a theme token or derived from one, so light and dark follow the chat.
+   */
+
+.aparte-stats-card {
+  --aparte-stats-pad: var(--aparte-space-6);
+  --aparte-stats-good: var(--aparte-success);
+  --aparte-stats-good-ink: var(--aparte-success-ink);
+  --aparte-stats-bad: var(--aparte-error);
+  --aparte-stats-bad-ink: var(--aparte-error-ink);
+  --aparte-stats-neutral: var(--aparte-text-muted);
+  --aparte-stats-neutral-ink: var(--aparte-text-muted);
+  /* A figure with no change to judge it by: its line takes the theme's accent. */
+  --aparte-stats-accent: var(--aparte-primary);
+  --aparte-stats-tile-bg: color-mix(in oklab, var(--aparte-text) 3.5%, var(--aparte-surface-1));
+  --aparte-stats-tile-border: color-mix(in oklab, var(--aparte-border) 75%, transparent);
+  --aparte-stats-tile-hover-border: color-mix(in oklab, var(--aparte-text) 18%, var(--aparte-border));
+  --aparte-stats-band-bg: color-mix(in oklab, var(--aparte-text) 3%, var(--aparte-surface-1));
+  --aparte-stats-value-size: calc(1.75rem * var(--aparte-font-scale));
+  --aparte-stats-hero-value-size: calc(2.75rem * var(--aparte-font-scale));
+}
+
+/* ── Widths: each variant asks for its own; the bubble's limit caps them all ── */
+
+.aparte-stats-card[data-variant="tiles"] { --aparte-rich-card-max-inline-size: 28rem; }
+.aparte-stats-card[data-variant="tiles"]:has(.aparte-stats__tiles[data-columns="1"]) { --aparte-rich-card-max-inline-size: 18rem; }
+.aparte-stats-card[data-variant="tiles"]:has(.aparte-stats__tiles[data-columns="3"]) { --aparte-rich-card-max-inline-size: 36rem; }
+.aparte-stats-card[data-variant="list"] { --aparte-rich-card-max-inline-size: 26rem; }
+.aparte-stats-card[data-variant="hero"] { --aparte-rich-card-max-inline-size: 30rem; }
+
+/* ── Heading and footer ──────────────────────────────────────────────── */
+
+.aparte-stats__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-1);
+  padding: var(--aparte-stats-pad) var(--aparte-stats-pad) 0;
+  min-inline-size: 0;
+}
+
+.aparte-stats__title {
+  font-size: var(--aparte-font-size-base);
+  font-weight: var(--aparte-font-weight-semibold);
+  color: var(--aparte-text);
+  overflow-wrap: anywhere;
+}
+
+.aparte-stats__subtitle {
+  font-size: var(--aparte-font-size-sm);
+  color: var(--aparte-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.aparte-stats__body {
+  /* The grid inside reads the body's width, not the window's: a card in a narrow bubble
+     on a wide screen still drops to fewer columns. */
+  container: aparte-stats / inline-size;
+  padding: var(--aparte-space-5) var(--aparte-stats-pad) var(--aparte-stats-pad);
+  min-inline-size: 0;
+}
+
+.aparte-stats__body:first-child { padding-block-start: var(--aparte-stats-pad); }
+
+.aparte-stats__foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--aparte-space-1) var(--aparte-space-4);
+  padding: var(--aparte-space-3) var(--aparte-stats-pad);
+  border-block-start: var(--aparte-border-width) solid var(--aparte-border);
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-xs);
+}
+
+.aparte-stats__footnote { overflow-wrap: anywhere; }
+.aparte-stats__updated { margin-inline-start: auto; white-space: nowrap; }
+
+/* ── A figure, whatever its shape ────────────────────────────────────── */
+
+.aparte-stats__stat {
+  --aparte-rich-card-spark: var(--aparte-stats-accent);
+  min-inline-size: 0;
+}
+
+.aparte-stats__stat[data-tone="good"] { --aparte-rich-card-spark: var(--aparte-stats-good); }
+.aparte-stats__stat[data-tone="bad"] { --aparte-rich-card-spark: var(--aparte-stats-bad); }
+.aparte-stats__stat[data-tone="neutral"] { --aparte-rich-card-spark: var(--aparte-stats-neutral); }
+
+.aparte-stats__label {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-2);
+  min-inline-size: 0;
+  margin: 0;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-sm);
+  font-weight: var(--aparte-font-weight-medium);
+  line-height: 1.3;
+}
+
+.aparte-stats__label-text { min-inline-size: 0; overflow-wrap: anywhere; }
+
+/* The glyph sits on a soft chip of the accent, like an app's own KPI icons. */
+.aparte-stats__icon {
+  --aparte-rich-card-glyph-size: 1.5rem;
+  box-sizing: border-box;
+  padding: 0.3rem;
+  border-radius: var(--aparte-radius-md);
+  background: color-mix(in oklab, var(--aparte-stats-accent) 13%, transparent);
+  color: var(--aparte-stats-accent);
+}
+
+.aparte-stats__value {
+  margin: 0;
+  min-inline-size: 0;
+  color: var(--aparte-text);
+  font-size: var(--aparte-stats-value-size);
+  font-weight: var(--aparte-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  overflow-wrap: anywhere;
+}
+
+/* A word, not a number: a size that does not shout. */
+.aparte-stats__value[data-format="text"] { letter-spacing: normal; }
+
+.aparte-stats__hint {
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-xs);
+  font-weight: var(--aparte-font-weight-normal);
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+/* ── The change: a pill (arrow, signed number), then what it compares with ── */
+
+.aparte-stats__change {
+  --aparte-stats-tone: var(--aparte-stats-neutral);
+  --aparte-stats-tone-ink: var(--aparte-stats-neutral-ink);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--aparte-space-1) var(--aparte-space-2);
+  min-inline-size: 0;
+  font-size: var(--aparte-font-size-xs);
+  line-height: 1.3;
+}
+
+.aparte-stats__change[data-tone="good"] {
+  --aparte-stats-tone: var(--aparte-stats-good);
+  --aparte-stats-tone-ink: var(--aparte-stats-good-ink);
+}
+
+.aparte-stats__change[data-tone="bad"] {
+  --aparte-stats-tone: var(--aparte-stats-bad);
+  --aparte-stats-tone-ink: var(--aparte-stats-bad-ink);
+}
+
+.aparte-stats__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+  padding: 0.15em 0.55em;
+  border-radius: var(--aparte-radius-full);
+  background: color-mix(in oklab, var(--aparte-stats-tone) 14%, transparent);
+  color: var(--aparte-stats-tone-ink);
+  font-weight: var(--aparte-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.aparte-stats__arrow {
+  font-size: 0.72em;
+  line-height: 1;
+}
+
+/* Good or bad, as a shape: a check on a filled dot, an exclamation on a ring — told apart
+   without the colour. */
+.aparte-stats__verdict {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.15em;
+  block-size: 1.15em;
+  border-radius: 50%;
+  font-size: 0.78em;
+  font-weight: var(--aparte-font-weight-bold);
+  line-height: 1;
+}
+
+.aparte-stats__change[data-tone="good"] .aparte-stats__verdict {
+  background: var(--aparte-stats-tone-ink);
+  color: var(--aparte-surface-1);
+}
+
+.aparte-stats__change[data-tone="bad"] .aparte-stats__verdict {
+  box-shadow: inset 0 0 0 1.5px var(--aparte-stats-tone-ink);
+}
+
+.aparte-stats__change-label {
+  min-inline-size: 0;
+  color: var(--aparte-text-muted);
+  overflow-wrap: anywhere;
+}
+
+/* ── The sparkline ───────────────────────────────────────────────────── */
+
+.aparte-stats__spark { min-inline-size: 0; }
+
+/* The line draws itself in once, from where time starts. */
+.aparte-stats__sparkline {
+  animation: aparte-stats-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes aparte-stats-reveal {
+  from { clip-path: inset(0 100% 0 0); }
+  to { clip-path: inset(0 0 0 0); }
+}
+
+/* ── tiles ───────────────────────────────────────────────────────────── */
+
+.aparte-stats__tiles {
+  --aparte-stats-columns: 2;
+  display: grid;
+  grid-template-columns: repeat(var(--aparte-stats-columns), minmax(0, 1fr));
+  gap: var(--aparte-space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.aparte-stats__tiles[data-columns="1"] { --aparte-stats-columns: 1; }
+.aparte-stats__tiles[data-columns="3"] {
+  --aparte-stats-columns: 3;
+  --aparte-stats-value-size: calc(1.5rem * var(--aparte-font-scale));
+}
+
+.aparte-stats__tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-2);
+  min-inline-size: 0;
+  padding: var(--aparte-space-4);
+  border: var(--aparte-border-width) solid var(--aparte-stats-tile-border);
+  border-radius: var(--aparte-radius-lg);
+  background: var(--aparte-stats-tile-bg);
+  transition: border-color var(--aparte-duration-fast, 120ms) ease;
+}
+
+.aparte-stats__tile:hover { border-color: var(--aparte-stats-tile-hover-border); }
+
+.aparte-stats__tile > .aparte-stats__value { margin-block-start: var(--aparte-space-1); }
+
+/* Under the hint, at the tile's foot: a row of tiles keeps its charts on one line. */
+.aparte-stats__tile > .aparte-stats__spark {
+  block-size: 2.25rem;
+  margin-block-start: auto;
+  padding-block-start: var(--aparte-space-2);
+}
+
+/* One figure alone: the card is its tile, no panel inside the panel. */
+.aparte-stats__tiles[data-columns="1"] > .aparte-stats__tile {
+  --aparte-stats-value-size: calc(2.25rem * var(--aparte-font-scale));
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
+.aparte-stats__tiles[data-columns="1"] > .aparte-stats__tile > .aparte-stats__spark { block-size: 3rem; }
+
+@container aparte-stats (max-width: 30rem) {
+  .aparte-stats__tiles[data-columns="3"] {
+    --aparte-stats-columns: 2;
+    --aparte-stats-value-size: calc(1.75rem * var(--aparte-font-scale));
+  }
+}
+
+/* A phone-wide card: one tile per line, each with the whole width for its number. */
+@container aparte-stats (max-width: 19.5rem) {
+  .aparte-stats__tiles,
+  .aparte-stats__tiles[data-columns="3"] { --aparte-stats-columns: 1; }
+}
+
+/* ── list ────────────────────────────────────────────────────────────── */
+
+.aparte-stats__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.aparte-stats__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--aparte-space-4);
+  padding: var(--aparte-space-3) var(--aparte-space-2);
+  margin-inline: calc(var(--aparte-space-2) * -1);
+  border-block-end: var(--aparte-border-width) solid var(--aparte-border);
+  border-radius: 0;
+  transition: background-color var(--aparte-duration-fast, 120ms) ease;
+}
+
+.aparte-stats__row:last-child { border-block-end: 0; }
+.aparte-stats__row:first-child { padding-block-start: 0; }
+.aparte-stats__row:last-child:not(:first-child) { padding-block-end: 0; }
+
+.aparte-stats__list > .aparte-stats__row:hover {
+  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--aparte-text) 3%, transparent) 30%, color-mix(in oklab, var(--aparte-text) 3%, transparent) 70%, transparent);
+}
+
+/* The label and its hint stacked, the glyph beside both. */
+.aparte-stats__row > .aparte-stats__label {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--aparte-space-3);
+  row-gap: 0.1rem;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-md);
+  font-weight: var(--aparte-font-weight-normal);
+}
+
+.aparte-stats__row > .aparte-stats__label:not(:has(> .aparte-stats__icon)) { grid-template-columns: minmax(0, 1fr); }
+.aparte-stats__row > .aparte-stats__label > .aparte-stats__icon { grid-row: span 2; }
+.aparte-stats__row > .aparte-stats__label > .aparte-stats__label-text,
+.aparte-stats__row > .aparte-stats__label > .aparte-stats__hint { grid-column: -2 / -1; }
+
+.aparte-stats__row-value {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--aparte-space-1) var(--aparte-space-3);
+  margin: 0;
+  text-align: end;
+}
+
+.aparte-stats__row-value > .aparte-stats__value {
+  font-size: var(--aparte-font-size-base);
+  letter-spacing: normal;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.aparte-stats__row-value > .aparte-stats__value[data-format="text"] { white-space: normal; }
+
+.aparte-stats__row-value > .aparte-stats__spark {
+  inline-size: 3.5rem;
+  block-size: 1.25rem;
+}
+
+.aparte-stats__row-value > .aparte-stats__change { justify-content: flex-end; }
+
+@container aparte-stats (max-width: 19.5rem) {
+  .aparte-stats__row-value > .aparte-stats__spark { display: none; }
+}
+
+/* ── hero ────────────────────────────────────────────────────────────── */
+
+.aparte-stats__hero {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-2);
+  min-inline-size: 0;
+}
+
+.aparte-stats__hero-figure {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--aparte-space-2) var(--aparte-space-4);
+  min-inline-size: 0;
+}
+
+.aparte-stats__hero .aparte-stats__value {
+  font-size: var(--aparte-stats-hero-value-size);
+  font-weight: var(--aparte-font-weight-bold);
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+
+.aparte-stats__hero .aparte-stats__change { font-size: var(--aparte-font-size-sm); }
+.aparte-stats__hero .aparte-stats__hint { font-size: var(--aparte-font-size-sm); }
+
+/* The chart runs to the card's edges, its area fading into the band below. */
+.aparte-stats__hero > .aparte-stats__spark {
+  block-size: 5rem;
+  margin-block-start: var(--aparte-space-3);
+  margin-inline: calc(var(--aparte-stats-pad) * -1);
+}
+
+.aparte-stats__hero:last-child > .aparte-stats__spark { margin-block-end: calc(var(--aparte-stats-pad) * -1); }
+
+.aparte-stats__hero .aparte-rich-card__sparkline-area { opacity: 0.18; }
+
+.aparte-stats__minis {
+  --aparte-stats-columns: 3;
+  display: grid;
+  grid-template-columns: repeat(var(--aparte-stats-columns), minmax(0, 1fr));
+  gap: var(--aparte-space-4) var(--aparte-space-5);
+  margin: 0 calc(var(--aparte-stats-pad) * -1) calc(var(--aparte-stats-pad) * -1);
+  padding: var(--aparte-space-5) var(--aparte-stats-pad);
+  border-block-start: var(--aparte-border-width) solid var(--aparte-border);
+  background: var(--aparte-stats-band-bg);
+}
+
+.aparte-stats__minis[data-count="1"] { --aparte-stats-columns: 1; }
+.aparte-stats__minis[data-count="2"],
+.aparte-stats__minis[data-count="4"] { --aparte-stats-columns: 2; }
+
+.aparte-stats__mini {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-1);
+  min-inline-size: 0;
+}
+
+.aparte-stats__mini > .aparte-stats__label {
+  font-size: var(--aparte-font-size-xs);
+  --aparte-rich-card-glyph-size: 1.25rem;
+}
+
+.aparte-stats__mini > .aparte-stats__label > .aparte-stats__icon { padding: 0.2rem; }
+
+.aparte-stats__mini > .aparte-stats__value {
+  font-size: var(--aparte-font-size-lg);
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.aparte-stats__mini-change { margin: 0; }
+
+.aparte-stats__mini-change .aparte-stats__pill {
+  padding: 0;
+  background: none;
+}
+
+@container aparte-stats (max-width: 19.5rem) {
+  .aparte-stats__minis,
+  .aparte-stats__minis[data-count] { --aparte-stats-columns: 2; }
+  .aparte-stats__minis[data-count="1"] { --aparte-stats-columns: 1; }
+}
+
+/* ── Loading ─────────────────────────────────────────────────────────── */
+
+.aparte-stats-card[data-state="loading"] .aparte-stats__sk-title { inline-size: 9rem; }
+.aparte-stats-card[data-state="loading"] .aparte-stats__sk-label { inline-size: 5rem; }
+.aparte-stats-card[data-state="loading"] .aparte-stats__sk-big {
+  inline-size: 6.5rem;
+  block-size: 2rem;
+  border-radius: var(--aparte-radius-md);
+}
+.aparte-stats-card[data-state="loading"] .aparte-stats__sk-pill {
+  inline-size: 3.5rem;
+  block-size: 1.1rem;
+  border-radius: var(--aparte-radius-full);
+}
+.aparte-stats-card[data-state="loading"] .aparte-stats__sk-value { inline-size: 3.5rem; }
+.aparte-stats-card[data-state="loading"] .aparte-stats__row .aparte-stats__sk-label { inline-size: 8rem; }
+.aparte-stats-card[data-state="loading"] .aparte-stats__row .aparte-stats__sk-value { justify-self: end; }
+.aparte-stats-card[data-state="loading"] .aparte-stats__hero .aparte-stats__sk-big { inline-size: 9rem; block-size: 2.75rem; }
+.aparte-stats-card[data-state="loading"] .aparte-stats__sk-chart {
+  inline-size: 100%;
+  block-size: 4rem;
+  margin-block: var(--aparte-space-3) var(--aparte-space-5);
+  border-radius: var(--aparte-radius-md);
+}
+.aparte-stats-card[data-state="loading"] .aparte-stats__minis { margin-block-start: 0; }
+.aparte-stats-card[data-state="loading"] .aparte-stats__mini .aparte-stats__sk-label { inline-size: 70%; }
+.aparte-stats-card[data-state="loading"] .aparte-skeleton--text + .aparte-skeleton--text { margin-block-start: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .aparte-stats__sparkline { animation: none; }
+}
+
+@media (max-width: 380px) {
+  .aparte-stats-card { --aparte-stats-pad: var(--aparte-space-5); }
+}
+`;
+const S = {
+  cardsStatsTitle: { en: "Key figures", fr: "Chiffres clés", de: "Kennzahlen", es: "Cifras clave", it: "Dati chiave", ja: "主要な数値", ko: "주요 수치", pt: "Números-chave", ru: "Ключевые показатели", zh: "关键数据" },
+  cardsStatsCount: { en: "{n} figures", fr: "{n} chiffres", de: "{n} Kennzahlen", es: "{n} cifras", it: "{n} dati", ja: "{n}件の数値", ko: "수치 {n}개", pt: "{n} números", ru: "Показателей: {n}", zh: "{n} 项数据" },
+  cardsStatsUpdated: { en: "Updated {when}", fr: "Mis à jour {when}", de: "Aktualisiert {when}", es: "Actualizado {when}", it: "Aggiornato {when}", ja: "{when} 更新", ko: "{when} 업데이트", pt: "Atualizado {when}", ru: "Обновлено {when}", zh: "更新于 {when}" },
+  // Said after the change ("+12% good"): the pill's green or red, for a reader who does not see colour.
+  cardsStatsGood: { en: "good", fr: "favorable", de: "positiv", es: "favorable", it: "positivo", ja: "好調", ko: "좋음", pt: "favorável", ru: "хорошо", zh: "向好" },
+  cardsStatsBad: { en: "bad", fr: "défavorable", de: "negativ", es: "desfavorable", it: "negativo", ja: "不調", ko: "나쁨", pt: "desfavorável", ru: "плохо", zh: "变差" }
+};
+const STATS_SHOWN = 12;
+const FORMATS = ["number", "percent", "currency", "compact", "duration", "text"];
+const isObject = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+function pick(r, keys) {
+  for (const key of keys) if (r[key] !== void 0 && r[key] !== null && r[key] !== "") return r[key];
+  return void 0;
+}
+const LABEL_KEYS = ["label", "name", "title", "key", "metric"];
+const VALUE_KEYS = ["value", "amount", "count", "total"];
+const LIST_KEYS = ["items", "stats", "metrics", "kpis", "figures", "facts"];
+const PERCENT_TEXT = /^([+\-−]?)\s*(\d+(?:[.,]\d+)?)\s*%$/;
+const GROUPED = /^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d+)?$/;
+function amount(value) {
+  const n = num(value);
+  if (n !== void 0) return n;
+  if (typeof value === "string" && GROUPED.test(value.trim())) return Number(value.trim().replace(/,/g, ""));
+  return void 0;
+}
+function percentText(value) {
+  if (typeof value !== "string") return void 0;
+  const match = PERCENT_TEXT.exec(value.trim());
+  if (!match) return void 0;
+  const n = Number(match[2].replace(",", ".")) / 100;
+  return match[1] === "-" || match[1] === "−" ? -n : n;
+}
+const asRatio = (n) => Math.abs(n) <= 1 ? n : n / 100;
+function isIntlUnit(unit) {
+  if (!/^[a-z]+(?:-[a-z]+)*$/.test(unit)) return false;
+  try {
+    new Intl.NumberFormat("en", { style: "unit", unit });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function readGood(r) {
+  const value = pick(r, ["good", "better", "goodDirection", "good_direction"]);
+  if (typeof value === "string") {
+    const v = value.trim().toLowerCase();
+    if (["up", "higher", "increase", "high", "more"].includes(v)) return "up";
+    if (["down", "lower", "decrease", "low", "less"].includes(v)) return "down";
+  }
+  const lower = pick(r, ["lowerIsBetter", "lower_is_better", "invert", "inverted"]);
+  if (typeof lower === "boolean") return lower ? "down" : "up";
+  const higher = pick(r, ["higherIsBetter", "higher_is_better"]);
+  if (typeof higher === "boolean") return higher ? "up" : "down";
+  return void 0;
+}
+function readTrend(value) {
+  if (!Array.isArray(value)) return void 0;
+  const points = value.map((p) => Array.isArray(p) ? num(p[1]) : isObject(p) ? num(pick(p, ["value", "y", "v", "count", "amount"])) : num(p)).filter((n) => n !== void 0).slice(-60);
+  return points.length >= 2 ? points : void 0;
+}
+function humanizeKey(key) {
+  const k = key.trim();
+  if (/\s/.test(k) || !/[a-z]/.test(k)) return k;
+  const words = k.replace(/([a-z\d])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").split(/[\s_-]+/).filter(Boolean);
+  const text = words.map((w) => /^[A-Z\d]{2,}$/.test(w) ? w : w.toLowerCase()).join(" ");
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+function readStat(raw, fallbackLabel) {
+  if (!isObject(raw)) {
+    return fallbackLabel === void 0 ? null : readStat({ value: raw }, fallbackLabel);
+  }
+  const r = raw;
+  const label = str(pick(r, LABEL_KEYS)) ?? (fallbackLabel !== void 0 ? humanizeKey(fallbackLabel) : void 0);
+  const rawValue = pick(r, VALUE_KEYS);
+  if (!label || rawValue === void 0 || typeof rawValue !== "number" && typeof rawValue !== "string") return null;
+  const asked = typeof r["format"] === "string" && FORMATS.includes(r["format"]) ? r["format"] : void 0;
+  const currency = currencyCode(pick(r, ["currency", "currency_code", "currencyCode"]));
+  const unit = str(pick(r, ["unit", "units"]));
+  const digitsRaw = num(pick(r, ["digits", "decimals", "precision"]));
+  const digits = digitsRaw !== void 0 ? Math.min(6, Math.max(0, Math.round(digitsRaw))) : void 0;
+  let value;
+  let format;
+  let percentScale = false;
+  const textPercent = percentText(rawValue);
+  const n = amount(rawValue);
+  if (textPercent !== void 0 && (asked === void 0 || asked === "percent")) {
+    percentScale = true;
+    value = textPercent;
+    format = "percent";
+  } else if (n === void 0 || asked === "text") {
+    const text = str(rawValue);
+    if (!text) return null;
+    value = text;
+    format = "text";
+  } else if (asked === "percent") {
+    percentScale = Math.abs(n) > 1;
+    value = asRatio(n);
+    format = "percent";
+  } else {
+    value = n;
+    format = asked === "currency" ? currency ? "currency" : "number" : asked ?? (currency ? "currency" : "number");
+  }
+  const absolute = r["changeFormat"] === "absolute" || r["change_format"] === "absolute";
+  let change;
+  const percentPoints = amount(pick(r, ["changePercent", "change_percent", "percentChange", "percent_change"]));
+  const rawChange = pick(r, ["change", "delta", "diff", "variation"]);
+  const changeText = percentText(rawChange);
+  if (!absolute && percentPoints !== void 0) change = percentPoints / 100;
+  else if (changeText !== void 0) change = changeText;
+  else {
+    const c = amount(typeof rawChange === "string" ? rawChange.replace("−", "-").replace(/^\+/, "") : rawChange);
+    if (c !== void 0) change = absolute ? format === "percent" && percentScale ? c / 100 : c : asRatio(c);
+  }
+  const changeFormat = absolute && changeText === void 0 ? "absolute" : "percent";
+  const icon = typeof r["icon"] === "string" && Object.hasOwn(STAT_ICONS, r["icon"]) ? r["icon"] : void 0;
+  const changeLabel = str(pick(r, ["changeLabel", "change_label", "comparison", "vs", "versus"]));
+  const hint = str(pick(r, ["hint", "description", "note", "caption"]));
+  const trend = readTrend(pick(r, ["trend", "history", "series", "sparkline", "values"]));
+  const good = readGood(r);
+  return {
+    label,
+    value,
+    format,
+    ...(format === "currency" || format === "compact") && currency ? { currency } : {},
+    ...unit && (format === "number" || format === "compact") ? { unit } : {},
+    ...digits !== void 0 ? { digits } : {},
+    ...change !== void 0 ? { change } : {},
+    changeFormat,
+    ...change !== void 0 && changeLabel ? { changeLabel } : {},
+    ...good ? { good } : {},
+    ...trend ? { trend } : {},
+    ...hint ? { hint } : {},
+    ...icon ? { icon } : {}
+  };
+}
+const CURRENCY_KEYS = ["currency", "currency_code", "currencyCode"];
+const UNIT_KEYS = ["unit", "units"];
+const META_KEYS = /* @__PURE__ */ new Set([
+  "title",
+  "heading",
+  "subtitle",
+  "period",
+  "footnote",
+  "source",
+  "updatedAt",
+  "updated_at",
+  "asOf",
+  "as_of",
+  "lastUpdated",
+  ...CURRENCY_KEYS,
+  ...UNIT_KEYS
+]);
+const FIGURE_KEYS = /* @__PURE__ */ new Set([
+  ...LABEL_KEYS,
+  ...VALUE_KEYS,
+  ...CURRENCY_KEYS,
+  ...UNIT_KEYS,
+  "id",
+  "format",
+  "digits",
+  "decimals",
+  "precision",
+  "change",
+  "delta",
+  "diff",
+  "variation",
+  "changePercent",
+  "change_percent",
+  "percentChange",
+  "percent_change",
+  "changeFormat",
+  "change_format",
+  "changeLabel",
+  "change_label",
+  "comparison",
+  "vs",
+  "versus",
+  "hint",
+  "description",
+  "note",
+  "caption",
+  "icon",
+  "trend",
+  "history",
+  "series",
+  "sparkline",
+  "values",
+  "good",
+  "better",
+  "goodDirection",
+  "good_direction",
+  "lowerIsBetter",
+  "lower_is_better",
+  "invert",
+  "inverted",
+  "higherIsBetter",
+  "higher_is_better"
+]);
+function isOneFigure(r) {
+  if (pick(r, VALUE_KEYS) === void 0) return false;
+  if (pick(r, LABEL_KEYS.filter((k) => k !== "title")) !== void 0) return true;
+  if (pick(r, ["title"]) === void 0) return false;
+  const values = VALUE_KEYS.filter((k) => r[k] !== void 0 && r[k] !== null && r[k] !== "");
+  return values.length === 1 && Object.keys(r).every((k) => FIGURE_KEYS.has(k) || META_KEYS.has(k));
+}
+const MONEY_WORDS = /* @__PURE__ */ new Set([
+  "revenue",
+  "revenues",
+  "sales",
+  "income",
+  "profit",
+  "profits",
+  "earnings",
+  "cost",
+  "costs",
+  "spend",
+  "spending",
+  "price",
+  "prices",
+  "amount",
+  "fee",
+  "fees",
+  "budget",
+  "balance",
+  "payout",
+  "payouts",
+  "value",
+  "gmv",
+  "mrr",
+  "arr",
+  "aov",
+  "arpu",
+  "arpa",
+  "ltv",
+  "cac"
+]);
+const NOT_MONEY_WORDS = /* @__PURE__ */ new Set(["count", "number", "rate", "ratio", "percent", "percentage", "share", "margin", "growth", "change"]);
+function isMoneyKey(key) {
+  const words = humanizeKey(key).toLowerCase().split(/\s+/);
+  return words.some((w) => MONEY_WORDS.has(w)) && !words.some((w) => NOT_MONEY_WORDS.has(w));
+}
+function withRecordDefaults(value, key, meta) {
+  const currency = currencyCode(pick(meta, CURRENCY_KEYS));
+  const unit = str(pick(meta, UNIT_KEYS));
+  if (!currency && !unit) return value;
+  const figure = isObject(value) ? value : { value };
+  if (pick(figure, [...CURRENCY_KEYS, ...UNIT_KEYS, "format"]) !== void 0) return value;
+  if (currency && isMoneyKey(key)) return { ...figure, currency };
+  return unit ? { ...figure, unit } : value;
+}
+function readStats(raw) {
+  if (!raw || typeof raw !== "object") return null;
+  let stats;
+  let meta = {};
+  if (Array.isArray(raw)) {
+    stats = raw.map((item) => readStat(item));
+  } else {
+    const r = raw;
+    const list = LIST_KEYS.map((key) => r[key]).find((v) => Array.isArray(v) || isObject(v));
+    if (Array.isArray(list)) {
+      stats = list.map((item) => readStat(item));
+      meta = r;
+    } else if (isObject(list)) {
+      stats = Object.entries(list).map(([key, value]) => readStat(withRecordDefaults(value, key, r), key));
+      meta = r;
+    } else if (isOneFigure(r)) {
+      stats = [readStat(r)];
+    } else {
+      stats = Object.entries(r).filter(([key]) => !META_KEYS.has(key)).map(([key, value]) => readStat(withRecordDefaults(value, key, r), key));
+      meta = r;
+    }
+  }
+  const items = stats.filter((s) => s !== null).slice(0, STATS_SHOWN);
+  if (!items.length) return null;
+  const title = str(pick(meta, ["title", "heading"]));
+  const subtitle = str(pick(meta, ["subtitle", "period"]));
+  const footnote = str(pick(meta, ["footnote", "source"]));
+  const updatedAt = toDate(pick(meta, ["updatedAt", "updated_at", "asOf", "as_of", "lastUpdated"]));
+  return {
+    ...title ? { title } : {},
+    ...subtitle ? { subtitle } : {},
+    items,
+    ...footnote ? { footnote } : {},
+    ...updatedAt ? { updatedAt } : {}
+  };
+}
+const typographic = (text) => text.replace(/-/g, "−");
+function durationText(config, seconds, digits) {
+  const s = Math.abs(seconds);
+  if (s < 60) return formatUnit(config, s, "second", digits ?? (s < 10 && !Number.isInteger(s) ? 1 : 0));
+  const units = [["day", 86400], ["hour", 3600], ["minute", 60], ["second", 1]];
+  let rest = Math.round(s);
+  const parts = [];
+  for (const [unit, size] of units) {
+    const count = Math.floor(rest / size);
+    rest -= count * size;
+    if (count > 0 || parts.length) parts.push(count > 0 ? formatUnit(config, count, unit) : "");
+    if (parts.length === 2) break;
+  }
+  const shown = parts.filter(Boolean);
+  try {
+    return new Intl.ListFormat(intlTag(config), { type: "unit", style: "narrow" }).format(shown);
+  } catch {
+    return shown.join(" ");
+  }
+}
+function fractionDigits(stat, value, fallback) {
+  if (stat.digits !== void 0) return { minimumFractionDigits: stat.digits, maximumFractionDigits: stat.digits };
+  return { maximumFractionDigits: Number.isInteger(value) ? 0 : fallback };
+}
+function writeNumber(config, stat, value, signed = false) {
+  const sign = signed ? { signDisplay: "exceptZero" } : {};
+  const done = (text) => signed ? typographic(text) : text;
+  switch (stat.format) {
+    case "percent":
+      return done(formatNumber(config, value, { style: "percent", ...stat.digits !== void 0 ? { minimumFractionDigits: stat.digits, maximumFractionDigits: stat.digits } : { maximumFractionDigits: 1 }, ...sign }));
+    case "duration": {
+      const text = durationText(config, value, stat.digits);
+      return signed && value !== 0 ? `${value > 0 ? "+" : "−"}${text}` : text;
+    }
+    case "currency":
+      try {
+        const digits = stat.digits !== void 0 || Number.isInteger(value) ? fractionDigits(stat, value, 2) : {};
+        return done(formatNumber(config, value, { style: "currency", currency: stat.currency, ...digits, ...sign }));
+      } catch {
+        return done(`${formatNumber(config, value, { maximumFractionDigits: 2, ...sign })} ${stat.currency}`);
+      }
+    case "compact": {
+      const compact = { notation: "compact", maximumFractionDigits: stat.digits ?? 1, ...sign };
+      if (stat.currency) {
+        try {
+          return done(formatNumber(config, value, { ...compact, style: "currency", currency: stat.currency }));
+        } catch {
+        }
+      }
+      return withUnit(config, stat, value, compact, done);
+    }
+    default:
+      return withUnit(config, stat, value, { ...fractionDigits(stat, value, 2), ...sign }, done);
+  }
+}
+function withUnit(config, stat, value, options, done) {
+  if (stat.unit && isIntlUnit(stat.unit)) {
+    return done(formatNumber(config, value, { ...options, style: "unit", unit: stat.unit, unitDisplay: "short" }));
+  }
+  const n = done(formatNumber(config, value, options));
+  return stat.unit ? `${n} ${stat.unit}` : n;
+}
+function statValue(config, stat) {
+  return typeof stat.value === "string" ? stat.value : writeNumber(config, stat, stat.value);
+}
+function statChange(config, stat) {
+  if (stat.change === void 0) return void 0;
+  if (stat.changeFormat === "percent") {
+    return typographic(formatNumber(config, stat.change, { style: "percent", maximumFractionDigits: 1, signDisplay: "exceptZero" }));
+  }
+  if (typeof stat.value === "string") {
+    return typographic(formatNumber(config, stat.change, { maximumFractionDigits: 2, signDisplay: "exceptZero" }));
+  }
+  return writeNumber(config, stat, stat.change, true);
+}
+const directionOf = (change) => change > 0 ? "up" : change < 0 ? "down" : "flat";
+function toneOf(stat) {
+  if (stat.change === void 0) return void 0;
+  const direction = directionOf(stat.change);
+  if (!stat.good || direction === "flat") return "neutral";
+  return direction === stat.good ? "good" : "bad";
+}
+const notNull = (value) => value !== null && value !== void 0;
+const ARROW = { up: "▲", down: "▼", flat: "" };
+function changeOf(ctx, stat, { label = true } = {}) {
+  if (stat.change === void 0) return null;
+  const direction = directionOf(stat.change);
+  const delta = el("span", { class: "aparte-stats__delta" });
+  ctx.bind(delta, () => statChange(ctx.config, stat));
+  const tone = toneOf(stat);
+  let verdict = null;
+  if (tone === "good" || tone === "bad") {
+    const key = tone === "good" ? "cardsStatsGood" : "cardsStatsBad";
+    verdict = el("span", { class: "aparte-sr-only" });
+    ctx.bind(verdict, () => ` ${word(ctx.config, key, S[key])}`);
+  }
+  const mark = tone === "good" || tone === "bad" ? el("span", { class: "aparte-stats__verdict", attrs: { "aria-hidden": "true" }, text: tone === "good" ? "✓" : "!" }) : null;
+  const pill = el(
+    "span",
+    { class: "aparte-stats__pill" },
+    ARROW[direction] ? el("span", { class: "aparte-stats__arrow", attrs: { "aria-hidden": "true" }, text: ARROW[direction] }) : null,
+    delta,
+    mark,
+    verdict
+  );
+  return el(
+    "span",
+    { class: "aparte-stats__change", attrs: { "data-direction": direction, "data-tone": tone } },
+    pill,
+    label && stat.changeLabel ? el("span", { class: "aparte-stats__change-label", text: stat.changeLabel }) : null
+  );
+}
+function valueOf(ctx, stat, tag = "div") {
+  const node = el(tag, { class: "aparte-stats__value", attrs: { "data-format": stat.format } });
+  ctx.bind(node, () => statValue(ctx.config, stat));
+  return node;
+}
+function labelOf(stat, tag = "div") {
+  return el(
+    tag,
+    { class: "aparte-stats__label" },
+    stat.icon ? glyph(STAT_ICONS[stat.icon], "aparte-rich-card__glyph aparte-stats__icon") : null,
+    el("span", { class: "aparte-stats__label-text", text: stat.label })
+  );
+}
+function sparkOf(stat, area = false) {
+  if (!stat.trend) return null;
+  return el("div", { class: "aparte-stats__spark", attrs: { "aria-hidden": "true" } }, sparkline(stat.trend, { area, className: "aparte-stats__sparkline" }));
+}
+const hintOf = (stat) => stat.hint ? el("div", { class: "aparte-stats__hint", text: stat.hint }) : null;
+const statAttrs = (stat) => ({ "data-tone": toneOf(stat), "data-trend": stat.trend !== void 0 });
+function head(data) {
+  if (!data.title && !data.subtitle) return null;
+  return el(
+    "div",
+    { class: "aparte-stats__head" },
+    data.title ? el("div", { class: "aparte-stats__title", text: data.title }) : null,
+    data.subtitle ? el("div", { class: "aparte-stats__subtitle", text: data.subtitle }) : null
+  );
+}
+function foot(ctx, data) {
+  if (!data.footnote && !data.updatedAt) return null;
+  let when = null;
+  if (data.updatedAt) {
+    const date = data.updatedAt;
+    const dayOnly = date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0 && date.getMilliseconds() === 0;
+    when = el("time", { class: "aparte-stats__updated", attrs: { datetime: date.toISOString() } });
+    ctx.bind(when, () => word(ctx.config, "cardsStatsUpdated", S.cardsStatsUpdated, {
+      when: dayOnly ? new Intl.DateTimeFormat(intlTag(ctx.config), { weekday: "short", month: "short", day: "numeric" }).format(date) : formatWhen(ctx.config, date)
+    }));
+  }
+  return el(
+    "div",
+    { class: "aparte-stats__foot" },
+    data.footnote ? el("span", { class: "aparte-stats__footnote", text: data.footnote }) : null,
+    when
+  );
+}
+const columnsFor = (n) => n === 1 ? 1 : n === 2 || n === 4 ? 2 : 3;
+function tiles(ctx, items) {
+  const list = el("ul", { class: "aparte-stats__tiles", attrs: { role: "list", "data-columns": columnsFor(items.length) } });
+  for (const stat of items) {
+    list.append(el(
+      "li",
+      { class: "aparte-stats__tile aparte-stats__stat", attrs: statAttrs(stat) },
+      labelOf(stat),
+      valueOf(ctx, stat),
+      changeOf(ctx, stat),
+      // The hint before the chart: the charts then sit on one line along a row of tiles.
+      hintOf(stat),
+      sparkOf(stat)
+    ));
+  }
+  return list;
+}
+function sheet(ctx, items) {
+  const list = el("dl", { class: "aparte-stats__list" });
+  for (const stat of items) {
+    const term = labelOf(stat, "dt");
+    if (stat.hint) term.append(el("span", { class: "aparte-stats__hint", text: stat.hint }));
+    const value = el(
+      "dd",
+      { class: "aparte-stats__row-value" },
+      sparkOf(stat),
+      valueOf(ctx, stat, "span"),
+      changeOf(ctx, stat)
+    );
+    list.append(el("div", { class: "aparte-stats__row aparte-stats__stat", attrs: statAttrs(stat) }, term, value));
+  }
+  return list;
+}
+function hero(ctx, items) {
+  const [first, ...rest] = items;
+  const main = el(
+    "div",
+    { class: "aparte-stats__hero aparte-stats__stat", attrs: statAttrs(first) },
+    labelOf(first),
+    el("div", { class: "aparte-stats__hero-figure" }, valueOf(ctx, first), changeOf(ctx, first)),
+    hintOf(first),
+    sparkOf(first, true)
+  );
+  if (!rest.length) return [main];
+  const minis = el("dl", { class: "aparte-stats__minis", attrs: { "data-count": Math.min(rest.length, 4) } });
+  for (const stat of rest) {
+    minis.append(el(
+      "div",
+      { class: "aparte-stats__mini aparte-stats__stat", attrs: statAttrs(stat) },
+      labelOf(stat, "dt"),
+      valueOf(ctx, stat, "dd"),
+      stat.change !== void 0 ? el("dd", { class: "aparte-stats__mini-change" }, changeOf(ctx, stat, { label: false })) : null
+    ));
+  }
+  return [main, minis];
+}
+function render(data, ctx) {
+  const body = ctx.variant === "list" ? [sheet(ctx, data.items)] : ctx.variant === "hero" ? hero(ctx, data.items) : [tiles(ctx, data.items)];
+  return [head(data), el("div", { class: "aparte-stats__body" }, ...body), foot(ctx, data)].filter(notNull);
+}
+function skeleton(partial, ctx) {
+  const block = (cls, kind = "rect") => el("span", { class: `aparte-skeleton aparte-skeleton--${kind} ${cls}`, attrs: { "aria-hidden": "true" } });
+  const heading = partial?.title ? head({ title: partial.title }) : el("div", { class: "aparte-stats__head" }, block("aparte-stats__sk-title", "text"));
+  let body;
+  if (ctx.variant === "list") {
+    body = el("div", { class: "aparte-stats__list" }, ...[0, 1, 2, 3].map(() => el(
+      "div",
+      { class: "aparte-stats__row" },
+      block("aparte-stats__sk-label", "text"),
+      block("aparte-stats__sk-value", "text")
+    )));
+  } else if (ctx.variant === "hero") {
+    body = el(
+      "div",
+      { class: "aparte-stats__sk-hero" },
+      el(
+        "div",
+        { class: "aparte-stats__hero" },
+        block("aparte-stats__sk-label", "text"),
+        block("aparte-stats__sk-big"),
+        block("aparte-stats__sk-chart")
+      ),
+      el("div", { class: "aparte-stats__minis", attrs: { "data-count": 3 } }, ...[0, 1, 2].map(() => el(
+        "div",
+        { class: "aparte-stats__mini" },
+        block("aparte-stats__sk-label", "text"),
+        block("aparte-stats__sk-value", "text")
+      )))
+    );
+  } else {
+    body = el("div", { class: "aparte-stats__tiles", attrs: { "data-columns": 2 } }, ...[0, 1, 2, 3].map(() => el(
+      "div",
+      { class: "aparte-stats__tile" },
+      block("aparte-stats__sk-label", "text"),
+      block("aparte-stats__sk-big"),
+      block("aparte-stats__sk-pill")
+    )));
+  }
+  return [heading, el("div", { class: "aparte-stats__body" }, body)].filter(notNull);
+}
+function cardLabel(data, ctx) {
+  if (data?.title) return data.title;
+  const items = data?.items ?? [];
+  if (items.length === 1) return items[0].label;
+  if (items.length > 1) return word(ctx.config, "cardsStatsCount", S.cardsStatsCount, { n: formatNumber(ctx.config, items.length) });
+  return word(ctx.config, "cardsStatsTitle", S.cardsStatsTitle);
+}
+const statsCard = defineCard({
+  name: "stats",
+  variants: ["tiles", "list", "hero"],
+  styles: statsStyles,
+  icon: BARS,
+  normalize: readStats,
+  render,
+  skeleton,
+  label: cardLabel,
+  // "Revenue: $12,000 (+12% vs last week); Orders: 340" — one clause per figure.
+  fallback: (data, ctx) => data.items.map((stat) => {
+    const change = statChange(ctx.config, stat);
+    const said = change ? ` (${[change, stat.changeLabel].filter(notNull).join(" ")})` : "";
+    return `${stat.label}: ${statValue(ctx.config, stat)}${said}`;
+  }).join("; "),
+  partial: (input) => {
+    const about = str(input["title"] ?? input["metric"] ?? input["metrics"] ?? input["query"] ?? input["topic"] ?? input["report"]);
+    return about ? { title: about } : null;
+  }
+});
+function setupStatsCard(options = {}) {
+  return statsCard.setup(options);
+}
+export {
+  humanizeKey,
+  readStats,
+  setupStatsCard,
+  statChange,
+  statValue,
+  statsCard
+};
+//# sourceMappingURL=stats.js.map