@eifi1/ui-kit 0.15.2 → 0.15.4

package/README.md

@@ -377,15 +377,15 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**1008 names from 160 modules** — 476 values and 532 types. _Italic_ is a type-only export.
+**1017 names from 161 modules** — 481 values and 536 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 1008 |
-| `@eifi1/ui-kit/chart` | 100 |
+| `@eifi1/ui-kit` | 1017 |
+| `@eifi1/ui-kit/chart` | 104 |
 | `@eifi1/ui-kit/shell` | 24 |
 | `@eifi1/ui-kit/data-table` | 49 |
 | `@eifi1/ui-kit/wizard` | 25 |
@@ -406,7 +406,7 @@ re-slicing of it, never a second API.
 | `lib/calc` | `commitExpression`, `evaluateExpression`, `formatResult`, `isBareAmount`, `looksLikeExpression`, `sanitizeLive`, `splitLeadingSign` |
 | `lib/cn` | `cn` |
 | `lib/logger` | `logger`, `setStoreLog` |
-| `lib/format` | `EMPTY_FORMATTED_VALUE`, `formatDate`, `formatMoney`, `formatNumber`, `formatPercent`, `formatRelativeTime`, `toDate`, `useKitFormat`, _`DateInput`_, _`FormatDateOptions`_, _`FormatDateStyle`_, _`FormatDigits`_, _`FormatMoneyOptions`_, _`FormatNumberBaseOptions`_, _`FormatNumberOptions`_, _`FormatPercentOptions`_, _`FormatRelativeTimeOptions`_, _`KitFormat`_ |
+| `lib/format` | `currencyMinorDigits`, `EMPTY_FORMATTED_VALUE`, `formatDate`, `formatMoney`, `formatNumber`, `formatPercent`, `formatRelativeTime`, `roundToCurrency`, `toDate`, `useKitFormat`, _`DateInput`_, _`FormatDateOptions`_, _`FormatDateStyle`_, _`FormatDigits`_, _`FormatMoneyOptions`_, _`FormatNumberBaseOptions`_, _`FormatNumberOptions`_, _`FormatPercentOptions`_, _`FormatRelativeTimeOptions`_, _`KitFormat`_ |
 | `lib/safe-storage` | `readStored`, `writeStored` |
 | `lib/qr-encode` | `encodeQr`, _`QrEncodeOptions`_, _`QrErrorCorrection`_, _`QrMatrix`_ |
 | `lib/clipping` | `CLIPS_ATTRIBUTE` |
@@ -448,7 +448,7 @@ re-slicing of it, never a second API.
 
 | Module | Exports |
 |---|---|
-| `i18n/kit-labels` | `DEFAULT_APP_SHELL_LABELS`, `DEFAULT_CALCULATOR_LABELS`, `DEFAULT_COMBOBOX_LABELS`, `DEFAULT_COMMON_LABELS`, `DEFAULT_CURRENCY_LABELS`, `DEFAULT_DATE_PICKER_LABELS`, `DEFAULT_FILE_LABELS`, `DEFAULT_MULTI_SELECT_LABELS`, `DEFAULT_PICKER_SHEET_LABELS`, `DEFAULT_SWIPEABLE_ROW_LABELS`, `DEFAULT_TOP_BAR_LABELS`, `formatFileSize`, `missingKitLabels`, `UiKitProvider`, `useKitFileLabels`, `useKitLabelOverrides`, `useKitLabels`, `useKitLink`, `useKitLocale`, `useKitWeekStart`, _`AppShellLabels`_, _`CalculatorLabels`_, _`ComboboxLabels`_, _`CommonLabels`_, _`CurrencyLabels`_, _`DatePickerLabels`_, _`FileLabels`_, _`KitLinkComponent`_, _`KitLinkProps`_, _`LabelOverride`_, _`MultiSelectLabels`_, _`PickerSheetLabels`_, _`SwipeableRowLabels`_, _`TopBarLabels`_, _`UiKitLabelOverrides`_, _`UiKitLabels`_, _`UiKitProviderProps`_ |
+| `i18n/kit-labels` | `DEFAULT_APP_SHELL_LABELS`, `DEFAULT_CALCULATOR_LABELS`, `DEFAULT_COMBOBOX_LABELS`, `DEFAULT_COMMON_LABELS`, `DEFAULT_CURRENCY_LABELS`, `DEFAULT_DATE_PICKER_LABELS`, `DEFAULT_FILE_LABELS`, `DEFAULT_MULTI_SELECT_LABELS`, `DEFAULT_PICKER_SHEET_LABELS`, `DEFAULT_SWIPEABLE_ROW_LABELS`, `DEFAULT_TOP_BAR_LABELS`, `formatFileSize`, `missingKitLabels`, `UiKitProvider`, `useKitChartTooltipPlacement`, `useKitFileLabels`, `useKitLabelOverrides`, `useKitLabels`, `useKitLink`, `useKitLocale`, `useKitWeekStart`, _`AppShellLabels`_, _`CalculatorLabels`_, _`ChartTooltipPlacement`_, _`ComboboxLabels`_, _`CommonLabels`_, _`CurrencyLabels`_, _`DatePickerLabels`_, _`FileLabels`_, _`KitLinkComponent`_, _`KitLinkProps`_, _`LabelOverride`_, _`MultiSelectLabels`_, _`PickerSheetLabels`_, _`SwipeableRowLabels`_, _`TopBarLabels`_, _`UiKitLabelOverrides`_, _`UiKitLabels`_, _`UiKitProviderProps`_ |
 | `i18n/defaults` | `DEFAULT_UI_KIT_LABELS` |
 
 ### components
