@eifi1/ui-kit 0.12.0 → 0.13.1

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

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

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

@@ -1,15 +1,31 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
-/** `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
- *  phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx). */
-type PageHeaderSize = "sm" | "md";
+/**
+ * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
+ * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).
+ *
+ * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at
+ * EVERY width — budgets, rules, accounts, transactions and budget pages all write
+ * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to
+ * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's
+ * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is
+ * one: the letters are taken in order, and there is none between `sm` and `md` — an
+ * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is
+ * not.
+ */
+type PageHeaderSize = "sm" | "compact" | "md";
+/**
+ * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both
+ * layouts are one row: title block at the start, actions at the end.
+ */
+type PageHeaderMobileLayout = "stacked" | "inline";
 interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
     title: ReactNode;
     /** A sentence under the title. */
     description?: ReactNode;
     /** Buttons for the page — "New", "Export". At the title's end from `sm` up; under it,
-     *  wrapping, on a phone. */
+     *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */
     actions?: ReactNode;
     /** A `Breadcrumbs` trail, drawn above everything else. */
     breadcrumbs?: ReactNode;
@@ -20,6 +36,19 @@ interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
      *  header inside a page that already has its `h1` (a tab's own header). */
     as?: "h1" | "h2" | "h3";
     size?: PageHeaderSize;
+    /**
+     * `stacked` (default): on a phone the actions drop under the title and wrap, so a
+     * row of three buttons never pushes the title off the screen.
+     *
+     * `inline`: the actions stay beside the title on a phone too, vertically centred on
+     * it — keksdose's headers (transactions-page.tsx:515, `flex items-center
+     * justify-between gap-2`), which carry one or two icon-sized controls and were tuned
+     * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the
+     * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is
+     * for a header whose actions are known to fit beside a phone-width title (an icon
+     * button, a month picker); a long title wraps to make room for them instead.
+     */
+    mobileLayout?: PageHeaderMobileLayout;
 }
 /**
  * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the
@@ -32,6 +61,6 @@ interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
  * than fit a phone's width, instead of running off it. No outer margin: the page's
  * own rhythm (`space-y-*`, a grid gap) places it.
  */
-declare function PageHeader({ title, description, actions, breadcrumbs, eyebrow, as, size, className, ...rest }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ title, description, actions, breadcrumbs, eyebrow, as, size, mobileLayout, className, ...rest }: PageHeaderProps): react.JSX.Element;
 
-export { PageHeader, type PageHeaderProps, type PageHeaderSize };
+export { PageHeader, type PageHeaderMobileLayout, type PageHeaderProps, type PageHeaderSize };

package/dist/components/page-header.js

@@ -4,8 +4,13 @@ import { cn } from "../lib/cn.js";
 import { SECTION_LABEL_CLASS } from "./text.js";
 const TITLE = {
   sm: "text-lg font-semibold",
+  compact: "text-xl font-semibold",
   md: "text-xl font-semibold tracking-tight sm:text-2xl"
 };
