@eifi1/ui-kit 0.53.0 → 0.55.0

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\". 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":[]}
+{"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, LockFrame, 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 know, as whole words: \"Amount (CHF)\",\n// \"EUR\", \"Kosten CHF\". A `retired` one too (BGN): a label that names it is still money,\n// whatever the pickers offer. Not every ISO 4217 code — \"ALL\", \"TOP\" and \"PEN\" are codes\n// too, 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 = (\n    <LockFrame lock={lock} display={disabledReasonDisplay} className={cn(\"w-full\", className)}>\n      {field}\n    </LockFrame>\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/page-header-layout.d.ts

@@ -0,0 +1,18 @@
+import type { PageHeaderMobileLayout, PageHeaderSize } from "./page-header.js";
+/** The title's type per {@link PageHeaderSize}. */
+export declare const TITLE: Record<PageHeaderSize, string>;
+/** The header's root: the trail, then the row, `gap-2` apart. */
+export declare const ROOT = "flex min-w-0 flex-col gap-2";
+/**
+ * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;
+ * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full
+ * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped
+ * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and
+ * every wider screen keep their row; `inline` is for actions known to fit, and stays.
+ */
+export declare const STACK_ACTIONS_AT_LARGE = "large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full";
+export declare const ROW: Record<PageHeaderMobileLayout, string>;
+/** The actions' box, at the title block's end from `sm` up. */
+export declare const ACTIONS = "flex shrink-0 flex-wrap items-center gap-2";
+/** The sentence under the title. */
+export declare const DESCRIPTION = "mt-1 text-sm text-muted";

package/dist/components/page-header-layout.js

@@ -0,0 +1,23 @@
+"use client";
+const TITLE = {
+  sm: "text-lg font-semibold",
+  compact: "text-xl font-semibold",
+  md: "text-xl font-semibold tracking-tight sm:text-2xl"
+};
+const ROOT = "flex min-w-0 flex-col gap-2";
+const STACK_ACTIONS_AT_LARGE = "large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full";
+const ROW = {
+  stacked: "flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
+  inline: "flex-row items-center justify-between gap-2 sm:gap-4"
+};
+const ACTIONS = "flex shrink-0 flex-wrap items-center gap-2";
+const DESCRIPTION = "mt-1 text-sm text-muted";
+export {
+  ACTIONS,
+  DESCRIPTION,
+  ROOT,
+  ROW,
+  STACK_ACTIONS_AT_LARGE,
+  TITLE
+};
+//# sourceMappingURL=page-header-layout.js.map

package/dist/components/page-header-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/page-header-layout.ts"],"sourcesContent":["// PageHeader's metrics, in a module of their own so `PageHeaderSkeleton` draws its outline\n// from the same class strings the header lays out with (0.55): a size or a gap changed\n// here moves both, and the outline cannot drift from the header it stands in for. Not\n// public — the page-header module's `export *` would publish anything declared there.\n\nimport type { PageHeaderMobileLayout, PageHeaderSize } from \"./page-header\";\n\n/** The title's type per {@link PageHeaderSize}. */\nexport const TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  compact: \"text-xl font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\n/** The header's root: the trail, then the row, `gap-2` apart. */\nexport const ROOT = \"flex min-w-0 flex-col gap-2\";\n\n/**\n * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;\n * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full\n * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped\n * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and\n * every wider screen keep their row; `inline` is for actions known to fit, and stays.\n */\nexport const STACK_ACTIONS_AT_LARGE = \"large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full\";\n\nexport const ROW: Record<PageHeaderMobileLayout, string> = {\n  stacked: \"flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\",\n  inline: \"flex-row items-center justify-between gap-2 sm:gap-4\",\n};\n\n/** The actions' box, at the title block's end from `sm` up. */\nexport const ACTIONS = \"flex shrink-0 flex-wrap items-center gap-2\";\n\n/** The sentence under the title. */\nexport const DESCRIPTION = \"mt-1 text-sm text-muted\";\n"],"mappings":";AAQO,MAAM,QAAwC;AAAA,EACnD,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGO,MAAM,OAAO;AASb,MAAM,yBAAyB;AAE/B,MAAM,MAA8C;AAAA,EACzD,SAAS;AAAA,EACT,QAAQ;AACV;AAGO,MAAM,UAAU;AAGhB,MAAM,cAAc;","names":[]}

package/dist/components/page-header-skeleton.d.ts

@@ -0,0 +1,41 @@
+import type { ComponentPropsWithRef } from "react";
+import type { PageHeaderMobileLayout, PageHeaderSize } from "./page-header.js";
+export interface PageHeaderSkeletonProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+    /** The header's `size`, whose title it outlines. Default `md`, as PageHeader's. */
+    size?: PageHeaderSize;
+    /** The header's `mobileLayout`. Default `stacked`, as PageHeader's. */
+    mobileLayout?: PageHeaderMobileLayout;
+    /** How many actions to outline, each a `md` Button. Default 1; 0 for a header without. */
+    actions?: number;
+    /** A trail line above the title (the header's `breadcrumbs`). */
+    breadcrumbs?: boolean;
+    /** The small uppercase line above the title (the header's `eyebrow`). */
+    eyebrow?: boolean;
+    /** A line under the title (the header's `description`). */
+    description?: boolean;
+    /**
+     * Say what is loading, once: a `role="status"` region with this as its hidden text.
+     * Left out, nothing is announced — on a page outline the `TableSkeleton` under it
+     * already says "Loading…", and two regions would say it twice.
+     */
+    label?: string;
+}
+/**
+ * The outline of a {@link PageHeader} while its page is on its way (0.55): the trail, the
+ * eyebrow, the title, the description and the actions, each the height the header gives
+ * it, laid out by the same rows. keksdose drew it from `Skeleton` pieces for its page
+ * outline (app/page-skeleton.tsx: an `h-7` bar for its `compact` title, an `h-9` one for
+ * the actions) — numbers only the kit knows, and wrong the day the header's change.
+ *
+ * Exact, not near: each line is its type's own line box (`1lh` of the header's class for
+ * it), so it follows the `size`, the `sm` step of `md`'s title and the reader's text size
+ * (the rem scale) without a table of heights. An action is a `md` Button's box: a
+ * `text-sm` line, `py-2` and the 1px border the outlined variants draw, and the 48px touch
+ * target from Large up (button-look.ts). From Large on a phone a `stacked` header's actions
+ * go full width, one under the other, and so do these. The header's rows and gaps are its
+ * own class strings (page-header-layout.ts), so the outline hands over without a jump.
+ *
+ * Beside {@link TableSkeleton}: a page's outline is this over that. Props and `ref` go to
+ * the root; every placeholder is `aria-hidden`.
+ */
+export declare function PageHeaderSkeleton({ size, mobileLayout, actions, breadcrumbs, eyebrow, description, label, className, ...rest }: PageHeaderSkeletonProps): import("react").JSX.Element;

