@eifi1/ui-kit 0.52.0 → 0.54.0

package/src/components/data-table-filters.ts

@@ -8,7 +8,15 @@ export type ColumnFilter<T> =
   | { type: "text"; getValue: (row: T) => string }
   | { type: "select"; getValue: (row: T) => string; options?: { value: string; label?: string }[] }
   | { type: "date"; getValue: (row: T) => string | null | undefined }
-  | { type: "number"; getValue: (row: T) => number | null | undefined };
+  | {
+      type: "number";
+      getValue: (row: T) => number | null | undefined;
+      /** `false`: no "Absolute value" box, for a figure that is never negative (a year, a
+       *  count, a size), where the box only offers a choice that changes nothing. A state
+       *  or a link that carries `abs` anyway is read without it. Default `true`. See
+       *  {@link numberFilter}. */
+      abs?: boolean;
+    };
 
 /** The current state of a column's filter (what the user has entered). */
 export type FilterValue =
@@ -46,8 +54,15 @@ export function isFilterActive(v: FilterValue | undefined): boolean {
  * match every row while the column showed its filter as active; `Number(" ")` is 0, and
  * a blank bound kept every negative row out. The popover hands in the dot-decimal text
  * its locale's marks read (`readTyped`); anything else is no bound.
+ *
+ * Exported for a server-side table (`serverPagination`), which sends the bounds to its
+ * server instead of comparing here: send what this reads, and leave out a `null`. The box
+ * holds a half-typed "-" or "5e" while the user types, and kastlan's server tables sent
+ * that text on to `col >= :bound` until they wrote this rule again for themselves (kastlan
+ * reuse audit 2026-11-02, proposal 7). And send `abs` only beside a bound: on its own it
+ * narrows nothing.
  */
-function numberBound(raw: string): number | null {
+export function numberBound(raw: string): number | null {
   if (raw.trim() === "") return null;
   const n = Number(raw);
   return Number.isFinite(n) ? n : null;
@@ -108,7 +123,9 @@ export function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValu
       const min = numberBound(state.min);
       const max = numberBound(state.max);
       if (raw == null || Number.isNaN(raw)) return min === null && max === null;
-      const x = state.abs ? Math.abs(raw) : raw;
+      // A column without the box (`abs: false`) compares the figure as it is, whatever
+      // the state says: there is nothing on screen to untick.
+      const x = state.abs && filter.abs !== false ? Math.abs(raw) : raw;
       if (min !== null && x < min) return false;
       if (max !== null && x > max) return false;
       return true;
@@ -204,9 +221,12 @@ export function decodeFilterValueOfType(type: FilterValue["type"], raw: string):
   }
 }
 
-/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */
+/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. A number
+ *  filter without the "Absolute value" box (`abs: false`) drops a link's `!`: kept, a
+ *  server-side table would send `abs` that nobody can see or untick. */
 export function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue {
-  return decodeFilterValueOfType(filter.type, raw);
+  const value = decodeFilterValueOfType(filter.type, raw);
+  return value.type === "number" && filter.type === "number" && filter.abs === false ? { ...value, abs: false } : value;
 }
 
 // ---------- Filter builders ----------
@@ -244,9 +264,17 @@ export function dateFilter<T>(getValue: (row: T) => string | null | undefined):
   return { type: "date", getValue };
 }
 
