@eifi1/ui-kit 0.51.6 → 0.51.7

package/src/components/data-table-mobile.tsx

@@ -1,4 +1,4 @@
-import { Fragment, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, isValidElement, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react";
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from "lucide-react";
 import { FOCUS_RING } from "./focus-ring";
@@ -776,6 +776,54 @@ export function MobileRow<T>({
   );
 }
 
+// ---------- The card list's leading row (0.51.7, audit 2026-10-30 DSP-2) ----------
+
+/**
+ * DataTable's `leadingRow` on a phone: the card list's first item. It was desktop-only
+ * and the card list dropped it without a word — kastlan's inline "Add meter" editor
+ * never appeared (the page's button disabled itself, its only create path gone), and
+ * keksdose kept an `md:hidden` copy of its hidden-accounts toggle above the table.
+ *
+ * A plain `<li>`: the list is a `<ul>`, and axe's `list` rule fails an `<li
+ * role="none">` in one (checked against axe 4.13), so it is one more item, as the
+ * section headers, the reveal sentinel and the load-more footer are. It is no card — no
+ * row link, swipe or long press, no toggle in selection mode, no `rowAttributes` — and
+ * selection, the reveal and the row count work on the rows, not on the list's items.
+ *
+ * `sticky`: pinned at the top of whatever scrolls the list (the list itself under a
+ * bounded `fillHeight`, else the page), opaque over the cards passing beneath it, and
+ * over the section headers (`z-10`) — which stand under it, at the height `onHeight`
+ * reports, measured and followed (an inline editor wraps at Large text). The desktop
+ * stacks the same way: its leading row over the group bands.
+ */
+export function MobileLeadingRow({
+  sticky,
+  onHeight,
+  children,
+}: {
+  sticky: boolean;
+  /** Under `sticky`: the row's height, and each change of it. */
+  onHeight?: (height: number) => void;
+  children: ReactNode;
+}) {
+  const ref = useRef<HTMLLIElement>(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!sticky || !onHeight || !el) return;
+    const measure = () => onHeight(el.getBoundingClientRect().height);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [sticky, onHeight]);
+  return (
+    <li ref={ref} data-leading-row={sticky ? "sticky" : ""} className={cn(sticky && "sticky top-0 z-[11] bg-surface")}>
+      {children}
+    </li>
+  );
+}
+
 // ---------- Phone selection bar (0.40, keksdose live #421) ----------
 
 /**

package/src/components/data-table.tsx

@@ -8,6 +8,7 @@ import { useRangeSelection } from "./data-table-selection";
 import { columnLabel, logicalAlign, resolveDataTableLabels } from "./data-table-shared";
 import {
   MobileFilters,
+  MobileLeadingRow,
   MobileSelectBar,
   MobileSort,
   StackedFields,
@@ -67,6 +68,10 @@ export interface DataTableColumn<T> {
   key: string;
   header: ReactNode;
   cell: (row: T) => ReactNode;
+  /** What a client sort orders the column by. Strings collate in the table's `locale`
+   *  (digits as numbers, case and accents left out; 0.51.7, audit 2026-10-30 DSP-3),
+   *  numbers compare as numbers and sort before strings, `null` and `undefined` sort
+   *  last in either direction. */
   sortBy?: (row: T) => string | number | null | undefined;
   filter?: ColumnFilter<T>;
   filterBy?: (row: T) => string;