@@ -502,7 +502,7 @@ re-slicing of it, never a second API.
 | `components/autocomplete` | `Autocomplete`, _`AutocompleteProps`_ |
 | `components/measured-grid` | `DEFAULT_MEASURED_GRID_LABELS`, `MeasuredGrid`, `useMeasuredRows`, _`MeasuredGridColumn`_, _`MeasuredGridLabels`_, _`MeasuredGridProps`_, _`MeasuredGridView`_, _`MeasuredRows`_, _`UseMeasuredRowsOptions`_ |
 | `components/treemap` | `fitLabel`, `Treemap`, `TreemapCell`, _`TreemapCellProps`_, _`TreemapNode`_, _`TreemapProps`_ |
-| `components/series-chart` | `anchoredBand`, `AXIS_TICK_WIDTH`, `AXIS_TITLE_STRIP`, `axisBandWidth`, `mergeSeries`, `oneAxis`, `padBand`, `paddedDomain`, `SeriesChart`, `seriesKey`, `seriesLegendEntries`, `soleSeriesColor`, `StaticSeriesChart`, `visibleSeries`, _`SeriesChartAxis`_, _`SeriesChartHit`_, _`SeriesChartMarker`_, _`SeriesChartPoint`_, _`SeriesChartProps`_, _`SeriesChartReference`_, _`SeriesChartRow`_, _`SeriesChartSeries`_, _`SeriesChartSpan`_, _`SeriesChartTickValues`_, _`SeriesChartTone`_, _`SeriesChartTooltip`_, _`SeriesChartType`_, _`SeriesChartX`_, _`SeriesChartXTick`_, _`SeriesChartXValue`_, _`SeriesSource`_ |
+| `components/series-chart` | `anchoredBand`, `AXIS_TICK_WIDTH`, `AXIS_TITLE_STRIP`, `axisBandWidth`, `mergeSeries`, `oneAxis`, `padBand`, `paddedDomain`, `resolveTooltipPlacement`, `SeriesChart`, `seriesKey`, `seriesLegendEntries`, `soleSeriesColor`, `StaticSeriesChart`, `visibleSeries`, _`SeriesChartAxis`_, _`SeriesChartHit`_, _`SeriesChartMarker`_, _`SeriesChartPoint`_, _`SeriesChartProps`_, _`SeriesChartReference`_, _`SeriesChartRow`_, _`SeriesChartSeries`_, _`SeriesChartSpan`_, _`SeriesChartTickValues`_, _`SeriesChartTone`_, _`SeriesChartTooltip`_, _`SeriesChartTooltipPlacement`_, _`SeriesChartType`_, _`SeriesChartX`_, _`SeriesChartXTick`_, _`SeriesChartXValue`_, _`SeriesLegendAxes`_, _`SeriesSource`_ |
 | `components/chart-zoom` | `axisExtent`, `DEFAULT_Y_AXIS`, `defaultZoomAxes`, `fitXToY`, `fitYToX`, `NO_ZOOM`, `selectionFromDrag`, `SharedXZoom`, `withChartZoom`, `ZOOM_MIN_DRAG`, `ZOOM_SQUARE_ENOUGH`, `zoomAfter`, `zoomAxesFor`, `zoomDomains`, _`ZoomAxes`_, _`ZoomAxesSetting`_, _`ZoomBinding`_, _`ZoomDrag`_, _`ZoomFitSeries`_, _`ZoomFitSource`_, _`ZoomRow`_, _`ZoomSelection`_, _`ZoomState`_, _`ZoomTarget`_ |
 | `components/toggle-legend` | `LegendColumn`, `LegendGroup`, `StaticLegend`, `STEP_DASH`, `STROKE_PATTERNS`, `strokeDash`, `toggleHidden`, `ToggleLegend`, _`LegendEntry`_, _`StaticLegendProps`_, _`ToggleLegendProps`_ |
 | `components/facing-pair` | `FACING_SIDES`, `facingAxes`, `facingBand`, `facingHeadingPad`, _`FacingSide`_ |
@@ -535,7 +535,7 @@ re-slicing of it, never a second API.
 | `components/signed-amount` | `DEFAULT_SIGNED_AMOUNT_LABELS`, `Delta`, `SignedAmount`, `Tone`, `toneTextClass`, _`DeltaProps`_, _`GoodDirection`_, _`SignedAmountLabels`_, _`SignedAmountProps`_, _`SignedAmountTone`_, _`TextTone`_, _`ToneProps`_ |
 | `components/error-boundary` | `crashFingerprint`, `DEFAULT_ERROR_BOUNDARY_LABELS`, `describeThrown`, `ErrorBoundary`, `formatCrashReport`, `isChunkLoadError`, _`CrashReport`_, _`CrashReportResult`_, _`ErrorBoundaryDetails`_, _`ErrorBoundaryFallbackProps`_, _`ErrorBoundaryLabels`_, _`ErrorBoundaryProps`_ |
 | `components/authed-image` | `AuthedImage`, `DEFAULT_AUTHED_IMAGE_LABELS`, _`AuthedImageLabels`_, _`AuthedImageProps`_ |
