@eifi1/ui-kit 0.14.1 → 0.15.0

package/dist/components/stat-tile.js.map

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

package/dist/components/text-link.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { az as KitLinkComponent } from '../kit-labels-Mz8zZHIF.js';
+import { az as KitLinkComponent } from '../kit-labels-BHfRBbHs.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/text-link.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ExternalLink } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+import { documentNavigation } from "../lib/document-navigation.js";
 function isExternalHref(href) {
   return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href);
 }
@@ -26,7 +27,7 @@ function replacingClick(onClick, href, replace, target) {
     onClick?.(event);
     if (!isPlainNavigationClick(event)) return;
     event.preventDefault();
-    window.location.replace(href);
+    documentNavigation.replace(href);
   };
 }
 function routerLinkNavigation(replace) {

package/dist/components/text-link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/text-link.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent } from \"../i18n/kit-labels\";\n\n/* ── Choosing what draws a link ──────────────────────────────────────────── */\n\n/**\n * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a\n * protocol-relative `//host`. A router's link is for paths inside the app, so the\n * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.\n *\n * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the\n * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to\n * `to=\"/x\"`. A plain in-page anchor (`#section`) is not external either, but it is not\n * a route: see {@link isInPageAnchor}.\n */\nexport function isExternalHref(href: string): boolean {\n  return /^(?:[a-z][a-z\\d+.-]*:|\\/\\/)/i.test(href);\n}\n\n/**\n * An `href` that only scrolls the current page: `#section` (or a bare `#`). The\n * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router\n * link must not get an anchor — under a `HashRouter` `#section` would navigate to the\n * path `/section` — so every kit link draws it as a plain `<a>`.\n */\nexport function isInPageAnchor(href: string): boolean {\n  return href.startsWith(\"#\") && !href.startsWith(\"#/\");\n}\n\n/**\n * Whether the provider's `linkComponent` (or a kit component's router fallback) draws\n * `href`: an in-app path, `#/x` included — not an external `href`\n * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).\n */\nexport function isRoutableHref(href: string): boolean {\n  return !isExternalHref(href) && !isInPageAnchor(href);\n}\n\n/**\n * What draws a kit link to `href`: the component's own `renderLink` when it was given\n * one (it always wins — the caller asked for it by name), else the\n * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else\n * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /\n * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router\n * `#/x` go to the router link. Every kit link props type is a subset of the anchor\n * attributes `KitLinkProps` describes, which is what makes the cast sound.\n * @internal Shared by the kit's link-bearing components; not part of the barrel.\n */\nexport function pickLinkRenderer<P>(\n  own: ((props: P) => ReactElement) | undefined,\n  kitLink: KitLinkComponent | undefined,\n  href: string | undefined,\n): ((props: P) => ReactElement) | undefined {\n  if (own) return own;\n  if (!kitLink || href === undefined || !isRoutableHref(href)) return undefined;\n  return kitLink as unknown as (props: P) => ReactElement;\n}\n\n/** The plain primary click a page navigates on — not a middle click, not ⌘ / Ctrl /\n *  Shift / Alt (new tab, new window, download), and not one a handler already took. */\nfunction isPlainNavigationClick(event: MouseEvent<HTMLAnchorElement>): boolean {\n  return (\n    !event.defaultPrevented &&\n    event.button === 0 &&\n    !event.metaKey &&\n    !event.ctrlKey &&\n    !event.shiftKey &&\n    !event.altKey\n  );\n}\n\n/**\n * The `onClick` of a PLAIN `<a>` whose kit link was asked to `replace` (keksdose F1).\n *\n * A router link replaces the history entry itself (it is handed `replace`, see\n * {@link routerLinkNavigation}); a plain `<a>` has no attribute that says so, and the\n * browser's own navigation always pushes. So a plain click is taken over — the caller's\n * `onClick` runs first and may still `preventDefault` — and becomes\n * `location.replace(href)`: the same document load, with Back skipping the one-shot URL.\n * That is the case of `replace` together with `reloadDocument`, or an app with no\n * `linkComponent`. A modified click (new tab) and a `target` other than `_self` are left\n * to the browser: they do not navigate THIS history. Without `replace`, `onClick` comes\n * back untouched.\n * @internal\n */\nexport function replacingClick(\n  onClick: ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined,\n  href: string,\n  replace: boolean | undefined,\n  target?: string,\n): ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined {\n  if (!replace || (target !== undefined && target !== \"\" && target !== \"_self\")) return onClick;\n  return (event) => {\n    onClick?.(event);\n    if (!isPlainNavigationClick(event)) return;\n    event.preventDefault();\n    window.location.replace(href);\n  };\n}\n\n/**\n * What a ROUTER link is handed for `replace`: `{ replace: true }` when asked, else\n * nothing at all — so a provider link that spreads its props onto a DOM `<a>` never\n * receives an unknown attribute from a link that did not ask (see `KitLinkProps.replace`).\n * @internal\n */\nexport function routerLinkNavigation(replace: boolean | undefined): { replace?: true } {\n  return replace ? { replace: true } : {};\n}\n\n/**\n * Draws `props` through `render` as a component of its own, so a router link's hooks\n * belong to it and not to the kit component calling it — for the kit components that\n * call their own `renderLink` inline and reach the provider's link through here.\n * @internal\n */\nexport function RenderedKitLink<P>({ render, props }: { render: (props: P) => ReactElement; props: P }) {\n  return render(props);\n}\n\n/* ── TextLink ─────────────────────────────────────────────────────────────── */\n\n/**\n * `brand` (default) for a link in running text, `muted` for footer and meta links\n * that should not compete with the content, `danger` for a destructive one (\"Leave\n * group\"), `inherit` for a link that takes its surroundings' colour.\n *\n * `primary` and `secondary` are the body and the secondary text colour, UNDERLINED\n * (keksdose F3): a link that must read as part of the text around it — a name in a\n * list row, a reference in a card's meta line — where `brand` repaints it in the accent\n * and `muted` is a step too light to read as content. `secondary` darkens to the body\n * colour under the pointer, as `muted` does; `primary` has nowhere darker to go, so its\n * underline thickens instead.\n *\n * `warning` is the kit's `--warning` text colour, underlined (kastlan 46): a link inside\n * a `<Tone tone=\"warning\">` sentence or a warning banner, which `brand` would paint in a\n * second hue and `inherit` would leave indistinguishable from the sentence. Like\n * `primary`, it keeps its colour on hover and thickens the underline.\n *\n * The three colours that sit IN the text default to `underline=\"always\"`: with the\n * colour of their surroundings, the underline is the only thing that says \"link\"\n * (WCAG 1.4.1). An explicit `underline` still wins.\n */\nexport type TextLinkTone = \"brand\" | \"muted\" | \"danger\" | \"inherit\" | \"primary\" | \"secondary\" | \"warning\";\n\n/** `hover` (the default for `brand`, `muted`, `danger`, `inherit`): underlined under\n *  the pointer — the idiom all three apps draw. `always` (the default for `primary`,\n *  `secondary`, `warning`) for a link inside prose, where colour alone must not be the\n *  only mark (WCAG 1.4.1). `none` where the context already says \"link\" (a footer nav). */\nexport type TextLinkUnderline = \"hover\" | \"always\" | \"none\";\n\n/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */\nexport type TextLinkCurrent = \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | \"true\";\n\n/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface TextLinkRenderProps {\n  href: string;\n  /** The link's look — keep it, or the tone, underline and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: TextLinkCurrent;\n  id?: string;\n  title?: string;\n  /** Present, as `true`, only when the link was given `replace` — see\n   *  `KitLinkProps.replace`. Map it to your router's replace; never onto a DOM `<a>`. */\n  replace?: boolean;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface TextLinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"children\" | \"aria-current\" | \"onClick\" | \"onKeyDown\"> {\n  href: string;\n  children: ReactNode;\n  /** Default `brand`. */\n  tone?: TextLinkTone;\n  /** Default `always` for `primary`, `secondary` and `warning`, else `hover`. */\n  underline?: TextLinkUnderline;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return to this\n   * URL — keksdose F1, a one-shot URL (a confirmation landing, a `?done=1` hop). Handed\n   * to the router link as `replace` (see `KitLinkProps.replace` for mapping it); on a\n   * plain `<a>` (no `linkComponent`, or `reloadDocument`) a plain click becomes\n   * `location.replace(href)`. Ignored on an `external` link, which opens a new tab.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`: the browser loads the whole document instead of\n   * the router swapping the view — keksdose F1, a route served outside the SPA (a file\n   * download, a server-rendered page, a logout that must drop every in-memory cache).\n   * Wins over `renderLink` and the provider's `linkComponent`: it is the caller saying\n   * \"not the router\" for this one link.\n   */\n  reloadDocument?: boolean;\n  /**\n   * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`\n   * (never the router's), an external-link mark after the text (mirrored in RTL), and\n   * \"opens in a new tab\" (`common.opensInNewTab`) read after it — the mark says it\n   * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).\n   */\n  external?: boolean;\n  /**\n   * Keep the click (and the Enter that activates the link) from reaching an ancestor —\n   * a link in a DataTable row with `onRowClick` goes to its own target instead of\n   * running the row's action. kastlan's `CellLink` did this by hand.\n   */\n  stopPropagation?: boolean;\n  /** Mark the link as the current one of a set — `true` is `aria-current=\"page\"`, the\n   *  legal footer's link to the page you are on. Drawn in semibold. */\n  current?: boolean | TextLinkCurrent;\n  /** A Lucide icon before the text, at the text's size — kastlan's \"← Back\" link. */\n  icon?: LucideIcon;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */\n  renderLink?: (props: TextLinkRenderProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst TONE: Record<TextLinkTone, string> = {\n  brand: \"text-[var(--brand)] hover:text-[var(--brand-hover)]\",\n  muted: \"text-[var(--text-muted)] hover:text-[var(--text-primary)]\",\n  danger: \"text-[var(--danger)] hover:text-[var(--danger-hover)]\",\n  inherit: \"\",\n  primary: \"text-[var(--text-primary)] hover:decoration-2\",\n  secondary: \"text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n  warning: \"text-[var(--warning)] hover:decoration-2\",\n};\n\n/** The tones whose colour is their surroundings' — underlined by default; see\n *  {@link TextLinkTone}. */\nconst UNDERLINED_BY_DEFAULT = new Set<TextLinkTone>([\"primary\", \"secondary\", \"warning\"]);\n\nconst UNDERLINE: Record<TextLinkUnderline, string> = {\n  hover: \"no-underline hover:underline\",\n  always: \"underline\",\n  none: \"no-underline\",\n};\n\n/**\n * The one inline link: a real `<a href>` (middle click, \"open in new tab\", link\n * semantics) through the app's router for an in-app path, in one of four tones.\n *\n * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,\n * hover underline, one stopping the row click), the legal pages' back link and footer,\n * the feedback page's URL links, the calculator's external sources with a hand-placed\n * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)\n * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router\n * link comes from `<UiKitProvider linkComponent>`, set once.\n *\n * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit\n * on the text's baseline at the text's size, so they scale with whatever type the link\n * is set in. The focus ring is an outline, which follows every line of a wrapped link.\n */\nexport function TextLink({\n  href,\n  children,\n  tone = \"brand\",\n  underline: underlineProp,\n  external = false,\n  replace,\n  reloadDocument = false,\n  stopPropagation = false,\n  current,\n  icon: Icon,\n  renderLink,\n  className,\n  onClick,\n  onKeyDown,\n  ref,\n  ...rest\n}: TextLinkProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLink = useKitLink();\n  const underline = underlineProp ?? (UNDERLINED_BY_DEFAULT.has(tone) ? \"always\" : \"hover\");\n  const ariaCurrent: TextLinkCurrent | undefined =\n    current === true ? \"page\" : current === false ? undefined : current;\n\n  const look = cn(\n    \"rounded-sm underline-offset-2 transition-colors\",\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n    TONE[tone],\n    UNDERLINE[underline],\n    ariaCurrent && \"font-semibold\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className=\"me-1 inline size-[1em] shrink-0 align-[-0.125em]\" />}\n      {children}\n      {external && (\n        <>\n          <ExternalLink aria-hidden className=\"ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100\" />\n          {\" \"}\n          <span className=\"sr-only\">({common.opensInNewTab})</span>\n        </>\n      )}\n    </>\n  );\n\n  const handleClick: TextLinkRenderProps[\"onClick\"] = stopPropagation\n    ? (event) => {\n        event.stopPropagation();\n        onClick?.(event);\n      }\n    : onClick;\n  const props: TextLinkRenderProps = {\n    ...(rest as Partial<TextLinkRenderProps>),\n    ref,\n    href,\n    className: look,\n    \"aria-current\": ariaCurrent,\n    onClick: handleClick,\n    onKeyDown: stopPropagation\n      ? (event) => {\n          if (event.key === \"Enter\") event.stopPropagation();\n          onKeyDown?.(event);\n        }\n      : onKeyDown,\n    children: body,\n  };\n\n  const render = external || reloadDocument ? undefined : pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedTextLink render={render} {...props} {...routerLinkNavigation(replace)} />;\n  // A plain `<a>` never gets `replace` as an attribute; asked for, it takes the click.\n  const plainClick = external ? handleClick : replacingClick(handleClick, href, replace, rest.target);\n  const { children: content, ...anchor } = props;\n  return (\n    <a\n      {...anchor}\n      href={href}\n      onClick={plainClick}\n      {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}\n    >\n      {content}\n    </a>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedTextLink({\n  render,\n  ...props\n}: TextLinkRenderProps & { render: (props: TextLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/text-link.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport type { KitLinkComponent } from \"../i18n/kit-labels\";\nimport { documentNavigation } from \"../lib/document-navigation\";\n\n/* ── Choosing what draws a link ──────────────────────────────────────────── */\n\n/**\n * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a\n * protocol-relative `//host`. A router's link is for paths inside the app, so the\n * provider's `linkComponent` is never handed one of these — they stay a plain `<a>`.\n *\n * NOT external, and so handed to the router link: a path (`/x`, `x`, `?q=1`) and the\n * hash-router form `#/x` — that IS a route in a `HashRouter` app, which maps it to\n * `to=\"/x\"`. A plain in-page anchor (`#section`) is not external either, but it is not\n * a route: see {@link isInPageAnchor}.\n */\nexport function isExternalHref(href: string): boolean {\n  return /^(?:[a-z][a-z\\d+.-]*:|\\/\\/)/i.test(href);\n}\n\n/**\n * An `href` that only scrolls the current page: `#section` (or a bare `#`). The\n * hash-router form `#/x` is a ROUTE, not an anchor, and is not one of these. A router\n * link must not get an anchor — under a `HashRouter` `#section` would navigate to the\n * path `/section` — so every kit link draws it as a plain `<a>`.\n */\nexport function isInPageAnchor(href: string): boolean {\n  return href.startsWith(\"#\") && !href.startsWith(\"#/\");\n}\n\n/**\n * Whether the provider's `linkComponent` (or a kit component's router fallback) draws\n * `href`: an in-app path, `#/x` included — not an external `href`\n * ({@link isExternalHref}) and not an in-page `#anchor` ({@link isInPageAnchor}).\n */\nexport function isRoutableHref(href: string): boolean {\n  return !isExternalHref(href) && !isInPageAnchor(href);\n}\n\n/**\n * What draws a kit link to `href`: the component's own `renderLink` when it was given\n * one (it always wins — the caller asked for it by name), else the\n * `<UiKitProvider linkComponent>` for a routable `href` ({@link isRoutableHref}), else\n * `undefined` — a plain `<a>`. The one rule every kit link follows: `https:` /\n * `mailto:` / `//host` and `#section` stay plain anchors; `/x`, `x` and a hash-router\n * `#/x` go to the router link. Every kit link props type is a subset of the anchor\n * attributes `KitLinkProps` describes, which is what makes the cast sound.\n * @internal Shared by the kit's link-bearing components; not part of the barrel.\n */\nexport function pickLinkRenderer<P>(\n  own: ((props: P) => ReactElement) | undefined,\n  kitLink: KitLinkComponent | undefined,\n  href: string | undefined,\n): ((props: P) => ReactElement) | undefined {\n  if (own) return own;\n  if (!kitLink || href === undefined || !isRoutableHref(href)) return undefined;\n  return kitLink as unknown as (props: P) => ReactElement;\n}\n\n/** The plain primary click a page navigates on — not a middle click, not ⌘ / Ctrl /\n *  Shift / Alt (new tab, new window, download), and not one a handler already took. */\nfunction isPlainNavigationClick(event: MouseEvent<HTMLAnchorElement>): boolean {\n  return (\n    !event.defaultPrevented &&\n    event.button === 0 &&\n    !event.metaKey &&\n    !event.ctrlKey &&\n    !event.shiftKey &&\n    !event.altKey\n  );\n}\n\n/**\n * The `onClick` of a PLAIN `<a>` whose kit link was asked to `replace` (keksdose F1).\n *\n * A router link replaces the history entry itself (it is handed `replace`, see\n * {@link routerLinkNavigation}); a plain `<a>` has no attribute that says so, and the\n * browser's own navigation always pushes. So a plain click is taken over — the caller's\n * `onClick` runs first and may still `preventDefault` — and becomes\n * `location.replace(href)`: the same document load, with Back skipping the one-shot URL.\n * That is the case of `replace` together with `reloadDocument`, or an app with no\n * `linkComponent`. A modified click (new tab) and a `target` other than `_self` are left\n * to the browser: they do not navigate THIS history. Without `replace`, `onClick` comes\n * back untouched.\n * @internal\n */\nexport function replacingClick(\n  onClick: ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined,\n  href: string,\n  replace: boolean | undefined,\n  target?: string,\n): ((event: MouseEvent<HTMLAnchorElement>) => void) | undefined {\n  if (!replace || (target !== undefined && target !== \"\" && target !== \"_self\")) return onClick;\n  return (event) => {\n    onClick?.(event);\n    if (!isPlainNavigationClick(event)) return;\n    event.preventDefault();\n    documentNavigation.replace(href);\n  };\n}\n\n/**\n * What a ROUTER link is handed for `replace`: `{ replace: true }` when asked, else\n * nothing at all — so a provider link that spreads its props onto a DOM `<a>` never\n * receives an unknown attribute from a link that did not ask (see `KitLinkProps.replace`).\n * @internal\n */\nexport function routerLinkNavigation(replace: boolean | undefined): { replace?: true } {\n  return replace ? { replace: true } : {};\n}\n\n/**\n * Draws `props` through `render` as a component of its own, so a router link's hooks\n * belong to it and not to the kit component calling it — for the kit components that\n * call their own `renderLink` inline and reach the provider's link through here.\n * @internal\n */\nexport function RenderedKitLink<P>({ render, props }: { render: (props: P) => ReactElement; props: P }) {\n  return render(props);\n}\n\n/* ── TextLink ─────────────────────────────────────────────────────────────── */\n\n/**\n * `brand` (default) for a link in running text, `muted` for footer and meta links\n * that should not compete with the content, `danger` for a destructive one (\"Leave\n * group\"), `inherit` for a link that takes its surroundings' colour.\n *\n * `primary` and `secondary` are the body and the secondary text colour, UNDERLINED\n * (keksdose F3): a link that must read as part of the text around it — a name in a\n * list row, a reference in a card's meta line — where `brand` repaints it in the accent\n * and `muted` is a step too light to read as content. `secondary` darkens to the body\n * colour under the pointer, as `muted` does; `primary` has nowhere darker to go, so its\n * underline thickens instead.\n *\n * `warning` is the kit's `--warning` text colour, underlined (kastlan 46): a link inside\n * a `<Tone tone=\"warning\">` sentence or a warning banner, which `brand` would paint in a\n * second hue and `inherit` would leave indistinguishable from the sentence. Like\n * `primary`, it keeps its colour on hover and thickens the underline.\n *\n * The three colours that sit IN the text default to `underline=\"always\"`: with the\n * colour of their surroundings, the underline is the only thing that says \"link\"\n * (WCAG 1.4.1). An explicit `underline` still wins.\n */\nexport type TextLinkTone = \"brand\" | \"muted\" | \"danger\" | \"inherit\" | \"primary\" | \"secondary\" | \"warning\";\n\n/** `hover` (the default for `brand`, `muted`, `danger`, `inherit`): underlined under\n *  the pointer — the idiom all three apps draw. `always` (the default for `primary`,\n *  `secondary`, `warning`) for a link inside prose, where colour alone must not be the\n *  only mark (WCAG 1.4.1). `none` where the context already says \"link\" (a footer nav). */\nexport type TextLinkUnderline = \"hover\" | \"always\" | \"none\";\n\n/** The `aria-current` token. `true` on {@link TextLinkProps.current} means `page`. */\nexport type TextLinkCurrent = \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | \"true\";\n\n/** What {@link TextLinkProps.renderLink} (and the provider's `linkComponent`) is\n *  handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface TextLinkRenderProps {\n  href: string;\n  /** The link's look — keep it, or the tone, underline and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: TextLinkCurrent;\n  id?: string;\n  title?: string;\n  /** Present, as `true`, only when the link was given `replace` — see\n   *  `KitLinkProps.replace`. Map it to your router's replace; never onto a DOM `<a>`. */\n  replace?: boolean;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nexport interface TextLinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"href\" | \"children\" | \"aria-current\" | \"onClick\" | \"onKeyDown\"> {\n  href: string;\n  children: ReactNode;\n  /** Default `brand`. */\n  tone?: TextLinkTone;\n  /** Default `always` for `primary`, `secondary` and `warning`, else `hover`. */\n  underline?: TextLinkUnderline;\n  /**\n   * Navigate by replacing the current history entry, so Back does not return to this\n   * URL — keksdose F1, a one-shot URL (a confirmation landing, a `?done=1` hop). Handed\n   * to the router link as `replace` (see `KitLinkProps.replace` for mapping it); on a\n   * plain `<a>` (no `linkComponent`, or `reloadDocument`) a plain click becomes\n   * `location.replace(href)`. Ignored on an `external` link, which opens a new tab.\n   */\n  replace?: boolean;\n  /**\n   * A plain `<a>` for an in-app `href`: the browser loads the whole document instead of\n   * the router swapping the view — keksdose F1, a route served outside the SPA (a file\n   * download, a server-rendered page, a logout that must drop every in-memory cache).\n   * Wins over `renderLink` and the provider's `linkComponent`: it is the caller saying\n   * \"not the router\" for this one link.\n   */\n  reloadDocument?: boolean;\n  /**\n   * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener noreferrer\">`\n   * (never the router's), an external-link mark after the text (mirrored in RTL), and\n   * \"opens in a new tab\" (`common.opensInNewTab`) read after it — the mark says it\n   * only to the eye. kastlan's BWO / BFS source links (rent-increase-calculator-page).\n   */\n  external?: boolean;\n  /**\n   * Keep the click (and the Enter that activates the link) from reaching an ancestor —\n   * a link in a DataTable row with `onRowClick` goes to its own target instead of\n   * running the row's action. kastlan's `CellLink` did this by hand.\n   */\n  stopPropagation?: boolean;\n  /** Mark the link as the current one of a set — `true` is `aria-current=\"page\"`, the\n   *  legal footer's link to the page you are on. Drawn in semibold. */\n  current?: boolean | TextLinkCurrent;\n  /** A Lucide icon before the text, at the text's size — kastlan's \"← Back\" link. */\n  icon?: LucideIcon;\n  /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then a plain `<a>`. Ignored on an `external` link. */\n  renderLink?: (props: TextLinkRenderProps) => ReactElement;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLAnchorElement>) => void;\n  ref?: Ref<HTMLAnchorElement>;\n}\n\nconst TONE: Record<TextLinkTone, string> = {\n  brand: \"text-[var(--brand)] hover:text-[var(--brand-hover)]\",\n  muted: \"text-[var(--text-muted)] hover:text-[var(--text-primary)]\",\n  danger: \"text-[var(--danger)] hover:text-[var(--danger-hover)]\",\n  inherit: \"\",\n  primary: \"text-[var(--text-primary)] hover:decoration-2\",\n  secondary: \"text-[var(--text-secondary)] hover:text-[var(--text-primary)]\",\n  warning: \"text-[var(--warning)] hover:decoration-2\",\n};\n\n/** The tones whose colour is their surroundings' — underlined by default; see\n *  {@link TextLinkTone}. */\nconst UNDERLINED_BY_DEFAULT = new Set<TextLinkTone>([\"primary\", \"secondary\", \"warning\"]);\n\nconst UNDERLINE: Record<TextLinkUnderline, string> = {\n  hover: \"no-underline hover:underline\",\n  always: \"underline\",\n  none: \"no-underline\",\n};\n\n/**\n * The one inline link: a real `<a href>` (middle click, \"open in new tab\", link\n * semantics) through the app's router for an in-app path, in one of four tones.\n *\n * kastlan draws this link a dozen ways by hand — `EntityLink` and `CellLink` (text-primary,\n * hover underline, one stopping the row click), the legal pages' back link and footer,\n * the feedback page's URL links, the calculator's external sources with a hand-placed\n * ↗ and no word for a screen reader — and the lease wizard's unit step (lease-unit-step)\n * used a raw `<a>` to an in-app route, which reloads the whole app. Here the router\n * link comes from `<UiKitProvider linkComponent>`, set once.\n *\n * Inline, not `inline-flex`: a link inside a sentence must wrap with it. The icons sit\n * on the text's baseline at the text's size, so they scale with whatever type the link\n * is set in. The focus ring is an outline, which follows every line of a wrapped link.\n */\nexport function TextLink({\n  href,\n  children,\n  tone = \"brand\",\n  underline: underlineProp,\n  external = false,\n  replace,\n  reloadDocument = false,\n  stopPropagation = false,\n  current,\n  icon: Icon,\n  renderLink,\n  className,\n  onClick,\n  onKeyDown,\n  ref,\n  ...rest\n}: TextLinkProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const kitLink = useKitLink();\n  const underline = underlineProp ?? (UNDERLINED_BY_DEFAULT.has(tone) ? \"always\" : \"hover\");\n  const ariaCurrent: TextLinkCurrent | undefined =\n    current === true ? \"page\" : current === false ? undefined : current;\n\n  const look = cn(\n    \"rounded-sm underline-offset-2 transition-colors\",\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n    TONE[tone],\n    UNDERLINE[underline],\n    ariaCurrent && \"font-semibold\",\n    className,\n  );\n\n  const body = (\n    <>\n      {Icon && <Icon aria-hidden className=\"me-1 inline size-[1em] shrink-0 align-[-0.125em]\" />}\n      {children}\n      {external && (\n        <>\n          <ExternalLink aria-hidden className=\"ms-1 inline size-[0.85em] align-[-0.1em] rtl:-scale-x-100\" />\n          {\" \"}\n          <span className=\"sr-only\">({common.opensInNewTab})</span>\n        </>\n      )}\n    </>\n  );\n\n  const handleClick: TextLinkRenderProps[\"onClick\"] = stopPropagation\n    ? (event) => {\n        event.stopPropagation();\n        onClick?.(event);\n      }\n    : onClick;\n  const props: TextLinkRenderProps = {\n    ...(rest as Partial<TextLinkRenderProps>),\n    ref,\n    href,\n    className: look,\n    \"aria-current\": ariaCurrent,\n    onClick: handleClick,\n    onKeyDown: stopPropagation\n      ? (event) => {\n          if (event.key === \"Enter\") event.stopPropagation();\n          onKeyDown?.(event);\n        }\n      : onKeyDown,\n    children: body,\n  };\n\n  const render = external || reloadDocument ? undefined : pickLinkRenderer(renderLink, kitLink, href);\n  if (render) return <RenderedTextLink render={render} {...props} {...routerLinkNavigation(replace)} />;\n  // A plain `<a>` never gets `replace` as an attribute; asked for, it takes the click.\n  const plainClick = external ? handleClick : replacingClick(handleClick, href, replace, rest.target);\n  const { children: content, ...anchor } = props;\n  return (\n    <a\n      {...anchor}\n      href={href}\n      onClick={plainClick}\n      {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}\n    >\n      {content}\n    </a>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedTextLink({\n  render,\n  ...props\n}: TextLinkRenderProps & { render: (props: TextLinkRenderProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":[]}

