@eifi1/ui-kit 0.51.6 → 0.51.7

package/dist/components/multi-entity-combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useCallback, useId, useMemo, type ComponentPropsWithoutRef, type ReactNode, type Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport { ComboboxPanel, endHintRowProps, offersCreate, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport {\n  assignRef,\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  mergeDescribedBy,\n  StaticLabelRow,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface MultiEntityComboboxProps<V extends string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">, FieldHelpProps {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe; a rejection shows\n   *  `loadErrorLabel`. When set, `options` resolves labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels as a locale-formatted\n   *  list, or `combobox.selectedCount` when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  /** Offer a clear \"×\" while anything is chosen; it emits `[]`. A pointer shortcut out\n   *  of the tab order — the keyboard's way is Delete or Backspace on the CLOSED trigger,\n   *  or unticking rows in the open list. Not offered while `disabled` or locked. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`:\n   *  focusable and `aria-disabled`, no list, no clear, no `onChange`, the reason in the\n   *  kit {@link Tooltip}. Wins over `disabled`. */\n  disabledReason?: ReactNode;\n  /** This picker COMMITS — toggling saves. Locked the `disabledReason` way under a\n   *  locked {@link WriteLockProvider}. See {@link EntityCombobox}'s `commit`. */\n  commit?: CommitScope;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Offer the create row with nothing typed too, worded as this. See\n   *  {@link EntityCombobox}'s `createEmptyLabel`. */\n  createEmptyLabel?: string;\n  /** The create row is a write while toggling is not: locked on its own under a locked\n   *  {@link WriteLockProvider}. See {@link EntityCombobox}'s `createCommit`. */\n  createCommit?: CommitScope;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /**\n   * Standing advice — the rest of the Combobox family's `hint` since 0.22, which this\n   * one was left without (keksdose K4): plain TEXT is a caption under the field on the\n   * trigger's `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the\n   * label line, or with no label sits at the trigger's end edge, outside the box.\n   * Passed at all — even `undefined` — the field keeps one box, so a hint coming and\n   * going never rebuilds the trigger under the cursor (the 0.22 rule).\n   */\n  hint?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link EntityCombobox} and {@link CountrySelect} (0.24, kastlan: react-hook-form's\n   *  focus-on-error focuses whatever `field.ref` is handed). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>(props: MultiEntityComboboxProps<V>) {\n  const {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    loading,\n    label,\n    placeholder,\n    searchPlaceholder,\n    emptyLabel,\n    itemLabel,\n    clearable,\n    clearLabel,\n    closeLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    className,\n    invalid,\n    error,\n    hint,\n    help,\n    filter,\n    minChars,\n    debounceMs,\n    loadErrorLabel,\n    ref,\n    \"aria-label\": ariaLabel,\n    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than\n    // the wrapper: `Field`'s render-prop spreads `{ id, aria-describedby, aria-invalid,\n    // aria-required }`, and on the role-less wrapper div the label's `htmlFor` named\n    // nothing and the hint and required state described nothing — kastlan's\n    // communication-page To/Cc/Bcc and lease-tenants-step.tsx read as unnamed pickers.\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen, query, triggerRef } = core;\n  // The core's trigger ref and the caller's, fed by one callback — see EntityCombobox.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // The lock — see EntityCombobox: the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  if (lock.locked && open) setOpen(false);\n  const createReason = useCommitReason(createCommit, undefined);\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  // A list of NAMES, not a sentence, so the narrow conjunction: English gets\n  // \"Food, Rent, Travel\" (no \"and\" squeezed into a truncating trigger), German and\n  // French still get their \"und\"/\"et\" where the language insists on it, and Japanese\n  // and Chinese get the ideographic comma \"、\". The `unit` type looked like the\n  // natural fit for a summary, but in ja/zh it concatenates the names with nothing\n  // between them at all.\n  const locale = useKitLocale();\n  const listFormat = useMemo(() => new Intl.ListFormat(locale, { type: \"conjunction\", style: \"narrow\" }), [locale]);\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean) ? listFormat.format(chosen.map((o) => o!.label)) : labels.selectedCount(value.length);\n  })();\n\n  // While locked the trigger sits in the reason's Tooltip, as on EntityCombobox.\n  const withLock = (trigger: ReactNode) =>\n    lock.locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {trigger}\n      </LockedReason>\n    ) : (\n      trigger\n    );\n\n  const q = query.trim();\n  const showCreate = offersCreate(\n    onCreate,\n    q,\n    results.map((o) => o.label),\n    createEmptyLabel,\n  );\n  const showClear = Boolean(clearable && value.length > 0 && !inert);\n\n  const toggle = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    core.rememberOption(o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the\n    // id, description, invalid and required state above — go on the trigger, which\n    // has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && <FieldLabel>{label}</FieldLabel>}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          <button\n            ref={setTrigger}\n            id={id}\n            type=\"button\"\n            // A combobox, not a button. The distinction is not pedantry: this control\n            // carried `aria-invalid`, which `button` does not support, so a required\n            // field left empty painted a rose border and told a reader nothing at all —\n            // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n            // fix the audit asked for is the role that describes what this IS: a closed\n            // choice that expands into the list named below. `combobox` supports\n            // `aria-invalid`, so the border and the announcement finally agree.\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            // The label is a floating <span>, not a <label for>, so without this the\n            // trigger's accessible name is whatever value happens to be selected —\n            // \"Checking\" with nothing saying it is the account. The label AND the\n            // value, because `aria-label` replaces the content rather than adding to\n            // it, and a control that announces only its name has lost the answer.\n            // A caller's own name wins over the composition: two fields labelled\n            // \"Account\" on a transfer form are the from and the to, and only the\n            // caller knows which is which.\n            aria-label={ariaLabel ?? (typeof label === \"string\" ? common.fieldValue(label, summary) : undefined)}\n            // Focusable while locked — see EntityCombobox.\n            disabled={lock.locked ? undefined : disabled}\n            aria-disabled={lock.locked || undefined}\n            aria-invalid={field.isInvalid || undefined}\n            aria-describedby={mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId)}\n            aria-required={ariaRequired}\n            onClick={() => !inert && setOpen((o) => !o)}\n            // Down/Up opens the list from the closed trigger, per the APG. Enter and\n            // Space already do it through the button's own click.\n            onKeyDown={(e) => {\n              if (inert) return;\n              if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                setOpen(true);\n              } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n                // The keyboard's clear: the \"×\" is a pointer shortcut out of the tab\n                // order, so without this a cleared-by-mouse field was set-only from the\n                // keyboard. The closed trigger only — CountrySelect's rule (0.23).\n                e.preventDefault();\n                onChange([]);\n              }\n            }}\n            className={cn(\n              FIELD_TRIGGER,\n              \"pe-9\",\n              label !== undefined && FIELD_FLOATING_PAD,\n              inert && \"cursor-not-allowed opacity-50\",\n              field.isInvalid && FIELD_INVALID,\n            )}\n          >\n            <span\n              className={cn(\n                // Wraps from Large up, as MultiSelect's summary does (text size §10.17,\n                // round 0.34 T1).\n                \"min-w-0 truncate-until-large\",\n                // Inherit FIELD_BASE's ink for a value, keep the placeholder tone\n                // (`--text-placeholder`) — the same rule every field on a form row\n                // follows (Keksdose dev#477).\n                !value.length && \"text-placeholder\",\n              )}\n            >\n              {summary}\n            </span>\n            {showClear ? (\n              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n                  the trigger <button>, so it never holds focus and a key handler here could\n                  never fire. A pointer shortcut; the keyboard paths are Delete on the closed\n                  trigger and unticking the options in the open list. */\n              <span\n                role=\"button\"\n                tabIndex={-1}\n                aria-label={labels.clear}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange([]);\n                }}\n                className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </span>\n            ) : (\n              <FieldChevron />\n            )}\n          </button>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on EntityCombobox. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={LABEL_IN_ROW}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          if (lock.locked) return;\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={q ? labels.create(q) : createEmptyLabel}\n        createDisabledReason={createReason}\n      />\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/multi-entity-combobox.tsx"],"sourcesContent":["import { useCallback, useId, useMemo, type ComponentPropsWithoutRef, type ReactNode, type Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./field-base\";\nimport { FieldLabel } from \"./field-parts\";\nimport { ComboboxPanel, endHintRowProps, offersCreate, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport {\n  assignRef,\n  EndHintRow,\n  FieldCaption,\n  LABEL_IN_ROW,\n  LockedReason,\n  mergeDescribedBy,\n  StaticLabelRow,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n} from \"./field-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface MultiEntityComboboxProps<V extends string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\">, FieldHelpProps {\n  /** Selected ids. */\n  value: V[];\n  onChange: (value: V[]) => void;\n  /** Already-loaded options (client-side filtered); also resolves selected labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced + race-safe; a rejection shows\n   *  `loadErrorLabel`. When set, `options` resolves labels only. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  /** Trigger summary when 1+ selected (default: the labels as a locale-formatted\n   *  list, or `combobox.selectedCount` when a label can't be resolved). */\n  itemLabel?: (count: number) => string;\n  /** Offer a clear \"×\" while anything is chosen; it emits `[]`. A pointer shortcut out\n   *  of the tab order — the keyboard's way is Delete or Backspace on the CLOSED trigger,\n   *  or unticking rows in the open list. Not offered while `disabled` or locked. */\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** Why the selection cannot be changed — {@link EntityCombobox}'s `disabledReason`:\n   *  focusable and `aria-disabled`, no list, no clear, no `onChange`, the reason in the\n   *  kit {@link Tooltip}. Wins over `disabled`. */\n  disabledReason?: ReactNode;\n  /** This picker COMMITS — toggling saves. Locked the `disabledReason` way under a\n   *  locked {@link WriteLockProvider}. See {@link EntityCombobox}'s `commit`. */\n  commit?: CommitScope;\n  /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the\n   *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match.\n   *  The panel stays open (adding the new entity to `value` is the caller's job). */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Offer the create row with nothing typed too, worded as this. See\n   *  {@link EntityCombobox}'s `createEmptyLabel`. */\n  createEmptyLabel?: string;\n  /** The create row is a write while toggling is not: locked on its own under a locked\n   *  {@link WriteLockProvider}. See {@link EntityCombobox}'s `createCommit`. */\n  createCommit?: CommitScope;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** What is wrong with the value, as {@link Input}'s `error`: rendered under the\n   *  field, on the trigger's `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /**\n   * Standing advice — the rest of the Combobox family's `hint` since 0.22, which this\n   * one was left without (keksdose K4): plain TEXT is a caption under the field on the\n   * trigger's `aria-describedby`, before any error; a {@link FieldHint} \"?\" rides the\n   * label line, or with no label sits at the trigger's end edge, outside the box.\n   * Passed at all — even `undefined` — the field keeps one box, so a hint coming and\n   * going never rebuilds the trigger under the cursor (the 0.22 rule).\n   */\n  hint?: ReactNode;\n  /** Narrow `options` client-side by the query. Default `true`; `false` shows them\n   *  as given (a server-ranked list). */\n  filter?: boolean;\n  /** Offer nothing, and call no `loadOptions`, below this many characters. Default\n   *  `0`, i.e. the list loads as the panel opens. */\n  minChars?: number;\n  /** `loadOptions` debounce. Default 150 ms. */\n  debounceMs?: number;\n  /** Shown when `loadOptions` rejects. Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on\n   *  {@link EntityCombobox} and {@link CountrySelect} (0.24, kastlan: react-hook-form's\n   *  focus-on-error focuses whatever `field.ref` is handed). Not the wrapper. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Multi-value sibling of {@link EntityCombobox}: pick several entities by search,\n * with the same async `loadOptions`/`onCreate` support. Rows show a checkbox and\n * toggle without closing the panel; the trigger summarises the selection.\n */\nexport function MultiEntityCombobox<V extends string | number>(props: MultiEntityComboboxProps<V>) {\n  const {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    loading,\n    label,\n    placeholder,\n    searchPlaceholder,\n    emptyLabel,\n    itemLabel,\n    clearable,\n    clearLabel,\n    closeLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onCreate,\n    createLabel,\n    createEmptyLabel,\n    createCommit,\n    className,\n    invalid,\n    error,\n    hint,\n    help,\n    filter,\n    minChars,\n    debounceMs,\n    loadErrorLabel,\n    ref,\n    \"aria-label\": ariaLabel,\n    // The control's own wiring, taken off `rest` so it lands on the TRIGGER rather than\n    // the wrapper: `Field`'s render-prop spreads `{ id, aria-describedby, aria-invalid,\n    // aria-required }`, and on the role-less wrapper div the label's `htmlFor` named\n    // nothing and the hint and required state described nothing — kastlan's\n    // communication-page To/Cc/Bcc and lease-tenants-step.tsx read as unnamed pickers.\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const core = useComboboxCore<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n  });\n  const hintParts = useFieldHint(hint, ariaDescribedBy, { help, name: label ?? ariaLabel });\n  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen, query, triggerRef } = core;\n  // The core's trigger ref and the caller's, fed by one callback — see EntityCombobox.\n  const setTrigger = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref, triggerRef],\n  );\n  // The lock — see EntityCombobox: the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const inert = lock.locked || Boolean(disabled);\n  if (lock.locked && open) setOpen(false);\n  const createReason = useCommitReason(createCommit, undefined);\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  const valueSet = useMemo(() => new Set(value), [value]);\n  // A list of NAMES, not a sentence, so the narrow conjunction: English gets\n  // \"Food, Rent, Travel\" (no \"and\" squeezed into a truncating trigger), German and\n  // French still get their \"und\"/\"et\" where the language insists on it, and Japanese\n  // and Chinese get the ideographic comma \"、\". The `unit` type looked like the\n  // natural fit for a summary, but in ja/zh it concatenates the names with nothing\n  // between them at all.\n  const locale = useKitLocale();\n  const listFormat = useMemo(() => new Intl.ListFormat(locale, { type: \"conjunction\", style: \"narrow\" }), [locale]);\n  const summary = (() => {\n    if (value.length === 0) return placeholder ?? \"\";\n    if (itemLabel) return itemLabel(value.length);\n    const chosen = value.map(resolve);\n    return chosen.every(Boolean) ? listFormat.format(chosen.map((o) => o!.label)) : labels.selectedCount(value.length);\n  })();\n\n  // While locked the trigger sits in the reason's Tooltip, as on EntityCombobox.\n  const withLock = (trigger: ReactNode) =>\n    lock.locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className=\"block\">\n        {trigger}\n      </LockedReason>\n    ) : (\n      trigger\n    );\n\n  const q = query.trim();\n  const showCreate = offersCreate(\n    onCreate,\n    q,\n    results.map((o) => o.label),\n    createEmptyLabel,\n    locale,\n  );\n  const showClear = Boolean(clearable && value.length > 0 && !inert);\n\n  const toggle = (o: ComboOption<V>) => {\n    if (lock.locked) return;\n    core.rememberOption(o);\n    if (valueSet.has(o.value)) onChange(value.filter((v) => v !== o.value));\n    else onChange([...value, o.value]);\n    // Stay open — multi-select keeps adding.\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME — and the\n    // id, description, invalid and required state above — go on the trigger, which\n    // has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && hintParts.labelHint === undefined && <FieldLabel>{label}</FieldLabel>}\n      <EndHintRow {...endHintRowProps(\"hint\" in props, label !== undefined, hintParts.labelHint)}>\n        {withLock(\n          <button\n            ref={setTrigger}\n            id={id}\n            type=\"button\"\n            // A combobox, not a button. The distinction is not pedantry: this control\n            // carried `aria-invalid`, which `button` does not support, so a required\n            // field left empty painted a rose border and told a reader nothing at all —\n            // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n            // fix the audit asked for is the role that describes what this IS: a closed\n            // choice that expands into the list named below. `combobox` supports\n            // `aria-invalid`, so the border and the announcement finally agree.\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            // The label is a floating <span>, not a <label for>, so without this the\n            // trigger's accessible name is whatever value happens to be selected —\n            // \"Checking\" with nothing saying it is the account. The label AND the\n            // value, because `aria-label` replaces the content rather than adding to\n            // it, and a control that announces only its name has lost the answer.\n            // A caller's own name wins over the composition: two fields labelled\n            // \"Account\" on a transfer form are the from and the to, and only the\n            // caller knows which is which.\n            aria-label={ariaLabel ?? (typeof label === \"string\" ? common.fieldValue(label, summary) : undefined)}\n            // Focusable while locked — see EntityCombobox.\n            disabled={lock.locked ? undefined : disabled}\n            aria-disabled={lock.locked || undefined}\n            aria-invalid={field.isInvalid || undefined}\n            aria-describedby={mergeDescribedBy(field.describedBy, lock.locked && lock.reasonId)}\n            aria-required={ariaRequired}\n            onClick={() => !inert && setOpen((o) => !o)}\n            // Down/Up opens the list from the closed trigger, per the APG. Enter and\n            // Space already do it through the button's own click.\n            onKeyDown={(e) => {\n              if (inert) return;\n              if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                setOpen(true);\n              } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n                // The keyboard's clear: the \"×\" is a pointer shortcut out of the tab\n                // order, so without this a cleared-by-mouse field was set-only from the\n                // keyboard. The closed trigger only — CountrySelect's rule (0.23).\n                e.preventDefault();\n                onChange([]);\n              }\n            }}\n            className={cn(\n              FIELD_TRIGGER,\n              \"pe-9\",\n              label !== undefined && FIELD_FLOATING_PAD,\n              inert && \"cursor-not-allowed opacity-50\",\n              field.isInvalid && FIELD_INVALID,\n            )}\n          >\n            <span\n              className={cn(\n                // Wraps from Large up, as MultiSelect's summary does (text size §10.17,\n                // round 0.34 T1).\n                \"min-w-0 truncate-until-large\",\n                // Inherit FIELD_BASE's ink for a value, keep the placeholder tone\n                // (`--text-placeholder`) — the same rule every field on a form row\n                // follows (Keksdose dev#477).\n                !value.length && \"text-placeholder\",\n              )}\n            >\n              {summary}\n            </span>\n            {showClear ? (\n              /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n                  the trigger <button>, so it never holds focus and a key handler here could\n                  never fire. A pointer shortcut; the keyboard paths are Delete on the closed\n                  trigger and unticking the options in the open list. */\n              <span\n                role=\"button\"\n                tabIndex={-1}\n                aria-label={labels.clear}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange([]);\n                }}\n                className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </span>\n            ) : (\n              <FieldChevron />\n            )}\n          </button>,\n        )}\n      </EndHintRow>\n      {/* With a \"?\" the label shares the top strip with it — after the trigger, so the\n          \"?\" follows the control in the tab order, as on EntityCombobox. */}\n      {label !== undefined && hintParts.labelHint !== undefined && (\n        <StaticLabelRow hint={hintParts.labelHint}>\n          <FieldLabel className={LABEL_IN_ROW}>{label}</FieldLabel>\n        </StaticLabelRow>\n      )}\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        multi\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        loadErrorLabel={loadErrorLabel}\n        isSelected={(v) => valueSet.has(v)}\n        onChoose={toggle}\n        showCreate={showCreate}\n        onCreate={() => {\n          if (lock.locked) return;\n          onCreate?.(q);\n          core.setQuery(\"\");\n        }}\n        createContent={q ? labels.create(q) : createEmptyLabel}\n        createDisabledReason={createReason}\n      />\n      <FieldCaption parts={hintParts} />\n      {field.errorEl}\n    </div>\n  );\n}\n"],"mappings":";AAmNM,cAkCI,YAlCJ;AAnNN,SAAS,aAAa,OAAO,eAAwE;AACrG,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,cAAc,eAAe,oBAAoB,qBAAqB;AAC/E,SAAS,kBAAkB;AAC3B,SAAS,eAAe,iBAAiB,cAAc,uBAAyC;AAChG,SAAS,yBAAyB,uBAAuB,cAAc,oBAAoB;AAC3F;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,uBAAyC;AAwF3C,SAAS,oBAA+C,OAAoC;AACjG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMd;AAAA,IACA,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,OAAO,gBAAmB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,YAAY,aAAa,MAAM,iBAAiB,EAAE,MAAM,MAAM,SAAS,UAAU,CAAC;AACxF,QAAM,QAAQ,cAAc,OAAO,SAAS,UAAU,aAAa,WAAW;AAG9E,QAAM,SAAS,aAAa,YAAY,yBAAyB;AAAA,IAC/D,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,EAAE,MAAM,SAAS,SAAS,SAAS,OAAO,WAAW,IAAI;AAE/D,QAAM,aAAa;AAAA,IACjB,CAAC,OAAiC;AAChC,iBAAW,UAAU;AACrB,gBAAU,KAAK,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,KAAK,UAAU;AAAA,EAClB;AAEA,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,QAAQ,KAAK,UAAU,QAAQ,QAAQ;AAC7C,MAAI,KAAK,UAAU,KAAM,SAAQ,KAAK;AACtC,QAAM,eAAe,gBAAgB,cAAc,MAAS;AAI5D,QAAM,YAAY,MAAM;AAExB,QAAM,WAAW,QAAQ,MAAM,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;AAOtD,QAAM,SAAS,aAAa;AAC5B,QAAM,aAAa,QAAQ,MAAM,IAAI,KAAK,WAAW,QAAQ,EAAE,MAAM,eAAe,OAAO,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC;AAChH,QAAM,WAAW,MAAM;AACrB,QAAI,MAAM,WAAW,EAAG,QAAO,eAAe;AAC9C,QAAI,UAAW,QAAO,UAAU,MAAM,MAAM;AAC5C,UAAM,SAAS,MAAM,IAAI,OAAO;AAChC,WAAO,OAAO,MAAM,OAAO,IAAI,WAAW,OAAO,OAAO,IAAI,CAAC,MAAM,EAAG,KAAK,CAAC,IAAI,OAAO,cAAc,MAAM,MAAM;AAAA,EACnH,GAAG;AAGH,QAAM,WAAW,CAAC,YAChB,KAAK,SACH,oBAAC,gBAAa,MAAY,SAAS,uBAAuB,WAAU,SACjE,mBACH,IAEA;AAGJ,QAAM,IAAI,MAAM,KAAK;AACrB,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK;AAAA,IAC1B;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY,QAAQ,aAAa,MAAM,SAAS,KAAK,CAAC,KAAK;AAEjE,QAAM,SAAS,CAAC,MAAsB;AACpC,QAAI,KAAK,OAAQ;AACjB,SAAK,eAAe,CAAC;AACrB,QAAI,SAAS,IAAI,EAAE,KAAK,EAAG,UAAS,MAAM,OAAO,CAAC,MAAM,MAAM,EAAE,KAAK,CAAC;AAAA,QACjE,UAAS,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC;AAAA,EAEnC;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,YAAY,SAAS,GAC/C;AAAA,gBAAU,UAAa,UAAU,cAAc,UAAa,oBAAC,cAAY,iBAAM;AAAA,MAChF,oBAAC,cAAY,GAAG,gBAAgB,UAAU,OAAO,UAAU,QAAW,UAAU,SAAS,GACtF;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAK;AAAA,YAQL,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,iBAAc;AAAA,YASd,cAAY,cAAc,OAAO,UAAU,WAAW,OAAO,WAAW,OAAO,OAAO,IAAI;AAAA,YAE1F,UAAU,KAAK,SAAS,SAAY;AAAA,YACpC,iBAAe,KAAK,UAAU;AAAA,YAC9B,gBAAc,MAAM,aAAa;AAAA,YACjC,oBAAkB,iBAAiB,MAAM,aAAa,KAAK,UAAU,KAAK,QAAQ;AAAA,YAClF,iBAAe;AAAA,YACf,SAAS,MAAM,CAAC,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,YAG1C,WAAW,CAAC,MAAM;AAChB,kBAAI,MAAO;AACX,kBAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,kBAAE,eAAe;AACjB,wBAAQ,IAAI;AAAA,cACd,WAAW,aAAa,CAAC,SAAS,EAAE,QAAQ,YAAY,EAAE,QAAQ,cAAc;AAI9E,kBAAE,eAAe;AACjB,yBAAS,CAAC,CAAC;AAAA,cACb;AAAA,YACF;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA,UAAU,UAAa;AAAA,cACvB,SAAS;AAAA,cACT,MAAM,aAAa;AAAA,YACrB;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA;AAAA;AAAA,oBAGT;AAAA;AAAA;AAAA;AAAA,oBAIA,CAAC,MAAM,UAAU;AAAA,kBACnB;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA,cACC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,UAAU;AAAA,oBACV,cAAY,OAAO;AAAA,oBACnB,SAAS,CAAC,MAAM;AACd,wBAAE,gBAAgB;AAClB,+BAAS,CAAC,CAAC;AAAA,oBACb;AAAA,oBACA,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,gBACxB;AAAA,kBAEA,oBAAC,gBAAa;AAAA;AAAA;AAAA,QAElB;AAAA,MACF,GACF;AAAA,MAGC,UAAU,UAAa,UAAU,cAAc,UAC9C,oBAAC,kBAAe,MAAM,UAAU,WAC9B,8BAAC,cAAW,WAAW,cAAe,iBAAM,GAC9C;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,OAAK;AAAA,UAGL,YAAY,SAAS;AAAA,UACrB,mBAAmB,OAAO;AAAA,UAC1B,YAAY,OAAO;AAAA,UACnB;AAAA,UACA;AAAA,UACA,YAAY,CAAC,MAAM,SAAS,IAAI,CAAC;AAAA,UACjC,UAAU;AAAA,UACV;AAAA,UACA,UAAU,MAAM;AACd,gBAAI,KAAK,OAAQ;AACjB,uBAAW,CAAC;AACZ,iBAAK,SAAS,EAAE;AAAA,UAClB;AAAA,UACA,eAAe,IAAI,OAAO,OAAO,CAAC,IAAI;AAAA,UACtC,sBAAsB;AAAA;AAAA,MACxB;AAAA,MACA,oBAAC,gBAAa,OAAO,WAAW;AAAA,MAC/B,MAAM;AAAA,OACT;AAAA;AAEJ;","names":[]}

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