-| `components/image-grid` | `DEFAULT_IMAGE_GRID_LABELS`, `ImageGrid`, _`ImageGridLabels`_, _`ImageGridProps`_ |
+| `components/image-grid` | `DEFAULT_IMAGE_GRID_LABELS`, `ImageGrid`, `splitFileName`, _`ImageGridLabels`_, _`ImageGridProps`_ |
 | `components/lightbox` | `DEFAULT_LIGHTBOX_LABELS`, `imageItemKind`, `Lightbox`, _`ImageItem`_, _`ImageItemKind`_, _`LightboxLabels`_, _`LightboxProps`_ |
 | `components/button-group` | `ButtonGroup`, `ButtonGroupLink`, _`ButtonGroupLinkProps`_, _`ButtonGroupLinkRenderProps`_, _`ButtonGroupProps`_ |
 | `components/table` | `NUMERIC_CELL_CLASS`, `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFoot`, `TableHead`, `TableHeaderCell`, `TableRow`, _`TableAlign`_, _`TableBodyProps`_, _`TableCaptionProps`_, _`TableCellProps`_, _`TableDensity`_, _`TableEmptyProps`_, _`TableFootProps`_, _`TableHeaderCellProps`_, _`TableHeaderCellSize`_, _`TableHeaderCellWeight`_, _`TableHeadProps`_, _`TableLayout`_, _`TableProps`_, _`TableRowProps`_, _`TableRowVariant`_, _`TableVAlign`_ |
@@ -559,6 +559,7 @@ re-slicing of it, never a second API.
 | `components/data-table-cells` | `booleanColumn`, `BooleanMark`, _`BooleanColumnOptions`_, _`BooleanMarkProps`_ |
 | `components/account-settings-labels` | `DEFAULT_ACCOUNT_SETTINGS_LABELS`, _`AccountSettingsLabels`_, _`PasskeysSettingLabels`_, _`PasswordSettingLabels`_, _`ProfileSettingLabels`_, _`TwoFactorSettingLabels`_ |
 | `components/combobox-core` | _`ComboClearValue`_, _`ComboOption`_ |
+| `components/series-chart-budget` | _`SeriesChartAxisBudget`_ |
 | `components/series-chart-ticks` | _`TimeTickUnit`_ |
 
 ### shell

package/dist/chart.d.ts

@@ -1,7 +1,7 @@
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeriesConfig, ChartTooltip, ChartTooltipContent, useChart } from './components/chart.js';
 export { CHART_COLORS, HEATMAP_HEX, HeatStops, PALETTE_HEX, lerpHex, paletteFor, textOn } from './theme/chart-palette.js';
 export { Treemap, TreemapCell, TreemapCellProps, TreemapNode, TreemapProps, fitLabel } from './components/treemap.js';
-export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartHit, SeriesChartMarker, SeriesChartPoint, SeriesChartProps, SeriesChartReference, SeriesChartRow, SeriesChartSeries, SeriesChartSpan, SeriesChartTickValues, SeriesChartTone, SeriesChartTooltip, SeriesChartType, SeriesChartX, SeriesChartXTick, SeriesChartXValue, SeriesLegendAxes, SeriesSource, StaticSeriesChart, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries } from './components/series-chart.js';
+export { AXIS_TICK_WIDTH, AXIS_TITLE_STRIP, SeriesChart, SeriesChartAxis, SeriesChartHit, SeriesChartMarker, SeriesChartPoint, SeriesChartProps, SeriesChartReference, SeriesChartRow, SeriesChartSeries, SeriesChartSpan, SeriesChartTickValues, SeriesChartTone, SeriesChartTooltip, SeriesChartTooltipPlacement, SeriesChartType, SeriesChartX, SeriesChartXTick, SeriesChartXValue, SeriesLegendAxes, SeriesSource, StaticSeriesChart, anchoredBand, axisBandWidth, mergeSeries, oneAxis, padBand, paddedDomain, resolveTooltipPlacement, seriesKey, seriesLegendEntries, soleSeriesColor, visibleSeries } from './components/series-chart.js';
 export { DEFAULT_Y_AXIS, NO_ZOOM, SharedXZoom, ZOOM_MIN_DRAG, ZOOM_SQUARE_ENOUGH, ZoomAxes, ZoomAxesSetting, ZoomBinding, ZoomDrag, ZoomFitSeries, ZoomFitSource, ZoomRow, ZoomSelection, ZoomState, ZoomTarget, axisExtent, defaultZoomAxes, fitXToY, fitYToX, selectionFromDrag, withChartZoom, zoomAfter, zoomAxesFor, zoomDomains } from './components/chart-zoom.js';
 export { LegendColumn, LegendEntry, LegendGroup, STEP_DASH, STROKE_PATTERNS, StaticLegend, StaticLegendProps, ToggleLegend, ToggleLegendProps, strokeDash, toggleHidden } from './components/toggle-legend.js';
 export { FACING_SIDES, FacingSide, facingAxes, facingBand, facingHeadingPad } from './components/facing-pair.js';
@@ -13,3 +13,53 @@ export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'recharts';
 import 'react';
 import './lib/direction.js';
+import './kit-labels-CnnBd-2N.js';
+import './components/data-table-labels.js';
+import './components/mini-calendar.js';
+import './components/calendar-heatmap.js';
+import './components/popover.js';
+import './components/chip.js';
+import 'lucide-react';
+import './components/field-sync.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
+import './wizard/types.js';
+import './tour/tour.js';
+import './search/command-palette.js';
+import './search/global-search.js';
+import './search/search-index.js';
+import './components/month-picker.js';
+import './components/page-contents.js';
+import './components/sparkline.js';
+import './components/stat-tile.js';
+import './components/signature-pad.js';
+import './components/password-strength.js';
+import './components/danger-confirm.js';
+import './components/swatch-picker.js';
+import './components/tile-radio.js';
+import './components/icon-picker.js';
+import './components/dialog-frame.js';
+import './components/modal.js';
+import './hooks/use-search-param-state.js';
+import './components/measured-grid.js';
+import './feedback/feedback-attachment.js';
+import './feedback/feedback-dialog.js';
+import './feedback/feedback-thread.js';
+import './feedback/feedback-inbox.js';
+import './components/account-settings-labels.js';
+import './components/confirm-dialog.js';
+import './components/floating-panel.js';
+import './components/bulk-action-bar.js';
+import './components/list.js';
+import './components/breadcrumbs.js';
+import './components/toast.js';
+import './components/description-list.js';
+import './components/line-items.js';
+import './components/progress-bar.js';
+import './components/signed-amount.js';
+import './components/error-boundary.js';
+import './components/authed-image.js';
+import './hooks/use-authed-src.js';
+import './components/image-grid.js';
+import './components/lightbox.js';

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

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../kit-labels-BHfRBbHs.js';
+import '../kit-labels-CnnBd-2N.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/amount-input.js

