@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/number-input.js

@@ -1,17 +1,20 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef } from "react";
 import { CalculatorButton } from "./calculator.js";
 import { NumberPadSheet } from "./numpad-sheet.js";
-import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from "./ui.js";
+import {
+  FIELD_BASE,
+  FIELD_DISPLAY,
+  FIELD_INVALID,
+  FLOATING_INPUT_CLASS,
+  FloatingField
+} from "./field-base.js";
 import { CURRENCIES } from "./currency-select.js";
-import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
-import { useInlineHint } from "./field-parts.js";
+import { FieldCaption, LockedReason, mergeRefs } from "./field-parts.js";
+import { useEndWidth, useNumericField } from "./numeric-field.js";
 import { cn } from "../lib/cn.js";
 import { commitExpression, formatResult } from "../lib/calc.js";
-import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks.js";
-import { usePhoneLayout } from "../hooks/use-breakpoint.js";
-import { useKitLocale } from "../i18n/kit-labels.js";
 function decimalsOf(n) {
   const text = formatResult(n);
   const dot = text.indexOf(".");
@@ -28,7 +31,7 @@ function stepNumber(current, count, step, min, max) {
   const places = Math.min(Math.max(decimalsOf(step), decimalsOf(origin)), 20);
   return clamp(Number((origin + k * step).toFixed(places)));
 }
-const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
+const asTyped = (text) => text;
 const CURRENCY_CODE = new RegExp(`(?:^|[^A-Za-z])(?:${CURRENCIES.map((c) => c.code).join("|")})(?![A-Za-z])`);
 const CURRENCY_SYMBOL = /[€$£¥₹₺₽₪₩₫฿₴₦₱]/;
 function namesMoney(node) {
@@ -45,72 +48,42 @@ function devWarnings() {
 }
 function NumberInput(props) {
   const {
+    ref,
     value,
     onChange,
     onCommit,
     label,
-    ariaLabel,
+    "aria-label": ariaLabelAttr,
+    ariaLabel: ariaLabelProp,
     labels,
     placeholder,
-    disabled,
     autoFocus,
     className,
     inputClassName,
     id,
-    calculator = true,
-    variant = "field",
-    hint: hintProp,
-    invalid: invalidProp,
-    error,
-    locale: localeProp,
-    "aria-describedby": ariaDescribedBy,
-    "aria-invalid": ariaInvalid,
     "aria-required": ariaRequired,
     suffix,
     step,
     min,
-    max
+    max,
+    disabledReasonDisplay
   } = props;
+  const ariaLabel = ariaLabelAttr ?? ariaLabelProp;
   const generatedId = useId();
   const fieldId = id ?? generatedId;
-  const hintId = useId();
-  const errorId = useId();
-  const hint = useInlineHint(hintProp);
-  const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
-  const hasError = hasMessage(error);
+  const numeric = useNumericField(props, { settle: asTyped, display: () => value });
+  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, setDraft, derived } = numeric;
+  const invalid = numeric.isInvalid;
   const reserve = "error" in props || "hint" in props;
-  const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);
-  const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === "true";
   const labelled = label !== void 0;
-  const isMobile = usePhoneLayout();
-  const asDisplay = isMobile && variant === "display";
-  const showCalc = calculator && !disabled && !isMobile;
-  const [focused, setFocused] = useState(false);
-  const endRef = useRef(null);
-  const [endWidth, setEndWidth] = useState(null);
   const hasEnd = showCalc || suffix !== void 0;
+  const [endRef, endWidth] = useEndWidth(hasEnd);
   const suffixChars = typeof suffix === "string" || typeof suffix === "number" ? String(suffix).length : null;
   const estimatedEnd = suffixChars !== null ? `calc(${suffixChars}ch + 0.75rem${showCalc ? " + 2.25rem" : ""})` : void 0;
-  useLayoutEffect(() => {
-    const el = endRef.current;
-    if (!hasEnd || !el || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      const width = el.getBoundingClientRect().width;
-      setEndWidth(width > 0 ? Math.ceil(width) : null);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [hasEnd]);
-  const showNumpad = isMobile && !disabled && focused;
   const inputRef = useRef(null);
-  const mark = decimalMark(useKitLocale(localeProp));
-  const [draft, setDraft] = useState(null);
-  const derived = localizeMark(value, mark);
-  const display = draft !== null && showsTyped(draft, mark, value) ? draft : derived;
-  const typed = (raw) => {
-    setDraft(raw);
-    onChange(readTyped(raw, mark));
-  };
+  const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+  const display = numeric.typedFor(value) ?? derived;
+  const typed = (raw) => onChange(numeric.read(raw));
   const result = (next) => {
     setDraft(null);
     onChange(next);
@@ -127,7 +100,7 @@ function NumberInput(props) {
   }, [suffix, label, ariaLabel, placeholder]);
   const commit = () => {
     setDraft(null);
-    const next = commitExpression(value);
+    const next = numeric.settle(commitExpression(value));
     if (next !== value) onChange(next);
     onCommit?.(next);
   };
@@ -139,6 +112,10 @@ function NumberInput(props) {
     if (next !== value) onChange(next);
   };
   const onKeyDown = (e) => {
+    if (locked) {
+      if (e.key === "Enter") e.preventDefault();
+      return;
+    }
     if (e.key === "Enter") return commit();
     if (!step || !(step > 0) || !Number.isFinite(step) || e.altKey || e.ctrlKey || e.metaKey) return;
     const count = e.key === "ArrowUp" ? 1 : e.key === "ArrowDown" ? -1 : e.key === "PageUp" ? 10 : e.key === "PageDown" ? -10 : 0;
@@ -149,45 +126,50 @@ function NumberInput(props) {
   const field = /* @__PURE__ */ jsxs(
     FloatingField,
     {
-      className: cn("w-full", className),
+      className: cn("w-full", !locked && className),
       htmlFor: fieldId,
       label,
       srOnlyLabel: asDisplay,
-      hint: textHint ? void 0 : hint,
+      hint: numeric.hint.labelHint,
       children: [
         /* @__PURE__ */ jsx(
           "input",
           {
-            ref: inputRef,
+            ref: setInput,
             id: fieldId,
             "aria-label": ariaLabel,
             type: "text",
             inputMode: isMobile ? "none" : "decimal",
             autoComplete: "off",
             autoFocus,
-            disabled,
+            disabled: off,
+            readOnly: locked || void 0,
+            "aria-disabled": locked || void 0,
             placeholder: asDisplay ? placeholder ?? "0" : labelled ? " " : placeholder,
             value: display,
-            onChange: (e) => typed(e.target.value),
+            onChange: (e) => {
+              if (!locked) typed(e.target.value);
+            },
             onFocus: () => setFocused(true),
             onBlur: () => {
-              commit();
+              if (!locked) commit();
               setFocused(false);
             },
             onKeyDown,
             "aria-invalid": invalid || void 0,
-            "aria-describedby": describedBy,
+            "aria-describedby": numeric.describedBy,
             "aria-required": ariaRequired,
             className: cn(
               asDisplay ? cn(FIELD_DISPLAY, "text-4xl font-semibold leading-tight tracking-tight tabular-nums") : labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,
               inputClassName,
               showCalc && suffix !== void 0 ? "pe-16" : showCalc ? "pe-9" : suffix !== void 0 ? "pe-8" : void 0,
-              invalid && FIELD_INVALID
+              invalid && FIELD_INVALID,
+              locked && "cursor-not-allowed"
             ),
             style: hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + 4 } : estimatedEnd !== void 0 ? { paddingInlineEnd: estimatedEnd } : void 0
           }
         ),
-        (showCalc || suffix !== void 0) && // One flex track for both, so the unit and the calculator sit side by side
+        hasEnd && // One flex track for both, so the unit and the calculator sit side by side
         // instead of stacking on the same corner — AmountInput's arrangement, which
         // has carried a chip and a calculator together since #430.
         /* @__PURE__ */ jsxs("div", { ref: endRef, className: "absolute inset-y-0 end-0 flex items-center", children: [
@@ -197,7 +179,7 @@ function NumberInput(props) {
               value: derived,
               onChange: result,
               className: "self-stretch px-2.5",
-              ariaLabel: labels?.calculatorTrigger,
+              "aria-label": labels?.calculatorTrigger,
               labels: labels?.calculator
             }
           ),
@@ -205,7 +187,7 @@ function NumberInput(props) {
             "span",
             {
               "aria-hidden": true,
-              className: "pointer-events-none pe-2 text-xs font-medium text-[var(--text-muted)]",
+              className: "pointer-events-none pe-2 text-xs font-medium text-muted",
               children: suffix
             }
           )
@@ -225,11 +207,12 @@ function NumberInput(props) {
       ]
     }
   );
-  if (!textHint && !hasError && !reserve) return field;
+  const box = locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: cn("block w-full", className), children: field }) : field;
+  if (numeric.hint.captionText === void 0 && numeric.errorEl === null && !reserve) return box;
   return /* @__PURE__ */ jsxs("div", { children: [
-    field,
-    textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-caption leading-tight text-[var(--text-muted)]", children: hint }),
-    hasError && /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error })
+    box,
+    /* @__PURE__ */ jsx(FieldCaption, { parts: numeric.hint }),
+    numeric.errorEl
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from \"./ui\";\nimport { CURRENCIES } from \"./currency-select\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useInlineHint } from \"./field-parts\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, formatResult } from \"../lib/calc\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\ninterface NumberInputProps {\n  /** The text, DOT-decimal (\"1234.5\", or a calculation being typed: \"12+5\"), as\n   *  `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it\n   *  in the locale's mark (see `locale`). A comma here is read as the decimal mark too,\n   *  never as grouping. */\n  value: string;\n  /** Fired on every keystroke with the text as a number reads it: grouping marks read\n   *  off (\"1.234,56\" → \"1234.56\" for a German typist, keksdose K5), the decimal mark\n   *  folded to a dot, operators kept so a typed expression survives. */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover — and for the numpad sheet it opens on a phone. Overrides\n   *  for THIS field only: both resolve the `calculator` namespace of\n   *  `<UiKitProvider labels>` themselves, then fall back to English.\n   *\n   *  `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}\n   *  exactly as {@link AmountInput} does, but had no way to pass it anything, so\n   *  the SAME keypad announced itself in German when a money field opened it and in\n   *  English when a goal target did. */\n  labels?: {\n    calculatorTrigger?: string;\n    calculator?: CalculatorButtonLabels;\n    pad?: NumberPadSheetLabels;\n  };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). Plain TEXT (a string or a number) is a caption instead, UNDER\n   *  the field and attached through `aria-describedby` after the caller's own —\n   *  the same rule as {@link Select}'s `hint`: the label line has no room for a\n   *  sentence, and one placed there ran over the label and into the value.\n   *  Since 0.32 a FieldHint is that caption too at Large and on a touch screen,\n   *  where a \"?\" cannot be hovered open (`useInlineHint`). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the value, in the caller's own words — {@link Input}'s `error`,\n   * the same anatomy (keksdose K5/K4: of the kit's fields only `Input` and\n   * `NumberField` had one, so a goal target or a rate field wrote its message as a\n   * loose `<p>` that nothing pointed at). Rendered under the field, after a text\n   * `hint`; merged into `aria-describedby` after the caller's ids and the hint's; and\n   * it implies `invalid`, so the field paints as well as announces. `null`, `false`\n   * and `\"\"` — a `touched && errors.x` on the happy path — are no message.\n   *\n   * Passing the key at all (even `undefined`) keeps the field in a steady wrapper,\n   * message or not, so the message coming and going never remounts the `<input>` and\n   * takes the caret with it — see `Input`'s `FieldGroup`. A field that never passes\n   * `error` renders exactly the DOM it did before the prop existed.\n   */\n  error?: ReactNode;\n  /**\n   * BCP 47 tag that decides the decimal mark the field SHOWS; default the\n   * `<UiKitProvider locale>`, else the runtime's (keksdose K5). A French or Italian\n   * reader sees \"3,5\", a German one too, de-CH and en-US see \"3.5\" — `Intl`\n   * decides, not a guess about a country. Display only: `value` and `onChange` stay\n   * dot-decimal. {@link NumberField} passes its own `locale` through here.\n   */\n  locale?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <NumberInput {...ids} … />}` — is typed and reaches the input: the hint\n   * and error are described, a required number 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   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n  /**\n   * Turns on the step keys: ArrowUp / ArrowDown add or subtract `step`, PageUp /\n   * PageDown ten of them. The result lands on the grid `min + k × step` (or `0 + k ×\n   * step` without a `min`), so 3.1 with `step={0.25}` goes up to 3.25, not 3.35 —\n   * what a native number input does. Decimal-exact: `0.1 + 0.2` steps to \"0.3\".\n   *\n   * A step changes the text through `onChange` like a keystroke would; `onCommit`\n   * still fires on blur/Enter. Without `step` the arrow keys move the caret as before.\n   */\n  step?: number;\n  /** Bounds for the step keys only — a step never leaves `[min, max]`. This field's\n   *  value is a STRING, so typed text is not clamped: {@link NumberField} is the\n   *  numeric field that clamps what is typed as well. */\n  min?: number;\n  max?: number;\n}\n\n/** Decimal places of `n` as written (\"0.25\" → 2, \"1e-7\" → 7), for decimal-exact\n *  stepping. */\nfunction decimalsOf(n: number): number {\n  const text = formatResult(n);\n  const dot = text.indexOf(\".\");\n  return dot === -1 ? 0 : text.length - dot - 1;\n}\n\n/**\n * `current` moved by `count` steps (negative = down), on the grid `origin + k × step`\n * and clamped into `[min, max]`. An off-grid value moves to the NEXT grid point in\n * that direction first, so one press is never more than one step.\n *\n * The grid index is found by division and the result rebuilt as `origin + k × step`,\n * then cut to the decimals `step` and `origin` are written with — which is where\n * binary noise goes: `0.1 × 3` is 0.30000000000000004, and `toFixed(1)` of it is\n * \"0.3\". Summing steps would accumulate that noise press by press instead.\n */\nexport function stepNumber(\n  current: number | null,\n  count: number,\n  step: number,\n  min?: number,\n  max?: number,\n): number {\n  const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n  // Nothing to step from: land on the value nearest zero the bounds allow, rather\n  // than on ±step — a room count with `min={1}` goes to 1, a rate to 0.\n  if (current === null || !Number.isFinite(current)) return clamp(0);\n  const origin = min !== undefined && Number.isFinite(min) ? min : 0;\n  const raw = (current - origin) / step;\n  const nearest = Math.round(raw);\n  // \"On the grid\" within float tolerance: (0.3 - 0) / 0.1 is 2.9999999999999996.\n  const onGrid = Math.abs(raw - nearest) < 1e-9;\n  const k = onGrid\n    ? nearest + count\n    : count > 0\n      ? Math.ceil(raw) + count - 1\n      : Math.floor(raw) + count + 1;\n  const places = Math.min(Math.max(decimalsOf(step), decimalsOf(origin)), 20);\n  return clamp(Number((origin + k * step).toFixed(places)));\n}\n\n// The error line under a field — the type of `ui.tsx`'s (module-private) one, so a\n// NumberInput's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\n\n// ── The money guard (kastlan 5, Kurvenschmiede) ─────────────────────────────────\n\n// The codes the kit's own currency pickers offer, as whole words: \"Amount (CHF)\",\n// \"EUR\", \"Kosten CHF\". Not every ISO 4217 code — \"ALL\", \"TOP\" and \"PEN\" are codes too,\n// and an upper-case label would trip on them.\nconst CURRENCY_CODE = new RegExp(`(?:^|[^A-Za-z])(?:${CURRENCIES.map((c) => c.code).join(\"|\")})(?![A-Za-z])`);\n// Symbols no unit of measure is written with. Not \"kr\", \"R\" or \"Fr\": those are words\n// and units as often as they are money.\nconst CURRENCY_SYMBOL = /[€$£¥₹₺₽₪₩₫฿₴₦₱]/;\n\n/** Text that names a currency and no unit to go with it. A slash makes it a rate or\n *  a unit price (\"CHF/m²\", \"€/kWh\") — a figure whose decimals are its column's\n *  business, not the currency's — and that is not what the guard is for. */\nfunction namesMoney(node: ReactNode): boolean {\n  if (typeof node !== \"string\" && typeof node !== \"number\") return false;\n  const text = String(node);\n  return (CURRENCY_CODE.test(text) || CURRENCY_SYMBOL.test(text)) && !text.includes(\"/\") && !text.includes(\"%\");\n}\n\n/**\n * Is this field being used for MONEY? A currency in the unit (`suffix=\"CHF\"`), or in\n * the label, `ariaLabel` or placeholder of a field with no unit at all (\"Estimated\n * cost (CHF)\"). Any other suffix is a unit — \"%\", \"mm\", \"N·m\" — and says what the\n * digits are, whatever the label says. `digits` plays no part: NumberInput has none,\n * and Kurvenschmiede's engineering fields at 2 and 3 decimals are exactly what this\n * must stay quiet about.\n */\nfunction looksLikeMoney(suffix: ReactNode, texts: ReactNode[]): boolean {\n  if (suffix !== undefined && suffix !== null && suffix !== \"\") return namesMoney(suffix);\n  return texts.some(namesMoney);\n}\n\n/**\n * The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n * production one — the consumer's bundler replaces `import.meta.env.DEV` with `false`\n * there, and this branch is dead code — and never under vitest, where every consumer\n * suite would print it once per render of every field it has not migrated yet. Read\n * per call rather than once per module, so a test can switch it on with `vi.stubEnv`.\n * Optional-chained: `import.meta.env` is a Vite injection, absent under plain Node.\n */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for quantities, rates,\n * percentages and measurements.\n *\n * NOT FOR MONEY. This field never rounds: \"12.345\", or a calculator's \"100/3\", is\n * reported exactly as typed. kastlan's journal lines, a payment allocation and a\n * defect's estimated cost were NumberInputs, and a 3-decimal amount reached a\n * 2-decimal Money column and failed the save with a 422 — in one wizard after the\n * record before it had already been created (kastlan 5). Money goes in\n * {@link AmountInput} (string value, like this one) or {@link MoneyField} (number\n * value): both settle to the currency's minor unit on blur, Enter and every calculator\n * result, and take `digits` for a unit price at a finer scale. In development a\n * NumberInput that looks like money — a currency as its unit, or a currency in the\n * label of a field with no unit — says so on the console, once per field. A unit of\n * measure (\"mm\", \"N·m\", \"%\") keeps it quiet, as does any number of decimals.\n *\n * THE LOCALE'S MARK (keksdose K5). The field shows the `locale`'s decimal mark — \"3,5\"\n * to a French, Italian or German reader — and reads what is typed the way\n * {@link AmountInput} does (keksdose G1): \"1.234,56\" from a German typist is 1234.56,\n * \"1,234.56\" from an English one too, and a lone mark that cannot be grouping is the\n * decimal, whichever key typed it. Before, it always showed \"3.5\" and folded\n * \"1.234,56\" into 1.23456. `value` and `onChange` stay dot-decimal, which is the\n * contract every caller's `Number(value)` reads.\n *\n * While a figure is being typed the field shows the typist's OWN text — \"1.234,5\"\n * stays exactly that — rather than the value re-spelt: re-spelling turned a grouping\n * \".\" into a \",\" under their fingers, after which no rule could tell the two apart, and\n * a text that changes length under the caret moves it to the end. It is re-spelt in the\n * locale's mark, without grouping, once the figure settles (blur, Enter, a step or a\n * calculator result) or when the value changes from outside.\n */\nexport function NumberInput(props: NumberInputProps) {\n  const {\n    value,\n    onChange,\n    onCommit,\n    label,\n    ariaLabel,\n    labels,\n    placeholder,\n    disabled,\n    autoFocus,\n    className,\n    inputClassName,\n    id,\n    calculator = true,\n    variant = \"field\",\n    hint: hintProp,\n    invalid: invalidProp,\n    error,\n    locale: localeProp,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    suffix,\n    step,\n    min,\n    max,\n  } = props;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const hintId = useId();\n  const errorId = useId();\n  // §4 \"No fact only in a tooltip\" (docs/text-size-harmonization.md): at Large and on a\n  // touch screen a FieldHint is its words, so it takes the caption's path below — the\n  // other kit fields do the same through `useFieldHint`.\n  const hint = useInlineHint(hintProp);\n  // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n  const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n  const hasError = hasMessage(error);\n  // Passed at all — even as `undefined` — the field keeps its box; see `error`.\n  const reserve = \"error\" in props || \"hint\" in props;\n  // The standing advice first, the news second: the caller's ids, the caption, the error.\n  const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);\n  const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === \"true\";\n  const labelled = label !== undefined;\n  // On phones we suppress the OS keyboard (inputMode=\"none\" below) for our own\n  // calculator numpad, so the desktop popover trigger is hidden (feedback #334).\n  const isMobile = usePhoneLayout();\n  const asDisplay = isMobile && variant === \"display\";\n  const showCalc = calculator && !disabled && !isMobile;\n  const [focused, setFocused] = useState(false);\n  // The unit and the calculator's measured width, reserved as the field's end padding.\n  const endRef = useRef<HTMLDivElement>(null);\n  const [endWidth, setEndWidth] = useState<number | null>(null);\n  const hasEnd = showCalc || suffix !== undefined;\n  // Before the first measurement (and wherever there is no layout), a TEXT unit\n  // reserves an estimate from its length — one `ch` a character, in the input's own\n  // (larger) font, so it errs wide — plus the span's `pe-2` and the 4px gap, and the\n  // calculator's 36px. The class fallback's flat pe-8 gave a \"%\" 32px for a frame and\n  // \"km/h\" too little.\n  const suffixChars = typeof suffix === \"string\" || typeof suffix === \"number\" ? String(suffix).length : null;\n  const estimatedEnd =\n    suffixChars !== null ? `calc(${suffixChars}ch + 0.75rem${showCalc ? \" + 2.25rem\" : \"\"})` : undefined;\n  useLayoutEffect(() => {\n    const el = endRef.current;\n    if (!hasEnd || !el || typeof ResizeObserver === \"undefined\") return;\n    // The first callback fires on `observe`; no layout (jsdom) keeps the class fallback.\n    const observer = new ResizeObserver(() => {\n      const width = el.getBoundingClientRect().width;\n      setEndWidth(width > 0 ? Math.ceil(width) : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [hasEnd]);\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close.\n  const showNumpad = isMobile && !disabled && focused;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // The mark is the locale's; see the component's note. `derived` is the value in that\n  // mark — one character for one, no grouping — and `draft` the typist's own text,\n  // shown only while it still says what the value says (see `showsTyped`).\n  const mark = decimalMark(useKitLocale(localeProp));\n  const [draft, setDraft] = useState<string | null>(null);\n  const derived = localizeMark(value, mark);\n  const display = draft !== null && showsTyped(draft, mark, value) ? draft : derived;\n\n  // A keystroke, a paste or a numpad key: the typist's text is kept, the value is what\n  // a number reads it as.\n  const typed = (raw: string) => {\n    setDraft(raw);\n    onChange(readTyped(raw, mark));\n  };\n  // A RESULT — the calculator's, the numpad's \"=\" — is dot-decimal already. It does not\n  // go through `typed`: \"1.234\" out of `100/81.03…` is never a thousand.\n  const result = (next: string) => {\n    setDraft(null);\n    onChange(next);\n  };\n\n  // The money guard: once per field, development only. See `looksLikeMoney`.\n  const warnedMoney = useRef(false);\n  useEffect(() => {\n    if (warnedMoney.current || !devWarnings()) return;\n    if (!looksLikeMoney(suffix, [label, ariaLabel, placeholder])) return;\n    warnedMoney.current = true;\n    const name = [label, ariaLabel, suffix].find((t) => typeof t === \"string\" || typeof t === \"number\");\n    console.warn(\n      `[ui-kit] NumberInput${name === undefined ? \"\" : ` \"${String(name)}\"`} looks like a money field: a ` +\n        `currency, and no unit. NumberInput never rounds, so \"12.345\" or a calculator's \"100/3\" is sent with ` +\n        `three or more decimals (kastlan 5: a 422 from a 2-decimal Money column). Use AmountInput (string ` +\n        `value) or MoneyField (number value) — both settle to the currency's minor unit. ` +\n        `(Development builds only; once per field.)`,\n    );\n  }, [suffix, label, ariaLabel, placeholder]);\n\n  const commit = () => {\n    setDraft(null);\n    const next = commitExpression(value);\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const stepBy = (count: number) => {\n    setDraft(null);\n    // The step starts from the text as a commit would read it, so \"12+5\" steps from 17.\n    const resolved = commitExpression(value).trim();\n    const n = resolved === \"\" ? NaN : Number(resolved);\n    const next = formatResult(stepNumber(Number.isFinite(n) ? n : null, count, step as number, min, max));\n    if (next !== value) onChange(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") return commit();\n    // A zero, negative or non-finite step is no step: the keys stay the caret's.\n    if (!step || !(step > 0) || !Number.isFinite(step) || e.altKey || e.ctrlKey || e.metaKey) return;\n    const count =\n      e.key === \"ArrowUp\" ? 1 : e.key === \"ArrowDown\" ? -1 : e.key === \"PageUp\" ? 10 : e.key === \"PageDown\" ? -10 : 0;\n    if (count === 0) return;\n    // Otherwise ArrowUp/Down also jump the caret to the start/end of the text.\n    e.preventDefault();\n    stepBy(count);\n  };\n\n  const field = (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={textHint ? undefined : hint}\n    >\n      <input\n        ref={inputRef}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n        autoFocus={autoFocus}\n        disabled={disabled}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={display}\n        onChange={(e) => typed(e.target.value)}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n        aria-required={ariaRequired}\n        // The end padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pe-16\" : showCalc ? \"pe-9\" : suffix !== undefined ? \"pe-8\" : undefined,\n          invalid && FIELD_INVALID,\n        )}\n        // The classes above are the fallback; once the end controls are measured the\n        // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a\n        // \"%\" in a ~78px table cell 32px of padding and the digits ~32px of room\n        // (keksdose live #367); a long unit (\"km/h\") got too little.\n        style={\n          hasEnd && endWidth != null\n            ? { paddingInlineEnd: endWidth + 4 }\n            : estimatedEnd !== undefined\n              ? { paddingInlineEnd: estimatedEnd }\n              : undefined\n        }\n      />\n      {(showCalc || suffix !== undefined) && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div ref={endRef} className=\"absolute inset-y-0 end-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              // Seeded with the value in the field's mark but WITHOUT the typist's\n              // grouping: the evaluator reads either mark, but \"1.234,5\" is two of them.\n              value={derived}\n              onChange={result}\n              className=\"self-stretch px-2.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              // pe-2, not the input's px-3: the unit is chrome at the box's edge, and\n              // with pe-3 plus the 4px gap it took ~26px of a narrow table cell.\n              className=\"pointer-events-none pe-2 text-xs font-medium text-[var(--text-muted)]\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet\n          // Localised like the field it mirrors, as AmountInput's is: its keys are\n          // typing, read by the locale's marks like the keyboard's; \"=\" is a result.\n          value={display}\n          onChange={typed}\n          onResult={result}\n          onDone={() => inputRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n          decimalMark={mark}\n        />\n      )}\n    </FloatingField>\n  );\n  if (!textHint && !hasError && !reserve) return field;\n  // Outside the field's own `relative` box, as Select's caption is: the calculator\n  // and the unit are `inset-y-0` in it and would stretch down over a second line.\n  // `className` stays on the field, so adding a caption cannot change what it styles.\n  return (\n    <div>\n      {field}\n      {textHint && (\n        <p id={hintId} className=\"mt-1 text-caption leading-tight text-[var(--text-muted)]\">\n          {hint}\n        </p>\n      )}\n      {hasError && (\n        <p id={errorId} className={FIELD_ERROR_CLASS}>\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport {\n  FIELD_BASE,\n  FIELD_DISPLAY,\n  FIELD_INVALID,\n  FLOATING_INPUT_CLASS,\n  FloatingField,\n} from \"./field-base\";\nimport { CURRENCIES } from \"./currency-select\";\nimport { FieldCaption, LockedReason, mergeRefs, type DisabledReasonDisplay } from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, formatResult } from \"../lib/calc\";\n\n/** {@link NumberInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n *  wrapper typed itself off `ComponentProps<typeof NumberInput>` until then. */\nexport interface NumberInputProps {\n  /** The text, DOT-decimal (\"1234.5\", or a calculation being typed: \"12+5\"), as\n   *  `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it\n   *  in the locale's mark (see `locale`). A comma here is read as the decimal mark too,\n   *  never as grouping. */\n  value: string;\n  /** Fired on every keystroke with the text as a number reads it: grouping marks read\n   *  off (\"1.234,56\" → \"1234.56\" for a German typist, keksdose K5), the decimal mark\n   *  folded to a dot, operators kept so a typed expression survives. */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  /** Names the field when it has no visible `label` (a table cell, a phone's display\n   *  shape). */\n  \"aria-label\"?: string;\n  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).\n   *  Names the field only when `aria-label` is absent. */\n  ariaLabel?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover — and for the numpad sheet it opens on a phone. Overrides\n   *  for THIS field only: both resolve the `calculator` namespace of\n   *  `<UiKitProvider labels>` themselves, then fall back to English.\n   *\n   *  `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}\n   *  exactly as {@link AmountInput} does, but had no way to pass it anything, so\n   *  the SAME keypad announced itself in German when a money field opened it and in\n   *  English when a goal target did. */\n  labels?: {\n    calculatorTrigger?: string;\n    calculator?: CalculatorButtonLabels;\n    pad?: NumberPadSheetLabels;\n  };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). Plain TEXT (a string or a number) is a caption instead, UNDER\n   *  the field and attached through `aria-describedby` after the caller's own —\n   *  the same rule as {@link Select}'s `hint`: the label line has no room for a\n   *  sentence, and one placed there ran over the label and into the value.\n   *  Since 0.32 a FieldHint is that caption too at Large and on a touch screen,\n   *  where a \"?\" cannot be hovered open (`useInlineHint`). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * What is wrong with the value, in the caller's own words — {@link Input}'s `error`,\n   * the same anatomy (keksdose K5/K4: of the kit's fields only `Input` and\n   * `NumberField` had one, so a goal target or a rate field wrote its message as a\n   * loose `<p>` that nothing pointed at). Rendered under the field, after a text\n   * `hint`; merged into `aria-describedby` after the caller's ids and the hint's; and\n   * it implies `invalid`, so the field paints as well as announces. `null`, `false`\n   * and `\"\"` — a `touched && errors.x` on the happy path — are no message.\n   *\n   * Passing the key at all (even `undefined`) keeps the field in a steady wrapper,\n   * message or not, so the message coming and going never remounts the `<input>` and\n   * takes the caret with it — see `Input`'s `FieldGroup`. A field that never passes\n   * `error` renders exactly the DOM it did before the prop existed.\n   */\n  error?: ReactNode;\n  /**\n   * BCP 47 tag that decides the decimal mark the field SHOWS; default the\n   * `<UiKitProvider locale>`, else the runtime's (keksdose K5). A French or Italian\n   * reader sees \"3,5\", a German one too, de-CH and en-US see \"3.5\" — `Intl`\n   * decides, not a guess about a country. Display only: `value` and `onChange` stay\n   * dot-decimal. {@link NumberField} passes its own `locale` through here.\n   */\n  locale?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <NumberInput {...ids} … />}` — is typed and reaches the input: the hint\n   * and error are described, a required number 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   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n  /**\n   * Turns on the step keys: ArrowUp / ArrowDown add or subtract `step`, PageUp /\n   * PageDown ten of them. The result lands on the grid `min + k × step` (or `0 + k ×\n   * step` without a `min`), so 3.1 with `step={0.25}` goes up to 3.25, not 3.35 —\n   * what a native number input does. Decimal-exact: `0.1 + 0.2` steps to \"0.3\".\n   *\n   * A step changes the text through `onChange` like a keystroke would; `onCommit`\n   * still fires on blur/Enter. Without `step` the arrow keys move the caret as before.\n   */\n  step?: number;\n  /** Bounds for the step keys only — a step never leaves `[min, max]`. This field's\n   *  value is a STRING, so typed text is not clamped: {@link NumberField} is the\n   *  numeric field that clamps what is typed as well. */\n  min?: number;\n  max?: number;\n  /**\n   * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a number\n   * that SAVES itself: a setting committed on blur, a figure in a row editor\n   * (Kurvenschmiede's session page, 0.33.1). `disabled` takes the field out of the tab\n   * order, so the reason never reached a keyboard, and Kurvenschmiede wrote its own\n   * `CommitInput` to keep it in.\n   *\n   * With a reason the field stays in the tab order and shows its value, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`, as the\n   * Combobox family's lock is. Nothing changes the value: the step keys do nothing, the\n   * calculator and the phone's numpad are not offered, and neither blur nor Enter\n   * commits — so `onChange` and `onCommit` are never called. Enter is swallowed, so the\n   * field does not submit the form around it. The reason is a line under the field at\n   * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),\n   * and on the input's `aria-describedby`, between the caption and the error. Wins over\n   * `disabled`.\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 field COMMITS — {@link Button}'s `commit`: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). A field whose value only reaches the server through the\n   * form's Save leaves this off and stays editable under the lock; the Save takes\n   * `commit`. No provider, or an unlocked one: no effect. {@link NumberField} and\n   * {@link IntegerField} pass it on.\n   */\n  commit?: CommitScope;\n  /**\n   * The `<input>`, as a React 19 ref prop (0.34, API-3, refactor audit 2026-10): the one\n   * focusable field of its family with no ref at all, so react-hook-form's focus-on-error\n   * could reach it only through /rhf's id lookup, and an app not at all.\n   * {@link NumberField} and {@link IntegerField} pass it on.\n   */\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** Decimal places of `n` as written (\"0.25\" → 2, \"1e-7\" → 7), for decimal-exact\n *  stepping. */\nfunction decimalsOf(n: number): number {\n  const text = formatResult(n);\n  const dot = text.indexOf(\".\");\n  return dot === -1 ? 0 : text.length - dot - 1;\n}\n\n/**\n * `current` moved by `count` steps (negative = down), on the grid `origin + k × step`\n * and clamped into `[min, max]`. An off-grid value moves to the NEXT grid point in\n * that direction first, so one press is never more than one step.\n *\n * The grid index is found by division and the result rebuilt as `origin + k × step`,\n * then cut to the decimals `step` and `origin` are written with — which is where\n * binary noise goes: `0.1 × 3` is 0.30000000000000004, and `toFixed(1)` of it is\n * \"0.3\". Summing steps would accumulate that noise press by press instead.\n */\nexport function stepNumber(\n  current: number | null,\n  count: number,\n  step: number,\n  min?: number,\n  max?: number,\n): number {\n  const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n  // Nothing to step from: land on the value nearest zero the bounds allow, rather\n  // than on ±step — a room count with `min={1}` goes to 1, a rate to 0.\n  if (current === null || !Number.isFinite(current)) return clamp(0);\n  const origin = min !== undefined && Number.isFinite(min) ? min : 0;\n  const raw = (current - origin) / step;\n  const nearest = Math.round(raw);\n  // \"On the grid\" within float tolerance: (0.3 - 0) / 0.1 is 2.9999999999999996.\n  const onGrid = Math.abs(raw - nearest) < 1e-9;\n  const k = onGrid\n    ? nearest + count\n    : count > 0\n      ? Math.ceil(raw) + count - 1\n      : Math.floor(raw) + count + 1;\n  const places = Math.min(Math.max(decimalsOf(step), decimalsOf(origin)), 20);\n  return clamp(Number((origin + k * step).toFixed(places)));\n}\n\n/** NumberInput never rounds: what was typed (or calculated) is what it reports. */\nconst asTyped = (text: string) => text;\n\n// ── The money guard (kastlan 5, Kurvenschmiede) ─────────────────────────────────\n\n// The codes the kit's own currency pickers offer, as whole words: \"Amount (CHF)\",\n// \"EUR\", \"Kosten CHF\". Not every ISO 4217 code — \"ALL\", \"TOP\" and \"PEN\" are codes too,\n// and an upper-case label would trip on them.\nconst CURRENCY_CODE = new RegExp(`(?:^|[^A-Za-z])(?:${CURRENCIES.map((c) => c.code).join(\"|\")})(?![A-Za-z])`);\n// Symbols no unit of measure is written with. Not \"kr\", \"R\" or \"Fr\": those are words\n// and units as often as they are money.\nconst CURRENCY_SYMBOL = /[€$£¥₹₺₽₪₩₫฿₴₦₱]/;\n\n/** Text that names a currency and no unit to go with it. A slash makes it a rate or\n *  a unit price (\"CHF/m²\", \"€/kWh\") — a figure whose decimals are its column's\n *  business, not the currency's — and that is not what the guard is for. */\nfunction namesMoney(node: ReactNode): boolean {\n  if (typeof node !== \"string\" && typeof node !== \"number\") return false;\n  const text = String(node);\n  return (CURRENCY_CODE.test(text) || CURRENCY_SYMBOL.test(text)) && !text.includes(\"/\") && !text.includes(\"%\");\n}\n\n/**\n * Is this field being used for MONEY? A currency in the unit (`suffix=\"CHF\"`), or in\n * the label, `aria-label` or placeholder of a field with no unit at all (\"Estimated\n * cost (CHF)\"). Any other suffix is a unit — \"%\", \"mm\", \"N·m\" — and says what the\n * digits are, whatever the label says. `digits` plays no part: NumberInput has none,\n * and Kurvenschmiede's engineering fields at 2 and 3 decimals are exactly what this\n * must stay quiet about.\n */\nfunction looksLikeMoney(suffix: ReactNode, texts: ReactNode[]): boolean {\n  if (suffix !== undefined && suffix !== null && suffix !== \"\") return namesMoney(suffix);\n  return texts.some(namesMoney);\n}\n\n/**\n * The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n * production one — the consumer's bundler replaces `import.meta.env.DEV` with `false`\n * there, and this branch is dead code — and never under vitest, where every consumer\n * suite would print it once per render of every field it has not migrated yet. Read\n * per call rather than once per module, so a test can switch it on with `vi.stubEnv`.\n * Optional-chained: `import.meta.env` is a Vite injection, absent under plain Node.\n */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for quantities, rates,\n * percentages and measurements.\n *\n * NOT FOR MONEY. This field never rounds: \"12.345\", or a calculator's \"100/3\", is\n * reported exactly as typed. kastlan's journal lines, a payment allocation and a\n * defect's estimated cost were NumberInputs, and a 3-decimal amount reached a\n * 2-decimal Money column and failed the save with a 422 — in one wizard after the\n * record before it had already been created (kastlan 5). Money goes in\n * {@link AmountInput} (string value, like this one) or {@link MoneyField} (number\n * value): both settle to the currency's minor unit on blur, Enter and every calculator\n * result, and take `digits` for a unit price at a finer scale. In development a\n * NumberInput that looks like money — a currency as its unit, or a currency in the\n * label of a field with no unit — says so on the console, once per field. A unit of\n * measure (\"mm\", \"N·m\", \"%\") keeps it quiet, as does any number of decimals.\n *\n * THE LOCALE'S MARK (keksdose K5). The field shows the `locale`'s decimal mark — \"3,5\"\n * to a French, Italian or German reader — and reads what is typed the way\n * {@link AmountInput} does (keksdose G1): \"1.234,56\" from a German typist is 1234.56,\n * \"1,234.56\" from an English one too, and a lone mark that cannot be grouping is the\n * decimal, whichever key typed it. Before, it always showed \"3.5\" and folded\n * \"1.234,56\" into 1.23456. `value` and `onChange` stay dot-decimal, which is the\n * contract every caller's `Number(value)` reads.\n *\n * While a figure is being typed the field shows the typist's OWN text — \"1.234,5\"\n * stays exactly that — rather than the value re-spelt: re-spelling turned a grouping\n * \".\" into a \",\" under their fingers, after which no rule could tell the two apart, and\n * a text that changes length under the caret moves it to the end. It is re-spelt in the\n * locale's mark, without grouping, once the figure settles (blur, Enter, a step or a\n * calculator result) or when the value changes from outside.\n */\nexport function NumberInput(props: NumberInputProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    onCommit,\n    label,\n    \"aria-label\": ariaLabelAttr,\n    ariaLabel: ariaLabelProp,\n    labels,\n    placeholder,\n    autoFocus,\n    className,\n    inputClassName,\n    id,\n    \"aria-required\": ariaRequired,\n    suffix,\n    step,\n    min,\n    max,\n    disabledReasonDisplay,\n  } = props;\n  // The DOM spelling wins; `ariaLabel` is the fallback for call sites not moved yet.\n  const ariaLabel = ariaLabelAttr ?? ariaLabelProp;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  // The engine AmountInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n  // changes or commits — 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 and\n  // the locale's mark (see the component's note), the calculator and the numpad.\n  // NumberInput never rounds; it shows the value as it is.\n  const numeric = useNumericField(props, { settle: asTyped, display: () => value });\n  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, setDraft, derived } = numeric;\n  const invalid = numeric.isInvalid;\n  // Passed at all — even as `undefined` — the field keeps its box; see `error`.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const labelled = label !== undefined;\n  // The unit and the calculator's measured width, reserved as the field's end padding.\n  const hasEnd = showCalc || suffix !== undefined;\n  const [endRef, endWidth] = useEndWidth(hasEnd);\n  // Before the first measurement (and wherever there is no layout), a TEXT unit\n  // reserves an estimate from its length — one `ch` a character, in the input's own\n  // (larger) font, so it errs wide — plus the span's `pe-2` and the 4px gap, and the\n  // calculator's 36px. The class fallback's flat pe-8 gave a \"%\" 32px for a frame and\n  // \"km/h\" too little.\n  const suffixChars = typeof suffix === \"string\" || typeof suffix === \"number\" ? String(suffix).length : null;\n  const estimatedEnd =\n    suffixChars !== null ? `calc(${suffixChars}ch + 0.75rem${showCalc ? \" + 2.25rem\" : \"\"})` : undefined;\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close. The caller's `ref`\n  // gets the same element.\n  const inputRef = useRef<HTMLInputElement>(null);\n  const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n\n  // `derived` is the value in the locale's mark — one character for one, no grouping —\n  // and the draft the typist's own text, shown only while it still says what the value\n  // says (see `showsTyped`).\n  const display = numeric.typedFor(value) ?? derived;\n\n  // A keystroke, a paste or a numpad key: the typist's text is kept, the value is what\n  // a number reads it as.\n  const typed = (raw: string) => onChange(numeric.read(raw));\n  // A RESULT — the calculator's, the numpad's \"=\" — is dot-decimal already. It does not\n  // go through `typed`: \"1.234\" out of `100/81.03…` is never a thousand.\n  const result = (next: string) => {\n    setDraft(null);\n    onChange(next);\n  };\n\n  // The money guard: once per field, development only. See `looksLikeMoney`.\n  const warnedMoney = useRef(false);\n  useEffect(() => {\n    if (warnedMoney.current || !devWarnings()) return;\n    if (!looksLikeMoney(suffix, [label, ariaLabel, placeholder])) return;\n    warnedMoney.current = true;\n    const name = [label, ariaLabel, suffix].find((t) => typeof t === \"string\" || typeof t === \"number\");\n    console.warn(\n      `[ui-kit] NumberInput${name === undefined ? \"\" : ` \"${String(name)}\"`} looks like a money field: a ` +\n        `currency, and no unit. NumberInput never rounds, so \"12.345\" or a calculator's \"100/3\" is sent with ` +\n        `three or more decimals (kastlan 5: a 422 from a 2-decimal Money column). Use AmountInput (string ` +\n        `value) or MoneyField (number value) — both settle to the currency's minor unit. ` +\n        `(Development builds only; once per field.)`,\n    );\n  }, [suffix, label, ariaLabel, placeholder]);\n\n  const commit = () => {\n    setDraft(null);\n    const next = numeric.settle(commitExpression(value));\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const stepBy = (count: number) => {\n    setDraft(null);\n    // The step starts from the text as a commit would read it, so \"12+5\" steps from 17.\n    const resolved = commitExpression(value).trim();\n    const n = resolved === \"\" ? NaN : Number(resolved);\n    const next = formatResult(stepNumber(Number.isFinite(n) ? n : null, count, step as number, min, max));\n    if (next !== value) onChange(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    // Locked: Enter submits no form and commits nothing, and no key steps the value.\n    // The arrows and Home/End stay the caret's, for a long value someone is reading.\n    if (locked) {\n      if (e.key === \"Enter\") e.preventDefault();\n      return;\n    }\n    if (e.key === \"Enter\") return commit();\n    // A zero, negative or non-finite step is no step: the keys stay the caret's.\n    if (!step || !(step > 0) || !Number.isFinite(step) || e.altKey || e.ctrlKey || e.metaKey) return;\n    const count =\n      e.key === \"ArrowUp\" ? 1 : e.key === \"ArrowDown\" ? -1 : e.key === \"PageUp\" ? 10 : e.key === \"PageDown\" ? -10 : 0;\n    if (count === 0) return;\n    // Otherwise ArrowUp/Down also jump the caret to the start/end of the text.\n    e.preventDefault();\n    stepBy(count);\n  };\n\n  // While locked the field sits in the reason's frame (line or Tooltip), its outermost\n  // box — so `className` (a width, a flex or grid cell) moves onto that, and the form\n  // keeps its layout, as on Select.\n  const field = (\n    <FloatingField\n      className={cn(\"w-full\", !locked && className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={numeric.hint.labelHint}\n    >\n      <input\n        ref={setInput}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n        autoFocus={autoFocus}\n        disabled={off}\n        // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n        readOnly={locked || undefined}\n        aria-disabled={locked || undefined}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={display}\n        onChange={(e) => {\n          if (!locked) typed(e.target.value);\n        }}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          // Nothing commits 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={onKeyDown}\n        aria-invalid={invalid || undefined}\n        aria-describedby={numeric.describedBy}\n        aria-required={ariaRequired}\n        // The end padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pe-16\" : showCalc ? \"pe-9\" : suffix !== undefined ? \"pe-8\" : undefined,\n          invalid && FIELD_INVALID,\n          locked && \"cursor-not-allowed\",\n        )}\n        // The classes above are the fallback; once the end controls are measured the\n        // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a\n        // \"%\" in a ~78px table cell 32px of padding and the digits ~32px of room\n        // (keksdose live #367); a long unit (\"km/h\") got too little.\n        style={\n          hasEnd && endWidth != null\n            ? { paddingInlineEnd: endWidth + 4 }\n            : estimatedEnd !== undefined\n              ? { paddingInlineEnd: estimatedEnd }\n              : undefined\n        }\n      />\n      {hasEnd && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div ref={endRef} className=\"absolute inset-y-0 end-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              // Seeded with the value in the field's mark but WITHOUT the typist's\n              // grouping: the evaluator reads either mark, but \"1.234,5\" is two of them.\n              value={derived}\n              onChange={result}\n              className=\"self-stretch px-2.5\"\n              aria-label={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              // pe-2, not the input's px-3: the unit is chrome at the box's edge, and\n              // with pe-3 plus the 4px gap it took ~26px of a narrow table cell.\n              className=\"pointer-events-none pe-2 text-xs font-medium text-muted\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet\n          // Localised like the field it mirrors, as AmountInput's is: its keys are\n          // typing, read by the locale's marks like the keyboard's; \"=\" is a result.\n          value={display}\n          onChange={typed}\n          onResult={result}\n          onDone={() => inputRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n          decimalMark={mark}\n        />\n      )}\n    </FloatingField>\n  );\n  const box = locked ? (\n    <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block w-full\", className)}>\n      {field}\n    </LockedReason>\n  ) : (\n    field\n  );\n  if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) return box;\n  // Outside the field's own `relative` box, as Select's caption is: the calculator\n  // and the unit are `inset-y-0` in it and would stretch down over a second line.\n  // `className` stays on the field, so adding a caption cannot change what it styles.\n  return (\n    <div>\n      {box}\n      <FieldCaption parts={numeric.hint} />\n      {numeric.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/numeric-field.d.ts

@@ -0,0 +1,85 @@
+import type { ReactNode, RefObject } from "react";
+import { type FieldHintParts, type LockReason } from "./field-parts.js";
+import type { CommitScope } from "./write-lock.js";
+/**
+ * The engine NumberInput and AmountInput share (DUP-10, refactor audit 2026-10): the
+ * lock, the hint and its caption, the error, the `aria-describedby` order, the typist's
+ * draft and what the field shows, the calculator and the phone's numpad, and the room
+ * its end controls take. They were two copies of it, and each fix had to be made twice —
+ * some reached only one: NumberInput measured its end controls (keksdose live #367) and
+ * took a `locale`, AmountInput did neither; the 0.32 FieldHint caption reached
+ * AmountInput two releases late.
+ *
+ * Each field keeps what is its own: the settle (money's minor unit and `min`/`max`
+ * against NumberInput's "what was typed"), the caller-owned sign, and its trailing
+ * controls. Package-private — not re-exported from the barrel.
+ */
+/** The props both fields take and this engine reads. */
+export interface NumericFieldProps {
+    hint?: ReactNode;
+    error?: ReactNode;
+    invalid?: boolean;
+    disabled?: boolean;
+    disabledReason?: ReactNode;
+    commit?: CommitScope;
+    /** Show the desktop calculator trigger. Default `true`. */
+    calculator?: boolean;
+    variant?: "field" | "display";
+    locale?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+}
+export interface NumericFieldOptions {
+    /** The field's own settle, dot-decimal in and out — AmountInput's minor unit and
+     *  `min` / `max`; NumberInput's identity (it never rounds). */
+    settle: (text: string) => string;
+    /** What the field shows while no typed draft stands, dot-decimal, given whether it
+     *  has focus — spelt in the locale's mark here (`derived`). */
+    display: (focused: boolean) => string;
+}
+export interface NumericField {
+    /** The write lock: focusable, `readOnly`, nothing changes or commits. */
+    lock: LockReason;
+    locked: boolean;
+    /** Natively `disabled`: `disabled`, and no lock — a reason wins over it. */
+    off: boolean;
+    /** The hint, split into the caption under the field and the label line's "?". */
+    hint: FieldHintParts;
+    /** `invalid`, a message, or a form library's `aria-invalid`. */
+    isInvalid: boolean;
+    /** The caller's ids, the caption, a lock's reason, the error — Select's order. */
+    describedBy: string | undefined;
+    /** The message under the field, or `null`. */
+    errorEl: ReactNode;
+    /** The phone layout: the numpad sheet replaces the keyboard and the calculator. */
+    isMobile: boolean;
+    /** `variant="display"`, on a phone. */
+    asDisplay: boolean;
+    showCalc: boolean;
+    showNumpad: boolean;
+    focused: boolean;
+    setFocused: (focused: boolean) => void;
+    /** The locale's decimal mark — the field's `locale`, else the provider's. */
+    mark: "," | ".";
+    /** The typist's own text while a figure is typed, else `null`. */
+    draft: string | null;
+    setDraft: (draft: string | null) => void;
+    /** `display(focused)` in the locale's mark. */
+    derived: string;
+    /** The draft, while it still says what `canonical` (dot-decimal) says and holds
+     *  nothing the field would drop — see `showsTyped`; else `null`. */
+    typedFor: (canonical: string) => string | null;
+    /** A keystroke's raw text: kept as the draft, and read as a number reads it —
+     *  grouping off, dot-decimal. */
+    read: (raw: string) => string;
+    settle: (text: string) => string;
+}
+export declare function useNumericField(props: NumericFieldProps, { settle, display }: NumericFieldOptions): NumericField;
+/**
+ * The measured width of a field's end controls (keksdose live #367), and the ref for
+ * their track: `null` before the first measurement and wherever there is no layout
+ * (jsdom), where the field keeps its class fallback. A `ResizeObserver` calls back once
+ * on `observe`, and again whenever the controls change size (a chip's code, a translated
+ * label, the text size). A pair, so the width reads as the plain number it is.
+ */
+export declare function useEndWidth(present: boolean): [RefObject<HTMLDivElement | null>, number | null];

package/dist/components/numeric-field.js

@@ -0,0 +1,71 @@
+"use client";
+import { useLayoutEffect, useRef, useState } from "react";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
+import { useKitLocale } from "../i18n/kit-labels.js";
+import { decimalMark, localizeMark, readTyped, showsTyped } from "../lib/decimal-marks.js";
+import {
+  mergeDescribedBy,
+  useFieldError,
+  useFieldHint,
+  useLockReason
+} from "./field-parts.js";
+function useNumericField(props, { settle, display }) {
+  const lock = useLockReason(props.commit, props.disabledReason);
+  const locked = lock.locked;
+  const hint = useFieldHint(props.hint, props["aria-describedby"]);
+  const field = useFieldError(
+    props.error,
+    props.invalid,
+    mergeDescribedBy(hint.describedBy, locked && lock.reasonId),
+    props["aria-invalid"]
+  );
+  const isMobile = usePhoneLayout();
+  const [focused, setFocused] = useState(false);
+  const mark = decimalMark(useKitLocale(props.locale));
+  const [draft, setDraft] = useState(null);
+  return {
+    lock,
+    locked,
+    off: Boolean(props.disabled) && !locked,
+    hint,
+    isInvalid: field.isInvalid,
+    describedBy: field.describedBy,
+    errorEl: field.errorEl,
+    isMobile,
+    asDisplay: isMobile && props.variant === "display",
+    showCalc: (props.calculator ?? true) && !props.disabled && !locked && !isMobile,
+    showNumpad: isMobile && !props.disabled && !locked && focused,
+    focused,
+    setFocused,
+    mark,
+    draft,
+    setDraft,
+    derived: localizeMark(display(focused), mark),
+    typedFor: (canonical) => draft !== null && showsTyped(draft, mark, canonical) ? draft : null,
+    read: (raw) => {
+      setDraft(raw);
+      return readTyped(raw, mark);
+    },
+    settle
+  };
+}
+function useEndWidth(present) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!present || !el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      const measured = el.getBoundingClientRect().width;
+      setWidth(measured > 0 ? Math.ceil(measured) : null);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [present]);
+  return [ref, width];
+}
+export {
+  useEndWidth,
+  useNumericField
+};
+//# sourceMappingURL=numeric-field.js.map

package/dist/components/numeric-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/numeric-field.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport {\n  mergeDescribedBy,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type FieldHintParts,\n  type LockReason,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * The engine NumberInput and AmountInput share (DUP-10, refactor audit 2026-10): the\n * lock, the hint and its caption, the error, the `aria-describedby` order, the typist's\n * draft and what the field shows, the calculator and the phone's numpad, and the room\n * its end controls take. They were two copies of it, and each fix had to be made twice —\n * some reached only one: NumberInput measured its end controls (keksdose live #367) and\n * took a `locale`, AmountInput did neither; the 0.32 FieldHint caption reached\n * AmountInput two releases late.\n *\n * Each field keeps what is its own: the settle (money's minor unit and `min`/`max`\n * against NumberInput's \"what was typed\"), the caller-owned sign, and its trailing\n * controls. Package-private — not re-exported from the barrel.\n */\n\n/** The props both fields take and this engine reads. */\nexport interface NumericFieldProps {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  disabled?: boolean;\n  disabledReason?: ReactNode;\n  commit?: CommitScope;\n  /** Show the desktop calculator trigger. Default `true`. */\n  calculator?: boolean;\n  variant?: \"field\" | \"display\";\n  locale?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n}\n\nexport interface NumericFieldOptions {\n  /** The field's own settle, dot-decimal in and out — AmountInput's minor unit and\n   *  `min` / `max`; NumberInput's identity (it never rounds). */\n  settle: (text: string) => string;\n  /** What the field shows while no typed draft stands, dot-decimal, given whether it\n   *  has focus — spelt in the locale's mark here (`derived`). */\n  display: (focused: boolean) => string;\n}\n\nexport interface NumericField {\n  /** The write lock: focusable, `readOnly`, nothing changes or commits. */\n  lock: LockReason;\n  locked: boolean;\n  /** Natively `disabled`: `disabled`, and no lock — a reason wins over it. */\n  off: boolean;\n  /** The hint, split into the caption under the field and the label line's \"?\". */\n  hint: FieldHintParts;\n  /** `invalid`, a message, or a form library's `aria-invalid`. */\n  isInvalid: boolean;\n  /** The caller's ids, the caption, a lock's reason, the error — Select's order. */\n  describedBy: string | undefined;\n  /** The message under the field, or `null`. */\n  errorEl: ReactNode;\n  /** The phone layout: the numpad sheet replaces the keyboard and the calculator. */\n  isMobile: boolean;\n  /** `variant=\"display\"`, on a phone. */\n  asDisplay: boolean;\n  showCalc: boolean;\n  showNumpad: boolean;\n  focused: boolean;\n  setFocused: (focused: boolean) => void;\n  /** The locale's decimal mark — the field's `locale`, else the provider's. */\n  mark: \",\" | \".\";\n  /** The typist's own text while a figure is typed, else `null`. */\n  draft: string | null;\n  setDraft: (draft: string | null) => void;\n  /** `display(focused)` in the locale's mark. */\n  derived: string;\n  /** The draft, while it still says what `canonical` (dot-decimal) says and holds\n   *  nothing the field would drop — see `showsTyped`; else `null`. */\n  typedFor: (canonical: string) => string | null;\n  /** A keystroke's raw text: kept as the draft, and read as a number reads it —\n   *  grouping off, dot-decimal. */\n  read: (raw: string) => string;\n  settle: (text: string) => string;\n}\n\nexport function useNumericField(props: NumericFieldProps, { settle, display }: NumericFieldOptions): NumericField {\n  const lock = useLockReason(props.commit, props.disabledReason);\n  const locked = lock.locked;\n  // §4: a FieldHint is the caption at Large and on touch, as on every field.\n  const hint = useFieldHint(props.hint, props[\"aria-describedby\"]);\n  // The standing advice first, the news second: the caller's ids, the caption, the\n  // error — a lock's reason between the last two, as on Select.\n  const field = useFieldError(\n    props.error,\n    props.invalid,\n    mergeDescribedBy(hint.describedBy, locked && lock.reasonId),\n    props[\"aria-invalid\"],\n  );\n  // On phones the OS keyboard is suppressed (`inputMode=\"none\"`) for the kit's numpad\n  // sheet, so the desktop calculator trigger is hidden (feedback #334). A locked field\n  // offers neither: their result would be a value.\n  const isMobile = usePhoneLayout();\n  const [focused, setFocused] = useState(false);\n  const mark = decimalMark(useKitLocale(props.locale));\n  const [draft, setDraft] = useState<string | null>(null);\n  return {\n    lock,\n    locked,\n    off: Boolean(props.disabled) && !locked,\n    hint,\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    errorEl: field.errorEl,\n    isMobile,\n    asDisplay: isMobile && props.variant === \"display\",\n    showCalc: (props.calculator ?? true) && !props.disabled && !locked && !isMobile,\n    showNumpad: isMobile && !props.disabled && !locked && focused,\n    focused,\n    setFocused,\n    mark,\n    draft,\n    setDraft,\n    derived: localizeMark(display(focused), mark),\n    typedFor: (canonical) => (draft !== null && showsTyped(draft, mark, canonical) ? draft : null),\n    read: (raw) => {\n      setDraft(raw);\n      return readTyped(raw, mark);\n    },\n    settle,\n  };\n}\n\n/**\n * The measured width of a field's end controls (keksdose live #367), and the ref for\n * their track: `null` before the first measurement and wherever there is no layout\n * (jsdom), where the field keeps its class fallback. A `ResizeObserver` calls back once\n * on `observe`, and again whenever the controls change size (a chip's code, a translated\n * label, the text size). A pair, so the width reads as the plain number it is.\n */\nexport function useEndWidth(present: boolean): [RefObject<HTMLDivElement | null>, number | null] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!present || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setWidth(measured > 0 ? Math.ceil(measured) : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [present]);\n  return [ref, width];\n}\n"],"mappings":";AAAA,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,aAAa,cAAc,WAAW,kBAAkB;AACjE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAgFA,SAAS,gBAAgB,OAA0B,EAAE,QAAQ,QAAQ,GAAsC;AAChH,QAAM,OAAO,cAAc,MAAM,QAAQ,MAAM,cAAc;AAC7D,QAAM,SAAS,KAAK;AAEpB,QAAM,OAAO,aAAa,MAAM,MAAM,MAAM,kBAAkB,CAAC;AAG/D,QAAM,QAAQ;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,iBAAiB,KAAK,aAAa,UAAU,KAAK,QAAQ;AAAA,IAC1D,MAAM,cAAc;AAAA,EACtB;AAIA,QAAM,WAAW,eAAe;AAChC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,OAAO,YAAY,aAAa,MAAM,MAAM,CAAC;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,KAAK,QAAQ,MAAM,QAAQ,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf;AAAA,IACA,WAAW,YAAY,MAAM,YAAY;AAAA,IACzC,WAAW,MAAM,cAAc,SAAS,CAAC,MAAM,YAAY,CAAC,UAAU,CAAC;AAAA,IACvE,YAAY,YAAY,CAAC,MAAM,YAAY,CAAC,UAAU;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,aAAa,QAAQ,OAAO,GAAG,IAAI;AAAA,IAC5C,UAAU,CAAC,cAAe,UAAU,QAAQ,WAAW,OAAO,MAAM,SAAS,IAAI,QAAQ;AAAA,IACzF,MAAM,CAAC,QAAQ;AACb,eAAS,GAAG;AACZ,aAAO,UAAU,KAAK,IAAI;AAAA,IAC5B;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,YAAY,SAAqE;AAC/F,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,WAAW,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAC9D,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,WAAW,GAAG,sBAAsB,EAAE;AAC5C,eAAS,WAAW,IAAI,KAAK,KAAK,QAAQ,IAAI,IAAI;AAAA,IACpD,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,CAAC,KAAK,KAAK;AACpB;","names":[]}