@@ -2,12 +2,14 @@ import type { ComponentProps, ReactNode } from "react";
 import { NumberInput } from "./number-input.js";
 type NumberInputProps = ComponentProps<typeof NumberInput>;
 export interface NumberFieldProps extends Omit<NumberInputProps, "value" | "onChange" | "onCommit" | "suffix" | "invalid" | "error" | "locale"> {
-    /** The committed number. `null` is "no value" — shown as an empty field. */
+    /** The committed number. `null` is "no value" — shown as an empty field. So is a
+     *  number that is not finite (NaN, ±Infinity). */
     value: number | null;
     /**
-     * The parsed number, on blur or Enter — never per keystroke — and only when it
-     * differs from the last one committed. Already rounded to `digits` and clamped
-     * into `[min, max]`. `null` only when `nullable` and the field was emptied.
+     * The parsed number, on blur or Enter and once per calculator session (see
+     * {@link NumberInput}'s `onCommit`) — never per keystroke — and only when it differs
+     * from the last one committed. Already rounded to `digits` and clamped into
+     * `[min, max]`. `null` only when `nullable` and the field was emptied.
      */
     onCommit: (value: number | null) => void;
     /**

package/dist/components/number-field.js

@@ -22,7 +22,7 @@ function roundTo(n, digits) {
 }
 function NumberField(props) {
   const {
-    value,
+    value: stored,
     onCommit,
     onValueChange,
     digits,
@@ -41,6 +41,7 @@ function NumberField(props) {
     "aria-required": ariaRequired,
     ...rest
   } = props;
+  const value = stored === null || Number.isFinite(stored) ? stored : null;
   const locale = useKitLocale(localeProp);
   const mark = decimalMark(locale);
   const localize = (text) => mark === "," ? text.replace(/\./g, ",") : text;
@@ -49,7 +50,7 @@ function NumberField(props) {
   const [seen, setSeen] = useState({ value, mark, digits });
   const [committed, setCommitted] = useState(value);
   const [reported, setReported] = useState(value);
-  if (seen.value !== value || seen.mark !== mark || seen.digits !== digits) {
+  if (!Object.is(seen.value, value) || seen.mark !== mark || !Object.is(seen.digits, digits)) {
     setSeen({ value, mark, digits });
     const echo = onValueChange !== void 0 && value === reported && seen.mark === mark && seen.digits === digits;
     if (!echo) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/number-field.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { NumberInput } from \"./number-input\";\nimport { evaluateExpression, formatResult } from \"../lib/calc\";\nimport { decimalMark } from \"../lib/decimal-marks\";\nimport { roundHalfAway } from \"../lib/round\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\ntype NumberInputProps = ComponentProps<typeof NumberInput>;\n\nexport interface NumberFieldProps extends Omit<\n  NumberInputProps,\n  \"value\" | \"onChange\" | \"onCommit\" | \"suffix\" | \"invalid\" | \"error\" | \"locale\"\n> {\n  /** The committed number. `null` is \"no value\" — shown as an empty field. */\n  value: number | null;\n  /**\n   * The parsed number, on blur or Enter — never per keystroke — and only when it\n   * differs from the last one committed. Already rounded to `digits` and clamped\n   * into `[min, max]`. `null` only when `nullable` and the field was emptied.\n   */\n  onCommit: (value: number | null) => void;\n  /**\n   * LIVE MODE: the number the text reads as, on every keystroke (and every step\n   * key) — for a calculator that recomputes as the user types, while `onCommit`\n   * stays the one to save on.\n   *\n   * What it is NOT, until the commit: rounded to `digits` or clamped into\n   * `[min, max]` — a half-typed \"1\" on the way to \"150\" must not read as the\n   * minimum of 100. A calculation reads as its result (\"12+5\" → 17); an empty field\n   * as `null` (whether or not `nullable`); a draft that is no number yet (\"-\", \"12+\")\n   * fires nothing, so the last number stands. On blur/Enter it fires once more with\n   * the committed value if that differs from the last one it reported — the rounded,\n   * clamped or snapped-back number — so a live consumer always ends where `onCommit`\n   * does.\n   *\n   * Feeding it back into `value` is safe: a `value` equal to the number this field\n   * last reported does not re-render the text, so \"1,\" stays \"1,\" while the rest of\n   * the form already shows 1. Not called when `value` changes from outside.\n   */\n  onValueChange?: (value: number | null) => void;\n  /** Round to this many decimals on commit, and show at most this many (trailing\n   *  zeros are trimmed: `digits={2}` shows 12.5, not 12.50). Omit for no rounding. */\n  digits?: number;\n  /** Clamp the committed number into `[min, max]`. Applied after rounding. */\n  min?: number;\n  max?: number;\n  /** An emptied field commits `null`. Without it an empty field is not an answer\n   *  and snaps back to the last value, like any other unparsable text. */\n  nullable?: boolean;\n  /** The unit — \"mm\", \"%\", \"km/h\". */\n  unit?: ReactNode;\n  /** Where `unit` goes: `\"suffix\"` (default) is NumberInput's read-out at the\n   *  field's end edge; `\"label\"` appends it to the label as \"Label (unit)\", for rows\n   *  of narrow fields where a suffix would eat the digits. */\n  unitPlacement?: \"suffix\" | \"label\";\n  /** BCP 47 tag for the decimal mark, else the `<UiKitProvider locale>`, else the\n   *  runtime's. */\n  locale?: string;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`: shown under the field, attached via\n   *  `aria-describedby`, implies `invalid`. */\n  error?: ReactNode;\n  /** Merged with the error's id. Accepted so a form library's control slot (which\n   *  injects `id` / `aria-describedby` / `aria-invalid`) can wrap this directly. */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  /**\n   * Set on the `<input>`. Declared, with `id` (from NumberInput) and the two above, so\n   * `Field`'s render-prop spread — `{(ids) => <NumberField {...ids} … />}`, kastlan's\n   * wizard steps — is typed and reaches the input rather than being dropped: before\n   * this, `aria-required` was not in the type and a required number was announced as\n   * optional.\n   */\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n}\n\n/** What the draft reads as while it is being typed — see `onValueChange`. `undefined`\n *  is \"not a number yet\", distinct from `null` (empty). */\nfunction parseLive(text: string): number | null | undefined {\n  const t = text.trim().replace(/,/g, \".\");\n  if (t === \"\") return null;\n  if (/^-?\\d*\\.?\\d*$/.test(t)) {\n    // \"-\", \".\" and \"-.\" pass the pattern and are no number yet.\n    if (!/\\d/.test(t)) return undefined;\n    const n = Number(t);\n    return Number.isFinite(n) ? n : undefined;\n  }\n  return evaluateExpression(t) ?? undefined;\n}\n\n/** `n` at `digits` decimals, half away from zero as WRITTEN — lib/round's\n *  `roundHalfAway`, shared with `roundToCurrency` and AmountInput (BUG-11 follow-up,\n *  refactor audit 2026-10). The `toFixed` this was turned 1.005 into 1.00 (1.005 is\n *  1.00499… in binary) and −0.004 into −0; neither `Math.round(n * 10^d)` nor `toFixed`\n *  rounds the figure a person typed. `digits` is cut to a whole 0–100. */\nfunction roundTo(n: number, digits: number | undefined): number {\n  if (digits === undefined) return n;\n  return roundHalfAway(n, Math.min(Math.max(Math.trunc(digits), 0), 100));\n}\n\n/**\n * A number field whose value IS a number: {@link NumberInput}'s text, calculator and\n * numpad, with the parse/commit/revert loop every consumer was writing on top of it.\n *\n * WHY THE DRAFT. Half-typed values — \"-\", \"1,\", \"12+\" — are not numbers, and\n * reformatting them mid-keystroke moves the caret and fights the typist; committing\n * per keystroke would also fire whatever a commit fires (a recalculation, a save) for\n * every meaningless intermediate. So the field keeps a draft STRING while it is being\n * typed and resolves it on blur/Enter:\n *\n *  - a number (or a calculation, \"2700+50\") → rounded to `digits`, clamped into\n *    `[min, max]`, committed, and the draft re-rendered from the result;\n *  - empty → `null` when `nullable`, otherwise the same as the next case — `Number(\"\")`\n *    is 0, and clearing a wheelbase and tabbing away must not set it to zero;\n *  - anything else unparsable → the draft SNAPS BACK to the last committed value\n *    rather than sending NaN on for a server to reject.\n *\n * The draft follows `value` when it changes from outside (a reset, a loaded record);\n * a change that came from here arrives back identical and is a no-op.\n *\n * LIVE MODE. A calculator that recomputes per keystroke used to have to pick: this\n * field (limits, rounding, but a number only on blur) or a bare NumberInput (every\n * keystroke, but a string and no limits). `onValueChange` is the per-keystroke\n * channel here, next to the commit rather than instead of it: live numbers for the\n * read-out, `onCommit` for the save. It lives on this field rather than as\n * `min`/`max`/`digits` on NumberInput because parsing, the locale's mark and the\n * limits are what this field already is — a second copy on the string field would be\n * a second, subtly different NumberField.\n *\n * STEPS. `step` (with `min`/`max` as bounds) turns on ArrowUp/ArrowDown and PageUp/\n * PageDown (×10) — see NumberInput's `step`. A step is a draft change like a\n * keystroke: `onValueChange` hears it at once, `onCommit` on blur/Enter. Pick a\n * `step` that `digits` can show (0.25 needs `digits={2}`), or the commit rounds it.\n *\n * LOCALE. The decimal mark is the locale's: a German user sees and types \"1,5\".\n * NumberInput normalises every keystroke to a dot (so its evaluator reads one\n * alphabet); this field maps the dot back before the draft is shown. The field never\n * WRITES digit grouping — \"1.000\" would read as a thousand in German and as one in\n * English, and a field that parses its own display back must not have that ambiguity —\n * but since 0.22 it READS it, through NumberInput (keksdose K5): \"1.234,56\" typed by a\n * German user commits 1234.56 rather than 1.23456, and \"1,234.56\" by an English one\n * likewise. While a figure is typed the typist's own text stays on screen (\"1.234,5\",\n * or a dot typed as the decimal in a comma locale); it is re-spelt in the locale's mark\n * when it commits.\n *\n * LOCKED (0.33.1, Kurvenschmiede). A field that saves itself takes `commit` (or a\n * `disabledReason` of its own), NumberInput's: under a locked `WriteLockProvider` it\n * stays in the tab order showing its value, `readOnly`, with the lock's reason in the\n * kit Tooltip and its description; the step keys, the calculator and the numpad are\n * off, and nothing reaches `onValueChange` or `onCommit`. `disabled` takes it out of\n * the tab order, which is what a lock must not do.\n *\n * NOT FOR MONEY. `digits={2}` rounds, but a currency is more than two decimals: JPY has\n * none, a unit price has four, and the chip, the minor-unit default and `min`/`max` on\n * the SIGNED figure are {@link MoneyField}'s (number value) and {@link AmountInput}'s\n * (string value). A NumberField whose `unit` is a currency says so on the console in\n * development — see NumberInput's money guard.\n */\nexport function NumberField(props: NumberFieldProps) {\n  const {\n    value,\n    onCommit,\n    onValueChange,\n    digits,\n    min,\n    max,\n    nullable = false,\n    unit,\n    unitPlacement = \"suffix\",\n    locale: localeProp,\n    label,\n    invalid,\n    error,\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const mark = decimalMark(locale);\n  const localize = (text: string) => (mark === \",\" ? text.replace(/\\./g, \",\") : text);\n  // `formatResult` for fixed notation: `String(1e-7)` is \"1e-7\", which the field\n  // would read back as 17 (see calc.ts).\n  const format = (n: number | null) =>\n    n === null || !Number.isFinite(n) ? \"\" : localize(formatResult(roundTo(n, digits)));\n\n  const [draft, setDraft] = useState(() => format(value));\n  // Everything the displayed text depends on, not just `value`: switching the\n  // provider's language or a field's `digits` has to re-render the draft too.\n  const [seen, setSeen] = useState({ value, mark, digits });\n  // The last number handed to `onCommit`, so Enter-then-blur (both commit) and a\n  // parent that does not echo the value back cannot commit the same number twice.\n  // State rather than a ref because the external-change branch below resets it\n  // during render, and a ref may not be written there.\n  const [committed, setCommitted] = useState(value);\n  // The last number handed to `onValueChange` — state for the same reason.\n  const [reported, setReported] = useState(value);\n\n  // Adjust state during render rather than in an effect: React re-renders at once\n  // with the new draft, before anything is painted, so there is no frame showing\n  // the old text.\n  if (seen.value !== value || seen.mark !== mark || seen.digits !== digits) {\n    setSeen({ value, mark, digits });\n    // Live mode echoing back what it was just told: the draft already says it, in\n    // the typist's own spelling (\"1,\" or \"12+5\"), and reformatting would fight them.\n    // Only a changed `value` qualifies — a new mark or `digits` still re-renders.\n    const echo = onValueChange !== undefined && value === reported && seen.mark === mark && seen.digits === digits;\n    if (!echo) {\n      setDraft(format(value));\n      setCommitted(value);\n      setReported(value);\n    }\n  }\n\n  const report = (next: number | null) => {\n    if (next === reported) return;\n    setReported(next);\n    onValueChange?.(next);\n  };\n\n  const onText = (text: string) => {\n    setDraft(localize(text));\n    const live = parseLive(text);\n    if (live !== undefined) report(live);\n  };\n\n  const commit = (text: string) => {\n    const trimmed = text.trim();\n    let next: number | null;\n    const snapBack = () => {\n      setDraft(format(committed));\n      report(committed);\n    };\n    if (trimmed === \"\") {\n      if (!nullable) return snapBack();\n      next = null;\n    } else {\n      // `text` is NumberInput's committed form: an evaluated calculation, dot-decimal.\n      // What survives its digits-only fallback can still be \"-\" or \".\" alone.\n      const parsed = Number(trimmed.replace(/,/g, \".\"));\n      if (!Number.isFinite(parsed)) return snapBack();\n      next = roundTo(parsed, digits);\n      if (min !== undefined) next = Math.max(min, next);\n      if (max !== undefined) next = Math.min(max, next);\n    }\n    // Always re-render the draft from the result — \"007\" becomes \"7\", a clamped 500\n    // shows the 100 it was clamped to — even when there is nothing new to commit.\n    setDraft(format(next));\n    report(next);\n    if (next !== committed) {\n      setCommitted(next);\n      onCommit(next);\n    }\n  };\n\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n\n  // Straight onto NumberInput's <input>, which declares both now. They used to be set\n  // on the DOM node from an effect, because NumberInput had no props for them.\n  const required = ariaRequired === true || ariaRequired === \"true\";\n\n  const labelWithUnit =\n    unit !== undefined && unitPlacement === \"label\" ? (\n      label === undefined || label === \"\" ? (\n        unit\n      ) : typeof label === \"string\" && typeof unit === \"string\" ? (\n        `${label} (${unit})`\n      ) : (\n        <>\n          {label} ({unit})\n        </>\n      )\n    ) : (\n      label\n    );\n\n  return (\n    <NumberInput\n      {...rest}\n      id={fieldId}\n      aria-describedby={ariaDescribedBy}\n      aria-required={required || undefined}\n      label={labelWithUnit}\n      value={draft}\n      onChange={onText}\n      onCommit={commit}\n      min={min}\n      max={max}\n      // The mark this field spells its draft in, so the two can never disagree when\n      // this field's `locale` is not the provider's.\n      locale={locale}\n      suffix={unitPlacement === \"suffix\" ? unit : undefined}\n      invalid={invalid || ariaInvalid === true || ariaInvalid === \"true\"}\n      // NumberInput's `error` — the message, the description, the paint, and Input's\n      // steady box: no wrapper for a field that never takes `error`, and the SAME one\n      // for a field that does, message or not, so the message coming or going never\n      // remounts the <input> mid-keystroke. Only forwarded when it was passed, since\n      // passing the key is what asks for the box.\n      {...(\"error\" in props ? { error } : {})}\n    />\n  );\n}\n\n/**\n * A {@link NumberField} for whole numbers: `digits={0}` and `calculator={false}` as\n * defaults, each overridable — the preset `RhfIntegerField` (`@eifi1/ui-kit/rhf`) applies to a\n * form-bound field, for the plain one (kastlan 51: a building's construction year in a\n * wizard's local state, an entity id in the document upload spelled the two props out\n * by hand).\n *\n * `??` rather than a spread over the defaults, so a wrapper forwarding its own optional\n * `digits={props.digits}` still gets the preset.\n */\nexport function IntegerField(props: NumberFieldProps) {\n  return <NumberField {...props} digits={props.digits ?? 0} calculator={props.calculator ?? false} />;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/number-field.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { NumberInput } from \"./number-input\";\nimport { evaluateExpression, formatResult } from \"../lib/calc\";\nimport { decimalMark } from \"../lib/decimal-marks\";\nimport { roundHalfAway } from \"../lib/round\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\ntype NumberInputProps = ComponentProps<typeof NumberInput>;\n\nexport interface NumberFieldProps extends Omit<\n  NumberInputProps,\n  \"value\" | \"onChange\" | \"onCommit\" | \"suffix\" | \"invalid\" | \"error\" | \"locale\"\n> {\n  /** The committed number. `null` is \"no value\" — shown as an empty field. So is a\n   *  number that is not finite (NaN, ±Infinity). */\n  value: number | null;\n  /**\n   * The parsed number, on blur or Enter and once per calculator session (see\n   * {@link NumberInput}'s `onCommit`) — never per keystroke — and only when it differs\n   * from the last one committed. Already rounded to `digits` and clamped into\n   * `[min, max]`. `null` only when `nullable` and the field was emptied.\n   */\n  onCommit: (value: number | null) => void;\n  /**\n   * LIVE MODE: the number the text reads as, on every keystroke (and every step\n   * key) — for a calculator that recomputes as the user types, while `onCommit`\n   * stays the one to save on.\n   *\n   * What it is NOT, until the commit: rounded to `digits` or clamped into\n   * `[min, max]` — a half-typed \"1\" on the way to \"150\" must not read as the\n   * minimum of 100. A calculation reads as its result (\"12+5\" → 17); an empty field\n   * as `null` (whether or not `nullable`); a draft that is no number yet (\"-\", \"12+\")\n   * fires nothing, so the last number stands. On blur/Enter it fires once more with\n   * the committed value if that differs from the last one it reported — the rounded,\n   * clamped or snapped-back number — so a live consumer always ends where `onCommit`\n   * does.\n   *\n   * Feeding it back into `value` is safe: a `value` equal to the number this field\n   * last reported does not re-render the text, so \"1,\" stays \"1,\" while the rest of\n   * the form already shows 1. Not called when `value` changes from outside.\n   */\n  onValueChange?: (value: number | null) => void;\n  /** Round to this many decimals on commit, and show at most this many (trailing\n   *  zeros are trimmed: `digits={2}` shows 12.5, not 12.50). Omit for no rounding. */\n  digits?: number;\n  /** Clamp the committed number into `[min, max]`. Applied after rounding. */\n  min?: number;\n  max?: number;\n  /** An emptied field commits `null`. Without it an empty field is not an answer\n   *  and snaps back to the last value, like any other unparsable text. */\n  nullable?: boolean;\n  /** The unit — \"mm\", \"%\", \"km/h\". */\n  unit?: ReactNode;\n  /** Where `unit` goes: `\"suffix\"` (default) is NumberInput's read-out at the\n   *  field's end edge; `\"label\"` appends it to the label as \"Label (unit)\", for rows\n   *  of narrow fields where a suffix would eat the digits. */\n  unitPlacement?: \"suffix\" | \"label\";\n  /** BCP 47 tag for the decimal mark, else the `<UiKitProvider locale>`, else the\n   *  runtime's. */\n  locale?: string;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`: shown under the field, attached via\n   *  `aria-describedby`, implies `invalid`. */\n  error?: ReactNode;\n  /** Merged with the error's id. Accepted so a form library's control slot (which\n   *  injects `id` / `aria-describedby` / `aria-invalid`) can wrap this directly. */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  /**\n   * Set on the `<input>`. Declared, with `id` (from NumberInput) and the two above, so\n   * `Field`'s render-prop spread — `{(ids) => <NumberField {...ids} … />}`, kastlan's\n   * wizard steps — is typed and reaches the input rather than being dropped: before\n   * this, `aria-required` was not in the type and a required number was announced as\n   * optional.\n   */\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n}\n\n/** What the draft reads as while it is being typed — see `onValueChange`. `undefined`\n *  is \"not a number yet\", distinct from `null` (empty). */\nfunction parseLive(text: string): number | null | undefined {\n  const t = text.trim().replace(/,/g, \".\");\n  if (t === \"\") return null;\n  if (/^-?\\d*\\.?\\d*$/.test(t)) {\n    // \"-\", \".\" and \"-.\" pass the pattern and are no number yet.\n    if (!/\\d/.test(t)) return undefined;\n    const n = Number(t);\n    return Number.isFinite(n) ? n : undefined;\n  }\n  return evaluateExpression(t) ?? undefined;\n}\n\n/** `n` at `digits` decimals, half away from zero as WRITTEN — lib/round's\n *  `roundHalfAway`, shared with `roundToCurrency` and AmountInput (BUG-11 follow-up,\n *  refactor audit 2026-10). The `toFixed` this was turned 1.005 into 1.00 (1.005 is\n *  1.00499… in binary) and −0.004 into −0; neither `Math.round(n * 10^d)` nor `toFixed`\n *  rounds the figure a person typed. `digits` is cut to a whole 0–100. */\nfunction roundTo(n: number, digits: number | undefined): number {\n  if (digits === undefined) return n;\n  return roundHalfAway(n, Math.min(Math.max(Math.trunc(digits), 0), 100));\n}\n\n/**\n * A number field whose value IS a number: {@link NumberInput}'s text, calculator and\n * numpad, with the parse/commit/revert loop every consumer was writing on top of it.\n *\n * WHY THE DRAFT. Half-typed values — \"-\", \"1,\", \"12+\" — are not numbers, and\n * reformatting them mid-keystroke moves the caret and fights the typist; committing\n * per keystroke would also fire whatever a commit fires (a recalculation, a save) for\n * every meaningless intermediate. So the field keeps a draft STRING while it is being\n * typed and resolves it on blur/Enter:\n *\n *  - a number (or a calculation, \"2700+50\") → rounded to `digits`, clamped into\n *    `[min, max]`, committed, and the draft re-rendered from the result;\n *  - empty → `null` when `nullable`, otherwise the same as the next case — `Number(\"\")`\n *    is 0, and clearing a wheelbase and tabbing away must not set it to zero;\n *  - anything else unparsable → the draft SNAPS BACK to the last committed value\n *    rather than sending NaN on for a server to reject.\n *\n * The draft follows `value` when it changes from outside (a reset, a loaded record);\n * a change that came from here arrives back identical and is a no-op.\n *\n * LIVE MODE. A calculator that recomputes per keystroke used to have to pick: this\n * field (limits, rounding, but a number only on blur) or a bare NumberInput (every\n * keystroke, but a string and no limits). `onValueChange` is the per-keystroke\n * channel here, next to the commit rather than instead of it: live numbers for the\n * read-out, `onCommit` for the save. It lives on this field rather than as\n * `min`/`max`/`digits` on NumberInput because parsing, the locale's mark and the\n * limits are what this field already is — a second copy on the string field would be\n * a second, subtly different NumberField.\n *\n * STEPS. `step` (with `min`/`max` as bounds) turns on ArrowUp/ArrowDown and PageUp/\n * PageDown (×10) — see NumberInput's `step`. A step is a draft change like a\n * keystroke: `onValueChange` hears it at once, `onCommit` on blur/Enter. Pick a\n * `step` that `digits` can show (0.25 needs `digits={2}`), or the commit rounds it.\n *\n * LOCALE. The decimal mark is the locale's: a German user sees and types \"1,5\".\n * NumberInput normalises every keystroke to a dot (so its evaluator reads one\n * alphabet); this field maps the dot back before the draft is shown. The field never\n * WRITES digit grouping — \"1.000\" would read as a thousand in German and as one in\n * English, and a field that parses its own display back must not have that ambiguity —\n * but since 0.22 it READS it, through NumberInput (keksdose K5): \"1.234,56\" typed by a\n * German user commits 1234.56 rather than 1.23456, and \"1,234.56\" by an English one\n * likewise. While a figure is typed the typist's own text stays on screen (\"1.234,5\",\n * or a dot typed as the decimal in a comma locale); it is re-spelt in the locale's mark\n * when it commits.\n *\n * LOCKED (0.33.1, Kurvenschmiede). A field that saves itself takes `commit` (or a\n * `disabledReason` of its own), NumberInput's: under a locked `WriteLockProvider` it\n * stays in the tab order showing its value, `readOnly`, with the lock's reason in the\n * kit Tooltip and its description; the step keys, the calculator and the numpad are\n * off, and nothing reaches `onValueChange` or `onCommit`. `disabled` takes it out of\n * the tab order, which is what a lock must not do.\n *\n * NOT FOR MONEY. `digits={2}` rounds, but a currency is more than two decimals: JPY has\n * none, a unit price has four, and the chip, the minor-unit default and `min`/`max` on\n * the SIGNED figure are {@link MoneyField}'s (number value) and {@link AmountInput}'s\n * (string value). A NumberField whose `unit` is a currency says so on the console in\n * development — see NumberInput's money guard.\n */\nexport function NumberField(props: NumberFieldProps) {\n  const {\n    value: stored,\n    onCommit,\n    onValueChange,\n    digits,\n    min,\n    max,\n    nullable = false,\n    unit,\n    unitPlacement = \"suffix\",\n    locale: localeProp,\n    label,\n    invalid,\n    error,\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-required\": ariaRequired,\n    ...rest\n  } = props;\n  // A number that is not finite is no value. NaN in particular never equals itself, and\n  // the external-change check below re-read it as new on every render until React threw\n  // \"Too many re-renders\" (refactor audit 2026-10-30, INP-11).\n  const value = stored === null || Number.isFinite(stored) ? stored : null;\n  const locale = useKitLocale(localeProp);\n  const mark = decimalMark(locale);\n  const localize = (text: string) => (mark === \",\" ? text.replace(/\\./g, \",\") : text);\n  // `formatResult` for fixed notation: `String(1e-7)` is \"1e-7\", which the field\n  // would read back as 17 (see calc.ts).\n  const format = (n: number | null) =>\n    n === null || !Number.isFinite(n) ? \"\" : localize(formatResult(roundTo(n, digits)));\n\n  const [draft, setDraft] = useState(() => format(value));\n  // Everything the displayed text depends on, not just `value`: switching the\n  // provider's language or a field's `digits` has to re-render the draft too.\n  const [seen, setSeen] = useState({ value, mark, digits });\n  // The last number handed to `onCommit`, so Enter-then-blur (both commit) and a\n  // parent that does not echo the value back cannot commit the same number twice.\n  // State rather than a ref because the external-change branch below resets it\n  // during render, and a ref may not be written there.\n  const [committed, setCommitted] = useState(value);\n  // The last number handed to `onValueChange` — state for the same reason.\n  const [reported, setReported] = useState(value);\n\n  // Adjust state during render rather than in an effect: React re-renders at once\n  // with the new draft, before anything is painted, so there is no frame showing\n  // the old text. `Object.is`, not `!==`, under which NaN is new on every render: the\n  // value is read above, but a NaN `digits` looped the same way.\n  if (!Object.is(seen.value, value) || seen.mark !== mark || !Object.is(seen.digits, digits)) {\n    setSeen({ value, mark, digits });\n    // Live mode echoing back what it was just told: the draft already says it, in\n    // the typist's own spelling (\"1,\" or \"12+5\"), and reformatting would fight them.\n    // Only a changed `value` qualifies — a new mark or `digits` still re-renders.\n    const echo = onValueChange !== undefined && value === reported && seen.mark === mark && seen.digits === digits;\n    if (!echo) {\n      setDraft(format(value));\n      setCommitted(value);\n      setReported(value);\n    }\n  }\n\n  const report = (next: number | null) => {\n    if (next === reported) return;\n    setReported(next);\n    onValueChange?.(next);\n  };\n\n  const onText = (text: string) => {\n    setDraft(localize(text));\n    const live = parseLive(text);\n    if (live !== undefined) report(live);\n  };\n\n  const commit = (text: string) => {\n    const trimmed = text.trim();\n    let next: number | null;\n    const snapBack = () => {\n      setDraft(format(committed));\n      report(committed);\n    };\n    if (trimmed === \"\") {\n      if (!nullable) return snapBack();\n      next = null;\n    } else {\n      // `text` is NumberInput's committed form: an evaluated calculation, dot-decimal.\n      // What survives its digits-only fallback can still be \"-\" or \".\" alone.\n      const parsed = Number(trimmed.replace(/,/g, \".\"));\n      if (!Number.isFinite(parsed)) return snapBack();\n      next = roundTo(parsed, digits);\n      if (min !== undefined) next = Math.max(min, next);\n      if (max !== undefined) next = Math.min(max, next);\n    }\n    // Always re-render the draft from the result — \"007\" becomes \"7\", a clamped 500\n    // shows the 100 it was clamped to — even when there is nothing new to commit.\n    setDraft(format(next));\n    report(next);\n    if (next !== committed) {\n      setCommitted(next);\n      onCommit(next);\n    }\n  };\n\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n\n  // Straight onto NumberInput's <input>, which declares both now. They used to be set\n  // on the DOM node from an effect, because NumberInput had no props for them.\n  const required = ariaRequired === true || ariaRequired === \"true\";\n\n  const labelWithUnit =\n    unit !== undefined && unitPlacement === \"label\" ? (\n      label === undefined || label === \"\" ? (\n        unit\n      ) : typeof label === \"string\" && typeof unit === \"string\" ? (\n        `${label} (${unit})`\n      ) : (\n        <>\n          {label} ({unit})\n        </>\n      )\n    ) : (\n      label\n    );\n\n  return (\n    <NumberInput\n      {...rest}\n      id={fieldId}\n      aria-describedby={ariaDescribedBy}\n      aria-required={required || undefined}\n      label={labelWithUnit}\n      value={draft}\n      onChange={onText}\n      onCommit={commit}\n      min={min}\n      max={max}\n      // The mark this field spells its draft in, so the two can never disagree when\n      // this field's `locale` is not the provider's.\n      locale={locale}\n      suffix={unitPlacement === \"suffix\" ? unit : undefined}\n      invalid={invalid || ariaInvalid === true || ariaInvalid === \"true\"}\n      // NumberInput's `error` — the message, the description, the paint, and Input's\n      // steady box: no wrapper for a field that never takes `error`, and the SAME one\n      // for a field that does, message or not, so the message coming or going never\n      // remounts the <input> mid-keystroke. Only forwarded when it was passed, since\n      // passing the key is what asks for the box.\n      {...(\"error\" in props ? { error } : {})}\n    />\n  );\n}\n\n/**\n * A {@link NumberField} for whole numbers: `digits={0}` and `calculator={false}` as\n * defaults, each overridable — the preset `RhfIntegerField` (`@eifi1/ui-kit/rhf`) applies to a\n * form-bound field, for the plain one (kastlan 51: a building's construction year in a\n * wizard's local state, an entity id in the document upload spelled the two props out\n * by hand).\n *\n * `??` rather than a spread over the defaults, so a wrapper forwarding its own optional\n * `digits={props.digits}` still gets the preset.\n */\nexport function IntegerField(props: NumberFieldProps) {\n  return <NumberField {...props} digits={props.digits ?? 0} calculator={props.calculator ?? false} />;\n}\n"],"mappings":";AAuRQ,mBASJ,KATI;AAvRR,SAAS,OAAO,gBAAgB;AAEhC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB,oBAAoB;AACjD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AA4E7B,SAAS,UAAU,MAAyC;AAC1D,QAAM,IAAI,KAAK,KAAK,EAAE,QAAQ,MAAM,GAAG;AACvC,MAAI,MAAM,GAAI,QAAO;AACrB,MAAI,gBAAgB,KAAK,CAAC,GAAG;AAE3B,QAAI,CAAC,KAAK,KAAK,CAAC,EAAG,QAAO;AAC1B,UAAM,IAAI,OAAO,CAAC;AAClB,WAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAAA,EAClC;AACA,SAAO,mBAAmB,CAAC,KAAK;AAClC;AAOA,SAAS,QAAQ,GAAW,QAAoC;AAC9D,MAAI,WAAW,OAAW,QAAO;AACjC,SAAO,cAAc,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC;AACxE;AA4DO,SAAS,YAAY,OAAyB;AACnD,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,QAAQ,WAAW,QAAQ,OAAO,SAAS,MAAM,IAAI,SAAS;AACpE,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,OAAO,YAAY,MAAM;AAC/B,QAAM,WAAW,CAAC,SAAkB,SAAS,MAAM,KAAK,QAAQ,OAAO,GAAG,IAAI;AAG9E,QAAM,SAAS,CAAC,MACd,MAAM,QAAQ,CAAC,OAAO,SAAS,CAAC,IAAI,KAAK,SAAS,aAAa,QAAQ,GAAG,MAAM,CAAC,CAAC;AAEpF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM,OAAO,KAAK,CAAC;AAGtD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE,OAAO,MAAM,OAAO,CAAC;AAKxD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAM9C,MAAI,CAAC,OAAO,GAAG,KAAK,OAAO,KAAK,KAAK,KAAK,SAAS,QAAQ,CAAC,OAAO,GAAG,KAAK,QAAQ,MAAM,GAAG;AAC1F,YAAQ,EAAE,OAAO,MAAM,OAAO,CAAC;AAI/B,UAAM,OAAO,kBAAkB,UAAa,UAAU,YAAY,KAAK,SAAS,QAAQ,KAAK,WAAW;AACxG,QAAI,CAAC,MAAM;AACT,eAAS,OAAO,KAAK,CAAC;AACtB,mBAAa,KAAK;AAClB,kBAAY,KAAK;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,SAAwB;AACtC,QAAI,SAAS,SAAU;AACvB,gBAAY,IAAI;AAChB,oBAAgB,IAAI;AAAA,EACtB;AAEA,QAAM,SAAS,CAAC,SAAiB;AAC/B,aAAS,SAAS,IAAI,CAAC;AACvB,UAAM,OAAO,UAAU,IAAI;AAC3B,QAAI,SAAS,OAAW,QAAO,IAAI;AAAA,EACrC;AAEA,QAAM,SAAS,CAAC,SAAiB;AAC/B,UAAM,UAAU,KAAK,KAAK;AAC1B,QAAI;AACJ,UAAM,WAAW,MAAM;AACrB,eAAS,OAAO,SAAS,CAAC;AAC1B,aAAO,SAAS;AAAA,IAClB;AACA,QAAI,YAAY,IAAI;AAClB,UAAI,CAAC,SAAU,QAAO,SAAS;AAC/B,aAAO;AAAA,IACT,OAAO;AAGL,YAAM,SAAS,OAAO,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAChD,UAAI,CAAC,OAAO,SAAS,MAAM,EAAG,QAAO,SAAS;AAC9C,aAAO,QAAQ,QAAQ,MAAM;AAC7B,UAAI,QAAQ,OAAW,QAAO,KAAK,IAAI,KAAK,IAAI;AAChD,UAAI,QAAQ,OAAW,QAAO,KAAK,IAAI,KAAK,IAAI;AAAA,IAClD;AAGA,aAAS,OAAO,IAAI,CAAC;AACrB,WAAO,IAAI;AACX,QAAI,SAAS,WAAW;AACtB,mBAAa,IAAI;AACjB,eAAS,IAAI;AAAA,IACf;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AAItB,QAAM,WAAW,iBAAiB,QAAQ,iBAAiB;AAE3D,QAAM,gBACJ,SAAS,UAAa,kBAAkB,UACtC,UAAU,UAAa,UAAU,KAC/B,OACE,OAAO,UAAU,YAAY,OAAO,SAAS,WAC/C,GAAG,KAAK,KAAK,IAAI,MAEjB,iCACG;AAAA;AAAA,IAAM;AAAA,IAAG;AAAA,IAAK;AAAA,KACjB,IAGF;AAGJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI;AAAA,MACJ,oBAAkB;AAAA,MAClB,iBAAe,YAAY;AAAA,MAC3B,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAGA;AAAA,MACA,QAAQ,kBAAkB,WAAW,OAAO;AAAA,MAC5C,SAAS,WAAW,gBAAgB,QAAQ,gBAAgB;AAAA,MAM3D,GAAI,WAAW,QAAQ,EAAE,MAAM,IAAI,CAAC;AAAA;AAAA,EACvC;AAEJ;AAYO,SAAS,aAAa,OAAyB;AACpD,SAAO,oBAAC,eAAa,GAAG,OAAO,QAAQ,MAAM,UAAU,GAAG,YAAY,MAAM,cAAc,OAAO;AACnG;","names":[]}

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

