@eifi1/ui-kit 0.51.7 → 0.52.0

package/dist/components/alert-banner.js

@@ -1,10 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+import { focusFirst, focusIsLost, tabStopsAround, whenFocusLeftForNothing } from "../lib/focus-left.js";
 const TONE_FRAME = {
   danger: "border-2 border-danger-strong bg-danger-soft",
   warning: "border-2 border-warning bg-warning-soft",
@@ -61,6 +62,7 @@ function AlertBanner({
   action,
   icon,
   onDismiss,
+  dismissFocusRef,
   dismissLabel,
   clampMobile = false,
   actionPlacement = "own-line",
@@ -93,6 +95,21 @@ function AlertBanner({
     ro?.observe(el);
     return () => ro?.disconnect();
   }, [clamp, expanded, children]);
+  const dismissedFrom = useRef(null);
+  const dismissTarget = useRef(dismissFocusRef);
+  useLayoutEffect(() => {
+    dismissTarget.current = dismissFocusRef;
+  });
+  const unwatchFocus = useRef(null);
+  useEffect(
+    () => () => {
+      unwatchFocus.current?.();
+      const around = dismissedFrom.current;
+      if (!around || !focusIsLost()) return;
+      focusFirst([dismissTarget.current?.current, ...around]);
+    },
+    []
+  );
   const Glyph = TONE_GLYPH[tone];
   const nudge = inlineRow || strip ? void 0 : sm ? "mt-px" : "mt-0.5";
   const glyph = icon === null ? null : icon !== void 0 ? /* @__PURE__ */ jsx(
@@ -181,6 +198,34 @@ function AlertBanner({
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
+        const frame2 = e.currentTarget.parentElement;
+        if (frame2 && e.currentTarget.ownerDocument.activeElement === e.currentTarget) {
+          const { after, before } = tabStopsAround(frame2);
+          dismissedFrom.current = [...after, ...before];
+          unwatchFocus.current?.();
+          const doc = frame2.ownerDocument;
+          const forget = () => {
+            dismissedFrom.current = null;
+            unwatch();
+          };
+          const onFocusIn = (event) => {
+            if (event.target instanceof Node && frame2.contains(event.target)) return;
+            forget();
+          };
+          const onFocusOut = (event) => {
+            whenFocusLeftForNothing(event, () => {
+              if (unwatchFocus.current === unwatch) forget();
+            });
+          };
+          const unwatch = () => {
+            doc.removeEventListener("focusin", onFocusIn, true);
+            frame2.removeEventListener("focusout", onFocusOut);
+            unwatchFocus.current = null;
+          };
+          doc.addEventListener("focusin", onFocusIn, true);
+          frame2.addEventListener("focusout", onFocusOut);
+          unwatchFocus.current = unwatch;
+        }
         onDismiss();
       },
       className: cn(

package/dist/components/alert-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-danger-strong bg-danger-soft\",\n  warning: \"border-2 border-warning bg-warning-soft\",\n  info: \"border-2 border-info bg-info-soft\",\n  success: \"border-2 border-success bg-success-soft\",\n  neutral: \"border border-subtle\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-surface shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout.\n *\n * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure\n * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,\n * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`\n * at 125 %, and toggling the tone shifted the layout again. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[calc(0.75rem-1px)]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(TONE_FRAME[tone], \"rounded-none border-0 border-b\", size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\");\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-secondary\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-muted\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  /**\n   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,\n   * with a \"More\" / \"Less\" toggle after it (`aria-expanded`, `aria-controls` the message;\n   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only\n   * shows while the line actually cuts the message off.\n   *\n   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above\n   * every phone screen, and the app built the clamp and the button around the banner's\n   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot\n   * sit inside the row's own link or button.\n   *\n   * 0.51 (kastlan K1): on a `strip` the clamped message claims 7rem instead of 12rem below\n   * `md`, so the {@link action} stays on its line rather than taking one of its own.\n   *\n   * For a one-line MESSAGE (a sentence or two). Not for a body with a list or a control in\n   * it: the clamp cuts the box to its first line, so a Disclosure's or a link's trigger\n   * past it is clipped out of sight and still takes the keyboard's focus, and \"More\" gives\n   * back the whole body at once. Shorten such a banner instead — one sentence, its action,\n   * and the rest behind a Disclosure of its own (keksdose's agree-again notice, 0.51).\n   */\n  clampMobile?: boolean;\n  /**\n   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.\n   *\n   * `own-line` (default): a line of its own under the message, lined up with it\n   * (kastlan 53 — a long message beside a long button squeezed into a column).\n   *\n   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the\n   * next line — for a short message and a short action, which a line of their own each\n   * would stack for nothing. keksdose dev #623: the budget card's \"5 underfunded\n   * categories\" + \"Assign\" built this with descendant overrides on the kit's classes.\n   * The basis is in rem, so it grows with the text size: at Large the action drops a\n   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works\n   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this\n   * already) and `inline`.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n  children: ReactNode;\n  /**\n   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit\n   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or\n   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside\n   * that row, the `<div>` holding the two. Hence `HTMLElement`.\n   */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  clampMobile = false,\n  actionPlacement = \"own-line\",\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ref,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds\n  // it all (then there is nothing to show \"More\" of). Measured while collapsed — the\n  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box\n  // changes size, which a rotation or crossing `md` does. With no layout (a test, the\n  // server) the box is 0 tall, which reads as \"may not fit\": the toggle stays.\n  const clamp = clampMobile && !interactive;\n  const bodyId = useId();\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  const [fits, setFits] = useState(false);\n  useLayoutEffect(() => {\n    const el = bodyRef.current;\n    if (!clamp || expanded || !el) return;\n    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);\n    check();\n    const ro = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(check);\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [clamp, expanded, children]);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box\n  // squeezed \"Please confirm your email address…\" into a ~100px column beside a\n  // \"Resend verification email\" button. There the action takes a line of its own under\n  // the message, and the × stays at the top end; from sm up the box is one row as before.\n  const boxAction = !inline && !strip && action !== undefined && action !== null;\n  // `flow` (0.48): glyph + message and the action in a row of their own that wraps\n  // below sm; the × stays outside it, at the top end.\n  const flow = boxAction && actionPlacement === \"flow\";\n  const boxWraps = boxAction && !flow;\n  const flowRow = cn(\"flex min-w-0 flex-1 items-center max-sm:flex-wrap\", sm ? \"gap-1.5\" : \"gap-2\");\n  // The 10rem the message keeps beside the action before the action wraps.\n  const flowBasis = flow ? \"max-sm:basis-40\" : undefined;\n  const row = cn(\n    inlineRow\n      ? \"inline-flex items-center\"\n      : strip\n        ? \"flex flex-wrap items-center gap-y-1\"\n        : cn(\"flex items-start\", boxWraps && \"max-sm:flex-wrap max-sm:gap-y-2\"),\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,\n  // which never makes a wrapping row wrap — the action and the × squeezed the message\n  // into a three-word column on a phone instead. With a real basis the action drops to\n  // a second line once message + action no longer fit, and the message keeps the width.\n  const grow = strip ? \"flex-[1_1_12rem]\" : \"flex-1\";\n  // …except a CLAMPED strip on a phone (0.51, kastlan K1 / prod #22, KX-5). There the\n  // message is one line whatever its width (the rest is behind \"More\"), so the 12rem only\n  // pushed the action under it: \"Erneut senden\" took a line of its own on a 390px phone,\n  // and kastlan's banner stood 71px where one line is 43. The clamp needs its \"More\" and\n  // the first words beside it, so below `md` the basis is 7rem (~4rem of text). Measured\n  // in Chromium at 390 × 844, kastlan's `mx-4` strip (326px inside): one line, 43px, in\n  // all seven catalogues, with Roboto and with the wider DejaVu Sans; French, the longest\n  // \"Send again\", keeps 8px. At 360px French (and Spanish in DejaVu) still drop a line.\n  // A rem basis like the 12rem, so at Large the action drops a line sooner, by itself.\n  // From `md` up the clamp is off and the 12rem holds; without `clampMobile` nothing moves.\n  const clampBasis = strip && clamp ? \"max-md:basis-28\" : undefined;\n  // Inside a whole-row banner's button or link, which then carries `grow` itself.\n  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing = cn(FOCUS_RING, \"focus-visible:ring-offset-1 focus-visible:ring-offset-surface\");\n\n  // The message's box: a `<div>` (0.51), so a banner may hold block content — keksdose's\n  // agree-again notice has a list and a Disclosure in it, which inside the `<span>` this was\n  // were block elements in phrasing content. A `<span>` still in a whole-row banner, whose\n  // `<a>` / `<button>` takes phrasing content only.\n  const Body = interactive ? \"span\" : \"div\";\n  const contentBody = clamp ? (\n    // Below `md` a row: the message, clamped, then the toggle on its baseline. From\n    // `md` up a plain box with the message in it, as without the prop. (Never a whole-row\n    // banner, so always a `<div>`.)\n    <div\n      className={cn(\n        !inlineRow && grow,\n        clampBasis,\n        \"min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2\",\n      )}\n    >\n      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's\n          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}\n      <div\n        id={bodyId}\n        ref={bodyRef}\n        data-truncate-ok=\"\"\n        className={cn(\"max-md:min-w-0\", !expanded && \"max-md:line-clamp-1\")}\n      >\n        {children}\n      </div>\n      {(expanded || !fits) && (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          onClick={() => setExpanded((v) => !v)}\n          className={cn(\n            \"relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden\",\n            focusRing,\n          )}\n        >\n          {expanded ? common.showLess : common.showMore}\n        </button>\n      )}\n    </div>\n  ) : (\n    <Body className={cn(!inlineRow && (nested ? \"flex-1\" : grow), \"min-w-0 text-start\")}>{children}</Body>\n  );\n  const content = (\n    <>\n      {glyph}\n      {contentBody}\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px\n  // past a 360 px phone at Extra large (the demo strip's \"Request access\" and \"Sign in\",\n  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,\n  // nothing changes.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div\n        className={cn(\n          \"relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2\",\n          !strip && !inlineRow && \"self-center\",\n          (strip || flow) && \"ms-auto\",\n          // Last, on a line of its own, lined up with the message (past the glyph).\n          boxWraps && cn(\"max-sm:order-last max-sm:basis-full\", glyph && (sm ? \"max-sm:ps-5\" : \"max-sm:ps-6\")),\n        )}\n      >\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a\n        // test or a caller's selector, where the frame classes are the kit's to change.\n        data-tone={tone}\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {flow ? (\n          <>\n            <div className={flowRow} data-action-flow=\"\">\n              {/* The glyph rides with the message, on its first line; the two are\n                  centred against the action as one, as the whole-row button is. */}\n              <div className={cn(\"flex min-w-0 flex-1 items-start\", flowBasis, sm ? \"gap-1.5\" : \"gap-2\")}>\n                {glyph}\n                {contentBody}\n              </div>\n              {trailing}\n            </div>\n          </>\n        ) : (\n          <>\n            {content}\n            {trailing}\n          </>\n        )}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 text-start\",\n        grow,\n        flowBasis,\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-focus focus-visible:after:ring-brand\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n  // The `ref` goes with the rest: to the row element when it is the frame.\n  const rowRef = split ? undefined : ref;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        ref={rowRef as Ref<HTMLAnchorElement> | undefined}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        ref={rowRef as Ref<HTMLButtonElement> | undefined}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      data-tone={tone}\n      {...rest}\n      ref={ref as Ref<HTMLDivElement>}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {flow ? (\n        // Not positioned: the row's stretched `after:` target must still cover the frame.\n        <div className={flowRow} data-action-flow=\"\">\n          {rowAction}\n          {trailing}\n        </div>\n      ) : (\n        <>\n          {rowAction}\n          {trailing}\n        </>\n      )}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { focusFirst, focusIsLost, tabStopsAround, whenFocusLeftForNothing } from \"../lib/focus-left\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-danger-strong bg-danger-soft\",\n  warning: \"border-2 border-warning bg-warning-soft\",\n  info: \"border-2 border-info bg-info-soft\",\n  success: \"border-2 border-success bg-success-soft\",\n  neutral: \"border border-subtle\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-surface shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout.\n *\n * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure\n * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,\n * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`\n * at 125 %, and toggling the tone shifted the layout again. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[calc(0.75rem-1px)]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(TONE_FRAME[tone], \"rounded-none border-0 border-b\", size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\");\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-secondary\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-muted\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /**\n   * Renders an × at the end that calls this. The banner does not hide itself — the\n   * caller removes it (and remembers that it did), as with every other kit control\n   * whose state is app state.\n   *\n   * The focus (0.52, refactor audit 2026-10-30, DSP-15): the × that held it goes with the\n   * banner, and it fell to `<body>`. When the banner unmounts after its × was pressed and\n   * the focus has nowhere else, it moves on to the next control after the banner — where\n   * Tab from the × would have gone — or, at the end of the page, the one before it; to\n   * {@link dismissFocusRef} when given. A banner the caller keeps keeps its ×'s focus.\n   */\n  onDismiss?: () => void;\n  /** Where the focus goes once the × has removed the banner (DSP-15) — a heading, the\n   *  control the banner was about. Default: the next control after the banner. */\n  dismissFocusRef?: RefObject<HTMLElement | null>;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  /**\n   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,\n   * with a \"More\" / \"Less\" toggle after it (`aria-expanded`, `aria-controls` the message;\n   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only\n   * shows while the line actually cuts the message off.\n   *\n   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above\n   * every phone screen, and the app built the clamp and the button around the banner's\n   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot\n   * sit inside the row's own link or button.\n   *\n   * 0.51 (kastlan K1): on a `strip` the clamped message claims 7rem instead of 12rem below\n   * `md`, so the {@link action} stays on its line rather than taking one of its own.\n   *\n   * For a one-line MESSAGE (a sentence or two). Not for a body with a list or a control in\n   * it: the clamp cuts the box to its first line, so a Disclosure's or a link's trigger\n   * past it is clipped out of sight and still takes the keyboard's focus, and \"More\" gives\n   * back the whole body at once. Shorten such a banner instead — one sentence, its action,\n   * and the rest behind a Disclosure of its own (keksdose's agree-again notice, 0.51).\n   */\n  clampMobile?: boolean;\n  /**\n   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.\n   *\n   * `own-line` (default): a line of its own under the message, lined up with it\n   * (kastlan 53 — a long message beside a long button squeezed into a column).\n   *\n   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the\n   * next line — for a short message and a short action, which a line of their own each\n   * would stack for nothing. keksdose dev #623: the budget card's \"5 underfunded\n   * categories\" + \"Assign\" built this with descendant overrides on the kit's classes.\n   * The basis is in rem, so it grows with the text size: at Large the action drops a\n   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works\n   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this\n   * already) and `inline`.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n  children: ReactNode;\n  /**\n   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit\n   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or\n   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside\n   * that row, the `<div>` holding the two. Hence `HTMLElement`.\n   */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissFocusRef,\n  dismissLabel,\n  clampMobile = false,\n  actionPlacement = \"own-line\",\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ref,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds\n  // it all (then there is nothing to show \"More\" of). Measured while collapsed — the\n  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box\n  // changes size, which a rotation or crossing `md` does. With no layout (a test, the\n  // server) the box is 0 tall, which reads as \"may not fit\": the toggle stays.\n  const clamp = clampMobile && !interactive;\n  const bodyId = useId();\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  const [fits, setFits] = useState(false);\n  useLayoutEffect(() => {\n    const el = bodyRef.current;\n    if (!clamp || expanded || !el) return;\n    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);\n    check();\n    const ro = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(check);\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [clamp, expanded, children]);\n\n  // The ×'s focus, once the caller has removed the banner (DSP-15). Where it can go is read\n  // at the press, while the banner still has a place in the page to measure from; whether\n  // it must is decided at the unmount, in the cleanup of a passive effect — after React has\n  // taken the banner's DOM away, when a focus that fell with it is on <body>.\n  const dismissedFrom = useRef<HTMLElement[] | null>(null);\n  const dismissTarget = useRef(dismissFocusRef);\n  useLayoutEffect(() => {\n    dismissTarget.current = dismissFocusRef;\n  });\n  // The note lives until the focus lands outside the banner (0.52 code review,\n  // alert-banner.tsx). A caller that keeps the banner — an async dismiss that failed, a\n  // snooze — left it standing, and the banner's unmount long after, a route change with\n  // the focus on <body>, sent the focus to a stop noted at the press, over the app's own\n  // handling of a new page. A `focusin` on the document, not a `focusout` on the banner:\n  // a browser that blurs a removed node would drop the note at the very removal it is for.\n  // The one `focusout` heard is a move to nothing — a click on the page — and only once a\n  // microtask has shown the × still in place (`whenFocusLeftForNothing`). A focus that\n  // stays on the × keeps the note, however late the removal: that is DSP-15's own case,\n  // an async dismiss whose request resolves.\n  const unwatchFocus = useRef<(() => void) | null>(null);\n  useEffect(\n    () => () => {\n      unwatchFocus.current?.();\n      const around = dismissedFrom.current;\n      if (!around || !focusIsLost()) return;\n      focusFirst([dismissTarget.current?.current, ...around]);\n    },\n    [],\n  );\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box\n  // squeezed \"Please confirm your email address…\" into a ~100px column beside a\n  // \"Resend verification email\" button. There the action takes a line of its own under\n  // the message, and the × stays at the top end; from sm up the box is one row as before.\n  const boxAction = !inline && !strip && action !== undefined && action !== null;\n  // `flow` (0.48): glyph + message and the action in a row of their own that wraps\n  // below sm; the × stays outside it, at the top end.\n  const flow = boxAction && actionPlacement === \"flow\";\n  const boxWraps = boxAction && !flow;\n  const flowRow = cn(\"flex min-w-0 flex-1 items-center max-sm:flex-wrap\", sm ? \"gap-1.5\" : \"gap-2\");\n  // The 10rem the message keeps beside the action before the action wraps.\n  const flowBasis = flow ? \"max-sm:basis-40\" : undefined;\n  const row = cn(\n    inlineRow\n      ? \"inline-flex items-center\"\n      : strip\n        ? \"flex flex-wrap items-center gap-y-1\"\n        : cn(\"flex items-start\", boxWraps && \"max-sm:flex-wrap max-sm:gap-y-2\"),\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,\n  // which never makes a wrapping row wrap — the action and the × squeezed the message\n  // into a three-word column on a phone instead. With a real basis the action drops to\n  // a second line once message + action no longer fit, and the message keeps the width.\n  const grow = strip ? \"flex-[1_1_12rem]\" : \"flex-1\";\n  // …except a CLAMPED strip on a phone (0.51, kastlan K1 / prod #22, KX-5). There the\n  // message is one line whatever its width (the rest is behind \"More\"), so the 12rem only\n  // pushed the action under it: \"Erneut senden\" took a line of its own on a 390px phone,\n  // and kastlan's banner stood 71px where one line is 43. The clamp needs its \"More\" and\n  // the first words beside it, so below `md` the basis is 7rem (~4rem of text). Measured\n  // in Chromium at 390 × 844, kastlan's `mx-4` strip (326px inside): one line, 43px, in\n  // all seven catalogues, with Roboto and with the wider DejaVu Sans; French, the longest\n  // \"Send again\", keeps 8px. At 360px French (and Spanish in DejaVu) still drop a line.\n  // A rem basis like the 12rem, so at Large the action drops a line sooner, by itself.\n  // From `md` up the clamp is off and the 12rem holds; without `clampMobile` nothing moves.\n  const clampBasis = strip && clamp ? \"max-md:basis-28\" : undefined;\n  // Inside a whole-row banner's button or link, which then carries `grow` itself.\n  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing = cn(FOCUS_RING, \"focus-visible:ring-offset-1 focus-visible:ring-offset-surface\");\n\n  // The message's box: a `<div>` (0.51), so a banner may hold block content — keksdose's\n  // agree-again notice has a list and a Disclosure in it, which inside the `<span>` this was\n  // were block elements in phrasing content. A `<span>` still in a whole-row banner, whose\n  // `<a>` / `<button>` takes phrasing content only.\n  const Body = interactive ? \"span\" : \"div\";\n  const contentBody = clamp ? (\n    // Below `md` a row: the message, clamped, then the toggle on its baseline. From\n    // `md` up a plain box with the message in it, as without the prop. (Never a whole-row\n    // banner, so always a `<div>`.)\n    <div\n      className={cn(\n        !inlineRow && grow,\n        clampBasis,\n        \"min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2\",\n      )}\n    >\n      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's\n          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}\n      <div\n        id={bodyId}\n        ref={bodyRef}\n        data-truncate-ok=\"\"\n        className={cn(\"max-md:min-w-0\", !expanded && \"max-md:line-clamp-1\")}\n      >\n        {children}\n      </div>\n      {(expanded || !fits) && (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          onClick={() => setExpanded((v) => !v)}\n          className={cn(\n            \"relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden\",\n            focusRing,\n          )}\n        >\n          {expanded ? common.showLess : common.showMore}\n        </button>\n      )}\n    </div>\n  ) : (\n    <Body className={cn(!inlineRow && (nested ? \"flex-1\" : grow), \"min-w-0 text-start\")}>{children}</Body>\n  );\n  const content = (\n    <>\n      {glyph}\n      {contentBody}\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        const frame = e.currentTarget.parentElement;\n        // Only a × that holds the focus has one to lose (0.52 code review, alert-banner.tsx):\n        // Safari focuses no button on a click, nor on an iOS tap, and with the focus on\n        // <body> already the removal sent it on — a ring, on a form field the on-screen\n        // keyboard, on a page the user was reading with the pointer.\n        if (frame && e.currentTarget.ownerDocument.activeElement === e.currentTarget) {\n          const { after, before } = tabStopsAround(frame);\n          dismissedFrom.current = [...after, ...before];\n          unwatchFocus.current?.();\n          const doc = frame.ownerDocument;\n          const forget = () => {\n            dismissedFrom.current = null;\n            unwatch();\n          };\n          const onFocusIn = (event: FocusEvent) => {\n            if (event.target instanceof Node && frame.contains(event.target)) return;\n            forget();\n          };\n          // Focus that left for nothing — a click on the page — took no `focusin` with it\n          // (0.52 code review): the user moved on all the same.\n          const onFocusOut = (event: FocusEvent) => {\n            whenFocusLeftForNothing(event, () => {\n              if (unwatchFocus.current === unwatch) forget();\n            });\n          };\n          const unwatch = () => {\n            doc.removeEventListener(\"focusin\", onFocusIn, true);\n            frame.removeEventListener(\"focusout\", onFocusOut);\n            unwatchFocus.current = null;\n          };\n          doc.addEventListener(\"focusin\", onFocusIn, true);\n          frame.addEventListener(\"focusout\", onFocusOut);\n          unwatchFocus.current = unwatch;\n        }\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px\n  // past a 360 px phone at Extra large (the demo strip's \"Request access\" and \"Sign in\",\n  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,\n  // nothing changes.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div\n        className={cn(\n          \"relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2\",\n          !strip && !inlineRow && \"self-center\",\n          (strip || flow) && \"ms-auto\",\n          // Last, on a line of its own, lined up with the message (past the glyph).\n          boxWraps && cn(\"max-sm:order-last max-sm:basis-full\", glyph && (sm ? \"max-sm:ps-5\" : \"max-sm:ps-6\")),\n        )}\n      >\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a\n        // test or a caller's selector, where the frame classes are the kit's to change.\n        data-tone={tone}\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {flow ? (\n          <>\n            <div className={flowRow} data-action-flow=\"\">\n              {/* The glyph rides with the message, on its first line; the two are\n                  centred against the action as one, as the whole-row button is. */}\n              <div className={cn(\"flex min-w-0 flex-1 items-start\", flowBasis, sm ? \"gap-1.5\" : \"gap-2\")}>\n                {glyph}\n                {contentBody}\n              </div>\n              {trailing}\n            </div>\n          </>\n        ) : (\n          <>\n            {content}\n            {trailing}\n          </>\n        )}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 text-start\",\n        grow,\n        flowBasis,\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-focus focus-visible:after:ring-brand\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n  // The `ref` goes with the rest: to the row element when it is the frame.\n  const rowRef = split ? undefined : ref;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        ref={rowRef as Ref<HTMLAnchorElement> | undefined}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        ref={rowRef as Ref<HTMLButtonElement> | undefined}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      data-tone={tone}\n      {...rest}\n      ref={ref as Ref<HTMLDivElement>}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {flow ? (\n        // Not positioned: the row's stretched `after:` target must still cover the frame.\n        <div className={flowRow} data-action-flow=\"\">\n          {rowAction}\n          {trailing}\n        </div>\n      ) : (\n        <>\n          {rowAction}\n          {trailing}\n        </>\n      )}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":["frame"]}

package/dist/components/amount-input.d.ts

@@ -281,4 +281,17 @@ export interface AmountInputProps extends FieldHelpProps, DataAttributes {
      *  was `forwardRef`. */
     ref?: Ref<HTMLInputElement>;
 }
+/**
+ * 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.
+ */
+declare const TONE_CLASS: Readonly<Record<NonNullable<AmountInputProps["tone"]>, string>>;
+export { TONE_CLASS as AMOUNT_TONE_CLASS };
 export declare function AmountInput(props: AmountInputProps): import("react").JSX.Element;

package/dist/components/amount-input.js

@@ -324,6 +324,7 @@ function LockedOrNot({
   return /* @__PURE__ */ jsx(LockedReason, { lock, display, className: "block w-full", children });
 }
 export {
+  TONE_CLASS as AMOUNT_TONE_CLASS,
   AmountInput
 };
 //# sourceMappingURL=amount-input.js.map

package/dist/components/amount-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { useId, useMemo, useRef } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { CurrencyOptionList, getCurrency } from \"./currency-option-list\";\nimport { useComboboxCore } from \"./combobox-core\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from \"./field-base\";\nimport { cn } from \"../lib/cn\";\nimport { currencyMinorDigits } from \"../lib/format\";\nimport { roundHalfAway } from \"../lib/round\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type CurrencyLabels,\n} from \"../i18n/kit-labels\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\nimport {\n  FieldCaption,\n  LockedReason,\n  mergeRefs,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n  type LockReason,\n} from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\nimport { dataAttributes, type DataAttributes } from \"../lib/data-attributes\";\n\n/** {@link AmountInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n *  wrapper typed itself off `ComponentProps<typeof AmountInput>` until then. */\nexport interface AmountInputProps extends FieldHelpProps, DataAttributes {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the amount, in the caller's own words — {@link Input}'s `error`\n   * (keksdose K4: \"exceeds the outstanding balance\" was a loose `<p>` beside the field\n   * that nothing pointed at). Rendered under the field, after a text `hint`; merged into\n   * `aria-describedby` after the caller's ids and the hint's; implies `invalid`, so the\n   * field paints as well as announces. `null`, `false` and `\"\"` are no message.\n   * {@link MoneyField} takes it too.\n   */\n  error?: ReactNode;\n  /**\n   * Show the desktop calculator trigger (default `true`). `false` for an amount in an\n   * ephemeral close-on-blur editor — a budget's assigned cell, a VAT cell (keksdose K6)\n   * — where a click on the icon blurs the field and tears the editor down before the\n   * popover can open. Typing a calculation (\"200+50\", then Enter) still evaluates, and\n   * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.\n   */\n  calculator?: boolean;\n  /** The field's WRAPPER — width, a margin, a flex share. The `<input>` is\n   *  `inputClassName`'s. */\n  className?: string;\n  /**\n   * Classes for the `<input>` itself — {@link NumberInput}'s and {@link Input}'s prop of\n   * the same name, merged the same way: after everything the field sets for LOOKS — the\n   * base classes, the plain end padding, the display shape's centring and the `tone`\n   * colour — so it can restyle the figure (`text-end` for a money column whose decimal\n   * points line up, `font-medium`, a tighter `py-1` or a symmetric `px-2` in a table\n   * cell, `text-transparent` while a figure is being re-fetched), and before what the\n   * field needs to WORK: the end padding the calculator and the currency chip reserve,\n   * and the invalid border. Neither of those can be taken away by accident — a caller's\n   * `px-2` keeps its start edge and the digits still stop short of the chip, and a\n   * borderless cell's `border-transparent` still turns red when the value is wrong.\n   *\n   * keksdose G7: the invoice's VAT cell right-aligns its figure, and with only\n   * `className` (the wrapper) it reached the element through `[&_input]:text-end` — a\n   * descendant selector that depends on the field's inner markup, which the kit is free\n   * to change, and that a reader of the call site has to decode. {@link MoneyField}\n   * passes it through, and `RhfMoneyField` takes it too.\n   *\n   * keksdose 0.24: until then it sat BEFORE the plain end padding (`pe-3`) and the tone,\n   * so the budget's assigned cell could not make its padding symmetric (`px-2` came out\n   * `px-2 pe-3`) and the holdings price could not hide an outflow-toned figure while\n   * re-fetching — both were back on `[&_input]:` selectors on the wrapper.\n   */\n  inputClassName?: string;\n  id?: string;\n  /** Names the field when it has no visible `label` (a table cell, the display shape). */\n  \"aria-label\"?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the\n   * hint and error are described, a required amount is announced as required, and\n   * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n   */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  /**\n   * BCP 47 tag for this field — {@link NumberInput}'s `locale` (0.34, DUP-10): the decimal\n   * mark the field SHOWS and reads typing in (\"1,5\" for fr-CH, \"1.5\" for de-CH, as `Intl`\n   * decides), and the language of the currency picker's search. Default the\n   * `<UiKitProvider locale>`, else the runtime's. `value` and `onChange` stay\n   * dot-decimal.\n   */\n  locale?: string;\n  /** {@link NumberInput}'s `hint`, the same rule: a {@link FieldHint} \"?\" rides the\n   *  label's own line, beside the label (not at the far end, where the calculator and\n   *  the currency chip live); plain TEXT (a string or a number) is a caption UNDER\n   *  the field, attached through `aria-describedby` after the caller's own. A phone's\n   *  `variant=\"display\"` has no visible label, so a FieldHint is dropped there; a\n   *  caption still shows.\n   *\n   *  Since 0.34 a FieldHint is that caption at Large and on a touch screen, as on\n   *  NumberInput since 0.32 (`useInlineHint`, docs/text-size-harmonization.md §4: a fact\n   *  a finger cannot hover open is printed). A `HelpPopover` — help, not a fact (§10.23)\n   *  — stays on the label line at every size. */\n  hint?: ReactNode;\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. Each key optional, and each a per-field\n   *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`\n   *  and `currencySearch` of its `currency` namespace, the rest of `calculator`.\n   *  `currency` names the picker chip, composed with the selected code through\n   *  `common.fieldValue`; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Translated currency names for the chip's picker, keyed by ISO code. The same\n   *  sparse override `CurrencySelect` takes, and for the same reason: the names in\n   *  `CURRENCIES` are shipped data, so without this they are the one English word\n   *  left in a translated row. Not part of `labels` because it is keyed by DATA\n   *  rather than by a fixed set of slots, and an app passes the same map to both\n   *  pickers. */\n  currencyNames?: Record<string, string>;\n  /** Offer only these ISO codes in the chip's list, in this order — `CurrencySelect`'s\n   *  `options`, since the chip renders CurrencySelect's list (round 0.34 Wave 2, DUP-4).\n   *  Default every currency the kit knows. */\n  currencyOptions?: string[];\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   *\n   * Since 0.15.5 it is drawn on its own too, for a read-only or disabled signed figure\n   * (an \"Items total\" of −5.18): no `onNegativeChange` needed just to show the minus.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n  /**\n   * Decimals the committed amount is rounded to (kastlan 0.12: \"12.345\" and a\n   * calculator's \"100/3\" reached a `Numeric(10,2)` column unrounded and failed with a\n   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With\n   * no `currency`, nothing is rounded unless this is set. Rounding is half away from\n   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on\n   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left\n   * alone, so \"12.3\" can still become \"12.34\".\n   *\n   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of\n   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at\n   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a\n   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's\n   * scale: `digits={4}`, `digits={6}`.\n   *\n   * **Set `digits` for any sub-currency scale** — not only a price: any field whose\n   * column holds more decimals than the currency's minor unit. A split line stored at\n   * the ledger's 4dp (`Numeric(18,4)`) and loaded as 12.3456 is SHOWN as 12.35, and\n   * committed as 12.35 as soon as the user tabs through it (blur settles) — so the form\n   * no longer equals what the server holds: the lines stop summing to the 4dp total,\n   * and Save is held (keksdose live #240). With a `currency`, every commit rounds to that currency's\n   * minor unit unless `digits` says otherwise: pass the column's scale (`digits={4}`).\n   */\n  digits?: number;\n  /** The smallest amount the field settles on. A lower figure is raised to it when it\n   *  settles, like `digits`. Compared with the signed figure. */\n  min?: number;\n  /** The largest amount the field settles on (a deposit release capped at the\n   *  balance). A higher figure is lowered to it when it settles. */\n  max?: number;\n  /**\n   * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the\n   * numpad's \"=\" and once per calculator session (its \"=\" or Enter in its display, or\n   * the pad closing on a result not committed yet), never on a keystroke (\"1200+\" is\n   * not a figure yet). `onChange` still reports every keystroke and every result the\n   * calculator writes back; this is for a host that stores a number and must not see\n   * drafts (kastlan 52; see {@link MoneyField}, which is built on it).\n   *\n   * Refactor audit 2026-10-30, INP-1: every calculator keystroke that resolved used to\n   * commit, so \"100+50\" committed 105 on its way to 150 — keksdose saved both, and its\n   * threshold field, `disabled` while it saves, lost the calculator to the first.\n   */\n  onCommit?: (value: string) => void;\n  /**\n   * Why the amount cannot be changed — {@link NumberInput}'s `disabledReason` (0.34,\n   * round 0.34 C2), for an amount that SAVES itself: a budget row's assigned cell, a\n   * price committed on blur. `disabled` takes the field out of the tab order, so the\n   * reason never reached a keyboard.\n   *\n   * With a reason the field stays in the tab order and shows its figure, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`. Nothing\n   * changes the amount: the calculator and the phone's numpad are not offered, the\n   * currency chip is a read-out rather than a picker, and neither blur nor Enter\n   * settles — so `onChange`, `onCommit`, `onNegativeChange` and `onCurrencyChange` are\n   * never called. Enter is swallowed, so the field does not submit the form around it.\n   * The reason is a line under the field at Large and on a touch screen, else in the kit\n   * {@link Tooltip} (`disabledReasonDisplay`), and on the input's `aria-describedby`,\n   * between the caption and the error. Wins over `disabled`. {@link MoneyField} and\n   * `RhfMoneyField` take it too.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This amount COMMITS — {@link Button}'s `commit`, NumberInput's: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). An amount that only reaches the server through its form's\n   * Save leaves this off and stays editable under the lock; the Save takes `commit`. No\n   * provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A settled figure, rounded to `digits` (half away from zero) and clamped to\n * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression\n * comes back as it was. Rounding is `lib/round.ts`'s, shared with `roundToCurrency`\n * (BUG-11: this copy blanked \"0.0000001\" and a 22-digit figure on blur).\n */\nfunction settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {\n  const t = text.trim();\n  if (!/^-?\\d*\\.?\\d*$/.test(t) || !/\\d/.test(t)) return text;\n  let n = Number(t);\n  if (!Number.isFinite(n)) return text;\n  if (digits !== undefined) n = roundHalfAway(n, digits);\n  if (min !== undefined && n < min) n = min;\n  if (max !== undefined && n > max) n = max;\n  const out = formatResult(n);\n  // Unchanged figures keep their own spelling (\"12.50\" stays \"12.50\").\n  return Number(out) === Number(t) ? text : out;\n}\n\n// The locale's decimal mark and the grouping parse (kastlan 40, keksdose G1) live in\n// `lib/decimal-marks.ts`, read through the engine NumberInput and this field share\n// (`numeric-field.ts`, DUP-10).\n\n// The consuming app's ONE money palette (`--money-expense` / `--money-income`),\n// not a bespoke rose/emerald pairing: a figure being typed has to wear the same\n// colour the same figure will wear once it is a row in the table behind the form\n// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`\n// variant is needed and they win over the field's own text colour regardless of\n// where `cn` puts them.\nconst TONE_CLASS: Record<\"neutral\" | \"outflow\" | \"inflow\", string> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\");\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string, settle: (text: string) => string): boolean {\n  const n = evaluateExpression(previous);\n  // Compared settled, since the field rounds what the calculator hands it.\n  return n !== null && settle(formatResult(n)) === text.trim();\n}\n\nexport function AmountInput(props: AmountInputProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    currency,\n    onCurrencyChange,\n    placeholder,\n    label,\n    className,\n    inputClassName,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-required\": ariaRequired,\n    autoFocus,\n    tone = \"neutral\",\n    negative = false,\n    onNegativeChange,\n    align = \"start\",\n    labels,\n    currencyNames,\n    currencyOptions,\n    digits: digitsProp,\n    min,\n    max,\n    onCommit,\n    disabledReasonDisplay,\n  } = props;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n  // magnitude; the minus is glued on here and taken off again in handleText, so\n  // the two can never disagree and the caller can never double-apply it. Only in\n  // front of a bare amount: an expression being typed (\"12-30\") owns its own\n  // minus and has to survive keystroke-for-keystroke.\n  const signOwned = onNegativeChange !== undefined;\n  // The sign is DRAWN whenever `negative` says so, handler or not (keksdose live #366):\n  // a read-only or disabled total (\"−5.18\") used to need a dummy `onNegativeChange`\n  // just to show its minus. Without the handler there is nothing to toggle — a typed\n  // minus simply stays in the text, as in any field without a direction control.\n  const shown = negative && isBareAmount(value) ? `-${value}` : value;\n  // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a\n  // fr-CH user typed \"1,5\" and watched it turn into \"1.5\" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all\n  // stay dot-decimal, because that string is the contract: RhfMoneyField's\n  // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read\n  // it. The way back is free: {@link sanitizeLive} already folds a typed \",\" into\n  // \".\", so a comma typed, pasted or tapped on the numpad lands as a dot.\n  //\n  // One character for one character, and no digit grouping: the caret stays where\n  // the typist put it, and \"1.000\" cannot be read back as a thousand in one locale\n  // and as one in the other. de-CH and it-CH are \".\" — CLDR says so, and this\n  // follows `Intl` rather than a guess about a country. The field's own `locale`,\n  // else the provider's (0.34, DUP-10).\n  const locale = useKitLocale(props.locale);\n  // Decimals the figure settles to: `digits`, else the currency's minor unit.\n  const digits = digitsProp ?? currencyMinorDigits(currency);\n  const settle = (text: string) => settleAmount(text, digits, min, max);\n  // The engine NumberInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n  // changes or settles — see `disabledReason`), the hint — a FieldHint is its words at\n  // Large and on touch, §4 — the error, the description's order, the typist's draft\n  // in the locale's mark, the calculator and the numpad. On a phone the OS keyboard\n  // is suppressed for the numpad sheet (feedback #334), and the display shape keys off\n  // the SAME phone layout, so the two can never drift apart on the breakpoint.\n  //\n  // A value the HOST set (not one typed here) is shown at the currency's minor unit\n  // while the field is not being edited: an FX estimate of 93.4213 showed four\n  // decimals (keksdose live #356). Display only — `value` is the host's, untouched.\n  const numeric = useNumericField(props, {\n    settle,\n    display: (focused) => (focused ? shown : settleAmount(shown, digits)),\n  });\n  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, draft, setDraft, derived } =\n    numeric;\n  const invalid = numeric.isInvalid;\n  // A locked or disabled chip is a read-out: picking a currency is a change too.\n  const editable = !!onCurrencyChange && !locked && !off;\n  // Room for the trailing controls — the calculator and the currency chip — once\n  // measured, as NumberInput reserves its own (keksdose live #367, DUP-10): their\n  // width, the track's `end-1` inset in the boxed shape, and NumberInput's 4px gap.\n  // Before that (the first paint, and wherever there is no layout) the classes below\n  // stand in. showCalc is always false on a phone, so the display shape only has to\n  // clear the chip, by its own width rather than the boxed shape's room (feedback #430\n  // rework: on a 375px screen 16px decide between a readable figure and a clipped one).\n  const hasEnd = showCalc || Boolean(currency);\n  const [endRef, endWidth] = useEndWidth(hasEnd);\n  const trailingRoom = asDisplay\n    ? currency\n      ? editable\n        ? \"pe-16\"\n        : \"pe-12\"\n      : undefined\n    : showCalc\n      ? currency\n        ? editable\n          ? \"pe-24\"\n          : \"pe-16\"\n        : \"pe-10\"\n      : currency\n        ? editable\n          ? \"pe-20\"\n          : \"pe-14\"\n        : undefined;\n  const innerRef = useRef<HTMLInputElement>(null);\n  const setRefs = useMemo(() => mergeRefs(innerRef, ref), [ref]);\n  // While the typist is typing, the field shows THEIR text (\"1.234,5\" stays exactly\n  // that), not the value re-spelt: re-spelling turned a grouping \".\" into a \",\" under\n  // their fingers, after which no rule could tell the two apart (keksdose G1). The\n  // draft only while it says what the field holds AND holds nothing the live\n  // sanitising would drop — a letter, a second decimal point (see `showsTyped`); a\n  // value set from outside, a calculator result or a commit shows the derived spelling.\n  const display =\n    draft === null\n      ? derived\n      : (numeric.typedFor(shown) ??\n        // The caller owns the sign: the typed \"12\" is shown as the \"-12\" it is.\n        (signOwned && negative && shown.startsWith(\"-\") && numeric.typedFor(shown.slice(1)) !== null\n          ? `-${draft}`\n          : derived));\n  // Every route into the field — typing, the numpad sheet, the desktop\n  // calculator, the blur/Enter commit — funnels through here, so the split is\n  // written once and the four entry paths cannot drift.\n  //\n  // `previous` is the text this one REPLACES, and it is what says whether a bare\n  // figure arriving here is an answer or a magnitude. For the three paths that\n  // edit the field's own text that is simply what the field was showing; the\n  // desktop calculator keeps its expression in a popover the field never sees,\n  // so it passes it in (see `CalculatorButton`'s `onChange`).\n  const handleText = (raw: string, previous: string = shown) => {\n    const text = sanitizeLive(raw);\n    if (!signOwned) {\n      onChange(text);\n      return;\n    }\n    const { sign, rest } = splitLeadingSign(text);\n    if (sign) {\n      // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n      onNegativeChange(sign === \"-\");\n    } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text, settle)) {\n      // A calculation that just RESOLVED states its sign in both directions. The\n      // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n      // so a positive result has to move the chip too, or the field would answer\n      // that sum with \"-18\" and contradict the arithmetic it just showed.\n      //\n      // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n      // arriving on top of an expression is far more often a replacement than an\n      // answer, and reading it as an answer flips the direction of money.\n      onNegativeChange(false);\n    }\n    onChange(sign ? rest : text);\n  };\n  const commit = () => {\n    setDraft(null);\n    const settled = settle(commitExpression(shown));\n    handleText(settled);\n    onCommit?.(settled);\n  };\n  const typed = (raw: string) => handleText(numeric.read(raw));\n  // The currency list is CurrencySelect's (round 0.34 Wave 2, DUP-4) on the picker\n  // family's core: the chip was a hand copy of it and had drifted (no wrap at Large, no\n  // `options` subset, no check mark, no listbox id, no #308 width), and both were plain\n  // buttons under a listbox promise. `filter: false`: the list filters its own rows.\n  const core = useComboboxCore<string>({ filter: false, backCloses: true });\n  // `chipRef`: the chip the currency list hangs off (Keksdose dev#548: portalled, so the\n  // panel needs a real trigger rect rather than a relative parent). It is also where\n  // Escape and a pick hand focus back (round 0.34 BUG-1): Safari does not focus a\n  // clicked button, so \"whatever held focus\" is not the chip.\n  const { open, setOpen, closeToTrigger, triggerRef: chipRef } = core;\n  const listboxId = `${generatedId}-currencies`;\n  // A lock arriving while the list is up closes it, as on CountrySelect — adjusted\n  // while rendering, so no frame shows a list that can no longer be used.\n  if (!editable && open) setOpen(false);\n\n  // The currency chip's strings are the `currency` namespace — the same two\n  // `CurrencySelect` resolves, under this component's older key names. The\n  // calculator and the numpad resolve `calculator` themselves; `labels.calculator`\n  // and `labels.pad` are handed straight through to them as overrides.\n  // The two strings read out first, so the memo depends on them and not on the\n  // caller's `labels` object (a new one every render) — what the React Compiler infers.\n  const currencyLabel = labels?.currency;\n  const currencySearchLabel = labels?.currencySearch;\n  const currencyOverrides = useMemo(() => {\n    const out: Partial<CurrencyLabels> = {};\n    if (currencyLabel !== undefined) out.currency = currencyLabel;\n    if (currencySearchLabel !== undefined) out.search = currencySearchLabel;\n    return out;\n  }, [currencyLabel, currencySearchLabel]);\n  const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n  const selected = getCurrency(currency);\n\n  return (\n    <div {...dataAttributes(props)} className={cn(\"w-full\", className)}>\n      {/* Inner relative box holds the input + its absolutely-positioned\n          trailing controls (calculator / currency), so those stay anchored to\n          the INPUT even when the mobile math bar is rendered below (#334). It is\n          the kit's FloatingField, which draws the label — floating, or sr-only in\n          the display shape — and puts a FieldHint on the label's line, as it does\n          for NumberInput. */}\n      {/* Locked, the field sits in the reason's frame (LockedReason: the line, or the\n          Tooltip), as NumberInput does; the root above keeps `className`, so nothing\n          reflows. */}\n      <LockedOrNot lock={lock} display={disabledReasonDisplay}>\n        <FloatingField\n          className=\"w-full\"\n          htmlFor={fieldId}\n          label={label}\n          srOnlyLabel={asDisplay}\n          hint={numeric.hint.labelHint}\n        >\n          <input\n            ref={setRefs}\n            id={fieldId}\n            aria-label={ariaLabel}\n            type=\"text\"\n            // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n            autoFocus={autoFocus}\n            // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n            // field keeps focus/caret. Desktop keeps the native decimal keypad.\n            inputMode={isMobile ? \"none\" : \"decimal\"}\n            autoComplete=\"off\"\n            disabled={off}\n            // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n            readOnly={locked || undefined}\n            aria-disabled={locked || undefined}\n            // The floating-label pattern needs a blank placeholder for its\n            // peer-placeholder-shown trick. The display shape has no floating label,\n            // so it spends the placeholder on what an empty borderless form actually\n            // needs: a zero to aim at, at full size. The caller supplies it because\n            // only the app knows the locale's decimal separator.\n            placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : placeholder}\n            value={display}\n            onChange={(e) => {\n              if (!locked) typed(e.target.value);\n            }}\n            onFocus={() => setFocused(true)}\n            onBlur={() => {\n              // Nothing settles under the lock — not even a draft typed before it arrived,\n              // which stays in the field for when it lifts.\n              if (!locked) commit();\n              setFocused(false);\n            }}\n            onKeyDown={(e) => {\n              if (e.key !== \"Enter\") return;\n              // Locked: Enter submits no form and settles nothing.\n              if (locked) e.preventDefault();\n              else commit();\n            }}\n            className={cn(\n              // With a label, use the floating-input padding (pt-4 pb-1) like every\n              // other labelled field so the value sits BELOW the floated label rather\n              // than vertically centred where it overlaps the resting label\n              // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n              // transparent-placeholder bits.\n              asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n              // The plain end padding, with nothing trailing: cosmetic, so the caller's\n              // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).\n              !trailingRoom && (asDisplay ? \"pe-0\" : \"pe-3\"),\n              // Centred display shape: centre in what is LEFT of the currency chip.\n              // `text-center` alone would centre the figure in the whole box, i.e.\n              // partly underneath the chip; the padding below is what takes the chip\n              // out of the centring, and nothing is added at the start because a\n              // mirrored reservation would spend the width twice (see `align`).\n              asDisplay && align === \"center\" && \"text-center\",\n              // Over the base class's own text colour.\n              TONE_CLASS[tone],\n              // The caller's, over all of the above — base, plain padding, alignment and\n              // tone — and under only what the field needs to work (see `inputClassName`).\n              inputClassName,\n              // Room for the trailing controls, after the caller's so a `px-2` cannot run\n              // the digits under the chip (NumberInput's order, which reserves its unit\n              // and calculator the same way).\n              trailingRoom,\n              invalid && FIELD_INVALID,\n              locked && \"cursor-not-allowed\",\n            )}\n            // The classes above are the fallback; once measured the field reserves exactly\n            // its trailing controls' width, inline so it wins over every class (see\n            // `trailingRoom`).\n            style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + (asDisplay ? 4 : 8) } : undefined}\n            aria-invalid={invalid || undefined}\n            aria-describedby={numeric.describedBy}\n            aria-required={ariaRequired}\n          />\n          {/* The label is FloatingField's, after these children (the floating trick\n          reads the input through `peer-*`). The display shape drops it VISUALLY,\n          not from the accessibility tree: a 36px tinted figure at the top of a\n          transaction form is legibly the amount, but a screen reader still needs\n          the name, and callers that pass `label` without `aria-label` would\n          otherwise be left with none. */}\n          {/* Trailing controls share one flex track so the calculator icon and the\n          currency suffix/picker sit side by side without overlapping. */}\n          {/* The display shape has no box to inset from, so the controls align to the\n          figure's own end edge and its baseline strip (`bottom-1`, matching the\n          input's pb-1) instead of floating inside a field. */}\n          <div\n            // Measured for the input's end padding (see `trailingRoom`).\n            ref={endRef}\n            className={cn(\n              \"absolute flex items-center gap-0.5\",\n              // Logical `end-*`: the chip and the calculator are the figure's trailing\n              // controls, so a right-to-left form carries them on the left.\n              asDisplay ? \"bottom-1 end-0\" : \"inset-y-1 end-1\",\n            )}\n          >\n            {showCalc && (\n              <CalculatorButton\n                // The mark the field shows but not the typist's grouping: the evaluator\n                // reads either mark, and \"1.234,5\" is two of them. The result comes back\n                // dot-decimal.\n                value={derived}\n                // Live: every result, settled, so the field never shows more decimals than\n                // it will keep. The commit is the session's one (INP-1): its \"=\", or the pad\n                // closing on a newer result — not each figure on the way to the result.\n                onChange={(result, expression) => {\n                  setDraft(null);\n                  handleText(settle(result), expression);\n                }}\n                onCommit={(result) => onCommit?.(settle(result))}\n                className=\"px-1.5\"\n                aria-label={labels?.calculatorTrigger}\n                labels={labels?.calculator}\n              />\n            )}\n            {currency && !editable && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"pointer-events-none px-1 font-medium text-muted\",\n                  // A text-xs chip next to a 36px figure reads as a stray footnote.\n                  asDisplay ? \"text-sm\" : \"text-xs\",\n                )}\n              >\n                {currency}\n              </span>\n            )}\n            {currency && editable && (\n              <button\n                ref={chipRef}\n                type=\"button\"\n                onClick={() => setOpen((v) => !v)}\n                // A button that opens a listbox, and says so: the chip is a control inside\n                // a text field, not a field of its own, so not a combobox.\n                aria-haspopup=\"listbox\"\n                aria-expanded={open}\n                aria-controls={listboxId}\n                aria-label={\n                  // \"Currency: EUR\" through `common.fieldValue`, not a template literal:\n                  // the colon-and-space is punctuation a translation has to own.\n                  selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency\n                }\n                className={cn(\n                  \"flex items-center gap-1 rounded px-2 py-1 font-medium text-secondary hover:bg-hover\",\n                  asDisplay ? \"text-sm\" : \"text-xs\",\n                )}\n              >\n                {currency}\n                <ChevronDown className=\"size-3\" />\n              </button>\n            )}\n          </div>\n          {editable && (\n            <CurrencyOptionList\n              core={core}\n              listboxId={listboxId}\n              value={currency}\n              codes={currencyOptions}\n              currencyNames={currencyNames}\n              locale={locale}\n              searchPlaceholder={currencyText.search}\n              // The phone sheet's title: what the chip is for.\n              sheetTitle={currencyText.currency}\n              onChoose={(code) => {\n                onCurrencyChange?.(code);\n                closeToTrigger();\n              }}\n            />\n          )}\n        </FloatingField>\n      </LockedOrNot>\n      {/* Outside the relative box, as NumberInput's caption is: the trailing\n          controls are `inset-y-1` in it and would stretch down over a second line. */}\n      <FieldCaption parts={numeric.hint} />\n      {/* The news after the standing advice, as Select orders them. The root is\n          already a steady box, so the message coming and going remounts nothing. */}\n      {numeric.errorEl}\n      {showNumpad && (\n        <NumberPadSheet\n          // Localised like the field it mirrors. Keys are typing, read by the\n          // locale's marks like the keyboard's; \"=\" is a result, dot-decimal.\n          value={display}\n          onChange={typed}\n          onResult={(result) => {\n            setDraft(null);\n            const settled = settle(result);\n            handleText(settled);\n            onCommit?.(settled);\n          }}\n          onDone={() => innerRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n          decimalMark={mark}\n        />\n      )}\n    </div>\n  );\n}\n\n/** The field in its lock's {@link LockedReason} while locked, as it is otherwise. A\n *  component rather than a ternary so the field's JSX is written once. `block w-full`:\n *  the frame's box stands where the field's own did. */\nfunction LockedOrNot({\n  lock,\n  display,\n  children,\n}: {\n  lock: LockReason;\n  display: DisabledReasonDisplay | undefined;\n  children: ReactNode;\n}) {\n  if (!lock.locked) return <>{children}</>;\n  return (\n    <LockedReason lock={lock} display={display} className=\"block w-full\">\n      {children}\n    </LockedReason>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { useId, useMemo, useRef } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { CurrencyOptionList, getCurrency } from \"./currency-option-list\";\nimport { useComboboxCore } from \"./combobox-core\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from \"./field-base\";\nimport { cn } from \"../lib/cn\";\nimport { currencyMinorDigits } from \"../lib/format\";\nimport { roundHalfAway } from \"../lib/round\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type CurrencyLabels,\n} from \"../i18n/kit-labels\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\nimport {\n  FieldCaption,\n  LockedReason,\n  mergeRefs,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n  type LockReason,\n} from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\nimport { dataAttributes, type DataAttributes } from \"../lib/data-attributes\";\n\n/** {@link AmountInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n *  wrapper typed itself off `ComponentProps<typeof AmountInput>` until then. */\nexport interface AmountInputProps extends FieldHelpProps, DataAttributes {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the amount, in the caller's own words — {@link Input}'s `error`\n   * (keksdose K4: \"exceeds the outstanding balance\" was a loose `<p>` beside the field\n   * that nothing pointed at). Rendered under the field, after a text `hint`; merged into\n   * `aria-describedby` after the caller's ids and the hint's; implies `invalid`, so the\n   * field paints as well as announces. `null`, `false` and `\"\"` are no message.\n   * {@link MoneyField} takes it too.\n   */\n  error?: ReactNode;\n  /**\n   * Show the desktop calculator trigger (default `true`). `false` for an amount in an\n   * ephemeral close-on-blur editor — a budget's assigned cell, a VAT cell (keksdose K6)\n   * — where a click on the icon blurs the field and tears the editor down before the\n   * popover can open. Typing a calculation (\"200+50\", then Enter) still evaluates, and\n   * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.\n   */\n  calculator?: boolean;\n  /** The field's WRAPPER — width, a margin, a flex share. The `<input>` is\n   *  `inputClassName`'s. */\n  className?: string;\n  /**\n   * Classes for the `<input>` itself — {@link NumberInput}'s and {@link Input}'s prop of\n   * the same name, merged the same way: after everything the field sets for LOOKS — the\n   * base classes, the plain end padding, the display shape's centring and the `tone`\n   * colour — so it can restyle the figure (`text-end` for a money column whose decimal\n   * points line up, `font-medium`, a tighter `py-1` or a symmetric `px-2` in a table\n   * cell, `text-transparent` while a figure is being re-fetched), and before what the\n   * field needs to WORK: the end padding the calculator and the currency chip reserve,\n   * and the invalid border. Neither of those can be taken away by accident — a caller's\n   * `px-2` keeps its start edge and the digits still stop short of the chip, and a\n   * borderless cell's `border-transparent` still turns red when the value is wrong.\n   *\n   * keksdose G7: the invoice's VAT cell right-aligns its figure, and with only\n   * `className` (the wrapper) it reached the element through `[&_input]:text-end` — a\n   * descendant selector that depends on the field's inner markup, which the kit is free\n   * to change, and that a reader of the call site has to decode. {@link MoneyField}\n   * passes it through, and `RhfMoneyField` takes it too.\n   *\n   * keksdose 0.24: until then it sat BEFORE the plain end padding (`pe-3`) and the tone,\n   * so the budget's assigned cell could not make its padding symmetric (`px-2` came out\n   * `px-2 pe-3`) and the holdings price could not hide an outflow-toned figure while\n   * re-fetching — both were back on `[&_input]:` selectors on the wrapper.\n   */\n  inputClassName?: string;\n  id?: string;\n  /** Names the field when it has no visible `label` (a table cell, the display shape). */\n  \"aria-label\"?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the\n   * hint and error are described, a required amount is announced as required, and\n   * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n   */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  /**\n   * BCP 47 tag for this field — {@link NumberInput}'s `locale` (0.34, DUP-10): the decimal\n   * mark the field SHOWS and reads typing in (\"1,5\" for fr-CH, \"1.5\" for de-CH, as `Intl`\n   * decides), and the language of the currency picker's search. Default the\n   * `<UiKitProvider locale>`, else the runtime's. `value` and `onChange` stay\n   * dot-decimal.\n   */\n  locale?: string;\n  /** {@link NumberInput}'s `hint`, the same rule: a {@link FieldHint} \"?\" rides the\n   *  label's own line, beside the label (not at the far end, where the calculator and\n   *  the currency chip live); plain TEXT (a string or a number) is a caption UNDER\n   *  the field, attached through `aria-describedby` after the caller's own. A phone's\n   *  `variant=\"display\"` has no visible label, so a FieldHint is dropped there; a\n   *  caption still shows.\n   *\n   *  Since 0.34 a FieldHint is that caption at Large and on a touch screen, as on\n   *  NumberInput since 0.32 (`useInlineHint`, docs/text-size-harmonization.md §4: a fact\n   *  a finger cannot hover open is printed). A `HelpPopover` — help, not a fact (§10.23)\n   *  — stays on the label line at every size. */\n  hint?: ReactNode;\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. Each key optional, and each a per-field\n   *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`\n   *  and `currencySearch` of its `currency` namespace, the rest of `calculator`.\n   *  `currency` names the picker chip, composed with the selected code through\n   *  `common.fieldValue`; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Translated currency names for the chip's picker, keyed by ISO code. The same\n   *  sparse override `CurrencySelect` takes, and for the same reason: the names in\n   *  `CURRENCIES` are shipped data, so without this they are the one English word\n   *  left in a translated row. Not part of `labels` because it is keyed by DATA\n   *  rather than by a fixed set of slots, and an app passes the same map to both\n   *  pickers. */\n  currencyNames?: Record<string, string>;\n  /** Offer only these ISO codes in the chip's list, in this order — `CurrencySelect`'s\n   *  `options`, since the chip renders CurrencySelect's list (round 0.34 Wave 2, DUP-4).\n   *  Default every currency the kit knows. */\n  currencyOptions?: string[];\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   *\n   * Since 0.15.5 it is drawn on its own too, for a read-only or disabled signed figure\n   * (an \"Items total\" of −5.18): no `onNegativeChange` needed just to show the minus.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n  /**\n   * Decimals the committed amount is rounded to (kastlan 0.12: \"12.345\" and a\n   * calculator's \"100/3\" reached a `Numeric(10,2)` column unrounded and failed with a\n   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With\n   * no `currency`, nothing is rounded unless this is set. Rounding is half away from\n   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on\n   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left\n   * alone, so \"12.3\" can still become \"12.34\".\n   *\n   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of\n   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at\n   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a\n   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's\n   * scale: `digits={4}`, `digits={6}`.\n   *\n   * **Set `digits` for any sub-currency scale** — not only a price: any field whose\n   * column holds more decimals than the currency's minor unit. A split line stored at\n   * the ledger's 4dp (`Numeric(18,4)`) and loaded as 12.3456 is SHOWN as 12.35, and\n   * committed as 12.35 as soon as the user tabs through it (blur settles) — so the form\n   * no longer equals what the server holds: the lines stop summing to the 4dp total,\n   * and Save is held (keksdose live #240). With a `currency`, every commit rounds to that currency's\n   * minor unit unless `digits` says otherwise: pass the column's scale (`digits={4}`).\n   */\n  digits?: number;\n  /** The smallest amount the field settles on. A lower figure is raised to it when it\n   *  settles, like `digits`. Compared with the signed figure. */\n  min?: number;\n  /** The largest amount the field settles on (a deposit release capped at the\n   *  balance). A higher figure is lowered to it when it settles. */\n  max?: number;\n  /**\n   * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the\n   * numpad's \"=\" and once per calculator session (its \"=\" or Enter in its display, or\n   * the pad closing on a result not committed yet), never on a keystroke (\"1200+\" is\n   * not a figure yet). `onChange` still reports every keystroke and every result the\n   * calculator writes back; this is for a host that stores a number and must not see\n   * drafts (kastlan 52; see {@link MoneyField}, which is built on it).\n   *\n   * Refactor audit 2026-10-30, INP-1: every calculator keystroke that resolved used to\n   * commit, so \"100+50\" committed 105 on its way to 150 — keksdose saved both, and its\n   * threshold field, `disabled` while it saves, lost the calculator to the first.\n   */\n  onCommit?: (value: string) => void;\n  /**\n   * Why the amount cannot be changed — {@link NumberInput}'s `disabledReason` (0.34,\n   * round 0.34 C2), for an amount that SAVES itself: a budget row's assigned cell, a\n   * price committed on blur. `disabled` takes the field out of the tab order, so the\n   * reason never reached a keyboard.\n   *\n   * With a reason the field stays in the tab order and shows its figure, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`. Nothing\n   * changes the amount: the calculator and the phone's numpad are not offered, the\n   * currency chip is a read-out rather than a picker, and neither blur nor Enter\n   * settles — so `onChange`, `onCommit`, `onNegativeChange` and `onCurrencyChange` are\n   * never called. Enter is swallowed, so the field does not submit the form around it.\n   * The reason is a line under the field at Large and on a touch screen, else in the kit\n   * {@link Tooltip} (`disabledReasonDisplay`), and on the input's `aria-describedby`,\n   * between the caption and the error. Wins over `disabled`. {@link MoneyField} and\n   * `RhfMoneyField` take it too.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This amount COMMITS — {@link Button}'s `commit`, NumberInput's: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). An amount that only reaches the server through its form's\n   * Save leaves this off and stays editable under the lock; the Save takes `commit`. No\n   * provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * A settled figure, rounded to `digits` (half away from zero) and clamped to\n * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression\n * comes back as it was. Rounding is `lib/round.ts`'s, shared with `roundToCurrency`\n * (BUG-11: this copy blanked \"0.0000001\" and a 22-digit figure on blur).\n */\nfunction settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {\n  const t = text.trim();\n  if (!/^-?\\d*\\.?\\d*$/.test(t) || !/\\d/.test(t)) return text;\n  let n = Number(t);\n  if (!Number.isFinite(n)) return text;\n  if (digits !== undefined) n = roundHalfAway(n, digits);\n  if (min !== undefined && n < min) n = min;\n  if (max !== undefined && n > max) n = max;\n  const out = formatResult(n);\n  // Unchanged figures keep their own spelling (\"12.50\" stays \"12.50\").\n  return Number(out) === Number(t) ? text : out;\n}\n\n// The locale's decimal mark and the grouping parse (kastlan 40, keksdose G1) live in\n// `lib/decimal-marks.ts`, read through the engine NumberInput and this field share\n// (`numeric-field.ts`, DUP-10).\n\n/**\n * The figure's colour per {@link AmountInputProps.tone} — public as `AMOUNT_TONE_CLASS`,\n * for a table cell or a test that must paint the same figure the same way (keksdose's\n * receipt lines, dev#556).\n *\n * The consuming app's ONE money palette (`--money-expense` / `--money-income`), not a\n * bespoke rose/emerald pairing: a figure being typed has to wear the same colour the same\n * figure will wear once it is a row in the table behind the form (Keksdose dev#434). The\n * utilities are unlayered and theme-aware, so no `dark:` variant is needed and they win\n * over the field's own text colour regardless of where `cn` puts them.\n */\nconst TONE_CLASS: Readonly<Record<NonNullable<AmountInputProps[\"tone\"]>, string>> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n// Exported in 0.52 because keksdose's tests read it out of dist/components/amount-input.js\n// with a regex for `const TONE_CLASS` — the one reach into the kit's dist in three apps,\n// which a rename or a moved module breaks with no public change (MOD-8, refactor audit\n// 2026-10-30; 0.34's move failed 91 of keksdose's test files that way). The local name\n// stays until keksdose imports the export, so the bump itself breaks nothing.\nexport { TONE_CLASS as AMOUNT_TONE_CLASS };\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\");\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string, settle: (text: string) => string): boolean {\n  const n = evaluateExpression(previous);\n  // Compared settled, since the field rounds what the calculator hands it.\n  return n !== null && settle(formatResult(n)) === text.trim();\n}\n\nexport function AmountInput(props: AmountInputProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    currency,\n    onCurrencyChange,\n    placeholder,\n    label,\n    className,\n    inputClassName,\n    id,\n    \"aria-label\": ariaLabel,\n    \"aria-required\": ariaRequired,\n    autoFocus,\n    tone = \"neutral\",\n    negative = false,\n    onNegativeChange,\n    align = \"start\",\n    labels,\n    currencyNames,\n    currencyOptions,\n    digits: digitsProp,\n    min,\n    max,\n    onCommit,\n    disabledReasonDisplay,\n  } = props;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n  // magnitude; the minus is glued on here and taken off again in handleText, so\n  // the two can never disagree and the caller can never double-apply it. Only in\n  // front of a bare amount: an expression being typed (\"12-30\") owns its own\n  // minus and has to survive keystroke-for-keystroke.\n  const signOwned = onNegativeChange !== undefined;\n  // The sign is DRAWN whenever `negative` says so, handler or not (keksdose live #366):\n  // a read-only or disabled total (\"−5.18\") used to need a dummy `onNegativeChange`\n  // just to show its minus. Without the handler there is nothing to toggle — a typed\n  // minus simply stays in the text, as in any field without a direction control.\n  const shown = negative && isBareAmount(value) ? `-${value}` : value;\n  // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a\n  // fr-CH user typed \"1,5\" and watched it turn into \"1.5\" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all\n  // stay dot-decimal, because that string is the contract: RhfMoneyField's\n  // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read\n  // it. The way back is free: {@link sanitizeLive} already folds a typed \",\" into\n  // \".\", so a comma typed, pasted or tapped on the numpad lands as a dot.\n  //\n  // One character for one character, and no digit grouping: the caret stays where\n  // the typist put it, and \"1.000\" cannot be read back as a thousand in one locale\n  // and as one in the other. de-CH and it-CH are \".\" — CLDR says so, and this\n  // follows `Intl` rather than a guess about a country. The field's own `locale`,\n  // else the provider's (0.34, DUP-10).\n  const locale = useKitLocale(props.locale);\n  // Decimals the figure settles to: `digits`, else the currency's minor unit.\n  const digits = digitsProp ?? currencyMinorDigits(currency);\n  const settle = (text: string) => settleAmount(text, digits, min, max);\n  // The engine NumberInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n  // changes or settles — see `disabledReason`), the hint — a FieldHint is its words at\n  // Large and on touch, §4 — the error, the description's order, the typist's draft\n  // in the locale's mark, the calculator and the numpad. On a phone the OS keyboard\n  // is suppressed for the numpad sheet (feedback #334), and the display shape keys off\n  // the SAME phone layout, so the two can never drift apart on the breakpoint.\n  //\n  // A value the HOST set (not one typed here) is shown at the currency's minor unit\n  // while the field is not being edited: an FX estimate of 93.4213 showed four\n  // decimals (keksdose live #356). Display only — `value` is the host's, untouched.\n  const numeric = useNumericField(props, {\n    settle,\n    display: (focused) => (focused ? shown : settleAmount(shown, digits)),\n  });\n  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, draft, setDraft, derived } =\n    numeric;\n  const invalid = numeric.isInvalid;\n  // A locked or disabled chip is a read-out: picking a currency is a change too.\n  const editable = !!onCurrencyChange && !locked && !off;\n  // Room for the trailing controls — the calculator and the currency chip — once\n  // measured, as NumberInput reserves its own (keksdose live #367, DUP-10): their\n  // width, the track's `end-1` inset in the boxed shape, and NumberInput's 4px gap.\n  // Before that (the first paint, and wherever there is no layout) the classes below\n  // stand in. showCalc is always false on a phone, so the display shape only has to\n  // clear the chip, by its own width rather than the boxed shape's room (feedback #430\n  // rework: on a 375px screen 16px decide between a readable figure and a clipped one).\n  const hasEnd = showCalc || Boolean(currency);\n  const [endRef, endWidth] = useEndWidth(hasEnd);\n  const trailingRoom = asDisplay\n    ? currency\n      ? editable\n        ? \"pe-16\"\n        : \"pe-12\"\n      : undefined\n    : showCalc\n      ? currency\n        ? editable\n          ? \"pe-24\"\n          : \"pe-16\"\n        : \"pe-10\"\n      : currency\n        ? editable\n          ? \"pe-20\"\n          : \"pe-14\"\n        : undefined;\n  const innerRef = useRef<HTMLInputElement>(null);\n  const setRefs = useMemo(() => mergeRefs(innerRef, ref), [ref]);\n  // While the typist is typing, the field shows THEIR text (\"1.234,5\" stays exactly\n  // that), not the value re-spelt: re-spelling turned a grouping \".\" into a \",\" under\n  // their fingers, after which no rule could tell the two apart (keksdose G1). The\n  // draft only while it says what the field holds AND holds nothing the live\n  // sanitising would drop — a letter, a second decimal point (see `showsTyped`); a\n  // value set from outside, a calculator result or a commit shows the derived spelling.\n  const display =\n    draft === null\n      ? derived\n      : (numeric.typedFor(shown) ??\n        // The caller owns the sign: the typed \"12\" is shown as the \"-12\" it is.\n        (signOwned && negative && shown.startsWith(\"-\") && numeric.typedFor(shown.slice(1)) !== null\n          ? `-${draft}`\n          : derived));\n  // Every route into the field — typing, the numpad sheet, the desktop\n  // calculator, the blur/Enter commit — funnels through here, so the split is\n  // written once and the four entry paths cannot drift.\n  //\n  // `previous` is the text this one REPLACES, and it is what says whether a bare\n  // figure arriving here is an answer or a magnitude. For the three paths that\n  // edit the field's own text that is simply what the field was showing; the\n  // desktop calculator keeps its expression in a popover the field never sees,\n  // so it passes it in (see `CalculatorButton`'s `onChange`).\n  const handleText = (raw: string, previous: string = shown) => {\n    const text = sanitizeLive(raw);\n    if (!signOwned) {\n      onChange(text);\n      return;\n    }\n    const { sign, rest } = splitLeadingSign(text);\n    if (sign) {\n      // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n      onNegativeChange(sign === \"-\");\n    } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text, settle)) {\n      // A calculation that just RESOLVED states its sign in both directions. The\n      // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n      // so a positive result has to move the chip too, or the field would answer\n      // that sum with \"-18\" and contradict the arithmetic it just showed.\n      //\n      // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n      // arriving on top of an expression is far more often a replacement than an\n      // answer, and reading it as an answer flips the direction of money.\n      onNegativeChange(false);\n    }\n    onChange(sign ? rest : text);\n  };\n  const commit = () => {\n    setDraft(null);\n    const settled = settle(commitExpression(shown));\n    handleText(settled);\n    onCommit?.(settled);\n  };\n  const typed = (raw: string) => handleText(numeric.read(raw));\n  // The currency list is CurrencySelect's (round 0.34 Wave 2, DUP-4) on the picker\n  // family's core: the chip was a hand copy of it and had drifted (no wrap at Large, no\n  // `options` subset, no check mark, no listbox id, no #308 width), and both were plain\n  // buttons under a listbox promise. `filter: false`: the list filters its own rows.\n  const core = useComboboxCore<string>({ filter: false, backCloses: true });\n  // `chipRef`: the chip the currency list hangs off (Keksdose dev#548: portalled, so the\n  // panel needs a real trigger rect rather than a relative parent). It is also where\n  // Escape and a pick hand focus back (round 0.34 BUG-1): Safari does not focus a\n  // clicked button, so \"whatever held focus\" is not the chip.\n  const { open, setOpen, closeToTrigger, triggerRef: chipRef } = core;\n  const listboxId = `${generatedId}-currencies`;\n  // A lock arriving while the list is up closes it, as on CountrySelect — adjusted\n  // while rendering, so no frame shows a list that can no longer be used.\n  if (!editable && open) setOpen(false);\n\n  // The currency chip's strings are the `currency` namespace — the same two\n  // `CurrencySelect` resolves, under this component's older key names. The\n  // calculator and the numpad resolve `calculator` themselves; `labels.calculator`\n  // and `labels.pad` are handed straight through to them as overrides.\n  // The two strings read out first, so the memo depends on them and not on the\n  // caller's `labels` object (a new one every render) — what the React Compiler infers.\n  const currencyLabel = labels?.currency;\n  const currencySearchLabel = labels?.currencySearch;\n  const currencyOverrides = useMemo(() => {\n    const out: Partial<CurrencyLabels> = {};\n    if (currencyLabel !== undefined) out.currency = currencyLabel;\n    if (currencySearchLabel !== undefined) out.search = currencySearchLabel;\n    return out;\n  }, [currencyLabel, currencySearchLabel]);\n  const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n  const selected = getCurrency(currency);\n\n  return (\n    <div {...dataAttributes(props)} className={cn(\"w-full\", className)}>\n      {/* Inner relative box holds the input + its absolutely-positioned\n          trailing controls (calculator / currency), so those stay anchored to\n          the INPUT even when the mobile math bar is rendered below (#334). It is\n          the kit's FloatingField, which draws the label — floating, or sr-only in\n          the display shape — and puts a FieldHint on the label's line, as it does\n          for NumberInput. */}\n      {/* Locked, the field sits in the reason's frame (LockedReason: the line, or the\n          Tooltip), as NumberInput does; the root above keeps `className`, so nothing\n          reflows. */}\n      <LockedOrNot lock={lock} display={disabledReasonDisplay}>\n        <FloatingField\n          className=\"w-full\"\n          htmlFor={fieldId}\n          label={label}\n          srOnlyLabel={asDisplay}\n          hint={numeric.hint.labelHint}\n        >\n          <input\n            ref={setRefs}\n            id={fieldId}\n            aria-label={ariaLabel}\n            type=\"text\"\n            // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n            autoFocus={autoFocus}\n            // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n            // field keeps focus/caret. Desktop keeps the native decimal keypad.\n            inputMode={isMobile ? \"none\" : \"decimal\"}\n            autoComplete=\"off\"\n            disabled={off}\n            // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n            readOnly={locked || undefined}\n            aria-disabled={locked || undefined}\n            // The floating-label pattern needs a blank placeholder for its\n            // peer-placeholder-shown trick. The display shape has no floating label,\n            // so it spends the placeholder on what an empty borderless form actually\n            // needs: a zero to aim at, at full size. The caller supplies it because\n            // only the app knows the locale's decimal separator.\n            placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : placeholder}\n            value={display}\n            onChange={(e) => {\n              if (!locked) typed(e.target.value);\n            }}\n            onFocus={() => setFocused(true)}\n            onBlur={() => {\n              // Nothing settles under the lock — not even a draft typed before it arrived,\n              // which stays in the field for when it lifts.\n              if (!locked) commit();\n              setFocused(false);\n            }}\n            onKeyDown={(e) => {\n              if (e.key !== \"Enter\") return;\n              // Locked: Enter submits no form and settles nothing.\n              if (locked) e.preventDefault();\n              else commit();\n            }}\n            className={cn(\n              // With a label, use the floating-input padding (pt-4 pb-1) like every\n              // other labelled field so the value sits BELOW the floated label rather\n              // than vertically centred where it overlaps the resting label\n              // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n              // transparent-placeholder bits.\n              asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n              // The plain end padding, with nothing trailing: cosmetic, so the caller's\n              // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).\n              !trailingRoom && (asDisplay ? \"pe-0\" : \"pe-3\"),\n              // Centred display shape: centre in what is LEFT of the currency chip.\n              // `text-center` alone would centre the figure in the whole box, i.e.\n              // partly underneath the chip; the padding below is what takes the chip\n              // out of the centring, and nothing is added at the start because a\n              // mirrored reservation would spend the width twice (see `align`).\n              asDisplay && align === \"center\" && \"text-center\",\n              // Over the base class's own text colour.\n              TONE_CLASS[tone],\n              // The caller's, over all of the above — base, plain padding, alignment and\n              // tone — and under only what the field needs to work (see `inputClassName`).\n              inputClassName,\n              // Room for the trailing controls, after the caller's so a `px-2` cannot run\n              // the digits under the chip (NumberInput's order, which reserves its unit\n              // and calculator the same way).\n              trailingRoom,\n              invalid && FIELD_INVALID,\n              locked && \"cursor-not-allowed\",\n            )}\n            // The classes above are the fallback; once measured the field reserves exactly\n            // its trailing controls' width, inline so it wins over every class (see\n            // `trailingRoom`).\n            style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + (asDisplay ? 4 : 8) } : undefined}\n            aria-invalid={invalid || undefined}\n            aria-describedby={numeric.describedBy}\n            aria-required={ariaRequired}\n          />\n          {/* The label is FloatingField's, after these children (the floating trick\n          reads the input through `peer-*`). The display shape drops it VISUALLY,\n          not from the accessibility tree: a 36px tinted figure at the top of a\n          transaction form is legibly the amount, but a screen reader still needs\n          the name, and callers that pass `label` without `aria-label` would\n          otherwise be left with none. */}\n          {/* Trailing controls share one flex track so the calculator icon and the\n          currency suffix/picker sit side by side without overlapping. */}\n          {/* The display shape has no box to inset from, so the controls align to the\n          figure's own end edge and its baseline strip (`bottom-1`, matching the\n          input's pb-1) instead of floating inside a field. */}\n          <div\n            // Measured for the input's end padding (see `trailingRoom`).\n            ref={endRef}\n            className={cn(\n              \"absolute flex items-center gap-0.5\",\n              // Logical `end-*`: the chip and the calculator are the figure's trailing\n              // controls, so a right-to-left form carries them on the left.\n              asDisplay ? \"bottom-1 end-0\" : \"inset-y-1 end-1\",\n            )}\n          >\n            {showCalc && (\n              <CalculatorButton\n                // The mark the field shows but not the typist's grouping: the evaluator\n                // reads either mark, and \"1.234,5\" is two of them. The result comes back\n                // dot-decimal.\n                value={derived}\n                // Live: every result, settled, so the field never shows more decimals than\n                // it will keep. The commit is the session's one (INP-1): its \"=\", or the pad\n                // closing on a newer result — not each figure on the way to the result.\n                onChange={(result, expression) => {\n                  setDraft(null);\n                  handleText(settle(result), expression);\n                }}\n                onCommit={(result) => onCommit?.(settle(result))}\n                className=\"px-1.5\"\n                aria-label={labels?.calculatorTrigger}\n                labels={labels?.calculator}\n              />\n            )}\n            {currency && !editable && (\n              <span\n                aria-hidden\n                className={cn(\n                  \"pointer-events-none px-1 font-medium text-muted\",\n                  // A text-xs chip next to a 36px figure reads as a stray footnote.\n                  asDisplay ? \"text-sm\" : \"text-xs\",\n                )}\n              >\n                {currency}\n              </span>\n            )}\n            {currency && editable && (\n              <button\n                ref={chipRef}\n                type=\"button\"\n                onClick={() => setOpen((v) => !v)}\n                // A button that opens a listbox, and says so: the chip is a control inside\n                // a text field, not a field of its own, so not a combobox.\n                aria-haspopup=\"listbox\"\n                aria-expanded={open}\n                aria-controls={listboxId}\n                aria-label={\n                  // \"Currency: EUR\" through `common.fieldValue`, not a template literal:\n                  // the colon-and-space is punctuation a translation has to own.\n                  selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency\n                }\n                className={cn(\n                  \"flex items-center gap-1 rounded px-2 py-1 font-medium text-secondary hover:bg-hover\",\n                  asDisplay ? \"text-sm\" : \"text-xs\",\n                )}\n              >\n                {currency}\n                <ChevronDown className=\"size-3\" />\n              </button>\n            )}\n          </div>\n          {editable && (\n            <CurrencyOptionList\n              core={core}\n              listboxId={listboxId}\n              value={currency}\n              codes={currencyOptions}\n              currencyNames={currencyNames}\n              locale={locale}\n              searchPlaceholder={currencyText.search}\n              // The phone sheet's title: what the chip is for.\n              sheetTitle={currencyText.currency}\n              onChoose={(code) => {\n                onCurrencyChange?.(code);\n                closeToTrigger();\n              }}\n            />\n          )}\n        </FloatingField>\n      </LockedOrNot>\n      {/* Outside the relative box, as NumberInput's caption is: the trailing\n          controls are `inset-y-1` in it and would stretch down over a second line. */}\n      <FieldCaption parts={numeric.hint} />\n      {/* The news after the standing advice, as Select orders them. The root is\n          already a steady box, so the message coming and going remounts nothing. */}\n      {numeric.errorEl}\n      {showNumpad && (\n        <NumberPadSheet\n          // Localised like the field it mirrors. Keys are typing, read by the\n          // locale's marks like the keyboard's; \"=\" is a result, dot-decimal.\n          value={display}\n          onChange={typed}\n          onResult={(result) => {\n            setDraft(null);\n            const settled = settle(result);\n            handleText(settled);\n            onCommit?.(settled);\n          }}\n          onDone={() => innerRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n          decimalMark={mark}\n        />\n      )}\n    </div>\n  );\n}\n\n/** The field in its lock's {@link LockedReason} while locked, as it is otherwise. A\n *  component rather than a ternary so the field's JSX is written once. `block w-full`:\n *  the frame's box stands where the field's own did. */\nfunction LockedOrNot({\n  lock,\n  display,\n  children,\n}: {\n  lock: LockReason;\n  display: DisabledReasonDisplay | undefined;\n  children: ReactNode;\n}) {\n  if (!lock.locked) return <>{children}</>;\n  return (\n    <LockedReason lock={lock} display={display} className=\"block w-full\">\n      {children}\n    </LockedReason>\n  );\n}\n"],"mappings":"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","names":[]}