@@ -618,8 +623,10 @@ export interface DataTableProps<T> {
    */
   desktopSwipeActions?: boolean | DataTableDesktopSwipeActions<T>;
   /**
-   * Renders as a full-width row above the data rows in the desktop table
-   * (mobile has no equivalent list-row slot, so it's desktop-only). For a
+   * Renders as a full-width row above the data rows in the desktop table, and since
+   * 0.51.7 as the first item of the phone's card list (audit 2026-10-30 DSP-2: the card
+   * list dropped it, and kastlan's inline "Add meter" editor never appeared on a phone).
+   * On the phone it is no card: no row link, swipe or selection toggle. For a
    * toggle that shows/hides a slice of rows, style it as an expand/collapse
    * disclosure (chevron + label) so it reads as part of the table rather
    * than a floating control above it. See feedback #10/#11 (transactions'
@@ -629,9 +636,11 @@ export interface DataTableProps<T> {
   /**
    * 0.48 (keksdose dev #603: "it should rather be sticky, so the user can show hide them
    * everywhere on click"): pin the {@link leadingRow} under the sticky header while the
-   * rows scroll beneath both — its `top` is the header's measured height. Desktop only,
-   * as `leadingRow` is; it sticks within the table's own scroller (a bounded body:
-   * `fillHeight` or `maxBodyHeight`). Default: it scrolls with the rows.
+   * rows scroll beneath both — its `top` is the header's measured height. It sticks
+   * within the table's own scroller (a bounded body: `fillHeight` or `maxBodyHeight`).
+   * On a phone (0.51.7) it is pinned at the top of the card list's scroller (the list
+   * under a bounded `fillHeight`, else the page), with `mobileGroupBy`'s section headers
+   * under it. Default: it scrolls with the rows.
    */
   leadingRowSticky?: boolean;
   /**
@@ -953,6 +962,38 @@ export const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels = {
 
 const flipDir = (d: SortDir): SortDir => (d === "asc" ? "desc" : "asc");
 
+/**
+ * The client sort's and the derived select options' string order (audit 2026-10-30
+ * DSP-3): the table locale's collation, digits as numbers ("Item 2" before "Item 10"),
+ * case and accents left out (two values that differ only by them go to the next sort
+ * key, then keep the order given). `<` and `Array.sort()` compared UTF-16 code units —
+ * every lower-case initial after every capital, Ä/Ö/Ü after Z — on the payees, names,
+ * insurers and titles all three apps sort. Built once per table locale, not per
+ * comparison: `localeCompare` with a locale sets one up on every call, n·log n times a
+ * sort. An unknown tag (a typo in a provider's `locale`) throws a RangeError, and a
+ * sort is no reason for a table to stop rendering: the runtime's own collation then,
+ * as CountrySelect falls back.
+ */
+function sortCollator(locale: string | undefined): Intl.Collator {
+  const options: Intl.CollatorOptions = { numeric: true, sensitivity: "base" };
+  try {
+    return new Intl.Collator(locale, options);
+  } catch {
+    return new Intl.Collator(undefined, options);
+  }
+}
+
+/** Two present `sortBy` values, ascending. Strings collate; a number sorts before a
+ *  string (`<` called that pair equal, so they stayed wherever they were given); any
+ *  other pair — numbers, and a `Date` an untyped caller returns — keeps `<` / `>`. */
+function compareSortValues(a: string | number, b: string | number, collator: Intl.Collator): number {
+  const aText = typeof a === "string";
+  const bText = typeof b === "string";
+  if (aText && bText) return collator.compare(a, b);
+  if (aText !== bText) return aText ? 1 : -1;
+  return a < b ? -1 : a > b ? 1 : 0;
+}
+
 // `virtualize`'s constants (0.48.2): the band levels a group's `<tbody>` opens with.
 const NO_BANDS: readonly (1 | 2)[] = [];
 const BAND_1: readonly (1 | 2)[] = [1];
@@ -1052,6 +1093,7 @@ export function DataTable<T>({
   const storageKeyPrefix = storageKeyPrefixProp ?? providerStorageKeyPrefix ?? DEFAULT_PERSIST_PREFIX;
   const labels = useMemo(() => resolveDataTableLabels(labelOverrides, labelsProp), [labelOverrides, labelsProp]);
   const locale = useKitLocale(localeProp);
+  const collator = useMemo(() => sortCollator(locale), [locale]);
 
   // ---- Row actions ---- (data-table-row-actions.tsx)
   // The actions column joins the caller's columns; on a phone the same actions are the
@@ -1159,13 +1201,13 @@ export function DataTable<T>({
         if (v && !seen.has(v)) seen.add(v);
       }
       map[col.key] = Array.from(seen)
-        .sort()
+        .sort(collator.compare)
         .map((v) => ({ value: v, label: v }));
     }
     return map;
     // `columns` by signature — see the note above the signatures.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnSig, selectOptionsSig, rows]);
+  }, [columnSig, selectOptionsSig, rows, collator]);
 
   const filtered = useMemo(() => {
     if (serverRows) return rows;
@@ -1198,14 +1240,14 @@ export function DataTable<T>({
         if (av == null && bv == null) continue;
         if (av == null) return 1;
         if (bv == null) return -1;
-        if (av < bv) return dir === "asc" ? -1 : 1;
-        if (av > bv) return dir === "asc" ? 1 : -1;
+        const order = compareSortValues(av, bv, collator);
+        if (order !== 0) return dir === "asc" ? order : -order;
       }
       return 0;
     });
     return copy;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filtered, sorts, columnSig, serverRows]);