@@ -17,7 +17,10 @@ export interface NumberInputProps extends FieldHelpProps, DataAttributes {
      *  folded to a dot, operators kept so a typed expression survives. */
     onChange: (value: string) => void;
     /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur
-     * fields so the save always sees the resolved number, never "10+5". */
+     * fields so the save always sees the resolved number, never "10+5". And once per
+     * calculator session — its "=", or closing it on a result not committed yet — never
+     * per calculator keystroke (refactor audit 2026-10-30, INP-1: a result used to reach
+     * `onChange` only, and the host kept the number from before the calculation). */
     onCommit?: (value: string) => void;
     label?: ReactNode;
     /** Names the field when it has no visible `label` (a table cell, a phone's display

package/dist/components/number-input.js

@@ -91,9 +91,9 @@ function NumberInput(props) {
       `[ui-kit] NumberInput${name === void 0 ? "" : ` "${String(name)}"`} looks like a money field: a currency, and no unit. NumberInput never rounds, so "12.345" or a calculator's "100/3" is sent with three or more decimals (kastlan 5: a 422 from a 2-decimal Money column). Use AmountInput (string value) or MoneyField (number value) \u2014 both settle to the currency's minor unit. (Development builds only; once per field.)`
     );
   }, [suffix, label, ariaLabel, placeholder]);
-  const commit = () => {
+  const commit = (text = value) => {
     setDraft(null);
-    const next = numeric.settle(commitExpression(value));
+    const next = numeric.settle(commitExpression(text));
     if (next !== value) onChange(next);
     onCommit?.(next);
   };
@@ -171,6 +171,7 @@ function NumberInput(props) {
             {
               value: derived,
               onChange: result,
+              onCommit: commit,
               className: "self-stretch px-2.5",
               "aria-label": labels?.calculatorTrigger,
               labels: labels?.calculator

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

@@ -1 +1 @@
-{"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 { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from \"./field-base\";\n// The data alone (0.35): not the picker, which this field does not render.\nimport { CURRENCIES } from \"../currencies\";\nimport { FieldCaption, LockedReason, mergeRefs, type DisabledReasonDisplay, type FieldHelpProps } 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\";\nimport { dataAttributes, type DataAttributes } from \"../lib/data-attributes\";\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 extends FieldHelpProps, DataAttributes {\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  /** 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(current: number | null, count: number, step: number, min?: number, max?: number): 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 ? nearest + count : count > 0 ? Math.ceil(raw) + count - 1 : 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\": ariaLabel,\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  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  const data = dataAttributes(props);\n  if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) {\n    // Bare, unless the caller tags it: then the same plain root as below carries the tags.\n    return Object.keys(data).length > 0 ? <div {...data}>{box}</div> : box;\n  }\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 {...data}>\n      {box}\n      <FieldCaption parts={numeric.hint} />\n      {numeric.errorEl}\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 { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from \"./field-base\";\n// The data alone (0.35): not the picker, which this field does not render.\nimport { CURRENCIES } from \"../currencies\";\nimport { FieldCaption, LockedReason, mergeRefs, type DisabledReasonDisplay, type FieldHelpProps } 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\";\nimport { dataAttributes, type DataAttributes } from \"../lib/data-attributes\";\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 extends FieldHelpProps, DataAttributes {\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\". And once per\n   * calculator session — its \"=\", or closing it on a result not committed yet — never\n   * per calculator keystroke (refactor audit 2026-10-30, INP-1: a result used to reach\n   * `onChange` only, and the host kept the number from before the calculation). */\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  /** 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(current: number | null, count: number, step: number, min?: number, max?: number): 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 ? nearest + count : count > 0 ? Math.ceil(raw) + count - 1 : 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\": ariaLabel,\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  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  // `text`: the calculator commits its session's result (INP-1), which on its \"=\" can be\n  // newer than this render's `value` — `onChange` was handed it in the same event.\n  const commit = (text: string = value) => {\n    setDraft(null);\n    const next = numeric.settle(commitExpression(text));\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              onCommit={commit}\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  const data = dataAttributes(props);\n  if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) {\n    // Bare, unless the caller tags it: then the same plain root as below carries the tags.\n    return Object.keys(data).length > 0 ? <div {...data}>{box}</div> : box;\n  }\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 {...data}>\n      {box}\n      <FieldCaption parts={numeric.hint} />\n      {numeric.errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/numpad-sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useDismissLayer } from \"../hooks/use-dismiss\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\nimport { DEFAULT_CALCULATOR_LABELS, useKitLabels, type CalculatorLabels } from \"../i18n/kit-labels\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Names for the pad itself and its four non-digit keys. The first four are\n *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —\n *  the brand-filled primary button — and it was a hardcoded English literal while\n *  its three neighbours each took an override, so a German phone showed \"Done\"\n *  among German labels with no prop able to change it. */\nexport interface NumberPadSheetLabels extends Partial<CalculatorLabels> {\n  /** The pad's own name — the `calculator.panel` key under its older name here. */\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n  /** Visible text on the primary key, not an `aria-label`. */\n  done?: string;\n}\n\ntype PadKey = { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: PadKeyName } | { kind: \"back\" };\n\n/** The {@link CalculatorLabels} key naming a non-digit key; digits are their glyph. */\ntype PadKeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\n// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`\n// but strips the unicode minus `−`, so minus inserts an ASCII \"-\" while showing\n// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\n/** Every key's shape — including the thing this pad used to delete without replacing.\n *\n *  `focus:outline-none` alone is not a style choice, it is the removal of the only\n *  signal a keyboard user has; on a 4×4 grid of identical tiles it leaves no way at all\n *  to tell which key Enter is about to press (the audit's §a11y, and the same defect as\n *  the dropdown search box).\n *\n *  `focus-visible` and `ring-inset`, for the two reasons {@link ToggleGroup} already\n *  writes down. This is a touch control first, and a plain `focus:` ring paints itself\n *  on every TAP, because a tap focuses the button. And the keys sit 6px apart, which is\n *  thinner than an outward ring plus the neighbour it would spill onto — inset keeps the\n *  ring inside the key it describes.\n *\n *  --brand rather than --border-strong: the operator keys are filled with a step of the\n *  ink, and a ring in the colour of the thing it surrounds is not an indicator. */\nconst PAD_BTN = `flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none ${FOCUS_RING} focus-visible:ring-inset active:scale-[0.97]`;\n// Digits on the well, operators a step down on `--bg-active`, each pressing toward the\n// other. `--bg-active`, not `--border` (0.33, docs/colour-roles-harmonization.md §12.9):\n// More contrast steps the border until it is a 3:1 LINE, and as a fill under the label\n// that left 2.7–3.3:1; `--bg-active` carries the ink at 7:1 and up at both levels.\nconst PAD_DIGIT = \"bg-surface-2 text-primary active:bg-active\";\nconst PAD_ACCENT = \"bg-active text-primary active:bg-surface-2\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n  decimalMark = \".\",\n  onResult,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** The glyph on the decimal key — \",\" where the host shows a comma (AmountInput\n   *  in fr-CH, kastlan 40). With \",\" the key inserts a comma and the text is handed\n   *  back unsanitized, for the host to read by its locale (keksdose G1). */\n  decimalMark?: \".\" | \",\";\n  /** \"=\": the evaluated result, dot-decimal. Default `onChange`. A host that reads\n   *  typed text by the locale's marks takes it apart from keystrokes, since a result\n   *  like \"1.234\" is a decimal and never a grouped thousand. */\n  onResult?: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Names for the pad itself and its non-digit keys — screen-reader names, except\n   * `done`, which is the visible text on the primary key. Merged over `calculator`\n   * from `<UiKitProvider labels>`: this is the same keypad as `CalculatorButton`'s,\n   * on a phone, and one translation covers both. Digits need no name — their glyph\n   * IS the name; the operators do (see {@link CalculatorLabels.plus}). */\n  labels?: NumberPadSheetLabels;\n}) {\n  // `pad` is this sheet's older spelling of `panel`, so it is folded in as that.\n  const fromProps = useMemo(() => {\n    if (!labels) return undefined;\n    const { pad, ...rest } = labels;\n    return pad === undefined ? rest : { ...rest, panel: pad };\n  }, [labels]);\n  const text = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  // ── NO focus trap either, and for a harder reason than the scroll lock ────────\n  //\n  // Wave 3 put `useFocusTrap` on every overlay in this package. This one is the\n  // exception, and it is not an oversight to be tidied up later: a trap here would\n  // DELETE THE COMPONENT IT WAS PROTECTING. Both hosts render the pad with\n  // `showNumpad = isMobile && !disabled && focused`, where `focused` is the host\n  // input's own focus state. Moving focus into the pad blurs that input, the host\n  // sets `focused` false, and the pad unmounts — on mount, before a single key can be\n  // pressed. The blur also COMMITS, so the trap would evaluate a half-typed\n  // expression on the way out.\n  //\n  // That is the contract, not an accident of it. This sheet exists because a PWA\n  // cannot swap the system keyboard for its own: the host keeps real focus, caret and\n  // selection while `inputMode=\"none\"` suppresses the OS keys, and the root's\n  // `onPointerDown` preventDefault below is there for the same reason. The pad is\n  // `role=\"group\"`, not a dialog. A keyboard does not trap focus; it is what you type\n  // WITH.\n  //\n  // What was genuinely missing is a way OUT that is not a tap. A layer on the kit's\n  // Escape stack and not a handler on the sheet, because the sheet never has the focus\n  // a keydown would bubble from — the host does, and the host is not this component.\n  // Escape does what the Done key does rather than cancelling, because committing on\n  // blur is the host's contract and a cancel would have to be the host's to offer.\n  //\n  // Inside a `Modal` the pad opened over the dialog, so the stack hands the first\n  // Escape to the pad and the next to the dialog (Wave 2, DUP-1). It used to be the\n  // other way round, written down here as the limit: the dialog's own handler stopped\n  // the key before a document listener saw it, and the press closed the dialog.\n  useDismissLayer(true, onDone);\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  // With a \",\" mark the host keeps the typist's own text (AmountInput, keksdose G1):\n  // the key inserts the comma it shows, and the host, not this pad, decides which mark\n  // is the decimal one — sanitizing here would fold a grouping \".\" into a decimal.\n  const insert = (ch: string) =>\n    onChange(decimalMark === \",\" ? value + (ch === \".\" ? \",\" : ch) : sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) (onResult ?? onChange)(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={text.panel}\n      // A kit layer, and the bottom layer a docked tour card stays clear of (0.50,\n      // docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      data-tour-obstruction=\"\"\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-subtle bg-surface px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && <span className=\"truncate pb-1 text-xs font-medium text-money-neutral\">{label}</span>}\n        {/* At the logical end, opposite the label; the figures themselves stay\n            left-to-right and right-aligned, like the desktop calculator's. */}\n        <div className=\"ms-auto min-w-0\">\n          <div dir=\"ltr\" className=\"truncate text-right font-mono text-lg leading-tight text-primary\">\n            {value || \"0\"}\n          </div>\n          <div dir=\"ltr\" className=\"h-4 text-right font-mono text-xs text-money-neutral\">\n            {preview}\n          </div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={text.backspace}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? text[key.name] : key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.kind === \"ins\" && key.name === \"decimal\" ? decimalMark : key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={text.clear} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={text.equals} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          // The one key whose own fill is --brand, so it rings in the colour that fill\n          // was chosen to be legible against instead (tailwind-merge keeps the later\n          // ring colour). A --brand ring here would be present in the DOM and invisible\n          // on screen, which is the defect this change exists to fix.\n          className={cn(\n            PAD_BTN,\n            \"col-span-2 bg-brand text-brand-contrast focus-visible:ring-brand-contrast active:bg-brand-hover\",\n          )}\n        >\n          {text.done}\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useDismissLayer } from \"../hooks/use-dismiss\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\nimport { DEFAULT_CALCULATOR_LABELS, useKitLabels, type CalculatorLabels } from \"../i18n/kit-labels\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Names for the pad itself and its four non-digit keys. The first four are\n *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —\n *  the brand-filled primary button — and it was a hardcoded English literal while\n *  its three neighbours each took an override, so a German phone showed \"Done\"\n *  among German labels with no prop able to change it. */\nexport interface NumberPadSheetLabels extends Partial<CalculatorLabels> {\n  /** The pad's own name — the `calculator.panel` key under its older name here. */\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n  /** Visible text on the primary key, not an `aria-label`. */\n  done?: string;\n}\n\ntype PadKey = { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: PadKeyName } | { kind: \"back\" };\n\n/** The {@link CalculatorLabels} key naming a non-digit key; digits are their glyph. */\ntype PadKeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\n// Insert chars `sanitizeLive` keeps as they are (`× ÷` and ASCII `+ - * /`; it maps the\n// unicode minus `−` to \"-\" since 0.51.7, INP-3), so minus inserts the ASCII \"-\" its\n// field shows while the key shows the nicer glyph. The evaluator normalises `× ÷` back\n// to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\n/** Every key's shape — including the thing this pad used to delete without replacing.\n *\n *  `focus:outline-none` alone is not a style choice, it is the removal of the only\n *  signal a keyboard user has; on a 4×4 grid of identical tiles it leaves no way at all\n *  to tell which key Enter is about to press (the audit's §a11y, and the same defect as\n *  the dropdown search box).\n *\n *  `focus-visible` and `ring-inset`, for the two reasons {@link ToggleGroup} already\n *  writes down. This is a touch control first, and a plain `focus:` ring paints itself\n *  on every TAP, because a tap focuses the button. And the keys sit 6px apart, which is\n *  thinner than an outward ring plus the neighbour it would spill onto — inset keeps the\n *  ring inside the key it describes.\n *\n *  --brand rather than --border-strong: the operator keys are filled with a step of the\n *  ink, and a ring in the colour of the thing it surrounds is not an indicator. */\nconst PAD_BTN = `flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none ${FOCUS_RING} focus-visible:ring-inset active:scale-[0.97]`;\n// Digits on the well, operators a step down on `--bg-active`, each pressing toward the\n// other. `--bg-active`, not `--border` (0.33, docs/colour-roles-harmonization.md §12.9):\n// More contrast steps the border until it is a 3:1 LINE, and as a fill under the label\n// that left 2.7–3.3:1; `--bg-active` carries the ink at 7:1 and up at both levels.\nconst PAD_DIGIT = \"bg-surface-2 text-primary active:bg-active\";\nconst PAD_ACCENT = \"bg-active text-primary active:bg-surface-2\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n  decimalMark = \".\",\n  onResult,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** The glyph on the decimal key — \",\" where the host shows a comma (AmountInput\n   *  in fr-CH, kastlan 40). With \",\" the key inserts a comma and the text is handed\n   *  back unsanitized, for the host to read by its locale (keksdose G1). */\n  decimalMark?: \".\" | \",\";\n  /** \"=\": the evaluated result, dot-decimal. Default `onChange`. A host that reads\n   *  typed text by the locale's marks takes it apart from keystrokes, since a result\n   *  like \"1.234\" is a decimal and never a grouped thousand. */\n  onResult?: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Names for the pad itself and its non-digit keys — screen-reader names, except\n   * `done`, which is the visible text on the primary key. Merged over `calculator`\n   * from `<UiKitProvider labels>`: this is the same keypad as `CalculatorButton`'s,\n   * on a phone, and one translation covers both. Digits need no name — their glyph\n   * IS the name; the operators do (see {@link CalculatorLabels.plus}). */\n  labels?: NumberPadSheetLabels;\n}) {\n  // `pad` is this sheet's older spelling of `panel`, so it is folded in as that.\n  const fromProps = useMemo(() => {\n    if (!labels) return undefined;\n    const { pad, ...rest } = labels;\n    return pad === undefined ? rest : { ...rest, panel: pad };\n  }, [labels]);\n  const text = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  // ── NO focus trap either, and for a harder reason than the scroll lock ────────\n  //\n  // Wave 3 put `useFocusTrap` on every overlay in this package. This one is the\n  // exception, and it is not an oversight to be tidied up later: a trap here would\n  // DELETE THE COMPONENT IT WAS PROTECTING. Both hosts render the pad with\n  // `showNumpad = isMobile && !disabled && focused`, where `focused` is the host\n  // input's own focus state. Moving focus into the pad blurs that input, the host\n  // sets `focused` false, and the pad unmounts — on mount, before a single key can be\n  // pressed. The blur also COMMITS, so the trap would evaluate a half-typed\n  // expression on the way out.\n  //\n  // That is the contract, not an accident of it. This sheet exists because a PWA\n  // cannot swap the system keyboard for its own: the host keeps real focus, caret and\n  // selection while `inputMode=\"none\"` suppresses the OS keys, and the root's\n  // `onPointerDown` preventDefault below is there for the same reason. The pad is\n  // `role=\"group\"`, not a dialog. A keyboard does not trap focus; it is what you type\n  // WITH.\n  //\n  // What was genuinely missing is a way OUT that is not a tap. A layer on the kit's\n  // Escape stack and not a handler on the sheet, because the sheet never has the focus\n  // a keydown would bubble from — the host does, and the host is not this component.\n  // Escape does what the Done key does rather than cancelling, because committing on\n  // blur is the host's contract and a cancel would have to be the host's to offer.\n  //\n  // Inside a `Modal` the pad opened over the dialog, so the stack hands the first\n  // Escape to the pad and the next to the dialog (Wave 2, DUP-1). It used to be the\n  // other way round, written down here as the limit: the dialog's own handler stopped\n  // the key before a document listener saw it, and the press closed the dialog.\n  useDismissLayer(true, onDone);\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  // With a \",\" mark the host keeps the typist's own text (AmountInput, keksdose G1):\n  // the key inserts the comma it shows, and the host, not this pad, decides which mark\n  // is the decimal one — sanitizing here would fold a grouping \".\" into a decimal.\n  const insert = (ch: string) =>\n    onChange(decimalMark === \",\" ? value + (ch === \".\" ? \",\" : ch) : sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) (onResult ?? onChange)(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={text.panel}\n      // A kit layer, and the bottom layer a docked tour card stays clear of (0.50,\n      // docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      data-tour-obstruction=\"\"\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-subtle bg-surface px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && <span className=\"truncate pb-1 text-xs font-medium text-money-neutral\">{label}</span>}\n        {/* At the logical end, opposite the label; the figures themselves stay\n            left-to-right and right-aligned, like the desktop calculator's. */}\n        <div className=\"ms-auto min-w-0\">\n          <div dir=\"ltr\" className=\"truncate text-right font-mono text-lg leading-tight text-primary\">\n            {value || \"0\"}\n          </div>\n          <div dir=\"ltr\" className=\"h-4 text-right font-mono text-xs text-money-neutral\">\n            {preview}\n          </div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={text.backspace}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? text[key.name] : key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.kind === \"ins\" && key.name === \"decimal\" ? decimalMark : key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={text.clear} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={text.equals} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          // The one key whose own fill is --brand, so it rings in the colour that fill\n          // was chosen to be legible against instead (tailwind-merge keeps the later\n          // ring colour). A --brand ring here would be present in the DOM and invisible\n          // on screen, which is the defect this change exists to fix.\n          className={cn(\n            PAD_BTN,\n            \"col-span-2 bg-brand text-brand-contrast focus-visible:ring-brand-contrast active:bg-brand-hover\",\n          )}\n        >\n          {text.done}\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}

package/dist/components/reauth-dialog.d.ts

@@ -30,8 +30,7 @@ export interface ReauthDialogProps {
     onSubmit: (password: string) => void | Promise<unknown>;
     /**
      * The dialog has closed: `true` after a resolved `onSubmit`, `false` for Cancel,
-     * Escape, the backdrop and Back. A dismissal while `onSubmit` is still running also
-     * answers `false`, and that call's late result is then ignored.
+     * Escape, the backdrop and Back — none of which closes it while the check runs.
      */
     onClose: (confirmed: boolean) => void;
     /**
@@ -81,8 +80,8 @@ export interface ReauthDialogProps {
  *
  * The field is a `<form>`, so Enter submits once something is typed. Focus starts in
  * the field and returns to the trigger through `Modal`'s trap. While a check runs,
- * the field is read-only, Cancel is disabled and Escape is held: a request that has
- * left cannot be cancelled by closing the dialog, and the dialog should not pretend it
- * can.
+ * the field is read-only, Cancel is disabled and the dialog is `busy` (Escape, the
+ * backdrop and Back are held, DUP-3): a request that has left cannot be cancelled by
+ * closing the dialog, and the dialog should not pretend it can.
  */
 export declare function ReauthDialog({ onSubmit, onClose, error, busy: busyProp, title, description, submitLabel, tone, children, open, labels: labelsProp, }: ReauthDialogProps): import("react").JSX.Element;