package/dist/components/time-input.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ay as InputProps } from '../kit-labels-Mz8zZHIF.js';
+import { ay as InputProps } from '../kit-labels-BHfRBbHs.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/treemap.d.ts

@@ -22,8 +22,9 @@ interface TreemapNode {
     value: number;
     /** Overrides the by-index palette colour for this tile — e.g. to paint every child
      *  in its parent group's colour, so the groups stay legible in one picture. A
-     *  concrete `#rrggbb` keeps the label ink measured; anything else (a CSS var) gets
-     *  `currentColor` ink, because there is nothing to measure — set `labelColor` then. */
+     *  concrete `#rrggbb` or a bare `var(--chart-N)` keeps the label ink measured;
+     *  anything else (another var, a `color-mix()`) gets `currentColor` ink, because
+     *  there is nothing to measure — set `labelColor` then. */
     fill?: string;
     /** The label's ink, for a `fill` the kit cannot measure (a `var()` or `color-mix()`):
      *  keksdose's recency plot fills with `color-mix(in srgb, var(--chart-1) N%,

package/dist/components/treemap.js

@@ -29,6 +29,14 @@ function useChartTokenHex() {
   const joined = useSyncExternalStore(subscribeChartTokens, readChartTokens, () => SERVER_TOKENS);
   return joined.split(",");
 }
+const CHART_TOKEN_REF = /^var\(\s*--chart-(\d+)\s*\)$/;
+function measurableFill(fill, tokens) {
+  if (parseHex(fill)) return fill;
+  const m = CHART_TOKEN_REF.exec(fill.trim());
+  if (!m) return null;
+  const hex = tokens[Number(m[1]) - 1];
+  return hex && parseHex(hex) ? hex : null;
+}
 const LABEL_FONT_SIZE = 12;
 const NOTE_FONT_SIZE = 11;
 function fitLabel(name, boxWidth, fontSize) {
@@ -51,13 +59,16 @@ function TreemapCell({
   nodeNote,
   dir = "ltr"
 }) {
+  const tokenHex = useChartTokenHex();
   if (!depth) return null;
   const px = Math.round(x);
   const py = Math.round(y);
   const pw = Math.round(width);
   const ph = Math.round(height);
   const tileFill = fill ?? "var(--chart-1)";
-  const ink = labelColor ?? textOn(tileFill);
+  const measured = measurableFill(tileFill, tokenHex);
+  const ink = labelColor ?? (measured ? textOn(measured) : "currentColor");
+  const halo = measured ? tileFill : "none";
   const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? "", pw, LABEL_FONT_SIZE) : null;
   const rawNote = id != null && nodeNote ? nodeNote(id) : void 0;
   const note = label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;
@@ -101,7 +112,7 @@ function TreemapCell({
             y: py + 15,
             direction: dir,
             fill: ink,
-            stroke: tileFill,
+            stroke: halo,
             strokeWidth: 2.5,
             strokeLinejoin: "round",
             paintOrder: "stroke",
@@ -119,7 +130,7 @@ function TreemapCell({
             direction: dir,
             fill: ink,
             fillOpacity: 0.85,
-            stroke: tileFill,
+            stroke: halo,
             strokeWidth: 2.5,
             strokeLinejoin: "round",
             paintOrder: "stroke",

package/dist/components/treemap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/treemap.tsx"],"sourcesContent":["// A tile chart (\"treemap\"): one rectangle per node, its AREA the node's share of what\n// is drawn. Lifted out of keksdose's reports, where five cards drew it (spending by\n// group and by category, net worth by account and by type, allocation, payees, food\n// groups) — every domain word is gone and every string it could print is a prop.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and the\n// kit's own ink rule (`textOn`), so it re-skins with the palette like every other\n// chart. The one thing it cannot take from a CSS var is the tile colour: the label ink\n// is MEASURED against the fill, and a `var(--chart-3)` string measures as nothing — see\n// `useChartTokenHex` below for how the concrete hex is found instead.\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Treemap as RechartsTreemap } from \"recharts\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { PALETTE_HEX, textOn } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\nimport { dirOf, type Direction } from \"../lib/direction\";\n\n/**\n * One tile.\n *\n * `value`, not keksdose's `total`: a treemap's areas are not always money (keksdose\n * already sizes one by transaction COUNT), and `value` is the word every other chart\n * in recharts uses for the number a mark is sized by. Migrating is a rename at the\n * mapping step — `{ id, name, value: row.total }`.\n */\nexport interface TreemapNode {\n  /** Stable key, handed back by {@link TreemapProps.onNodeClick} and\n   *  {@link TreemapProps.nodeNote}. Names can collide; ids must not. */\n  id: string;\n  name: string;\n  /** The tile's area. A node whose value is not a positive finite number is NOT\n   *  drawn — an area cannot be negative, and recharts lays a negative size out as\n   *  nonsense rather than refusing it. Saying so is the caller's job: a group that\n   *  vanishes silently between two views of the same data is a bug report. */\n  value: number;\n  /** Overrides the by-index palette colour for this tile — e.g. to paint every child\n   *  in its parent group's colour, so the groups stay legible in one picture. A\n   *  concrete `#rrggbb` keeps the label ink measured; anything else (a CSS var) gets\n   *  `currentColor` ink, because there is nothing to measure — set `labelColor` then. */\n  fill?: string;\n  /** The label's ink, for a `fill` the kit cannot measure (a `var()` or `color-mix()`):\n   *  keksdose's recency plot fills with `color-mix(in srgb, var(--chart-1) N%,\n   *  transparent)`, where `currentColor` put dark page text on full-strength indigo\n   *  (~1.5:1). Wins over the measured ink when given. */\n  labelColor?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root (`ChartContainer`), so a test id\n * or a `data-tour` anchor can find it. `children` is the chart's own.\n */\nexport interface TreemapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  data: TreemapNode[];\n  /**\n   * Formats a node's value in the tooltip. Handed the node's SHARE of what is drawn\n   * (0–1) as a second argument, because a tile is read for how big it is relative to\n   * the rest, and \"€412.30\" alone makes the reader estimate that ratio off the areas.\n   * The share is `undefined` when the drawn total is not positive.\n   *\n   * Default: the bare number through `Intl.NumberFormat` in the runtime's locale. A\n   * host that has a currency or a locale passes this — the kit knows neither.\n   */\n  valueFormatter?: (value: number, share: number | undefined) => ReactNode;\n  /** Chart height in px. Default 320. */\n  height?: number;\n  /** A tile was activated — by click, or by Enter/Space on a focused tile. Setting\n   *  this makes every tile a focusable `role=\"button\"` named by its node name. */\n  onNodeClick?: (id: string, name: string) => void;\n  /**\n   * The node names are the user's own data (payees, not categories): the tile labels\n   * and the whole tooltip bubble get `data-private`, the same attribute the kit's\n   * `Tooltip redact` and `ChartTooltipContent`'s value cell carry, so the host's one\n   * privacy rule reaches them. Off by default — a category name is a label of the app.\n   */\n  redactNames?: boolean;\n  /**\n   * A second, smaller line under a tile's label — one extra figure per node that the\n   * name cannot carry (a year-on-year `+12%`, `new`). Return `undefined` for a node\n   * with nothing to add. Never tagged `data-private`: a ratio reveals no amount.\n   *\n   * ON THE TILE rather than in the tooltip, for two reasons. The tooltip identifies a\n   * node by name or by raw value, so a per-node note would be keyed on an amount (two\n   * nodes of equal size would swap notes). And a tooltip is a pointer affordance: a\n   * phone never hovers, so a figure that only exists on hover does not exist there.\n   */\n  nodeNote?: (id: string) => string | undefined;\n  /**\n   * Draw at most this many tiles (the first N drawable nodes, in the order given —\n   * sort first). Unbounded by default. A tile under ~44x20px has no room for a label,\n   * and a map made of unlabelled rectangles answers nothing; around 24 is where the\n   * smallest tile of a skewed series reaches that floor on a phone-width card. The\n   * caller owns the \"N more not shown\" line, since it knows how many it passed.\n   */\n  maxTiles?: number;\n  /**\n   * The categorical ramp tiles take by index, as concrete hex. Default: the page's\n   * live `--chart-1…9` tokens (see `useChartTokenHex`). Pass one when the host\n   * already holds the active palette — e.g. `createPaletteStore`'s `useChartHex()` —\n   * so a caller colouring a legend beside the map is guaranteed the same list.\n   */\n  colors?: readonly string[];\n}\n\n// ── The categorical ramp, as concrete hex ──────────────────────────────────\n//\n// The label ink is measured against the tile's fill, so the fill has to be a colour\n// and not a reference to one. keksdose read it from its palette STORE, which is an\n// app object the kit cannot import. What the kit does own is the token layer: whether\n// a palette arrives through `applyTokenSet` (inline properties on <html>) or through\n// tokens.css (`:root` / `.dark`), the resolved `--chart-N` on <html> is the colour\n// every other chart on the page is being painted with. So that is what is read, and\n// re-read whenever <html>'s class or style changes — which is exactly when a theme\n// toggle or a palette switch lands.\n\nconst CHART_TOKENS = 9;\n\n/** The resolved ramp, joined into ONE string so `useSyncExternalStore` compares a\n *  primitive: a fresh array per read would never be `Object.is`-equal to the last and\n *  would re-render forever. */\nfunction readChartTokens(): string {\n  const root = document.documentElement;\n  const fallback = root.classList.contains(\"dark\") ? PALETTE_HEX.dark : PALETTE_HEX.light;\n  const style = getComputedStyle(root);\n  return Array.from({ length: CHART_TOKENS }, (_, i) => {\n    const v = style.getPropertyValue(`--chart-${i + 1}`).trim();\n    // An unresolved token (a host that never loaded tokens.css, a test DOM) falls\n    // back to the built-in ramp for the current theme rather than to no colour.\n    return parseHex(v) ? v : fallback[i];\n  }).join(\",\");\n}\n\nfunction subscribeChartTokens(onChange: () => void): () => void {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"style\", \"data-theme\"],\n  });\n  return () => observer.disconnect();\n}\n\nconst SERVER_TOKENS = PALETTE_HEX.light.join(\",\");\n\nfunction useChartTokenHex(): string[] {\n  const joined = useSyncExternalStore(subscribeChartTokens, readChartTokens, () => SERVER_TOKENS);\n  return joined.split(\",\");\n}\n\n// ── Tile ──────────────────────────────────────────────────────────────────\n\nconst LABEL_FONT_SIZE = 12;\n/** The optional second line, a step down from the name so the tile reads name-first. */\nconst NOTE_FONT_SIZE = 11;\n\n/**\n * Fit a label to its tile: the text itself when it fits, an ellipsised head when it\n * does not, `null` when not even three characters would. Without this a long name ran\n * on across its neighbours and collided with THEIR labels. 0.58em is the average\n * advance of a UI sans at this weight; it only needs to be close, since the tile keeps\n * 6px of padding either side. The full name stays in the tooltip.\n */\nexport function fitLabel(name: string, boxWidth: number, fontSize: number): string | null {\n  const max = Math.floor((boxWidth - 12) / (fontSize * 0.58));\n  if (max < 3) return null;\n  return name.length <= max ? name : `${name.slice(0, max - 1).trimEnd()}…`;\n}\n\n/** What recharts hands a `content` element for each node, plus the three options the\n *  chart forwards. Everything optional because recharts clones the element it was\n *  given and fills the geometry in — the element as written carries only the options. */\nexport interface TreemapCellProps {\n  depth?: number;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  name?: string;\n  fill?: string;\n  /** See {@link TreemapNode.labelColor}; recharts hands each node's fields to its cell. */\n  labelColor?: string;\n  id?: string;\n  onNodeClick?: (id: string, name: string) => void;\n  redactNames?: boolean;\n  nodeNote?: (id: string) => string | undefined;\n  /** The page's reading direction, which `Treemap` reads off its own root. In `rtl`\n   *  the label stands in the tile's top RIGHT corner and is shaped right-to-left, so a\n   *  clipped name ends in its ellipsis on the reading end. Default `ltr`. */\n  dir?: Direction;\n}\n\n/**\n * One tile. Exported so a caller drawing its own recharts `<Treemap>` gets the same\n * label rules.\n *\n * recharts' default cell inherits the chart-level `stroke`, an SVG presentation\n * attribute that lands on the `<svg>` root and cascades into the label — so the glyphs\n * were painted with a 1px outline ON TOP of themselves, which reads as blur. This cell\n * draws its own label with a halo in the TILE colour painted BEHIND the fill\n * (`paint-order: stroke`), which defeats any inherited stroke and keeps the text solid\n * where it overlaps a lighter or darker part of its own tile.\n */\nexport function TreemapCell({\n  depth,\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  fill,\n  labelColor,\n  id,\n  onNodeClick,\n  redactNames,\n  nodeNote,\n  dir = \"ltr\",\n}: TreemapCellProps) {\n  // Depth 0 is recharts' synthetic root, which spans the whole chart.\n  if (!depth) return null;\n  // Whole pixels: a rect on a half pixel renders its edge across two half-lit\n  // columns, and the text baseline inherits that blur.\n  const px = Math.round(x);\n  const py = Math.round(y);\n  const pw = Math.round(width);\n  const ph = Math.round(height);\n  const tileFill = fill ?? \"var(--chart-1)\";\n  const ink = labelColor ?? textOn(tileFill);\n  // Below ~44x20 there is no room for a readable word, so no label at all rather than\n  // a one-letter stub bleeding over the tile edge.\n  const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? \"\", pw, LABEL_FONT_SIZE) : null;\n  // Only under a label that is itself drawn — a stray \"+12%\" on an unnamed rectangle\n  // names nothing — and only where a second baseline fits: the note's baseline sits\n  // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under\n  // the note that the label keeps under itself at the 20px floor.\n  const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;\n  const note =\n    label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;\n  // The label's START edge, 6px in from the tile's. The tiles themselves are laid out\n  // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is\n  // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then\n  // the right end in RTL, and the label grows leftwards from the tile's right edge.\n  const textX = dir === \"rtl\" ? px + pw - 6 : px + 6;\n  const activate = id != null && onNodeClick ? () => onNodeClick(id, name ?? \"\") : undefined;\n  const onKeyDown = activate\n    ? (e: KeyboardEvent<SVGGElement>) => {\n        if (e.key !== \"Enter\" && e.key !== \" \") return;\n        e.preventDefault();\n        activate();\n      }\n    : undefined;\n  return (\n    <g\n      onClick={activate}\n      onKeyDown={onKeyDown}\n      // A clickable tile is a button to a keyboard and a screen reader too; the\n      // drilldown it opens was mouse-only in the app this came from. Named by the node\n      // name, which is also why the group carries `data-private` under `redactNames`.\n      role={activate ? \"button\" : undefined}\n      tabIndex={activate ? 0 : undefined}\n      aria-label={activate ? name : undefined}\n      data-private={activate && redactNames ? \"\" : undefined}\n      cursor={activate ? \"pointer\" : undefined}\n      // CSS beats a presentation attribute, so this recolours the rect's own stroke\n      // for as long as the tile has keyboard focus.\n      className={activate ? \"outline-none [&:focus-visible>rect]:stroke-[var(--brand)]\" : undefined}\n    >\n      {/* The 2px gutter is the card showing through, not a white grid — on a dark\n          surface white lines glare harder than the tiles. */}\n      <rect\n        x={px}\n        y={py}\n        width={pw}\n        height={ph}\n        fill={tileFill}\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rx={3}\n      />\n      {label != null && (\n        <text\n          // A plain attribute, so the host's `[data-private]` rule reaches an SVG\n          // <text> exactly as it reaches a table cell.\n          data-private={redactNames ? \"\" : undefined}\n          x={textX}\n          y={py + 15}\n          direction={dir}\n          fill={ink}\n          stroke={tileFill}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={LABEL_FONT_SIZE}\n          fontWeight={600}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {label}\n        </text>\n      )}\n      {note != null && (\n        <text\n          x={textX}\n          y={py + 29}\n          direction={dir}\n          fill={ink}\n          fillOpacity={0.85}\n          stroke={tileFill}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={NOTE_FONT_SIZE}\n          fontWeight={500}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {note}\n        </text>\n      )}\n    </g>\n  );\n}\n\n// ── Chart ─────────────────────────────────────────────────────────────────\n\n// Nodes carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed.\nconst TREEMAP_CONFIG: ChartConfig = {};\n\n/**\n * The shared tooltip with the whole bubble tagged `data-private`, for names that are\n * the user's own data.\n *\n * The bubble, not just the name: `ChartTooltipContent` prints the name either from\n * `item.name` or from a config `label`, and only the config route could be tagged — but\n * a config entry keyed by a payee name is not a CSS identifier, and `ChartStyle` would\n * (rightly) refuse it. The bubble holds the name and the value, and the value cell is\n * already `data-private`, so tagging the wrapper hides nothing extra.\n *\n * recharts CLONES the `content` element to inject `active`/`payload`, so this has to BE\n * that element — a `<div>` wrapped around `<ChartTooltipContent />` in the JSX would\n * take those props itself and hand the tooltip nothing.\n */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\nconst DEFAULT_NUMBER = new Intl.NumberFormat();\n\n/**\n * Tile chart: one rectangle per {@link TreemapNode}, sized by `value`, coloured by\n * index from the chart ramp (or by the node's own `fill`), labelled in whichever of the\n * kit's two inks measures better against it. Hover shows the name and the formatted\n * value; `onNodeClick` turns the tiles into buttons.\n *\n * Renders nothing when no node has a positive value — an empty box is a hole in the\n * card, and the caller's own sentence is the better answer there.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function Treemap({\n  data,\n  valueFormatter,\n  height = 320,\n  onNodeClick,\n  redactNames = false,\n  nodeNote,\n  maxTiles,\n  colors,\n  style,\n  ...rest\n}: TreemapProps) {\n  const tokenHex = useChartTokenHex();\n  // Read off the DOM after mount: the `dir` a treemap sits under is an ancestor's\n  // attribute, and SVG text anchoring cannot follow it by CSS (see TreemapCell). Again\n  // on new data, because a map that had nothing to draw rendered no root to read.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  useLayoutEffect(() => {\n    setDir(dirOf(rootRef.current));\n  }, [data]);\n  const ramp = colors && colors.length > 0 ? colors : tokenHex;\n  // Coloured by index into `data` AS GIVEN, before anything is dropped: a caller\n  // painting a legend or a second map from the same list must land on the same hue\n  // for the same row, and filtering first would shift every colour after a gap.\n  const nodes = data\n    .map((d, idx) => ({\n      id: d.id,\n      name: d.name,\n      size: d.value,\n      fill: d.fill ?? ramp[idx % ramp.length],\n      // recharts hands each node's fields to its cell; a field left out of this map\n      // never reaches `TreemapCell` (0.8.0 shipped `labelColor` without it — keksdose).\n      labelColor: d.labelColor,\n    }))\n    .filter((n) => Number.isFinite(n.size) && n.size > 0)\n    .slice(0, maxTiles ?? undefined);\n  if (nodes.length === 0) return null;\n\n  // The share is of what is DRAWN, so it always reads as \"of this picture\".\n  const total = nodes.reduce((acc, n) => acc + n.size, 0);\n  const format = (v: number): ReactNode => {\n    const share = total > 0 ? v / total : undefined;\n    return valueFormatter ? valueFormatter(v, share) : DEFAULT_NUMBER.format(v);\n  };\n  const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;\n  return (\n    <ChartContainer {...rest} ref={rootRef} config={TREEMAP_CONFIG} style={{ ...style, height }}>\n      {/* No chart-level `stroke`: recharts spreads it onto the <svg> root, from where\n          it inherits into every label (see TreemapCell). Each cell strokes its own rect. */}\n      <RechartsTreemap\n        data={nodes}\n        dataKey=\"size\"\n        fill=\"var(--chart-1)\"\n        isAnimationActive={false}\n        content={\n          <TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} dir={dir} />\n        }\n      >\n        <ChartTooltip content={<Content hideLabel valueFormatter={format} />} />\n      </RechartsTreemap>\n    </ChartContainer>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/treemap.tsx"],"sourcesContent":["// A tile chart (\"treemap\"): one rectangle per node, its AREA the node's share of what\n// is drawn. Lifted out of keksdose's reports, where five cards drew it (spending by\n// group and by category, net worth by account and by type, allocation, payees, food\n// groups) — every domain word is gone and every string it could print is a prop.\n//\n// It uses the kit's own chart shell (`ChartContainer`, `ChartTooltipContent`) and the\n// kit's own ink rule (`textOn`), so it re-skins with the palette like every other\n// chart. The one thing it cannot take from a CSS var is the tile colour: the label ink\n// is MEASURED against the fill, and a `var(--chart-3)` string measures as nothing — see\n// `useChartTokenHex` below for how the concrete hex is found instead.\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { Treemap as RechartsTreemap } from \"recharts\";\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from \"./chart\";\nimport { PALETTE_HEX, textOn } from \"../theme/chart-palette\";\nimport { parseHex } from \"../theme/color\";\nimport { dirOf, type Direction } from \"../lib/direction\";\n\n/**\n * One tile.\n *\n * `value`, not keksdose's `total`: a treemap's areas are not always money (keksdose\n * already sizes one by transaction COUNT), and `value` is the word every other chart\n * in recharts uses for the number a mark is sized by. Migrating is a rename at the\n * mapping step — `{ id, name, value: row.total }`.\n */\nexport interface TreemapNode {\n  /** Stable key, handed back by {@link TreemapProps.onNodeClick} and\n   *  {@link TreemapProps.nodeNote}. Names can collide; ids must not. */\n  id: string;\n  name: string;\n  /** The tile's area. A node whose value is not a positive finite number is NOT\n   *  drawn — an area cannot be negative, and recharts lays a negative size out as\n   *  nonsense rather than refusing it. Saying so is the caller's job: a group that\n   *  vanishes silently between two views of the same data is a bug report. */\n  value: number;\n  /** Overrides the by-index palette colour for this tile — e.g. to paint every child\n   *  in its parent group's colour, so the groups stay legible in one picture. A\n   *  concrete `#rrggbb` or a bare `var(--chart-N)` keeps the label ink measured;\n   *  anything else (another var, a `color-mix()`) gets `currentColor` ink, because\n   *  there is nothing to measure — set `labelColor` then. */\n  fill?: string;\n  /** The label's ink, for a `fill` the kit cannot measure (a `var()` or `color-mix()`):\n   *  keksdose's recency plot fills with `color-mix(in srgb, var(--chart-1) N%,\n   *  transparent)`, where `currentColor` put dark page text on full-strength indigo\n   *  (~1.5:1). Wins over the measured ink when given. */\n  labelColor?: string;\n}\n\n/**\n * Everything a `<div>` takes reaches the chart's root (`ChartContainer`), so a test id\n * or a `data-tour` anchor can find it. `children` is the chart's own.\n */\nexport interface TreemapProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  data: TreemapNode[];\n  /**\n   * Formats a node's value in the tooltip. Handed the node's SHARE of what is drawn\n   * (0–1) as a second argument, because a tile is read for how big it is relative to\n   * the rest, and \"€412.30\" alone makes the reader estimate that ratio off the areas.\n   * The share is `undefined` when the drawn total is not positive.\n   *\n   * Default: the bare number through `Intl.NumberFormat` in the runtime's locale. A\n   * host that has a currency or a locale passes this — the kit knows neither.\n   */\n  valueFormatter?: (value: number, share: number | undefined) => ReactNode;\n  /** Chart height in px. Default 320. */\n  height?: number;\n  /** A tile was activated — by click, or by Enter/Space on a focused tile. Setting\n   *  this makes every tile a focusable `role=\"button\"` named by its node name. */\n  onNodeClick?: (id: string, name: string) => void;\n  /**\n   * The node names are the user's own data (payees, not categories): the tile labels\n   * and the whole tooltip bubble get `data-private`, the same attribute the kit's\n   * `Tooltip redact` and `ChartTooltipContent`'s value cell carry, so the host's one\n   * privacy rule reaches them. Off by default — a category name is a label of the app.\n   */\n  redactNames?: boolean;\n  /**\n   * A second, smaller line under a tile's label — one extra figure per node that the\n   * name cannot carry (a year-on-year `+12%`, `new`). Return `undefined` for a node\n   * with nothing to add. Never tagged `data-private`: a ratio reveals no amount.\n   *\n   * ON THE TILE rather than in the tooltip, for two reasons. The tooltip identifies a\n   * node by name or by raw value, so a per-node note would be keyed on an amount (two\n   * nodes of equal size would swap notes). And a tooltip is a pointer affordance: a\n   * phone never hovers, so a figure that only exists on hover does not exist there.\n   */\n  nodeNote?: (id: string) => string | undefined;\n  /**\n   * Draw at most this many tiles (the first N drawable nodes, in the order given —\n   * sort first). Unbounded by default. A tile under ~44x20px has no room for a label,\n   * and a map made of unlabelled rectangles answers nothing; around 24 is where the\n   * smallest tile of a skewed series reaches that floor on a phone-width card. The\n   * caller owns the \"N more not shown\" line, since it knows how many it passed.\n   */\n  maxTiles?: number;\n  /**\n   * The categorical ramp tiles take by index, as concrete hex. Default: the page's\n   * live `--chart-1…9` tokens (see `useChartTokenHex`). Pass one when the host\n   * already holds the active palette — e.g. `createPaletteStore`'s `useChartHex()` —\n   * so a caller colouring a legend beside the map is guaranteed the same list.\n   */\n  colors?: readonly string[];\n}\n\n// ── The categorical ramp, as concrete hex ──────────────────────────────────\n//\n// The label ink is measured against the tile's fill, so the fill has to be a colour\n// and not a reference to one. keksdose read it from its palette STORE, which is an\n// app object the kit cannot import. What the kit does own is the token layer: whether\n// a palette arrives through `applyTokenSet` (inline properties on <html>) or through\n// tokens.css (`:root` / `.dark`), the resolved `--chart-N` on <html> is the colour\n// every other chart on the page is being painted with. So that is what is read, and\n// re-read whenever <html>'s class or style changes — which is exactly when a theme\n// toggle or a palette switch lands.\n\nconst CHART_TOKENS = 9;\n\n/** The resolved ramp, joined into ONE string so `useSyncExternalStore` compares a\n *  primitive: a fresh array per read would never be `Object.is`-equal to the last and\n *  would re-render forever. */\nfunction readChartTokens(): string {\n  const root = document.documentElement;\n  const fallback = root.classList.contains(\"dark\") ? PALETTE_HEX.dark : PALETTE_HEX.light;\n  const style = getComputedStyle(root);\n  return Array.from({ length: CHART_TOKENS }, (_, i) => {\n    const v = style.getPropertyValue(`--chart-${i + 1}`).trim();\n    // An unresolved token (a host that never loaded tokens.css, a test DOM) falls\n    // back to the built-in ramp for the current theme rather than to no colour.\n    return parseHex(v) ? v : fallback[i];\n  }).join(\",\");\n}\n\nfunction subscribeChartTokens(onChange: () => void): () => void {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: [\"class\", \"style\", \"data-theme\"],\n  });\n  return () => observer.disconnect();\n}\n\nconst SERVER_TOKENS = PALETTE_HEX.light.join(\",\");\n\nfunction useChartTokenHex(): string[] {\n  const joined = useSyncExternalStore(subscribeChartTokens, readChartTokens, () => SERVER_TOKENS);\n  return joined.split(\",\");\n}\n\nconst CHART_TOKEN_REF = /^var\\(\\s*--chart-(\\d+)\\s*\\)$/;\n\n/**\n * The hex a tile fill measures as: the fill itself when it is hex, the live token when\n * it is a bare `var(--chart-N)` (what `paletteFor` returns), otherwise null. Without\n * the token case a hand-built recharts map coloured with the kit's own `paletteFor`\n * got `currentColor` ink — dark page text on dark indigo in the light theme.\n */\nfunction measurableFill(fill: string, tokens: readonly string[]): string | null {\n  if (parseHex(fill)) return fill;\n  const m = CHART_TOKEN_REF.exec(fill.trim());\n  if (!m) return null;\n  const hex = tokens[Number(m[1]) - 1];\n  return hex && parseHex(hex) ? hex : null;\n}\n\n// ── Tile ──────────────────────────────────────────────────────────────────\n\nconst LABEL_FONT_SIZE = 12;\n/** The optional second line, a step down from the name so the tile reads name-first. */\nconst NOTE_FONT_SIZE = 11;\n\n/**\n * Fit a label to its tile: the text itself when it fits, an ellipsised head when it\n * does not, `null` when not even three characters would. Without this a long name ran\n * on across its neighbours and collided with THEIR labels. 0.58em is the average\n * advance of a UI sans at this weight; it only needs to be close, since the tile keeps\n * 6px of padding either side. The full name stays in the tooltip.\n */\nexport function fitLabel(name: string, boxWidth: number, fontSize: number): string | null {\n  const max = Math.floor((boxWidth - 12) / (fontSize * 0.58));\n  if (max < 3) return null;\n  return name.length <= max ? name : `${name.slice(0, max - 1).trimEnd()}…`;\n}\n\n/** What recharts hands a `content` element for each node, plus the three options the\n *  chart forwards. Everything optional because recharts clones the element it was\n *  given and fills the geometry in — the element as written carries only the options. */\nexport interface TreemapCellProps {\n  depth?: number;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  name?: string;\n  fill?: string;\n  /** See {@link TreemapNode.labelColor}; recharts hands each node's fields to its cell. */\n  labelColor?: string;\n  id?: string;\n  onNodeClick?: (id: string, name: string) => void;\n  redactNames?: boolean;\n  nodeNote?: (id: string) => string | undefined;\n  /** The page's reading direction, which `Treemap` reads off its own root. In `rtl`\n   *  the label stands in the tile's top RIGHT corner and is shaped right-to-left, so a\n   *  clipped name ends in its ellipsis on the reading end. Default `ltr`. */\n  dir?: Direction;\n}\n\n/**\n * One tile. Exported so a caller drawing its own recharts `<Treemap>` gets the same\n * label rules.\n *\n * recharts' default cell inherits the chart-level `stroke`, an SVG presentation\n * attribute that lands on the `<svg>` root and cascades into the label — so the glyphs\n * were painted with a 1px outline ON TOP of themselves, which reads as blur. This cell\n * draws its own label with a halo in the TILE colour painted BEHIND the fill\n * (`paint-order: stroke`), which defeats any inherited stroke and keeps the text solid\n * where it overlaps a lighter or darker part of its own tile.\n */\nexport function TreemapCell({\n  depth,\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  name,\n  fill,\n  labelColor,\n  id,\n  onNodeClick,\n  redactNames,\n  nodeNote,\n  dir = \"ltr\",\n}: TreemapCellProps) {\n  // Before the early return: a hook has to run on every render of the cell.\n  const tokenHex = useChartTokenHex();\n  // Depth 0 is recharts' synthetic root, which spans the whole chart.\n  if (!depth) return null;\n  // Whole pixels: a rect on a half pixel renders its edge across two half-lit\n  // columns, and the text baseline inherits that blur.\n  const px = Math.round(x);\n  const py = Math.round(y);\n  const pw = Math.round(width);\n  const ph = Math.round(height);\n  const tileFill = fill ?? \"var(--chart-1)\";\n  const measured = measurableFill(tileFill, tokenHex);\n  const ink = labelColor ?? (measured ? textOn(measured) : \"currentColor\");\n  // The halo only on an OPAQUE fill we could measure. A translucent fill (a\n  // `color-mix(… transparent)`) composited twice — once as the tile, once as the halo\n  // over it — draws a darker ring round every glyph, which read as doubled text on the\n  // faded tiles. `none` still overrides the inherited chart `stroke`.\n  const halo = measured ? tileFill : \"none\";\n  // Below ~44x20 there is no room for a readable word, so no label at all rather than\n  // a one-letter stub bleeding over the tile edge.\n  const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? \"\", pw, LABEL_FONT_SIZE) : null;\n  // Only under a label that is itself drawn — a stray \"+12%\" on an unnamed rectangle\n  // names nothing — and only where a second baseline fits: the note's baseline sits\n  // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under\n  // the note that the label keeps under itself at the 20px floor.\n  const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;\n  const note =\n    label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;\n  // The label's START edge, 6px in from the tile's. The tiles themselves are laid out\n  // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is\n  // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then\n  // the right end in RTL, and the label grows leftwards from the tile's right edge.\n  const textX = dir === \"rtl\" ? px + pw - 6 : px + 6;\n  const activate = id != null && onNodeClick ? () => onNodeClick(id, name ?? \"\") : undefined;\n  const onKeyDown = activate\n    ? (e: KeyboardEvent<SVGGElement>) => {\n        if (e.key !== \"Enter\" && e.key !== \" \") return;\n        e.preventDefault();\n        activate();\n      }\n    : undefined;\n  return (\n    <g\n      onClick={activate}\n      onKeyDown={onKeyDown}\n      // A clickable tile is a button to a keyboard and a screen reader too; the\n      // drilldown it opens was mouse-only in the app this came from. Named by the node\n      // name, which is also why the group carries `data-private` under `redactNames`.\n      role={activate ? \"button\" : undefined}\n      tabIndex={activate ? 0 : undefined}\n      aria-label={activate ? name : undefined}\n      data-private={activate && redactNames ? \"\" : undefined}\n      cursor={activate ? \"pointer\" : undefined}\n      // CSS beats a presentation attribute, so this recolours the rect's own stroke\n      // for as long as the tile has keyboard focus.\n      className={activate ? \"outline-none [&:focus-visible>rect]:stroke-[var(--brand)]\" : undefined}\n    >\n      {/* The 2px gutter is the card showing through, not a white grid — on a dark\n          surface white lines glare harder than the tiles. */}\n      <rect\n        x={px}\n        y={py}\n        width={pw}\n        height={ph}\n        fill={tileFill}\n        stroke=\"var(--bg-surface)\"\n        strokeWidth={2}\n        rx={3}\n      />\n      {label != null && (\n        <text\n          // A plain attribute, so the host's `[data-private]` rule reaches an SVG\n          // <text> exactly as it reaches a table cell.\n          data-private={redactNames ? \"\" : undefined}\n          x={textX}\n          y={py + 15}\n          direction={dir}\n          fill={ink}\n          stroke={halo}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={LABEL_FONT_SIZE}\n          fontWeight={600}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {label}\n        </text>\n      )}\n      {note != null && (\n        <text\n          x={textX}\n          y={py + 29}\n          direction={dir}\n          fill={ink}\n          fillOpacity={0.85}\n          stroke={halo}\n          strokeWidth={2.5}\n          strokeLinejoin=\"round\"\n          paintOrder=\"stroke\"\n          fontSize={NOTE_FONT_SIZE}\n          fontWeight={500}\n          style={{ pointerEvents: \"none\" }}\n        >\n          {note}\n        </text>\n      )}\n    </g>\n  );\n}\n\n// ── Chart ─────────────────────────────────────────────────────────────────\n\n// Nodes carry their own `fill`, and `ChartTooltipContent` falls back to it for the\n// swatch, so no series config is needed.\nconst TREEMAP_CONFIG: ChartConfig = {};\n\n/**\n * The shared tooltip with the whole bubble tagged `data-private`, for names that are\n * the user's own data.\n *\n * The bubble, not just the name: `ChartTooltipContent` prints the name either from\n * `item.name` or from a config `label`, and only the config route could be tagged — but\n * a config entry keyed by a payee name is not a CSS identifier, and `ChartStyle` would\n * (rightly) refuse it. The bubble holds the name and the value, and the value cell is\n * already `data-private`, so tagging the wrapper hides nothing extra.\n *\n * recharts CLONES the `content` element to inject `active`/`payload`, so this has to BE\n * that element — a `<div>` wrapped around `<ChartTooltipContent />` in the JSX would\n * take those props itself and hand the tooltip nothing.\n */\nfunction RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent>) {\n  return (\n    <div data-private>\n      <ChartTooltipContent {...props} />\n    </div>\n  );\n}\n\nconst DEFAULT_NUMBER = new Intl.NumberFormat();\n\n/**\n * Tile chart: one rectangle per {@link TreemapNode}, sized by `value`, coloured by\n * index from the chart ramp (or by the node's own `fill`), labelled in whichever of the\n * kit's two inks measures better against it. Hover shows the name and the formatted\n * value; `onNodeClick` turns the tiles into buttons.\n *\n * Renders nothing when no node has a positive value — an empty box is a hole in the\n * card, and the caller's own sentence is the better answer there.\n *\n * Needs `recharts`, like everything behind `@eifi1/ui-kit/chart`.\n */\nexport function Treemap({\n  data,\n  valueFormatter,\n  height = 320,\n  onNodeClick,\n  redactNames = false,\n  nodeNote,\n  maxTiles,\n  colors,\n  style,\n  ...rest\n}: TreemapProps) {\n  const tokenHex = useChartTokenHex();\n  // Read off the DOM after mount: the `dir` a treemap sits under is an ancestor's\n  // attribute, and SVG text anchoring cannot follow it by CSS (see TreemapCell). Again\n  // on new data, because a map that had nothing to draw rendered no root to read.\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  useLayoutEffect(() => {\n    setDir(dirOf(rootRef.current));\n  }, [data]);\n  const ramp = colors && colors.length > 0 ? colors : tokenHex;\n  // Coloured by index into `data` AS GIVEN, before anything is dropped: a caller\n  // painting a legend or a second map from the same list must land on the same hue\n  // for the same row, and filtering first would shift every colour after a gap.\n  const nodes = data\n    .map((d, idx) => ({\n      id: d.id,\n      name: d.name,\n      size: d.value,\n      fill: d.fill ?? ramp[idx % ramp.length],\n      // recharts hands each node's fields to its cell; a field left out of this map\n      // never reaches `TreemapCell` (0.8.0 shipped `labelColor` without it — keksdose).\n      labelColor: d.labelColor,\n    }))\n    .filter((n) => Number.isFinite(n.size) && n.size > 0)\n    .slice(0, maxTiles ?? undefined);\n  if (nodes.length === 0) return null;\n\n  // The share is of what is DRAWN, so it always reads as \"of this picture\".\n  const total = nodes.reduce((acc, n) => acc + n.size, 0);\n  const format = (v: number): ReactNode => {\n    const share = total > 0 ? v / total : undefined;\n    return valueFormatter ? valueFormatter(v, share) : DEFAULT_NUMBER.format(v);\n  };\n  const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;\n  return (\n    <ChartContainer {...rest} ref={rootRef} config={TREEMAP_CONFIG} style={{ ...style, height }}>\n      {/* No chart-level `stroke`: recharts spreads it onto the <svg> root, from where\n          it inherits into every label (see TreemapCell). Each cell strokes its own rect. */}\n      <RechartsTreemap\n        data={nodes}\n        dataKey=\"size\"\n        fill=\"var(--chart-1)\"\n        isAnimationActive={false}\n        content={\n          <TreemapCell onNodeClick={onNodeClick} redactNames={redactNames} nodeNote={nodeNote} dir={dir} />\n        }\n      >\n        <ChartTooltip content={<Content hideLabel valueFormatter={format} />} />\n      </RechartsTreemap>\n    </ChartContainer>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import './tooltip.js';
-export { B as Button, a as ButtonClassesOptions, b as ButtonLinkProps, c as ButtonProps, d as ButtonSize, e as ButtonTone, f as ButtonVariant, g as Card, h as CardAction, i as CardActionProps, j as CardContent, k as CardContentProps, l as CardDescription, m as CardDescriptionProps, n as CardFooter, o as CardFooterProps, p as CardHeader, q as CardHeaderProps, r as CardProps, s as CardTitle, t as CardTitleProps, u as CardTone, P as DEFAULT_PASSWORD_REVEAL_LABELS, S as DEFAULT_TABS_LABELS, V as EmptyState, W as EmptyStateProps, X as FIELD_BASE, Y as FIELD_DISPLAY, Z as FIELD_FLOATING_PAD, _ as FIELD_INVALID, $ as FIELD_TRIGGER, a0 as FIELD_WRITABLE_LOOK, a1 as FLOATING_INPUT_CLASS, a2 as FLOATING_LABEL_CLASS, a3 as FLOATING_LABEL_STATIC, a4 as FieldChevron, a5 as FieldChevronProps, a6 as FieldHint, a7 as FieldHintProps, a8 as FieldLabel, a9 as FieldLabelProps, ah as FloatingField, ai as FloatingFieldProps, ap as IconButton, aq as IconButtonGlyphSize, ar as IconButtonLinkProps, as as IconButtonProps, at as IconButtonSize, au as IconButtonTone, av as IconButtonToneColor, aw as IconButtonVariant, ax as Input, ay as InputProps, aB as Label, aD as LabelProps, aF as PHONE_QUERY, aG as PasswordRevealLabels, aI as Select, aJ as SelectProps, aK as Spinner, aL as SpinnerProps, aN as TabItem, aO as Tabs, aP as TabsLabels, aQ as TabsProps, aR as Textarea, aS as TextareaProps, a_ as buttonClasses, b2 as resolvePasswordRevealLabels } from '../kit-labels-Mz8zZHIF.js';
+export { B as Button, a as ButtonClassesOptions, b as ButtonLinkProps, c as ButtonProps, d as ButtonSize, e as ButtonTone, f as ButtonVariant, g as Card, h as CardAction, i as CardActionProps, j as CardContent, k as CardContentProps, l as CardDescription, m as CardDescriptionProps, n as CardFooter, o as CardFooterProps, p as CardHeader, q as CardHeaderProps, r as CardProps, s as CardTitle, t as CardTitleProps, u as CardTone, P as DEFAULT_PASSWORD_REVEAL_LABELS, S as DEFAULT_TABS_LABELS, V as EmptyState, W as EmptyStateProps, X as FIELD_BASE, Y as FIELD_DISPLAY, Z as FIELD_FLOATING_PAD, _ as FIELD_INVALID, $ as FIELD_TRIGGER, a0 as FIELD_WRITABLE_LOOK, a1 as FLOATING_INPUT_CLASS, a2 as FLOATING_LABEL_CLASS, a3 as FLOATING_LABEL_STATIC, a4 as FieldChevron, a5 as FieldChevronProps, a6 as FieldHint, a7 as FieldHintProps, a8 as FieldLabel, a9 as FieldLabelProps, ah as FloatingField, ai as FloatingFieldProps, ap as IconButton, aq as IconButtonGlyphSize, ar as IconButtonLinkProps, as as IconButtonProps, at as IconButtonSize, au as IconButtonTone, av as IconButtonToneColor, aw as IconButtonVariant, ax as Input, ay as InputProps, aB as Label, aD as LabelProps, aF as PHONE_QUERY, aG as PasswordRevealLabels, aI as Select, aJ as SelectProps, aK as Spinner, aL as SpinnerProps, aN as TabItem, aO as Tabs, aP as TabsLabels, aQ as TabsProps, aR as Textarea, aS as TextareaProps, a_ as buttonClasses, b2 as resolvePasswordRevealLabels } from '../kit-labels-BHfRBbHs.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
 import './data-table-labels.js';