-/** A min/max (and absolute-value) filter over a number. */
-export function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T> {
-  return { type: "number", getValue };
+/**
+ * A min/max (and absolute-value) filter over a number. `{ abs: false }` leaves out the
+ * "Absolute value" box, for a figure that is never negative — a year, a count, a size —
+ * where it only offers a choice that changes nothing (kastlan reuse audit 2026-11-02,
+ * proposal 7: its server tables drew it under construction years and file sizes).
+ */
+export function numberFilter<T>(
+  getValue: (row: T) => number | null | undefined,
+  options?: { abs?: boolean },
+): ColumnFilter<T> {
+  return options?.abs === false ? { type: "number", getValue, abs: false } : { type: "number", getValue };
 }
 
 /**

package/src/components/date-field.tsx

@@ -137,7 +137,7 @@ export interface DatePickerBaseProps extends Omit<ComponentPropsWithoutRef<"div"
    *
    * Off by default: the caption becomes one more stop in the panel's tab order, which a
    * 0.x minor does not spring on a form. Works in the popover and in
-   * `DateRangePicker`'s phone sheet alike, beside presets and in `commit="apply"`
+   * `DateRangePicker`'s phone sheet alike, beside presets and with `apply`
    * (a preset picked while the months are open goes back to the days, on its start).
    *
    * Why not a two-month panel (`months={2}`) instead, or beside it: for a twelve-month

package/src/components/date-picker.tsx

@@ -16,7 +16,6 @@ import { PanelCalendar } from "./jump-calendar";
 export type { DateTriggerAttributes } from "./date-field";
 export { DateRangePicker } from "./date-range-picker";
 export type {
-  DateRangeCommit,
   DateRangeDraftSummary,
   DateRangePickerPreset,
   DateRangePickerProps,

package/src/components/date-range-picker.tsx

@@ -40,17 +40,6 @@ export interface DateRangePickerPreset {
   to: string;
 }
 
-/**
- * The 0.x values of DateRangePicker's `commit`, when it was the panel's mode:
- * `"immediate"` is `apply` left out, `"apply"` is `apply`. See
- * {@link DateRangePickerProps.apply}.
- *
- * @deprecated 0.52 — DateRangePicker's `apply` (`commit="apply"` → `apply`, `"immediate"`
- * → nothing); removed in 0.53. `commit` is the write lock's opt-in on every other kit
- * control, and since 0.52 on this one too (refactor audit 2026-10-30, API-3).
- */
-export type DateRangeCommit = "immediate" | "apply";
-
 export interface DateRangePickerProps extends DatePickerBaseProps {
   from: string;
   to: string;
@@ -89,8 +78,7 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
    *    must never escape the panel.
    *
    * `commit="apply"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write
-   * lock's prop on every other kit control. The old spelling still works for 0.52 and
-   * goes in 0.53 ({@link DateRangeCommit}); `apply` wins where both are given.
+   * lock's prop on every other kit control. The old spelling went in 0.53.
    */
   apply?: boolean;
   /**
@@ -100,12 +88,10 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
    * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with
    * its own Save stays editable under the lock — leave this off there.
    *
-   * The strings `"immediate"` and `"apply"` are the panel's mode, the 0.x meaning of this
-   * prop: deprecated, read as `apply` for one minor, removed in 0.53 — see
-   * {@link DateRangeCommit}. They cannot be taken for a scope, which is a boolean or an
-   * object.
+   * The strings `"immediate"` and `"apply"`, the panel's mode in 0.x, went in 0.53
+   * (deprecated in 0.52): `apply` is the mode.
    */
-  commit?: CommitScope | DateRangeCommit;
+  commit?: CommitScope;
   /**
    * Draw the trigger yourself. keksdose's report range field
    * (reports/report-range-field.tsx, "Why this is app-level") is why: its trigger
@@ -428,10 +414,8 @@ export function DateRangePicker(props: DateRangePickerProps) {
   const locale = useKitLocale(localeProp);
   const text = useDatePickerLabels(clearLabel, undefined, undefined);
   const render = useTriggerFormat("dateRangePicker", locale, formatOptions, formatValue);
-  // `commit` is two props until 0.53: a string is the deprecated mode, anything else
-  // the write lock's scope (API-3).
-  const drafting = apply ?? commit === "apply";
-  const lock = useLockReason(typeof commit === "string" ? undefined : commit, disabledReason);
+  const drafting = apply ?? false;
+  const lock = useLockReason(commit, disabledReason);
   const locked = lock.locked;
   const messages = useFieldMessages({
     hint,

package/src/components/dialog-frame.tsx

@@ -26,7 +26,9 @@ export { DEFAULT_DIALOG_FRAME_LABELS };
  * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`
  * (round 0.35 R4): the panel, the `role="dialog"` element the frame's header, body and
  * actions sit in. `busy` too (DUP-3): it holds the frame's X and the `close` that
- * `actions` and `headerActions` receive, since both are the `Modal`'s own close.
+ * `actions` and `headerActions` receive, since both are the `Modal`'s own close. And
+ * `held` (keksdose audit follow-up, 2026-11-01), which holds the same and shows the X
+ * disabled — see {@link ModalProps.held}.
  */
 export interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" | "title"> {
   /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */
@@ -187,7 +189,7 @@ export function DialogFrame({
             <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />
           )}
         </div>
-        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} />}
+        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} held={modal.held} />}
       </div>
       {hasBody && (
         <div
@@ -210,8 +212,10 @@ export function DialogFrame({
 }
 
 /** The X. A component of its own so it can read the panel's animated close, which
- *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */
-function FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {
+ *  only exists INSIDE the `Modal` (the frame's own body runs outside it). Disabled
+ *  while `held`; under `busy` it stays enabled and the `Modal` drops its press (see
+ *  {@link ModalProps.held} for why the two differ). */
+function FrameClose({ label, onClose, held = false }: { label?: string; onClose: () => void; held?: boolean }) {
   const close = useContext(ModalCloseContext) ?? onClose;
   const labels = useKitLabels(
     "dialogFrame",
@@ -222,9 +226,13 @@ function FrameClose({ label, onClose }: { label?: string; onClose: () => void })
     <button
       type="button"
       onClick={close}
+      disabled={held}
       aria-label={labels.close}
       className={cn(
         "-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary",
+        // The kit's disabled look (Button, IconButton), and the resting look pinned under
+        // `disabled:hover:` so a refused X does not light up under the pointer.
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted",
         FOCUS_RING,
       )}
     >

package/src/components/mini-calendar.tsx

@@ -8,6 +8,7 @@ import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring";
 import { horizontalStep } from "../lib/direction";
 import { useAnnounce } from "../hooks/use-announce";
 import { addMonthsClamped, localeWeekStart, monthKey, parseIsoDate, sameYmd, toLocalIso } from "../lib/dates";
+import { dateFormatter } from "../lib/intl-cache";
 import { useKitLabels, useKitLocale, useKitWeekStart, type LabelOverride } from "../i18n/kit-labels";
 import { DEFAULT_MINI_CALENDAR_LABELS } from "./mini-calendar-labels";
 
@@ -355,8 +356,10 @@ export function MiniCalendar({
   // The first letter only, not CSS `capitalize`, which upper-cased every word: Spanish
   // read "Septiembre De 2026" and Hungarian "2026. Szeptember" (refactor audit
   // 2026-10-30, DUP-11) — while the same panel with `monthJump` read them right.
-  const monthLabel = upperFirst(firstOfMonth.toLocaleDateString(locale, { month: "long", year: "numeric" }), locale);
-  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);
+  // Both through the kit's formatter cache: every day cell names its date, which was a
+  // formatter per cell and render (keksdose audit follow-up, 2026-11-01).
+  const monthLabel = upperFirst(dateFormatter(locale, { month: "long", year: "numeric" }).format(firstOfMonth), locale);
+  const formatDay = (d: Date) => dateFormatter(locale, DAY_NAME_FORMAT).format(d);
 
   // Weekday labels via locale, from the week's first day: the narrow one for the
   // column head, the long one as its accessible name — "M" is the same letter for

package/src/components/modal.tsx

@@ -257,8 +257,35 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
    * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one
    * made from an effect that depends on that close (ReauthDialog's on a resolved submit)
    * runs again once `busy` turns false, because the close changes with it.
+   *
+   * A dialog that must not be dismissed while NOTHING runs — a code shown once — wants
+   * {@link ModalProps.held} instead: the same hold without the request.
    */
   busy?: boolean;
+  /**
+   * Hold the dialog open: every dismissal `busy` refuses is refused — the backdrop,
+   * Escape, Back, the frame's X and an `actions(close)` button — but no request is
+   * claimed: the panel is not `aria-busy`. For a dialog the user must not lose by
+   * accident while nothing is in flight (keksdose audit follow-up, 2026-11-01): keksdose's
+   * one-time recovery code (auth/recovery-code-pane.tsx) refused in its own `onClose`,
+   * which comes after the exit has started and cannot hold Back — the first Back spent
+   * the dialog's history entry, and the second left the page, and the code with it.
+   * Held, a refused Back puts the entry back, so every Back is held, not only the first.
+   * The refusal is silent, as under `busy` — `onClose` is not called — so what the
+   * dialog is waiting for is said up front, not after a refused press.
+   *
+   * The way out is a close the CALLER decides on, which is never held: `open={false}`
+   * (the exit still plays) or unmounting, from the dialog's own "I have saved it" button.
+   * Not the `close` that `actions` and `headerActions` receive — that is the dialog's
+   * own dismissal, and held like the rest.
+   *
+   * `DialogFrame`'s X is DISABLED while held, where under `busy` it stays enabled and its
+   * press is dropped: a request is over in a moment, a hold lasts until the user acts,
+   * and an X that does nothing for that long reads as broken. Disabled rather than
+   * hidden, so the header does not reflow the moment the hold lifts; a caller that wants
+   * it gone passes `closeButton={!held}`. Independent of `busy`: either one holds.
+   */
+  held?: boolean;
   /**
    * The PANEL — the `role="dialog"` element the rest of the props go on, not the
    * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on
@@ -325,6 +352,7 @@ function ModalPanel({
   role = "dialog",
   urlParam: _urlParam,
   busy = false,
+  held = false,
   "aria-busy": ariaBusy,
   ownHistoryEntry = true,
   ref,
@@ -371,13 +399,14 @@ function ModalPanel({
     setDismissed(true);
     onClose();
   });
-  // `busy` (DUP-3) refuses HERE, before `lower` starts the exit: a refusal in the
-  // caller's `onClose` comes 220ms too late, after the panel has already gone down.
-  // A new function when `busy` flips, so a close asked for from an effect while busy
+  // `busy` (DUP-3) and `held` refuse HERE, before `lower` starts the exit: a refusal in
+  // the caller's `onClose` comes 220ms too late, after the panel has already gone down.
+  // A new function when the hold flips, so a close asked for from an effect while busy
   // (a resolved action whose caller's `isPending` trails its promise) runs again.
+  const holding = busy || held;
   const requestClose = useCallback(() => {
-    if (!busy) lower();
-  }, [busy, lower]);
+    if (!holding) lower();
+  }, [holding, lower]);
   // A panel on its way out after `open` turned false is already closed: a press on
   // its fading backdrop must not report a second close.
   const backdropClose = useBackdropClose(active ? requestClose : () => {});
@@ -385,8 +414,8 @@ function ModalPanel({
   // this the only way out of a dialog is finding its close button — and Back, the
   // gesture everyone reaches for, navigated the page underneath instead (#172).
   // Held only while open: a closed `open={false}` dialog must not own a history entry.
-  // `held`: a Back while busy is refused, and the entry it took is put back.
-  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });
+  // `held`: a Back while busy or held is refused, and the entry it took is put back.
+  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: holding });
 
   // Through the shared hook and not by hand: this component's own save/restore copy
   // was one half of the pair that left the page permanently unscrollable when a dialog

package/src/components/nav-pills.tsx

@@ -59,7 +59,7 @@ export interface NavPillsProps<T extends string> extends Omit<
    * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps
    * them on ONE row that scrolls sideways — faded at a cut edge, the current pill
    * scrolled into view (the row only, never the page) — for a strip that must stay one
-   * line high, as {@link SectionNav} under a page title on a phone.
+   * line high, as a section's pages under a page title on a phone.
    */
   layout?: "wrap" | "scroll";
   /** The `<nav>` (or the `<div role="group">`) — hence `HTMLElement` (0.34, API-2,

package/src/components/number-input.tsx

@@ -222,9 +222,10 @@ const asTyped = (text: string) => text;
 
 // ── The money guard (kastlan 5, Kurvenschmiede) ─────────────────────────────────
 
-// The codes the kit's own currency pickers offer, as whole words: "Amount (CHF)",
-// "EUR", "Kosten CHF". Not every ISO 4217 code — "ALL", "TOP" and "PEN" are codes too,
-// and an upper-case label would trip on them.
+// The codes the kit's own currency pickers know, as whole words: "Amount (CHF)",
+// "EUR", "Kosten CHF". A `retired` one too (BGN): a label that names it is still money,
+// whatever the pickers offer. Not every ISO 4217 code — "ALL", "TOP" and "PEN" are codes
+// too, and an upper-case label would trip on them.
 const CURRENCY_CODE = new RegExp(`(?:^|[^A-Za-z])(?:${CURRENCIES.map((c) => c.code).join("|")})(?![A-Za-z])`);
 // Symbols no unit of measure is written with. Not "kr", "R" or "Fr": those are words
 // and units as often as they are money.

package/src/components/series-chart-axes.ts

@@ -212,7 +212,12 @@ export function anchoredBand(extent: readonly [number, number] | undefined): [nu
  * it in its neighbour's colour on each click. Resolving the colours on the full list
  * and filtering after keeps each series in the colour its legend entry shows.
  */
-export function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[] {
+// Generic so a typed list comes back typed (0.53): a chart of `Month` rows takes it, and
+// its `dot`s still read `point.row` as a `Month`.
+export function visibleSeries<TRow extends object>(
+  series: readonly SeriesChartSeries<TRow>[],
+  hidden: ReadonlySet<string>,
+): SeriesChartSeries<TRow>[] {
   return series
     .map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) }))
     .filter((entry) => !hidden.has(entry.key));

package/src/components/series-chart.tsx

@@ -129,7 +129,14 @@ import { useChartEdge, useEdgesInForce } from "./chart-edge";
 import { cn } from "../lib/cn";
 import { formatWithMinus } from "../lib/minus";
 
-export interface SeriesChartSeries {
+/**
+ * One line, area or bar run of a {@link SeriesChart}.
+ *
+ * `TRow` is the chart's row type (0.53, keksdose after 0.52), and only `dot` reads it: its
+ * `point.row` is that type. Without a type argument a series is what it was, and a chart
+ * of typed rows still takes it — see {@link SeriesChartProps}.
+ */
+export interface SeriesChartSeries<TRow extends object = object> {
   /** The row key this line reads — and the `--color-<key>` it is painted with, so it
    *  must be a CSS identifier. Build keys out of data with {@link seriesKey}. */
   key: string;
@@ -177,8 +184,9 @@ export interface SeriesChartSeries {
    * point: `true` for the default dot, `false`/`null` for none, or any SVG node drawn
    * as-is at `point.cx`/`point.cy` — a buy/sell marker on keksdose's paper price.
    * Never called for a point with no value. Bars have no points, and ignore it.
+   * `point.row` is the caller's own row, typed as the chart's rows are (0.53).
    */
-  dot?: boolean | ((point: SeriesChartPoint) => ReactNode);
+  dot?: boolean | ((point: SeriesChartPoint<TRow>) => ReactNode);
   /** Line (or area outline) weight in px. Default 2, or 1.5 for a `step`. keksdose
    *  draws the subject of a chart at 2.5 and the reference it is read against at 1.5. */
   strokeWidth?: number;
@@ -213,14 +221,16 @@ export interface SeriesChartSeries {
 /** What a series draws. See {@link SeriesChartSeries.type}. */
 export type SeriesChartType = "line" | "bar" | "area";
 
-/** One point of a series, as a `dot` function is handed it. */
-export interface SeriesChartPoint {
+/** One point of a series, as a `dot` function is handed it. `TRow` is the chart's row
+ *  type (0.53); without one, `row` is a {@link SeriesChartRow}, as before. */
+export interface SeriesChartPoint<TRow extends object = object> {
   /** The series' key. */
   key: string;
   /** The row's position in `rows`. */
   index: number;
-  /** The caller's own row, with everything the chart did not plot still in it. */
-  row: SeriesChartRow;
+  /** The caller's own row, with everything the chart did not plot still in it: the very
+   *  object in `rows`, typed as `rows` is. */
+  row: SeriesChartRowOf<TRow>;
   /** The abscissa in the caller's terms: the number, the category, or (time) a Date. */
   x: SeriesChartXValue;
   value: number;
@@ -233,9 +243,32 @@ export interface SeriesChartPoint {
 
 /** A row of a series chart: one abscissa value and the series' values at it. Anything
  *  else in it (a raw ISO period for a drilldown) rides along untouched and is handed
- *  back in {@link SeriesChartPoint.row} and {@link SeriesChartHit.row}. */
+ *  back in {@link SeriesChartPoint.row} and {@link SeriesChartHit.row} — typed as the
+ *  caller's rows are since 0.53, and as this where their type names no keys. */
 export type SeriesChartRow = Readonly<Record<string, unknown>>;
 
+/**
+ * The row a hit or a point hands back, for a chart whose rows are `TRow[]` (0.53, keksdose
+ * after 0.52): `TRow` itself, so a drilldown reads `hit.row.rawPeriod` as the string it
+ * is. A {@link SeriesChartRow} where `TRow` names no keys — `object`, the default, which
+ * keeps `SeriesChartHit` and `SeriesChartPoint` without a type argument what they were, and
+ * the `object[]` rows an app passes today; `{}`; and `any` or `never` (`rows={[]}`), which
+ * are both assignable to `null` while no object type is.
+ *
+ * Both tests take `TRow` in the CHECKED position, never in the `extends` one, so TypeScript
+ * measures every type below as covariant in it (`SeriesChartSeries`, through `dot`'s
+ * parameter, contravariant) and relates two of them by their type arguments alone: a
+ * `SeriesChartHit<Month>` is a `SeriesChartHit`, and a handler or a series typed without an
+ * argument fits a chart of `Month` rows, though an interface has no index signature and is
+ * not, field by field, a `SeriesChartRow`. Written `object extends TRow ?`, the type is
+ * invariant and both of those stop type-checking.
+ */
+type SeriesChartRowOf<TRow> = [TRow] extends [null]
+  ? SeriesChartRow
+  : [keyof TRow] extends [never]
+    ? SeriesChartRow
+    : TRow;
+
 /** An abscissa value: a number (`x.type: "number"`), a category (a string, a number or
  *  a Date standing for a period), or a time (a Date, epoch ms or an ISO string). */
 export type SeriesChartXValue = number | string | Date;
@@ -551,29 +584,42 @@ export interface SeriesChartMarker {
   r?: number;
 }
 
-/** What a click on the plot picked. */
-export interface SeriesChartHit {
+/** What a click on the plot picked. `TRow` is the chart's row type (0.53); without one,
+ *  `row` is a {@link SeriesChartRow}, as before. */
+export interface SeriesChartHit<TRow extends object = object> {
   /** The row's position in `rows`. */
   index: number;
-  /** The caller's own row — with its `rawPeriod`, id or whatever the drilldown needs. */
-  row: SeriesChartRow;
+  /** The caller's own row — with its `rawPeriod`, id or whatever the drilldown needs: the
+   *  very object in `rows`, typed as `rows` is, so it is read without a cast. */
+  row: SeriesChartRowOf<TRow>;
   x: SeriesChartXValue;
   /** The series, when the click landed ON a bar. A click anywhere else picks the slot
    *  (the period), not a series. */
   key?: string;
 }
 
-export interface SeriesChartProps {
+/**
+ * The props of {@link SeriesChart} and {@link StaticSeriesChart}, for rows of type `TRow`.
+ *
+ * `TRow` is inferred from `rows` (0.53, keksdose after 0.52), and what the chart hands back
+ * — `hit.row` in `onPointClick`, `point.row` in a series' `dot` — is that type, so a
+ * drilldown reads its own fields without narrowing an `unknown`. Without a type argument,
+ * `SeriesChartProps` is what it was: any object is a row, and a row comes back as a
+ * {@link SeriesChartRow}. So is `ComponentProps<typeof SeriesChart>`, which reads the
+ * constraint, `object`. A series, a handler or a `dot` typed without an argument fits a
+ * chart of typed rows too.
+ */
+export interface SeriesChartProps<TRow extends object = object> {
   /**
    * One row per abscissa value. A missing key is a hole (see `connectNulls`).
    *
    * Any object (0.52, refactor audit 2026-10-30, API-2): an `interface` has no index
    * signature, so a typed sweep did not fit `SeriesChartRow` and Kurvenschmiede cast its
    * Ackermann rows `as unknown as Record<string, number>[]`. The chart reads the keys
-   * `series` and `x` name, and hands the row back as {@link SeriesChartRow}.
+   * `series` and `x` name, and hands the row back typed as these are (0.53).
    */
-  rows: readonly object[];
-  series: readonly SeriesChartSeries[];
+  rows: readonly TRow[];
+  series: readonly SeriesChartSeries<TRow>[];
   /** Default: one untitled axis, `"y"`. */
   axes?: readonly SeriesChartAxis[];
   x?: SeriesChartX;
@@ -628,7 +674,7 @@ export interface SeriesChartProps {
    * a chart without bars, named "period — series: value", behind ONE tab stop. With this
    * they are buttons that Enter and Space activate; without, images to read.
    */
-  onPointClick?: (hit: SeriesChartHit) => void;
+  onPointClick?: (hit: SeriesChartHit<TRow>) => void;
   /** Where the tooltip may go: for a chart inside a scroll wrapper. See
    *  {@link SeriesChartTooltip}. */
   tooltip?: SeriesChartTooltip;
@@ -760,8 +806,10 @@ export interface SeriesLegendAxes {
  * series whose axis is not drawn says the unit that axis would have: "Velocity (mm/s)"
  * — see {@link SeriesChartAxis.unit}. Without them, the labels are as given.
  */
-export function seriesLegendEntries(
-  series: readonly SeriesChartSeries[],
+export function seriesLegendEntries<TRow extends object>(
+  // Generic only so a typed list fits (0.53): `SeriesChartSeries<Month>` is not a
+  // `SeriesChartSeries`, whose `dot` would be handed rows that are not `Month`s.
+  series: readonly SeriesChartSeries<TRow>[],
   { axes, budgeted }: SeriesLegendAxes = {},
 ): LegendEntry[] {
   const undrawn = new Map<string, string | undefined>();
@@ -1819,7 +1867,12 @@ const ZoomablePlot = withChartZoom(SeriesPlot);
  * category or time chart otherwise re-maps every row on every render, and `maxRows`'
  * envelope would be worked out again with it.
  */
-function usePlotProps(props: SeriesChartProps): PlotProps {
+function usePlotProps<TRow extends object>(typed: SeriesChartProps<TRow>): PlotProps {
+  // `TRow` types only what the caller is handed back, and that is its own row objects,
+  // untouched (0.53): the plot reads them as the `object` rows they are. Through `unknown`
+  // because the two are not comparable for an unresolved `TRow`: `SeriesChartSeries` is
+  // contravariant in it (its `dot` is handed rows) and `rows` covariant.
+  const props = typed as unknown as SeriesChartProps;
   const x = props.x ?? {};
   const { rows } = props;
   const { type, key } = x;
@@ -1833,7 +1886,7 @@ function usePlotProps(props: SeriesChartProps): PlotProps {
  * button. For a thumbnail, a print view, or a chart the consumer wraps in its own
  * interaction.
  */
-export function StaticSeriesChart(props: SeriesChartProps) {
+export function StaticSeriesChart<TRow extends object = object>(props: SeriesChartProps<TRow>) {
   return <SeriesPlot {...usePlotProps(props)} />;
 }
 
@@ -1842,8 +1895,12 @@ export function StaticSeriesChart(props: SeriesChartProps) {
  * axes), double-click or press the reset button to go back; wrap several in
  * `SharedXZoom` to move their x windows together. Which axes zoom depends on the marks
  * — see {@link SeriesChartProps.zoomAxes}.
+ *
+ * Generic in its rows (0.53): `hit.row` and a `dot`'s `point.row` are typed as `rows` is —
+ * see {@link SeriesChartProps}. A plain function, so the generic survives: a `memo` or a
+ * `forwardRef` around it would read `TRow` as its constraint.
  */
-export function SeriesChart(props: SeriesChartProps) {
+export function SeriesChart<TRow extends object = object>(props: SeriesChartProps<TRow>) {
   // The zoom fits the PLOTTED rows — slot indices and epoch ms, not the caller's labels.
   return <ZoomablePlot {...usePlotProps(props)} />;
 }

package/src/components/stat-tile.tsx

@@ -229,8 +229,27 @@ export interface StatTileProps extends Omit<ComponentPropsWithRef<"div">, "child
   /** Anything below the rest — a progress bar, a link row. */
   footer?: ReactNode;
   /** Tag every figure `data-private`, so the host's demo-mode rule blurs it — the
-   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry. */
+   *  same attribute `Tooltip redact` and the chart tooltip's value cell carry.
+   *  The figures are the tile's own: value, delta, projection, sub-values and the
+   *  trend. The `description` and `footer` are the app's nodes and stay readable;
+   *  see {@link StatTileProps.descriptionSensitive} for the ones that carry an amount. */
   sensitive?: boolean;
+  /**
+   * Tag the `description` line `data-private` too, as `sensitive` tags the figures.
+   * For a description that names an amount: keksdose's tax reserve tile states its
+   * basis there ("…applied to €42,000"), and its report KpiCard puts a `hintSensitive`
+   * hint there — both tag their own `<span data-private>` today
+   * (reports/tabs/tax-tab.tsx, reports/charts/kpi-card.tsx). Separate from
+   * `sensitive`, so a description of words ("Last 12 months") on a money tile stays
+   * readable in demo mode. keksdose audit follow-up, 2026-11-01.
+   */
+  descriptionSensitive?: boolean;
+  /**
+   * Tag the `footer` `data-private`, as `sensitive` tags the figures — for a footer
+   * that carries an amount: keksdose's tax reserve tile's shortfall line ("Set aside
+   * €1,200 more…"), which it tags by hand. keksdose audit follow-up, 2026-11-01.
+   */
+  footerSensitive?: boolean;
   /** Skeleton in place of the value; delta, sub-values and trend are withheld. */
   loading?: boolean;
   /** `"sm"` for dense grids (a metrics wall); `"md"` the default KPI. */
@@ -317,6 +336,8 @@ export function StatTile({
   icon,
   footer,
   sensitive = false,
+  descriptionSensitive = false,
+  footerSensitive = false,
   loading = false,
   size = "md",
   variant = "card",
@@ -551,7 +572,11 @@ export function StatTile({
       )}
 
       {deltaNode}
-      {description != null && <div className="mt-1 text-xs text-muted">{description}</div>}
+      {description != null && (
+        <div data-private={descriptionSensitive ? "" : undefined} className="mt-1 text-xs text-muted">
+          {description}
+        </div>
+      )}
       {!large && graphic && <div className="mt-2">{graphic}</div>}
 
       {!loading && ((large && projections.length > 0) || (subValues && subValues.length > 0)) && (
@@ -572,7 +597,11 @@ export function StatTile({
         </div>
       )}
 
-      {footer != null && <div className="mt-2">{footer}</div>}
+      {footer != null && (
+        <div data-private={footerSensitive ? "" : undefined} className="mt-2">
+          {footer}
+        </div>
+      )}
     </Card>
   );
 }

package/src/components/treemap-labels.ts

@@ -13,13 +13,18 @@ export interface TreemapLabels {
    * `valueFormatter` when that returns text, else as the number in the provider's
    * locale; `share` is the tile's share of what is drawn, already a formatted percent
    * ("60 %" in German, "60%" in English) — the function only arranges them.
+   *
+   * `share` is `""` when the map's `shareInValue` says the formatter's text already holds
+   * it (0.53): leave out whatever frames it, as every catalogue drops its " (share)" —
+   * "Migros: CHF 412.30 · 12%", not "… · 12% ()".
    */
   tile: (name: string, value: string, share: string) => string;
   /**
    * A group's accessible name (0.52, `TreemapNode.children`): its frame is a stop of the
    * map's keyboard before its tiles, so a reader hears the group and its total once, on the
    * way in. `value` and `share` as for {@link TreemapLabels.tile}, of the group's tiles
-   * together; the word "group" tells it from a tile of the same shape.
+   * together, the share `""` under `shareInValue` as there; the word "group" tells it from
+   * a tile of the same shape.
    */
   group: (name: string, value: string, share: string) => string;
   /**
@@ -32,8 +37,11 @@ export interface TreemapLabels {
   inGroup: (name: string, group: string) => string;
 }
 
+// The share in brackets only when there is one: `""` under the map's `shareInValue` (0.53,
+// keksdose after 0.52), which the catalogues in src/i18n/locales follow, each in its own
+// typography.
 export const DEFAULT_TREEMAP_LABELS: TreemapLabels = {
-  tile: (name, value, share) => `${name}: ${value} (${share})`,
-  group: (name, value, share) => `${name}, group: ${value} (${share})`,
+  tile: (name, value, share) => `${name}: ${value}${share ? ` (${share})` : ""}`,
+  group: (name, value, share) => `${name}, group: ${value}${share ? ` (${share})` : ""}`,
   inGroup: (name, group) => `${name}, in ${group}`,
 };