@eifi1/ui-kit 0.51.6 → 0.52.0

package/src/components/multi-select.tsx

@@ -48,9 +48,9 @@ export interface MultiSelectOption<V extends string | number = string | number>
  *  ids and `string[]` for string ones, and no call site casts. */
 export interface MultiSelectProps<V extends string | number = string | number>
   extends Omit<ComponentPropsWithoutRef<"div">, "onChange">, FieldHelpProps {
-  options: MultiSelectOption<V>[];
+  options: readonly MultiSelectOption<V>[];
   /** The chosen values — the select family's `value` (API-4). */
-  value?: V[];
+  value?: readonly V[];
   onChange: (next: V[]) => void;
   /** Singular/plural countable label, used when 1+ items are selected. Default:
    *  `labels.selectedCount`, else `multiSelect.selectedCount` from the provider — the
@@ -116,6 +116,10 @@ export interface MultiSelectProps<V extends string | number = string | number>
   ref?: Ref<HTMLButtonElement>;
 }
 
+/** "Select all" and "Clear": dimmed, with no hover, while there is nothing for them to do. */
+const TOOLBAR_BUTTON =
+  "rounded px-2 py-0.5 text-secondary hover:bg-hover aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:hover:bg-transparent";
+
 /**
  * Pick several of a fixed list — a filter's accounts, a comparison's data sets — with a
  * search box, "Select all" and "Clear"; nothing picked reads as "all".
@@ -158,7 +162,7 @@ export function MultiSelect<V extends string | number = string | number>(props:
     "aria-required": ariaRequired,
     ...rest
   } = props;
-  const value = useMemo<V[]>(() => valueProp ?? [], [valueProp]);
+  const value = useMemo<readonly V[]>(() => valueProp ?? [], [valueProp]);
   // The rows as the family's options — the hint is the sublabel, searched like the label.
   const comboOptions = useMemo(
     () =>
@@ -338,21 +342,29 @@ export function MultiSelect<V extends string | number = string | number>(props:
         // hints are why it was widened at all (keksdose #147).
         width={{ minRem: 16, fit: true, maxRem: 32 }}
         className={panelClassName}
+        // Reached by Tab from the search box (the panel's rows are not tab stops), and
+        // `aria-disabled` with a guarded click rather than `disabled`: a pressed "Clear"
+        // with nothing left to clear disabled itself under the focus, which dropped it to
+        // <body> — JumpCalendar's arrows are the rule (refactor audit 2026-10-30, INP-9).
         toolbar={
           <div className="flex items-center justify-between gap-2 px-2 py-1.5 text-xs">
             <button
               type="button"
-              onClick={selectAll}
-              disabled={!canSelectAll}
-              className="rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40"
+              onClick={() => {
+                if (canSelectAll) selectAll();
+              }}
+              aria-disabled={!canSelectAll || undefined}
+              className={TOOLBAR_BUTTON}
             >
               {text.selectAll}
             </button>
             <button
               type="button"
-              onClick={clearAll}
-              disabled={!canClear}
-              className="rounded px-2 py-0.5 text-secondary hover:bg-hover disabled:opacity-40"
+              onClick={() => {
+                if (canClear) clearAll();
+              }}
+              aria-disabled={!canClear || undefined}
+              className={TOOLBAR_BUTTON}
             >
               {text.clear}
             </button>

package/src/components/number-field.tsx

@@ -12,12 +12,14 @@ export interface NumberFieldProps extends Omit<
   NumberInputProps,
   "value" | "onChange" | "onCommit" | "suffix" | "invalid" | "error" | "locale"
 > {
-  /** The committed number. `null` is "no value" — shown as an empty field. */
+  /** The committed number. `null` is "no value" — shown as an empty field. So is a
+   *  number that is not finite (NaN, ±Infinity). */
   value: number | null;
   /**
-   * The parsed number, on blur or Enter — never per keystroke — and only when it
-   * differs from the last one committed. Already rounded to `digits` and clamped
-   * into `[min, max]`. `null` only when `nullable` and the field was emptied.
+   * The parsed number, on blur or Enter and once per calculator session (see
+   * {@link NumberInput}'s `onCommit`) — never per keystroke — and only when it differs
+   * from the last one committed. Already rounded to `digits` and clamped into
+   * `[min, max]`. `null` only when `nullable` and the field was emptied.
    */
   onCommit: (value: number | null) => void;
   /**
@@ -160,7 +162,7 @@ function roundTo(n: number, digits: number | undefined): number {
  */
 export function NumberField(props: NumberFieldProps) {
   const {
-    value,
+    value: stored,
     onCommit,
     onValueChange,
     digits,
@@ -179,6 +181,10 @@ export function NumberField(props: NumberFieldProps) {
     "aria-required": ariaRequired,
     ...rest
   } = props;
+  // A number that is not finite is no value. NaN in particular never equals itself, and
+  // the external-change check below re-read it as new on every render until React threw
+  // "Too many re-renders" (refactor audit 2026-10-30, INP-11).
+  const value = stored === null || Number.isFinite(stored) ? stored : null;
   const locale = useKitLocale(localeProp);
   const mark = decimalMark(locale);
   const localize = (text: string) => (mark === "," ? text.replace(/\./g, ",") : text);
@@ -201,8 +207,9 @@ export function NumberField(props: NumberFieldProps) {
 
   // Adjust state during render rather than in an effect: React re-renders at once
   // with the new draft, before anything is painted, so there is no frame showing
-  // the old text.
-  if (seen.value !== value || seen.mark !== mark || seen.digits !== digits) {
+  // the old text. `Object.is`, not `!==`, under which NaN is new on every render: the
+  // value is read above, but a NaN `digits` looped the same way.
+  if (!Object.is(seen.value, value) || seen.mark !== mark || !Object.is(seen.digits, digits)) {
     setSeen({ value, mark, digits });
     // Live mode echoing back what it was just told: the draft already says it, in
     // the typist's own spelling ("1," or "12+5"), and reformatting would fight them.

package/src/components/number-input.tsx

@@ -25,7 +25,10 @@ export interface NumberInputProps extends FieldHelpProps, DataAttributes {
    *  folded to a dot, operators kept so a typed expression survives. */
   onChange: (value: string) => void;
   /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur
-   * fields so the save always sees the resolved number, never "10+5". */
+   * fields so the save always sees the resolved number, never "10+5". And once per
+   * calculator session — its "=", or closing it on a result not committed yet — never
+   * per calculator keystroke (refactor audit 2026-10-30, INP-1: a result used to reach
+   * `onChange` only, and the host kept the number from before the calculation). */
   onCommit?: (value: string) => void;
   label?: ReactNode;
   /** Names the field when it has no visible `label` (a table cell, a phone's display
@@ -377,9 +380,11 @@ export function NumberInput(props: NumberInputProps) {
     );
   }, [suffix, label, ariaLabel, placeholder]);
 
-  const commit = () => {
+  // `text`: the calculator commits its session's result (INP-1), which on its "=" can be
+  // newer than this render's `value` — `onChange` was handed it in the same event.
+  const commit = (text: string = value) => {
     setDraft(null);
-    const next = numeric.settle(commitExpression(value));
+    const next = numeric.settle(commitExpression(text));
     if (next !== value) onChange(next);
     onCommit?.(next);
   };
@@ -495,6 +500,7 @@ export function NumberInput(props: NumberInputProps) {
               // grouping: the evaluator reads either mark, but "1.234,5" is two of them.
               value={derived}
               onChange={result}
+              onCommit={commit}
               className="self-stretch px-2.5"
               aria-label={labels?.calculatorTrigger}
               labels={labels?.calculator}

package/src/components/numpad-sheet.tsx

@@ -46,9 +46,10 @@ type PadKey = { kind: "ins"; label: string; ins: string; accent?: boolean; name?
 /** The {@link CalculatorLabels} key naming a non-digit key; digits are their glyph. */
 type PadKeyName = "plus" | "minus" | "times" | "divide" | "decimal";
 
-// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`
-// but strips the unicode minus `−`, so minus inserts an ASCII "-" while showing
-// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.
+// Insert chars `sanitizeLive` keeps as they are (`× ÷` and ASCII `+ - * /`; it maps the
+// unicode minus `−` to "-" since 0.51.7, INP-3), so minus inserts the ASCII "-" its
+// field shows while the key shows the nicer glyph. The evaluator normalises `× ÷` back
+// to `* /`.
 const PAD_KEYS: PadKey[] = [
   { kind: "ins", label: "7", ins: "7" },
   { kind: "ins", label: "8", ins: "8" },

package/src/components/picker-sheet.tsx

@@ -3,6 +3,7 @@ import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from "react";
 import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
 import { mergeRefs } from "./field-parts";
 import { CLIPS_ATTRIBUTE } from "../lib/clipping";
 import { DropdownSearchHeader } from "./dropdown";
@@ -119,7 +120,8 @@ export function PickerSheet({
   // one way out of a full-screen sheet speak the app's language without each of
   // them having to (see the prop's note in `EntityCombobox`).
   const labels = useKitLabels("pickerSheet", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel, done: doneLabel });
-  const hasFooter = (footer !== undefined && footer !== null && footer !== false) || Boolean(done);
+  // `hasContent`, so a `footer` of "" draws no empty bar (refactor audit 2026-10-30, DUP-14).
+  const hasFooter = hasContent(footer) || Boolean(done);
   useBodyScrollLock(open);
   /**
    * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:
@@ -169,14 +171,15 @@ export function PickerSheet({
    * sheet knows when its own input exists. Popping the keyboard is the POINT here,
    * where in a form dialog it is the cost.
    *
-   * **`restoreFocus` is off**, which is the uncomfortable half. Every caller in this
-   * kit opens the sheet from the field's own `onFocus` handler, so handing focus back
-   * to that field on close re-opens the sheet the user has just dismissed — a row tap
-   * would select a value and immediately put the list back over it. The field that
-   * opened it is the only thing that knows whether re-focusing it means "open"; a sheet
-   * that cannot tell must not guess. The cost is that focus lands on `<body>` after a
-   * dismissal, which on the phone this shape is for costs nothing, and on a pointer
-   * device is what happened before this change too.
+   * **`restoreFocus` is off**, which is the uncomfortable half. `Combobox` and
+   * `InlineEntityCombobox` open the sheet from the field's own `onFocus` handler, so
+   * handing focus back to that field on close re-opens the sheet the user has just
+   * dismissed — a row tap would select a value and immediately put the list back over
+   * it. The field that opened it is the only thing that knows whether re-focusing it
+   * means "open"; a sheet that cannot tell must not guess. So the caller does it in
+   * `onClose` where it can: `ComboboxPanel`'s triggers open on a click, and its
+   * `onClose` hands focus back to the trigger (0.52, refactor audit 2026-10-30, INP-7) —
+   * a screen-reader user is in exactly this layout, and <body> was where they landed.
    */
   useFocusTrap(sheetRef, {
     active: open,

package/src/components/pie-chart-labels.ts

@@ -15,6 +15,13 @@ export interface PieChartLabels {
    * German, "42%" in English) — the function only arranges them.
    */
   slice: (label: string, value: string, percent: string) => string;
+  /**
+   * One slice's accessible name under `redact` (0.52): the label and the share, with no
+   * amount. `redact` blurs every figure on screen but not the ring, and the ring's names
+   * are attributes on untagged elements, which a session replay or a redaction keyed on
+   * `[data-private]` reads as they are. `percent` as for {@link PieChartLabels.slice}.
+   */
+  sliceShare: (label: string, percent: string) => string;
   /** The caption over the donut's centre figure. */
   total: string;
   /** What a chart with nothing to draw says, when the caller passes no `empty`. */
@@ -26,6 +33,7 @@ export interface PieChartLabels {
 export const DEFAULT_PIE_CHART_LABELS: PieChartLabels = {
   slices: "Chart slices",
   slice: (label, value, percent) => `${label}: ${value} (${percent})`,
+  sliceShare: (label, percent) => `${label}: ${percent}`,
   total: "Total",
   empty: "No data",
   legend: "Categories",

package/src/components/pie-chart.tsx

@@ -12,7 +12,8 @@ import type { ComponentProps, ComponentPropsWithRef, KeyboardEvent, ReactNode }
 import { Pie, PieChart as RechartsPieChart, Sector } from "recharts";
 import type { PieLabelRenderProps, PieSectorShapeProps } from "recharts";
 import { cn } from "../lib/cn";
-import { horizontalStep } from "../lib/direction";
+import { dirOf, rovingTarget } from "../lib/direction";
+import { shareFormat } from "../lib/share-format";
 import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { paletteFor } from "../theme/chart-palette";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "./chart";
@@ -93,7 +94,8 @@ export interface PieChartProps extends Omit<ComponentPropsWithRef<"div">, "child
    * Tag every figure ON SCREEN `data-private` — the tooltip bubble, the centre and
    * `"value"` slice labels — so the host's demo-mode rule blurs it. A percentage alone
    * reveals no amount, so `"percent"` labels stay readable, and the slices themselves
-   * are not tagged: a blurred ring is no picture at all.
+   * are not tagged: a blurred ring is no picture at all. So a slice's NAME says no
+   * amount either (0.52): "Occupied: 60%" (`labels.sliceShare`), not `labels.slice`.
    */
   redact?: boolean;
   /** What to show with nothing to draw. Default: `labels.empty`. */
@@ -138,8 +140,9 @@ function RedactedTooltipContent(props: ComponentProps<typeof ChartTooltipContent
  * clockwise from twelve o'clock, the order of the legend — with ←/→ following the
  * reading direction in RTL; Home/End go to the first and last. Each slice is named
  * "Label: value (xx%)" (`labels.slice`), because a colour and an angle are nothing a
- * screen reader can say, and focusing one reads it out in the donut's centre. With
- * `onSliceClick`, Enter and Space activate it as a click does.
+ * screen reader can say — under `redact` "Label: xx%" (`labels.sliceShare`) — and
+ * focusing one reads it out in the donut's centre. With `onSliceClick`, Enter and Space
+ * activate it as a click does.
  *
  * The legend switches slices off (`legend="toggle"`); the percentages are always of
  * what is drawn. The plot is not mirrored in RTL (see `ChartContainer`); the legend
@@ -177,25 +180,14 @@ export function PieChart({
   const { scale } = useTextSize();
   const box = chartHeightProps(height);
   const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
-  const percentFormats = useMemo(
-    () => ({
-      whole: new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 }),
-      fine: new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }),
-    }),
-    [locale],
-  );
   // Memoised, like everything the sectors are drawn from: they must not be rebuilt on
   // this component's own re-renders (see `pie` below).
   const formatValue = useCallback(
     (v: number) => (formatValueProp ? formatValueProp(v) : formatWithMinus(numberFormat, v)),
     [formatValueProp, numberFormat],
   );
-  // One decimal under 10 %, where rounding to whole percents starts to lie — a slice
-  // of 0.4 % labelled "0%" says it is not there.
-  const formatShare = useCallback(
-    (share: number) => (share < 0.1 ? percentFormats.fine : percentFormats.whole).format(share),
-    [percentFormats],
-  );
+  // One decimal under 10 %, the rule Treemap says its shares by too (lib/share-format).
+  const formatShare = useMemo(() => shareFormat(locale), [locale]);
 
   const [ownHidden, setOwnHidden] = useState<ReadonlySet<string>>(() => new Set());
   const hidden = hiddenProp ?? ownHidden;
@@ -273,17 +265,11 @@ export function PieChart({
       const d = drawn[index];
       if (!d) return <Sector key={key ?? undefined} {...sector} />;
       const onKeyDown = (event: KeyboardEvent<SVGGElement>) => {
-        const step = horizontalStep(event.key, event.currentTarget);
-        let target: number | undefined;
-        if (step) target = index + step;
-        else if (event.key === "ArrowDown") target = index + 1;
-        else if (event.key === "ArrowUp") target = index - 1;
-        else if (event.key === "Home") target = 0;
-        else if (event.key === "End") target = drawn.length - 1;
+        // Round the circle: past the last slice is the first, as the eye goes.
+        const target = rovingTarget(event.key, dirOf(event.currentTarget), index, drawn.length, true);
         if (target !== undefined) {
           event.preventDefault();
-          // Round the circle: past the last slice is the first, as the eye goes.
-          refs.current[((target % drawn.length) + drawn.length) % drawn.length]?.focus();
+          refs.current[target]?.focus();
         } else if (clickable && (event.key === "Enter" || event.key === " ")) {
           event.preventDefault();
           clickRef.current?.(d.slice.key, d.slice);
@@ -297,7 +283,15 @@ export function PieChart({
           role={clickable ? "button" : "img"}
           // The first slice until the effect below moves the stop.
           tabIndex={index === 0 ? 0 : -1}
-          aria-label={labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))}
+          // Under `redact` with no amount: the ring is left untagged so it stays a picture,
+          // and its names are attributes a session replay or a redaction keyed on
+          // `[data-private]` reads as they are — "Occupied: €6.00 (60%)" told the amount the
+          // blurred centre and tooltip hid (0.52 code review; Marcel's decision).
+          aria-label={
+            redact
+              ? labels.sliceShare(d.slice.label, formatShare(d.share))
+              : labels.slice(d.slice.label, formatValue(d.value), formatShare(d.share))
+          }
           data-slice={d.slice.key}
           onKeyDown={onKeyDown}
           onFocus={() => {
@@ -313,7 +307,7 @@ export function PieChart({
         </g>
       );
     },
-    [drawn, labels, formatValue, formatShare, clickable],
+    [drawn, labels, formatValue, formatShare, clickable, redact],
   );
 
   const label = useCallback(

package/src/components/popover.tsx

@@ -37,6 +37,9 @@ export { DEFAULT_POPOVER_LABELS };
  */
 export interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
   trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;
+  /** The panel's content. `close` shuts the panel and, when focus is in it, puts focus
+   *  on the trigger before returning — so a dialog the same handler opens gives it back
+   *  there (0.52). */
   children: (close: () => void) => ReactNode;
   /**
    * The panel's width: `"18rem"` (the default) grows with the text size — the panel
@@ -125,6 +128,17 @@ export function Popover({
   // across a right-to-left calendar or filter rendered left-to-right.
   const [dir, setDir] = useState<Direction>("ltr");
   const close = () => setOpen(false);
+  // The `close` the children get also hands focus to the trigger, AT ONCE, when it is
+  // inside the panel. The trap restores it too, but only after the commit — and a dialog
+  // opened in the same handler records its own restore target during that commit's
+  // render: the menu item that is about to go. RowActions' "Delete" asks first, and the
+  // answered confirm dropped focus on <body>, mid-table (refactor audit 2026-10-30,
+  // INP-2). Escape and an outside press keep the plain close: nothing opens after them.
+  const closeFromPanel = () => {
+    const focusInside = panelRef.current?.contains(document.activeElement) ?? false;
+    setOpen(false);
+    if (focusInside) triggerRef.current?.focus();
+  };
   const toggle = () => {
     setDir(dirOf(triggerRef.current));
     setOpen((v) => !v);
@@ -242,7 +256,10 @@ export function Popover({
               className,
             )}
           >
-            {children(close)}
+            {
+              // eslint-disable-next-line react-hooks/refs -- handed to the items' handlers: it reads the trigger and the focus when an item is chosen, never while rendering
+              children(closeFromPanel)
+            }
           </div>,
           document.body,
         )}

package/src/components/reauth-dialog.tsx

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useId, useRef, useState } from "react";
-import type { KeyboardEvent, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { CurrentPasswordInput, usePromisePending } from "./danger-confirm";
@@ -41,8 +41,7 @@ export interface ReauthDialogProps {
   onSubmit: (password: string) => void | Promise<unknown>;
   /**
    * The dialog has closed: `true` after a resolved `onSubmit`, `false` for Cancel,
-   * Escape, the backdrop and Back. A dismissal while `onSubmit` is still running also
-   * answers `false`, and that call's late result is then ignored.
+   * Escape, the backdrop and Back — none of which closes it while the check runs.
    */
   onClose: (confirmed: boolean) => void;
   /**
@@ -93,9 +92,9 @@ export interface ReauthDialogProps {
  *
  * The field is a `<form>`, so Enter submits once something is typed. Focus starts in
  * the field and returns to the trigger through `Modal`'s trap. While a check runs,
- * the field is read-only, Cancel is disabled and Escape is held: a request that has
- * left cannot be cancelled by closing the dialog, and the dialog should not pretend it
- * can.
+ * the field is read-only, Cancel is disabled and the dialog is `busy` (Escape, the
+ * backdrop and Back are held, DUP-3): a request that has left cannot be cancelled by
+ * closing the dialog, and the dialog should not pretend it can.
  */
 export function ReauthDialog({
   onSubmit,
@@ -173,10 +172,7 @@ export function ReauthDialog({
       title={title ?? labels.title}
       description={description ?? labels.description}
       onClose={() => onClose(confirmed.current)}
-      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
-        if (busy && e.key === "Escape") e.preventDefault();
-      }}
-      aria-busy={busy || undefined}
+      busy={busy}
       actions={
         <ReauthActions
           formId={formId}

package/src/components/row-actions.tsx

@@ -3,6 +3,7 @@ import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
 import { MoreHorizontal } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
 import { useLargeText } from "../hooks/use-large-text";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { Popover } from "./popover";
@@ -466,7 +467,7 @@ function stopActivationKeys(e: KeyboardEvent) {
  */
 function useActionHref(action: RowAction): string | undefined {
   const reason = useCommitReason(action.commit, action.disabledReason);
-  const refused = reason !== undefined && reason !== null && reason !== false && reason !== "";
+  const refused = hasContent(reason);
   return action.href !== undefined && !action.pending && !refused ? action.href : undefined;
 }
 

package/src/components/section-nav.tsx

@@ -3,6 +3,8 @@ import { NavPills } from "./nav-pills";
 import type { NavPillItem, NavPillLinkProps } from "./nav-pills";
 import type { ReactElement, Ref } from "react";
 
+/** @deprecated 0.52 — `NavPillsProps` with `layout="scroll"`, what SectionNav wraps; removed in
+ *  0.53 (no app renders SectionNav: refactor audit 2026-10-30, MOD-5). */
 export interface SectionNavProps<T extends string> {
   /** The section's pages, each with its `href` (a pill without one is a button that
    *  calls `onSelect`). Labels short: the row is one line. */
@@ -37,6 +39,11 @@ export interface SectionNavProps<T extends string> {
  * Place it right under the page's title (`PageHeader`); the AppShell's own row of a
  * group's pages above the bar (`mobileSubNav`) is the shell-wide alternative — use one,
  * not both, for the same pages.
+ *
+ * @deprecated 0.52 — `<NavPills layout="scroll" itemClassName="min-h-11 focus-visible:ring-inset"
+ * className="md:hidden">`, the same row; removed in 0.53. kastlan, whose section pills it
+ * was made for (0.49 KIT-6), never adopted it: no app renders it (refactor audit
+ * 2026-10-30, MOD-5).
  */
 export function SectionNav<T extends string>({
   items,

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

@@ -143,8 +143,8 @@ export function oneAxis(
 
 /** One source's samples: an abscissa and the channels measured against it. */
 export interface SeriesSource {
-  x: number[];
-  channels: Record<string, number[]>;
+  x: readonly number[];
+  channels: Readonly<Record<string, readonly number[]>>;
 }
 
 /**
@@ -155,7 +155,7 @@ export interface SeriesSource {
  * has no sample the key is absent, and `connectNulls` bridges the hole with the same
  * straight segment an interpolation would have drawn — without claiming a measurement.
  */
-export function mergeSeries(sources: SeriesSource[]): Record<string, number>[] {
+export function mergeSeries(sources: readonly SeriesSource[]): Record<string, number>[] {
   const byAbscissa = new Map<number, Record<string, number>>();
   for (const source of sources) {
     source.x.forEach((value, index) => {
@@ -187,11 +187,19 @@ export function seriesKey(...parts: (string | number)[]): string {
  * padded only on the sides that are not zero — bars standing on a frame's bottom edge,
  * not floating four per cent above it on a band of air nobody asked for.
  * `undefined` when there is nothing to fit.
+ *
+ * All-zero data (a quiet period, a zoom window over empty months) is `[0, 1]`: one unit
+ * on the free side, the unit {@link padBand} pads a zero extent by. d3 maps every value
+ * of a zero-height domain to the range's midpoint, so `[0, 0]` stood the bars on a
+ * baseline in the middle of the plot, the "0" tick beside it (audit 2026-10-30 DSP-10;
+ * keksdose's weekday pattern drew seven 4 px stubs mid-card for a period with no
+ * spending).
  */
 export function anchoredBand(extent: readonly [number, number] | undefined): [number, number] | undefined {
   if (!extent) return undefined;
   const low = Math.min(0, extent[0]);
   const high = Math.max(0, extent[1]);
+  if (low === 0 && high === 0) return [0, 1];
   const pad = (high - low) * AUTO_PAD || 1;
   return [low < 0 ? low - pad : 0, high > 0 ? high + pad : 0];
 }

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

@@ -8,15 +8,18 @@
 export interface SeriesChartLabels {
   /** The button that puts a zoomed chart back to its full extent. Visible text. */
   resetZoom: string;
-  /** Accessible name of the drag surface laid over the plot. It is the only place the
-   *  gesture is explained, so it says how the drag is read and how to undo it. */
+  /** The drag-to-zoom gesture, said at the end of a zoomable chart's description (the
+   *  figure's `aria-describedby`; until 0.52 the name of the drag surface, an
+   *  `application` nothing could focus). It is the only place the gesture is explained,
+   *  so it says how the drag is read and how to undo it. */
   zoomHint: string;
   /** What a chart with nothing to draw says, when the caller passes no `empty`. */
   empty: string;
   /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */
   legend: string;
-  /** Accessible name of the group of keyboard stops a clickable chart (`onPointClick`)
-   *  lays over its bars or periods — one tab stop, arrow keys between them. */
+  /** Accessible name of the group of keyboard stops a chart lays over its bars or
+   *  periods — one tab stop, arrow keys between them; buttons with `onPointClick`, and
+   *  since 0.52 images to read without. */
   points: string;
 }