@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/components/menu-item.tsx

@@ -1,4 +1,3 @@
-import { forwardRef } from "react";
 import type { MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { Check } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
@@ -14,11 +13,11 @@ import { pickLinkRenderer } from "./text-link";
  * rows (`TopBarActionMenu`, `OptionSwitcherMenu`) cannot drift into two looks.
  */
 const MENU_ITEM_ROW =
-  "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+  "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover";
 
 /** HoverMenu moves focus onto items with the arrow keys; a pointer user never sees the
  *  ring, a keyboard user always does. Inset, because the panel clips its children. */
-const MENU_ITEM_FOCUS = `${FOCUS_RING} focus-visible:bg-[var(--bg-hover)] focus-visible:ring-inset`;
+const MENU_ITEM_FOCUS = `${FOCUS_RING} focus-visible:bg-hover focus-visible:ring-inset`;
 
 export type MenuItemTone = "default" | "danger";
 
@@ -65,6 +64,9 @@ interface MenuItemBaseProps {
   id?: string;
   [key: `aria-${string}`]: string | boolean | number | undefined;
   [key: `data-${string}`]: unknown;
+  /** The row — the `<button>`, or the `<a>` with `href`. A React 19 ref prop since 0.34
+   *  (MOD-4, refactor audit 2026-10); it was `forwardRef`. */
+  ref?: Ref<HTMLElement>;
 }
 
 /**
@@ -131,32 +133,30 @@ export type MenuItemProps = MenuItemBaseProps &
  * with the rest. Render it inside an `<li>` like the shell's own rows; `HoverMenu`
  * turns the list markup into `role="none"`.
  */
-export const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(
-  {
-    children,
-    icon: Icon,
-    leading,
-    badge,
-    trailing,
-    tone = "default",
-    disabled = false,
-    className,
-    href,
-    renderLink,
-    onClick,
-    checked,
-    checkable,
-    current,
-    ...rest
-  },
+export function MenuItem({
   ref,
-) {
+  children,
+  icon: Icon,
+  leading,
+  badge,
+  trailing,
+  tone = "default",
+  disabled = false,
+  className,
+  href,
+  renderLink,
+  onClick,
+  checked,
+  checkable,
+  current,
+  ...rest
+}: MenuItemProps) {
   const kitLink = useKitLink();
   const on = href !== undefined ? !!current : !!checked;
   const look = cn(
     MENU_ITEM_ROW,
     MENU_ITEM_FOCUS,
-    tone === "danger" && "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:bg-[var(--danger-bg)]",
+    tone === "danger" && "text-danger hover:bg-danger-soft focus-visible:bg-danger-soft",
     disabled && "cursor-default opacity-50 hover:bg-transparent",
     className,
   );
@@ -165,7 +165,10 @@ export const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem
       <span className="flex min-w-0 items-center gap-2">
         {Icon && <Icon className="size-4 shrink-0" aria-hidden />}
         {leading}
-        <span className="min-w-0 truncate">{children}</span>
+        {/* An ellipsis at Normal; from Large up the label wraps and the row grows
+            (text size §10.17, round 0.34 T1) — a menu row cut to "Househ…" at 150 %
+            is a choice the reader cannot read. */}
+        <span className="min-w-0 truncate-until-large">{children}</span>
         {badge != null && badge !== false && (
           <>
             {/* A space between the name and the badge in the accessible name ("Household
@@ -180,7 +183,7 @@ export const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem
       {(trailing != null || on) && (
         <span className="flex shrink-0 items-center gap-2">
           {trailing}
-          {on && <Check className="size-4 text-[var(--text-secondary)]" aria-hidden />}
+          {on && <Check className="size-4 text-secondary" aria-hidden />}
         </span>
       )}
     </>
@@ -230,7 +233,7 @@ export const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem
       {body}
     </button>
   );
-});
+}
 
 function RenderedLink({
   render,

package/src/components/mini-calendar-labels.ts

@@ -0,0 +1,17 @@
+// The English words of ./mini-calendar, 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). ./mini-calendar re-exports them.
+
+import type { MiniCalendarLabels } from "./mini-calendar";
+
+/** English defaults. Exported as the `miniCalendar` namespace of `UiKitLabels`
+ *  (src/i18n), the complete reference a translation is written against. */
+export const DEFAULT_MINI_CALENDAR_LABELS: MiniCalendarLabels = {
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  day: (date) => date,
+  chooseStart: "Choose a start date",
+  chooseEnd: "Choose an end date",
+  startSelected: (date) => `${date} selected as the start. Choose an end date.`,
+  rangeSelected: (from, to) => `${from} to ${to} selected. Choose a start date to begin again.`,
+};

package/src/components/mini-calendar.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
 import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring";
 import { horizontalStep } from "../lib/direction";
 import { useAnnounce } from "../hooks/use-announce";
@@ -13,7 +14,8 @@ import {
   sameYmd,
   toLocalIso,
 } from "../lib/dates";
-import { useKitLabels, useKitLocale, useKitWeekStart } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, useKitWeekStart, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_MINI_CALENDAR_LABELS } from "./mini-calendar-labels";
 
 /**
  * Every string this calendar can speak — the `miniCalendar` namespace of
@@ -56,17 +58,8 @@ export interface MiniCalendarLabels {
   rangeSelected: (from: string, to: string) => string;
 }
 
-/** English defaults. Exported as the `miniCalendar` namespace of `UiKitLabels`
- *  (src/i18n), the complete reference a translation is written against. */
-export const DEFAULT_MINI_CALENDAR_LABELS: MiniCalendarLabels = {
-  previousMonth: "Previous month",
-  nextMonth: "Next month",
-  day: (date) => date,
-  chooseStart: "Choose a start date",
-  chooseEnd: "Choose an end date",
-  startSelected: (date) => `${date} selected as the start. Choose an end date.`,
-  rangeSelected: (from, to) => `${from} to ${to} selected. Choose a start date to begin again.`,
-};
+// Defined in ./mini-calendar-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_MINI_CALENDAR_LABELS };
 
 /**
  * How a day is spoken. The weekday is in there on purpose: picking a date is very
@@ -87,7 +80,7 @@ const DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {
  * passes through to the root, so a tour anchor or a test id can find the calendar —
  * before this, a closed prop list dropped both (audit §api-design).
  */
-export interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<"div">, "onSelect"> {
+export interface MiniCalendarProps extends Omit<ComponentPropsWithRef<"div">, "onSelect"> {
   /** The selection's start as "YYYY-MM-DD"; `""` (the default) for none. */
   from?: string;
   /** The selection's end; `""` (the default) for none. */
@@ -119,7 +112,7 @@ export interface MiniCalendarProps extends Omit<ComponentPropsWithoutRef<"div">,
   min?: string;
   max?: string;
   /** User-facing strings; see {@link MiniCalendarLabels}. */
-  labels?: Partial<MiniCalendarLabels>;
+  labels?: LabelOverride<MiniCalendarLabels>;
   /**
    * Take focus to the day the grid opens on — the selected one, or today — when this
    * calendar mounts. For a panel that opened BECAUSE the user asked to pick a date:
@@ -526,7 +519,7 @@ export function MiniCalendar({
           type="button"
           onClick={() => moveMonth(-1)}
           aria-label={labels.previousMonth}
-          className="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]"
+          className="rounded p-1 text-muted hover:bg-hover"
         >
           {/* Mirrored in RTL: "previous" points to the reading START, which is right. */}
           <ChevronLeft className="size-4 rtl:-scale-x-100" aria-hidden />
@@ -541,8 +534,8 @@ export function MiniCalendar({
           className={cn(
             "capitalize",
             lg
-              ? "text-base font-semibold text-[var(--text-primary)]"
-              : "text-xs font-medium text-[var(--text-secondary)]",
+              ? "text-base font-semibold text-primary"
+              : "text-xs font-medium text-secondary",
           )}
         >
           {monthLabel}
@@ -551,7 +544,7 @@ export function MiniCalendar({
           type="button"
           onClick={() => moveMonth(1)}
           aria-label={labels.nextMonth}
-          className="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]"
+          className="rounded p-1 text-muted hover:bg-hover"
         >
           <ChevronRight className="size-4 rtl:-scale-x-100" aria-hidden />
         </button>
@@ -567,7 +560,7 @@ export function MiniCalendar({
           // The month view is RULED: a 1px gap over a border-coloured ground draws the
           // lines between the cells, the way a wall calendar does.
           lg
-            ? "gap-px overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--border)]"
+            ? "gap-px overflow-hidden rounded-lg border border-subtle bg-[var(--border)]"
             : "gap-y-0.5",
         )}
       >
@@ -576,8 +569,8 @@ export function MiniCalendar({
           className={cn(
             "grid grid-cols-7 text-center font-medium",
             lg
-              ? "gap-px text-xs text-[var(--text-muted)]"
-              : "text-micro uppercase text-[var(--text-placeholder)]",
+              ? "gap-px text-xs text-muted"
+              : "text-micro uppercase text-placeholder",
           )}
         >
           {weekdayLabels.map((w, i) => (
@@ -585,7 +578,7 @@ export function MiniCalendar({
               key={i}
               role="columnheader"
               aria-label={w.long}
-              className={lg ? "bg-[var(--bg-surface)] py-2" : "py-0.5"}
+              className={lg ? "bg-surface py-2" : "py-0.5"}
             >
               {lg ? w.short : w.narrow}
             </div>
@@ -603,7 +596,7 @@ export function MiniCalendar({
                   <div
                     key={di}
                     role="gridcell"
-                    className={lg ? cn(LG_CELL_HEIGHT, "bg-[var(--bg-surface-2)]") : "h-8"}
+                    className={lg ? cn(LG_CELL_HEIGHT, "bg-surface-2") : "h-8"}
                   />
                 );
               }
@@ -639,12 +632,12 @@ export function MiniCalendar({
                       }}
                       onKeyDown={onDayKeyDown}
                       className={cn(
-                        "text-xs tabular-nums text-[var(--text-placeholder)] transition-colors",
+                        "text-xs tabular-nums text-placeholder transition-colors",
                         FOCUS_RING,
                         "focus-visible:ring-inset",
-                        disabled ? "cursor-not-allowed opacity-60" : "hover:bg-[var(--bg-hover)]",
+                        disabled ? "cursor-not-allowed opacity-60" : "hover:bg-hover",
                         lg
-                          ? cn("flex w-full min-w-0 items-start bg-[var(--bg-surface-2)] p-1.5", LG_CELL_HEIGHT)
+                          ? cn("flex w-full min-w-0 items-start bg-surface-2 p-1.5", LG_CELL_HEIGHT)
                           : "size-8 rounded-full",
                       )}
                     >
@@ -678,7 +671,7 @@ export function MiniCalendar({
                 active: isActive,
                 size,
               });
-              const hasContent = content != null && content !== false && content !== "";
+              const filled = hasContent(content);
               const contentId = `${id}-day-${iso}`;
               // The band behind the day: full width between the ends, half width at an
               // end (so the round endpoint sits ON the band's tip), rounded where a row
@@ -690,7 +683,7 @@ export function MiniCalendar({
               const lastOfMonth = d.getDate() === daysInMonth(d);
               const band = banded
                 ? cn(
-                    "pointer-events-none absolute inset-y-0 bg-[var(--brand-bg)]",
+                    "pointer-events-none absolute inset-y-0 bg-brand-soft",
                     isStart ? "start-1/2 end-0" : isEnd ? "start-0 end-1/2" : "inset-x-0",
                     isInRange && (di === 0 || d.getDate() === 1) && "rounded-s-full",
                     isInRange && (di === 6 || lastOfMonth) && "rounded-e-full",
@@ -721,7 +714,7 @@ export function MiniCalendar({
                   // The custom content is the day's DESCRIPTION: `aria-label` replaces
                   // the button's text as its name, so without this link a screen
                   // reader would hear the date and never the events drawn under it.
-                  aria-describedby={hasContent ? contentId : undefined}
+                  aria-describedby={filled ? contentId : undefined}
                   aria-selected={isSelected}
                   aria-disabled={disabled || undefined}
                   aria-current={isToday ? "date" : undefined}
@@ -735,10 +728,10 @@ export function MiniCalendar({
                           FOCUS_RING,
                         "focus-visible:ring-inset",
                           disabled
-                            ? "cursor-not-allowed bg-[var(--bg-surface)] text-[var(--text-placeholder)]"
+                            ? "cursor-not-allowed bg-surface text-placeholder"
                             : isSelected
-                              ? "bg-[var(--brand-bg)] text-[var(--text-primary)] hover:bg-[var(--brand-bg-hover)]"
-                              : "bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
+                              ? "bg-brand-soft text-primary hover:bg-brand-soft-hover"
+                              : "bg-surface text-primary hover:bg-hover",
                         )
                       : cn(
                     "relative size-8 rounded-full text-xs tabular-nums transition-colors",
@@ -751,10 +744,10 @@ export function MiniCalendar({
                     FOCUS_RING_WIDTH,
                     "focus-visible:outline-none focus-visible:ring-inset",
                     isStart || isEnd
-                      ? "focus-visible:ring-[var(--brand-contrast)]"
-                      : "focus-visible:ring-[var(--brand)]",
+                      ? "focus-visible:ring-brand-contrast"
+                      : "focus-visible:ring-brand",
                     disabled
-                      ? "cursor-not-allowed text-[var(--text-placeholder)]"
+                      ? "cursor-not-allowed text-placeholder"
                       // The two selected states are the BRAND, not a fixed sky: the endpoints
                       // are the solid fill and the days between them its soft tint. Hardcoding
                       // them left an app that changed `--brand` with a calendar in the old
@@ -762,11 +755,11 @@ export function MiniCalendar({
                       // flip light/dark themselves, so there is no `dark:` partner to carry —
                       // one would override the token and bring the hardcoded hue back.
                       : isStart || isEnd
-                        ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]"
+                        ? "bg-brand text-brand-contrast hover:bg-brand-hover"
                         : isInRange
-                          ? "font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]"
-                          : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
-                    isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]",
+                          ? "font-medium text-brand-muted hover:bg-brand-soft-hover"
+                          : "text-primary hover:bg-hover",
+                    isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-strong",
                   )
                   }
                 >
@@ -776,15 +769,15 @@ export function MiniCalendar({
                         className={cn(
                           "inline-flex size-6 shrink-0 items-center justify-center self-start rounded-full tabular-nums",
                           isStart || isEnd
-                            ? "bg-[var(--brand)] font-semibold text-[var(--brand-contrast)]"
+                            ? "bg-brand font-semibold text-brand-contrast"
                             : isToday && !disabled
-                              ? "font-semibold text-[var(--brand)] ring-1 ring-inset ring-[var(--brand)]"
-                              : isInRange && "font-medium text-[var(--brand-muted)]",
+                              ? "font-semibold text-brand ring-1 ring-inset ring-brand"
+                              : isInRange && "font-medium text-brand-muted",
                         )}
                       >
                         {label}
                       </span>
-                      {hasContent && (
+                      {filled && (
                         <span id={contentId} className="flex min-w-0 flex-col gap-0.5">
                           {content}
                         </span>
@@ -794,7 +787,7 @@ export function MiniCalendar({
                     <>
                       {label}
                       {/* Under the number, inside the circle: room for a dot or two. */}
-                      {hasContent && (
+                      {filled && (
                         <span
                           id={contentId}
                           className="pointer-events-none absolute inset-x-0 bottom-0.5 flex justify-center gap-px leading-none"

package/src/components/modal.tsx

@@ -12,7 +12,8 @@ import { useFocusTrap } from "../hooks/use-focus-trap";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { useDialogParam, type DialogParam } from "../hooks/use-search-param-state";
-import { OVERLAY_EXIT_MS, prefersReducedMotion, useCloseTransition } from "../hooks/use-close-transition";
+import { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from "../hooks/use-close-transition";
+import { runOwnKeyDown, takeEscape, useDismissLayer } from "../hooks/use-dismiss";
 
 /**
  * Drag the panel by its top strip, in pointer space (dev#460).
@@ -152,7 +153,8 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
   role?: "dialog" | "alertdialog";
   children: ReactNode;
   /**
-   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem).
+   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less
+   * the backdrop's margin, capped at 110rem).
    *
    * `xl` exists because two callers had already written `className="max-w-3xl"` to
    * reach it — the payee backfill's preview table and the price-merge dialog, both
@@ -160,19 +162,30 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
    * patching a missing size IS the signal that the size is missing, and a
    * hand-written width in a `className` is a width nothing else can line up with.
    *
+   * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose
+   * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured
+   * table pasted from a spreadsheet and had patched themselves to
+   * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size="lg"`
+   * and then `max-w-5xl`. The cap is the generous one of the two, because a table
+   * squeezed into a box in the middle of a wide screen is a table scrolled sideways
+   * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.
+   * In rem, so it grows with the text size until the screen stops it.
+   *
    * The panel is `w-full` under every one of them, so the cap only bites once the
-   * viewport is wider than it: on a phone all three are the same full-width bottom
+   * viewport is wider than it: on a phone all four are the same full-width bottom
    * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.
    */
-  size?: "md" | "lg" | "xl";
+  size?: "md" | "lg" | "xl" | "2xl";
   /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */
   className?: string;
   /** id of the heading element, wired to `aria-labelledby`. */
   labelledBy?: string;
   /**
-   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first;
-   * if it calls `preventDefault()` the built-in Escape/Tab handling is skipped
-   * for that event.
+   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a
+   * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see
+   * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule
+   * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself
+   * no longer holds the dialog open (Wave 2, DUP-1).
    */
   onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
   /**
@@ -296,7 +309,7 @@ function ModalPanel({
   if (open !== prevOpen) {
     setPrevOpen(open);
     setDismissed(false);
-    setExiting(open === false && prevOpen === true && !dismissed && !prefersReducedMotion());
+    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());
     if (open) drag.reset();
   }
   useEffect(() => {
@@ -341,15 +354,15 @@ function ModalPanel({
   useFocusTrap(panelRef, { active, initialFocus: "container" });
   const leaving = closing || exiting;
 
+  // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a
+  // tooltip opened inside takes the key before the dialog does, wherever focus is —
+  // and the dialog gets it even when focus is not in the panel.
+  useDismissLayer(active, requestClose);
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    onKeyDown?.(e);
-    if (e.defaultPrevented) return;
-    if (e.key === "Escape") {
-      e.stopPropagation();
-      if (active) requestClose();
-      return;
-    }
-    // Tab containment lives in useFocusTrap, which listens on the panel itself.
+    runOwnKeyDown(e, onKeyDown);
+    // To whatever is on top — this dialog, unless something opened over it — and
+    // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.
+    takeEscape(e);
   };
 
   // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking
@@ -401,8 +414,8 @@ function ModalPanel({
         style={{ ...style, ...drag.style }}
         className={cn(
           leaving ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
-          "w-full rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none",
-          { md: "max-w-md", lg: "max-w-lg", xl: "max-w-3xl" }[size],
+          "w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none",
+          { md: "max-w-md", lg: "max-w-lg", xl: "max-w-3xl", "2xl": "max-w-[110rem]" }[size],
           // A panel taller than the screen has to scroll ITSELF. The backdrop is
           // `fixed inset-0` and the body is scroll-locked while a dialog is open, so
           // without this the overflow simply had nowhere to go: on a phone the panel

package/src/components/money-draft.ts

@@ -0,0 +1,72 @@
+import { useState } from "react";
+
+/**
+ * The draft-and-settle loop of a money field whose store is not AmountInput's text.
+ * Package-private — a module of its own so `money-field.tsx`'s `export *` in the barrel
+ * does not make it API.
+ */
+
+/** The number an amount's text reads as — AmountInput reports dot-decimal text — `null`
+ *  for empty, `undefined` for no number yet (a lone "-" or ".", a sum still being typed:
+ *  "1200+"). */
+export function readAmount(text: string): number | null | undefined {
+  const t = text.trim();
+  if (t === "") return null;
+  const n = Number(t);
+  return Number.isFinite(n) ? n : undefined;
+}
+
+/** A stored amount as a number: a number as it is, a stored text read as an amount's
+ *  text is, nothing as `null`. */
+function amountOf(value: unknown): number | null | undefined {
+  if (value === null || value === undefined) return null;
+  return typeof value === "number" ? (Number.isFinite(value) ? value : undefined) : readAmount(String(value));
+}
+
+/** {@link useMoneyDraft}'s answer. */
+export interface MoneyDraft {
+  /** The text the field shows — AmountInput's `value`. */
+  draft: string;
+  /** AmountInput's `onChange`: keeps the typed text, and answers what it reads as — a
+   *  number, `null` for empty, `undefined` for no number yet. */
+  change: (text: string) => number | null | undefined;
+  /** AmountInput's `onCommit`: what the settled text reads as. With no number in it (a
+   *  lone "-") the draft goes back to the stored amount — rather than a guess, and rather
+   *  than leaving "-" on screen while the store keeps the old figure — and the answer is
+   *  `undefined`. A `"string"` store keeps what was typed: it holds that text too. */
+  settle: (text: string) => number | null | undefined;
+}
+
+/**
+ * The draft-and-settle loop of a money field whose store is a number, or text the store
+ * holds itself: `MoneyField`'s, and `RhfMoneyField`'s (`valueAs`). One copy since 0.34
+ * (DUP-9, refactor audit 2026-10): the twin's own kept a different parse and no
+ * snap-back, so a lone "-" stayed on screen while the form kept the old number.
+ *
+ * The text being typed lives here — a stored number cannot hold "12." or "12+5" — and is
+ * re-read from `value` only when `value` moves away from what the draft already says (a
+ * reset, another row's save, a `setValue`), so a commit's own echo keeps the typist's
+ * 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);
+  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);
+    if (!same) setDraft(external);
+  }
+  return {
+    draft,
+    change: (text) => {
+      setDraft(text);
+      return readAmount(text);
+    },
+    settle: (text) => {
+      const next = readAmount(text);
+      if (next === undefined && valueAs === "number") setDraft(external);
+      return next;
+    },
+  };
+}

package/src/components/money-field.tsx

@@ -1,5 +1,6 @@
-import { useState, type ComponentProps, type Ref } from "react";
+import type { ComponentProps, Ref } from "react";
 import { AmountInput } from "./amount-input";
+import { useMoneyDraft } from "./money-draft";
 
 type AmountInputProps = ComponentProps<typeof AmountInput>;
 
@@ -18,15 +19,6 @@ export interface MoneyFieldProps
   ref?: Ref<HTMLInputElement>;
 }
 
-/** The number a settled text reads as: `null` for empty, `undefined` for no number
- *  (a lone "-" or "."). */
-function parseSettled(text: string): number | null | undefined {
-  const t = text.trim();
-  if (t === "") return null;
-  const n = Number(t);
-  return Number.isFinite(n) ? n : undefined;
-}
-
 /**
  * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a
  * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per
@@ -48,40 +40,34 @@ function parseSettled(text: string): number | null | undefined {
  * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a
  * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.
  *
+ * LOCKED (0.34, round 0.34 C2): a row that saves itself passes `commit` (or a
+ * `disabledReason` of its own), AmountInput's — under a locked `WriteLockProvider` the
+ * field stays in the tab order showing its amount, `readOnly`, with the lock's reason in
+ * the kit Tooltip and its description; the calculator, the numpad and the currency
+ * picker are off, and `onCommit` is never called. `disabled` takes it out of the tab
+ * order, which is what a lock must not do.
+ *
  * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:
  * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit
  * price's finer scale (kastlan 5).
  *
  * ```tsx
- * <MoneyField ariaLabel="Amount" currency="CHF" value={row.amount}
+ * <MoneyField aria-label="Amount" currency="CHF" value={row.amount}
  *   onCommit={(amount) => updateRow(row.id, { amount })} />
  * ```
  */
 export function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {
-  const external = value === null ? "" : String(value);
-  // The draft is re-read from `value` only when `value` moves away from what the draft
-  // already says (a reset, another row's save), so a commit's own echo keeps the
-  // typist's spelling ("12.50" stays "12.50" when 12.5 comes back).
-  const [draft, setDraft] = useState(external);
-  const [seen, setSeen] = useState(value);
-  if (seen !== value) {
-    setSeen(value);
-    if (parseSettled(draft) !== value) setDraft(external);
-  }
+  const money = useMoneyDraft(value);
   return (
     <AmountInput
       {...props}
       ref={ref}
-      value={draft}
-      onChange={setDraft}
+      value={money.draft}
+      onChange={money.change}
       onCommit={(text) => {
-        const next = parseSettled(text);
-        // No number ("-" alone): back to the stored amount rather than a guess.
-        if (next === undefined) {
-          setDraft(external);
-          return;
-        }
-        if (next !== value) onCommit(next);
+        // No number ("-" alone): the draft is back on the stored amount, nothing commits.
+        const next = money.settle(text);
+        if (next !== undefined && next !== value) onCommit(next);
       }}
     />
   );

package/src/components/month-picker-labels.ts

@@ -0,0 +1,22 @@
+// The English words of ./month-picker, 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). ./month-picker re-exports them.
+
+import type { MonthPickerLabels } from "./month-picker";
+
+/** The English starting point every override is merged onto. Exported (unlike the
+ *  calendar's) because it is asked for by name: a host building its own translation
+ *  table can spread it rather than re-typing four keys to change one. */
+export const DEFAULT_MONTH_PICKER_LABELS: MonthPickerLabels = {
+  previousYear: "Previous year",
+  nextYear: "Next year",
+  panel: "Choose a month",
+  month: (monthYear) => monthYear,
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  today: "Today",
+  yearPanel: "Choose a year",
+  earlierYears: "Earlier years",
+  laterYears: "Later years",
+  thisYear: "This year",
+};