+  }, [filtered, sorts, columnSig, serverRows, collator]);
 
   // `paginated={false}` is expressed as "page size = everything" rather than as a
   // second code path, so slicing, the page clamp and the range summary all keep
@@ -1541,6 +1583,9 @@ export function DataTable<T>({
     if (el.parentElement) ro.observe(el.parentElement);
     return () => ro.disconnect();
   }, [phoneFill]);
+  // A sticky `leadingRow`'s height on a phone (audit 2026-10-30 DSP-2): the section
+  // headers stick under it, as the desktop's group bands stick under the desktop row.
+  const [phoneLeadHeight, setPhoneLeadHeight] = useState(0);
 
   const { mobileSlice, canRevealMoreMobile, loadMoreRef } = useMobileReveal({
     rows: sorted,
@@ -1894,10 +1939,20 @@ export function DataTable<T>({
             )}
             aria-busy={isLoading || undefined}
           >
+            {/* The desktop's leading row, as the list's first item (0.51.7, audit
+              2026-10-30 DSP-2; MobileLeadingRow says what it is and is not). */}
+            {leadingRow ? (
+              <MobileLeadingRow sticky={leadingRowSticky} onHeight={setPhoneLeadHeight}>
+                {leadingRow}
+              </MobileLeadingRow>
+            ) : null}
             {mobileGroups
               ? mobileGroups.map((g) => (
                   <Fragment key={`hb-group:${g.key}`}>
-                    <li className="sticky top-0 z-10 flex flex-wrap items-baseline justify-between gap-x-3 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur">
+                    <li
+                      className="sticky top-0 z-10 flex flex-wrap items-baseline justify-between gap-x-3 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur"
+                      style={leadingRow && leadingRowSticky ? { top: phoneLeadHeight } : undefined}
+                    >
                       <span className="min-w-0">
                         {mobileGroupLabel
                           ? mobileGroupLabel(g.key)

package/src/components/dialog-frame.tsx

@@ -25,7 +25,8 @@ export { DEFAULT_DIALOG_FRAME_LABELS };
  * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,
  * `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.
+ * 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.
  */
 export interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" | "title"> {
   /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */

package/src/components/entity-combobox.tsx

@@ -12,7 +12,7 @@ import {
   type ComboClearValue,
   type ComboOption,
 } from "./combobox-core";
-import { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
+import { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import {
   assignRef,
   EndHintRow,
@@ -248,11 +248,14 @@ export function EntityCombobox<V extends string | number, C extends ComboClearVa
   const chosen: V | null = value == null || value === clearValue ? null : (value as V);
   const selectedOption = chosen == null ? null : resolve(chosen);
   const q = query.trim();
+  // The create row's "is this name already listed" folds as the list's match does (DUP-5).
+  const locale = useKitLocale();
   const showCreate = offersCreate(
     onCreate,
     q,
     results.map((o) => o.label),
     createEmptyLabel,
+    locale,
   );
   const showClear = Boolean(clearable && chosen != null && !inert);
   /** What the closed control is showing — the second half of its accessible name. */

package/src/components/inline-entity-combobox.tsx

@@ -24,7 +24,7 @@ import {
   type ComboOption,
 } from "./combobox-core";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
-import { matchesSearch, rankMatch, searchWords } from "../lib/text-match";
+import { matchesSearch, rankMatch, sameName, searchWords } from "../lib/text-match";
 import {
   EndHintRow,
   FieldCaption,
@@ -353,6 +353,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
     createQuery,
     options.map((o) => o.label),
     createEmptyLabel,
+    locale,
   );
   const createText = createQuery ? labels.create(createQuery) : createEmptyLabel;
   // Every row the keyboard can land on: the options, then the create row — passed over
@@ -410,8 +411,9 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
         if (value != null) onChange(clearValue);
       } else {
         // A disabled option's label typed out in full is not a way round `disabled`:
-        // it is not a hit, so the text reverts like any other non-answer.
-        const hits = options.filter((o) => !o.disabled && o.label.toLowerCase() === q.toLowerCase());
+        // it is not a hit, so the text reverts like any other non-answer. A label is
+        // typed out in full as the list matches it, so "cafe" commits Café (DUP-5).
+        const hits = options.filter((o) => !o.disabled && sameName(o.label, q, locale));
         const ids = new Set(hits.map((h) => h.value));
         if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);
       }

package/src/components/list.tsx

@@ -117,7 +117,10 @@ export function List({
           className,
         )}
       >
-        {folds && !open ? rows.slice(0, Math.max(0, limit!)) : children}
+        {/* The same array folded and open: `Children.toArray` re-keys every row (`.$a`),
+            so the raw `children` on one side remounted the first rows at each toggle and
+            dropped their state — an opened row, a typed input (audit 2026-10-30 DSP-20). */}
+        {folds && !open ? rows.slice(0, Math.max(0, limit!)) : (rows ?? children)}
         {folds && (
           <li role="none" className={MORE_PAD[density]}>
             <Button

package/src/components/modal.tsx

@@ -1,4 +1,4 @@
-import { createContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import type {
   ComponentPropsWithoutRef,
@@ -230,6 +230,30 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
    * `onClose` still runs, after the param is cleared. Requires a react-router Router.
    */
   urlParam?: DialogParam;
+  /**
+   * A request the dialog started is in flight: it stays until the caller says otherwise
+   * (refactor audit 2026-10-30, DUP-3). A request that has left cannot be called back by
+   * closing the dialog, and the dialog should not pretend it can.
+   *
+   * While true the panel is `aria-busy`, and every dismissal is refused before the exit
+   * starts — the backdrop, Escape, Back, the frame's X and an `actions(close)` button —
+   * so nothing lowers and snaps back. Five dialogs used to hold Escape by hand, in an
+   * `onKeyDown`, and nothing else: a backdrop press or Android's Back closed four of them
+   * mid-request, and CancelSubscriptionConfirm, which guarded its `onClose`, lowered its
+   * panel and popped it back up.
+   *
+   * Escape still goes to whatever is open over the dialog first (a list, a tooltip); the
+   * press that reaches the dialog's own layer is taken and dropped. A refused Back puts
+   * the dialog's history entry back, so the Back after the request closes the dialog
+   * rather than leaving the page.
+   *
+   * Not held: a close the caller decides on (`open={false}`, unmounting), and — with
+   * `urlParam` — Back, which leaves the param's entry like any other navigation. A close
+   * 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.
+   */
+  busy?: 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
@@ -295,6 +319,8 @@ function ModalPanel({
   style,
   role = "dialog",
   urlParam: _urlParam,
+  busy = false,
+  "aria-busy": ariaBusy,
   ownHistoryEntry = true,
   ref,
   ...rest
@@ -336,10 +362,17 @@ function ModalPanel({
   // dismissal below goes through `requestClose`; `onClose` still does the closing, one
   // animation later. A caller that closes the dialog ITSELF — after a save, say —
   // unmounts with no exit unless it passes `open`, which is what that prop is for.
-  const { closing, requestClose } = useCloseTransition(() => {
+  const { closing, requestClose: lower } = useCloseTransition(() => {
     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
+  // (a resolved action whose caller's `isPending` trails its promise) runs again.
+  const requestClose = useCallback(() => {
+    if (!busy) lower();
+  }, [busy, 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 : () => {});
@@ -347,7 +380,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.
-  useOverlayHistory(active && ownHistoryEntry, requestClose);
+  // `held`: a Back while busy is refused, and the entry it took is put back.
+  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });
 
   // 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
@@ -423,6 +457,8 @@ function ModalPanel({
         // take the dialog role away (props-passthrough pins that).
         role={role === "alertdialog" ? "alertdialog" : "dialog"}
         aria-modal="true"
+        // A caller's own `aria-busy` (a preview still loading) is kept beside `busy`.
+        aria-busy={busy ? true : ariaBusy}
         aria-labelledby={labelledBy}
         tabIndex={-1}
         onKeyDown={handleKeyDown}

package/src/components/money-draft.ts

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { formatResult } from "../lib/calc";
 
 /**
  * The draft-and-settle loop of a money field whose store is not AmountInput's text.
@@ -49,12 +50,22 @@ export interface MoneyDraft {
  * spelling ("12.50" stays "12.50" when 12.5 comes back).
  */
 export function useMoneyDraft(value: unknown, valueAs: "number" | "string" = "number"): MoneyDraft {
-  const external = value === null || value === undefined ? "" : String(value);
+  // A number that is not finite is no amount, as on NumberField. NaN never equals itself,
+  // and the re-read below took it for a new value on every render until React threw "Too
+  // many re-renders" — MoneyField and RhfMoneyField both (refactor audit 2026-10-30,
+  // INP-11).
+  const stored = typeof value === "number" && !Number.isFinite(value) ? null : value;
+  // `formatResult`, not `String`: `String` writes exponent form below 1e-6 and from 1e21,
+  // and the commit's digits-only cleanup strips the "e" — one click into the field and
+  // away committed a float leftover of 5.1e-15 as 5.12, 1e-7 as 17 and 1e21 as 121
+  // (INP-12, BUG-11's class).
+  const external =
+    stored === null || stored === undefined ? "" : typeof stored === "number" ? formatResult(stored) : String(stored);
   const [draft, setDraft] = useState(external);
-  const [seen, setSeen] = useState<unknown>(value);
-  if (seen !== value) {
-    setSeen(value);
-    const same = valueAs === "string" ? draft === external : readAmount(draft) === amountOf(value);
+  const [seen, setSeen] = useState<unknown>(stored);
+  if (!Object.is(seen, stored)) {
+    setSeen(stored);
+    const same = valueAs === "string" ? draft === external : readAmount(draft) === amountOf(stored);
     if (!same) setDraft(external);
   }
   return {

package/src/components/money-field.tsx

@@ -11,8 +11,8 @@ export interface MoneyFieldProps extends Omit<
   /** The amount, or `null` for an empty field. */
   value: number | null;
   /**
-   * The settled amount — on blur, on Enter, on the numpad's "=" and on a calculator
-   * result; never a half-typed "1200+". Rounded to the currency's minor unit (or
+   * The settled amount — on blur, on Enter, on the numpad's "=" and once per calculator
+   * session (its "=", or the pad closing on a newer result); never a half-typed "1200+". Rounded to the currency's minor unit (or
    * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the
    * field was emptied. Not fired when the settled amount equals `value`, so an
    * Enter-then-blur saves once.

package/src/components/multi-entity-combobox.tsx

@@ -222,6 +222,7 @@ export function MultiEntityCombobox<V extends string | number>(props: MultiEntit
     q,
     results.map((o) => o.label),
     createEmptyLabel,
+    locale,
   );
   const showClear = Boolean(clearable && value.length > 0 && !inert);
 

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/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/series-chart-axes.ts

@@ -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];
 }