+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"
+};
 function PageHeader({
   title,
   description,
@@ -14,13 +19,14 @@ function PageHeader({
   eyebrow,
   as = "h1",
   size = "md",
+  mobileLayout = "stacked",
   className,
   ...rest
 }) {
   const Heading = as;
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("flex min-w-0 flex-col gap-2", className), children: [
     breadcrumbs,
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0", ROW[mobileLayout]), children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
         eyebrow != null && /* @__PURE__ */ jsx("p", { className: cn(SECTION_LABEL_CLASS.xs, "mb-1"), children: eyebrow }),
         /* @__PURE__ */ jsx(Heading, { className: cn("break-words text-[var(--text-primary)]", TITLE[size]), children: title }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\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). */\nexport type PageHeaderSize = \"sm\" | \"md\";\n\nconst TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<\"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. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. */\n  breadcrumbs?: ReactNode;\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\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  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs}\n      <div className=\"flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\">\n        <div className=\"min-w-0 flex-1\">\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading className={cn(\"break-words text-[var(--text-primary)]\", TITLE[size])}>{title}</Heading>\n          {description != null && <p className=\"mt-1 text-sm text-[var(--text-muted)]\">{description}</p>}\n        </div>\n        {actions != null && <div className=\"flex shrink-0 flex-wrap items-center gap-2\">{actions}</div>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA0DQ,SACsB,KADtB;AAzDR,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAMpC,MAAM,QAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AACN;AA+BO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU;AAChB,SACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,+BAA+B,SAAS,GAClE;AAAA;AAAA,IACD,qBAAC,SAAI,WAAU,sFACb;AAAA,2BAAC,SAAI,WAAU,kBACZ;AAAA,mBAAW,QAAQ,oBAAC,OAAE,WAAW,GAAG,oBAAoB,IAAI,MAAM,GAAI,mBAAQ;AAAA,QAC/E,oBAAC,WAAQ,WAAW,GAAG,0CAA0C,MAAM,IAAI,CAAC,GAAI,iBAAM;AAAA,QACrF,eAAe,QAAQ,oBAAC,OAAE,WAAU,yCAAyC,uBAAY;AAAA,SAC5F;AAAA,MACC,WAAW,QAAQ,oBAAC,SAAI,WAAU,8CAA8C,mBAAQ;AAAA,OAC3F;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\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\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\nexport interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<\"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. */\n  breadcrumbs?: ReactNode;\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\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  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs}\n      <div className={cn(\"flex min-w-0\", ROW[mobileLayout])}>\n        <div className=\"min-w-0 flex-1\">\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading className={cn(\"break-words text-[var(--text-primary)]\", TITLE[size])}>{title}</Heading>\n          {description != null && <p className=\"mt-1 text-sm text-[var(--text-muted)]\">{description}</p>}\n        </div>\n        {actions != null && <div className=\"flex shrink-0 flex-wrap items-center gap-2\">{actions}</div>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA+FQ,SACsB,KADtB;AA9FR,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAiBpC,MAAM,QAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAQA,MAAM,MAA8C;AAAA,EAClD,SAAS;AAAA,EACT,QAAQ;AACV;AA4CO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU;AAChB,SACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,+BAA+B,SAAS,GAClE;AAAA;AAAA,IACD,qBAAC,SAAI,WAAW,GAAG,gBAAgB,IAAI,YAAY,CAAC,GAClD;AAAA,2BAAC,SAAI,WAAU,kBACZ;AAAA,mBAAW,QAAQ,oBAAC,OAAE,WAAW,GAAG,oBAAoB,IAAI,MAAM,GAAI,mBAAQ;AAAA,QAC/E,oBAAC,WAAQ,WAAW,GAAG,0CAA0C,MAAM,IAAI,CAAC,GAAI,iBAAM;AAAA,QACrF,eAAe,QAAQ,oBAAC,OAAE,WAAU,yCAAyC,uBAAY;AAAA,SAC5F;AAAA,MACC,WAAW,QAAQ,oBAAC,SAAI,WAAU,8CAA8C,mBAAQ;AAAA,OAC3F;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/picker-sheet.js

@@ -45,6 +45,9 @@ function PickerSheet({
   };
   if (!open || typeof document === "undefined") return null;
   return createPortal(
+    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog
+       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever
+       inside it holds focus, and `onMouseDown` only stops propagation (live #328). */
     /* @__PURE__ */ jsxs(
       "div",
       {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\nimport { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * Two of the div's own attributes are omitted because this component already owns\n * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's\n * tooltip string, and `onClose` is \"the sheet was dismissed\", not the DOM's\n * `<dialog>` close event. Everything else a caller can pass reaches the sheet.\n */\nexport interface PickerSheetProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"onClose\"> {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  inputRef,\n  closeLabel,\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  style,\n  ...rest\n}: PickerSheetProps) {\n  // Every picker in the kit opens one of these on a phone, and most of them pass\n  // their own `closeLabel` through as `undefined` — so this lookup is what makes the\n  // one way out of a full-screen sheet speak the app's language without each of\n  // them having to (see the prop's note in `EntityCombobox`).\n  const labels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel });\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // A fallback ref so a caller that does not need the handle still gets the opening\n  // focus, rather than the behaviour depending on whether a prop was passed. What that\n  // focus is FOR is on the trap below.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n\n  const sheetRef = useRef<HTMLDivElement>(null);\n  /**\n   * The sheet said `aria-modal=\"true\"` and then left focus on the field behind it, so\n   * a screen reader was told to hide the page the user's cursor was still standing in\n   * (the audit's *\"Only Modal manages focus\"*). Through the shared hook rather than\n   * the bare `.focus()` that used to live here: the hook re-reads the tabbable list on\n   * every Tab, which this panel needs more than most — its list is filtered as you\n   * type, so the rows a trap captured at open time are gone by the second keystroke.\n   *\n   * **`initialFocus` is the search box**, not the container, and this is the one place\n   * in the package that overrides `Modal`'s rule. The sheet exists in order to be typed\n   * into (live #212: *\"make the text input filter active on select click\"*), and the\n   * callers cannot do it themselves — `Combobox`'s field runs\n   * `setOpen(true); sheetInputRef.current?.focus()` in a single `onFocus`, so the focus\n   * call happens while this sheet is still unmounted and the ref is null. Only the\n   * sheet knows when its own input exists. Popping the keyboard is the POINT here,\n   * where in a form dialog it is the cost.\n   *\n   * **`restoreFocus` is off**, which is the uncomfortable half. Every caller in this\n   * kit opens the sheet from the field's own `onFocus` handler, so handing focus back\n   * to that field on close re-opens the sheet the user has just dismissed — a row tap\n   * would select a value and immediately put the list back over it. The field that\n   * opened it is the only thing that knows whether re-focusing it means \"open\"; a sheet\n   * that cannot tell must not guess. The cost is that focus lands on `<body>` after a\n   * dismissal, which on the phone this shape is for costs nothing, and on a pointer\n   * device is what happened before this change too.\n   */\n  useFocusTrap(sheetRef, {\n    active: open,\n    restoreFocus: false,\n    initialFocus: () => searchRef.current,\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // The sheet is almost always the INNERMOST overlay — it opens from a field inside a\n    // `Modal` or a `FullBleedDialog`, both of which take Escape on their own panel. A\n    // React portal's events still travel up the React tree, so without stopping it here\n    // one press would dismiss this list and the dialog underneath with it: Keksdose\n    // live #309 (*\"Mouse Back does not only close the select but also the whole edit or\n    // create dialog which is cumbersome\"*), which the Back gesture already learned, on\n    // the key a desktop user reaches for instead.\n    e.stopPropagation();\n    onClose();\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      // Spread FIRST, and every attribute below it deliberately wins: `style`,\n      // `onMouseDown` and `onKeyDown` here are not styling choices, they are live\n      // #328, dev#477 and live #309 respectively, and a caller who passed one by\n      // accident would re-open a bug three apps have already paid for. `style` is\n      // MERGED rather than won outright (see below), which is the one case where a\n      // caller has something to add.\n      {...rest}\n      ref={sheetRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // Without it the container cannot take focus, and `useFocusTrap` has nothing to\n      // fall back to when the list is empty and the search box is the only thing in\n      // here — see the hook's \"nothing tabbable\" branch.\n      tabIndex={-1}\n      onKeyDown={handleKeyDown}\n      // The caller's own name wins over the heading: a sheet titled \"Account\" in a\n      // form with two of them needs to say WHICH, and `title` is what the user reads\n      // rather than what a reader announces.\n      aria-label={ariaLabel ?? (typeof title === \"string\" ? title : undefined)}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      // A caller's `style` is kept and the correction laid OVER it: the three values\n      // below are the whole of live #328, so they are not negotiable, but a z-index\n      // or a transition from outside has nothing to do with them. Without a visual\n      // viewport to correct for this is character-for-character what the caller passed.\n      style={vv ? { ...style, top: vv.top, height: vv.height, bottom: \"auto\" } : style}\n      className={cn(\"fixed inset-0 z-50 flex flex-col bg-[var(--bg-surface)] outline-none\", className)}\n    >\n      <div className=\"flex items-center gap-2 border-b border-[var(--border)] px-3 py-2\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-[var(--text-primary)]\">\n          {title}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={labels.close}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      {/* Marked as the scroller it is (`CLIPS_ATTRIBUTE`), so a Tooltip in a row —\n          `Combobox`'s `optionAdornment` — portals out under jsdom as it does in the\n          browser rather than joining the option's name (keksdose E8). */}\n      <div {...{ [CLIPS_ATTRIBUTE]: \"\" }} className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-start text-base\",\n  \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n);\n"],"mappings":";AA2NM,SACE,KADF;AA3NN,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B,oBAAoB;AA+CnD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AAKnB,QAAM,SAAS,aAAa,eAAe,6BAA6B,EAAE,OAAO,WAAW,CAAC;AAC7F,oBAAkB,IAAI;AAoBtB,oBAAkB,MAAM,OAAO;AAG/B,QAAM,KAAK,kBAAkB,IAAI;AAIjC,QAAM,SAAS,OAAgC,IAAI;AACnD,QAAM,YAAY,YAAY;AAE9B,QAAM,WAAW,OAAuB,IAAI;AA2B5C,eAAa,UAAU;AAAA,IACrB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,cAAc,MAAM,UAAU;AAAA,EAChC,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,YAAQ;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AACrD,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAOE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAW;AAAA,QAIX,UAAU;AAAA,QACV,WAAW;AAAA,QAIX,cAAY,cAAc,OAAO,UAAU,WAAW,QAAQ;AAAA,QAiB9D,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAwBtC,OAAO,KAAK,EAAE,GAAG,OAAO,KAAK,GAAG,KAAK,QAAQ,GAAG,QAAQ,QAAQ,OAAO,IAAI;AAAA,QAC3E,WAAW,GAAG,wEAAwE,SAAS;AAAA,QAE/F;AAAA,+BAAC,SAAI,WAAU,qEACb;AAAA,gCAAC,UAAK,WAAU,4EACb,iBACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO;AAAA,gBACnB,SAAS;AAAA,gBACT,WAAU;AAAA,gBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,YACxB;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,aAAa;AAAA;AAAA,UACf;AAAA,UAMA,oBAAC,SAAK,GAAG,EAAE,CAAC,eAAe,GAAG,GAAG,GAAG,WAAU,qDAC3C,UACH;AAAA;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAIO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/picker-sheet.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useVisualViewport } from \"../hooks/use-anchored-panel\";\nimport { DEFAULT_PICKER_SHEET_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * Two of the div's own attributes are omitted because this component already owns\n * the name: `title` here is the sheet's HEADING (and a ReactNode), not the browser's\n * tooltip string, and `onClose` is \"the sheet was dismissed\", not the DOM's\n * `<dialog>` close event. Everything else a caller can pass reaches the sheet.\n */\nexport interface PickerSheetProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\" | \"onClose\"> {\n  open: boolean;\n  onClose: () => void;\n  /** The field's own label — a sheet that fills the screen has to say what it is\n   *  asking for, which the anchored panel got for free by sitting under it. */\n  title?: ReactNode;\n  query: string;\n  onQueryChange: (value: string) => void;\n  searchPlaceholder?: string;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /** Default: `pickerSheet.close` from the {@link UiKitProvider}, else \"Close\". */\n  closeLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The PHONE presentation of a picker: a full-screen dialog with a search box at\n * the top and the list filling everything below it (Keksdose live #200).\n *\n * *\"Paid as full screen dialog with input. Similar to the account select that\n * already appears as full screen.\"* The account field is a native `<select>`, and\n * a phone browser renders that as a full-screen list — so the app's own pickers,\n * which are anchored dropdown panels, were the odd ones out: a 320px-tall panel\n * squeezed between the field and the keyboard, showing three or four rows of a\n * list that might have two hundred entries.\n *\n * What this fixes beyond size: the panel had to be *placed* (above/below, tracking\n * the visual viewport as the keyboard opened — see `useAnchoredPanel`), and every\n * one of those decisions is a chance to be wrong on a screen this small. A sheet\n * has no placement. It also gives the search input somewhere unambiguous to live,\n * which is the other half of the request: *\"add filler possibility to the account\n * select or even better right to the hoc the account select is derived from\"* —\n * so this lives in the shared picker, not in one form's copy of it.\n *\n * Rows are `min-h-11` (44px): the touch target the rest of the app uses. The list\n * scrolls, the header does not, and the body behind it is scroll-locked so a drag\n * that overshoots the list does not move the page underneath.\n */\nexport function PickerSheet({\n  open,\n  onClose,\n  title,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  inputRef,\n  closeLabel,\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  style,\n  ...rest\n}: PickerSheetProps) {\n  // Every picker in the kit opens one of these on a phone, and most of them pass\n  // their own `closeLabel` through as `undefined` — so this lookup is what makes the\n  // one way out of a full-screen sheet speak the app's language without each of\n  // them having to (see the prop's note in `EntityCombobox`).\n  const labels = useKitLabels(\"pickerSheet\", DEFAULT_PICKER_SHEET_LABELS, { close: closeLabel });\n  useBodyScrollLock(open);\n  /**\n   * Back closes THE SHEET, not the dialog it was opened from (Keksdose live #309:\n   * *\"Mouse Back does not only close the select but also the whole edit or create\n   * dialog which is cumbersome.\"*).\n   *\n   * The sheet is a full-screen overlay over whatever opened it, and on a phone that\n   * is almost always the row editor — which DOES push a history entry\n   * (`data-table.tsx`). So the sheet was invisible to Back: one press popped the\n   * editor's entry and took the whole dialog with it, discarding an edit in progress\n   * in order to dismiss a list.\n   *\n   * `useOverlayHistory` was built for exactly this nesting — its stack unwinds\n   * last-in-first-out, and the U-12 regression test in its own suite is written\n   * around \"a Modal and a PickerSheet inside it\". The sheet simply never called it.\n   *\n   * Nothing else has to change: the hook is a no-op while `open` is false, and it\n   * pops its own entry when the sheet closes some other way (the X, a row, the\n   * backdrop) so history does not accumulate husks.\n   */\n  useOverlayHistory(open, onClose);\n  // The visible region, while the sheet is up — see the `style` below for why a\n  // full-screen sheet cannot simply be `inset-0` on a phone (live #328).\n  const vv = useVisualViewport(open);\n  // A fallback ref so a caller that does not need the handle still gets the opening\n  // focus, rather than the behaviour depending on whether a prop was passed. What that\n  // focus is FOR is on the trap below.\n  const ownRef = useRef<HTMLInputElement | null>(null);\n  const searchRef = inputRef ?? ownRef;\n\n  const sheetRef = useRef<HTMLDivElement>(null);\n  /**\n   * The sheet said `aria-modal=\"true\"` and then left focus on the field behind it, so\n   * a screen reader was told to hide the page the user's cursor was still standing in\n   * (the audit's *\"Only Modal manages focus\"*). Through the shared hook rather than\n   * the bare `.focus()` that used to live here: the hook re-reads the tabbable list on\n   * every Tab, which this panel needs more than most — its list is filtered as you\n   * type, so the rows a trap captured at open time are gone by the second keystroke.\n   *\n   * **`initialFocus` is the search box**, not the container, and this is the one place\n   * in the package that overrides `Modal`'s rule. The sheet exists in order to be typed\n   * into (live #212: *\"make the text input filter active on select click\"*), and the\n   * callers cannot do it themselves — `Combobox`'s field runs\n   * `setOpen(true); sheetInputRef.current?.focus()` in a single `onFocus`, so the focus\n   * call happens while this sheet is still unmounted and the ref is null. Only the\n   * sheet knows when its own input exists. Popping the keyboard is the POINT here,\n   * where in a form dialog it is the cost.\n   *\n   * **`restoreFocus` is off**, which is the uncomfortable half. Every caller in this\n   * kit opens the sheet from the field's own `onFocus` handler, so handing focus back\n   * to that field on close re-opens the sheet the user has just dismissed — a row tap\n   * would select a value and immediately put the list back over it. The field that\n   * opened it is the only thing that knows whether re-focusing it means \"open\"; a sheet\n   * that cannot tell must not guess. The cost is that focus lands on `<body>` after a\n   * dismissal, which on the phone this shape is for costs nothing, and on a pointer\n   * device is what happened before this change too.\n   */\n  useFocusTrap(sheetRef, {\n    active: open,\n    restoreFocus: false,\n    initialFocus: () => searchRef.current,\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // The sheet is almost always the INNERMOST overlay — it opens from a field inside a\n    // `Modal` or a `FullBleedDialog`, both of which take Escape on their own panel. A\n    // React portal's events still travel up the React tree, so without stopping it here\n    // one press would dismiss this list and the dialog underneath with it: Keksdose\n    // live #309 (*\"Mouse Back does not only close the select but also the whole edit or\n    // create dialog which is cumbersome\"*), which the Back gesture already learned, on\n    // the key a desktop user reaches for instead.\n    e.stopPropagation();\n    onClose();\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and `onMouseDown` only stops propagation (live #328). */\n    <div\n      // Spread FIRST, and every attribute below it deliberately wins: `style`,\n      // `onMouseDown` and `onKeyDown` here are not styling choices, they are live\n      // #328, dev#477 and live #309 respectively, and a caller who passed one by\n      // accident would re-open a bug three apps have already paid for. `style` is\n      // MERGED rather than won outright (see below), which is the one case where a\n      // caller has something to add.\n      {...rest}\n      ref={sheetRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // Without it the container cannot take focus, and `useFocusTrap` has nothing to\n      // fall back to when the list is empty and the search box is the only thing in\n      // here — see the hook's \"nothing tabbable\" branch.\n      tabIndex={-1}\n      onKeyDown={handleKeyDown}\n      // The caller's own name wins over the heading: a sheet titled \"Account\" in a\n      // form with two of them needs to say WHICH, and `title` is what the user reads\n      // rather than what a reader announces.\n      aria-label={ariaLabel ?? (typeof title === \"string\" ? title : undefined)}\n      // The sheet is PORTALLED to <body>, so it is not inside the field's own\n      // wrapper — and `useDropdown` closes on any document mousedown landing\n      // outside that wrapper. Tapping a row therefore unmounted the row (open →\n      // false) before its CLICK could fire, so the tap selected nothing at all and\n      // the sheet just vanished (Keksdose dev#477).\n      //\n      // It bit whichever sheet commits on `onClick` — the payee field's, since live\n      // #200, where it hid behind the free-text value the search box was already\n      // setting; and the account field's the moment dev#477 moved it onto the inline\n      // picker. `ComboboxPanel`'s rows happen to commit on `onMouseDown`, so they\n      // beat the document listener and were never affected — which is luck, not a\n      // design, and exactly why the fix belongs to the sheet.\n      //\n      // Stopping the mousedown here rather than teaching every caller about the\n      // portal: the sheet is modal and full-screen, so \"a click in here is not an\n      // outside click\" is a property of the sheet, not of whoever opened it.\n      onMouseDown={(e) => e.stopPropagation()}\n      // ⚠️ `inset-0` was the whole of Keksdose live #328: *\"When the keyboard overlays\n      // the entries I cannot scroll past them … to see also the last entries. Happens\n      // when browsing the account select.\"*\n      //\n      // This sheet FOCUSES ITS OWN SEARCH BOX on open (see above), so the keyboard is\n      // up every single time it is used on a phone. On Android that shrinks the visual\n      // viewport and leaves the LAYOUT viewport alone — `inset-0` is the layout\n      // viewport — so the sheet kept its full height with its bottom third behind the\n      // keyboard. The list below is `flex-1 overflow-y-auto`, so it sized itself to\n      // that hidden height too: it scrolled to ITS end while the last rows were still\n      // under the keys, and no gesture could bring them out. Nothing was clipped and\n      // nothing looked broken, which is why it reads as \"I cannot scroll past them\".\n      //\n      // `visualViewport` is the API that answers rather than hints (the live #292\n      // lesson): it reports the region actually on screen, keyboard and pinch-pan\n      // included, and it fires on the keyboard opening and closing. Pinned to that box,\n      // the sheet ends where the keys begin and the list's own scroll covers the rest.\n      // `useVisualViewport` returns null when there is nothing to correct, and then\n      // this is character-for-character the sheet that was here before.\n      // A caller's `style` is kept and the correction laid OVER it: the three values\n      // below are the whole of live #328, so they are not negotiable, but a z-index\n      // or a transition from outside has nothing to do with them. Without a visual\n      // viewport to correct for this is character-for-character what the caller passed.\n      style={vv ? { ...style, top: vv.top, height: vv.height, bottom: \"auto\" } : style}\n      className={cn(\"fixed inset-0 z-50 flex flex-col bg-[var(--bg-surface)] outline-none\", className)}\n    >\n      <div className=\"flex items-center gap-2 border-b border-[var(--border)] px-3 py-2\">\n        <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-[var(--text-primary)]\">\n          {title}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={labels.close}\n          onClick={onClose}\n          className=\"rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]\"\n        >\n          <X className=\"size-5\" />\n        </button>\n      </div>\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={onQueryChange}\n        inputRef={searchRef}\n        placeholder={searchPlaceholder}\n      />\n      {/* min-h-0 so the LIST scrolls rather than the dialog growing past the\n          viewport — a flex child defaults to min-height:auto. */}\n      {/* Marked as the scroller it is (`CLIPS_ATTRIBUTE`), so a Tooltip in a row —\n          `Combobox`'s `optionAdornment` — portals out under jsdom as it does in the\n          browser rather than joining the option's name (keksdose E8). */}\n      <div {...{ [CLIPS_ATTRIBUTE]: \"\" }} className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\">\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n\n/** A row inside a {@link PickerSheet} — the phone-sized version of a dropdown row,\n *  so a list is comfortable to hit with a thumb rather than merely legible. */\nexport const SHEET_ROW_CLASS = cn(\n  \"flex min-h-11 w-full items-center gap-2 px-4 py-2 text-start text-base\",\n  \"text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\",\n);\n"],"mappings":";AA8NM,SACE,KADF;AA9NN,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B,oBAAoB;AA+CnD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AAKnB,QAAM,SAAS,aAAa,eAAe,6BAA6B,EAAE,OAAO,WAAW,CAAC;AAC7F,oBAAkB,IAAI;AAoBtB,oBAAkB,MAAM,OAAO;AAG/B,QAAM,KAAK,kBAAkB,IAAI;AAIjC,QAAM,SAAS,OAAgC,IAAI;AACnD,QAAM,YAAY,YAAY;AAE9B,QAAM,WAAW,OAAuB,IAAI;AA2B5C,eAAa,UAAU;AAAA,IACrB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,cAAc,MAAM,UAAU;AAAA,EAChC,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,YAAQ;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AACrD,SAAO;AAAA;AAAA;AAAA;AAAA,IAIL;AAAA,MAAC;AAAA;AAAA,QAOE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAW;AAAA,QAIX,UAAU;AAAA,QACV,WAAW;AAAA,QAIX,cAAY,cAAc,OAAO,UAAU,WAAW,QAAQ;AAAA,QAiB9D,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAwBtC,OAAO,KAAK,EAAE,GAAG,OAAO,KAAK,GAAG,KAAK,QAAQ,GAAG,QAAQ,QAAQ,OAAO,IAAI;AAAA,QAC3E,WAAW,GAAG,wEAAwE,SAAS;AAAA,QAE/F;AAAA,+BAAC,SAAI,WAAU,qEACb;AAAA,gCAAC,UAAK,WAAU,4EACb,iBACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO;AAAA,gBACnB,SAAS;AAAA,gBACT,WAAU;AAAA,gBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,YACxB;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,aAAa;AAAA;AAAA,UACf;AAAA,UAMA,oBAAC,SAAK,GAAG,EAAE,CAAC,eAAe,GAAG,GAAG,GAAG,WAAU,qDAC3C,UACH;AAAA;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAIO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AACF;","names":[]}

package/dist/components/popover.js

@@ -68,6 +68,9 @@ function Popover({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     trigger({ open, toggle, ref: triggerRef }),
     open && pos && createPortal(
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the
+         dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for
+         whatever inside it holds focus. */
       /* @__PURE__ */ jsx(
         "div",
         {

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\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// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\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  children: (close: () => void) => ReactNode;\n  width?: number;\n  labels?: Partial<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}\n\nconst POPOVER_WIDTH = 288;\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  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\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  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  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(\n          Math.max(8, dir === \"rtl\" ? rect.left : rect.right - width),\n          window.innerWidth - width - 8,\n        ),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\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    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\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={panelRef}\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            style={{\n              // Merged over the caller's, never replaced by it: these four 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              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAuKI,mBAIM,KAJN;AAvKJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AACT;AAwBA,MAAM,gBAAgB;AAwCf,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,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;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK;AAAA,MACT,KAAK,IAAI,GAAG,QAAQ,QAAQ,KAAK,OAAO,KAAK,QAAQ,KAAK;AAAA,MAC1D,OAAO,aAAa,QAAQ;AAAA,IAC9B;AAAA,EACF,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,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;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\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// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\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  children: (close: () => void) => ReactNode;\n  width?: number;\n  labels?: Partial<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}\n\nconst POPOVER_WIDTH = 288;\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  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\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  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  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(\n          Math.max(8, dir === \"rtl\" ? rect.left : rect.right - width),\n          window.innerWidth - width - 8,\n        ),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\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    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && 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={panelRef}\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            style={{\n              // Merged over the caller's, never replaced by it: these four 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              left: pos.left,\n              width,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAuKI,mBAOM,KAPN;AAvKJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AACT;AAwBA,MAAM,gBAAgB;AAwCf,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,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;AACvB,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK;AAAA,MACT,KAAK,IAAI,GAAG,QAAQ,QAAQ,KAAK,OAAO,KAAK,QAAQ,KAAK;AAAA,MAC1D,OAAO,aAAa,QAAQ;AAAA,IAC9B;AAAA,EACF,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,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;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV;AAAA,YACA,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}

package/dist/components/settings-fields.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { aH as SelectProps } from '../kit-labels-v3biUF1L.js';
+import { aJ as SelectProps } from '../kit-labels-Mz8zZHIF.js';
 import { ThemePreference } from '../theme/theme-store.js';
 import './data-table-labels.js';
 import './mini-calendar.js';

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

@@ -101,7 +101,8 @@ interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"s
     goodDirection?: GoodDirection;
     /** What it is measured against, after it: "vs last month". */
     label?: ReactNode;
-    /** Hide the arrow (shown by default, as on a StatTile). */
+    /** Hide the arrow (shown by default, as on a StatTile). At zero the arrow is a flat
+     *  dash BESIDE the figure ("– 0.00 %"), never in place of it. */
     arrow?: boolean;
     sensitive?: boolean;
     /** The `statTile` namespace's direction words — a delta says the same as a tile's. */

package/dist/components/signed-amount.js

@@ -134,7 +134,7 @@ function Delta({
       children: [
         /* @__PURE__ */ jsxs("span", { "data-private": sensitive ? "" : void 0, className: cn("inline-flex items-center gap-0.5 font-medium", tone), children: [
           arrow && /* @__PURE__ */ jsx(Icon, { className: "size-[1em] shrink-0", "aria-hidden": true }),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: dir === "flat" && arrow ? null : amount }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
         ] }),
         label != null && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: label })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/signed-amount.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatMoney, formatNumber, formatPercent } from \"../lib/format\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile\";\nimport type { StatTileLabels } from \"./stat-tile\";\n\n/**\n * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class\n * any span can take.\n *\n *  - `default` — the primary text colour. `muted` — the secondary, quiet one.\n *  - `income` / `expense` / `net` — the money trio (CVD-safe teal / amber / violet).\n *  - `success` / `warning` / `danger` / `info` — a verdict: a rent rise is the tenant's\n *    bad news (kastlan lease-columns), a vote \"for\" is green (meeting-agenda-tab).\n *  - `brand` — the app's accent.\n *\n * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.\n */\nexport type TextTone =\n  | \"default\"\n  | \"muted\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TEXT_TONE: Record<TextTone, string> = {\n  default: \"text-[var(--text-primary)]\",\n  muted: \"text-[var(--text-muted)]\",\n  brand: \"text-[var(--brand)]\",\n  income: \"text-[var(--money-income)]\",\n  expense: \"text-[var(--money-expense)]\",\n  net: \"text-[var(--money-net)]\",\n  success: \"text-[var(--success)]\",\n  warning: \"text-[var(--warning)]\",\n  danger: \"text-[var(--danger)]\",\n  info: \"text-[var(--info)]\",\n};\n\n/**\n * The class that colours text in `tone` — for the spans kastlan colours by hand with\n * `text-[var(--danger)]` / `text-emerald-600` (settlement-table, changelog-page,\n * meeting-agenda-tab), so the palette they draw from is the kit's tokens.\n */\nexport function toneTextClass(tone: TextTone): string {\n  return TEXT_TONE[tone];\n}\n\nexport interface ToneProps extends ComponentPropsWithoutRef<\"span\"> {\n  tone: TextTone;\n}\n\n/** A `<span>` in a {@link TextTone} — `<Tone tone=\"success\">{votesFor}</Tone>`. */\nexport function Tone({ tone, className, ...rest }: ToneProps) {\n  return <span {...rest} className={cn(TEXT_TONE[tone], className)} />;\n}\n\n/* ── Signed amounts ──────────────────────────────────────────────────────── */\n\n/** Which way is +1: `up` for a figure where more is good news (income, savings),\n *  `down` where less is (a rent the tenant pays, a cost). */\nexport type GoodDirection = \"up\" | \"down\";\n\n/**\n * How a signed figure is coloured:\n *  - `signed` (default) — money read by its own sign: above zero `income`, below zero\n *    `expense`, zero muted. A balance, a net.\n *  - `income` / `expense` / `neutral` — one colour whatever the sign (`neutral` is the\n *    text's own colour).\n *  - `verdict` — the change judged by {@link SignedAmountProps.goodDirection}: good\n *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.\n */\nexport type SignedAmountTone = \"signed\" | \"income\" | \"expense\" | \"neutral\" | \"verdict\";\n\n/** What a signed figure says to a screen reader, whose readers disagree about a\n *  leading \"+\" (most skip it) and a \"−\" (some read \"dash\", some nothing). */\nexport interface SignedAmountLabels {\n  /** A figure above zero. `amount` is formatted and unsigned. */\n  positive: (amount: string) => string;\n  /** A figure below zero. `amount` is formatted and unsigned. */\n  negative: (amount: string) => string;\n}\n\nexport const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels = {\n  positive: (amount) => `plus ${amount}`,\n  negative: (amount) => `minus ${amount}`,\n};\n\ninterface SignedFormatProps {\n  /** ISO 4217 code: format as money. */\n  currency?: string;\n  /** `\"percent\"` reads `value` as a RATIO (`0.12` → 12 %), as `StatTile`'s delta does. */\n  unit?: \"value\" | \"percent\";\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Fraction digits, as `formatNumber`'s `digits`. */\n  digits?: number | { min?: number; max?: number };\n  /** Formats the UNSIGNED magnitude, replacing the `Intl` default outright. The sign\n   *  is the component's. */\n  format?: (magnitude: number) => string;\n  locale?: string;\n}\n\nfunction useMagnitudeFormatter({ currency, unit, compact, digits, format, locale }: SignedFormatProps) {\n  const kitLocale = useKitLocale(locale);\n  return (magnitude: number): string => {\n    if (format) return format(magnitude);\n    if (unit === \"percent\") return formatPercent(magnitude, { locale: kitLocale, compact, digits });\n    if (currency) return formatMoney(magnitude, currency, { locale: kitLocale, compact, digits });\n    return formatNumber(magnitude, { locale: kitLocale, compact, digits });\n  };\n}\n\nfunction directionOf(value: number): \"up\" | \"down\" | \"flat\" {\n  return value > 0 ? \"up\" : value < 0 ? \"down\" : \"flat\";\n}\n\nfunction signedToneClass(\n  tone: SignedAmountTone,\n  dir: \"up\" | \"down\" | \"flat\",\n  goodDirection: GoodDirection | undefined,\n): string {\n  if (tone === \"verdict\" || (goodDirection && tone === \"signed\")) {\n    if (dir === \"flat\" || !goodDirection) return TEXT_TONE.muted;\n    return dir === goodDirection ? TEXT_TONE.success : TEXT_TONE.danger;\n  }\n  if (tone === \"signed\") return dir === \"flat\" ? TEXT_TONE.muted : dir === \"up\" ? TEXT_TONE.income : TEXT_TONE.expense;\n  if (tone === \"neutral\") return \"\";\n  return TEXT_TONE[tone];\n}\n\nconst ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;\n\nexport interface SignedAmountProps\n  extends SignedFormatProps,\n    Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  value: number;\n  /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */\n  tone?: SignedAmountTone;\n  /** Which way is good news — colours by verdict (`success` / `danger`). */\n  goodDirection?: GoodDirection;\n  /** Print \"+\" before a positive figure (default `true`). A negative always shows its\n   *  minus; zero shows neither. */\n  showPlus?: boolean;\n  /** An arrow before the figure (up / down / a dash at zero) — so the direction does not\n   *  ride on colour alone. Decorative; the words say the same. */\n  arrow?: boolean;\n  /** Tag the figure `data-private`, for the host's demo-mode blur. */\n  sensitive?: boolean;\n  labels?: Partial<SignedAmountLabels>;\n}\n\n/**\n * A figure with a sign that matters: a balance, a rent change, a net.\n *\n * kastlan writes it by hand in five places — `{change > 0 ? \"+\" : \"\"}{formatCurrency(\n * change)}` in a span coloured by a ternary (lease-columns:190, settlement-table:58,\n * the tenancy `formatPct`) — and each picks its own colours for the same verdict.\n *\n * The visible figure (sign, digits, arrow) is hidden from assistive tech and spoken as\n * words instead (\"plus CHF 50.00\" / \"minus CHF 50.00\", `signedAmount.*`): a \"+\" is\n * skipped by most screen readers, and `Intl`'s \"−\" is read as \"dash\" or not at all.\n */\nexport function SignedAmount({\n  value,\n  currency,\n  unit,\n  compact,\n  digits,\n  format,\n  locale,\n  tone = \"signed\",\n  goodDirection,\n  showPlus = true,\n  arrow = false,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: SignedAmountProps) {\n  const text = useKitLabels(\"signedAmount\", DEFAULT_SIGNED_AMOUNT_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });\n  const finite = Number.isFinite(value);\n  const dir = finite ? directionOf(value) : \"flat\";\n  const amount = finite ? fmt(Math.abs(value)) : \"—\";\n  // U+2212, the typographic minus: the same width as \"+\", so a column of signed figures\n  // lines up under `tabular-nums`.\n  const sign = dir === \"up\" ? (showPlus ? \"+\" : \"\") : dir === \"down\" ? \"−\" : \"\";\n  const spoken = dir === \"up\" ? text.positive(amount) : dir === \"down\" ? text.negative(amount) : amount;\n  const Icon = ARROW[dir];\n  return (\n    <span\n      {...rest}\n      data-private={sensitive ? \"\" : undefined}\n      data-direction={dir}\n      className={cn(\n        \"relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums\",\n        signedToneClass(tone, dir, goodDirection),\n        className,\n      )}\n    >\n      {arrow && <Icon aria-hidden className=\"size-[1em] shrink-0\" />}\n      <span aria-hidden>\n        {sign}\n        {amount}\n      </span>\n      <span className=\"sr-only\">{spoken}</span>\n    </span>\n  );\n}\n\nexport interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  /** The change. Above zero is \"up\". */\n  value: number;\n  /** Which way is good news. Unset, the change is stated and not judged (muted); set,\n   *  it is coloured `success` / `danger` and its sentence says \"(better)\" / \"(worse)\". */\n  goodDirection?: GoodDirection;\n  /** What it is measured against, after it: \"vs last month\". */\n  label?: ReactNode;\n  /** Hide the arrow (shown by default, as on a StatTile). */\n  arrow?: boolean;\n  sensitive?: boolean;\n  /** The `statTile` namespace's direction words — a delta says the same as a tile's. */\n  labels?: Partial<Pick<StatTileLabels, \"increase\" | \"decrease\" | \"unchanged\" | \"better\" | \"worse\">>;\n}\n\n/**\n * `StatTile`'s delta on its own: an arrow, the unsigned magnitude, and a sentence for\n * screen readers (\"Up 12% (worse)\"), coloured only when `goodDirection` judges it —\n * users up and cost up are the same arrow until someone says which is good.\n *\n * For a change shown outside a tile: kastlan's rent-change column\n * (lease-columns:219, a \"+1.25%\" chip), the breakdown rows of the rent calculator\n * (breakdown-row:5, a trend icon coloured by hand).\n */\nexport function Delta({\n  value,\n  currency,\n  unit,\n  compact,\n  digits,\n  format,\n  locale,\n  goodDirection,\n  label,\n  arrow = true,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: DeltaProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });\n  if (!Number.isFinite(value)) return null;\n  const amount = fmt(Math.abs(value));\n  const dir = directionOf(value);\n  const Icon = ARROW[dir];\n  let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n  let tone = TEXT_TONE.muted;\n  if (goodDirection && dir !== \"flat\") {\n    const good = dir === goodDirection;\n    spoken = good ? text.better(spoken) : text.worse(spoken);\n    tone = good ? TEXT_TONE.success : TEXT_TONE.danger;\n  }\n  return (\n    <span\n      {...rest}\n      data-direction={dir}\n      className={cn(\"relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums\", className)}\n    >\n      <span data-private={sensitive ? \"\" : undefined} className={cn(\"inline-flex items-center gap-0.5 font-medium\", tone)}>\n        {arrow && <Icon className=\"size-[1em] shrink-0\" aria-hidden />}\n        {/* Flat with an arrow is the dash alone, as on a tile; without one, the zero. */}\n        <span aria-hidden>{dir === \"flat\" && arrow ? null : amount}</span>\n        <span className=\"sr-only\">{spoken}</span>\n      </span>\n      {label != null && <span className=\"text-[var(--text-muted)]\">{label}</span>}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/signed-amount.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ArrowDown, ArrowUp, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatMoney, formatNumber, formatPercent } from \"../lib/format\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { DEFAULT_STAT_TILE_LABELS } from \"./stat-tile\";\nimport type { StatTileLabels } from \"./stat-tile\";\n\n/**\n * The text colours a figure can carry, token-backed — `StatTile`'s tones, as a class\n * any span can take.\n *\n *  - `default` — the primary text colour. `muted` — the secondary, quiet one.\n *  - `income` / `expense` / `net` — the money trio (CVD-safe teal / amber / violet).\n *  - `success` / `warning` / `danger` / `info` — a verdict: a rent rise is the tenant's\n *    bad news (kastlan lease-columns), a vote \"for\" is green (meeting-agenda-tab).\n *  - `brand` — the app's accent.\n *\n * Colour is never the only carrier: pair a verdict with an arrow, a word, or a sign.\n */\nexport type TextTone =\n  | \"default\"\n  | \"muted\"\n  | \"brand\"\n  | \"income\"\n  | \"expense\"\n  | \"net\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\";\n\nconst TEXT_TONE: Record<TextTone, string> = {\n  default: \"text-[var(--text-primary)]\",\n  muted: \"text-[var(--text-muted)]\",\n  brand: \"text-[var(--brand)]\",\n  income: \"text-[var(--money-income)]\",\n  expense: \"text-[var(--money-expense)]\",\n  net: \"text-[var(--money-net)]\",\n  success: \"text-[var(--success)]\",\n  warning: \"text-[var(--warning)]\",\n  danger: \"text-[var(--danger)]\",\n  info: \"text-[var(--info)]\",\n};\n\n/**\n * The class that colours text in `tone` — for the spans kastlan colours by hand with\n * `text-[var(--danger)]` / `text-emerald-600` (settlement-table, changelog-page,\n * meeting-agenda-tab), so the palette they draw from is the kit's tokens.\n */\nexport function toneTextClass(tone: TextTone): string {\n  return TEXT_TONE[tone];\n}\n\nexport interface ToneProps extends ComponentPropsWithoutRef<\"span\"> {\n  tone: TextTone;\n}\n\n/** A `<span>` in a {@link TextTone} — `<Tone tone=\"success\">{votesFor}</Tone>`. */\nexport function Tone({ tone, className, ...rest }: ToneProps) {\n  return <span {...rest} className={cn(TEXT_TONE[tone], className)} />;\n}\n\n/* ── Signed amounts ──────────────────────────────────────────────────────── */\n\n/** Which way is +1: `up` for a figure where more is good news (income, savings),\n *  `down` where less is (a rent the tenant pays, a cost). */\nexport type GoodDirection = \"up\" | \"down\";\n\n/**\n * How a signed figure is coloured:\n *  - `signed` (default) — money read by its own sign: above zero `income`, below zero\n *    `expense`, zero muted. A balance, a net.\n *  - `income` / `expense` / `neutral` — one colour whatever the sign (`neutral` is the\n *    text's own colour).\n *  - `verdict` — the change judged by {@link SignedAmountProps.goodDirection}: good\n *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.\n */\nexport type SignedAmountTone = \"signed\" | \"income\" | \"expense\" | \"neutral\" | \"verdict\";\n\n/** What a signed figure says to a screen reader, whose readers disagree about a\n *  leading \"+\" (most skip it) and a \"−\" (some read \"dash\", some nothing). */\nexport interface SignedAmountLabels {\n  /** A figure above zero. `amount` is formatted and unsigned. */\n  positive: (amount: string) => string;\n  /** A figure below zero. `amount` is formatted and unsigned. */\n  negative: (amount: string) => string;\n}\n\nexport const DEFAULT_SIGNED_AMOUNT_LABELS: SignedAmountLabels = {\n  positive: (amount) => `plus ${amount}`,\n  negative: (amount) => `minus ${amount}`,\n};\n\ninterface SignedFormatProps {\n  /** ISO 4217 code: format as money. */\n  currency?: string;\n  /** `\"percent\"` reads `value` as a RATIO (`0.12` → 12 %), as `StatTile`'s delta does. */\n  unit?: \"value\" | \"percent\";\n  /** Compact notation: 12 400 → \"12K\". */\n  compact?: boolean;\n  /** Fraction digits, as `formatNumber`'s `digits`. */\n  digits?: number | { min?: number; max?: number };\n  /** Formats the UNSIGNED magnitude, replacing the `Intl` default outright. The sign\n   *  is the component's. */\n  format?: (magnitude: number) => string;\n  locale?: string;\n}\n\nfunction useMagnitudeFormatter({ currency, unit, compact, digits, format, locale }: SignedFormatProps) {\n  const kitLocale = useKitLocale(locale);\n  return (magnitude: number): string => {\n    if (format) return format(magnitude);\n    if (unit === \"percent\") return formatPercent(magnitude, { locale: kitLocale, compact, digits });\n    if (currency) return formatMoney(magnitude, currency, { locale: kitLocale, compact, digits });\n    return formatNumber(magnitude, { locale: kitLocale, compact, digits });\n  };\n}\n\nfunction directionOf(value: number): \"up\" | \"down\" | \"flat\" {\n  return value > 0 ? \"up\" : value < 0 ? \"down\" : \"flat\";\n}\n\nfunction signedToneClass(\n  tone: SignedAmountTone,\n  dir: \"up\" | \"down\" | \"flat\",\n  goodDirection: GoodDirection | undefined,\n): string {\n  if (tone === \"verdict\" || (goodDirection && tone === \"signed\")) {\n    if (dir === \"flat\" || !goodDirection) return TEXT_TONE.muted;\n    return dir === goodDirection ? TEXT_TONE.success : TEXT_TONE.danger;\n  }\n  if (tone === \"signed\") return dir === \"flat\" ? TEXT_TONE.muted : dir === \"up\" ? TEXT_TONE.income : TEXT_TONE.expense;\n  if (tone === \"neutral\") return \"\";\n  return TEXT_TONE[tone];\n}\n\nconst ARROW = { up: ArrowUp, down: ArrowDown, flat: Minus } as const;\n\nexport interface SignedAmountProps\n  extends SignedFormatProps,\n    Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  value: number;\n  /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */\n  tone?: SignedAmountTone;\n  /** Which way is good news — colours by verdict (`success` / `danger`). */\n  goodDirection?: GoodDirection;\n  /** Print \"+\" before a positive figure (default `true`). A negative always shows its\n   *  minus; zero shows neither. */\n  showPlus?: boolean;\n  /** An arrow before the figure (up / down / a dash at zero) — so the direction does not\n   *  ride on colour alone. Decorative; the words say the same. */\n  arrow?: boolean;\n  /** Tag the figure `data-private`, for the host's demo-mode blur. */\n  sensitive?: boolean;\n  labels?: Partial<SignedAmountLabels>;\n}\n\n/**\n * A figure with a sign that matters: a balance, a rent change, a net.\n *\n * kastlan writes it by hand in five places — `{change > 0 ? \"+\" : \"\"}{formatCurrency(\n * change)}` in a span coloured by a ternary (lease-columns:190, settlement-table:58,\n * the tenancy `formatPct`) — and each picks its own colours for the same verdict.\n *\n * The visible figure (sign, digits, arrow) is hidden from assistive tech and spoken as\n * words instead (\"plus CHF 50.00\" / \"minus CHF 50.00\", `signedAmount.*`): a \"+\" is\n * skipped by most screen readers, and `Intl`'s \"−\" is read as \"dash\" or not at all.\n */\nexport function SignedAmount({\n  value,\n  currency,\n  unit,\n  compact,\n  digits,\n  format,\n  locale,\n  tone = \"signed\",\n  goodDirection,\n  showPlus = true,\n  arrow = false,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: SignedAmountProps) {\n  const text = useKitLabels(\"signedAmount\", DEFAULT_SIGNED_AMOUNT_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });\n  const finite = Number.isFinite(value);\n  const dir = finite ? directionOf(value) : \"flat\";\n  const amount = finite ? fmt(Math.abs(value)) : \"—\";\n  // U+2212, the typographic minus: the same width as \"+\", so a column of signed figures\n  // lines up under `tabular-nums`.\n  const sign = dir === \"up\" ? (showPlus ? \"+\" : \"\") : dir === \"down\" ? \"−\" : \"\";\n  const spoken = dir === \"up\" ? text.positive(amount) : dir === \"down\" ? text.negative(amount) : amount;\n  const Icon = ARROW[dir];\n  return (\n    <span\n      {...rest}\n      data-private={sensitive ? \"\" : undefined}\n      data-direction={dir}\n      className={cn(\n        \"relative inline-flex items-center gap-0.5 whitespace-nowrap tabular-nums\",\n        signedToneClass(tone, dir, goodDirection),\n        className,\n      )}\n    >\n      {arrow && <Icon aria-hidden className=\"size-[1em] shrink-0\" />}\n      <span aria-hidden>\n        {sign}\n        {amount}\n      </span>\n      <span className=\"sr-only\">{spoken}</span>\n    </span>\n  );\n}\n\nexport interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  /** The change. Above zero is \"up\". */\n  value: number;\n  /** Which way is good news. Unset, the change is stated and not judged (muted); set,\n   *  it is coloured `success` / `danger` and its sentence says \"(better)\" / \"(worse)\". */\n  goodDirection?: GoodDirection;\n  /** What it is measured against, after it: \"vs last month\". */\n  label?: ReactNode;\n  /** Hide the arrow (shown by default, as on a StatTile). At zero the arrow is a flat\n   *  dash BESIDE the figure (\"– 0.00 %\"), never in place of it. */\n  arrow?: boolean;\n  sensitive?: boolean;\n  /** The `statTile` namespace's direction words — a delta says the same as a tile's. */\n  labels?: Partial<Pick<StatTileLabels, \"increase\" | \"decrease\" | \"unchanged\" | \"better\" | \"worse\">>;\n}\n\n/**\n * `StatTile`'s delta on its own: an arrow, the unsigned magnitude, and a sentence for\n * screen readers (\"Up 12% (worse)\"), coloured only when `goodDirection` judges it —\n * users up and cost up are the same arrow until someone says which is good.\n *\n * For a change shown outside a tile: kastlan's rent-change column\n * (lease-columns:219, a \"+1.25%\" chip), the breakdown rows of the rent calculator\n * (breakdown-row:5, a trend icon coloured by hand).\n */\nexport function Delta({\n  value,\n  currency,\n  unit,\n  compact,\n  digits,\n  format,\n  locale,\n  goodDirection,\n  label,\n  arrow = true,\n  sensitive = false,\n  labels,\n  className,\n  ...rest\n}: DeltaProps) {\n  const text = useKitLabels(\"statTile\", DEFAULT_STAT_TILE_LABELS, labels);\n  const fmt = useMagnitudeFormatter({ currency, unit, compact, digits, format, locale });\n  if (!Number.isFinite(value)) return null;\n  const amount = fmt(Math.abs(value));\n  const dir = directionOf(value);\n  const Icon = ARROW[dir];\n  let spoken = dir === \"up\" ? text.increase(amount) : dir === \"down\" ? text.decrease(amount) : text.unchanged;\n  let tone = TEXT_TONE.muted;\n  if (goodDirection && dir !== \"flat\") {\n    const good = dir === goodDirection;\n    spoken = good ? text.better(spoken) : text.worse(spoken);\n    tone = good ? TEXT_TONE.success : TEXT_TONE.danger;\n  }\n  return (\n    <span\n      {...rest}\n      data-direction={dir}\n      className={cn(\"relative inline-flex flex-wrap items-center gap-x-1.5 tabular-nums\", className)}\n    >\n      <span data-private={sensitive ? \"\" : undefined} className={cn(\"inline-flex items-center gap-0.5 font-medium\", tone)}>\n        {arrow && <Icon className=\"size-[1em] shrink-0\" aria-hidden />}\n        {/* The figure at zero too, beside the flat dash (kastlan feedback #48). Before\n            this a flat delta with an arrow drew the dash ALONE, as a StatTile does — so\n            a rent-change column that printed \"0.00 %\" for an unchanged lease showed a\n            bare \"–\" in its place, and a bare dash is what a table prints for a MISSING\n            value: \"unchanged\" and \"not known\" looked the same. The Minus icon is the\n            neutral indicator, the muted tone the neutral colour, and the figure says\n            how much (none) in the column's own digits. A value that is missing never\n            reaches here — a non-finite one renders nothing, above. Visible change for\n            every `<Delta value={0}>` with the default arrow: \"–\" became \"– 0 %\". */}\n        <span aria-hidden>{amount}</span>\n        <span className=\"sr-only\">{spoken}</span>\n      </span>\n      {label != null && <span className=\"text-[var(--text-muted)]\">{label}</span>}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/stat-tile.js

@@ -138,7 +138,7 @@ function StatTile({
     /* @__PURE__ */ jsxs("div", { className: "relative mt-1 flex flex-wrap items-center gap-x-1.5 text-xs tabular-nums", children: [
       /* @__PURE__ */ jsxs("span", { id: deltaId, "data-private": priv, className: cn("inline-flex items-center gap-0.5 font-medium", deltaTone), children: [
         /* @__PURE__ */ jsx(Icon, { className: "size-3 shrink-0", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: dir === "flat" ? null : amount }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: amount }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: spoken })
       ] }),
       d.label != null && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: d.label })