@@ -5,6 +5,7 @@ import { ChevronDown } from "lucide-react";
 import { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from "./currency-select.js";
 import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from "./ui.js";
 import { cn } from "../lib/cn.js";
+import { currencyMinorDigits } from "../lib/format.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { CalculatorButton } from "./calculator.js";
 import { NumberPadSheet } from "./numpad-sheet.js";
@@ -24,14 +25,6 @@ import {
   sanitizeLive,
   splitLeadingSign
 } from "../lib/calc.js";
-function currencyDigits(code) {
-  if (!code) return void 0;
-  try {
-    return new Intl.NumberFormat("en", { style: "currency", currency: code }).resolvedOptions().maximumFractionDigits;
-  } catch {
-    return void 0;
-  }
-}
 function settleAmount(text, digits, min, max) {
   const t = text.trim();
   if (!/^-?\d*\.?\d*$/.test(t) || !/\d/.test(t)) return text;
@@ -102,13 +95,15 @@ const AmountInput = forwardRef(
     const locale = useKitLocale();
     const mark = decimalMark(locale);
     const [draft, setDraft] = useState(null);
-    const derived = mark === "," ? shown.replace(/\./g, ",") : shown;
+    const displayDigits = digitsProp ?? currencyMinorDigits(currency);
+    const resting = focused ? shown : settleAmount(shown, displayDigits);
+    const derived = mark === "," ? resting.replace(/\./g, ",") : resting;
     const draftAs = draft === null ? "" : sanitizeLive(normalizeTypedMarks(draft, mark));
     const display = draft === null ? derived : draftAs === shown ? draft : (
       // The caller owns the sign: the typed "12" is shown as the "-12" it is.
       signOwned && negative && `-${draftAs}` === shown ? `-${draft}` : derived
     );
-    const digits = digitsProp ?? currencyDigits(currency);
+    const digits = digitsProp ?? currencyMinorDigits(currency);
     const settle = (text) => settleAmount(text, digits, min, max);
     const handleText = (raw, previous = shown) => {
       const text = sanitizeLive(raw);

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, 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  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the\n   * hint and error are described, a required amount is announced as required, and\n   * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n   */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  /** 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   * Decimals the committed amount is rounded to (kastlan 0.12: \"12.345\" and a\n   * calculator's \"100/3\" reached a `Numeric(10,2)` column unrounded and failed with a\n   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With\n   * no `currency`, nothing is rounded unless this is set. Rounding is half away from\n   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on\n   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left\n   * alone, so \"12.3\" can still become \"12.34\".\n   *\n   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of\n   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at\n   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a\n   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's\n   * scale: `digits={4}`, `digits={6}`.\n   */\n  digits?: number;\n  /** The smallest amount the field settles on. A lower figure is raised to it when it\n   *  settles, like `digits`. Compared with the signed figure. */\n  min?: number;\n  /** The largest amount the field settles on (a deposit release capped at the\n   *  balance). A higher figure is lowered to it when it settles. */\n  max?: number;\n  /**\n   * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the\n   * numpad's \"=\" and on every result the calculator writes back, never on a keystroke\n   * (\"1200+\" is not a figure yet). `onChange` still reports every keystroke; this is\n   * for a host that stores a number and must not see drafts (kastlan 52; see\n   * {@link MoneyField}, which is built on it).\n   */\n  onCommit?: (value: string) => void;\n}\n\n/** The currency's minor unit (CHF 2, JPY 0), or `undefined` for no currency or a code\n *  `Intl` does not accept. */\nfunction currencyDigits(code: string | undefined): number | undefined {\n  if (!code) return undefined;\n  try {\n    return new Intl.NumberFormat(\"en\", { style: \"currency\", currency: code }).resolvedOptions()\n      .maximumFractionDigits;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A settled figure, rounded to `digits` (half away from zero) and clamped to\n * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression\n * comes back as it was. Rounding works in decimal exponent notation, because\n * `Math.round(1.005 * 100)` is 100 (1.005 is 1.00499… in binary).\n */\nfunction settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {\n  const t = text.trim();\n  if (!/^-?\\d*\\.?\\d*$/.test(t) || !/\\d/.test(t)) return text;\n  let n = Number(t);\n  if (!Number.isFinite(n)) return text;\n  if (digits !== undefined) {\n    const magnitude = Number(`${Math.round(Number(`${Math.abs(n)}e${digits}`))}e-${digits}`);\n    n = n < 0 ? -magnitude : magnitude;\n  }\n  if (min !== undefined && n < min) n = min;\n  if (max !== undefined && n > max) n = max;\n  const out = formatResult(n);\n  // Unchanged figures keep their own spelling (\"12.50\" stays \"12.50\").\n  return Number(out) === Number(t) ? text : out;\n}\n\n/**\n * The locale's decimal mark, as far as this field can type it: \",\" or \".\" (kastlan 40).\n * The same answer `NumberField` gives, for the same reason: a mark outside those two\n * (Arabic's \"٫\") is not one {@link sanitizeLive} lets through, so those locales keep\n * the dot rather than get a field that eats the key it shows.\n */\nfunction decimalMark(locale: string | undefined): \",\" | \".\" {\n  try {\n    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\");\n    return part?.value === \",\" ? \",\" : \".\";\n  } catch {\n    // An invalid tag throws a RangeError; a typo in a locale must not take the form down.\n    return \".\";\n  }\n}\n\n/**\n * Which typed mark is the decimal one (keksdose G1). {@link sanitizeLive} folds every\n * \",\" into \".\", so on its own it read the German \"1.234,56\" as 1.23456 — and the\n * settle then made that 1.23, final. This decides per operand, from the typist's own\n * text, before that fold:\n *\n * - both marks present: the one that is not the locale's is grouping, and goes;\n * - in a \",\" locale, only \".\" present: grouping when it cannot be a decimal as a\n *   German reader writes it — twice (\"1.234.567\"), or in thousands shape (\"1.234\",\n *   \"12.500\") — otherwise a decimal (\"1.5\", typed by a dot-decimal habit);\n * - in a \".\" locale, only \",\" present: grouping when it appears twice (\"1,234,567\");\n *   once it stays a decimal, because Swiss and German typists write \"1,5\" in a\n *   de-CH form (kastlan 40) and a unit price \"1,789\" is a decimal.\n *\n * Only a keystroke's text comes through here. A calculator result is dot-decimal\n * already, and \"1.234\" from `100/81.03…` is never a thousand.\n */\nfunction normalizeTypedMarks(raw: string, mark: \",\" | \".\"): string {\n  const other = mark === \",\" ? \".\" : \",\";\n  return raw.replace(/[0-9.,]+/g, (operand) => {\n    const hasMark = operand.includes(mark);\n    const count = operand.split(other).length - 1;\n    if (count === 0) return operand;\n    const grouping = hasMark\n      ? true\n      : count > 1 || (mark === \",\" && /^\\d{1,3}(\\.\\d{3})+$/.test(operand));\n    return grouping ? operand.split(other).join(\"\") : operand;\n  });\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, settle: (text: string) => string): boolean {\n  const n = evaluateExpression(previous);\n  // Compared settled, since the field rounds what the calculator hands it.\n  return n !== null && settle(formatResult(n)) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, \"aria-describedby\": ariaDescribedBy, \"aria-invalid\": ariaInvalid, \"aria-required\": ariaRequired, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === \"true\";\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    // end 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    // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a\n    // fr-CH user typed \"1,5\" and watched it turn into \"1.5\" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all\n    // stay dot-decimal, because that string is the contract: RhfMoneyField's\n    // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read\n    // it. The way back is free: {@link sanitizeLive} already folds a typed \",\" into\n    // \".\", so a comma typed, pasted or tapped on the numpad lands as a dot.\n    //\n    // One character for one character, and no digit grouping: the caret stays where\n    // the typist put it, and \"1.000\" cannot be read back as a thousand in one locale\n    // and as one in the other. de-CH and it-CH are \".\" — CLDR says so, and this\n    // follows `Intl` rather than a guess about a country.\n    const locale = useKitLocale();\n    const mark = decimalMark(locale);\n    // While the typist is typing, the field shows THEIR text (\"1.234,5\" stays exactly\n    // that), not the value re-spelt: re-spelling turned a grouping \".\" into a \",\" under\n    // their fingers, after which no rule could tell the two apart (keksdose G1). The\n    // draft is shown only while it still spells what the field holds; a value set from\n    // outside, a calculator result or a commit falls back to the derived spelling.\n    const [draft, setDraft] = useState<string | null>(null);\n    const derived = mark === \",\" ? shown.replace(/\\./g, \",\") : shown;\n    const draftAs = draft === null ? \"\" : sanitizeLive(normalizeTypedMarks(draft, mark));\n    const display =\n      draft === null\n        ? derived\n        : draftAs === shown\n          ? draft\n          : // The caller owns the sign: the typed \"12\" is shown as the \"-12\" it is.\n            signOwned && negative && `-${draftAs}` === shown\n            ? `-${draft}`\n            : derived;\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 digits = digitsProp ?? currencyDigits(currency);\n    const settle = (text: string) => settleAmount(text, digits, min, max);\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, settle)) {\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 = () => {\n      setDraft(null);\n      const settled = settle(commitExpression(shown));\n      handleText(settled);\n      onCommit?.(settled);\n    };\n    const typed = (raw: string) => {\n      setDraft(raw);\n      handleText(normalizeTypedMarks(raw, mark));\n    };\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\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={display}\n          onChange={(e) => typed(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 ? \"pe-16\" : \"pe-12\") : \"pe-0\"\n              : showCalc\n                ? currency ? (editable ? \"pe-24\" : \"pe-16\") : \"pe-10\"\n                : currency ? (editable ? \"pe-20\" : \"pe-14\") : \"pe-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 at the start 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          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired}\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 end 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            // Logical `end-*`: the chip and the calculator are the figure's trailing\n            // controls, so a right-to-left form carries them on the left.\n            asDisplay ? \"bottom-1 end-0\" : \"inset-y-1 end-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              // The mark the field shows, as NumberInput hands its calculator; the\n              // evaluator reads either, and its result comes back dot-decimal.\n              value={display}\n              onChange={(result, expression) => {\n                setDraft(null);\n                const settled = settle(result);\n                handleText(settled, expression);\n                onCommit?.(settled);\n              }}\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-start 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            // Localised like the field it mirrors. Keys are typing, read by the\n            // locale's marks like the keyboard's; \"=\" is a result, dot-decimal.\n            value={display}\n            onChange={typed}\n            onResult={(result) => {\n              setDraft(null);\n              const settled = settle(result);\n              handleText(settled);\n              onCommit?.(settled);\n            }}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n            decimalMark={mark}\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 { currencyMinorDigits } from \"../lib/format\";\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  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the\n   * hint and error are described, a required amount is announced as required, and\n   * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n   */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  /** 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   * Decimals the committed amount is rounded to (kastlan 0.12: \"12.345\" and a\n   * calculator's \"100/3\" reached a `Numeric(10,2)` column unrounded and failed with a\n   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With\n   * no `currency`, nothing is rounded unless this is set. Rounding is half away from\n   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on\n   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left\n   * alone, so \"12.3\" can still become \"12.34\".\n   *\n   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of\n   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at\n   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a\n   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's\n   * scale: `digits={4}`, `digits={6}`.\n   */\n  digits?: number;\n  /** The smallest amount the field settles on. A lower figure is raised to it when it\n   *  settles, like `digits`. Compared with the signed figure. */\n  min?: number;\n  /** The largest amount the field settles on (a deposit release capped at the\n   *  balance). A higher figure is lowered to it when it settles. */\n  max?: number;\n  /**\n   * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the\n   * numpad's \"=\" and on every result the calculator writes back, never on a keystroke\n   * (\"1200+\" is not a figure yet). `onChange` still reports every keystroke; this is\n   * for a host that stores a number and must not see drafts (kastlan 52; see\n   * {@link MoneyField}, which is built on it).\n   */\n  onCommit?: (value: string) => void;\n}\n\n\n/**\n * A settled figure, rounded to `digits` (half away from zero) and clamped to\n * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression\n * comes back as it was. Rounding works in decimal exponent notation, because\n * `Math.round(1.005 * 100)` is 100 (1.005 is 1.00499… in binary).\n */\nfunction settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {\n  const t = text.trim();\n  if (!/^-?\\d*\\.?\\d*$/.test(t) || !/\\d/.test(t)) return text;\n  let n = Number(t);\n  if (!Number.isFinite(n)) return text;\n  if (digits !== undefined) {\n    const magnitude = Number(`${Math.round(Number(`${Math.abs(n)}e${digits}`))}e-${digits}`);\n    n = n < 0 ? -magnitude : magnitude;\n  }\n  if (min !== undefined && n < min) n = min;\n  if (max !== undefined && n > max) n = max;\n  const out = formatResult(n);\n  // Unchanged figures keep their own spelling (\"12.50\" stays \"12.50\").\n  return Number(out) === Number(t) ? text : out;\n}\n\n/**\n * The locale's decimal mark, as far as this field can type it: \",\" or \".\" (kastlan 40).\n * The same answer `NumberField` gives, for the same reason: a mark outside those two\n * (Arabic's \"٫\") is not one {@link sanitizeLive} lets through, so those locales keep\n * the dot rather than get a field that eats the key it shows.\n */\nfunction decimalMark(locale: string | undefined): \",\" | \".\" {\n  try {\n    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\");\n    return part?.value === \",\" ? \",\" : \".\";\n  } catch {\n    // An invalid tag throws a RangeError; a typo in a locale must not take the form down.\n    return \".\";\n  }\n}\n\n/**\n * Which typed mark is the decimal one (keksdose G1). {@link sanitizeLive} folds every\n * \",\" into \".\", so on its own it read the German \"1.234,56\" as 1.23456 — and the\n * settle then made that 1.23, final. This decides per operand, from the typist's own\n * text, before that fold:\n *\n * - both marks present: the one that is not the locale's is grouping, and goes;\n * - in a \",\" locale, only \".\" present: grouping when it cannot be a decimal as a\n *   German reader writes it — twice (\"1.234.567\"), or in thousands shape (\"1.234\",\n *   \"12.500\") — otherwise a decimal (\"1.5\", typed by a dot-decimal habit);\n * - in a \".\" locale, only \",\" present: grouping when it appears twice (\"1,234,567\");\n *   once it stays a decimal, because Swiss and German typists write \"1,5\" in a\n *   de-CH form (kastlan 40) and a unit price \"1,789\" is a decimal.\n *\n * Only a keystroke's text comes through here. A calculator result is dot-decimal\n * already, and \"1.234\" from `100/81.03…` is never a thousand.\n */\nfunction normalizeTypedMarks(raw: string, mark: \",\" | \".\"): string {\n  const other = mark === \",\" ? \".\" : \",\";\n  return raw.replace(/[0-9.,]+/g, (operand) => {\n    const hasMark = operand.includes(mark);\n    const count = operand.split(other).length - 1;\n    if (count === 0) return operand;\n    const grouping = hasMark\n      ? true\n      : count > 1 || (mark === \",\" && /^\\d{1,3}(\\.\\d{3})+$/.test(operand));\n    return grouping ? operand.split(other).join(\"\") : operand;\n  });\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, settle: (text: string) => string): boolean {\n  const n = evaluateExpression(previous);\n  // Compared settled, since the field rounds what the calculator hands it.\n  return n !== null && settle(formatResult(n)) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, \"aria-describedby\": ariaDescribedBy, \"aria-invalid\": ariaInvalid, \"aria-required\": ariaRequired, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels, currencyNames, digits: digitsProp, min, max, onCommit }, ref) => {\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === \"true\";\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    // end 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    // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a\n    // fr-CH user typed \"1,5\" and watched it turn into \"1.5\" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all\n    // stay dot-decimal, because that string is the contract: RhfMoneyField's\n    // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read\n    // it. The way back is free: {@link sanitizeLive} already folds a typed \",\" into\n    // \".\", so a comma typed, pasted or tapped on the numpad lands as a dot.\n    //\n    // One character for one character, and no digit grouping: the caret stays where\n    // the typist put it, and \"1.000\" cannot be read back as a thousand in one locale\n    // and as one in the other. de-CH and it-CH are \".\" — CLDR says so, and this\n    // follows `Intl` rather than a guess about a country.\n    const locale = useKitLocale();\n    const mark = decimalMark(locale);\n    // While the typist is typing, the field shows THEIR text (\"1.234,5\" stays exactly\n    // that), not the value re-spelt: re-spelling turned a grouping \".\" into a \",\" under\n    // their fingers, after which no rule could tell the two apart (keksdose G1). The\n    // draft is shown only while it still spells what the field holds; a value set from\n    // outside, a calculator result or a commit falls back to the derived spelling.\n    const [draft, setDraft] = useState<string | null>(null);\n    // A value the HOST set (not one typed here) is shown at the currency's minor unit\n    // while the field is not being edited: an FX estimate of 93.4213 showed four\n    // decimals (keksdose live #356). Display only — `value` is the host's, untouched.\n    const displayDigits = digitsProp ?? currencyMinorDigits(currency);\n    const resting = focused ? shown : settleAmount(shown, displayDigits);\n    const derived = mark === \",\" ? resting.replace(/\\./g, \",\") : resting;\n    const draftAs = draft === null ? \"\" : sanitizeLive(normalizeTypedMarks(draft, mark));\n    const display =\n      draft === null\n        ? derived\n        : draftAs === shown\n          ? draft\n          : // The caller owns the sign: the typed \"12\" is shown as the \"-12\" it is.\n            signOwned && negative && `-${draftAs}` === shown\n            ? `-${draft}`\n            : derived;\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 digits = digitsProp ?? currencyMinorDigits(currency);\n    const settle = (text: string) => settleAmount(text, digits, min, max);\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, settle)) {\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 = () => {\n      setDraft(null);\n      const settled = settle(commitExpression(shown));\n      handleText(settled);\n      onCommit?.(settled);\n    };\n    const typed = (raw: string) => {\n      setDraft(raw);\n      handleText(normalizeTypedMarks(raw, mark));\n    };\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\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={display}\n          onChange={(e) => typed(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 ? \"pe-16\" : \"pe-12\") : \"pe-0\"\n              : showCalc\n                ? currency ? (editable ? \"pe-24\" : \"pe-16\") : \"pe-10\"\n                : currency ? (editable ? \"pe-20\" : \"pe-14\") : \"pe-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 at the start 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          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired}\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 end 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            // Logical `end-*`: the chip and the calculator are the figure's trailing\n            // controls, so a right-to-left form carries them on the left.\n            asDisplay ? \"bottom-1 end-0\" : \"inset-y-1 end-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              // The mark the field shows, as NumberInput hands its calculator; the\n              // evaluator reads either, and its result comes back dot-decimal.\n              value={display}\n              onChange={(result, expression) => {\n                setDraft(null);\n                const settled = settle(result);\n                handleText(settled, expression);\n                onCommit?.(settled);\n              }}\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-start 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            // Localised like the field it mirrors. Keys are typing, read by the\n            // locale's marks like the keyboard's; \"=\" is a result, dot-decimal.\n            value={display}\n            onChange={typed}\n            onResult={(result) => {\n              setDraft(null);\n              const settled = settle(result);\n              handleText(settled);\n              onCommit?.(settled);\n            }}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n            decimalMark={mark}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAmountInput.displayName = \"AmountInput\";\n"],"mappings":"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","names":[]}

package/dist/components/button-group.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-BHfRBbHs.js';
+import { f as ButtonVariant, d as ButtonSize } from '../kit-labels-CnnBd-2N.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/calculator.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { C as CalculatorLabels } from '../kit-labels-BHfRBbHs.js';
+import { C as CalculatorLabels } from '../kit-labels-CnnBd-2N.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/chart.d.ts

@@ -85,8 +85,23 @@ interface ChartTooltipContentProps {
     boundaryRef?: RefObject<HTMLElement | null>;
     /** Injected by recharts: keep series drawn with `hide` in the tooltip. */
     includeHidden?: boolean;
+    /**
+     * `"floating"` (the default): the box recharts moves with the cursor. `"readout"`: the
+     * same heading and values as a flat row for a FIXED place outside the plot — a
+     * `SeriesChart` whose `tooltip.placement` is `"above"`/`"below"` portals it there, so
+     * a finger on a phone no longer sits on the box it is trying to read (keksdose #359).
+     * No border, shadow, width cap or viewport nudge; the values flow in a grid whose
+     * column count depends on the row's width alone, so the row is the same height
+     * whatever is being pointed at — and, idle, it shows {@link idleKeys} with "—".
+     */
+    variant?: "floating" | "readout";
+    /** Readout only: the series to list while nothing is active, so the row keeps the
+     *  height it will have once something is. */
+    idleKeys?: readonly string[];
+    /** Readout only: the heading while nothing is active. Default "—". */
+    idleLabel?: ReactNode;
 }
-declare function ChartTooltipContent({ active, payload, label, indicator, hideLabel, labelFormatter, valueFormatter, formatValue, coordinate, boundaryRef, includeHidden, }: ChartTooltipContentProps): react.JSX.Element | null;
+declare function ChartTooltipContent({ active, payload, label, indicator, hideLabel, labelFormatter, valueFormatter, formatValue, coordinate, boundaryRef, includeHidden, variant, idleKeys, idleLabel, }: ChartTooltipContentProps): react.JSX.Element | null;
 interface LegendPayloadItem {
     value?: string;
     dataKey?: string | number;

package/dist/components/chart.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useId, useLayoutEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import {
   Legend as RechartsLegend,
   ResponsiveContainer,
@@ -94,12 +94,17 @@ function ChartTooltipContent({
   formatValue,
   coordinate,
   boundaryRef,
-  includeHidden = false
+  includeHidden = false,
+  variant = "floating",
+  idleKeys,
+  idleLabel
 }) {
   const config = useChart();
   const tipRef = useRef(null);
+  const readout = variant === "readout";
   const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
-  const visible = Boolean(active && items?.length);
+  const shown = Boolean(active && items?.length);
+  const visible = shown && !readout;
   const [flip, setFlip] = useState(false);
   const x = coordinate?.x;
   useLayoutEffect(() => {
@@ -113,50 +118,109 @@ function ChartTooltipContent({
     const tipWidth = tipRef.current?.offsetWidth ?? 160;
     setFlip(visibleX + tipWidth + 12 > boundary.clientWidth);
   }, [visible, x, boundaryRef, payload, label]);
+  const [nudge, setNudge] = useState(0);
+  const nudgeRef = useRef(0);
+  const [settled, setSettled] = useState(0);
+  useEffect(() => {
+    const wrapper = tipRef.current?.closest(".recharts-tooltip-wrapper");
+    if (!visible || !wrapper) return;
+    const onEnd = () => setSettled((n) => n + 1);
+    wrapper.addEventListener("transitionend", onEnd);
+    return () => wrapper.removeEventListener("transitionend", onEnd);
+  }, [visible]);
+  useLayoutEffect(() => {
+    const el = tipRef.current;
+    if (!visible || !el) {
+      nudgeRef.current = 0;
+      setNudge(0);
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0) return;
+    const margin = 8;
+    const viewport = document.documentElement.clientWidth || window.innerWidth;
+    const left = rect.left - nudgeRef.current;
+    const right = left + rect.width;
+    let next = 0;
+    if (right > viewport - margin) next = viewport - margin - right;
+    if (left + next < margin) next = margin - left;
+    if (next !== nudgeRef.current) {
+      nudgeRef.current = next;
+      setNudge(next);
+    }
+  }, [visible, x, payload, label, flip, settled]);
+  const tooltipRow = (item, i, inRow) => {
+    const dk = item.dataKey != null ? String(item.dataKey) : void 0;
+    const nm = item.name != null ? String(item.name) : void 0;
+    const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : dk ?? nm ?? String(i);
+    const series = config[cfgKey];
+    const fill = typeof item.payload?.fill === "string" ? item.payload.fill : void 0;
+    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
+    const name = series?.label ?? nm ?? cfgKey;
+    const raw = tooltipValue(item.value);
+    let text;
+    if (inRow && !shown) text = NO_VALUE;
+    else if (formatValue) text = formatValue(raw);
+    else if (raw == null) text = NO_VALUE;
+    else text = valueFormatter ? valueFormatter(raw) : raw;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex items-center", inRow ? "min-w-0 max-w-[12rem] gap-1.5" : "gap-2"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "shrink-0 rounded-[2px]",
+                indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1"
+              ),
+              style: { backgroundColor: color }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("min-w-0 text-[var(--text-muted)]", inRow ? "truncate" : "break-words"),
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-private": true,
+              dir: "auto",
+              className: "ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]",
+              children: text
+            }
+          )
+        ]
+      },
+      `${cfgKey}-${i}`
+    );
+  };
+  if (readout) {
+    const rows = shown ? items : (idleKeys ?? Object.keys(config)).map((key) => ({ dataKey: key }));
+    return /* @__PURE__ */ jsxs("div", { className: "text-xs", "data-chart-readout": shown ? "active" : "idle", children: [
+      /* @__PURE__ */ jsx("div", { "data-readout-heading": true, className: "truncate font-medium leading-6 text-[var(--text-primary)]", children: shown && !hideLabel && label != null ? labelFormatter ? labelFormatter(label) : label : idleLabel ?? NO_VALUE }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-x-4 gap-y-1", children: rows.map((item, i) => tooltipRow(item, i, true)) })
+    ] });
+  }
   if (!visible || !items) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: tipRef,
-      style: boundaryRef ? { transform: flip ? "translateX(calc(-100% - 12px))" : "translateX(12px)" } : void 0,
+      style: boundaryRef || nudge ? {
+        transform: [
+          boundaryRef ? flip ? "translateX(calc(-100% - 12px))" : "translateX(12px)" : "",
+          nudge ? `translateX(${nudge}px)` : ""
+        ].filter(Boolean).join(" ")
+      } : void 0,
       className: "min-w-[9rem] max-w-[min(20rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] px-2.5 py-2 text-xs shadow-xl",
       children: [
         !hideLabel && label != null && /* @__PURE__ */ jsx("div", { className: "mb-1.5 font-medium text-[var(--text-primary)]", children: labelFormatter ? labelFormatter(label) : label }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: items.map((item, i) => {
-          const dk = item.dataKey != null ? String(item.dataKey) : void 0;
-          const nm = item.name != null ? String(item.name) : void 0;
-          const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : dk ?? nm ?? String(i);
-          const series = config[cfgKey];
-          const fill = typeof item.payload?.fill === "string" ? item.payload.fill : void 0;
-          const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
-          const name = series?.label ?? nm ?? cfgKey;
-          const raw = tooltipValue(item.value);
-          let shown;
-          if (formatValue) shown = formatValue(raw);
-          else if (raw == null) shown = NO_VALUE;
-          else shown = valueFormatter ? valueFormatter(raw) : raw;
-          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "shrink-0 rounded-[2px]",
-                  indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1"
-                ),
-                style: { backgroundColor: color }
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-[var(--text-muted)]", children: name }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                "data-private": true,
-                className: "ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]",
-                children: shown
-              }
-            )
-          ] }, `${cfgKey}-${i}`);
-        }) })
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: items.map((item, i) => tooltipRow(item, i, false)) })
       ]
     }
   );