@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/stat-tile.tsx

@@ -1,725 +0,0 @@
-import { createContext, useContext, useId, useLayoutEffect, useState } from "react";
-import type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode } from "react";
-import { ArrowDown, ArrowUp, Minus } from "lucide-react";
-import { cn } from "../lib/cn";
-// The sparkline's name: the label's text (lib since 0.36, which a field's `help` "?" shares).
-import { plainText } from "../lib/plain-text";
-import { useKitLabels, useKitLink, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
-import { pickLinkRenderer, RenderedKitLink } from "./text-link";
-import { Card } from "./card";
-import { FieldHint } from "./field-parts";
-import { useInlineFacts, useLargeText } from "../hooks/use-large-text";
-import { Sparkline } from "./sparkline";
-import { Tooltip } from "./tooltip";
-// The kit's one placeholder look, so a loading tile and the Skeleton list beside it
-// shimmer as one surface — and both stop under `prefers-reduced-motion`, which this
-// tile's private copy of the string did not.
-import { SKELETON_CLASS } from "./skeleton";
-import { DEFAULT_STAT_TILE_LABELS } from "./stat-tile-labels";
-import { formatWithMinus } from "../lib/minus";
-
-/**
- * The words a stat tile speaks. The delta's arrow is an icon, and an icon is not a
- * sentence: a screen reader gets the direction (and, under `goodDirection`, the
- * verdict) as words, and a sighted reader who cannot tell the two delta colours apart
- * still has the arrow — neither judgement rides on colour alone.
- */
-export interface StatTileLabels {
-  /** The delta, rising. `amount` is already formatted and unsigned. */
-  increase: (amount: string) => string;
-  decrease: (amount: string) => string;
-  unchanged: string;
-  /** Wraps the direction sentence when `goodDirection` says the change is good. */
-  better: (change: string) => string;
-  worse: (change: string) => string;
-  /** Spoken in place of a missing value (the tile shows a dash). */
-  noValue: string;
-  /** Spoken while `loading`. */
-  loading: string;
-}
-
-// Defined in ./stat-tile-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_STAT_TILE_LABELS };
-
-/**
- * What colours a figure. Token-backed like everything else in the kit.
- *
- *  - `income` / `expense` / `net` — the money trio (teal / amber / violet, CVD-safe).
- *  - `signed` — a money figure read by its own sign: above zero `income`, below zero
- *    `expense`, exactly zero neutral (a zero balance is neither news). Needs a NUMBER
- *    value; a pre-formatted string cannot be read and stays neutral.
- *  - `success` / `warning` / `danger` / `info` — a threshold verdict ("phase margin
- *    below 30°"). Say it in the hint or description as well; colour alone is not one.
- */
-export type StatTileTone =
-  "neutral" | "brand" | "income" | "expense" | "net" | "signed" | "success" | "warning" | "danger" | "info";
-
-const TONE_CLASS: Record<Exclude<StatTileTone, "signed">, string> = {
-  neutral: "text-primary",
-  brand: "text-brand",
-  income: "text-money-income",
-  expense: "text-money-expense",
-  net: "text-money-net",
-  success: "text-success",
-  warning: "text-warning",
-  danger: "text-danger",
-  info: "text-info",
-};
-
-function toneClass(tone: StatTileTone, value: unknown): string {
-  if (tone !== "signed") return TONE_CLASS[tone];
-  if (typeof value !== "number" || value === 0) return TONE_CLASS.neutral;
-  return value < 0 ? TONE_CLASS.expense : TONE_CLASS.income;
-}
-
-/** A change since the previous period. A bare number is shorthand for `{ value }`. */
-export interface StatTileDelta {
-  /** Signed: above zero is "up". */
-  value: number;
-  /** `"value"` (default) formats it like the headline — same currency, same
-   *  notation. `"percent"` reads it as a RATIO: `0.12` is shown as 12 %. */
-  unit?: "value" | "percent";
-  /** What it is measured against, shown after it: "vs last month". */
-  label?: ReactNode;
-}
-
-/** A smaller figure under the headline — a prior period, a projection, a split. */
-export interface StatTileSubValue {
-  label: ReactNode;
-  /** A number is formatted like the headline; anything else is rendered as given. */
-  value: ReactNode;
-  /** Defaults to the tile's own `tone`, read per figure (so a `signed` tile shows a
-   *  teal September above an amber August). Sub-values are always the muted weight
-   *  of their tone: they are history, and must not outshout the figure above them.
-   *
-   *  `"none"` leaves the figure untinted — the row's own muted text, like its label —
-   *  even on a toned tile: keksdose's report KpiCard (reports/charts/kpi-card.tsx),
-   *  whose `negative` convention tints only a figure below zero and leaves the rest
-   *  plain. (`"neutral"` is not that: it is the headline's full text colour, at the
-   *  sub-value's 75 %.) */
-  tone?: StatTileTone | "none";
-}
-
-/** What {@link StatTileProps.renderLink} is handed. Spread it onto your router's
- *  link: the class is what stretches the link over the whole tile. */
-export interface StatTileLinkProps {
-  href: string;
-  className: string;
-  "aria-describedby": string;
-  children: ReactNode;
-}
-
-/**
- * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2): they
- * ride on to the {@link Card} that is the tile, so the ref is the tile's own `<div>` — the
- * one to scroll into view or measure. `ComponentPropsWithoutRef` only kept it out of the
- * type; at runtime `{...rest}` already carried it there.
- */
-export interface StatTileProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
-  /** What is measured. Also the tile's accessible name when it is a link/button. */
-  label: ReactNode;
-  /**
-   * The headline. A number is formatted with `Intl.NumberFormat` in the kit's locale
-   * (see `currency`, `compact`, `numberFormat`, `format`); a string or element is
-   * rendered as given. `null`/`undefined` shows a dash and says "No data".
-   */
-  value?: ReactNode;
-  /** ISO 4217 code — formats a number value (and a `"value"` delta, and numeric
-   *  sub-values) as money. */
-  currency?: string;
-  /** Compact notation: 12 400 → "12K". */
-  compact?: boolean;
-  /** Any further `Intl.NumberFormat` options, merged over the two above. */
-  numberFormat?: Intl.NumberFormatOptions;
-  /** Formats every NUMBER the tile shows, replacing the `Intl` default outright. */
-  format?: (value: number) => string;
-  locale?: string;
-  /** A short unit after the value that `Intl` has no name for: "ms", "dB", "Hz". */
-  unit?: ReactNode;
-  /** The period the headline belongs to, shown to its left ("SEP"). */
-  valueLabel?: ReactNode;
-  tone?: StatTileTone;
-  delta?: number | StatTileDelta;
-  /** Which way is good news. Unset, the delta is stated and not judged (users up and
-   *  cost up are the same arrow); set, it is coloured and its sentence says so. */
-  goodDirection?: "up" | "down";
-  /** The explanation behind a "?" beside the label (a {@link FieldHint}) — hidden
-   *  until asked for, so it is for what a reader MIGHT want to know ("excludes
-   *  transfers between your own accounts"). For a line everyone should read, use
-   *  {@link StatTileProps.description} instead.
-   *
-   *  0.32 (docs/text-size-harmonization.md §4 "No fact only in a tooltip"): at Large
-   *  and Extra large, and on a touch screen, the words are shown under the label
-   *  instead of behind the "?". */
-  hint?: string;
-  /**
-   * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a
-   * {@link Tooltip} on hover and focus — but only while it is actually cut, so a
-   * label that fits shows no bubble repeating itself. keksdose's admin MetricTile
-   * wall: twenty tiles whose German labels ("Aktive Abonnements (30 Tage)") wrapped
-   * onto two or three lines and pushed each tile's figure to a different height.
-   *
-   * The label element keeps the FULL text — the ellipsis is paint — so it is still
-   * the tile's accessible name (and the stretched link's, on a link tile) exactly as
-   * without this. Off by default: a wrapping label is what every existing tile does,
-   * and a tile standing alone has room to.
-   *
-   * This is the tooltip: pass the label as a plain STRING rather than wrapping it in
-   * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134
-   * does, from before this prop). A wrapped label shows a bubble even when nothing is
-   * cut, and nests its trigger inside this one's.
-   *
-   * Ignored at Large and Extra large (0.32, §4): nothing truncates there, and the full
-   * label would otherwise be a fact only in a tooltip.
-   */
-  truncateLabel?: boolean;
-  /**
-   * The tile's name as plain text, for the places that need a string rather than a
-   * node — today the {@link StatTileProps.trend} sparkline's accessible name. Only
-   * needed when `label` is not a string AND its text cannot be read from it: a label
-   * element's text children are found on their own (a `<Tooltip label="…">Spend
-   * </Tooltip>` label still names its sparkline "Spend"), an icon or a formatted
-   * message component's are not.
-   */
-  name?: string;
-  /** A visible line under the value: "Last 12 months", "3 estates / 9 buildings" —
-   *  always shown, so it is for what every reader needs. An explanation only some
-   *  will want belongs in {@link StatTileProps.hint}, the "?" beside the label. */
-  description?: ReactNode;
-  /**
-   * One figure that belongs WITH the headline rather than under it: keksdose's
-   * "Projected €1,850" under a to-date "€420" (KpiCard, feedback #51), which it
-   * currently smuggles into `description` with hand-set margins so the prior-month
-   * sub-values do not come between the two. It is drawn directly under the value
-   * (before the delta, the description and the sparkline) as a sub-value row, with
-   * only a hair of space above it.
-   *
-   * A slot of its own rather than a placement switch for `subValues`: the history
-   * rows (last month, last year) should stay at the bottom where they are, and moving
-   * the whole list up to bring one row with it would put them between the headline
-   * and its delta. Same shape as a sub-value, so the `tone` rules are the same.
-   * Withheld while `loading`, like the sub-values.
-   *
-   * 0.51: or several, in order (keksdose #633). Its figure tiles carry two forward rows,
-   * "Committed <date>" (today plus what is scheduled) and "Projected <date>" (that plus the
-   * usual variable money), both of which belong with the headline and neither with the
-   * history below. The tile draws what it is given; which rows to give is the app's rule
-   * (keksdose shows both on every tile, live #455, even where Committed equals the figure
-   * so far).
-   */
-  projection?: StatTileSubValue | readonly StatTileSubValue[];
-  /**
-   * Smaller figures under the headline, label left and figure right.
-   *
-   * At Large and Extra large (0.32, §4 "StatTile shows its one big number; the sparkline
-   * and sub-values move below"): the tile leads with the headline and its delta, and the
-   * projection, these rows and the sparkline follow beneath the description, each row's
-   * label over its figure — a 2-up tile at 150 % is 120 px of text wide, and a label
-   * beside a figure there squeezed both.
-   */
-  subValues?: StatTileSubValue[];
-  /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in
-   *  the tile's number format. The name is the label's text; see
-   *  {@link StatTileProps.name} for a label that has none. */
-  trend?: ReadonlyArray<number | null | undefined>;
-  /** A custom sparkline (or any small graphic) in the same place. Wins over `trend`. */
-  sparkline?: ReactNode;
-  /** A decorative icon at the top end of the tile. */
-  icon?: ReactNode;
-  /** Anything below the rest — a progress bar, a link row. */
-  footer?: ReactNode;
-  /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the
-   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */
-  sensitive?: boolean;
-  /** Skeleton in place of the value; delta, sub-values and trend are withheld. */
-  loading?: boolean;
-  /** `"sm"` for dense grids (a metrics wall); `"md"` the default KPI. */
-  size?: "sm" | "md";
-  /**
-   * The tile's frame. `"card"` (default) is the bordered, shadowed card on the page.
-   * `"inset"` is a tile INSIDE a card: {@link Card}'s `inset` — the raised
-   * `--bg-surface-2`, a small radius, no border or shadow, since the card round it
-   * already has them. `"plain"` drops the frame altogether — no fill and no padding —
-   * for figures set straight into a card's content (a summary row under a card title),
-   * where any box would be a box in a box. keksdose wrote both by hand over the card
-   * tile (`border-0 shadow-none bg-transparent p-0`) for its tiles inside a card.
-   */
-  variant?: "card" | "inset" | "plain";
-  /** Makes the tile a link. See {@link renderLink} for a router. */
-  href?: string;
-  /** Renders the link for `href` — pass your router's `<Link>` here, since a plain
-   *  `<a>` reloads a single-page app. Default: the `<UiKitProvider linkComponent>`
-   *  (for an in-app `href`), then `<a>`. */
-  renderLink?: (props: StatTileLinkProps) => ReactElement;
-  /** Makes the tile a button (ignored when `href` is given). */
-  onClick?: () => void;
-  labels?: LabelOverride<StatTileLabels>;
-}
-
-// One formatter per option set: a metrics wall is twenty of these.
-const formatters = new Map<string, Intl.NumberFormat>();
-function numberFormatter(locale: string | undefined, options: Intl.NumberFormatOptions): Intl.NumberFormat {
-  const key = `${locale ?? ""}|${JSON.stringify(options)}`;
-  let f = formatters.get(key);
-  if (!f) {
-    f = new Intl.NumberFormat(locale, options);
-    formatters.set(key, f);
-  }
-  return f;
-}
-
-// The headline sizes are keyed on the TILE's width (it is a @container), not the
-// viewport: a grid beside a sidebar makes tiles narrowest exactly where a viewport
-// breakpoint would hand them the larger font. `sm` is keksdose's compact headline,
-// sized so a worst-case "CHF 123,456.78" still fits a 320px phone's 2-up tiles.
-const VALUE_TEXT = {
-  md: "text-xl @[13rem]:text-2xl",
-  sm: "text-xs @[8.5rem]:text-sm @[13rem]:text-base",
-} as const;
-const PADDING = { md: "p-3 sm:p-4", sm: "px-2.5 py-2" } as const;
-
-/**
- * The KPI card: a label, one number, and optionally how it moved, what it is made of
- * and which way it has been going.
- *
- * Replaces keksdose's `KpiCard` and admin `Tile`, lenkbank's metrics tiles and
- * kastlan's `KpiCard` — the same card four times, with four answers to the same
- * questions (how a currency is formatted, whether a delta is judged, what happens to
- * the figures in demo mode).
- *
- * Interactive tiles use a STRETCHED link: the label is the `<a>`/`<button>`, and its
- * `::after` covers the card. Making the card itself the link would nest the hint's
- * `<button>` inside it, which is invalid HTML and an unreachable control; this way
- * the hint sits above the overlay and stays its own tab stop. The link's name is the
- * label, and it is described by the value and the delta.
- */
-export function StatTile({
-  label,
-  value,
-  currency,
-  compact = false,
-  numberFormat,
-  format,
-  locale,
-  unit,
-  valueLabel,
-  tone = "neutral",
-  delta,
-  goodDirection,
-  hint,
-  truncateLabel = false,
-  name,
-  description,
-  projection,
-  subValues,
-  trend,
-  sparkline,
-  icon,
-  footer,
-  sensitive = false,
-  loading = false,
-  size = "md",
-  variant = "card",
-  href,
-  renderLink,
-  onClick,
-  labels,
-  className,
-  ...rest
-}: StatTileProps) {
-  const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
-  // §4: at Large the one big number leads and the rest follows below it; the label
-  // never truncates; on touch or at Large the hint is words, not a "?".
-  const large = useLargeText();
-  const inlineHint = useInlineFacts() && !!hint;
-  if (large) truncateLabel = false;
-  // A loading StatTileGrid puts every tile in it into the loading state and says
-  // "Loading…" ONCE for all of them; the tile then keeps its own sentence to itself
-  // (see StatTileGrid's `loading`).
-  const gridLoading = useContext(StatTileGridLoadingContext);
-  loading = loading || gridLoading;
-  const kitLink = useKitLink();
-  const [labelEl, setLabelEl] = useState<HTMLElement | null>(null);
-  const labelCut = useIsTruncated(truncateLabel ? labelEl : null);
-  const kitLocale = useKitLocale(locale);
-  const id = useId();
-  const valueId = `${id}-value`;
-  const deltaId = `${id}-delta`;
-  const priv = sensitive ? "" : undefined;
-  // One projection or several (0.51), as a list either way.
-  const projections: readonly StatTileSubValue[] =
-    projection === undefined ? [] : isFigureList(projection) ? projection : [projection];
-
-  const fmt =
-    format ??
-    ((n: number) =>
-      // U+2212 for a negative headline (0.49, KIT-1).
-      formatWithMinus(
-        numberFormatter(kitLocale, {
-          ...(currency ? { style: "currency", currency } : null),
-          ...(compact ? { notation: "compact" } : null),
-          ...numberFormat,
-        }),
-        n,
-      ));
-  const show = (v: ReactNode) => (typeof v === "number" ? fmt(v) : v);
-
-  const d = typeof delta === "number" ? { value: delta } : delta;
-  const hasValue = value !== null && value !== undefined && value !== "";
-  const labelText = name ?? plainText(label);
-
-  // ── The label, which is also the link/button when the tile is interactive ──
-  const stretched = cn(
-    "text-start uppercase tracking-wide",
-    "after:absolute after:inset-0 after:rounded-lg after:content-['']",
-    // The kit's focus frame (0.32, §5), on the overlay — `FOCUS_RING`'s classes cannot
-    // carry the `after:`, so its width is spelt out.
-    "focus-visible:outline-none focus-visible:after:ring-focus focus-visible:after:ring-inset focus-visible:after:ring-brand",
-  );
-  const describedBy = d ? `${valueId} ${deltaId}` : valueId;
-  let labelNode: ReactNode = label;
-  if (href !== undefined) {
-    const linkProps: StatTileLinkProps = {
-      href,
-      className: stretched,
-      "aria-describedby": describedBy,
-      children: label,
-    };
-    const kit = pickLinkRenderer<StatTileLinkProps>(undefined, kitLink, href);
-    labelNode = renderLink ? (
-      renderLink(linkProps)
-    ) : kit ? (
-      <RenderedKitLink render={kit} props={linkProps} />
-    ) : (
-      <a href={href} className={stretched} aria-describedby={describedBy}>
-        {label}
-      </a>
-    );
-  } else if (onClick) {
-    labelNode = (
-      <button type="button" onClick={onClick} aria-describedby={describedBy} className={stretched}>
-        {label}
-      </button>
-    );
-  }
-  const interactive = href !== undefined || onClick !== undefined;
-
-  // ── Delta ──
-  let deltaNode: ReactNode = null;
-  if (d && !loading && Number.isFinite(d.value)) {
-    const magnitude = Math.abs(d.value);
-    const amount =
-      d.unit === "percent"
-        ? numberFormatter(kitLocale, { style: "percent", maximumFractionDigits: 1 }).format(magnitude)
-        : fmt(magnitude);
-    const dir = d.value > 0 ? "up" : d.value < 0 ? "down" : "flat";
-    const Icon = dir === "up" ? ArrowUp : dir === "down" ? ArrowDown : Minus;
-    let spoken = dir === "up" ? text.increase(amount) : dir === "down" ? text.decrease(amount) : text.unchanged;
-    let deltaTone = "text-muted";
-    if (goodDirection && dir !== "flat") {
-      const good = dir === goodDirection;
-      spoken = good ? text.better(spoken) : text.worse(spoken);
-      deltaTone = good ? "text-success" : "text-danger";
-    }
-    deltaNode = (
-      // `relative`: the containing block for the sr-only sentence (see the
-      // sr-only-containment test for what an escaped one does to the page).
-      <div className="relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums">
-        <span
-          id={deltaId}
-          data-private={priv}
-          className={cn("inline-flex items-center gap-0.5 font-medium", deltaTone)}
-        >
-          <Icon className="size-3 shrink-0" aria-hidden />
-          {/* The figure at zero too, like Delta (kastlan 48): "0 %" says the change was
-              measured; a bare dash reads like a missing value. */}
-          <span aria-hidden>{amount}</span>
-          <span className="sr-only">{spoken}</span>
-        </span>
-        {d.label != null && <span className="text-muted">{d.label}</span>}
-      </div>
-    );
-  }
-
-  // ── Headline ──
-  const valueClass = cn("whitespace-nowrap font-semibold tabular-nums", VALUE_TEXT[size], toneClass(tone, value));
-  const headline = loading ? (
-    <span id={valueId} className="relative block py-0.5">
-      <span aria-hidden className={cn(SKELETON_CLASS, "block h-6 w-24 max-w-full")} />
-      {!gridLoading && <span className="sr-only">{text.loading}</span>}
-    </span>
-  ) : hasValue ? (
-    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && !large && "ms-auto")}>
-      {show(value)}
-      {unit != null && <span className="ms-1 text-[0.7em] font-medium text-muted">{unit}</span>}
-    </span>
-  ) : (
-    <span id={valueId} className={cn("relative", valueClass, "text-muted")}>
-      <span aria-hidden>—</span>
-      <span className="sr-only">{text.noValue}</span>
-    </span>
-  );
-
-  const graphic = loading
-    ? null
-    : (sparkline ??
-      (trend && (
-        <Sparkline
-          data={trend}
-          fluid
-          height={size === "sm" ? 20 : 28}
-          label={labelText}
-          formatValue={fmt}
-          locale={kitLocale}
-          tone={tone === "signed" ? "signed" : tone === "neutral" ? "chart" : tone}
-          data-private={priv}
-        />
-      )));
-
-  return (
-    <Card
-      {...rest}
-      variant={variant === "card" ? "default" : "inset"}
-      data-variant={variant === "card" ? undefined : variant}
-      aria-busy={loading || undefined}
-      className={cn(
-        // @container: the headline sizes read the tile's width. relative: the stretched
-        // link's overlay. overflow-hidden: at pathological widths a figure clips inside
-        // the border instead of painting over the neighbouring tile.
-        "@container relative flex min-w-0 flex-col overflow-hidden",
-        // `plain` is the inset card with its fill and padding taken away — the figures
-        // align with the content edge of the card they sit in. (Not `p-0` over the
-        // padding: the padding's `sm:p-4` would still win from `sm` up.)
-        variant === "plain" ? "rounded-none bg-transparent p-0" : PADDING[size],
-        interactive && "transition-colors hover:border-strong hover:bg-hover",
-        className,
-      )}
-    >
-      <div className="flex items-start gap-2">
-        <div className="flex min-w-0 flex-1 items-center gap-1 break-words text-xs uppercase tracking-wide text-muted">
-          {truncateLabel && labelCut ? (
-            // Portalled: the tile is `overflow-hidden`, and a bubble inside it would be
-            // clipped by the very box whose edge cut the label.
-            <Tooltip label={label} side="top" portal className="flex min-w-0">
-              <span ref={setLabelEl} className="block min-w-0 truncate">
-                {labelNode}
-              </span>
-            </Tooltip>
-          ) : (
-            <span ref={setLabelEl} className={cn("min-w-0", truncateLabel && "block truncate")}>
-              {labelNode}
-            </span>
-          )}
-          {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}
-          {hint && !inlineHint && <FieldHint label={hint} side="top" className="relative z-10 shrink-0" />}
-        </div>
-        {icon != null && (
-          <span aria-hidden className="shrink-0 text-muted [&_svg]:size-4">
-            {icon}
-          </span>
-        )}
-      </div>
-
-      {inlineHint && (
-        // §4: the hint as words under the label — the same muted type as `description`,
-        // in the reading case of a sentence rather than the label's capitals.
-        <p data-slot="stat-tile-hint" className="mt-0.5 text-xs text-muted">
-          {hint}
-        </p>
-      )}
-
-      {valueLabel != null ? (
-        // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a
-        // too-long amount drop to its own end-aligned line instead of overflowing. At
-        // Large the period goes over the figure, which then has the tile's width.
-        <div className={cn("mt-1 flex items-baseline gap-x-1.5", large ? "flex-col items-start" : "flex-wrap")}>
-          <span className="shrink-0 text-xs uppercase tracking-wide text-muted">{valueLabel}</span>
-          {headline}
-        </div>
-      ) : (
-        <div className="mt-1">{headline}</div>
-      )}
-
-      {/* At Large the delta and description follow the figure at once, and the
-          projection moves down with the other figures (see `subValues`). */}
-      {!large && !loading && projections.length > 0 && (
-        <dl className="mt-0.5 space-y-0.5">
-          {projections.map((p, i) => (
-            <FigureRow key={i} figure={p} tileTone={tone} show={show} priv={priv} />
-          ))}
-        </dl>
-      )}
-
-      {deltaNode}
-      {description != null && <div className="mt-1 text-xs text-muted">{description}</div>}
-      {!large && graphic && <div className="mt-2">{graphic}</div>}
-
-      {!loading && ((large && projections.length > 0) || (subValues && subValues.length > 0)) && (
-        <dl data-slot="stat-tile-figures" className={cn("mt-1.5", large ? "space-y-1.5" : "space-y-0.5")}>
-          {large &&
-            projections.map((p, i) => (
-              <FigureRow key={`projection-${i}`} figure={p} tileTone={tone} show={show} priv={priv} stacked />
-            ))}
-          {subValues?.map((sv, i) => (
-            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} stacked={large} />
-          ))}
-        </dl>
-      )}
-
-      {large && graphic && (
-        <div data-slot="stat-tile-graphic" className="mt-2">
-          {graphic}
-        </div>
-      )}
-
-      {footer != null && <div className="mt-2">{footer}</div>}
-    </Card>
-  );
-}
-
-/** `Array.isArray` narrows a readonly array to `any[]`; this keeps the element type. */
-function isFigureList(p: StatTileSubValue | readonly StatTileSubValue[]): p is readonly StatTileSubValue[] {
-  return Array.isArray(p);
-}
-
-/** One label/value row of a `<dl>`: a sub-value, or a projection. */
-function FigureRow({
-  figure,
-  tileTone,
-  show,
-  priv,
-  stacked = false,
-}: {
-  figure: StatTileSubValue;
-  tileTone: StatTileTone;
-  show: (v: ReactNode) => ReactNode;
-  priv: "" | undefined;
-  /** The label over the figure (Large, §4) instead of beside it. */
-  stacked?: boolean;
-}) {
-  const own = figure.tone ?? (tileTone === "neutral" ? undefined : tileTone);
-  const svTone = own === "none" ? undefined : own;
-  // The LABEL gives way, never the figure. This row used to wrap, so on a narrow tile a
-  // long label ("AUG (SIGNED)") dropped its amount onto a line of its own while the
-  // next row stayed on one — two layouts in one list, and a figure no longer beside
-  // the period it belongs to. Now the label breaks within itself and the amount stays
-  // on the label's first line, end-aligned like every other row.
-  //
-  // 0.49: between WORDS only. `overflow-wrap:anywhere` (with `min-w-0`) cut a single
-  // word at any letter — "PROJECT|ED" in a 160px KPI tile at 360px. The label now keeps
-  // a flex item's own floor, its longest word; only a word that cannot share the line
-  // with the figure sends the figure to the next line, still end-aligned. `break-word`
-  // is the last resort for a word wider than the whole tile, and does not lower that
-  // floor the way `anywhere` did.
-  return (
-    <div
-      className={cn(
-        "flex text-xs tabular-nums text-muted",
-        stacked ? "flex-col items-start" : "flex-wrap items-baseline gap-x-2",
-      )}
-    >
-      <dt className="max-w-full uppercase tracking-wide [overflow-wrap:break-word]">{figure.label}</dt>
-      <dd
-        data-private={priv}
-        className={cn(
-          "shrink-0 whitespace-nowrap",
-          !stacked && "ms-auto",
-          svTone && [toneClass(svTone, figure.value), "opacity-75"],
-        )}
-      >
-        {show(figure.value)}
-      </dd>
-    </div>
-  );
-}
-
-/**
- * Whether `el`'s text is wider than its box — i.e. whether `truncate` is cutting it.
- * Re-measured whenever the box resizes (a grid reflowing, a translation loading), not
- * only on mount. Keyed on the ELEMENT (a callback ref), because wrapping the label in
- * its tooltip remounts it, and an observer on the old node would watch nothing.
- */
-function useIsTruncated(el: HTMLElement | null): boolean {
-  const [cut, setCut] = useState(false);
-  useLayoutEffect(() => {
-    // No reset while there is no node: between the unwrapped label unmounting and the
-    // wrapped one mounting there is none, and a reset there would unwrap it again.
-    if (!el) return;
-    const measure = () => setCut(el.scrollWidth > el.clientWidth);
-    measure();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measure);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [el]);
-  return cut;
-}
-
-export interface StatTileGridProps extends ComponentPropsWithRef<"div"> {
-  /** The narrowest a tile may get before the grid drops a column. The default fits
-   *  two tiles on a 320px phone. */
-  minTileWidth?: string;
-  /**
-   * Let a row that is not full stretch its tiles across the whole width. Default
-   * `true` (CSS `auto-fit`): one or two tiles fill the row, as they always have.
-   * `false` (`auto-fill`): the empty columns are kept, so every tile is the width of
-   * a column whatever the count — a lone "Balance" tile in a card stays tile-sized
-   * instead of becoming a banner the width of the card, and the tiles of a short row
-   * line up with the columns of a full one above it.
-   */
-  stretch?: boolean;
-  /**
-   * Every tile in the grid is loading: each shows its skeleton (as with its own
-   * `loading`), and the grid says "Loading…" ONCE, in a polite status region, instead
-   * of each tile carrying its own sr-only "Loading…" — a wall of eight tiles was read
-   * as eight "Loading…"s in a row. The grid is `aria-busy` meanwhile. A tile's own
-   * `loading` inside a grid that is not loading still speaks for itself.
-   */
-  loading?: boolean;
-  /** The grid's one sentence — `loading` from {@link StatTileLabels}. */
-  labels?: LabelOverride<Pick<StatTileLabels, "loading">>;
-}
-
-/** Set by a loading {@link StatTileGrid}; read by each tile in it. */
-const StatTileGridLoadingContext = createContext(false);
-
-/**
- * The row of tiles every dashboard in the three apps lays out by hand, each with its
- * own breakpoint ladder (`grid-cols-2 md:grid-cols-4 min-[2400px]:grid-cols-8` …).
- * Those ladders read the VIEWPORT and so ignored the sidebar: 6-up tiles at 155px in
- * the band where the sidebar was open. This fits as many columns as `minTileWidth`
- * allows in the space the grid actually has, and needs no breakpoint at all.
- */
-export function StatTileGrid({
-  minTileWidth = "9rem",
-  stretch = true,
-  loading = false,
-  labels,
-  className,
-  style,
-  children,
-  ...rest
-}: StatTileGridProps) {
-  const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
-  const columns: CSSProperties = {
-    gridTemplateColumns: `repeat(${stretch ? "auto-fit" : "auto-fill"}, minmax(min(100%, ${minTileWidth}), 1fr))`,
-  };
-  return (
-    <div
-      {...rest}
-      aria-busy={loading || rest["aria-busy"] || undefined}
-      // `relative`: the containing block for the sr-only status, which is absolutely
-      // positioned and so also takes no grid cell.
-      className={cn("relative grid gap-3", className)}
-      style={{ ...columns, ...style }}
-    >
-      {/* Always mounted, filled while loading: a live region announces a CHANGE of
-          its content, so one that appeared already holding the sentence might say
-          nothing. */}
-      <span role="status" className="sr-only">
-        {loading ? text.loading : ""}
-      </span>
-      <StatTileGridLoadingContext.Provider value={loading}>{children}</StatTileGridLoadingContext.Provider>
-    </div>
-  );
-}