@eifi1/ui-kit 0.4.1 → 0.5.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { CURRENCIES, CurrencyFlag, getCurrency } from \"./currency-select\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\n\ninterface AmountInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. The package carries no translation\n   *  catalog (see the README) — English defaults, each key optional, so the other\n   *  consumer apps are unaffected. `currency` names the picker chip and is\n   *  suffixed with the selected code; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n}\n\n// The consuming app's ONE money palette (`--money-expense` / `--money-income`),\n// not a bespoke rose/emerald pairing: a figure being typed has to wear the same\n// colour the same figure will wear once it is a row in the table behind the form\n// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`\n// variant is needed and they win over the field's own text colour regardless of\n// where `cn` puts them.\nconst TONE_CLASS: Record<\"neutral\" | \"outflow\" | \"inflow\", string> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(\n  FIELD_DISPLAY,\n  \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\",\n);\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string): boolean {\n  const n = evaluateExpression(previous);\n  return n !== null && formatResult(n) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid, className, id, ariaLabel, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels }, ref) => {\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const editable = !!onCurrencyChange;\n    // On phones we suppress the OS keyboard (inputMode=\"none\" below) and show our\n    // own calculator numpad, so the desktop popover trigger is hidden. The\n    // right-padding keys off showCalc, so it tightens up automatically.\n    const isMobile = useMediaQuery(PHONE_QUERY, false);\n    const showCalc = !disabled && !isMobile;\n    const [focused, setFocused] = useState(false);\n    // On mobile, focusing the field opens the numpad bottom sheet in place of the\n    // native keyboard (feedback #334) — a full calculator keypad, not just the old\n    // operator bar. An internal ref lets the sheet's \"Done\" blur the input, which\n    // commits + closes via the existing onBlur handler.\n    const showNumpad = isMobile && !disabled && focused;\n    // Gate the display treatment on the SAME `isMobile` the numpad uses rather than\n    // on `max-md:` classes, so the two can never drift apart on the breakpoint —\n    // and so the two shapes are separate class strings instead of one string\n    // fighting itself through responsive overrides. `useMediaQuery` reads\n    // synchronously on mount, so there is no field→figure flash.\n    const asDisplay = variant === \"display\" && isMobile;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const setRefs = useCallback(\n      (el: HTMLInputElement | null) => {\n        innerRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      },\n      [ref],\n    );\n    // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n    // magnitude; the minus is glued on here and taken off again in handleText, so\n    // the two can never disagree and the caller can never double-apply it. Only in\n    // front of a bare amount: an expression being typed (\"12-30\") owns its own\n    // minus and has to survive keystroke-for-keystroke.\n    const signOwned = onNegativeChange !== undefined;\n    const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;\n    // Every route into the field — typing, the numpad sheet, the desktop\n    // calculator, the blur/Enter commit — funnels through here, so the split is\n    // written once and the four entry paths cannot drift.\n    //\n    // `previous` is the text this one REPLACES, and it is what says whether a bare\n    // figure arriving here is an answer or a magnitude. For the three paths that\n    // edit the field's own text that is simply what the field was showing; the\n    // desktop calculator keeps its expression in a popover the field never sees,\n    // so it passes it in (see `CalculatorButton`'s `onChange`).\n    const handleText = (raw: string, previous: string = shown) => {\n      const text = sanitizeLive(raw);\n      if (!signOwned) {\n        onChange(text);\n        return;\n      }\n      const { sign, rest } = splitLeadingSign(text);\n      if (sign) {\n        // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n        onNegativeChange(sign === \"-\");\n      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text)) {\n        // A calculation that just RESOLVED states its sign in both directions. The\n        // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n        // so a positive result has to move the chip too, or the field would answer\n        // that sum with \"-18\" and contradict the arithmetic it just showed.\n        //\n        // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n        // arriving on top of an expression is far more often a replacement than an\n        // answer, and reading it as an answer flips the direction of money.\n        onNegativeChange(false);\n      }\n      onChange(sign ? rest : text);\n    };\n    const commit = () => handleText(commitExpression(shown));\n    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();\n    // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so\n    // the panel needs a real trigger rect rather than a relative parent — see\n    // `DropdownPanel`'s note for what an `overflow` ancestor did to it before.\n    const chipRef = useRef<HTMLButtonElement>(null);\n\n    const selected = getCurrency(currency);\n    const filtered = useMemo(() => {\n      const q = query.trim().toLowerCase();\n      if (!q) return CURRENCIES;\n      return CURRENCIES.filter(\n        (c) =>\n          c.code.toLowerCase().includes(q) ||\n          c.name.toLowerCase().includes(q) ||\n          c.symbol.toLowerCase().includes(q),\n      );\n    }, [query]);\n\n    return (\n      <div ref={wrapperRef} className={cn(\"w-full\", className)}>\n        {/* Inner relative box holds the input + its absolutely-positioned\n            trailing controls (calculator / currency), so those stay anchored to\n            the INPUT even when the mobile math bar is rendered below (#334). */}\n        <div className=\"relative w-full\">\n        <input\n          ref={setRefs}\n          id={fieldId}\n          aria-label={ariaLabel}\n          type=\"text\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n          autoFocus={autoFocus}\n          // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n          // field keeps focus/caret. Desktop keeps the native decimal keypad.\n          inputMode={isMobile ? \"none\" : \"decimal\"}\n          autoComplete=\"off\"\n          disabled={disabled}\n          // The floating-label pattern needs a blank placeholder for its\n          // peer-placeholder-shown trick. The display shape has no floating label,\n          // so it spends the placeholder on what an empty borderless form actually\n          // needs: a zero to aim at, at full size. The caller supplies it because\n          // only the app knows the locale's decimal separator.\n          placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : placeholder}\n          value={shown}\n          onChange={(e) => handleText(e.target.value)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => {\n            commit();\n            setFocused(false);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") commit();\n          }}\n          className={cn(\n            // With a label, use the floating-input padding (pt-4 pb-1) like every\n            // other labelled field so the value sits BELOW the floated label rather\n            // than vertically centred where it overlaps the resting label\n            // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n            // transparent-placeholder bits.\n            asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n            // Room for the trailing controls. showCalc is always false on a phone,\n            // so the display shape only ever has to clear the currency chip — and\n            // it clears it by the chip's actual width (a text-sm code plus a\n            // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a\n            // 375px screen those 16px are the difference between a readable figure\n            // and a clipped one (feedback #430 rework).\n            asDisplay\n              ? currency ? (editable ? \"pr-16\" : \"pr-12\") : \"pr-0\"\n              : showCalc\n                ? currency ? (editable ? \"pr-24\" : \"pr-16\") : \"pr-10\"\n                : currency ? (editable ? \"pr-20\" : \"pr-14\") : \"pr-3\",\n            // Centred display shape: centre in what is LEFT of the currency chip.\n            // `text-center` alone would centre the figure in the whole box, i.e.\n            // partly underneath the chip; the padding above is what takes the chip\n            // out of the centring, and nothing is added on the left because a\n            // mirrored reservation would spend the width twice (see `align`).\n            asDisplay && align === \"center\" && \"text-center\",\n            // Last, so it wins over the base class's own text colour.\n            TONE_CLASS[tone],\n            invalid && FIELD_INVALID,\n          )}\n          aria-invalid={invalid || undefined}\n        />\n        {label !== undefined && (\n          // The display shape drops the label VISUALLY, not from the accessibility\n          // tree: a 36px tinted figure at the top of a transaction form is legibly\n          // the amount, but a screen reader still needs the name, and callers that\n          // pass `label` without `ariaLabel` would otherwise be left with none.\n          <label htmlFor={fieldId} className={asDisplay ? \"sr-only\" : FLOATING_LABEL_CLASS}>\n            {label}\n          </label>\n        )}\n        {/* Trailing controls share one flex track so the calculator icon and the\n            currency suffix/picker sit side by side without overlapping. */}\n        {/* The display shape has no box to inset from, so the controls align to the\n            figure's own right edge and its baseline strip (`bottom-1`, matching the\n            input's pb-1) instead of floating inside a field. */}\n        <div\n          className={cn(\n            \"absolute flex items-center gap-0.5\",\n            asDisplay ? \"bottom-1 right-0\" : \"inset-y-1 right-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              value={shown}\n              onChange={handleText}\n              className=\"px-1.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {currency && !editable && (\n            <span\n              aria-hidden\n              className={cn(\n                \"pointer-events-none px-1 font-medium text-slate-500 dark:text-slate-400\",\n                // A text-xs chip next to a 36px figure reads as a stray footnote.\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n            </span>\n          )}\n          {currency && editable && (\n            <button\n              ref={chipRef}\n              type=\"button\"\n              onClick={() => setOpen((v) => !v)}\n              aria-label={\n                selected ? `${labels?.currency ?? \"Currency\"}: ${selected.code}` : (labels?.currency ?? \"Currency\")\n              }\n              className={cn(\n                \"flex items-center gap-1 rounded px-2 py-1 font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800\",\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n              <ChevronDown className=\"size-3\" />\n            </button>\n          )}\n        </div>\n        {editable && open && (\n          <DropdownPanel\n            anchorRef={chipRef}\n            panelRef={panelRef}\n            empty={filtered.length === 0}\n            header={\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={labels?.currencySearch ?? \"Search currency\"}\n              />\n            }\n          >\n            {filtered.map((c) => {\n                const active = c.code === selected?.code;\n                return (\n                  <li key={c.code}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        onCurrencyChange?.(c.code);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        \"flex w-full items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-slate-50 dark:hover:bg-slate-800\",\n                        active && \"bg-slate-100 dark:bg-slate-800\",\n                      )}\n                    >\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-slate-500 dark:text-slate-400 w-8 shrink-0 text-xs\">\n                        {c.symbol}\n                      </span>\n                      <span className=\"font-medium text-slate-900 dark:text-slate-100\">{c.code}</span>\n                      <span className=\"text-slate-500 dark:text-slate-400 truncate text-xs\">{c.name}</span>\n                    </button>\n                  </li>\n                );\n              })}\n          </DropdownPanel>\n        )}\n        </div>\n        {showNumpad && (\n          <NumberPadSheet\n            value={shown}\n            onChange={handleText}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAmountInput.displayName = \"AmountInput\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from \"./currency-select\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type CurrencyLabels,\n} from \"../i18n/kit-labels\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\n\ninterface AmountInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. Each key optional, and each a per-field\n   *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`\n   *  and `currencySearch` of its `currency` namespace, the rest of `calculator`.\n   *  `currency` names the picker chip, composed with the selected code through\n   *  `common.fieldValue`; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Translated currency names for the chip's picker, keyed by ISO code. The same\n   *  sparse override `CurrencySelect` takes, and for the same reason: the names in\n   *  `CURRENCIES` are shipped data, so without this they are the one English word\n   *  left in a translated row. Not part of `labels` because it is keyed by DATA\n   *  rather than by a fixed set of slots, and an app passes the same map to both\n   *  pickers. */\n  currencyNames?: Record<string, string>;\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n}\n\n// The consuming app's ONE money palette (`--money-expense` / `--money-income`),\n// not a bespoke rose/emerald pairing: a figure being typed has to wear the same\n// colour the same figure will wear once it is a row in the table behind the form\n// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`\n// variant is needed and they win over the field's own text colour regardless of\n// where `cn` puts them.\nconst TONE_CLASS: Record<\"neutral\" | \"outflow\" | \"inflow\", string> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(\n  FIELD_DISPLAY,\n  \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\",\n);\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string): boolean {\n  const n = evaluateExpression(previous);\n  return n !== null && formatResult(n) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid, className, id, ariaLabel, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels, currencyNames }, ref) => {\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const editable = !!onCurrencyChange;\n    // On phones we suppress the OS keyboard (inputMode=\"none\" below) and show our\n    // own calculator numpad, so the desktop popover trigger is hidden. The\n    // right-padding keys off showCalc, so it tightens up automatically.\n    const isMobile = useMediaQuery(PHONE_QUERY, false);\n    const showCalc = !disabled && !isMobile;\n    const [focused, setFocused] = useState(false);\n    // On mobile, focusing the field opens the numpad bottom sheet in place of the\n    // native keyboard (feedback #334) — a full calculator keypad, not just the old\n    // operator bar. An internal ref lets the sheet's \"Done\" blur the input, which\n    // commits + closes via the existing onBlur handler.\n    const showNumpad = isMobile && !disabled && focused;\n    // Gate the display treatment on the SAME `isMobile` the numpad uses rather than\n    // on `max-md:` classes, so the two can never drift apart on the breakpoint —\n    // and so the two shapes are separate class strings instead of one string\n    // fighting itself through responsive overrides. `useMediaQuery` reads\n    // synchronously on mount, so there is no field→figure flash.\n    const asDisplay = variant === \"display\" && isMobile;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const setRefs = useCallback(\n      (el: HTMLInputElement | null) => {\n        innerRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      },\n      [ref],\n    );\n    // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n    // magnitude; the minus is glued on here and taken off again in handleText, so\n    // the two can never disagree and the caller can never double-apply it. Only in\n    // front of a bare amount: an expression being typed (\"12-30\") owns its own\n    // minus and has to survive keystroke-for-keystroke.\n    const signOwned = onNegativeChange !== undefined;\n    const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;\n    // Every route into the field — typing, the numpad sheet, the desktop\n    // calculator, the blur/Enter commit — funnels through here, so the split is\n    // written once and the four entry paths cannot drift.\n    //\n    // `previous` is the text this one REPLACES, and it is what says whether a bare\n    // figure arriving here is an answer or a magnitude. For the three paths that\n    // edit the field's own text that is simply what the field was showing; the\n    // desktop calculator keeps its expression in a popover the field never sees,\n    // so it passes it in (see `CalculatorButton`'s `onChange`).\n    const handleText = (raw: string, previous: string = shown) => {\n      const text = sanitizeLive(raw);\n      if (!signOwned) {\n        onChange(text);\n        return;\n      }\n      const { sign, rest } = splitLeadingSign(text);\n      if (sign) {\n        // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n        onNegativeChange(sign === \"-\");\n      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text)) {\n        // A calculation that just RESOLVED states its sign in both directions. The\n        // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n        // so a positive result has to move the chip too, or the field would answer\n        // that sum with \"-18\" and contradict the arithmetic it just showed.\n        //\n        // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n        // arriving on top of an expression is far more often a replacement than an\n        // answer, and reading it as an answer flips the direction of money.\n        onNegativeChange(false);\n      }\n      onChange(sign ? rest : text);\n    };\n    const commit = () => handleText(commitExpression(shown));\n    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();\n    // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so\n    // the panel needs a real trigger rect rather than a relative parent — see\n    // `DropdownPanel`'s note for what an `overflow` ancestor did to it before.\n    const chipRef = useRef<HTMLButtonElement>(null);\n\n    // The currency chip's strings are the `currency` namespace — the same two\n    // `CurrencySelect` resolves, under this component's older key names. The\n    // calculator and the numpad resolve `calculator` themselves; `labels.calculator`\n    // and `labels.pad` are handed straight through to them as overrides.\n    const currencyOverrides = useMemo(() => {\n      const out: Partial<CurrencyLabels> = {};\n      if (labels?.currency !== undefined) out.currency = labels.currency;\n      if (labels?.currencySearch !== undefined) out.search = labels.currencySearch;\n      return out;\n    }, [labels?.currency, labels?.currencySearch]);\n    const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n    const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n    const locale = useKitLocale();\n\n    const selected = getCurrency(currency);\n    const filtered = useMemo(() => {\n      const q = query.trim().toLocaleLowerCase(locale);\n      if (!q) return CURRENCIES;\n      return CURRENCIES.filter(\n        (c) =>\n          c.code.toLowerCase().includes(q) ||\n          // The name the row SHOWS, so a translated list is searchable in the\n          // language it is written in.\n          currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) ||\n          c.symbol.toLowerCase().includes(q),\n      );\n    }, [query, currencyNames, locale]);\n\n    return (\n      <div ref={wrapperRef} className={cn(\"w-full\", className)}>\n        {/* Inner relative box holds the input + its absolutely-positioned\n            trailing controls (calculator / currency), so those stay anchored to\n            the INPUT even when the mobile math bar is rendered below (#334). */}\n        <div className=\"relative w-full\">\n        <input\n          ref={setRefs}\n          id={fieldId}\n          aria-label={ariaLabel}\n          type=\"text\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n          autoFocus={autoFocus}\n          // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n          // field keeps focus/caret. Desktop keeps the native decimal keypad.\n          inputMode={isMobile ? \"none\" : \"decimal\"}\n          autoComplete=\"off\"\n          disabled={disabled}\n          // The floating-label pattern needs a blank placeholder for its\n          // peer-placeholder-shown trick. The display shape has no floating label,\n          // so it spends the placeholder on what an empty borderless form actually\n          // needs: a zero to aim at, at full size. The caller supplies it because\n          // only the app knows the locale's decimal separator.\n          placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : placeholder}\n          value={shown}\n          onChange={(e) => handleText(e.target.value)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => {\n            commit();\n            setFocused(false);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") commit();\n          }}\n          className={cn(\n            // With a label, use the floating-input padding (pt-4 pb-1) like every\n            // other labelled field so the value sits BELOW the floated label rather\n            // than vertically centred where it overlaps the resting label\n            // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n            // transparent-placeholder bits.\n            asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n            // Room for the trailing controls. showCalc is always false on a phone,\n            // so the display shape only ever has to clear the currency chip — and\n            // it clears it by the chip's actual width (a text-sm code plus a\n            // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a\n            // 375px screen those 16px are the difference between a readable figure\n            // and a clipped one (feedback #430 rework).\n            asDisplay\n              ? currency ? (editable ? \"pr-16\" : \"pr-12\") : \"pr-0\"\n              : showCalc\n                ? currency ? (editable ? \"pr-24\" : \"pr-16\") : \"pr-10\"\n                : currency ? (editable ? \"pr-20\" : \"pr-14\") : \"pr-3\",\n            // Centred display shape: centre in what is LEFT of the currency chip.\n            // `text-center` alone would centre the figure in the whole box, i.e.\n            // partly underneath the chip; the padding above is what takes the chip\n            // out of the centring, and nothing is added on the left because a\n            // mirrored reservation would spend the width twice (see `align`).\n            asDisplay && align === \"center\" && \"text-center\",\n            // Last, so it wins over the base class's own text colour.\n            TONE_CLASS[tone],\n            invalid && FIELD_INVALID,\n          )}\n          aria-invalid={invalid || undefined}\n        />\n        {label !== undefined && (\n          // The display shape drops the label VISUALLY, not from the accessibility\n          // tree: a 36px tinted figure at the top of a transaction form is legibly\n          // the amount, but a screen reader still needs the name, and callers that\n          // pass `label` without `ariaLabel` would otherwise be left with none.\n          <label htmlFor={fieldId} className={asDisplay ? \"sr-only\" : FLOATING_LABEL_CLASS}>\n            {label}\n          </label>\n        )}\n        {/* Trailing controls share one flex track so the calculator icon and the\n            currency suffix/picker sit side by side without overlapping. */}\n        {/* The display shape has no box to inset from, so the controls align to the\n            figure's own right edge and its baseline strip (`bottom-1`, matching the\n            input's pb-1) instead of floating inside a field. */}\n        <div\n          className={cn(\n            \"absolute flex items-center gap-0.5\",\n            asDisplay ? \"bottom-1 right-0\" : \"inset-y-1 right-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              value={shown}\n              onChange={handleText}\n              className=\"px-1.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {currency && !editable && (\n            <span\n              aria-hidden\n              className={cn(\n                \"pointer-events-none px-1 font-medium text-[var(--text-muted)]\",\n                // A text-xs chip next to a 36px figure reads as a stray footnote.\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n            </span>\n          )}\n          {currency && editable && (\n            <button\n              ref={chipRef}\n              type=\"button\"\n              onClick={() => setOpen((v) => !v)}\n              aria-label={\n                // \"Currency: EUR\" through `common.fieldValue`, not a template literal:\n                // the colon-and-space is punctuation a translation has to own.\n                selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency\n              }\n              className={cn(\n                \"flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n              <ChevronDown className=\"size-3\" />\n            </button>\n          )}\n        </div>\n        {editable && open && (\n          <DropdownPanel\n            anchorRef={chipRef}\n            panelRef={panelRef}\n            empty={filtered.length === 0}\n            header={\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={currencyText.search}\n              />\n            }\n          >\n            {filtered.map((c) => {\n                const active = c.code === selected?.code;\n                return (\n                  <li key={c.code}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        onCurrencyChange?.(c.code);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        \"flex w-full items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-[var(--bg-hover)]\",\n                        active && \"bg-[var(--bg-active)]\",\n                      )}\n                    >\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs\">\n                        {c.symbol}\n                      </span>\n                      <span className=\"font-medium text-[var(--text-primary)]\">{c.code}</span>\n                      <span className=\"text-[var(--text-muted)] truncate text-xs\">{currencyName(c, currencyNames, locale)}</span>\n                    </button>\n                  </li>\n                );\n              })}\n          </DropdownPanel>\n        )}\n        </div>\n        {showNumpad && (\n          <NumberPadSheet\n            value={shown}\n            onChange={handleText}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAmountInput.displayName = \"AmountInput\";\n"],"mappings":"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","names":[]}

package/dist/components/calculator.d.ts

@@ -1,11 +1,27 @@
 import * as react from 'react';
+import { CalculatorLabels } from '../i18n/kit-labels.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
+import './ui.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
 
-/** Screen-reader names for the calculator panel's own controls. */
-interface CalculatorButtonLabels {
-    calculation?: string;
-    backspace?: string;
-    equals?: string;
-}
+/** Screen-reader names for the calculator panel's own controls — any part of the
+ *  kit's `calculator` namespace. Once three optional keys of its own; widened, not
+ *  replaced, so every object that type-checked before still does. */
+type CalculatorButtonLabels = Partial<CalculatorLabels>;
 interface CalculatorButtonProps {
     /** Current field text — seeds the keypad so the user can keep calculating
      * from what's already entered. */
@@ -25,6 +41,7 @@ interface CalculatorButtonProps {
      */
     onChange: (value: string, expression?: string) => void;
     className?: string;
+    /** The trigger's accessible name; wins over `calculator.open` from the provider. */
     ariaLabel?: string;
     /** Screen-reader names for the panel's own controls. `ariaLabel` above already
      *  covers the trigger; these three were hardcoded English inside the popover,
@@ -37,6 +54,6 @@ interface CalculatorButtonProps {
  * `relative` wrapper, positioned absolutely. The keypad seeds from the current
  * field value and writes evaluated results straight back through `onChange`.
  */
-declare function CalculatorButton({ value, onChange, className, ariaLabel, labels, }: CalculatorButtonProps): react.JSX.Element;
+declare function CalculatorButton({ value, onChange, className, ariaLabel, labels: labelsProp, }: CalculatorButtonProps): react.JSX.Element;
 
 export { CalculatorButton, type CalculatorButtonLabels };

package/dist/components/calculator.js

@@ -1,30 +1,35 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Calculator as CalculatorIcon, Delete } from "lucide-react";
 import { Popover } from "./popover.js";
 import { cn } from "../lib/cn.js";
 import { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from "../lib/calc.js";
+import {
+  DEFAULT_CALCULATOR_LABELS,
+  useKitLabels
+} from "../i18n/kit-labels.js";
 const KEYS = [
   { kind: "ins", label: "7", ins: "7" },
   { kind: "ins", label: "8", ins: "8" },
   { kind: "ins", label: "9", ins: "9" },
-  { kind: "ins", label: "\xF7", ins: "\xF7", accent: true },
+  { kind: "ins", label: "\xF7", ins: "\xF7", accent: true, name: "divide" },
   { kind: "ins", label: "4", ins: "4" },
   { kind: "ins", label: "5", ins: "5" },
   { kind: "ins", label: "6", ins: "6" },
-  { kind: "ins", label: "\xD7", ins: "\xD7", accent: true },
+  { kind: "ins", label: "\xD7", ins: "\xD7", accent: true, name: "times" },
   { kind: "ins", label: "1", ins: "1" },
   { kind: "ins", label: "2", ins: "2" },
   { kind: "ins", label: "3", ins: "3" },
-  { kind: "ins", label: "\u2212", ins: "\u2212", accent: true },
+  { kind: "ins", label: "\u2212", ins: "\u2212", accent: true, name: "minus" },
   { kind: "ins", label: "0", ins: "0" },
-  { kind: "ins", label: ".", ins: "." },
+  { kind: "ins", label: ".", ins: ".", name: "decimal" },
   { kind: "back" },
-  { kind: "ins", label: "+", ins: "+", accent: true }
+  { kind: "ins", label: "+", ins: "+", accent: true, name: "plus" }
 ];
-const KEY_BASE = "flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400";
-const KEY_DIGIT = "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700";
-const KEY_ACCENT = "bg-slate-200 text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600";
+const KEY_BASE = "flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
+const KEY_DIGIT = "bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]";
+const KEY_ACCENT = "bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]";
 function seed(initial) {
   const t = initial.trim();
   return t === "-" ? "" : t;
@@ -62,7 +67,7 @@ function CalculatorPanel({
       "input",
       {
         ref: inputRef,
-        "aria-label": labels?.calculation ?? "Calculation",
+        "aria-label": labels.calculation,
         value: text,
         inputMode: "decimal",
         onChange: (e) => apply(e.target.value),
@@ -72,17 +77,17 @@ function CalculatorPanel({
             equals();
           }
         },
-        className: "block w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-right font-mono text-sm text-slate-900 focus:border-slate-500 focus:ring-slate-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:focus:border-slate-400"
+        className: "block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "h-4 pr-1 text-right font-mono text-xs text-slate-400 dark:text-slate-500", children: result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : "" }),
+    /* @__PURE__ */ jsx("div", { className: "h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]", children: result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : "" }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-1.5", children: [
       KEYS.map(
         (key, i) => key.kind === "back" ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            "aria-label": labels?.backspace ?? "Backspace",
+            "aria-label": labels.backspace,
             onClick: () => apply(text.slice(0, -1)),
             className: cn(KEY_BASE, KEY_ACCENT),
             children: /* @__PURE__ */ jsx(Delete, { className: "size-4" })
@@ -92,6 +97,7 @@ function CalculatorPanel({
           "button",
           {
             type: "button",
+            "aria-label": key.name ? labels[key.name] : void 0,
             onClick: () => apply(text + key.ins),
             className: cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT),
             children: key.label
@@ -103,8 +109,9 @@ function CalculatorPanel({
         "button",
         {
           type: "button",
+          "aria-label": labels.clear,
           onClick: clearAll,
-          className: cn(KEY_BASE, "col-span-2 bg-slate-200 text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"),
+          className: cn(KEY_BASE, "col-span-2 bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]"),
           children: "C"
         }
       ),
@@ -112,11 +119,15 @@ function CalculatorPanel({
         "button",
         {
           type: "button",
-          "aria-label": labels?.equals ?? "Equals",
+          "aria-label": labels.equals,
           onClick: equals,
           className: cn(
             KEY_BASE,
-            "col-span-2 bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
+            // The one chip that inverts against the page. There is no hover token for
+            // an inverted fill, so the hover is the chip mixed back toward the
+            // surface — a step quieter in either theme, and still a colour, so
+            // KEY_BASE's `transition-colors` carries it.
+            "col-span-2 bg-[var(--bg-inverse)] text-[var(--text-inverse)] hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]"
           ),
           children: "="
         }
@@ -128,13 +139,19 @@ function CalculatorButton({
   value,
   onChange,
   className,
-  ariaLabel = "Open calculator",
-  labels
+  ariaLabel,
+  labels: labelsProp
 }) {
+  const fromProps = useMemo(
+    () => ariaLabel === void 0 ? labelsProp : { ...labelsProp, open: ariaLabel },
+    [ariaLabel, labelsProp]
+  );
+  const labels = useKitLabels("calculator", DEFAULT_CALCULATOR_LABELS, fromProps);
   return /* @__PURE__ */ jsx(
     Popover,
     {
       width: 224,
+      labels: { panel: labels.panel },
       trigger: ({ open, toggle, ref }) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -142,10 +159,10 @@ function CalculatorButton({
           type: "button",
           tabIndex: -1,
           onClick: toggle,
-          "aria-label": ariaLabel,
+          "aria-label": labels.open,
           "aria-expanded": open,
           className: cn(
-            "flex items-center justify-center text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
+            "flex items-center justify-center text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]",
             className
           ),
           children: /* @__PURE__ */ jsx(CalculatorIcon, { className: "size-4" })

package/dist/components/calculator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\n\n/** Screen-reader names for the calculator panel's own controls. */\nexport interface CalculatorButtonLabels {\n  calculation?: string;\n  backspace?: string;\n  equals?: string;\n}\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  ariaLabel?: string;\n  /** Screen-reader names for the panel's own controls. `ariaLabel` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. */\ntype Key =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean }\n  | { kind: \"back\" };\n\nconst KEYS: Key[] = [\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 },\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 },\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 },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true },\n];\n\nconst KEY_BASE =\n  \"flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400\";\nconst KEY_DIGIT =\n  \"bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700\";\nconst KEY_ACCENT =\n  \"bg-slate-200 text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels?: CalculatorButtonLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels?.calculation ?? \"Calculation\"}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        className=\"block w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 text-right font-mono text-sm text-slate-900 focus:border-slate-500 focus:ring-slate-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:focus:border-slate-400\"\n      />\n      <div className=\"h-4 pr-1 text-right font-mono text-xs text-slate-400 dark:text-slate-500\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels?.backspace ?? \"Backspace\"}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2 bg-slate-200 text-slate-700 hover:bg-slate-300 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600\")}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels?.equals ?? \"Equals\"}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            \"col-span-2 bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  ariaLabel = \"Open calculator\",\n  labels,\n}: CalculatorButtonProps) {\n  return (\n    <Popover\n      width={224}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={ariaLabel}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/** Screen-reader names for the calculator panel's own controls — any part of the\n *  kit's `calculator` namespace. Once three optional keys of its own; widened, not\n *  replaced, so every object that type-checked before still does. */\nexport type CalculatorButtonLabels = Partial<CalculatorLabels>;\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  /** The trigger's accessible name; wins over `calculator.open` from the provider. */\n  ariaLabel?: string;\n  /** Screen-reader names for the panel's own controls. `ariaLabel` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is\n *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit\n *  is named by its own glyph. */\ntype Key =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: KeyName }\n  | { kind: \"back\" };\n\ntype KeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\nconst KEYS: Key[] = [\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: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\nconst KEY_BASE =\n  \"flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]\";\n// Two key families, two fills: digits sit on the inset surface and darken on\n// hover, operators sit a step down on `--border` and lift toward that surface —\n// the same split `NumberPadSheet` uses for this keypad on a phone. The tokens\n// flip with the theme, so neither needs a `dark:` twin.\nconst KEY_DIGIT =\n  \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\";\nconst KEY_ACCENT =\n  \"bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels: CalculatorLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels.calculation}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        className=\"block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]\"\n      />\n      <div className=\"h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels.backspace}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? labels[key.name] : undefined}\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          // \"C\" is a convention, not a name: read aloud it is the letter.\n          aria-label={labels.clear}\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2 bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]\")}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels.equals}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            // The one chip that inverts against the page. There is no hover token for\n            // an inverted fill, so the hover is the chip mixed back toward the\n            // surface — a step quieter in either theme, and still a colour, so\n            // KEY_BASE's `transition-colors` carries it.\n            \"col-span-2 bg-[var(--bg-inverse)] text-[var(--text-inverse)] hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  ariaLabel,\n  labels: labelsProp,\n}: CalculatorButtonProps) {\n  // prop > provider > English, with the older `ariaLabel` prop folded in as the\n  // `open` key it has always been.\n  const fromProps = useMemo(\n    () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),\n    [ariaLabel, labelsProp],\n  );\n  const labels = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n  return (\n    <Popover\n      width={224}\n      labels={{ panel: labels.panel }}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={labels.open}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chart-zoom.d.ts

@@ -0,0 +1,156 @@
+import * as react from 'react';
+import { ReactNode, ComponentType } from 'react';
+import { InverseScaleFunction } from 'recharts';
+import { SeriesChartLabels } from './series-chart-labels.js';
+
+/** The y axis a series lands on when it names none — the single shared scale most
+ *  charts have. `SeriesChart` and the fit below agree on it by importing this. */
+declare const DEFAULT_Y_AXIS = "y";
+/**
+ * How square a selection has to be before it counts as a box: the shorter side
+ * against the longer, both as fractions of the plot. At 0.5 a selection twice as wide
+ * as it is tall is still a box and one three times as wide is a band.
+ */
+declare const ZOOM_SQUARE_ENOUGH = 0.5;
+/** Below this a drag is a click that moved, not a selection. In fractions of the plot,
+ *  so it is the same gesture on a phone and on a wall display. */
+declare const ZOOM_MIN_DRAG = 0.02;
+type ZoomAxes = "both" | "x" | "y";
+/** Which axes a drag zooms — or `null` for a drag too small to mean one, or a plot
+ *  that has not been laid out yet. Direction does not matter; proportion does. */
+declare function zoomAxesFor(dx: number, dy: number, width: number, height: number, threshold?: number): ZoomAxes | null;
+/** What a drag chose, in DATA coordinates, and which axes it actually named — the
+ *  caller needs the second to know which of the two it may derive from the other. */
+interface ZoomSelection {
+    which: ZoomAxes;
+    x?: [number, number];
+    /** One window per y axis, keyed by axis id: they are in different units. */
+    y: Record<string, [number, number]>;
+}
+/** A drag, in the chart's own pixel coordinates. */
+interface ZoomDrag {
+    fromX: number;
+    fromY: number;
+    toX: number;
+    toY: number;
+}
+/**
+ * A finished drag as a selection, or `null` when it selects nothing.
+ *
+ * `xInverse` and `yInverse(axisId)` are recharts' pixel→value functions; an axis whose
+ * function is missing, or whose ends come back non-finite, is left out rather than
+ * handed a NaN window.
+ */
+declare function selectionFromDrag(drag: ZoomDrag, plot: {
+    width: number;
+    height: number;
+}, xInverse: InverseScaleFunction | undefined, yInverse: (axisId: string) => InverseScaleFunction | undefined, axisIds: readonly string[]): ZoomSelection | null;
+/** What a band refit needs to know about the chart — a subset of `SeriesChart`'s own
+ *  props, so a chart hands its data straight over. */
+interface ZoomFitSource {
+    rows: Record<string, number>[];
+    series: {
+        key: string;
+        axis?: string;
+    }[];
+    axes: {
+        id: string;
+    }[];
+    xKey: string;
+}
+/**
+ * Each y axis fitted to the samples inside an x window — what a band across x leaves
+ * the axes nobody dragged showing. Zoom into a tenth of a sweep and a y axis still
+ * scaled to the whole run draws that tenth as a flat line, which is the one thing the
+ * zoom was for; so the unnamed axes are refitted, which is what "zoom" means everywhere
+ * else.
+ *
+ * An axis with nothing inside the window is left OUT rather than collapsed: a window
+ * between two samples is one where the chart should keep drawing the line across.
+ */
+declare function fitYToX(source: ZoomFitSource, window: readonly [number, number]): Record<string, [number, number]>;
+/**
+ * The x window that holds every sample inside a set of y windows — the other direction
+ * of the same idea. A channel crossing its band once gives a tight window; one that
+ * oscillates through it gives back most of the sweep, which is the truthful answer.
+ * `undefined` when no sample qualifies, rather than a guess.
+ */
+declare function fitXToY(source: ZoomFitSource, windows: Readonly<Record<string, readonly [number, number]>>): [number, number] | undefined;
+/**
+ * What a chart remembers about its zoom: the x window, and the y windows the reader
+ * DRAGGED. `y: null` means "derive y from x" — the split is the whole design: what was
+ * dragged is kept, and what follows from it is recomputed on every render, so a band
+ * across x refits y here and in every chart sharing the window.
+ */
+interface ZoomState {
+    x?: [number, number];
+    y: Record<string, [number, number]> | null;
+}
+declare const NO_ZOOM: ZoomState;
+/**
+ * The state after a selection. Two band drags COMPOSE rather than the second undoing
+ * the first: a band down y keeps the x window when the band holds no samples, and
+ * otherwise pulls x in to where they are.
+ */
+declare function zoomAfter(state: ZoomState, selection: ZoomSelection, source: ZoomFitSource): ZoomState;
+/** The domains a chart draws for a state: the x window as is, and each y axis either
+ *  as dragged or fitted to the x window. `{}` means "fit your own data". */
+declare function zoomDomains(state: ZoomState, source: ZoomFitSource): {
+    xDomain?: [number, number];
+    yDomains: Record<string, [number, number]>;
+};
+/** What the wrapped chart is handed. It applies the domains to its own axes and renders
+ *  `layer` INSIDE the recharts chart, where recharts' hooks answer. */
+interface ZoomBinding {
+    xDomain?: [number, number];
+    yDomains: Record<string, [number, number]>;
+    layer: ReactNode;
+}
+/** The props `withChartZoom` reads off the chart it wraps. */
+interface ZoomTarget {
+    /** Default: the single axis {@link DEFAULT_Y_AXIS}. */
+    axes?: readonly {
+        id: string;
+        hide?: boolean;
+    }[];
+    /** The chart's own data, so a band can refit the axis it did not name. Optional: a
+     *  chart with nothing plotted has nothing to fit to. */
+    rows?: Record<string, number>[];
+    series?: readonly {
+        key: string;
+        axis?: string;
+    }[];
+    x?: {
+        key?: string;
+    };
+    zoom?: ZoomBinding;
+    labels?: Partial<SeriesChartLabels>;
+}
+/**
+ * One x window for several charts.
+ *
+ * A column of charts over one abscissa is one picture, and zooming one of them and not
+ * the rest turns it into several pictures of different things. Every zoomable chart
+ * inside this shares the x window: any drag in any of them moves all of them.
+ *
+ * **Only x.** The y axes stay each chart's own — they are in different units — and
+ * each refits its own y to what is inside the shared window.
+ */
+declare function SharedXZoom({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * Wrap a chart in drag-to-zoom.
+ *
+ * The chart receives a `zoom` binding: it applies `xDomain`/`yDomains` to its axes
+ * (with `allowDataOverflow`, so recharts clips to the window instead of widening it
+ * back out) and renders `layer` as a child of its recharts chart. A reset button
+ * appears over the chart's top end corner while it is zoomed — a real button, so the
+ * keyboard can undo what the pointer did.
+ */
+declare function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>): {
+    (props: P): react.JSX.Element;
+    displayName: string;
+};
+
+export { DEFAULT_Y_AXIS, NO_ZOOM, SharedXZoom, ZOOM_MIN_DRAG, ZOOM_SQUARE_ENOUGH, type ZoomAxes, type ZoomBinding, type ZoomDrag, type ZoomFitSource, type ZoomSelection, type ZoomState, type ZoomTarget, fitXToY, fitYToX, selectionFromDrag, withChartZoom, zoomAfter, zoomAxesFor, zoomDomains };