package/dist/components/page-header-skeleton.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { SECTION_LABEL_CLASS } from "./text.js";
+import { Skeleton } from "./skeleton.js";
+import { ACTIONS, DESCRIPTION, ROOT, ROW, STACK_ACTIONS_AT_LARGE, TITLE } from "./page-header-layout.js";
+function PageHeaderSkeleton({
+  size = "md",
+  mobileLayout = "stacked",
+  actions = 1,
+  breadcrumbs = false,
+  eyebrow = false,
+  description = false,
+  label,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      role: label ? "status" : void 0,
+      className: cn("relative", className),
+      "data-skeleton-preset": "page-header",
+      children: [
+        label && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: ROOT, children: [
+          breadcrumbs && /* @__PURE__ */ jsx(Skeleton, { className: "h-[1lh] w-56 max-w-full text-sm", "data-skeleton-part": "breadcrumbs" }),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0", ROW[mobileLayout], mobileLayout === "inline" && "flex-wrap"), children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              eyebrow && /* @__PURE__ */ jsx(Skeleton, { className: cn(SECTION_LABEL_CLASS.xs, "mb-1 h-[1lh] w-20"), "data-skeleton-part": "eyebrow" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: cn(TITLE[size], "h-[1lh] w-48 max-w-full"), "data-skeleton-part": "title" }),
+              description && /* @__PURE__ */ jsx(Skeleton, { className: cn(DESCRIPTION, "h-[1lh] w-80 max-w-full"), "data-skeleton-part": "description" })
+            ] }),
+            actions > 0 && /* @__PURE__ */ jsx("div", { className: cn(ACTIONS, mobileLayout === "stacked" && STACK_ACTIONS_AT_LARGE), children: Array.from({ length: actions }, (_, i) => /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                className: "h-[calc(1lh+1rem+2px)] w-24 rounded-md text-sm large:min-h-[48px]",
+                "data-skeleton-part": "action"
+              },
+              i
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  PageHeaderSkeleton
+};
+//# sourceMappingURL=page-header-skeleton.js.map

package/dist/components/page-header-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/page-header-skeleton.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\nimport { Skeleton } from \"./skeleton\";\nimport type { PageHeaderMobileLayout, PageHeaderSize } from \"./page-header\";\nimport { ACTIONS, DESCRIPTION, ROOT, ROW, STACK_ACTIONS_AT_LARGE, TITLE } from \"./page-header-layout\";\n\nexport interface PageHeaderSkeletonProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** The header's `size`, whose title it outlines. Default `md`, as PageHeader's. */\n  size?: PageHeaderSize;\n  /** The header's `mobileLayout`. Default `stacked`, as PageHeader's. */\n  mobileLayout?: PageHeaderMobileLayout;\n  /** How many actions to outline, each a `md` Button. Default 1; 0 for a header without. */\n  actions?: number;\n  /** A trail line above the title (the header's `breadcrumbs`). */\n  breadcrumbs?: boolean;\n  /** The small uppercase line above the title (the header's `eyebrow`). */\n  eyebrow?: boolean;\n  /** A line under the title (the header's `description`). */\n  description?: boolean;\n  /**\n   * Say what is loading, once: a `role=\"status\"` region with this as its hidden text.\n   * Left out, nothing is announced — on a page outline the `TableSkeleton` under it\n   * already says \"Loading…\", and two regions would say it twice.\n   */\n  label?: string;\n}\n\n/**\n * The outline of a {@link PageHeader} while its page is on its way (0.55): the trail, the\n * eyebrow, the title, the description and the actions, each the height the header gives\n * it, laid out by the same rows. keksdose drew it from `Skeleton` pieces for its page\n * outline (app/page-skeleton.tsx: an `h-7` bar for its `compact` title, an `h-9` one for\n * the actions) — numbers only the kit knows, and wrong the day the header's change.\n *\n * Exact, not near: each line is its type's own line box (`1lh` of the header's class for\n * it), so it follows the `size`, the `sm` step of `md`'s title and the reader's text size\n * (the rem scale) without a table of heights. An action is a `md` Button's box: a\n * `text-sm` line, `py-2` and the 1px border the outlined variants draw, and the 48px touch\n * target from Large up (button-look.ts). From Large on a phone a `stacked` header's actions\n * go full width, one under the other, and so do these. The header's rows and gaps are its\n * own class strings (page-header-layout.ts), so the outline hands over without a jump.\n *\n * Beside {@link TableSkeleton}: a page's outline is this over that. Props and `ref` go to\n * the root; every placeholder is `aria-hidden`.\n */\nexport function PageHeaderSkeleton({\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  actions = 1,\n  breadcrumbs = false,\n  eyebrow = false,\n  description = false,\n  label,\n  className,\n  ...rest\n}: PageHeaderSkeletonProps) {\n  return (\n    <div\n      {...rest}\n      role={label ? \"status\" : undefined}\n      // `relative`: the containing block for the sr-only text (sr-only-containment.test).\n      className={cn(\"relative\", className)}\n      data-skeleton-preset=\"page-header\"\n    >\n      {label && <span className=\"sr-only\">{label}</span>}\n      <div aria-hidden=\"true\" className={ROOT}>\n        {breadcrumbs && <Skeleton className=\"h-[1lh] w-56 max-w-full text-sm\" data-skeleton-part=\"breadcrumbs\" />}\n        {/* `inline` wraps, as the header's does when its title keeps its words (keksdose H1). */}\n        <div className={cn(\"flex min-w-0\", ROW[mobileLayout], mobileLayout === \"inline\" && \"flex-wrap\")}>\n          <div className=\"min-w-0 flex-1\">\n            {eyebrow && (\n              <Skeleton className={cn(SECTION_LABEL_CLASS.xs, \"mb-1 h-[1lh] w-20\")} data-skeleton-part=\"eyebrow\" />\n            )}\n            <Skeleton className={cn(TITLE[size], \"h-[1lh] w-48 max-w-full\")} data-skeleton-part=\"title\" />\n            {description && (\n              <Skeleton className={cn(DESCRIPTION, \"h-[1lh] w-80 max-w-full\")} data-skeleton-part=\"description\" />\n            )}\n          </div>\n          {actions > 0 && (\n            <div className={cn(ACTIONS, mobileLayout === \"stacked\" && STACK_ACTIONS_AT_LARGE)}>\n              {Array.from({ length: actions }, (_, i) => (\n                <Skeleton\n                  key={i}\n                  className=\"h-[calc(1lh+1rem+2px)] w-24 rounded-md text-sm large:min-h-[48px]\"\n                  data-skeleton-part=\"action\"\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAiEgB,cAKN,YALM;AAhEhB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AAEzB,SAAS,SAAS,aAAa,MAAM,KAAK,wBAAwB,aAAa;AAyCxE,SAAS,mBAAmB;AAAA,EACjC,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,QAAQ,WAAW;AAAA,MAEzB,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,wBAAqB;AAAA,MAEpB;AAAA,iBAAS,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,QAC3C,qBAAC,SAAI,eAAY,QAAO,WAAW,MAChC;AAAA,yBAAe,oBAAC,YAAS,WAAU,mCAAkC,sBAAmB,eAAc;AAAA,UAEvG,qBAAC,SAAI,WAAW,GAAG,gBAAgB,IAAI,YAAY,GAAG,iBAAiB,YAAY,WAAW,GAC5F;AAAA,iCAAC,SAAI,WAAU,kBACZ;AAAA,yBACC,oBAAC,YAAS,WAAW,GAAG,oBAAoB,IAAI,mBAAmB,GAAG,sBAAmB,WAAU;AAAA,cAErG,oBAAC,YAAS,WAAW,GAAG,MAAM,IAAI,GAAG,yBAAyB,GAAG,sBAAmB,SAAQ;AAAA,cAC3F,eACC,oBAAC,YAAS,WAAW,GAAG,aAAa,yBAAyB,GAAG,sBAAmB,eAAc;AAAA,eAEtG;AAAA,YACC,UAAU,KACT,oBAAC,SAAI,WAAW,GAAG,SAAS,iBAAiB,aAAa,sBAAsB,GAC7E,gBAAM,KAAK,EAAE,QAAQ,QAAQ,GAAG,CAAC,GAAG,MACnC;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,sBAAmB;AAAA;AAAA,cAFd;AAAA,YAGP,CACD,GACH;AAAA,aAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/page-header.js

@@ -5,16 +5,7 @@ import { cn } from "../lib/cn.js";
 import { SECTION_LABEL_CLASS } from "./text.js";
 import { useDocumentTitle } from "../hooks/use-document-title.js";
 import { PageHeaderTrailContext } from "./page-header-context.js";
-const TITLE = {
-  sm: "text-lg font-semibold",
-  compact: "text-xl font-semibold",
-  md: "text-xl font-semibold tracking-tight sm:text-2xl"
-};
-const STACK_ACTIONS_AT_LARGE = "large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full";
-const ROW = {
-  stacked: "flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
-  inline: "flex-row items-center justify-between gap-2 sm:gap-4"
-};
+import { ACTIONS, DESCRIPTION, ROOT, ROW, STACK_ACTIONS_AT_LARGE, TITLE } from "./page-header-layout.js";
 const ROW_ALIGN = {
   stacked: { start: "sm:items-start", center: "sm:items-center", end: "sm:items-end" },
   inline: { start: "items-start", center: "items-center", end: "items-end" }
@@ -64,7 +55,7 @@ function PageHeader({
     if (titleBox.parentElement) observer.observe(titleBox.parentElement);
     return () => observer.disconnect();
   }, [measuresWrap]);
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("flex min-w-0 flex-col gap-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cn(ROOT, className), children: [
     breadcrumbs != null && /* @__PURE__ */ jsx(PageHeaderTrailContext.Provider, { value: titled ? TITLED : UNTITLED, children: breadcrumbs }),
     /* @__PURE__ */ jsxs(
       "div",
@@ -79,17 +70,13 @@ function PageHeader({
           /* @__PURE__ */ jsxs("div", { ref: titleRef, className: cn("flex-1", keepsWords ? "min-w-min" : "min-w-0"), children: [
             eyebrow != null && /* @__PURE__ */ jsx("p", { className: cn(SECTION_LABEL_CLASS.xs, "mb-1"), children: eyebrow }),
             /* @__PURE__ */ jsx(Heading, { className: cn(truncateTitle ? "truncate-until-large" : "break-words", "text-primary", TITLE[size]), children: title }),
-            description != null && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted", children: description })
+            description != null && /* @__PURE__ */ jsx("p", { className: DESCRIPTION, children: description })
           ] }),
           actions != null && /* @__PURE__ */ jsx(
             "div",
             {
               ref: actionsRef,
-              className: cn(
-                "flex shrink-0 flex-wrap items-center gap-2",
-                hasSecondary && "sm:order-2",
-                mobileLayout === "stacked" && STACK_ACTIONS_AT_LARGE
-              ),
+              className: cn(ACTIONS, hasSecondary && "sm:order-2", mobileLayout === "stacked" && STACK_ACTIONS_AT_LARGE),
               children: actions
             }
           ),

package/dist/components/page-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\nimport { useDocumentTitle } from \"../hooks/use-document-title\";\nimport { PageHeaderTrailContext } from \"./page-header-context\";\n\n/**\n * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a\n * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).\n *\n * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at\n * EVERY width — budgets, rules, accounts, transactions and budget pages all write\n * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to\n * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's\n * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is\n * one: the letters are taken in order, and there is none between `sm` and `md` — an\n * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is\n * not.\n */\nexport type PageHeaderSize = \"sm\" | \"compact\" | \"md\";\n\nconst TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  compact: \"text-xl font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\n/**\n * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both\n * layouts are one row: title block at the start, actions at the end.\n */\nexport type PageHeaderMobileLayout = \"stacked\" | \"inline\";\n\n/**\n * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;\n * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full\n * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped\n * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and\n * every wider screen keep their row; `inline` is for actions known to fit, and stays.\n */\nconst STACK_ACTIONS_AT_LARGE = \"large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full\";\n\nconst ROW: Record<PageHeaderMobileLayout, string> = {\n  stacked: \"flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\",\n  inline: \"flex-row items-center justify-between gap-2 sm:gap-4\",\n};\n\n/**\n * Where the actions sit on the title block's height, in the one row the header is from\n * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only\n * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,\n * `center` for `inline`.\n */\nexport type PageHeaderActionsAlign = \"start\" | \"center\" | \"end\";\n\n/** Applied to the ROW, so the title block and the actions are aligned against each\n *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved\n *  nothing when the actions were the taller item — they already filled the row, and\n *  the title stayed at the top (keksdose H2, reports-page's two-line labelled\n *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where\n *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */\nconst ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {\n  stacked: { start: \"sm:items-start\", center: \"sm:items-center\", end: \"sm:items-end\" },\n  inline: { start: \"items-start\", center: \"items-center\", end: \"items-end\" },\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithRef<\"div\">, \"title\"> {\n  title: ReactNode;\n  /** A sentence under the title. */\n  description?: ReactNode;\n  /** Buttons for the page — \"New\", \"Export\". At the title's end from `sm` up; under it,\n   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. Inside a header with a title\n   *  it hides its current entry (the title names it) and is drawn only when an entry\n   *  other than home is left — `Breadcrumbs.hideCurrent` (0.49 KIT-9). */\n  breadcrumbs?: ReactNode;\n  /**\n   * The window's title (`document.title`) while the header is mounted (0.49 KIT-9),\n   * through `useDocumentTitle` and the provider's format (\"{page} · {section} · {app}\",\n   * `appName` as the app). A string is the page; an array is `[page, section]` (or\n   * `[page, section, app]`); `false` leaves the window's title alone.\n   *\n   * Default: the `title` when it is a string, and only for the page's own header\n   * (`as=\"h1\"`) — a tab's `h2` header does not rename the window.\n   */\n  documentTitle?: string | ReadonlyArray<string | null | undefined> | false;\n  /** A small uppercase line above the title — the section or the kind of record\n   *  (\"Building\", \"Settings\"). The section-label type. */\n  eyebrow?: ReactNode;\n  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a\n   *  header inside a page that already has its `h1` (a tab's own header). */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  size?: PageHeaderSize;\n  /**\n   * `stacked` (default): on a phone the actions drop under the title and wrap, so a\n   * row of three buttons never pushes the title off the screen.\n   *\n   * `inline`: the actions stay beside the title on a phone too, vertically centred on\n   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center\n   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned\n   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the\n   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is\n   * for a header whose actions are known to fit beside a phone-width title (an icon\n   * button, a month picker); a long title wraps to make room for them instead.\n   */\n  mobileLayout?: PageHeaderMobileLayout;\n  /**\n   * A second group of actions that gets its OWN full-width row under the header on a\n   * phone, and joins the actions' row from `sm` up, between the title and\n   * {@link actions}.\n   *\n   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month\n   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — \"two tidy rows\n   * instead of the old ragged justify-between overflow\" — and one row, title | toggles |\n   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and\n   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.\n   * There: `actions` is the month navigation, this is the toggles.\n   *\n   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,\n   * and the one a screen reader and the Tab key follow at every width. From `sm` up the\n   * two groups swap places visually only, which keeps the page's primary control (the\n   * month) at the row's end, where keksdose had it, and first in reading order. The\n   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:\n   * one header, one breakpoint.\n   */\n  secondaryActions?: ReactNode;\n  /**\n   * The actions' vertical alignment against the title block — see\n   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.\n   *\n   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED\n   * `CurrencySelect` as its action: a field with its label on top is taller than the\n   * title, and `stacked`'s default top alignment hangs it from the title's cap height\n   * with its control well below the title's line. `center` sets it on the title's\n   * middle, as that page's hand-written `items-center` row did. It aligns the whole row\n   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the\n   * actions box, which did nothing when the actions were the taller item (keksdose H2).\n   */\n  actionsAlign?: PageHeaderActionsAlign;\n  /**\n   * One line, cut with an ellipsis, instead of the default breaking of a long word onto\n   * as many lines as it needs.\n   *\n   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in\n   * its own truncating span so a long name gives way to the `inline` header's actions\n   * instead of pushing them. This is that span's behaviour on the heading itself; the\n   * title block is already allowed to shrink below its content, which is what lets the\n   * cut happen inside a flex row.\n   *\n   * The full title stays in the DOM as the heading's text, so a screen reader and the\n   * document outline read all of it. There is deliberately no native `title` tooltip:\n   * the kit does not use them (not on touch, not on keyboard focus, not styled).\n   *\n   * At Normal only: from Large up the title wraps (`truncate-until-large`, text size\n   * §10.17; round 0.34 T1), as nothing is cut at Large — the actions then share the row\n   * with a taller title block.\n   */\n  truncateTitle?: boolean;\n}\n\nconst TITLED = { titled: true };\nconst UNTITLED = { titled: false };\n\n/**\n * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the\n * page's actions.\n *\n * kastlan's (shared/components/display/page-header.tsx) is the model — title and\n * description on one side, actions on the other, stacked on a phone — and this adds\n * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`\n * title (a status chip beside the name), and actions that WRAP when there are more\n * than fit a phone's width, instead of running off it. No outer margin: the page's\n * own rhythm (`space-y-*`, a grid gap) places it.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  breadcrumbs,\n  eyebrow,\n  as = \"h1\",\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  secondaryActions,\n  actionsAlign,\n  truncateTitle = false,\n  documentTitle,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  useDocumentTitle(\n    documentTitle === false\n      ? []\n      : documentTitle === undefined\n        ? as === \"h1\" && typeof title === \"string\"\n          ? [title]\n          : []\n        : typeof documentTitle === \"string\"\n          ? [documentTitle]\n          : documentTitle,\n  );\n  const titled = title != null && title !== false && title !== \"\";\n  const hasSecondary = secondaryActions != null;\n  const wrapsSecondary = hasSecondary && mobileLayout === \"inline\";\n  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;\n  // keksdose H1: in `inline` the title block could shrink below its longest word, and\n  // `break-words` then split \"Monatsbudget\" into \"Monatsbudg\" / \"et\" beside the actions.\n  // Unless it truncates, the title keeps its longest word (min-content) and the ROW\n  // wraps instead: actions that do not fit go to a line of their own, as the app's old\n  // `flex-wrap` header did.\n  const keepsWords = mobileLayout === \"inline\" && !truncateTitle;\n  // keksdose, after H1: once the actions have wrapped below the title, the phone's\n  // header was THREE rows — title / actions / secondary — where the app's old header\n  // shared the second row between the month nav and the toggles (~48px of phone\n  // height). So the secondary group's full-width basis (G6b: a row of its own) is\n  // dropped exactly when the actions already sit below the title; then it joins their\n  // row if it fits, and wraps under them if not. While the actions share the title's\n  // row, nothing changes: the secondary group never climbs onto the title's row.\n  //\n  // CSS cannot see \"the previous item wrapped\", so it is measured — by a\n  // ResizeObserver, whose first callback runs on `observe`. It is stable: the\n  // secondary group comes after the actions, so its basis cannot move them. No\n  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.\n  const measuresWrap = keepsWords && hasSecondary && actions != null;\n  const titleRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWrapped, setActionsWrapped] = useState(false);\n  useLayoutEffect(() => {\n    const titleBox = titleRef.current;\n    const actionsBox = actionsRef.current;\n    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const t = titleBox.getBoundingClientRect();\n      const a = actionsBox.getBoundingClientRect();\n      // Unmeasured (display: none, no layout): keep the full-width basis.\n      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);\n    });\n    observer.observe(titleBox);\n    observer.observe(actionsBox);\n    if (titleBox.parentElement) observer.observe(titleBox.parentElement);\n    return () => observer.disconnect();\n  }, [measuresWrap]);\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs != null && (\n        <PageHeaderTrailContext.Provider value={titled ? TITLED : UNTITLED}>\n          {breadcrumbs}\n        </PageHeaderTrailContext.Provider>\n      )}\n      {/* With a second group, `inline` wraps so that group's full-width basis puts it\n          on a row of its own on a phone (`stacked` is a column there already, and a\n          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping\n          and the order utilities seat it between the title and the actions. Without\n          one, nothing changes. */}\n      <div\n        className={cn(\n          \"flex min-w-0\",\n          ROW[mobileLayout],\n          keepsWords ? \"flex-wrap\" : wrapsSecondary && \"flex-wrap sm:flex-nowrap\",\n          align,\n        )}\n      >\n        <div ref={titleRef} className={cn(\"flex-1\", keepsWords ? \"min-w-min\" : \"min-w-0\")}>\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading className={cn(truncateTitle ? \"truncate-until-large\" : \"break-words\", \"text-primary\", TITLE[size])}>\n            {title}\n          </Heading>\n          {description != null && <p className=\"mt-1 text-sm text-muted\">{description}</p>}\n        </div>\n        {actions != null && (\n          <div\n            ref={actionsRef}\n            className={cn(\n              \"flex shrink-0 flex-wrap items-center gap-2\",\n              hasSecondary && \"sm:order-2\",\n              mobileLayout === \"stacked\" && STACK_ACTIONS_AT_LARGE,\n            )}\n          >\n            {actions}\n          </div>\n        )}\n        {hasSecondary && (\n          <div\n            className={cn(\n              \"flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0\",\n              wrapsSecondary && (measuresWrap && actionsWrapped ? \"sm:basis-auto\" : \"basis-full sm:basis-auto\"),\n            )}\n          >\n            {secondaryActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\nimport { useDocumentTitle } from \"../hooks/use-document-title\";\nimport { PageHeaderTrailContext } from \"./page-header-context\";\n// The class strings PageHeaderSkeleton draws its outline from too (0.55).\nimport { ACTIONS, DESCRIPTION, ROOT, ROW, STACK_ACTIONS_AT_LARGE, TITLE } from \"./page-header-layout\";\n\n/**\n * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a\n * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).\n *\n * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at\n * EVERY width — budgets, rules, accounts, transactions and budget pages all write\n * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to\n * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's\n * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is\n * one: the letters are taken in order, and there is none between `sm` and `md` — an\n * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is\n * not.\n */\nexport type PageHeaderSize = \"sm\" | \"compact\" | \"md\";\n\n/**\n * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both\n * layouts are one row: title block at the start, actions at the end.\n */\nexport type PageHeaderMobileLayout = \"stacked\" | \"inline\";\n\n/**\n * Where the actions sit on the title block's height, in the one row the header is from\n * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only\n * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,\n * `center` for `inline`.\n */\nexport type PageHeaderActionsAlign = \"start\" | \"center\" | \"end\";\n\n/** Applied to the ROW, so the title block and the actions are aligned against each\n *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved\n *  nothing when the actions were the taller item — they already filled the row, and\n *  the title stayed at the top (keksdose H2, reports-page's two-line labelled\n *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where\n *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */\nconst ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {\n  stacked: { start: \"sm:items-start\", center: \"sm:items-center\", end: \"sm:items-end\" },\n  inline: { start: \"items-start\", center: \"items-center\", end: \"items-end\" },\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithRef<\"div\">, \"title\"> {\n  title: ReactNode;\n  /** A sentence under the title. */\n  description?: ReactNode;\n  /** Buttons for the page — \"New\", \"Export\". At the title's end from `sm` up; under it,\n   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. Inside a header with a title\n   *  it hides its current entry (the title names it) and is drawn only when an entry\n   *  other than home is left — `Breadcrumbs.hideCurrent` (0.49 KIT-9). */\n  breadcrumbs?: ReactNode;\n  /**\n   * The window's title (`document.title`) while the header is mounted (0.49 KIT-9),\n   * through `useDocumentTitle` and the provider's format (\"{page} · {section} · {app}\",\n   * `appName` as the app). A string is the page; an array is `[page, section]` (or\n   * `[page, section, app]`); `false` leaves the window's title alone.\n   *\n   * Default: the `title` when it is a string, and only for the page's own header\n   * (`as=\"h1\"`) — a tab's `h2` header does not rename the window.\n   */\n  documentTitle?: string | ReadonlyArray<string | null | undefined> | false;\n  /** A small uppercase line above the title — the section or the kind of record\n   *  (\"Building\", \"Settings\"). The section-label type. */\n  eyebrow?: ReactNode;\n  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a\n   *  header inside a page that already has its `h1` (a tab's own header). */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  size?: PageHeaderSize;\n  /**\n   * `stacked` (default): on a phone the actions drop under the title and wrap, so a\n   * row of three buttons never pushes the title off the screen.\n   *\n   * `inline`: the actions stay beside the title on a phone too, vertically centred on\n   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center\n   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned\n   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the\n   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is\n   * for a header whose actions are known to fit beside a phone-width title (an icon\n   * button, a month picker); a long title wraps to make room for them instead.\n   */\n  mobileLayout?: PageHeaderMobileLayout;\n  /**\n   * A second group of actions that gets its OWN full-width row under the header on a\n   * phone, and joins the actions' row from `sm` up, between the title and\n   * {@link actions}.\n   *\n   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month\n   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — \"two tidy rows\n   * instead of the old ragged justify-between overflow\" — and one row, title | toggles |\n   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and\n   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.\n   * There: `actions` is the month navigation, this is the toggles.\n   *\n   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,\n   * and the one a screen reader and the Tab key follow at every width. From `sm` up the\n   * two groups swap places visually only, which keeps the page's primary control (the\n   * month) at the row's end, where keksdose had it, and first in reading order. The\n   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:\n   * one header, one breakpoint.\n   */\n  secondaryActions?: ReactNode;\n  /**\n   * The actions' vertical alignment against the title block — see\n   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.\n   *\n   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED\n   * `CurrencySelect` as its action: a field with its label on top is taller than the\n   * title, and `stacked`'s default top alignment hangs it from the title's cap height\n   * with its control well below the title's line. `center` sets it on the title's\n   * middle, as that page's hand-written `items-center` row did. It aligns the whole row\n   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the\n   * actions box, which did nothing when the actions were the taller item (keksdose H2).\n   */\n  actionsAlign?: PageHeaderActionsAlign;\n  /**\n   * One line, cut with an ellipsis, instead of the default breaking of a long word onto\n   * as many lines as it needs.\n   *\n   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in\n   * its own truncating span so a long name gives way to the `inline` header's actions\n   * instead of pushing them. This is that span's behaviour on the heading itself; the\n   * title block is already allowed to shrink below its content, which is what lets the\n   * cut happen inside a flex row.\n   *\n   * The full title stays in the DOM as the heading's text, so a screen reader and the\n   * document outline read all of it. There is deliberately no native `title` tooltip:\n   * the kit does not use them (not on touch, not on keyboard focus, not styled).\n   *\n   * At Normal only: from Large up the title wraps (`truncate-until-large`, text size\n   * §10.17; round 0.34 T1), as nothing is cut at Large — the actions then share the row\n   * with a taller title block.\n   */\n  truncateTitle?: boolean;\n}\n\nconst TITLED = { titled: true };\nconst UNTITLED = { titled: false };\n\n/**\n * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the\n * page's actions.\n *\n * kastlan's (shared/components/display/page-header.tsx) is the model — title and\n * description on one side, actions on the other, stacked on a phone — and this adds\n * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`\n * title (a status chip beside the name), and actions that WRAP when there are more\n * than fit a phone's width, instead of running off it. No outer margin: the page's\n * own rhythm (`space-y-*`, a grid gap) places it.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  breadcrumbs,\n  eyebrow,\n  as = \"h1\",\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  secondaryActions,\n  actionsAlign,\n  truncateTitle = false,\n  documentTitle,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  useDocumentTitle(\n    documentTitle === false\n      ? []\n      : documentTitle === undefined\n        ? as === \"h1\" && typeof title === \"string\"\n          ? [title]\n          : []\n        : typeof documentTitle === \"string\"\n          ? [documentTitle]\n          : documentTitle,\n  );\n  const titled = title != null && title !== false && title !== \"\";\n  const hasSecondary = secondaryActions != null;\n  const wrapsSecondary = hasSecondary && mobileLayout === \"inline\";\n  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;\n  // keksdose H1: in `inline` the title block could shrink below its longest word, and\n  // `break-words` then split \"Monatsbudget\" into \"Monatsbudg\" / \"et\" beside the actions.\n  // Unless it truncates, the title keeps its longest word (min-content) and the ROW\n  // wraps instead: actions that do not fit go to a line of their own, as the app's old\n  // `flex-wrap` header did.\n  const keepsWords = mobileLayout === \"inline\" && !truncateTitle;\n  // keksdose, after H1: once the actions have wrapped below the title, the phone's\n  // header was THREE rows — title / actions / secondary — where the app's old header\n  // shared the second row between the month nav and the toggles (~48px of phone\n  // height). So the secondary group's full-width basis (G6b: a row of its own) is\n  // dropped exactly when the actions already sit below the title; then it joins their\n  // row if it fits, and wraps under them if not. While the actions share the title's\n  // row, nothing changes: the secondary group never climbs onto the title's row.\n  //\n  // CSS cannot see \"the previous item wrapped\", so it is measured — by a\n  // ResizeObserver, whose first callback runs on `observe`. It is stable: the\n  // secondary group comes after the actions, so its basis cannot move them. No\n  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.\n  const measuresWrap = keepsWords && hasSecondary && actions != null;\n  const titleRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWrapped, setActionsWrapped] = useState(false);\n  useLayoutEffect(() => {\n    const titleBox = titleRef.current;\n    const actionsBox = actionsRef.current;\n    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const t = titleBox.getBoundingClientRect();\n      const a = actionsBox.getBoundingClientRect();\n      // Unmeasured (display: none, no layout): keep the full-width basis.\n      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);\n    });\n    observer.observe(titleBox);\n    observer.observe(actionsBox);\n    if (titleBox.parentElement) observer.observe(titleBox.parentElement);\n    return () => observer.disconnect();\n  }, [measuresWrap]);\n  return (\n    <div {...rest} className={cn(ROOT, className)}>\n      {breadcrumbs != null && (\n        <PageHeaderTrailContext.Provider value={titled ? TITLED : UNTITLED}>\n          {breadcrumbs}\n        </PageHeaderTrailContext.Provider>\n      )}\n      {/* With a second group, `inline` wraps so that group's full-width basis puts it\n          on a row of its own on a phone (`stacked` is a column there already, and a\n          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping\n          and the order utilities seat it between the title and the actions. Without\n          one, nothing changes. */}\n      <div\n        className={cn(\n          \"flex min-w-0\",\n          ROW[mobileLayout],\n          keepsWords ? \"flex-wrap\" : wrapsSecondary && \"flex-wrap sm:flex-nowrap\",\n          align,\n        )}\n      >\n        <div ref={titleRef} className={cn(\"flex-1\", keepsWords ? \"min-w-min\" : \"min-w-0\")}>\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading className={cn(truncateTitle ? \"truncate-until-large\" : \"break-words\", \"text-primary\", TITLE[size])}>\n            {title}\n          </Heading>\n          {description != null && <p className={DESCRIPTION}>{description}</p>}\n        </div>\n        {actions != null && (\n          <div\n            ref={actionsRef}\n            className={cn(ACTIONS, hasSecondary && \"sm:order-2\", mobileLayout === \"stacked\" && STACK_ACTIONS_AT_LARGE)}\n          >\n            {actions}\n          </div>\n        )}\n        {hasSecondary && (\n          <div\n            className={cn(\n              \"flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0\",\n              wrapsSecondary && (measuresWrap && actionsWrapped ? \"sm:basis-auto\" : \"basis-full sm:basis-auto\"),\n            )}\n          >\n            {secondaryActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/popover.js

@@ -8,6 +8,7 @@ import { useFocusTrap } from "../hooks/use-focus-trap.js";
 import { lengthPx, useRemPx } from "../hooks/use-breakpoint.js";
 import { cn } from "../lib/cn.js";
 import { dirOf } from "../lib/direction.js";
+import { returnFocus } from "../lib/focus-left.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { DEFAULT_POPOVER_LABELS } from "./popover-labels.js";
 import { mergeRefs } from "../lib/refs.js";
@@ -33,9 +34,8 @@ function Popover({
   const [dir, setDir] = useState("ltr");
   const close = () => setOpen(false);
   const closeFromPanel = () => {
-    const focusInside = panelRef.current?.contains(document.activeElement) ?? false;
+    returnFocus({ opener: triggerRef.current, closing: panelRef.current });
     setOpen(false);
-    if (focusInside) triggerRef.current?.focus();
   };
   const toggle = () => {
     setDir(dirOf(triggerRef.current));
@@ -58,6 +58,11 @@ function Popover({
   const layer = useDismissLayer(open, close);
   useFocusTrap(panelRef, {
     active: open && pos !== null,
+    // Escape and an outside press give the focus back to the TRIGGER, by the trap's rule:
+    // on Safari a click does not focus the button it lands on, so what had the focus as
+    // the panel opened was the page (0.55; the date and month pickers carried their own
+    // copy of this for it).
+    opener: () => triggerRef.current,
     // The panel keeps a focus one of its own children has already taken. `FilterPopover`
     // autofocuses its text box on mount — that is what the press on "Filter" was FOR,
     // and it is a prop there precisely so the popover keeps it — and a trap that

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { anchoredInline, useAnchoredPanel, viewportSize } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_POPOVER_LABELS } from \"./popover-labels\";\n// From ../lib/refs, not field-parts (round 0.36): field-parts renders a HelpPopover for a\n// field's `help`, so importing from there would close a cycle, as it did for Tooltip.\nimport { mergeRefs } from \"../lib/refs\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Defined in ./popover-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_POPOVER_LABELS };\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  /** The panel's content. `close` shuts the panel and, when focus is in it, puts focus\n   *  on the trigger before returning — so a dialog the same handler opens gives it back\n   *  there (0.52). */\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: LabelOverride<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n  /** The PANEL, while it is open — where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10). Merged with the panel's own ref (focus trap, outside click), so\n   *  neither loses it. The trigger is the caller's own element, ref and all. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  // The `close` the children get also hands focus to the trigger, AT ONCE, when it is\n  // inside the panel. The trap restores it too, but only after the commit — and a dialog\n  // opened in the same handler records its own restore target during that commit's\n  // render: the menu item that is about to go. RowActions' \"Delete\" asks first, and the\n  // answered confirm dropped focus on <body>, mid-table (refactor audit 2026-10-30,\n  // INP-2). Escape and an outside press keep the plain close: nothing opens after them.\n  const closeFromPanel = () => {\n    const focusInside = panelRef.current?.contains(document.activeElement) ?? false;\n    setOpen(false);\n    if (focusInside) triggerRef.current?.focus();\n  };\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the glass — the\n  // root's client width, not `innerWidth`, which on a phone is the layout viewport grown\n  // by whatever overflows (live #381, Wave 2 DUP-7).\n  const remPx = useRemPx();\n  const glass = rect ? viewportSize().width : 0;\n  const panelWidth = rect ? Math.min(lengthPx(width, remPx), Math.max(0, glass - 2 * EDGE)) : 0;\n  const pos = rect\n    ? {\n        // Flipped above, the panel hangs from its bottom edge, so one shorter than its\n        // cap still meets the trigger (keksdose K1); the edge not in use is cleared.\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        left: anchoredInline(rect, panelWidth, { dir, align: \"end\", edge: EDGE, viewportWidth: glass }).left,\n      }\n    : null;\n\n  // A press in a list opened from inside — a CurrencySelect's, a combobox's, another\n  // popover's — reaches the panel through the React tree and is inside (dev#623).\n  const markInside = useOutsideClick([triggerRef, panelRef], close, open);\n  // A layer on the Escape stack while open (Wave 2, DUP-1): a list opened inside closes\n  // first, and the dialog this popover sits in only after it — the calculator on an\n  // amount field in a Modal is exactly that.\n  const layer = useDismissLayer(open, close);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one. A `preventDefault()` on Escape\n    // there keeps the popover open — the owner's claim, as on the dialogs. And as there,\n    // the handler sees Escape only while this popover is the layer on top: a tooltip or a\n    // menu open over it takes that press first (round 0.35 R2, the dialogs' rule).\n    runOwnKeyDown(e, onKeyDownProp, layer);\n    // Focus is in here, the normal case: the key is handed to the top layer and STOPPED,\n    // so it does not travel on up the React tree to a dialog around the popover.\n    takeEscape(e);\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open &&\n        pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={setPanel}\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            onPointerDownCapture={(e) => {\n              rest.onPointerDownCapture?.(e);\n              markInside(e);\n            }}\n            style={{\n              // Merged over the caller's, never replaced by it: these are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              bottom: pos.bottom,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-subtle bg-surface p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {\n              // eslint-disable-next-line react-hooks/refs -- handed to the items' handlers: it reads the trigger and the focus when an item is chosen, never while rendering\n              children(closeFromPanel)\n            }\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAgNI,mBAQM,KARN;AAhNJ,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,kBAAkB,oBAAoB;AAC/D,SAAS,eAAe,YAAY,iBAAiB,uBAAuB;AAC5E,SAAS,oBAAoB;AAC7B,SAAS,UAAU,gBAAgC;AACnD,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAwC;AACjD,SAAS,8BAA8B;AAGvC,SAAS,iBAAiB;AAmD1B,MAAM,gBAA2B;AAGjC,MAAM,OAAO;AAwCN,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,WAAW,QAAQ,MAAM,UAAU,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC;AAC9D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AAOjC,QAAM,iBAAiB,MAAM;AAC3B,UAAM,cAAc,SAAS,SAAS,SAAS,SAAS,aAAa,KAAK;AAC1E,YAAQ,KAAK;AACb,QAAI,YAAa,YAAW,SAAS,MAAM;AAAA,EAC7C;AACA,QAAM,SAAS,MAAM;AACnB,WAAO,MAAM,WAAW,OAAO,CAAC;AAChC,YAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EACnB;AAGA,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAQnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AAIvB,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,OAAO,aAAa,EAAE,QAAQ;AAC5C,QAAM,aAAa,OAAO,KAAK,IAAI,SAAS,OAAO,KAAK,GAAG,KAAK,IAAI,GAAG,QAAQ,IAAI,IAAI,CAAC,IAAI;AAC5F,QAAM,MAAM,OACR;AAAA;AAAA;AAAA,IAGE,KAAK,UAAU,QAAQ,SAAY,UAAU;AAAA,IAC7C,QAAQ,UAAU,QAAQ,UAAU,SAAS;AAAA,IAC7C,MAAM,eAAe,MAAM,YAAY,EAAE,KAAK,OAAO,OAAO,MAAM,MAAM,eAAe,MAAM,CAAC,EAAE;AAAA,EAClG,IACA;AAIJ,QAAM,aAAa,gBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AAItE,QAAM,QAAQ,gBAAgB,MAAM,KAAK;AAEzC,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAM1D,kBAAc,GAAG,eAAe,KAAK;AAGrC,eAAW,CAAC;AAAA,EACd;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QACC,OACA;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UAEL,kBAAe;AAAA,UACf,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,sBAAsB,CAAC,MAAM;AAC3B,iBAAK,uBAAuB,CAAC;AAC7B,uBAAW,CAAC;AAAA,UACd;AAAA,UACA,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,QAAQ,IAAI;AAAA,YACZ,MAAM,IAAI;AAAA,YACV,OAAO;AAAA,YACP,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA;AAAA,UAIE,mBAAS,cAAc;AAAA;AAAA,MAE3B;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { anchoredInline, useAnchoredPanel, viewportSize } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport { returnFocus } from \"../lib/focus-left\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_POPOVER_LABELS } from \"./popover-labels\";\n// From ../lib/refs, not field-parts (round 0.36): field-parts renders a HelpPopover for a\n// field's `help`, so importing from there would close a cycle, as it did for Tooltip.\nimport { mergeRefs } from \"../lib/refs\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Defined in ./popover-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_POPOVER_LABELS };\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  /** The panel's content. `close` shuts the panel and, when focus is in it, puts focus\n   *  on the trigger before returning — so a dialog the same handler opens gives it back\n   *  there (0.52). */\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: LabelOverride<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n  /** The PANEL, while it is open — where the rest of the props go (0.34, API-2, refactor\n   *  audit 2026-10). Merged with the panel's own ref (focus trap, outside click), so\n   *  neither loses it. The trigger is the caller's own element, ref and all. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ref,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  // The `close` the children get also hands focus to the trigger, AT ONCE, when it is\n  // inside the panel. The trap restores it too, but only after the commit — and a dialog\n  // opened in the same handler records its own restore target during that commit's\n  // render: the menu item that is about to go. RowActions' \"Delete\" asks first, and the\n  // answered confirm dropped focus on <body>, mid-table (refactor audit 2026-10-30,\n  // INP-2). Escape and an outside press keep the plain close: nothing opens after them.\n  // By the kit's one rule (lib/focus-left `returnFocus`; 0.52 code review 2026-10-31, held\n  // to 0.55): moved only from inside the closing panel, or from nowhere.\n  const closeFromPanel = () => {\n    returnFocus({ opener: triggerRef.current, closing: panelRef.current });\n    setOpen(false);\n  };\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the glass — the\n  // root's client width, not `innerWidth`, which on a phone is the layout viewport grown\n  // by whatever overflows (live #381, Wave 2 DUP-7).\n  const remPx = useRemPx();\n  const glass = rect ? viewportSize().width : 0;\n  const panelWidth = rect ? Math.min(lengthPx(width, remPx), Math.max(0, glass - 2 * EDGE)) : 0;\n  const pos = rect\n    ? {\n        // Flipped above, the panel hangs from its bottom edge, so one shorter than its\n        // cap still meets the trigger (keksdose K1); the edge not in use is cleared.\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        left: anchoredInline(rect, panelWidth, { dir, align: \"end\", edge: EDGE, viewportWidth: glass }).left,\n      }\n    : null;\n\n  // A press in a list opened from inside — a CurrencySelect's, a combobox's, another\n  // popover's — reaches the panel through the React tree and is inside (dev#623).\n  const markInside = useOutsideClick([triggerRef, panelRef], close, open);\n  // A layer on the Escape stack while open (Wave 2, DUP-1): a list opened inside closes\n  // first, and the dialog this popover sits in only after it — the calculator on an\n  // amount field in a Modal is exactly that.\n  const layer = useDismissLayer(open, close);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // Escape and an outside press give the focus back to the TRIGGER, by the trap's rule:\n    // on Safari a click does not focus the button it lands on, so what had the focus as\n    // the panel opened was the page (0.55; the date and month pickers carried their own\n    // copy of this for it).\n    opener: () => triggerRef.current,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one. A `preventDefault()` on Escape\n    // there keeps the popover open — the owner's claim, as on the dialogs. And as there,\n    // the handler sees Escape only while this popover is the layer on top: a tooltip or a\n    // menu open over it takes that press first (round 0.35 R2, the dialogs' rule).\n    runOwnKeyDown(e, onKeyDownProp, layer);\n    // Focus is in here, the normal case: the key is handed to the top layer and STOPPED,\n    // so it does not travel on up the React tree to a dialog around the popover.\n    takeEscape(e);\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open &&\n        pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={setPanel}\n            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n            data-kit-layer=\"\"\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            onPointerDownCapture={(e) => {\n              rest.onPointerDownCapture?.(e);\n              markInside(e);\n            }}\n            style={{\n              // Merged over the caller's, never replaced by it: these are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              bottom: pos.bottom,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-subtle bg-surface p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {\n              // eslint-disable-next-line react-hooks/refs -- handed to the items' handlers: it reads the trigger and the focus when an item is chosen, never while rendering\n              children(closeFromPanel)\n            }\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}