@eifi1/ui-kit 0.51.6 → 0.52.0

package/src/billing/plan-card.tsx

@@ -14,6 +14,8 @@ import { Button } from "../components/button";
 import { DialogFrame } from "../components/dialog-frame";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
+import { dialogClose } from "./dialog-close";
+import type { WithDialogClose } from "./dialog-close";
 import { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from "./plan-price";
 import type { BillingCurrency, BillingInterval, PlanPrices } from "./plan-price";
 
@@ -489,9 +491,7 @@ export function PlanPicker({
       {permanentGrant && !switching && (
         <GrantWarningConfirm
           open={warned !== null}
-          onOpenChange={(open) => {
-            if (!open) setWarned(null);
-          }}
+          onClose={() => setWarned(null)}
           onConfirm={() => {
             if (warned) onChoose(warned);
           }}
@@ -502,11 +502,16 @@ export function PlanPicker({
   );
 }
 
-export interface GrantWarningConfirmProps {
+/** {@link GrantWarningConfirmProps} before one of its two close props is required. */
+interface GrantWarningConfirmFields {
   /** Shown, controlled. */
   open: boolean;
-  /** `false` on "Back", Escape, the backdrop — and after "Buy anyway". */
-  onOpenChange: (open: boolean) => void;
+  /** "Back", Escape, the backdrop — and after "Buy anyway". 0.52: every other kit
+   *  dialog's `onClose` (CONTRIBUTING §4; refactor audit 2026-10-30, API-5). */
+  onClose?: () => void;
+  /** @deprecated 0.52 — `onClose`, as every other kit dialog; removed in 0.53. Called with
+   *  `false` when there is no `onClose`. */
+  onOpenChange?: (open: boolean) => void;
   /** "Buy anyway": the app opens its checkout. The dialog closes itself after it. */
   onConfirm: () => void;
   /** Prop > `<UiKitProvider labels={{ billing }}>` > English: `grantWarningTitle`,
@@ -514,6 +519,11 @@ export interface GrantWarningConfirmProps {
   labels?: LabelOverride<BillingLabels>;
 }
 
+/** What {@link GrantWarningConfirm} takes: `onClose`, or alone the deprecated
+ *  `onOpenChange`, is required (0.52 code review: with neither it compiled, and nothing
+ *  could dismiss it). */
+export type GrantWarningConfirmProps = WithDialogClose<GrantWarningConfirmFields>;
+
 /**
  * 0.42 (§16.8 B): the permanent-grant warning before a checkout — `grantWarningTitle`,
  * `grantWarningBody`, "Back" and "Buy anyway" (`grantWarningAction`). {@link PlanPicker}
@@ -523,26 +533,41 @@ export interface GrantWarningConfirmProps {
  * to a checkout — show this before that checkout, so a permanent-grant holder is still
  * warned. Carries `data-grant-warning`.
  */
-export function GrantWarningConfirm({ open, onOpenChange, onConfirm, labels: labelsProp }: GrantWarningConfirmProps) {
+export function GrantWarningConfirm({
+  open,
+  onClose,
+  onOpenChange,
+  onConfirm,
+  labels: labelsProp,
+}: GrantWarningConfirmProps) {
   const labels = useBillingLabels(labelsProp);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const close = dialogClose({ onClose, onOpenChange });
   return (
     <DialogFrame
       open={open}
       title={labels.grantWarningTitle}
       description={labels.grantWarningBody}
-      onClose={() => onOpenChange(false)}
+      onClose={close}
       data-grant-warning=""
-      actions={(close) => (
+      actions={(lower) => (
         <>
-          <Button variant="secondary" onClick={close}>
+          <Button variant="secondary" onClick={lower}>
             {common.back}
           </Button>
           <Button
             variant="default"
             onClick={() => {
+              // Already closed, and lowering: a second press is no second checkout, for an
+              // app that shows this dialog itself as much as for PlanPicker.
+              if (!open) return;
               onConfirm();
-              onOpenChange(false);
+              // The caller's close, at once — not `lower`, the panel's animated one, which
+              // reports the close 220 ms later. PlanPicker clears the warned choice in it,
+              // and the lowering panel is not inert: a double click on "Buy anyway" opened
+              // the checkout twice (0.52 code review, plan-card.tsx). The caller's `open`
+              // turning false still plays the exit.
+              close();
             }}
           >
             {labels.grantWarningAction}

package/src/billing/plan-change-labels.ts

@@ -0,0 +1,66 @@
+// The words of admin/plan-change and their type, in a module with no component code: the
+// English catalogue (src/i18n/defaults.ts) imports them without the component, so `en`
+// loads as one chunk like the other languages (0.34, KS U8). In billing/ since 0.52:
+// PlanSwitchConfirm reads them too, and with them in admin/ the billing and admin folders
+// imported each other (refactor audit 2026-10-30, MOD-6). admin/plan-change re-exports
+// both, and admin/plan-change-labels still answers for the old path.
+
+/** The `planChange` namespace: the column, the grant dialog and the result's lines. */
+export interface PlanChangeLabels {
+  /** The column's header: "Plan". */
+  column: string;
+  /** The dialog's title: "Change plan". */
+  title: string;
+  /** Its confirm button: "Change plan". */
+  confirm: string;
+  /** The plan select's label: "Plan". */
+  plan: string;
+  /** The line over the select: "Current plan: Free". */
+  current: (plan: string) => string;
+  /** Under the select — the fact that is not on the button. */
+  keepsItems: string;
+  /** The end of a free grant's field: "Free until". */
+  until: string;
+  /** Under it. */
+  untilHint: string;
+  /** Why the confirm is held while nothing would change. */
+  needsChange: string;
+  /** The result: the plan moved from one to another. */
+  changed: (from: string, to: string) => string;
+  /** The result: an account with no plan before, or the same plan again. */
+  set: (to: string) => string;
+  /** The result: a running beta kept its own end (§12.34); only the plan moved. */
+  keptBeta: string;
+  /** The result: the grant runs until `date` (formatted). */
+  untilDone: (date: string) => string;
+  /** The result: the account owns more than the new plan allows. */
+  overLimit: string;
+  /**
+   * The column's usage, spelled out (its tooltip): "1 of 5 budgets". Figures arrive
+   * formatted; `dimension` is the app's word, as `usage.label` gives it — since 0.33.1
+   * in the form the LIMIT takes when the label gives its plural forms ("1 of 1 budget",
+   * "1 of 5 budgets"): in every shipped language the word follows the limit, or heads
+   * the line in German, whose `von` would want a dative plural no app form carries
+   * ("Budgets: 1 von 5"). An override of yours gets the same word. Since 0.34 the grant
+   * dialog's usage line too, when `usage` comes as the column's shape.
+   */
+  usageOf: (used: string, limit: string, dimension: string) => string;
+}
+
+export const DEFAULT_PLAN_CHANGE_LABELS: PlanChangeLabels = {
+  column: "Plan",
+  title: "Change plan",
+  confirm: "Change plan",
+  plan: "Plan",
+  current: (plan) => `Current plan: ${plan}`,
+  keepsItems: "A smaller plan only blocks creating more; nothing is deleted.",
+  until: "Free until",
+  untilHint: "Leave empty for no end. A running beta keeps its own end.",
+  needsChange: "Pick another plan or an end date.",
+  changed: (from, to) => `Plan changed from ${from} to ${to}.`,
+  set: (to) => `Plan set to ${to}.`,
+  keptBeta: "The beta keeps its end; only the plan changed.",
+  untilDone: (date) => `Free until ${date}.`,
+  overLimit: "Above the new plan’s limit: nothing is removed, new items are blocked.",
+  usageOf: (used, limit, dimension) => `${used} of ${limit} ${dimension}`,
+};

package/src/billing/plan-switch.tsx

@@ -1,19 +1,20 @@
-import type { KeyboardEvent } from "react";
-
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import type { LabelOverride } from "../i18n/kit-labels";
 import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
 import { pluralForm } from "../i18n/plurals";
 import type { PluralForms } from "../i18n/plurals";
-import { formatDate, formatMoney, formatNumber } from "../lib/format";
+import { useDayFormatter } from "../lib/day-format";
+import { formatMoney, formatNumber } from "../lib/format";
 import { AlertBanner } from "../components/alert-banner";
 import { Button } from "../components/button";
 import { DialogFrame } from "../components/dialog-frame";
 import { Spinner } from "../components/spinner";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
-import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change-labels";
+import { DEFAULT_PLAN_CHANGE_LABELS } from "./plan-change-labels";
 import { useBillingLabels } from "./billing-labels";
 import type { BillingLabels } from "./billing-labels";
+import { dialogClose } from "./dialog-close";
+import type { WithDialogClose } from "./dialog-close";
 import type { PlanSwitchPreview } from "./billing-overview";
 import { minorToMajor } from "./plan-price";
 import type { BillingInterval } from "./plan-price";
@@ -38,11 +39,16 @@ export interface PlanSwitchSide {
   interval: BillingInterval;
 }
 
-export interface PlanSwitchConfirmProps {
+/** {@link PlanSwitchConfirmProps} before one of its two close props is required. */
+interface PlanSwitchConfirmFields {
   open: boolean;
-  /** `false` when the payer dismisses it — Cancel, Escape, the backdrop. Confirm leaves
-   *  it open: close it once the switch answers. */
-  onOpenChange: (open: boolean) => void;
+  /** The payer dismissed it — Cancel, Escape, the backdrop. Confirm leaves it open: close
+   *  it once the switch answers. 0.52: every other kit dialog's `onClose` (CONTRIBUTING
+   *  §4; refactor audit 2026-10-30, API-5). */
+  onClose?: () => void;
+  /** @deprecated 0.52 — `onClose`, as every other kit dialog; removed in 0.53. Called with
+   *  `false` when there is no `onClose`. */
+  onOpenChange?: (open: boolean) => void;
   /** What the payer pays now: the overview's `paid`. */
   from: PlanSwitchSide;
   /** The pick. */
@@ -50,8 +56,8 @@ export interface PlanSwitchConfirmProps {
   /** `POST /billing/plan/preview`'s answer. Undefined while it loads: a spinner, and
    *  Confirm is held. */
   preview?: PlanSwitchPreview;
-  /** `POST /billing/plan` is under way: Confirm's spinner, no second press, and Escape
-   *  doesn't close. */
+  /** `POST /billing/plan` is under way: Confirm's spinner, no second press, and neither
+   *  Escape, the backdrop nor Back closes it. */
   pending?: boolean;
   /** The plan's display name, the app's (§3.1). Default: the code. */
   planName?: (code: string) => string;
@@ -66,7 +72,8 @@ export interface PlanSwitchConfirmProps {
   formatLimit?: (dimension: string, value: number) => string;
   /** Confirm: the app's `POST /billing/plan` with `{plan, interval}` of `to`. */
   onConfirm: () => void;
-  /** The figures' and the date's locale. Default: the provider's. */
+  /** The figures' and the date's locale. Default: the provider's. The next charge's date
+   *  is written by the `<UiKitProvider formatDate>` when the app set one (0.52). */
   locale?: string;
   /**
    * 0.42 (§16.2 decision 5, §16.8 B): the payer's free grant runs without an end —
@@ -81,6 +88,11 @@ export interface PlanSwitchConfirmProps {
   labels?: LabelOverride<BillingLabels>;
 }
 
+/** What {@link PlanSwitchConfirm} takes: `onClose`, or alone the deprecated
+ *  `onOpenChange`, is required (0.52 code review: with neither it compiled, and nothing
+ *  could dismiss it). */
+export type PlanSwitchConfirmProps = WithDialogClose<PlanSwitchConfirmFields>;
+
 /**
  * The confirm for a plan switch (§15.2.10): from → to, each with its billing period;
  * Paddle's preview — "Charged now" (an upgrade) or "Credited towards your next charges"
@@ -90,7 +102,7 @@ export interface PlanSwitchConfirmProps {
  *     const preview = useMutation({ mutationFn: api.previewPlanSwitch });
  *     <PlanSwitchConfirm
  *       open={pick !== null}
- *       onOpenChange={(open) => !open && setPick(null)}
+ *       onClose={() => setPick(null)}
  *       from={overview.paid}
  *       to={pick}
  *       preview={preview.data}
@@ -105,6 +117,7 @@ export interface PlanSwitchConfirmProps {
  */
 export function PlanSwitchConfirm({
   open,
+  onClose,
   onOpenChange,
   from,
   to,
@@ -122,6 +135,7 @@ export function PlanSwitchConfirm({
   const planChange = useKitLabels("planChange", DEFAULT_PLAN_CHANGE_LABELS);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const locale = useKitLocale(localeProp);
+  const day = useDayFormatter(undefined, localeProp);
 
   const period = (interval: BillingInterval) => (interval === "year" ? labels.yearly : labels.monthly);
   const side = (s: PlanSwitchSide) => `${planName(s.plan.toLowerCase())} (${period(s.interval)})`;
@@ -151,11 +165,10 @@ export function PlanSwitchConfirm({
       open={open}
       title={labels.switchTitle}
       description={labels.switchFromTo(side(from), side(to))}
-      onClose={() => onOpenChange(false)}
-      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
-        if (pending && e.key === "Escape") e.preventDefault();
-      }}
-      aria-busy={preview === undefined || pending || undefined}
+      onClose={dialogClose({ onClose, onOpenChange })}
+      busy={pending}
+      // A preview that loads is busy too, but holds nothing: Cancel stays a way out.
+      aria-busy={preview === undefined || undefined}
       actions={(close) => (
         <>
           <Button variant="secondary" onClick={close} disabled={pending}>
@@ -192,9 +205,7 @@ export function PlanSwitchConfirm({
             </dd>
             {preview.next_billed_at && preview.next_minor != null && (
               <>
-                <dt className="text-secondary">
-                  {labels.switchNextCharge(formatDate(preview.next_billed_at, "medium", { locale }))}
-                </dt>
+                <dt className="text-secondary">{labels.switchNextCharge(day(preview.next_billed_at))}</dt>
                 <dd className="text-right tabular-nums">{money(preview.next_minor, preview.currency)}</dd>
               </>
             )}

package/src/chart.ts

@@ -2,22 +2,36 @@
 //
 // A re-slicing of what the main barrel already exports, not a new API. It exists so a
 // consumer can reach the chart kit WITHOUT the barrel: `import("@eifi1/ui-kit/chart")`
-// is a 31KB chunk, where the same lazy import through the barrel pulls 221KB, because
-// a dynamic import of the barrel cannot be tree-shaken down to one of its members.
+// is a chunk of its own (50.4 KB min, 19.9 KB gzip at 0.51.6, refactor audit 2026-10-30
+// MOD-7; it was 31KB when this was written), where the same lazy import through the barrel
+// pulls the barrel, because a dynamic import of it cannot be tree-shaken down to one member.
 //
 // It is about chunk size, not about the peer: `recharts` is a REQUIRED peer (since 0.5.0),
 // because the main barrel re-exports everything here too, so `import { Button } from
 // "@eifi1/ui-kit"` reaches recharts as well (packaging-contract.test.ts asserts it).
 export * from "./components/chart";
 export * from "./theme/chart-palette";
+// 0.52: the slice's share of the 55 names no app reads (refactor audit 2026-10-30, API-4,
+// decision 4), tagged on their specifiers as the barrel's are — the modules keep them.
+export {
+  /** @deprecated 0.52 — `chartEdge`, which measures a fill against it (API-4); removed in 0.53 */
+  EDGE_MIN_CONTRAST,
+  /** @deprecated 0.52 — `--chart-ink` (`CHART_ROLES.outline`), the same ink as a token (API-4); removed in 0.53 */
+  CHART_INK_HEX,
+} from "./theme/chart-palette";
 
 // The tile chart (treemap) the apps share — moved here from keksdose so every consumer
-// derives it from the package rather than from a copy.
+// derives it from the package rather than from a copy. 0.52: its `treemap` label namespace.
 export * from "./components/treemap";
+export * from "./components/treemap-labels";
 
 // lenkbank's zoomable series chart, its synced x-zoom, the toggle legend and the
 // mirrored-pair axis geometry — moved here so the apps derive them from the package.
 export * from "./components/series-chart";
+export {
+  /** @deprecated 0.52 — `SeriesChart`, which places its tooltip with it (API-4); removed in 0.53 */
+  resolveTooltipPlacement,
+} from "./components/series-chart";
 // 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.
 export type { ChartHeight } from "./components/chart-height";
 // SharedXZoom and the zoom's types: the public face of ./chart-zoom-core, whose arithmetic
@@ -28,6 +42,10 @@ export * from "./components/chart-zoom";
 // recharts, so chart-zoom-core has to be one of them (MOD-6).
 export { SharedXZoom } from "./components/chart-zoom-core";
 export * from "./components/toggle-legend";
+export {
+  /** @deprecated 0.52 — `strokeDash`, which picks a series' pattern from it (API-4); removed in 0.53 */
+  STROKE_PATTERNS,
+} from "./components/toggle-legend";
 export * from "./components/facing-pair";
 export * from "./components/series-chart-labels";
 

package/src/components/account-chips.tsx

@@ -1,9 +1,10 @@
 import type { ReactElement, ReactNode } from "react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
-import { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from "../lib/format";
+import { toDate, useKitFormat, EMPTY_FORMATTED_VALUE } from "../lib/format";
 import type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from "../lib/format";
-import { useKitDateFormatter, useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { useDayFormatter } from "../lib/day-format";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { toLocalIso } from "../lib/dates";
 import { Chip } from "./chip";
 import type { ChipLinkProps, ChipShape, ChipSize, ChipTone, ChipVariant } from "./chip";
@@ -292,17 +293,15 @@ export function AccountStateChip({
   // An `undefined` in the prop is skipped (the provider's merge does that), so an
   // optional value cannot blank a default.
   const labels = useKitLabels("accountState", DEFAULT_ACCOUNT_STATE_LABELS, labelsProp);
-  const locale = useKitLocale(localeProp);
-  const fromProvider = useKitDateFormatter();
+  // The kit's one day ladder: the provider's `formatDate`, else `Intl` in the provider's
+  // locale and `timeZone` (refactor audit 2026-10-30, DUP-2).
+  const day = useDayFormatter(null, localeProp);
   const when = state === "deletion" ? toDate(date ?? null) : null;
   let text: ReactNode;
   if (state !== "deletion") text = labels[state];
   else if (when) {
     // A date in a SENTENCE, so no weekday (keksdose's rule, KitDateFormatContext).
-    const day =
-      (fromProvider && fromProvider(toLocalIso(when), { unit: "day", source: "dateMark", locale, weekday: false })) ||
-      formatDate(when, "medium", { locale });
-    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day);
+    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day(date));
   } else text = labels.deletion ?? DEFAULT_ACCOUNT_STATE_LABELS.deletion;
   return (
     <Chip
@@ -355,14 +354,14 @@ export interface DateMarkProps {
 
 /**
  * A date in a table cell: a `<time>` with a machine-readable `dateTime`, nowrap and
- * tabular figures, in the provider's locale — or `empty` when there is none.
+ * tabular figures, in the provider's locale and `timeZone` — or `empty` when there is none.
  *
  * `display="date"` without a `dateStyle` is written by `<UiKitProvider formatDate>` when
  * the app set one (keksdose K12: its `DateCell` exists to put every column's date in the
- * app's date-format preference, weekday and all — dev#546), called with the LOCAL
- * calendar day of the value as `"YYYY-MM-DD"` and `weekday: true`. Without one, or for
- * an empty answer, it is `Intl`'s `medium` date as before. The relative display is not
- * a calendar day and keeps `formatRelativeTime`.
+ * app's date-format preference, weekday and all — dev#546), called with the calendar day
+ * of the value as `"YYYY-MM-DD"` (in the provider's `timeZone`, else the device's) and
+ * `weekday: true`. Without one, or for an empty answer, it is `Intl`'s `medium` date as
+ * before. The relative display is not a calendar day and keeps `formatRelativeTime`.
  */
 export function DateMark({
   value,
@@ -374,27 +373,25 @@ export function DateMark({
   locale: localeProp,
   className,
 }: DateMarkProps) {
-  const locale = useKitLocale(localeProp);
-  const fromProvider = useKitDateFormatter();
+  // The provider's `timeZone` (0.46) as well as its locale, also for the relative words
+  // and the exact line (refactor audit 2026-10-30, DUP-2: the raw formatters ignored it).
+  const { formatDate, formatRelativeTime } = useKitFormat(localeProp);
+  const day = useDayFormatter(null, localeProp);
   const date = toDate(value);
   const cls = cn("whitespace-nowrap tabular-nums", className);
   if (!date) return <span className={cn(cls, "text-muted")}>{empty}</span>;
   if (display === "date") {
-    const own =
-      dateStyle === undefined && fromProvider
-        ? fromProvider(toLocalIso(date), { unit: "day", source: "dateMark", locale, weekday: true })
-        : "";
     return (
       <time dateTime={date.toISOString()} className={cls}>
-        {own || formatDate(date, dateStyle ?? "medium", { locale })}
+        {day(value, { weekday: true, style: dateStyle ?? "medium", preference: dateStyle === undefined })}
       </time>
     );
   }
-  const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? "medium" });
-  const exact = formatDate(date, dateStyle ?? "dateTime", { locale });
+  const text = formatRelativeTime(date, { ...relative, absoluteStyle: dateStyle ?? "medium" });
+  const exact = formatDate(date, dateStyle ?? "dateTime");
   // Past `absoluteAfterDays` the relative words already ARE the date; then the exact
   // line alone, rather than the same day twice.
-  const sameDay = text === formatDate(date, dateStyle ?? "medium", { locale });
+  const sameDay = text === formatDate(date, dateStyle ?? "medium");
   const iso = date.toISOString();
   if (sameDay) {
     return (

package/src/components/alert-banner.tsx

@@ -1,9 +1,10 @@
-import { useId, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref, RefObject } from "react";
 import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
+import { focusFirst, focusIsLost, tabStopsAround, whenFocusLeftForNothing } from "../lib/focus-left";
 
 /** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's
  *  preview and beta-performance banners, which borrowed `warning` for want of it and
@@ -185,10 +186,21 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
   /** Replaces the tone's glyph — a `<Spinner label={null} />` for "Solving…", say.
    *  `null` draws none. Always decorative; the text carries the message. */
   icon?: ReactNode;
-  /** Renders an × at the end that calls this. The banner does not hide itself — the
-   *  caller removes it (and remembers that it did), as with every other kit control
-   *  whose state is app state. */
+  /**
+   * Renders an × at the end that calls this. The banner does not hide itself — the
+   * caller removes it (and remembers that it did), as with every other kit control
+   * whose state is app state.
+   *
+   * The focus (0.52, refactor audit 2026-10-30, DSP-15): the × that held it goes with the
+   * banner, and it fell to `<body>`. When the banner unmounts after its × was pressed and
+   * the focus has nowhere else, it moves on to the next control after the banner — where
+   * Tab from the × would have gone — or, at the end of the page, the one before it; to
+   * {@link dismissFocusRef} when given. A banner the caller keeps keeps its ×'s focus.
+   */
   onDismiss?: () => void;
+  /** Where the focus goes once the × has removed the banner (DSP-15) — a heading, the
+   *  control the banner was about. Default: the next control after the banner. */
+  dismissFocusRef?: RefObject<HTMLElement | null>;
   /** Accessible name of the ×. Default: `common.dismiss` from the
    *  {@link UiKitProvider}, else "Dismiss". */
   dismissLabel?: string;
@@ -278,6 +290,7 @@ export function AlertBanner({
   action,
   icon,
   onDismiss,
+  dismissFocusRef,
   dismissLabel,
   clampMobile = false,
   actionPlacement = "own-line",
@@ -318,6 +331,36 @@ export function AlertBanner({
     return () => ro?.disconnect();
   }, [clamp, expanded, children]);
 
+  // The ×'s focus, once the caller has removed the banner (DSP-15). Where it can go is read
+  // at the press, while the banner still has a place in the page to measure from; whether
+  // it must is decided at the unmount, in the cleanup of a passive effect — after React has
+  // taken the banner's DOM away, when a focus that fell with it is on <body>.
+  const dismissedFrom = useRef<HTMLElement[] | null>(null);
+  const dismissTarget = useRef(dismissFocusRef);
+  useLayoutEffect(() => {
+    dismissTarget.current = dismissFocusRef;
+  });
+  // The note lives until the focus lands outside the banner (0.52 code review,
+  // alert-banner.tsx). A caller that keeps the banner — an async dismiss that failed, a
+  // snooze — left it standing, and the banner's unmount long after, a route change with
+  // the focus on <body>, sent the focus to a stop noted at the press, over the app's own
+  // handling of a new page. A `focusin` on the document, not a `focusout` on the banner:
+  // a browser that blurs a removed node would drop the note at the very removal it is for.
+  // The one `focusout` heard is a move to nothing — a click on the page — and only once a
+  // microtask has shown the × still in place (`whenFocusLeftForNothing`). A focus that
+  // stays on the × keeps the note, however late the removal: that is DSP-15's own case,
+  // an async dismiss whose request resolves.
+  const unwatchFocus = useRef<(() => void) | null>(null);
+  useEffect(
+    () => () => {
+      unwatchFocus.current?.();
+      const around = dismissedFrom.current;
+      if (!around || !focusIsLost()) return;
+      focusFirst([dismissTarget.current?.current, ...around]);
+    },
+    [],
+  );
+
   const Glyph = TONE_GLYPH[tone];
   // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.
   const nudge = inlineRow || strip ? undefined : sm ? "mt-px" : "mt-0.5";
@@ -448,6 +491,40 @@ export function AlertBanner({
         // A dismiss inside a whole-row banner must not also follow the row.
         e.preventDefault();
         e.stopPropagation();
+        const frame = e.currentTarget.parentElement;
+        // Only a × that holds the focus has one to lose (0.52 code review, alert-banner.tsx):
+        // Safari focuses no button on a click, nor on an iOS tap, and with the focus on
+        // <body> already the removal sent it on — a ring, on a form field the on-screen
+        // keyboard, on a page the user was reading with the pointer.
+        if (frame && e.currentTarget.ownerDocument.activeElement === e.currentTarget) {
+          const { after, before } = tabStopsAround(frame);
+          dismissedFrom.current = [...after, ...before];
+          unwatchFocus.current?.();
+          const doc = frame.ownerDocument;
+          const forget = () => {
+            dismissedFrom.current = null;
+            unwatch();
+          };
+          const onFocusIn = (event: FocusEvent) => {
+            if (event.target instanceof Node && frame.contains(event.target)) return;
+            forget();
+          };
+          // Focus that left for nothing — a click on the page — took no `focusin` with it
+          // (0.52 code review): the user moved on all the same.
+          const onFocusOut = (event: FocusEvent) => {
+            whenFocusLeftForNothing(event, () => {
+              if (unwatchFocus.current === unwatch) forget();
+            });
+          };
+          const unwatch = () => {
+            doc.removeEventListener("focusin", onFocusIn, true);
+            frame.removeEventListener("focusout", onFocusOut);
+            unwatchFocus.current = null;
+          };
+          doc.addEventListener("focusin", onFocusIn, true);
+          frame.addEventListener("focusout", onFocusOut);
+          unwatchFocus.current = unwatch;
+        }
         onDismiss();
       }}
       className={cn(

package/src/components/amount-input.tsx

@@ -267,10 +267,15 @@ export interface AmountInputProps extends FieldHelpProps, DataAttributes {
   max?: number;
   /**
    * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the
-   * numpad's "=" and on every result the calculator writes back, never on a keystroke
-   * ("1200+" is not a figure yet). `onChange` still reports every keystroke; this is
-   * for a host that stores a number and must not see drafts (kastlan 52; see
-   * {@link MoneyField}, which is built on it).
+   * numpad's "=" and once per calculator session (its "=" or Enter in its display, or
+   * the pad closing on a result not committed yet), never on a keystroke ("1200+" is
+   * not a figure yet). `onChange` still reports every keystroke and every result the
+   * calculator writes back; this is for a host that stores a number and must not see
+   * drafts (kastlan 52; see {@link MoneyField}, which is built on it).
+   *
+   * Refactor audit 2026-10-30, INP-1: every calculator keystroke that resolved used to
+   * commit, so "100+50" committed 105 on its way to 150 — keksdose saved both, and its
+   * threshold field, `disabled` while it saves, lost the calculator to the first.
    */
   onCommit?: (value: string) => void;
   /**
@@ -333,17 +338,28 @@ function settleAmount(text: string, digits: number | undefined, min?: number, ma
 // `lib/decimal-marks.ts`, read through the engine NumberInput and this field share
 // (`numeric-field.ts`, DUP-10).
 
-// The consuming app's ONE money palette (`--money-expense` / `--money-income`),
-// not a bespoke rose/emerald pairing: a figure being typed has to wear the same
-// colour the same figure will wear once it is a row in the table behind the form
-// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`
-// variant is needed and they win over the field's own text colour regardless of
-// where `cn` puts them.
-const TONE_CLASS: Record<"neutral" | "outflow" | "inflow", string> = {
+/**
+ * The figure's colour per {@link AmountInputProps.tone} — public as `AMOUNT_TONE_CLASS`,
+ * for a table cell or a test that must paint the same figure the same way (keksdose's
+ * receipt lines, dev#556).
+ *
+ * The consuming app's ONE money palette (`--money-expense` / `--money-income`), not a
+ * bespoke rose/emerald pairing: a figure being typed has to wear the same colour the same
+ * figure will wear once it is a row in the table behind the form (Keksdose dev#434). The
+ * utilities are unlayered and theme-aware, so no `dark:` variant is needed and they win
+ * over the field's own text colour regardless of where `cn` puts them.
+ */
+const TONE_CLASS: Readonly<Record<NonNullable<AmountInputProps["tone"]>, string>> = {
   neutral: "",
   outflow: "text-money-neg",
   inflow: "text-money-pos",
 };
+// Exported in 0.52 because keksdose's tests read it out of dist/components/amount-input.js
+// with a regex for `const TONE_CLASS` — the one reach into the kit's dist in three apps,
+// which a rename or a moved module breaks with no public change (MOD-8, refactor audit
+// 2026-10-30; 0.34's move failed 91 of keksdose's test files that way). The local name
+// stays until keksdose imports the export, so the bump itself breaks nothing.
+export { TONE_CLASS as AMOUNT_TONE_CLASS };
 
 // The shared chrome-less treatment at money size. `tabular-nums` so digits don't
 // reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder
@@ -681,12 +697,14 @@ export function AmountInput(props: AmountInputProps) {
                 // reads either mark, and "1.234,5" is two of them. The result comes back
                 // dot-decimal.
                 value={derived}
+                // Live: every result, settled, so the field never shows more decimals than
+                // it will keep. The commit is the session's one (INP-1): its "=", or the pad
+                // closing on a newer result — not each figure on the way to the result.
                 onChange={(result, expression) => {
                   setDraft(null);
-                  const settled = settle(result);
-                  handleText(settled, expression);
-                  onCommit?.(settled);
+                  handleText(settle(result), expression);
                 }}
+                onCommit={(result) => onCommit?.(settle(result))}
                 className="px-1.5"
                 aria-label={labels?.calculatorTrigger}
                 labels={labels?.calculator}