@eifi1/ui-kit 0.52.0 → 0.54.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -59
- package/dist/account/delete-account-setting.d.ts +3 -2
- package/dist/account/delete-account-setting.js.map +1 -1
- package/dist/auth/auth-errors.d.ts +36 -0
- package/dist/auth/auth-errors.js +20 -0
- package/dist/auth/auth-errors.js.map +1 -1
- package/dist/billing/cancel-subscription.d.ts +5 -14
- package/dist/billing/cancel-subscription.js +1 -3
- package/dist/billing/cancel-subscription.js.map +1 -1
- package/dist/billing/plan-card.d.ts +5 -13
- package/dist/billing/plan-card.js +3 -11
- package/dist/billing/plan-card.js.map +1 -1
- package/dist/billing/plan-switch.d.ts +5 -14
- package/dist/billing/plan-switch.js +1 -3
- package/dist/billing/plan-switch.js.map +1 -1
- package/dist/chart.d.ts +3 -14
- package/dist/chart.js +64 -11
- package/dist/chart.js.map +1 -1
- package/dist/components/amount-input.d.ts +2 -1
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/calendar-heatmap.js +4 -2
- package/dist/components/calendar-heatmap.js.map +1 -1
- package/dist/components/currency-option-list.d.ts +2 -1
- package/dist/components/currency-option-list.js +10 -3
- package/dist/components/currency-option-list.js.map +1 -1
- package/dist/components/currency-select.d.ts +3 -1
- package/dist/components/currency-select.js.map +1 -1
- package/dist/components/danger-confirm.d.ts +22 -1
- package/dist/components/danger-confirm.js +50 -28
- package/dist/components/danger-confirm.js.map +1 -1
- package/dist/components/data-table-filter-popover.d.ts +2 -1
- package/dist/components/data-table-filter-popover.js +3 -2
- package/dist/components/data-table-filter-popover.js.map +1 -1
- package/dist/components/data-table-filters.d.ts +33 -3
- package/dist/components/data-table-filters.js +6 -4
- package/dist/components/data-table-filters.js.map +1 -1
- package/dist/components/date-field.d.ts +1 -1
- package/dist/components/date-field.js.map +1 -1
- package/dist/components/date-picker.d.ts +1 -1
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/date-range-picker.d.ts +4 -17
- package/dist/components/date-range-picker.js +2 -2
- package/dist/components/date-range-picker.js.map +1 -1
- package/dist/components/dialog-frame.d.ts +3 -1
- package/dist/components/dialog-frame.js +6 -2
- package/dist/components/dialog-frame.js.map +1 -1
- package/dist/components/mini-calendar.js +3 -2
- package/dist/components/mini-calendar.js.map +1 -1
- package/dist/components/modal.d.ts +27 -0
- package/dist/components/modal.js +5 -3
- package/dist/components/modal.js.map +1 -1
- package/dist/components/nav-pills.d.ts +1 -1
- package/dist/components/nav-pills.js.map +1 -1
- package/dist/components/number-input.js.map +1 -1
- package/dist/components/series-chart-axes.d.ts +1 -1
- package/dist/components/series-chart-axes.js.map +1 -1
- package/dist/components/series-chart.d.ts +64 -19
- package/dist/components/series-chart.js +2 -1
- package/dist/components/series-chart.js.map +1 -1
- package/dist/components/stat-tile.d.ts +21 -2
- package/dist/components/stat-tile.js +4 -2
- package/dist/components/stat-tile.js.map +1 -1
- package/dist/components/treemap-labels.d.ts +6 -1
- package/dist/components/treemap-labels.js +2 -2
- package/dist/components/treemap-labels.js.map +1 -1
- package/dist/components/treemap.d.ts +29 -4
- package/dist/components/treemap.js +22 -9
- package/dist/components/treemap.js.map +1 -1
- package/dist/currencies.d.ts +16 -2
- package/dist/currencies.js +2 -1
- package/dist/currencies.js.map +1 -1
- package/dist/data-table.d.ts +1 -6
- package/dist/data-table.js +1 -9
- package/dist/data-table.js.map +1 -1
- package/dist/demo/demo-countdown.d.ts +0 -5
- package/dist/demo/demo-countdown.js +0 -4
- package/dist/demo/demo-countdown.js.map +1 -1
- package/dist/eslint/index.js +1 -1
- package/dist/feedback/feedback-context-labels.js +2 -1
- package/dist/feedback/feedback-context-labels.js.map +1 -1
- package/dist/feedback/feedback-context.d.ts +19 -3
- package/dist/feedback/feedback-context.js +12 -1
- package/dist/feedback/feedback-context.js.map +1 -1
- package/dist/feedback/feedback-diagnostics.d.ts +17 -0
- package/dist/feedback/feedback-diagnostics.js +27 -0
- package/dist/feedback/feedback-diagnostics.js.map +1 -0
- package/dist/feedback/feedback-dialog.d.ts +10 -0
- package/dist/feedback/feedback-dialog.js +6 -4
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback/feedback-mutation.d.ts +11 -23
- package/dist/feedback/feedback-mutation.js +1 -9
- package/dist/feedback/feedback-mutation.js.map +1 -1
- package/dist/feedback/feedback-public-list.d.ts +1 -6
- package/dist/feedback/feedback-public-list.js +1 -2
- package/dist/feedback/feedback-public-list.js.map +1 -1
- package/dist/feedback/feedback-record.d.ts +5 -0
- package/dist/feedback/feedback-record.js.map +1 -1
- package/dist/feedback/feedback-row-detail-labels.js +1 -8
- package/dist/feedback/feedback-row-detail-labels.js.map +1 -1
- package/dist/feedback/feedback-row-detail.d.ts +6 -50
- package/dist/feedback/feedback-row-detail.js +3 -8
- package/dist/feedback/feedback-row-detail.js.map +1 -1
- package/dist/feedback/feedback-status-undo.d.ts +3 -19
- package/dist/feedback/feedback-status-undo.js.map +1 -1
- package/dist/feedback/feedback-submit-dialog.d.ts +5 -1
- package/dist/feedback/feedback-submit-dialog.js +15 -3
- package/dist/feedback/feedback-submit-dialog.js.map +1 -1
- package/dist/feedback/feedback-submit.d.ts +30 -2
- package/dist/feedback/feedback-submit.js +5 -2
- package/dist/feedback/feedback-submit.js.map +1 -1
- package/dist/feedback/feedback-thread.d.ts +0 -9
- package/dist/feedback/feedback-thread.js.map +1 -1
- package/dist/feedback.d.ts +6 -40
- package/dist/feedback.js +88 -46
- package/dist/feedback.js.map +1 -1
- package/dist/hooks/use-hotkey.js +11 -1
- package/dist/hooks/use-hotkey.js.map +1 -1
- package/dist/i18n/defaults.js +0 -4
- package/dist/i18n/defaults.js.map +1 -1
- package/dist/i18n/german.js +5 -20
- package/dist/i18n/german.js.map +1 -1
- package/dist/i18n/kit-labels.d.ts +5 -14
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/locales/en.js +5 -31
- package/dist/i18n/locales/en.js.map +3 -3
- package/dist/i18n/locales/es.js +5 -20
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.js +5 -20
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.js +5 -20
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.js +5 -21
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.js +5 -20
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/i18n/review.js +9 -4
- package/dist/i18n/review.js.map +1 -1
- package/dist/i18n/shared-labels.js +0 -1
- package/dist/i18n/shared-labels.js.map +1 -1
- package/dist/index.d.ts +18 -67
- package/dist/index.js +28 -103
- package/dist/index.js.map +1 -1
- package/dist/lib/dates.d.ts +7 -1
- package/dist/lib/dates.js +8 -1
- package/dist/lib/dates.js.map +1 -1
- package/dist/lib/format.d.ts +37 -2
- package/dist/lib/format.js +25 -1
- package/dist/lib/format.js.map +1 -1
- package/dist/lib/intl-cache.d.ts +4 -2
- package/dist/lib/intl-cache.js.map +1 -1
- package/dist/lib/translation-review.d.ts +26 -0
- package/dist/lib/translation-review.js +14 -0
- package/dist/lib/translation-review.js.map +1 -1
- package/dist/rhf/fields.d.ts +2 -2
- package/dist/rhf/fields.js.map +1 -1
- package/dist/search/search-index.d.ts +0 -6
- package/dist/search/search-index.js +0 -4
- package/dist/search/search-index.js.map +1 -1
- package/dist/search.d.ts +1 -8
- package/dist/search.js +2 -7
- package/dist/search.js.map +1 -1
- package/dist/shell/account-menu-language.d.ts +7 -21
- package/dist/shell/account-menu-language.js +1 -3
- package/dist/shell/account-menu-language.js.map +1 -1
- package/dist/shell/account-menu-text-size.d.ts +9 -23
- package/dist/shell/account-menu-text-size.js +2 -3
- package/dist/shell/account-menu-text-size.js.map +1 -1
- package/dist/shell/app-shell.d.ts +0 -10
- package/dist/shell/app-shell.js +1 -7
- package/dist/shell/app-shell.js.map +1 -1
- package/dist/shell/company-switcher.d.ts +1 -1
- package/dist/shell/company-switcher.js.map +1 -1
- package/dist/shell/dev-menu.d.ts +1 -1
- package/dist/shell/dev-menu.js.map +1 -1
- package/dist/shell/top-bar-parts-labels.d.ts +1 -1
- package/dist/shell/top-bar-parts-labels.js.map +1 -1
- package/dist/shell.d.ts +7 -29
- package/dist/shell.js +12 -42
- package/dist/shell.js.map +1 -1
- package/dist/sync.d.ts +2 -6
- package/dist/sync.js +2 -15
- package/dist/sync.js.map +1 -1
- package/dist/theme/chart-palette.d.ts +0 -5
- package/dist/theme/chart-palette.js +0 -2
- package/dist/theme/chart-palette.js.map +1 -1
- package/package.json +1 -1
- package/src/account/delete-account-setting.tsx +3 -2
- package/src/auth/auth-errors.ts +69 -0
- package/src/billing/cancel-subscription.tsx +5 -16
- package/src/billing/plan-card.tsx +7 -24
- package/src/billing/plan-switch.tsx +5 -16
- package/src/chart.ts +62 -13
- package/src/components/amount-input.tsx +2 -1
- package/src/components/calendar-heatmap.tsx +8 -2
- package/src/components/currency-option-list.tsx +12 -4
- package/src/components/currency-select.tsx +3 -1
- package/src/components/danger-confirm.tsx +80 -27
- package/src/components/data-table-filter-popover.tsx +19 -11
- package/src/components/data-table-filters.ts +36 -8
- package/src/components/date-field.tsx +1 -1
- package/src/components/date-picker.tsx +0 -1
- package/src/components/date-range-picker.tsx +6 -22
- package/src/components/dialog-frame.tsx +12 -4
- package/src/components/mini-calendar.tsx +5 -2
- package/src/components/modal.tsx +36 -7
- package/src/components/nav-pills.tsx +1 -1
- package/src/components/number-input.tsx +4 -3
- package/src/components/series-chart-axes.ts +6 -1
- package/src/components/series-chart.tsx +78 -21
- package/src/components/stat-tile.tsx +32 -3
- package/src/components/treemap-labels.ts +11 -3
- package/src/components/treemap.tsx +65 -12
- package/src/currencies.ts +23 -3
- package/src/data-table.ts +1 -11
- package/src/demo/demo-countdown.ts +3 -8
- package/src/feedback/feedback-context-labels.ts +1 -0
- package/src/feedback/feedback-context.tsx +34 -2
- package/src/feedback/feedback-diagnostics.tsx +41 -0
- package/src/feedback/feedback-dialog.tsx +16 -4
- package/src/feedback/feedback-mutation.ts +12 -33
- package/src/feedback/feedback-public-list.tsx +1 -7
- package/src/feedback/feedback-record.ts +5 -0
- package/src/feedback/feedback-row-detail-labels.ts +1 -8
- package/src/feedback/feedback-row-detail.tsx +21 -58
- package/src/feedback/feedback-status-undo.ts +4 -18
- package/src/feedback/feedback-submit-dialog.tsx +15 -2
- package/src/feedback/feedback-submit.tsx +36 -3
- package/src/feedback/feedback-thread.tsx +0 -10
- package/src/feedback.ts +89 -48
- package/src/hooks/use-hotkey.ts +24 -1
- package/src/i18n/defaults.ts +0 -4
- package/src/i18n/german.ts +4 -19
- package/src/i18n/kit-labels.tsx +5 -14
- package/src/i18n/locales/es.ts +4 -19
- package/src/i18n/locales/fr.ts +4 -19
- package/src/i18n/locales/hu.ts +4 -19
- package/src/i18n/locales/it.ts +4 -20
- package/src/i18n/locales/zh.ts +4 -19
- package/src/i18n/review.ts +9 -4
- package/src/i18n/shared-labels.ts +0 -1
- package/src/index.ts +44 -114
- package/src/lib/dates.ts +24 -2
- package/src/lib/format.ts +66 -3
- package/src/lib/intl-cache.ts +4 -2
- package/src/lib/translation-review.ts +52 -0
- package/src/rhf/fields.tsx +2 -2
- package/src/search/search-index.ts +0 -15
- package/src/search.ts +8 -8
- package/src/shell/account-menu-language.tsx +7 -27
- package/src/shell/account-menu-text-size.tsx +13 -32
- package/src/shell/app-shell.tsx +0 -13
- package/src/shell/company-switcher.tsx +1 -1
- package/src/shell/dev-menu.tsx +1 -1
- package/src/shell/top-bar-parts-labels.ts +1 -1
- package/src/shell.ts +17 -44
- package/src/sync.ts +2 -15
- package/src/theme/chart-palette.ts +0 -2
- package/tokens.css +4 -4
- package/dist/billing/dialog-close.d.ts +0 -29
- package/dist/billing/dialog-close.js +0 -8
- package/dist/billing/dialog-close.js.map +0 -1
- package/dist/components/field-sync-labels.d.ts +0 -3
- package/dist/components/field-sync-labels.js +0 -12
- package/dist/components/field-sync-labels.js.map +0 -1
- package/dist/components/field-sync.d.ts +0 -186
- package/dist/components/field-sync.js +0 -269
- package/dist/components/field-sync.js.map +0 -1
- package/dist/components/section-nav.d.ts +0 -44
- package/dist/components/section-nav.js +0 -33
- package/dist/components/section-nav.js.map +0 -1
- package/dist/components/sign-chip-labels.d.ts +0 -3
- package/dist/components/sign-chip-labels.js +0 -11
- package/dist/components/sign-chip-labels.js.map +0 -1
- package/dist/components/sign-chip.d.ts +0 -77
- package/dist/components/sign-chip.js +0 -47
- package/dist/components/sign-chip.js.map +0 -1
- package/dist/lib/isin.d.ts +0 -38
- package/dist/lib/isin.js +0 -36
- package/dist/lib/isin.js.map +0 -1
- package/dist/shell/role-switcher.d.ts +0 -28
- package/dist/shell/role-switcher.js +0 -31
- package/dist/shell/role-switcher.js.map +0 -1
- package/src/billing/dialog-close.ts +0 -34
- package/src/components/field-sync-labels.ts +0 -14
- package/src/components/field-sync.tsx +0 -504
- package/src/components/section-nav.tsx +0 -72
- package/src/components/sign-chip-labels.ts +0 -13
- package/src/components/sign-chip.tsx +0 -133
- package/src/lib/isin.ts +0 -72
- package/src/shell/role-switcher.tsx +0 -53
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n ComponentPropsWithoutRef,\n KeyboardEvent,\n MouseEvent as ReactMouseEvent,\n PointerEvent as ReactPointerEvent,\n ReactNode,\n Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBreakpoint } from \"../hooks/use-breakpoint\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useDialogParam, type DialogParam } from \"../hooks/use-search-param-state\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from \"../hooks/use-close-transition\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n // `md:` as the panel's own CSS reads it, at the text size in force: 768 px at Normal,\n // 960 at Large. `innerWidth >= 768` dragged the bottom sheet of an 800 px window at\n // Large (refactor audit 2026-10-30, DUP-9). Without `matchMedia` (jsdom), the desktop.\n const wide = useBreakpoint(\"md\", true);\n\n const endDrag = () => {\n from.current = null;\n };\n\n return {\n /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own\n * closes, so \"the position resets when the dialog closes\" needs saying. */\n reset: () => setOffset(null),\n style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n handlers: !enabled\n ? undefined\n : {\n onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n if (e.button !== 0 || !wide) return;\n const target = e.target as HTMLElement;\n // Only the panel itself and its non-interactive chrome start a drag; a\n // press inside any control belongs to that control.\n if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n try {\n // Capture is what lets the handlers live on the panel: every later\n // pointer event for this pointer retargets here, so the drag keeps\n // working once the pointer outruns the panel's own box — which it always\n // does, since the panel moves out from under it.\n e.currentTarget.setPointerCapture(e.pointerId);\n } catch {\n // jsdom implements no pointer capture, and a browser throws\n // NotFoundError for a pointerId that is already gone. Neither is worth\n // refusing the drag: uncaptured, the panel still gets the moves that\n // land on it.\n }\n },\n onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n const start = from.current;\n if (!start) return;\n setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n },\n onPointerUp: endDrag,\n // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n // lost capture both mean no `pointerup` is coming. Without them the drag would\n // stay \"live\" and the next move over the panel would jump it.\n onPointerCancel: endDrag,\n onLostPointerCapture: endDrag,\n },\n };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n const pressStartedOnBackdrop = useRef(false);\n return {\n onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n pressStartedOnBackdrop.current = e.target === e.currentTarget;\n },\n onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n const started = pressStartedOnBackdrop.current;\n pressStartedOnBackdrop.current = false;\n if (started && e.target === e.currentTarget) onClose();\n },\n };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n /** Invoked on backdrop click and on Escape. */\n onClose: () => void;\n /**\n * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.\n *\n * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,\n * which is every caller before this prop and stays exactly as it was. That idiom has\n * one blind spot: a close the CALLER decides on (a save that succeeded, a\n * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,\n * because there is nothing left to animate. kastlan's `FormModal` was nothing but an\n * `if (!open) return null` gate in front of this.\n *\n * Passed, the component stays mounted while closed and renders nothing, and a flip\n * to `false` plays the same exit a dismissal does before the panel goes. The focus\n * trap, the scroll lock and the Back-gesture history entry are held only while\n * `open` is true — they are released the moment it turns false, so focus is back on\n * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,\n * Back, the frame's X) animates first and then calls `onClose`; the `false` that\n * comes back from it is not animated a second time.\n *\n * The body is unmounted once the exit has finished, as it is today, so a form inside\n * still starts fresh on the next open.\n */\n open?: boolean;\n /** `\"alertdialog\"` for a dialog that interrupts to ask a question the user must\n * answer (a confirmation) — screen readers announce it with more urgency. Only the\n * two dialog roles are allowed: the panel stays modal either way. */\n role?: \"dialog\" | \"alertdialog\";\n children: ReactNode;\n /**\n * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less\n * the backdrop's margin, capped at 110rem).\n *\n * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n * reach it — the payee backfill's preview table and the price-merge dialog, both\n * of which hold a list and several fields rather than one question. A caller\n * patching a missing size IS the signal that the size is missing, and a\n * hand-written width in a `className` is a width nothing else can line up with.\n *\n * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose\n * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured\n * table pasted from a spreadsheet and had patched themselves to\n * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size=\"lg\"`\n * and then `max-w-5xl`. The cap is the generous one of the two, because a table\n * squeezed into a box in the middle of a wide screen is a table scrolled sideways\n * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.\n * In rem, so it grows with the text size until the screen stops it.\n *\n * The panel is `w-full` under every one of them, so the cap only bites once the\n * viewport is wider than it: on a phone all four are the same full-width bottom\n * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n */\n size?: \"md\" | \"lg\" | \"xl\" | \"2xl\";\n /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n className?: string;\n /** id of the heading element, wired to `aria-labelledby`. */\n labelledBy?: string;\n /**\n * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a\n * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see\n * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule\n * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself\n * no longer holds the dialog open (Wave 2, DUP-1).\n */\n onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n /**\n * Drop the backdrop's mobile margin so the panel can reach the screen edges\n * (a full-screen sheet on phones). The panel still needs its own\n * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n */\n fullBleed?: boolean;\n /**\n * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n * blocks something.\"*).\n *\n * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n * behind it — the feedback composer is the case, an ordinary form is not, and a\n * draggable panel that has nothing to reveal is a control that can only get lost.\n *\n * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n * choice worth persisting, and the position resets when the dialog closes. On a\n * phone the panel is a bottom sheet the width of the screen, so dragging is\n * suppressed there — there is nothing beside it to see.\n */\n draggable?: boolean;\n /**\n * Bind the open state to a URL search param (0.12.0): `\"edit\"` is open while\n * `?edit` is in the query, `{ key: \"dialog\", value: \"create-lease\" }` while\n * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —\n * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s\n * setter, a `<Link>`, a shared link, a reload.\n *\n * kastlan's `useDialogParam` did this beside the dialog, so its open state could be\n * deep-linked and captured in a feedback report. Here it also owns the history:\n * opening through `useDialogParam` pushes an entry, so the Back gesture closes the\n * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over\n * that entry rather than stacking a second one. The dialog's own Back handling\n * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's\n * entry already is one, and two would take two Back presses to close one dialog.\n *\n * `onClose` still runs, after the param is cleared. Requires a react-router Router.\n */\n urlParam?: DialogParam;\n /**\n * A request the dialog started is in flight: it stays until the caller says otherwise\n * (refactor audit 2026-10-30, DUP-3). A request that has left cannot be called back by\n * closing the dialog, and the dialog should not pretend it can.\n *\n * While true the panel is `aria-busy`, and every dismissal is refused before the exit\n * starts — the backdrop, Escape, Back, the frame's X and an `actions(close)` button —\n * so nothing lowers and snaps back. Five dialogs used to hold Escape by hand, in an\n * `onKeyDown`, and nothing else: a backdrop press or Android's Back closed four of them\n * mid-request, and CancelSubscriptionConfirm, which guarded its `onClose`, lowered its\n * panel and popped it back up.\n *\n * Escape still goes to whatever is open over the dialog first (a list, a tooltip); the\n * press that reaches the dialog's own layer is taken and dropped. A refused Back puts\n * the dialog's history entry back, so the Back after the request closes the dialog\n * rather than leaving the page.\n *\n * Not held: a close the caller decides on (`open={false}`, unmounting), and — with\n * `urlParam` — Back, which leaves the param's entry like any other navigation. A close\n * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one\n * made from an effect that depends on that close (ReauthDialog's on a resolved submit)\n * runs again once `busy` turns false, because the close changes with it.\n */\n busy?: boolean;\n /**\n * The PANEL — the `role=\"dialog\"` element the rest of the props go on, not the\n * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on\n * `FullBleedDialog`). Merged with the panel's own ref, which the focus\n * trap holds. Set while the panel is in the document: `null` while a dialog with\n * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.\n */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The URL-bound dialog: the param is the open state, and closing clears it. A\n * component of its own so the router hook is only called by a `Modal` that asked for\n * it — a plain `Modal` must keep working with no Router above it.\n */\nfunction UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {\n const [open, setOpen] = useDialogParam(urlParam);\n // Closed from here the moment the dismissal is decided. Going back is a traversal\n // the browser lands a task later, and between the two the param still says \"open\":\n // without this the panel, already lowered, would pop back up for that task.\n const [leaving, setLeaving] = useState(false);\n if (leaving && !open) setLeaving(false);\n return (\n <ModalPanel\n {...rest}\n open={open && !leaving}\n ownHistoryEntry={false}\n onClose={() => {\n setLeaving(true);\n setOpen(false);\n onClose();\n }}\n />\n );\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal(props: ModalProps) {\n return props.urlParam !== undefined ? (\n <UrlParamModal {...props} urlParam={props.urlParam} />\n ) : (\n <ModalPanel {...props} />\n );\n}\n\nfunction ModalPanel({\n onClose,\n open,\n children,\n size = \"md\",\n className,\n labelledBy,\n onKeyDown,\n fullBleed,\n draggable,\n style,\n role = \"dialog\",\n urlParam: _urlParam,\n busy = false,\n \"aria-busy\": ariaBusy,\n ownHistoryEntry = true,\n ref,\n ...rest\n}: ModalProps & {\n /** False when the URL already holds an entry for this dialog — see `urlParam`. */\n ownHistoryEntry?: boolean;\n}) {\n const panelRef = useRef<HTMLDivElement>(null);\n // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not\n // detached and re-attached on every render.\n const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n const drag = useDragOffset(Boolean(draggable));\n // Without `open`, mounted means open — the constant `true` every hook below used to\n // be given. With it, `open` itself.\n const active = open ?? true;\n\n // Whether the last close came through `requestClose`, i.e. has ALREADY been\n // animated. Set in the same batch as the caller's `onClose`, so the render that sees\n // `open` turn false also sees this and does not lower the panel a second time.\n const [dismissed, setDismissed] = useState(false);\n // The exit of a close the caller decided on (only reachable with `open`). Adjusted\n // during render when `open` flips — `Collapse`'s pattern — so the very render that\n // closes it already paints the `-out` classes rather than a frame of nothing.\n const [exiting, setExiting] = useState(false);\n const [prevOpen, setPrevOpen] = useState(open);\n if (open !== prevOpen) {\n setPrevOpen(open);\n setDismissed(false);\n setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());\n if (open) drag.reset();\n }\n useEffect(() => {\n if (!exiting) return;\n const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);\n return () => clearTimeout(timer);\n }, [exiting]);\n\n // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n // animation later. A caller that closes the dialog ITSELF — after a save, say —\n // unmounts with no exit unless it passes `open`, which is what that prop is for.\n const { closing, requestClose: lower } = useCloseTransition(() => {\n setDismissed(true);\n onClose();\n });\n // `busy` (DUP-3) refuses HERE, before `lower` starts the exit: a refusal in the\n // caller's `onClose` comes 220ms too late, after the panel has already gone down.\n // A new function when `busy` flips, so a close asked for from an effect while busy\n // (a resolved action whose caller's `isPending` trails its promise) runs again.\n const requestClose = useCallback(() => {\n if (!busy) lower();\n }, [busy, lower]);\n // A panel on its way out after `open` turned false is already closed: a press on\n // its fading backdrop must not report a second close.\n const backdropClose = useBackdropClose(active ? requestClose : () => {});\n // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n // this the only way out of a dialog is finding its close button — and Back, the\n // gesture everyone reaches for, navigated the page underneath instead (#172).\n // Held only while open: a closed `open={false}` dialog must not own a history entry.\n // `held`: a Back while busy is refused, and the entry it took is put back.\n useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });\n\n // Through the shared hook and not by hand: this component's own save/restore copy\n // was one half of the pair that left the page permanently unscrollable when a dialog\n // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.\n useBodyScrollLock(active);\n\n // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n // users. Through the shared hook since this component is where it came from — the\n // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n // and nesting, none of which this copy had. Released when `open` turns false, which\n // hands focus back to the trigger while the panel is still on its way out.\n //\n // \"The panel itself\" only when nothing inside asked for focus: a field the app\n // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took\n // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the\n // one the app chose to show; the trigger still gets focus back on close.\n useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n const leaving = closing || exiting;\n\n // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a\n // tooltip opened inside takes the key before the dialog does, wherever focus is —\n // and the dialog gets it even when focus is not in the panel.\n const layer = useDismissLayer(active, requestClose);\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n // The caller's handler sees Escape only while this dialog is the layer on top: a\n // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).\n runOwnKeyDown(e, onKeyDown, layer);\n // To whatever is on top — this dialog, unless something opened over it — and\n // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.\n takeEscape(e);\n };\n\n // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n // expanded transaction editor (feedback #320). The tour/command-palette overlays\n // already portal for the same reason.\n if (!active && !exiting) return null;\n return createPortal(\n <div\n // Out of the accessibility tree for the length of a caller-driven exit: focus is\n // already back on the page, and an `aria-modal` panel that is leaving would hide\n // that page from a screen reader for 220ms. Not `inert` — that would let a tap\n // fall through the fading backdrop to the row underneath.\n aria-hidden={exiting || undefined}\n // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):\n // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.\n data-kit-layer=\"backdrop\"\n className={cn(\n // Live #320. The panel below rises only where it is bottom-anchored: from md up\n // it is centred, and a centred box sliding up from off-screen reads as a\n // different component arriving rather than as the same one settling.\n leaving ? \"animate-overlay-out\" : \"animate-overlay\",\n \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n )}\n {...backdropClose}\n >\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always\n role=\"dialog\" or \"alertdialog\" (the ternary hides that from the rule): `onKeyDown`\n is Escape-to-close per the APG dialog pattern, and the drag handlers are\n swipe-to-dismiss, whose keyboard path is that same Escape. */}\n <div\n // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n // wrapper that spreads its own props through to this one cannot then take away\n // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n // losing any of the three is silent, and the symptom (a dialog a screen reader\n // walks straight out of) shows up nowhere near the call site that caused it.\n {...rest}\n ref={setPanel}\n // Normalised at runtime too: an untyped caller's `role=\"presentation\"` must not\n // take the dialog role away (props-passthrough pins that).\n role={role === \"alertdialog\" ? \"alertdialog\" : \"dialog\"}\n aria-modal=\"true\"\n // A caller's own `aria-busy` (a preview still loading) is kept beside `busy`.\n aria-busy={busy ? true : ariaBusy}\n aria-labelledby={labelledBy}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n {...drag.handlers}\n // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n // assigning it outright would drop a caller's own `style` on every render but\n // the ones where the panel is being dragged.\n style={{ ...style, ...drag.style }}\n className={cn(\n leaving ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n \"w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none\",\n { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\", \"2xl\": \"max-w-[110rem]\" }[size],\n // A panel taller than the screen has to scroll ITSELF. The backdrop is\n // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n // without this the overflow simply had nowhere to go: on a phone the panel\n // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n // went past it could not be reached by any gesture (Keksdose live #254, on\n // the price-merge dialog — but it was every dialog with more than a screen\n // of content). `max-h-full` resolves against the backdrop's content box,\n // which is the viewport minus its own padding, so the panel stops exactly\n // where the screen does; `overscroll-contain` keeps the fling inside it.\n //\n // Three callers had already patched themselves with `max-h-[90vh]` +\n // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n // the default they should not have needed.\n \"max-h-full overflow-y-auto overscroll-contain\",\n \"p-4\",\n // The grab affordance sits on the panel's own top strip: a drag handle of\n // its own would be one more control in a dialog that is mostly one field.\n draggable && \"md:[&>*:first-child]:cursor-grab\",\n className,\n )}\n >\n <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n </div>\n </div>,\n document.body,\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n ComponentPropsWithoutRef,\n KeyboardEvent,\n MouseEvent as ReactMouseEvent,\n PointerEvent as ReactPointerEvent,\n ReactNode,\n Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBreakpoint } from \"../hooks/use-breakpoint\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useDialogParam, type DialogParam } from \"../hooks/use-search-param-state\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from \"../hooks/use-close-transition\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n // `md:` as the panel's own CSS reads it, at the text size in force: 768 px at Normal,\n // 960 at Large. `innerWidth >= 768` dragged the bottom sheet of an 800 px window at\n // Large (refactor audit 2026-10-30, DUP-9). Without `matchMedia` (jsdom), the desktop.\n const wide = useBreakpoint(\"md\", true);\n\n const endDrag = () => {\n from.current = null;\n };\n\n return {\n /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own\n * closes, so \"the position resets when the dialog closes\" needs saying. */\n reset: () => setOffset(null),\n style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n handlers: !enabled\n ? undefined\n : {\n onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n if (e.button !== 0 || !wide) return;\n const target = e.target as HTMLElement;\n // Only the panel itself and its non-interactive chrome start a drag; a\n // press inside any control belongs to that control.\n if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n try {\n // Capture is what lets the handlers live on the panel: every later\n // pointer event for this pointer retargets here, so the drag keeps\n // working once the pointer outruns the panel's own box — which it always\n // does, since the panel moves out from under it.\n e.currentTarget.setPointerCapture(e.pointerId);\n } catch {\n // jsdom implements no pointer capture, and a browser throws\n // NotFoundError for a pointerId that is already gone. Neither is worth\n // refusing the drag: uncaptured, the panel still gets the moves that\n // land on it.\n }\n },\n onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n const start = from.current;\n if (!start) return;\n setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n },\n onPointerUp: endDrag,\n // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n // lost capture both mean no `pointerup` is coming. Without them the drag would\n // stay \"live\" and the next move over the panel would jump it.\n onPointerCancel: endDrag,\n onLostPointerCapture: endDrag,\n },\n };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n const pressStartedOnBackdrop = useRef(false);\n return {\n onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n pressStartedOnBackdrop.current = e.target === e.currentTarget;\n },\n onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n const started = pressStartedOnBackdrop.current;\n pressStartedOnBackdrop.current = false;\n if (started && e.target === e.currentTarget) onClose();\n },\n };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n /** Invoked on backdrop click and on Escape. */\n onClose: () => void;\n /**\n * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.\n *\n * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,\n * which is every caller before this prop and stays exactly as it was. That idiom has\n * one blind spot: a close the CALLER decides on (a save that succeeded, a\n * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,\n * because there is nothing left to animate. kastlan's `FormModal` was nothing but an\n * `if (!open) return null` gate in front of this.\n *\n * Passed, the component stays mounted while closed and renders nothing, and a flip\n * to `false` plays the same exit a dismissal does before the panel goes. The focus\n * trap, the scroll lock and the Back-gesture history entry are held only while\n * `open` is true — they are released the moment it turns false, so focus is back on\n * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,\n * Back, the frame's X) animates first and then calls `onClose`; the `false` that\n * comes back from it is not animated a second time.\n *\n * The body is unmounted once the exit has finished, as it is today, so a form inside\n * still starts fresh on the next open.\n */\n open?: boolean;\n /** `\"alertdialog\"` for a dialog that interrupts to ask a question the user must\n * answer (a confirmation) — screen readers announce it with more urgency. Only the\n * two dialog roles are allowed: the panel stays modal either way. */\n role?: \"dialog\" | \"alertdialog\";\n children: ReactNode;\n /**\n * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less\n * the backdrop's margin, capped at 110rem).\n *\n * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n * reach it — the payee backfill's preview table and the price-merge dialog, both\n * of which hold a list and several fields rather than one question. A caller\n * patching a missing size IS the signal that the size is missing, and a\n * hand-written width in a `className` is a width nothing else can line up with.\n *\n * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose\n * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured\n * table pasted from a spreadsheet and had patched themselves to\n * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size=\"lg\"`\n * and then `max-w-5xl`. The cap is the generous one of the two, because a table\n * squeezed into a box in the middle of a wide screen is a table scrolled sideways\n * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.\n * In rem, so it grows with the text size until the screen stops it.\n *\n * The panel is `w-full` under every one of them, so the cap only bites once the\n * viewport is wider than it: on a phone all four are the same full-width bottom\n * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n */\n size?: \"md\" | \"lg\" | \"xl\" | \"2xl\";\n /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n className?: string;\n /** id of the heading element, wired to `aria-labelledby`. */\n labelledBy?: string;\n /**\n * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a\n * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see\n * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule\n * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself\n * no longer holds the dialog open (Wave 2, DUP-1).\n */\n onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n /**\n * Drop the backdrop's mobile margin so the panel can reach the screen edges\n * (a full-screen sheet on phones). The panel still needs its own\n * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n */\n fullBleed?: boolean;\n /**\n * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n * blocks something.\"*).\n *\n * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n * behind it — the feedback composer is the case, an ordinary form is not, and a\n * draggable panel that has nothing to reveal is a control that can only get lost.\n *\n * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n * choice worth persisting, and the position resets when the dialog closes. On a\n * phone the panel is a bottom sheet the width of the screen, so dragging is\n * suppressed there — there is nothing beside it to see.\n */\n draggable?: boolean;\n /**\n * Bind the open state to a URL search param (0.12.0): `\"edit\"` is open while\n * `?edit` is in the query, `{ key: \"dialog\", value: \"create-lease\" }` while\n * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —\n * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s\n * setter, a `<Link>`, a shared link, a reload.\n *\n * kastlan's `useDialogParam` did this beside the dialog, so its open state could be\n * deep-linked and captured in a feedback report. Here it also owns the history:\n * opening through `useDialogParam` pushes an entry, so the Back gesture closes the\n * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over\n * that entry rather than stacking a second one. The dialog's own Back handling\n * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's\n * entry already is one, and two would take two Back presses to close one dialog.\n *\n * `onClose` still runs, after the param is cleared. Requires a react-router Router.\n */\n urlParam?: DialogParam;\n /**\n * A request the dialog started is in flight: it stays until the caller says otherwise\n * (refactor audit 2026-10-30, DUP-3). A request that has left cannot be called back by\n * closing the dialog, and the dialog should not pretend it can.\n *\n * While true the panel is `aria-busy`, and every dismissal is refused before the exit\n * starts — the backdrop, Escape, Back, the frame's X and an `actions(close)` button —\n * so nothing lowers and snaps back. Five dialogs used to hold Escape by hand, in an\n * `onKeyDown`, and nothing else: a backdrop press or Android's Back closed four of them\n * mid-request, and CancelSubscriptionConfirm, which guarded its `onClose`, lowered its\n * panel and popped it back up.\n *\n * Escape still goes to whatever is open over the dialog first (a list, a tooltip); the\n * press that reaches the dialog's own layer is taken and dropped. A refused Back puts\n * the dialog's history entry back, so the Back after the request closes the dialog\n * rather than leaving the page.\n *\n * Not held: a close the caller decides on (`open={false}`, unmounting), and — with\n * `urlParam` — Back, which leaves the param's entry like any other navigation. A close\n * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one\n * made from an effect that depends on that close (ReauthDialog's on a resolved submit)\n * runs again once `busy` turns false, because the close changes with it.\n *\n * A dialog that must not be dismissed while NOTHING runs — a code shown once — wants\n * {@link ModalProps.held} instead: the same hold without the request.\n */\n busy?: boolean;\n /**\n * Hold the dialog open: every dismissal `busy` refuses is refused — the backdrop,\n * Escape, Back, the frame's X and an `actions(close)` button — but no request is\n * claimed: the panel is not `aria-busy`. For a dialog the user must not lose by\n * accident while nothing is in flight (keksdose audit follow-up, 2026-11-01): keksdose's\n * one-time recovery code (auth/recovery-code-pane.tsx) refused in its own `onClose`,\n * which comes after the exit has started and cannot hold Back — the first Back spent\n * the dialog's history entry, and the second left the page, and the code with it.\n * Held, a refused Back puts the entry back, so every Back is held, not only the first.\n * The refusal is silent, as under `busy` — `onClose` is not called — so what the\n * dialog is waiting for is said up front, not after a refused press.\n *\n * The way out is a close the CALLER decides on, which is never held: `open={false}`\n * (the exit still plays) or unmounting, from the dialog's own \"I have saved it\" button.\n * Not the `close` that `actions` and `headerActions` receive — that is the dialog's\n * own dismissal, and held like the rest.\n *\n * `DialogFrame`'s X is DISABLED while held, where under `busy` it stays enabled and its\n * press is dropped: a request is over in a moment, a hold lasts until the user acts,\n * and an X that does nothing for that long reads as broken. Disabled rather than\n * hidden, so the header does not reflow the moment the hold lifts; a caller that wants\n * it gone passes `closeButton={!held}`. Independent of `busy`: either one holds.\n */\n held?: boolean;\n /**\n * The PANEL — the `role=\"dialog\"` element the rest of the props go on, not the\n * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on\n * `FullBleedDialog`). Merged with the panel's own ref, which the focus\n * trap holds. Set while the panel is in the document: `null` while a dialog with\n * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.\n */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The URL-bound dialog: the param is the open state, and closing clears it. A\n * component of its own so the router hook is only called by a `Modal` that asked for\n * it — a plain `Modal` must keep working with no Router above it.\n */\nfunction UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {\n const [open, setOpen] = useDialogParam(urlParam);\n // Closed from here the moment the dismissal is decided. Going back is a traversal\n // the browser lands a task later, and between the two the param still says \"open\":\n // without this the panel, already lowered, would pop back up for that task.\n const [leaving, setLeaving] = useState(false);\n if (leaving && !open) setLeaving(false);\n return (\n <ModalPanel\n {...rest}\n open={open && !leaving}\n ownHistoryEntry={false}\n onClose={() => {\n setLeaving(true);\n setOpen(false);\n onClose();\n }}\n />\n );\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal(props: ModalProps) {\n return props.urlParam !== undefined ? (\n <UrlParamModal {...props} urlParam={props.urlParam} />\n ) : (\n <ModalPanel {...props} />\n );\n}\n\nfunction ModalPanel({\n onClose,\n open,\n children,\n size = \"md\",\n className,\n labelledBy,\n onKeyDown,\n fullBleed,\n draggable,\n style,\n role = \"dialog\",\n urlParam: _urlParam,\n busy = false,\n held = false,\n \"aria-busy\": ariaBusy,\n ownHistoryEntry = true,\n ref,\n ...rest\n}: ModalProps & {\n /** False when the URL already holds an entry for this dialog — see `urlParam`. */\n ownHistoryEntry?: boolean;\n}) {\n const panelRef = useRef<HTMLDivElement>(null);\n // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not\n // detached and re-attached on every render.\n const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n const drag = useDragOffset(Boolean(draggable));\n // Without `open`, mounted means open — the constant `true` every hook below used to\n // be given. With it, `open` itself.\n const active = open ?? true;\n\n // Whether the last close came through `requestClose`, i.e. has ALREADY been\n // animated. Set in the same batch as the caller's `onClose`, so the render that sees\n // `open` turn false also sees this and does not lower the panel a second time.\n const [dismissed, setDismissed] = useState(false);\n // The exit of a close the caller decided on (only reachable with `open`). Adjusted\n // during render when `open` flips — `Collapse`'s pattern — so the very render that\n // closes it already paints the `-out` classes rather than a frame of nothing.\n const [exiting, setExiting] = useState(false);\n const [prevOpen, setPrevOpen] = useState(open);\n if (open !== prevOpen) {\n setPrevOpen(open);\n setDismissed(false);\n setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());\n if (open) drag.reset();\n }\n useEffect(() => {\n if (!exiting) return;\n const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);\n return () => clearTimeout(timer);\n }, [exiting]);\n\n // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n // animation later. A caller that closes the dialog ITSELF — after a save, say —\n // unmounts with no exit unless it passes `open`, which is what that prop is for.\n const { closing, requestClose: lower } = useCloseTransition(() => {\n setDismissed(true);\n onClose();\n });\n // `busy` (DUP-3) and `held` refuse HERE, before `lower` starts the exit: a refusal in\n // the caller's `onClose` comes 220ms too late, after the panel has already gone down.\n // A new function when the hold flips, so a close asked for from an effect while busy\n // (a resolved action whose caller's `isPending` trails its promise) runs again.\n const holding = busy || held;\n const requestClose = useCallback(() => {\n if (!holding) lower();\n }, [holding, lower]);\n // A panel on its way out after `open` turned false is already closed: a press on\n // its fading backdrop must not report a second close.\n const backdropClose = useBackdropClose(active ? requestClose : () => {});\n // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n // this the only way out of a dialog is finding its close button — and Back, the\n // gesture everyone reaches for, navigated the page underneath instead (#172).\n // Held only while open: a closed `open={false}` dialog must not own a history entry.\n // `held`: a Back while busy or held is refused, and the entry it took is put back.\n useOverlayHistory(active && ownHistoryEntry, requestClose, { held: holding });\n\n // Through the shared hook and not by hand: this component's own save/restore copy\n // was one half of the pair that left the page permanently unscrollable when a dialog\n // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.\n useBodyScrollLock(active);\n\n // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n // users. Through the shared hook since this component is where it came from — the\n // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n // and nesting, none of which this copy had. Released when `open` turns false, which\n // hands focus back to the trigger while the panel is still on its way out.\n //\n // \"The panel itself\" only when nothing inside asked for focus: a field the app\n // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took\n // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the\n // one the app chose to show; the trigger still gets focus back on close.\n useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n const leaving = closing || exiting;\n\n // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a\n // tooltip opened inside takes the key before the dialog does, wherever focus is —\n // and the dialog gets it even when focus is not in the panel.\n const layer = useDismissLayer(active, requestClose);\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n // The caller's handler sees Escape only while this dialog is the layer on top: a\n // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).\n runOwnKeyDown(e, onKeyDown, layer);\n // To whatever is on top — this dialog, unless something opened over it — and\n // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.\n takeEscape(e);\n };\n\n // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n // expanded transaction editor (feedback #320). The tour/command-palette overlays\n // already portal for the same reason.\n if (!active && !exiting) return null;\n return createPortal(\n <div\n // Out of the accessibility tree for the length of a caller-driven exit: focus is\n // already back on the page, and an `aria-modal` panel that is leaving would hide\n // that page from a screen reader for 220ms. Not `inert` — that would let a tap\n // fall through the fading backdrop to the row underneath.\n aria-hidden={exiting || undefined}\n // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):\n // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.\n data-kit-layer=\"backdrop\"\n className={cn(\n // Live #320. The panel below rises only where it is bottom-anchored: from md up\n // it is centred, and a centred box sliding up from off-screen reads as a\n // different component arriving rather than as the same one settling.\n leaving ? \"animate-overlay-out\" : \"animate-overlay\",\n \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n )}\n {...backdropClose}\n >\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always\n role=\"dialog\" or \"alertdialog\" (the ternary hides that from the rule): `onKeyDown`\n is Escape-to-close per the APG dialog pattern, and the drag handlers are\n swipe-to-dismiss, whose keyboard path is that same Escape. */}\n <div\n // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n // wrapper that spreads its own props through to this one cannot then take away\n // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n // losing any of the three is silent, and the symptom (a dialog a screen reader\n // walks straight out of) shows up nowhere near the call site that caused it.\n {...rest}\n ref={setPanel}\n // Normalised at runtime too: an untyped caller's `role=\"presentation\"` must not\n // take the dialog role away (props-passthrough pins that).\n role={role === \"alertdialog\" ? \"alertdialog\" : \"dialog\"}\n aria-modal=\"true\"\n // A caller's own `aria-busy` (a preview still loading) is kept beside `busy`.\n aria-busy={busy ? true : ariaBusy}\n aria-labelledby={labelledBy}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n {...drag.handlers}\n // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n // assigning it outright would drop a caller's own `style` on every render but\n // the ones where the panel is being dragged.\n style={{ ...style, ...drag.style }}\n className={cn(\n leaving ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n \"w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none\",\n { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\", \"2xl\": \"max-w-[110rem]\" }[size],\n // A panel taller than the screen has to scroll ITSELF. The backdrop is\n // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n // without this the overflow simply had nowhere to go: on a phone the panel\n // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n // went past it could not be reached by any gesture (Keksdose live #254, on\n // the price-merge dialog — but it was every dialog with more than a screen\n // of content). `max-h-full` resolves against the backdrop's content box,\n // which is the viewport minus its own padding, so the panel stops exactly\n // where the screen does; `overscroll-contain` keeps the fling inside it.\n //\n // Three callers had already patched themselves with `max-h-[90vh]` +\n // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n // the default they should not have needed.\n \"max-h-full overflow-y-auto overscroll-contain\",\n \"p-4\",\n // The grab affordance sits on the panel's own top strip: a drag handle of\n // its own would be one more control in a dialog that is mostly one field.\n draggable && \"md:[&>*:first-child]:cursor-grab\",\n className,\n )}\n >\n <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n </div>\n </div>,\n document.body,\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -49,7 +49,7 @@ export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWith
|
|
|
49
49
|
* 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps
|
|
50
50
|
* them on ONE row that scrolls sideways — faded at a cut edge, the current pill
|
|
51
51
|
* scrolled into view (the row only, never the page) — for a strip that must stay one
|
|
52
|
-
* line high, as
|
|
52
|
+
* line high, as a section's pages under a page title on a phone.
|
|
53
53
|
*/
|
|
54
54
|
layout?: "wrap" | "scroll";
|
|
55
55
|
/** The `<nav>` (or the `<div role="group">`) — hence `HTMLElement` (0.34, API-2,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/nav-pills.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface NavPillItem<T extends string> {\n value: T;\n label: ReactNode;\n /** Where the pill leads. With one it is a link (see `renderLink`); without, a button\n * that calls `onSelect`. */\n href?: string;\n /** A Lucide icon (or any component taking a `className`), before the label. */\n icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n /** Buttons only — a link cannot be disabled. */\n disabled?: boolean;\n}\n\n/** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link\n * — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface NavPillLinkProps {\n href: string;\n className: string;\n children: ReactNode;\n \"aria-current\": NavPillsCurrent | undefined;\n onClick: (e: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/** The `aria-current` token the current pill carries. */\nexport type NavPillsCurrent = \"page\" | \"step\" | \"location\" | \"true\";\n\nexport interface NavPillsProps<T extends string> extends Omit<\n ComponentPropsWithoutRef<\"nav\">,\n \"children\" | \"onSelect\"\n> {\n items: NavPillItem<T>[];\n /** The pill that is current. `null` or a value not in `items`: none is. */\n current: T | null;\n /** Called with the pill's value on a click — of a button, and of a link too (before\n * the router follows it), for a caller that keeps the choice in state as well. */\n onSelect?: (value: T) => void;\n /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n * `href`), then `<a>`. The API `Breadcrumbs`, `Chip` and `ListItem` share. */\n renderLink?: (props: NavPillLinkProps) => ReactElement;\n /** What `aria-current` says on the current pill. Default `page` where the items\n * are links and `true` where they are buttons (keksdose's swipe-surface picker\n * switches a panel on the same page, which is not a page). */\n currentType?: NavPillsCurrent;\n /** `sm`: 12px pills — the compact size of a {@link ToggleGroup}. Default `md`. */\n size?: \"sm\" | \"md\";\n /** Render a `<nav>` landmark (default) or a plain `<div role=\"group\">` for a picker\n * that is not the page's navigation. Name either with `aria-label`. */\n landmark?: boolean;\n /** Classes for every pill. */\n itemClassName?: string;\n /**\n * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps\n * them on ONE row that scrolls sideways — faded at a cut edge, the current pill\n * scrolled into view (the row only, never the page) — for a strip that must stay one\n * line high, as {@link SectionNav} under a page title on a phone.\n */\n layout?: \"wrap\" | \"scroll\";\n /** The `<nav>` (or the `<div role=\"group\">`) — hence `HTMLElement` (0.34, API-2,\n * refactor audit 2026-10). */\n ref?: Ref<HTMLElement>;\n}\n\n// The pill is a ToggleGroup segment's (`rounded`, `px-3 py-1.5`, the inverse fill for\n// the current one), so a strip of these beside a segmented control reads as the same\n// family. Unlike the segments, a pill never truncates: the strip WRAPS instead. Its focus\n// ring is the kit's one focus frame (text-size §5), in brand; until 0.34 it copied the\n// segment's `ring-strong` too (refactor audit 2026-10, DOC-7).\nconst PILL = `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING} [&_svg]:size-4 [&_svg]:shrink-0`;\nconst PILL_SM = \"gap-1 px-2 py-1 text-xs [&_svg]:size-3.5\";\nconst PILL_CURRENT = \"bg-inverse text-inverse\";\nconst PILL_IDLE = \"text-secondary hover:bg-hover hover:text-primary\";\nconst PILL_DISABLED = \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-secondary\";\n\n/**\n * A set of links or buttons that WRAPS onto as many rows as it needs, the current one\n * filled and marked `aria-current`.\n *\n * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four\n * surface names that do not fit a 406px phone, and a sideways scroll would hide the\n * ones that do not fit behind a gesture nothing announces (live #332: *\"Have the tabs\n * in more rows, rather than scrolling sideways\"*). It is not {@link Tabs} (which\n * scrolls; its multirow `wrap` went in 0.41) because its items are not tabs: a `role=\"tab\"` promises a tabpanel, a roving tab\n * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest\n * of a card) promises none of that. So every pill is its own tab stop, the set is a\n * list (a screen reader hears \"list, 4 items\"), and \"current\" is `aria-current` — the\n * attribute a link to where you already are carries.\n */\nexport function NavPills<T extends string>({\n items,\n current,\n onSelect,\n renderLink,\n currentType,\n size = \"md\",\n landmark = true,\n itemClassName,\n layout = \"wrap\",\n className,\n ref,\n ...rest\n}: NavPillsProps<T>) {\n const kitLink = useKitLink();\n const Root = landmark ? \"nav\" : \"div\";\n const scroll = layout === \"scroll\";\n const listRef = useRef<HTMLUListElement>(null);\n const fade = useStripFade(listRef);\n // The current pill into view — the row only, never the page.\n useLayoutEffect(() => {\n const list = listRef.current;\n const currentPill = list?.querySelector<HTMLElement>(\"[aria-current]\");\n if (scroll && list && currentPill) scrollIntoStrip(list, currentPill);\n }, [scroll, current]);\n return (\n <Root\n {...rest}\n ref={ref as Ref<HTMLDivElement> | undefined}\n role={landmark ? undefined : \"group\"}\n className={cn(\"min-w-0\", className)}\n >\n <ul\n ref={listRef}\n className={cn(\n \"m-0 flex list-none gap-1 p-0\",\n scroll ? \"flex-nowrap overflow-x-auto overscroll-x-contain [scrollbar-width:none]\" : \"flex-wrap\",\n )}\n data-overflow={scroll ? fade.overflow : undefined}\n style={scroll && fade.mask ? { maskImage: fade.mask, WebkitMaskImage: fade.mask } : undefined}\n >\n {items.map((item) => {\n const isCurrent = item.value === current;\n const Icon = item.icon;\n const pillClass = cn(\n PILL,\n size === \"sm\" && PILL_SM,\n isCurrent ? PILL_CURRENT : PILL_IDLE,\n item.disabled && item.href === undefined && PILL_DISABLED,\n itemClassName,\n );\n const children = (\n <>\n {Icon && <Icon aria-hidden />}\n {item.label}\n </>\n );\n let pill: ReactNode;\n if (item.href !== undefined) {\n const props: NavPillLinkProps = {\n href: item.href,\n className: pillClass,\n children,\n \"aria-current\": isCurrent ? (currentType ?? \"page\") : undefined,\n onClick: () => onSelect?.(item.value),\n };\n const kit = pickLinkRenderer<NavPillLinkProps>(undefined, kitLink, item.href);\n pill = renderLink ? (\n renderLink(props)\n ) : kit ? (\n <RenderedKitLink render={kit} props={props} />\n ) : (\n <a\n href={props.href}\n className={props.className}\n aria-current={props[\"aria-current\"]}\n onClick={props.onClick}\n >\n {props.children}\n </a>\n );\n } else {\n pill = (\n <button\n type=\"button\"\n disabled={item.disabled}\n aria-current={isCurrent ? (currentType ?? \"true\") : undefined}\n onClick={() => onSelect?.(item.value)}\n className={pillClass}\n >\n {children}\n </button>\n );\n }\n return (\n <li key={item.value} className={cn(\"flex\", scroll && \"shrink-0\")}>\n {pill}\n </li>\n );\n })}\n </ul>\n </Root>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/nav-pills.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\nexport interface NavPillItem<T extends string> {\n value: T;\n label: ReactNode;\n /** Where the pill leads. With one it is a link (see `renderLink`); without, a button\n * that calls `onSelect`. */\n href?: string;\n /** A Lucide icon (or any component taking a `className`), before the label. */\n icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n /** Buttons only — a link cannot be disabled. */\n disabled?: boolean;\n}\n\n/** What {@link NavPillsProps.renderLink} is handed. Spread it onto your router's link\n * — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface NavPillLinkProps {\n href: string;\n className: string;\n children: ReactNode;\n \"aria-current\": NavPillsCurrent | undefined;\n onClick: (e: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/** The `aria-current` token the current pill carries. */\nexport type NavPillsCurrent = \"page\" | \"step\" | \"location\" | \"true\";\n\nexport interface NavPillsProps<T extends string> extends Omit<\n ComponentPropsWithoutRef<\"nav\">,\n \"children\" | \"onSelect\"\n> {\n items: NavPillItem<T>[];\n /** The pill that is current. `null` or a value not in `items`: none is. */\n current: T | null;\n /** Called with the pill's value on a click — of a button, and of a link too (before\n * the router follows it), for a caller that keeps the choice in state as well. */\n onSelect?: (value: T) => void;\n /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app\n * `href`), then `<a>`. The API `Breadcrumbs`, `Chip` and `ListItem` share. */\n renderLink?: (props: NavPillLinkProps) => ReactElement;\n /** What `aria-current` says on the current pill. Default `page` where the items\n * are links and `true` where they are buttons (keksdose's swipe-surface picker\n * switches a panel on the same page, which is not a page). */\n currentType?: NavPillsCurrent;\n /** `sm`: 12px pills — the compact size of a {@link ToggleGroup}. Default `md`. */\n size?: \"sm\" | \"md\";\n /** Render a `<nav>` landmark (default) or a plain `<div role=\"group\">` for a picker\n * that is not the page's navigation. Name either with `aria-label`. */\n landmark?: boolean;\n /** Classes for every pill. */\n itemClassName?: string;\n /**\n * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps\n * them on ONE row that scrolls sideways — faded at a cut edge, the current pill\n * scrolled into view (the row only, never the page) — for a strip that must stay one\n * line high, as a section's pages under a page title on a phone.\n */\n layout?: \"wrap\" | \"scroll\";\n /** The `<nav>` (or the `<div role=\"group\">`) — hence `HTMLElement` (0.34, API-2,\n * refactor audit 2026-10). */\n ref?: Ref<HTMLElement>;\n}\n\n// The pill is a ToggleGroup segment's (`rounded`, `px-3 py-1.5`, the inverse fill for\n// the current one), so a strip of these beside a segmented control reads as the same\n// family. Unlike the segments, a pill never truncates: the strip WRAPS instead. Its focus\n// ring is the kit's one focus frame (text-size §5), in brand; until 0.34 it copied the\n// segment's `ring-strong` too (refactor audit 2026-10, DOC-7).\nconst PILL = `inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none ${FOCUS_RING} [&_svg]:size-4 [&_svg]:shrink-0`;\nconst PILL_SM = \"gap-1 px-2 py-1 text-xs [&_svg]:size-3.5\";\nconst PILL_CURRENT = \"bg-inverse text-inverse\";\nconst PILL_IDLE = \"text-secondary hover:bg-hover hover:text-primary\";\nconst PILL_DISABLED = \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-secondary\";\n\n/**\n * A set of links or buttons that WRAPS onto as many rows as it needs, the current one\n * filled and marked `aria-current`.\n *\n * keksdose's swipe-settings card (swipe-settings-card:152) hand-rolled this: four\n * surface names that do not fit a 406px phone, and a sideways scroll would hide the\n * ones that do not fit behind a gesture nothing announces (live #332: *\"Have the tabs\n * in more rows, rather than scrolling sideways\"*). It is not {@link Tabs} (which\n * scrolls; its multirow `wrap` went in 0.41) because its items are not tabs: a `role=\"tab\"` promises a tabpanel, a roving tab\n * stop and arrow keys, and a set of links to pages (or of buttons that switch the rest\n * of a card) promises none of that. So every pill is its own tab stop, the set is a\n * list (a screen reader hears \"list, 4 items\"), and \"current\" is `aria-current` — the\n * attribute a link to where you already are carries.\n */\nexport function NavPills<T extends string>({\n items,\n current,\n onSelect,\n renderLink,\n currentType,\n size = \"md\",\n landmark = true,\n itemClassName,\n layout = \"wrap\",\n className,\n ref,\n ...rest\n}: NavPillsProps<T>) {\n const kitLink = useKitLink();\n const Root = landmark ? \"nav\" : \"div\";\n const scroll = layout === \"scroll\";\n const listRef = useRef<HTMLUListElement>(null);\n const fade = useStripFade(listRef);\n // The current pill into view — the row only, never the page.\n useLayoutEffect(() => {\n const list = listRef.current;\n const currentPill = list?.querySelector<HTMLElement>(\"[aria-current]\");\n if (scroll && list && currentPill) scrollIntoStrip(list, currentPill);\n }, [scroll, current]);\n return (\n <Root\n {...rest}\n ref={ref as Ref<HTMLDivElement> | undefined}\n role={landmark ? undefined : \"group\"}\n className={cn(\"min-w-0\", className)}\n >\n <ul\n ref={listRef}\n className={cn(\n \"m-0 flex list-none gap-1 p-0\",\n scroll ? \"flex-nowrap overflow-x-auto overscroll-x-contain [scrollbar-width:none]\" : \"flex-wrap\",\n )}\n data-overflow={scroll ? fade.overflow : undefined}\n style={scroll && fade.mask ? { maskImage: fade.mask, WebkitMaskImage: fade.mask } : undefined}\n >\n {items.map((item) => {\n const isCurrent = item.value === current;\n const Icon = item.icon;\n const pillClass = cn(\n PILL,\n size === \"sm\" && PILL_SM,\n isCurrent ? PILL_CURRENT : PILL_IDLE,\n item.disabled && item.href === undefined && PILL_DISABLED,\n itemClassName,\n );\n const children = (\n <>\n {Icon && <Icon aria-hidden />}\n {item.label}\n </>\n );\n let pill: ReactNode;\n if (item.href !== undefined) {\n const props: NavPillLinkProps = {\n href: item.href,\n className: pillClass,\n children,\n \"aria-current\": isCurrent ? (currentType ?? \"page\") : undefined,\n onClick: () => onSelect?.(item.value),\n };\n const kit = pickLinkRenderer<NavPillLinkProps>(undefined, kitLink, item.href);\n pill = renderLink ? (\n renderLink(props)\n ) : kit ? (\n <RenderedKitLink render={kit} props={props} />\n ) : (\n <a\n href={props.href}\n className={props.className}\n aria-current={props[\"aria-current\"]}\n onClick={props.onClick}\n >\n {props.children}\n </a>\n );\n } else {\n pill = (\n <button\n type=\"button\"\n disabled={item.disabled}\n aria-current={isCurrent ? (currentType ?? \"true\") : undefined}\n onClick={() => onSelect?.(item.value)}\n className={pillClass}\n >\n {children}\n </button>\n );\n }\n return (\n <li key={item.value} className={cn(\"flex\", scroll && \"shrink-0\")}>\n {pill}\n </li>\n );\n })}\n </ul>\n </Root>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from \"./field-base\";\n// The data alone (0.35): not the picker, which this field does not render.\nimport { CURRENCIES } from \"../currencies\";\nimport { FieldCaption, LockedReason, mergeRefs, type DisabledReasonDisplay, type FieldHelpProps } from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, formatResult } from \"../lib/calc\";\nimport { dataAttributes, type DataAttributes } from \"../lib/data-attributes\";\n\n/** {@link NumberInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n * wrapper typed itself off `ComponentProps<typeof NumberInput>` until then. */\nexport interface NumberInputProps extends FieldHelpProps, DataAttributes {\n /** The text, DOT-decimal (\"1234.5\", or a calculation being typed: \"12+5\"), as\n * `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it\n * in the locale's mark (see `locale`). A comma here is read as the decimal mark too,\n * never as grouping. */\n value: string;\n /** Fired on every keystroke with the text as a number reads it: grouping marks read\n * off (\"1.234,56\" → \"1234.56\" for a German typist, keksdose K5), the decimal mark\n * folded to a dot, operators kept so a typed expression survives. */\n onChange: (value: string) => void;\n /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n * fields so the save always sees the resolved number, never \"10+5\". And once per\n * calculator session — its \"=\", or closing it on a result not committed yet — never\n * per calculator keystroke (refactor audit 2026-10-30, INP-1: a result used to reach\n * `onChange` only, and the host kept the number from before the calculation). */\n onCommit?: (value: string) => void;\n label?: ReactNode;\n /** Names the field when it has no visible `label` (a table cell, a phone's display\n * shape). */\n \"aria-label\"?: string;\n /** Names for the calculator this field renders — its trigger, and the controls\n * inside the popover — and for the numpad sheet it opens on a phone. Overrides\n * for THIS field only: both resolve the `calculator` namespace of\n * `<UiKitProvider labels>` themselves, then fall back to English.\n *\n * `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}\n * exactly as {@link AmountInput} does, but had no way to pass it anything, so\n * the SAME keypad announced itself in German when a money field opened it and in\n * English when a goal target did. */\n labels?: {\n calculatorTrigger?: string;\n calculator?: CalculatorButtonLabels;\n pad?: NumberPadSheetLabels;\n };\n placeholder?: string;\n disabled?: boolean;\n autoFocus?: boolean;\n /** Wrapper class. */\n className?: string;\n /** Overrides the input's own styling (merged after the field base). */\n inputClassName?: string;\n id?: string;\n /** Show the calculator-popover trigger (default true). Set false for fields in\n * an ephemeral close-on-blur editor, where clicking the icon would blur away\n * and tear the editor down before the popover could open — inline typing\n * (e.g. \"200+50\" → Enter) still evaluates there. */\n calculator?: boolean;\n /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n * chrome dropped. The currency-free half of the same treatment `AmountInput`\n * carries, for a dialog whose whole point is the one number (a budget goal's\n * target); not for a field among many, and never for the compact inline\n * editors this control also serves. */\n variant?: \"field\" | \"display\";\n /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n * than at the far end of the strip — the far end is where the calculator\n * lives, and a hint placed there landed on top of it (steering-design\n * feedback #48). Plain TEXT (a string or a number) is a caption instead, UNDER\n * the field and attached through `aria-describedby` after the caller's own —\n * the same rule as {@link Select}'s `hint`: the label line has no room for a\n * sentence, and one placed there ran over the label and into the value.\n * Since 0.32 a FieldHint is that caption too at Large and on a touch screen,\n * where a \"?\" cannot be hovered open (`useInlineHint`). */\n hint?: ReactNode;\n /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n invalid?: boolean;\n /**\n * What is wrong with the value, in the caller's own words — {@link Input}'s `error`,\n * the same anatomy (keksdose K5/K4: of the kit's fields only `Input` and\n * `NumberField` had one, so a goal target or a rate field wrote its message as a\n * loose `<p>` that nothing pointed at). Rendered under the field, after a text\n * `hint`; merged into `aria-describedby` after the caller's ids and the hint's; and\n * it implies `invalid`, so the field paints as well as announces. `null`, `false`\n * and `\"\"` — a `touched && errors.x` on the happy path — are no message.\n *\n * Passing the key at all (even `undefined`) keeps the field in a steady wrapper,\n * message or not, so the message coming and going never remounts the `<input>` and\n * takes the caret with it — see `Input`'s `FieldGroup`. A field that never passes\n * `error` renders exactly the DOM it did before the prop existed.\n */\n error?: ReactNode;\n /**\n * BCP 47 tag that decides the decimal mark the field SHOWS; default the\n * `<UiKitProvider locale>`, else the runtime's (keksdose K5). A French or Italian\n * reader sees \"3,5\", a German one too, de-CH and en-US see \"3.5\" — `Intl`\n * decides, not a guess about a country. Display only: `value` and `onChange` stay\n * dot-decimal. {@link NumberField} passes its own `locale` through here.\n */\n locale?: string;\n /**\n * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n * `{(ids) => <NumberInput {...ids} … />}` — is typed and reaches the input: the hint\n * and error are described, a required number is announced as required, and\n * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n */\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean | \"true\" | \"false\";\n \"aria-required\"?: boolean | \"true\" | \"false\";\n /**\n * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n *\n * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n * same reason that one does: a unit belongs to the FIELD, not to the text, so\n * typing it is a way to get it into the value. Keksdose had a percentage spelled\n * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n * digits meant was a question the label alone had to answer.\n *\n * `aria-hidden`, like the currency read-out: it is a property of the field that\n * the label already names (\"Interest rate (%)\"), and announcing it again after\n * every value reads as part of the number.\n */\n suffix?: ReactNode;\n /**\n * Turns on the step keys: ArrowUp / ArrowDown add or subtract `step`, PageUp /\n * PageDown ten of them. The result lands on the grid `min + k × step` (or `0 + k ×\n * step` without a `min`), so 3.1 with `step={0.25}` goes up to 3.25, not 3.35 —\n * what a native number input does. Decimal-exact: `0.1 + 0.2` steps to \"0.3\".\n *\n * A step changes the text through `onChange` like a keystroke would; `onCommit`\n * still fires on blur/Enter. Without `step` the arrow keys move the caret as before.\n */\n step?: number;\n /** Bounds for the step keys only — a step never leaves `[min, max]`. This field's\n * value is a STRING, so typed text is not clamped: {@link NumberField} is the\n * numeric field that clamps what is typed as well. */\n min?: number;\n max?: number;\n /**\n * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a number\n * that SAVES itself: a setting committed on blur, a figure in a row editor\n * (Kurvenschmiede's session page, 0.33.1). `disabled` takes the field out of the tab\n * order, so the reason never reached a keyboard, and Kurvenschmiede wrote its own\n * `CommitInput` to keep it in.\n *\n * With a reason the field stays in the tab order and shows its value, `readOnly` (the\n * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`, as the\n * Combobox family's lock is. Nothing changes the value: the step keys do nothing, the\n * calculator and the phone's numpad are not offered, and neither blur nor Enter\n * commits — so `onChange` and `onCommit` are never called. Enter is swallowed, so the\n * field does not submit the form around it. The reason is a line under the field at\n * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),\n * and on the input's `aria-describedby`, between the caption and the error. Wins over\n * `disabled`.\n */\n disabledReason?: ReactNode;\n /**\n * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n */\n disabledReasonDisplay?: DisabledReasonDisplay;\n /**\n * This field COMMITS — {@link Button}'s `commit`: under a locked\n * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n * (which wins over its own). A field whose value only reaches the server through the\n * form's Save leaves this off and stays editable under the lock; the Save takes\n * `commit`. No provider, or an unlocked one: no effect. {@link NumberField} and\n * {@link IntegerField} pass it on.\n */\n commit?: CommitScope;\n /**\n * The `<input>`, as a React 19 ref prop (0.34, API-3, refactor audit 2026-10): the one\n * focusable field of its family with no ref at all, so react-hook-form's focus-on-error\n * could reach it only through /rhf's id lookup, and an app not at all.\n * {@link NumberField} and {@link IntegerField} pass it on.\n */\n ref?: Ref<HTMLInputElement>;\n}\n\n/** Decimal places of `n` as written (\"0.25\" → 2, \"1e-7\" → 7), for decimal-exact\n * stepping. */\nfunction decimalsOf(n: number): number {\n const text = formatResult(n);\n const dot = text.indexOf(\".\");\n return dot === -1 ? 0 : text.length - dot - 1;\n}\n\n/**\n * `current` moved by `count` steps (negative = down), on the grid `origin + k × step`\n * and clamped into `[min, max]`. An off-grid value moves to the NEXT grid point in\n * that direction first, so one press is never more than one step.\n *\n * The grid index is found by division and the result rebuilt as `origin + k × step`,\n * then cut to the decimals `step` and `origin` are written with — which is where\n * binary noise goes: `0.1 × 3` is 0.30000000000000004, and `toFixed(1)` of it is\n * \"0.3\". Summing steps would accumulate that noise press by press instead.\n */\nexport function stepNumber(current: number | null, count: number, step: number, min?: number, max?: number): number {\n const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n // Nothing to step from: land on the value nearest zero the bounds allow, rather\n // than on ±step — a room count with `min={1}` goes to 1, a rate to 0.\n if (current === null || !Number.isFinite(current)) return clamp(0);\n const origin = min !== undefined && Number.isFinite(min) ? min : 0;\n const raw = (current - origin) / step;\n const nearest = Math.round(raw);\n // \"On the grid\" within float tolerance: (0.3 - 0) / 0.1 is 2.9999999999999996.\n const onGrid = Math.abs(raw - nearest) < 1e-9;\n const k = onGrid ? nearest + count : count > 0 ? Math.ceil(raw) + count - 1 : Math.floor(raw) + count + 1;\n const places = Math.min(Math.max(decimalsOf(step), decimalsOf(origin)), 20);\n return clamp(Number((origin + k * step).toFixed(places)));\n}\n\n/** NumberInput never rounds: what was typed (or calculated) is what it reports. */\nconst asTyped = (text: string) => text;\n\n// ── The money guard (kastlan 5, Kurvenschmiede) ─────────────────────────────────\n\n// The codes the kit's own currency pickers offer, as whole words: \"Amount (CHF)\",\n// \"EUR\", \"Kosten CHF\". Not every ISO 4217 code — \"ALL\", \"TOP\" and \"PEN\" are codes too,\n// and an upper-case label would trip on them.\nconst CURRENCY_CODE = new RegExp(`(?:^|[^A-Za-z])(?:${CURRENCIES.map((c) => c.code).join(\"|\")})(?![A-Za-z])`);\n// Symbols no unit of measure is written with. Not \"kr\", \"R\" or \"Fr\": those are words\n// and units as often as they are money.\nconst CURRENCY_SYMBOL = /[€$£¥₹₺₽₪₩₫฿₴₦₱]/;\n\n/** Text that names a currency and no unit to go with it. A slash makes it a rate or\n * a unit price (\"CHF/m²\", \"€/kWh\") — a figure whose decimals are its column's\n * business, not the currency's — and that is not what the guard is for. */\nfunction namesMoney(node: ReactNode): boolean {\n if (typeof node !== \"string\" && typeof node !== \"number\") return false;\n const text = String(node);\n return (CURRENCY_CODE.test(text) || CURRENCY_SYMBOL.test(text)) && !text.includes(\"/\") && !text.includes(\"%\");\n}\n\n/**\n * Is this field being used for MONEY? A currency in the unit (`suffix=\"CHF\"`), or in\n * the label, `aria-label` or placeholder of a field with no unit at all (\"Estimated\n * cost (CHF)\"). Any other suffix is a unit — \"%\", \"mm\", \"N·m\" — and says what the\n * digits are, whatever the label says. `digits` plays no part: NumberInput has none,\n * and Kurvenschmiede's engineering fields at 2 and 3 decimals are exactly what this\n * must stay quiet about.\n */\nfunction looksLikeMoney(suffix: ReactNode, texts: ReactNode[]): boolean {\n if (suffix !== undefined && suffix !== null && suffix !== \"\") return namesMoney(suffix);\n return texts.some(namesMoney);\n}\n\n/**\n * The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n * production one — the consumer's bundler replaces `import.meta.env.DEV` with `false`\n * there, and this branch is dead code — and never under vitest, where every consumer\n * suite would print it once per render of every field it has not migrated yet. Read\n * per call rather than once per module, so a test can switch it on with `vi.stubEnv`.\n * Optional-chained: `import.meta.env` is a Vite injection, absent under plain Node.\n */\nfunction devWarnings(): boolean {\n return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for quantities, rates,\n * percentages and measurements.\n *\n * NOT FOR MONEY. This field never rounds: \"12.345\", or a calculator's \"100/3\", is\n * reported exactly as typed. kastlan's journal lines, a payment allocation and a\n * defect's estimated cost were NumberInputs, and a 3-decimal amount reached a\n * 2-decimal Money column and failed the save with a 422 — in one wizard after the\n * record before it had already been created (kastlan 5). Money goes in\n * {@link AmountInput} (string value, like this one) or {@link MoneyField} (number\n * value): both settle to the currency's minor unit on blur, Enter and every calculator\n * result, and take `digits` for a unit price at a finer scale. In development a\n * NumberInput that looks like money — a currency as its unit, or a currency in the\n * label of a field with no unit — says so on the console, once per field. A unit of\n * measure (\"mm\", \"N·m\", \"%\") keeps it quiet, as does any number of decimals.\n *\n * THE LOCALE'S MARK (keksdose K5). The field shows the `locale`'s decimal mark — \"3,5\"\n * to a French, Italian or German reader — and reads what is typed the way\n * {@link AmountInput} does (keksdose G1): \"1.234,56\" from a German typist is 1234.56,\n * \"1,234.56\" from an English one too, and a lone mark that cannot be grouping is the\n * decimal, whichever key typed it. Before, it always showed \"3.5\" and folded\n * \"1.234,56\" into 1.23456. `value` and `onChange` stay dot-decimal, which is the\n * contract every caller's `Number(value)` reads.\n *\n * While a figure is being typed the field shows the typist's OWN text — \"1.234,5\"\n * stays exactly that — rather than the value re-spelt: re-spelling turned a grouping\n * \".\" into a \",\" under their fingers, after which no rule could tell the two apart, and\n * a text that changes length under the caret moves it to the end. It is re-spelt in the\n * locale's mark, without grouping, once the figure settles (blur, Enter, a step or a\n * calculator result) or when the value changes from outside.\n */\nexport function NumberInput(props: NumberInputProps) {\n const {\n ref,\n value,\n onChange,\n onCommit,\n label,\n \"aria-label\": ariaLabel,\n labels,\n placeholder,\n autoFocus,\n className,\n inputClassName,\n id,\n \"aria-required\": ariaRequired,\n suffix,\n step,\n min,\n max,\n disabledReasonDisplay,\n } = props;\n const generatedId = useId();\n const fieldId = id ?? generatedId;\n // The engine AmountInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n // changes or commits — see `disabledReason`), the hint — a FieldHint is its words at\n // Large and on touch, §4 — the error, the description's order, the typist's draft and\n // the locale's mark (see the component's note), the calculator and the numpad.\n // NumberInput never rounds; it shows the value as it is.\n const numeric = useNumericField(props, { settle: asTyped, display: () => value });\n const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, setDraft, derived } = numeric;\n const invalid = numeric.isInvalid;\n // Passed at all — even as `undefined` — the field keeps its box; see `error`.\n const reserve = \"error\" in props || \"hint\" in props;\n const labelled = label !== undefined;\n // The unit and the calculator's measured width, reserved as the field's end padding.\n const hasEnd = showCalc || suffix !== undefined;\n const [endRef, endWidth] = useEndWidth(hasEnd);\n // Before the first measurement (and wherever there is no layout), a TEXT unit\n // reserves an estimate from its length — one `ch` a character, in the input's own\n // (larger) font, so it errs wide — plus the span's `pe-2` and the 4px gap, and the\n // calculator's 36px. The class fallback's flat pe-8 gave a \"%\" 32px for a frame and\n // \"km/h\" too little.\n const suffixChars = typeof suffix === \"string\" || typeof suffix === \"number\" ? String(suffix).length : null;\n const estimatedEnd =\n suffixChars !== null ? `calc(${suffixChars}ch + 0.75rem${showCalc ? \" + 2.25rem\" : \"\"})` : undefined;\n // On mobile, focusing opens the numpad bottom sheet instead of the native\n // keyboard (#334); the ref lets its \"Done\" blur → commit + close. The caller's `ref`\n // gets the same element.\n const inputRef = useRef<HTMLInputElement>(null);\n const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n\n // `derived` is the value in the locale's mark — one character for one, no grouping —\n // and the draft the typist's own text, shown only while it still says what the value\n // says (see `showsTyped`).\n const display = numeric.typedFor(value) ?? derived;\n\n // A keystroke, a paste or a numpad key: the typist's text is kept, the value is what\n // a number reads it as.\n const typed = (raw: string) => onChange(numeric.read(raw));\n // A RESULT — the calculator's, the numpad's \"=\" — is dot-decimal already. It does not\n // go through `typed`: \"1.234\" out of `100/81.03…` is never a thousand.\n const result = (next: string) => {\n setDraft(null);\n onChange(next);\n };\n\n // The money guard: once per field, development only. See `looksLikeMoney`.\n const warnedMoney = useRef(false);\n useEffect(() => {\n if (warnedMoney.current || !devWarnings()) return;\n if (!looksLikeMoney(suffix, [label, ariaLabel, placeholder])) return;\n warnedMoney.current = true;\n const name = [label, ariaLabel, suffix].find((t) => typeof t === \"string\" || typeof t === \"number\");\n console.warn(\n `[ui-kit] NumberInput${name === undefined ? \"\" : ` \"${String(name)}\"`} looks like a money field: a ` +\n `currency, and no unit. NumberInput never rounds, so \"12.345\" or a calculator's \"100/3\" is sent with ` +\n `three or more decimals (kastlan 5: a 422 from a 2-decimal Money column). Use AmountInput (string ` +\n `value) or MoneyField (number value) — both settle to the currency's minor unit. ` +\n `(Development builds only; once per field.)`,\n );\n }, [suffix, label, ariaLabel, placeholder]);\n\n // `text`: the calculator commits its session's result (INP-1), which on its \"=\" can be\n // newer than this render's `value` — `onChange` was handed it in the same event.\n const commit = (text: string = value) => {\n setDraft(null);\n const next = numeric.settle(commitExpression(text));\n if (next !== value) onChange(next);\n onCommit?.(next);\n };\n\n const stepBy = (count: number) => {\n setDraft(null);\n // The step starts from the text as a commit would read it, so \"12+5\" steps from 17.\n const resolved = commitExpression(value).trim();\n const n = resolved === \"\" ? NaN : Number(resolved);\n const next = formatResult(stepNumber(Number.isFinite(n) ? n : null, count, step as number, min, max));\n if (next !== value) onChange(next);\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n // Locked: Enter submits no form and commits nothing, and no key steps the value.\n // The arrows and Home/End stay the caret's, for a long value someone is reading.\n if (locked) {\n if (e.key === \"Enter\") e.preventDefault();\n return;\n }\n if (e.key === \"Enter\") return commit();\n // A zero, negative or non-finite step is no step: the keys stay the caret's.\n if (!step || !(step > 0) || !Number.isFinite(step) || e.altKey || e.ctrlKey || e.metaKey) return;\n const count =\n e.key === \"ArrowUp\" ? 1 : e.key === \"ArrowDown\" ? -1 : e.key === \"PageUp\" ? 10 : e.key === \"PageDown\" ? -10 : 0;\n if (count === 0) return;\n // Otherwise ArrowUp/Down also jump the caret to the start/end of the text.\n e.preventDefault();\n stepBy(count);\n };\n\n // While locked the field sits in the reason's frame (line or Tooltip), its outermost\n // box — so `className` (a width, a flex or grid cell) moves onto that, and the form\n // keeps its layout, as on Select.\n const field = (\n <FloatingField\n className={cn(\"w-full\", !locked && className)}\n htmlFor={fieldId}\n label={label}\n srOnlyLabel={asDisplay}\n hint={numeric.hint.labelHint}\n >\n <input\n ref={setInput}\n id={fieldId}\n aria-label={ariaLabel}\n type=\"text\"\n // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n // keeps focus/caret); desktop keeps the native decimal keypad.\n inputMode={isMobile ? \"none\" : \"decimal\"}\n autoComplete=\"off\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n autoFocus={autoFocus}\n disabled={off}\n // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n readOnly={locked || undefined}\n aria-disabled={locked || undefined}\n // Display mode has no floating label to feed the blank-placeholder trick,\n // and an empty borderless figure shows nothing — so it keeps whatever\n // placeholder the caller gave, falling back to a zero to aim at.\n placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n value={display}\n onChange={(e) => {\n if (!locked) typed(e.target.value);\n }}\n onFocus={() => setFocused(true)}\n onBlur={() => {\n // Nothing commits under the lock — not even a draft typed before it arrived,\n // which stays in the field for when it lifts.\n if (!locked) commit();\n setFocused(false);\n }}\n onKeyDown={onKeyDown}\n aria-invalid={invalid || undefined}\n aria-describedby={numeric.describedBy}\n aria-required={ariaRequired}\n // The end padding sits last so it always wins over an inputClassName that\n // sets its own px. Both trailing controls can be on at once, so the room\n // they need is reserved together rather than by whichever happens to render:\n // the calculator is ~36px and a short unit ~24px, and a field that reserved\n // only one of them would let the digits run under the other.\n className={cn(\n asDisplay\n ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n : labelled\n ? FLOATING_INPUT_CLASS\n : FIELD_BASE,\n inputClassName,\n showCalc && suffix !== undefined ? \"pe-16\" : showCalc ? \"pe-9\" : suffix !== undefined ? \"pe-8\" : undefined,\n invalid && FIELD_INVALID,\n locked && \"cursor-not-allowed\",\n )}\n // The classes above are the fallback; once the end controls are measured the\n // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a\n // \"%\" in a ~78px table cell 32px of padding and the digits ~32px of room\n // (keksdose live #367); a long unit (\"km/h\") got too little.\n style={\n hasEnd && endWidth != null\n ? { paddingInlineEnd: endWidth + 4 }\n : estimatedEnd !== undefined\n ? { paddingInlineEnd: estimatedEnd }\n : undefined\n }\n />\n {hasEnd && (\n // One flex track for both, so the unit and the calculator sit side by side\n // instead of stacking on the same corner — AmountInput's arrangement, which\n // has carried a chip and a calculator together since #430.\n <div ref={endRef} className=\"absolute inset-y-0 end-0 flex items-center\">\n {showCalc && (\n <CalculatorButton\n // Seeded with the value in the field's mark but WITHOUT the typist's\n // grouping: the evaluator reads either mark, but \"1.234,5\" is two of them.\n value={derived}\n onChange={result}\n onCommit={commit}\n className=\"self-stretch px-2.5\"\n aria-label={labels?.calculatorTrigger}\n labels={labels?.calculator}\n />\n )}\n {suffix !== undefined && (\n <span\n aria-hidden\n // pe-2, not the input's px-3: the unit is chrome at the box's edge, and\n // with pe-3 plus the 4px gap it took ~26px of a narrow table cell.\n className=\"pointer-events-none pe-2 text-xs font-medium text-muted\"\n >\n {suffix}\n </span>\n )}\n </div>\n )}\n {showNumpad && (\n <NumberPadSheet\n // Localised like the field it mirrors, as AmountInput's is: its keys are\n // typing, read by the locale's marks like the keyboard's; \"=\" is a result.\n value={display}\n onChange={typed}\n onResult={result}\n onDone={() => inputRef.current?.blur()}\n label={label}\n labels={labels?.pad}\n decimalMark={mark}\n />\n )}\n </FloatingField>\n );\n const box = locked ? (\n <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block w-full\", className)}>\n {field}\n </LockedReason>\n ) : (\n field\n );\n const data = dataAttributes(props);\n if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) {\n // Bare, unless the caller tags it: then the same plain root as below carries the tags.\n return Object.keys(data).length > 0 ? <div {...data}>{box}</div> : box;\n }\n // Outside the field's own `relative` box, as Select's caption is: the calculator\n // and the unit are `inset-y-0` in it and would stretch down over a second line.\n // `className` stays on the field, so adding a caption cannot change what it styles.\n return (\n <div {...data}>\n {box}\n <FieldCaption parts={numeric.hint} />\n {numeric.errorEl}\n </div>\n );\n}\n"],"mappings":";AA6aM,cAkEE,YAlEF;AA7aN,SAAS,WAAW,OAAO,SAAS,cAAc;AAElD,SAAS,wBAAqD;AAC9D,SAAS,sBAAiD;AAC1D,SAAS,YAAY,eAAe,eAAe,sBAAsB,qBAAqB;AAE9F,SAAS,kBAAkB;AAC3B,SAAS,cAAc,cAAc,iBAAkE;AACvG,SAAS,aAAa,uBAAuB;AAE7C,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,sBAA2C;AAgLpD,SAAS,WAAW,GAAmB;AACrC,QAAM,OAAO,aAAa,CAAC;AAC3B,QAAM,MAAM,KAAK,QAAQ,GAAG;AAC5B,SAAO,QAAQ,KAAK,IAAI,KAAK,SAAS,MAAM;AAC9C;AAYO,SAAS,WAAW,SAAwB,OAAe,MAAc,KAAc,KAAsB;AAClH,QAAM,QAAQ,CAAC,MAAc,KAAK,IAAI,OAAO,UAAU,KAAK,IAAI,OAAO,WAAW,CAAC,CAAC;AAGpF,MAAI,YAAY,QAAQ,CAAC,OAAO,SAAS,OAAO,EAAG,QAAO,MAAM,CAAC;AACjE,QAAM,SAAS,QAAQ,UAAa,OAAO,SAAS,GAAG,IAAI,MAAM;AACjE,QAAM,OAAO,UAAU,UAAU;AACjC,QAAM,UAAU,KAAK,MAAM,GAAG;AAE9B,QAAM,SAAS,KAAK,IAAI,MAAM,OAAO,IAAI;AACzC,QAAM,IAAI,SAAS,UAAU,QAAQ,QAAQ,IAAI,KAAK,KAAK,GAAG,IAAI,QAAQ,IAAI,KAAK,MAAM,GAAG,IAAI,QAAQ;AACxG,QAAM,SAAS,KAAK,IAAI,KAAK,IAAI,WAAW,IAAI,GAAG,WAAW,MAAM,CAAC,GAAG,EAAE;AAC1E,SAAO,MAAM,QAAQ,SAAS,IAAI,MAAM,QAAQ,MAAM,CAAC,CAAC;AAC1D;AAGA,MAAM,UAAU,CAAC,SAAiB;AAOlC,MAAM,gBAAgB,IAAI,OAAO,qBAAqB,WAAW,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,eAAe;AAG5G,MAAM,kBAAkB;AAKxB,SAAS,WAAW,MAA0B;AAC5C,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,SAAU,QAAO;AACjE,QAAM,OAAO,OAAO,IAAI;AACxB,UAAQ,cAAc,KAAK,IAAI,KAAK,gBAAgB,KAAK,IAAI,MAAM,CAAC,KAAK,SAAS,GAAG,KAAK,CAAC,KAAK,SAAS,GAAG;AAC9G;AAUA,SAAS,eAAe,QAAmB,OAA6B;AACtE,MAAI,WAAW,UAAa,WAAW,QAAQ,WAAW,GAAI,QAAO,WAAW,MAAM;AACtF,SAAO,MAAM,KAAK,UAAU;AAC9B;AAUA,SAAS,cAAuB;AAC9B,SAAO,QAAQ,YAAY,KAAK,GAAG,KAAK,CAAC,YAAY,KAAK;AAC5D;AAoCO,SAAS,YAAY,OAAyB;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AAMtB,QAAM,UAAU,gBAAgB,OAAO,EAAE,QAAQ,SAAS,SAAS,MAAM,MAAM,CAAC;AAChF,QAAM,EAAE,MAAM,QAAQ,KAAK,UAAU,WAAW,UAAU,YAAY,YAAY,MAAM,UAAU,QAAQ,IAAI;AAC9G,QAAM,UAAU,QAAQ;AAExB,QAAM,UAAU,WAAW,SAAS,UAAU;AAC9C,QAAM,WAAW,UAAU;AAE3B,QAAM,SAAS,YAAY,WAAW;AACtC,QAAM,CAAC,QAAQ,QAAQ,IAAI,YAAY,MAAM;AAM7C,QAAM,cAAc,OAAO,WAAW,YAAY,OAAO,WAAW,WAAW,OAAO,MAAM,EAAE,SAAS;AACvG,QAAM,eACJ,gBAAgB,OAAO,QAAQ,WAAW,eAAe,WAAW,eAAe,EAAE,MAAM;AAI7F,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,WAAW,QAAQ,MAAM,UAAU,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC;AAK9D,QAAM,UAAU,QAAQ,SAAS,KAAK,KAAK;AAI3C,QAAM,QAAQ,CAAC,QAAgB,SAAS,QAAQ,KAAK,GAAG,CAAC;AAGzD,QAAM,SAAS,CAAC,SAAiB;AAC/B,aAAS,IAAI;AACb,aAAS,IAAI;AAAA,EACf;AAGA,QAAM,cAAc,OAAO,KAAK;AAChC,YAAU,MAAM;AACd,QAAI,YAAY,WAAW,CAAC,YAAY,EAAG;AAC3C,QAAI,CAAC,eAAe,QAAQ,CAAC,OAAO,WAAW,WAAW,CAAC,EAAG;AAC9D,gBAAY,UAAU;AACtB,UAAM,OAAO,CAAC,OAAO,WAAW,MAAM,EAAE,KAAK,CAAC,MAAM,OAAO,MAAM,YAAY,OAAO,MAAM,QAAQ;AAClG,YAAQ;AAAA,MACN,uBAAuB,SAAS,SAAY,KAAK,KAAK,OAAO,IAAI,CAAC,GAAG;AAAA,IAKvE;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,WAAW,WAAW,CAAC;AAI1C,QAAM,SAAS,CAAC,OAAe,UAAU;AACvC,aAAS,IAAI;AACb,UAAM,OAAO,QAAQ,OAAO,iBAAiB,IAAI,CAAC;AAClD,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,SAAS,CAAC,UAAkB;AAChC,aAAS,IAAI;AAEb,UAAM,WAAW,iBAAiB,KAAK,EAAE,KAAK;AAC9C,UAAM,IAAI,aAAa,KAAK,MAAM,OAAO,QAAQ;AACjD,UAAM,OAAO,aAAa,WAAW,OAAO,SAAS,CAAC,IAAI,IAAI,MAAM,OAAO,MAAgB,KAAK,GAAG,CAAC;AACpG,QAAI,SAAS,MAAO,UAAS,IAAI;AAAA,EACnC;AAEA,QAAM,YAAY,CAAC,MAAuC;AAGxD,QAAI,QAAQ;AACV,UAAI,EAAE,QAAQ,QAAS,GAAE,eAAe;AACxC;AAAA,IACF;AACA,QAAI,EAAE,QAAQ,QAAS,QAAO,OAAO;AAErC,QAAI,CAAC,QAAQ,EAAE,OAAO,MAAM,CAAC,OAAO,SAAS,IAAI,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,QAAS;AAC1F,UAAM,QACJ,EAAE,QAAQ,YAAY,IAAI,EAAE,QAAQ,cAAc,KAAK,EAAE,QAAQ,WAAW,KAAK,EAAE,QAAQ,aAAa,MAAM;AAChH,QAAI,UAAU,EAAG;AAEjB,MAAE,eAAe;AACjB,WAAO,KAAK;AAAA,EACd;AAKA,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,CAAC,UAAU,SAAS;AAAA,MAC5C,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb,MAAM,QAAQ,KAAK;AAAA,MAEnB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,MAAK;AAAA,YAGL,WAAW,WAAW,SAAS;AAAA,YAC/B,cAAa;AAAA,YAEb;AAAA,YACA,UAAU;AAAA,YAEV,UAAU,UAAU;AAAA,YACpB,iBAAe,UAAU;AAAA,YAIzB,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE,OAAO;AAAA,YACP,UAAU,CAAC,MAAM;AACf,kBAAI,CAAC,OAAQ,OAAM,EAAE,OAAO,KAAK;AAAA,YACnC;AAAA,YACA,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AAGZ,kBAAI,CAAC,OAAQ,QAAO;AACpB,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YACzB,oBAAkB,QAAQ;AAAA,YAC1B,iBAAe;AAAA,YAMf,WAAW;AAAA,cACT,YACI,GAAG,eAAe,kEAAkE,IACpF,WACE,uBACA;AAAA,cACN;AAAA,cACA,YAAY,WAAW,SAAY,UAAU,WAAW,SAAS,WAAW,SAAY,SAAS;AAAA,cACjG,WAAW;AAAA,cACX,UAAU;AAAA,YACZ;AAAA,YAKA,OACE,UAAU,YAAY,OAClB,EAAE,kBAAkB,WAAW,EAAE,IACjC,iBAAiB,SACf,EAAE,kBAAkB,aAAa,IACjC;AAAA;AAAA,QAEV;AAAA,QACC;AAAA;AAAA;AAAA,QAIC,qBAAC,SAAI,KAAK,QAAQ,WAAU,8CACzB;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cAGC,OAAO;AAAA,cACP,UAAU;AAAA,cACV,UAAU;AAAA,cACV,WAAU;AAAA,cACV,cAAY,QAAQ;AAAA,cACpB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cAGX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC;AAAA,UAAC;AAAA;AAAA,YAGC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,UAAU;AAAA,YACV,QAAQ,MAAM,SAAS,SAAS,KAAK;AAAA,YACrC;AAAA,YACA,QAAQ,QAAQ;AAAA,YAChB,aAAa;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EAEJ;AAEF,QAAM,MAAM,SACV,oBAAC,gBAAa,MAAY,SAAS,uBAAuB,WAAW,GAAG,gBAAgB,SAAS,GAC9F,iBACH,IAEA;AAEF,QAAM,OAAO,eAAe,KAAK;AACjC,MAAI,QAAQ,KAAK,gBAAgB,UAAa,QAAQ,YAAY,QAAQ,CAAC,SAAS;AAElF,WAAO,OAAO,KAAK,IAAI,EAAE,SAAS,IAAI,oBAAC,SAAK,GAAG,MAAO,eAAI,IAAS;AAAA,EACrE;AAIA,SACE,qBAAC,SAAK,GAAG,MACN;AAAA;AAAA,IACD,oBAAC,gBAAa,OAAO,QAAQ,MAAM;AAAA,IAClC,QAAQ;AAAA,KACX;AAEJ;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode, Ref } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField } from \"./field-base\";\n// The data alone (0.35): not the picker, which this field does not render.\nimport { CURRENCIES } from \"../currencies\";\nimport { FieldCaption, LockedReason, mergeRefs, type DisabledReasonDisplay, type FieldHelpProps } from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, formatResult } from \"../lib/calc\";\nimport { dataAttributes, type DataAttributes } from \"../lib/data-attributes\";\n\n/** {@link NumberInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n * wrapper typed itself off `ComponentProps<typeof NumberInput>` until then. */\nexport interface NumberInputProps extends FieldHelpProps, DataAttributes {\n /** The text, DOT-decimal (\"1234.5\", or a calculation being typed: \"12+5\"), as\n * `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it\n * in the locale's mark (see `locale`). A comma here is read as the decimal mark too,\n * never as grouping. */\n value: string;\n /** Fired on every keystroke with the text as a number reads it: grouping marks read\n * off (\"1.234,56\" → \"1234.56\" for a German typist, keksdose K5), the decimal mark\n * folded to a dot, operators kept so a typed expression survives. */\n onChange: (value: string) => void;\n /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n * fields so the save always sees the resolved number, never \"10+5\". And once per\n * calculator session — its \"=\", or closing it on a result not committed yet — never\n * per calculator keystroke (refactor audit 2026-10-30, INP-1: a result used to reach\n * `onChange` only, and the host kept the number from before the calculation). */\n onCommit?: (value: string) => void;\n label?: ReactNode;\n /** Names the field when it has no visible `label` (a table cell, a phone's display\n * shape). */\n \"aria-label\"?: string;\n /** Names for the calculator this field renders — its trigger, and the controls\n * inside the popover — and for the numpad sheet it opens on a phone. Overrides\n * for THIS field only: both resolve the `calculator` namespace of\n * `<UiKitProvider labels>` themselves, then fall back to English.\n *\n * `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}\n * exactly as {@link AmountInput} does, but had no way to pass it anything, so\n * the SAME keypad announced itself in German when a money field opened it and in\n * English when a goal target did. */\n labels?: {\n calculatorTrigger?: string;\n calculator?: CalculatorButtonLabels;\n pad?: NumberPadSheetLabels;\n };\n placeholder?: string;\n disabled?: boolean;\n autoFocus?: boolean;\n /** Wrapper class. */\n className?: string;\n /** Overrides the input's own styling (merged after the field base). */\n inputClassName?: string;\n id?: string;\n /** Show the calculator-popover trigger (default true). Set false for fields in\n * an ephemeral close-on-blur editor, where clicking the icon would blur away\n * and tear the editor down before the popover could open — inline typing\n * (e.g. \"200+50\" → Enter) still evaluates there. */\n calculator?: boolean;\n /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n * chrome dropped. The currency-free half of the same treatment `AmountInput`\n * carries, for a dialog whose whole point is the one number (a budget goal's\n * target); not for a field among many, and never for the compact inline\n * editors this control also serves. */\n variant?: \"field\" | \"display\";\n /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n * than at the far end of the strip — the far end is where the calculator\n * lives, and a hint placed there landed on top of it (steering-design\n * feedback #48). Plain TEXT (a string or a number) is a caption instead, UNDER\n * the field and attached through `aria-describedby` after the caller's own —\n * the same rule as {@link Select}'s `hint`: the label line has no room for a\n * sentence, and one placed there ran over the label and into the value.\n * Since 0.32 a FieldHint is that caption too at Large and on a touch screen,\n * where a \"?\" cannot be hovered open (`useInlineHint`). */\n hint?: ReactNode;\n /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n invalid?: boolean;\n /**\n * What is wrong with the value, in the caller's own words — {@link Input}'s `error`,\n * the same anatomy (keksdose K5/K4: of the kit's fields only `Input` and\n * `NumberField` had one, so a goal target or a rate field wrote its message as a\n * loose `<p>` that nothing pointed at). Rendered under the field, after a text\n * `hint`; merged into `aria-describedby` after the caller's ids and the hint's; and\n * it implies `invalid`, so the field paints as well as announces. `null`, `false`\n * and `\"\"` — a `touched && errors.x` on the happy path — are no message.\n *\n * Passing the key at all (even `undefined`) keeps the field in a steady wrapper,\n * message or not, so the message coming and going never remounts the `<input>` and\n * takes the caret with it — see `Input`'s `FieldGroup`. A field that never passes\n * `error` renders exactly the DOM it did before the prop existed.\n */\n error?: ReactNode;\n /**\n * BCP 47 tag that decides the decimal mark the field SHOWS; default the\n * `<UiKitProvider locale>`, else the runtime's (keksdose K5). A French or Italian\n * reader sees \"3,5\", a German one too, de-CH and en-US see \"3.5\" — `Intl`\n * decides, not a guess about a country. Display only: `value` and `onChange` stay\n * dot-decimal. {@link NumberField} passes its own `locale` through here.\n */\n locale?: string;\n /**\n * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n * `{(ids) => <NumberInput {...ids} … />}` — is typed and reaches the input: the hint\n * and error are described, a required number is announced as required, and\n * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n */\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean | \"true\" | \"false\";\n \"aria-required\"?: boolean | \"true\" | \"false\";\n /**\n * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n *\n * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n * same reason that one does: a unit belongs to the FIELD, not to the text, so\n * typing it is a way to get it into the value. Keksdose had a percentage spelled\n * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n * digits meant was a question the label alone had to answer.\n *\n * `aria-hidden`, like the currency read-out: it is a property of the field that\n * the label already names (\"Interest rate (%)\"), and announcing it again after\n * every value reads as part of the number.\n */\n suffix?: ReactNode;\n /**\n * Turns on the step keys: ArrowUp / ArrowDown add or subtract `step`, PageUp /\n * PageDown ten of them. The result lands on the grid `min + k × step` (or `0 + k ×\n * step` without a `min`), so 3.1 with `step={0.25}` goes up to 3.25, not 3.35 —\n * what a native number input does. Decimal-exact: `0.1 + 0.2` steps to \"0.3\".\n *\n * A step changes the text through `onChange` like a keystroke would; `onCommit`\n * still fires on blur/Enter. Without `step` the arrow keys move the caret as before.\n */\n step?: number;\n /** Bounds for the step keys only — a step never leaves `[min, max]`. This field's\n * value is a STRING, so typed text is not clamped: {@link NumberField} is the\n * numeric field that clamps what is typed as well. */\n min?: number;\n max?: number;\n /**\n * Why the value cannot be changed — {@link Button}'s `disabledReason`, for a number\n * that SAVES itself: a setting committed on blur, a figure in a row editor\n * (Kurvenschmiede's session page, 0.33.1). `disabled` takes the field out of the tab\n * order, so the reason never reached a keyboard, and Kurvenschmiede wrote its own\n * `CommitInput` to keep it in.\n *\n * With a reason the field stays in the tab order and shows its value, `readOnly` (the\n * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`, as the\n * Combobox family's lock is. Nothing changes the value: the step keys do nothing, the\n * calculator and the phone's numpad are not offered, and neither blur nor Enter\n * commits — so `onChange` and `onCommit` are never called. Enter is swallowed, so the\n * field does not submit the form around it. The reason is a line under the field at\n * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),\n * and on the input's `aria-describedby`, between the caption and the error. Wins over\n * `disabled`.\n */\n disabledReason?: ReactNode;\n /**\n * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n */\n disabledReasonDisplay?: DisabledReasonDisplay;\n /**\n * This field COMMITS — {@link Button}'s `commit`: under a locked\n * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n * (which wins over its own). A field whose value only reaches the server through the\n * form's Save leaves this off and stays editable under the lock; the Save takes\n * `commit`. No provider, or an unlocked one: no effect. {@link NumberField} and\n * {@link IntegerField} pass it on.\n */\n commit?: CommitScope;\n /**\n * The `<input>`, as a React 19 ref prop (0.34, API-3, refactor audit 2026-10): the one\n * focusable field of its family with no ref at all, so react-hook-form's focus-on-error\n * could reach it only through /rhf's id lookup, and an app not at all.\n * {@link NumberField} and {@link IntegerField} pass it on.\n */\n ref?: Ref<HTMLInputElement>;\n}\n\n/** Decimal places of `n` as written (\"0.25\" → 2, \"1e-7\" → 7), for decimal-exact\n * stepping. */\nfunction decimalsOf(n: number): number {\n const text = formatResult(n);\n const dot = text.indexOf(\".\");\n return dot === -1 ? 0 : text.length - dot - 1;\n}\n\n/**\n * `current` moved by `count` steps (negative = down), on the grid `origin + k × step`\n * and clamped into `[min, max]`. An off-grid value moves to the NEXT grid point in\n * that direction first, so one press is never more than one step.\n *\n * The grid index is found by division and the result rebuilt as `origin + k × step`,\n * then cut to the decimals `step` and `origin` are written with — which is where\n * binary noise goes: `0.1 × 3` is 0.30000000000000004, and `toFixed(1)` of it is\n * \"0.3\". Summing steps would accumulate that noise press by press instead.\n */\nexport function stepNumber(current: number | null, count: number, step: number, min?: number, max?: number): number {\n const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));\n // Nothing to step from: land on the value nearest zero the bounds allow, rather\n // than on ±step — a room count with `min={1}` goes to 1, a rate to 0.\n if (current === null || !Number.isFinite(current)) return clamp(0);\n const origin = min !== undefined && Number.isFinite(min) ? min : 0;\n const raw = (current - origin) / step;\n const nearest = Math.round(raw);\n // \"On the grid\" within float tolerance: (0.3 - 0) / 0.1 is 2.9999999999999996.\n const onGrid = Math.abs(raw - nearest) < 1e-9;\n const k = onGrid ? nearest + count : count > 0 ? Math.ceil(raw) + count - 1 : Math.floor(raw) + count + 1;\n const places = Math.min(Math.max(decimalsOf(step), decimalsOf(origin)), 20);\n return clamp(Number((origin + k * step).toFixed(places)));\n}\n\n/** NumberInput never rounds: what was typed (or calculated) is what it reports. */\nconst asTyped = (text: string) => text;\n\n// ── The money guard (kastlan 5, Kurvenschmiede) ─────────────────────────────────\n\n// The codes the kit's own currency pickers know, as whole words: \"Amount (CHF)\",\n// \"EUR\", \"Kosten CHF\". A `retired` one too (BGN): a label that names it is still money,\n// whatever the pickers offer. Not every ISO 4217 code — \"ALL\", \"TOP\" and \"PEN\" are codes\n// too, and an upper-case label would trip on them.\nconst CURRENCY_CODE = new RegExp(`(?:^|[^A-Za-z])(?:${CURRENCIES.map((c) => c.code).join(\"|\")})(?![A-Za-z])`);\n// Symbols no unit of measure is written with. Not \"kr\", \"R\" or \"Fr\": those are words\n// and units as often as they are money.\nconst CURRENCY_SYMBOL = /[€$£¥₹₺₽₪₩₫฿₴₦₱]/;\n\n/** Text that names a currency and no unit to go with it. A slash makes it a rate or\n * a unit price (\"CHF/m²\", \"€/kWh\") — a figure whose decimals are its column's\n * business, not the currency's — and that is not what the guard is for. */\nfunction namesMoney(node: ReactNode): boolean {\n if (typeof node !== \"string\" && typeof node !== \"number\") return false;\n const text = String(node);\n return (CURRENCY_CODE.test(text) || CURRENCY_SYMBOL.test(text)) && !text.includes(\"/\") && !text.includes(\"%\");\n}\n\n/**\n * Is this field being used for MONEY? A currency in the unit (`suffix=\"CHF\"`), or in\n * the label, `aria-label` or placeholder of a field with no unit at all (\"Estimated\n * cost (CHF)\"). Any other suffix is a unit — \"%\", \"mm\", \"N·m\" — and says what the\n * digits are, whatever the label says. `digits` plays no part: NumberInput has none,\n * and Kurvenschmiede's engineering fields at 2 and 3 decimals are exactly what this\n * must stay quiet about.\n */\nfunction looksLikeMoney(suffix: ReactNode, texts: ReactNode[]): boolean {\n if (suffix !== undefined && suffix !== null && suffix !== \"\") return namesMoney(suffix);\n return texts.some(namesMoney);\n}\n\n/**\n * The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n * production one — the consumer's bundler replaces `import.meta.env.DEV` with `false`\n * there, and this branch is dead code — and never under vitest, where every consumer\n * suite would print it once per render of every field it has not migrated yet. Read\n * per call rather than once per module, so a test can switch it on with `vi.stubEnv`.\n * Optional-chained: `import.meta.env` is a Vite injection, absent under plain Node.\n */\nfunction devWarnings(): boolean {\n return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for quantities, rates,\n * percentages and measurements.\n *\n * NOT FOR MONEY. This field never rounds: \"12.345\", or a calculator's \"100/3\", is\n * reported exactly as typed. kastlan's journal lines, a payment allocation and a\n * defect's estimated cost were NumberInputs, and a 3-decimal amount reached a\n * 2-decimal Money column and failed the save with a 422 — in one wizard after the\n * record before it had already been created (kastlan 5). Money goes in\n * {@link AmountInput} (string value, like this one) or {@link MoneyField} (number\n * value): both settle to the currency's minor unit on blur, Enter and every calculator\n * result, and take `digits` for a unit price at a finer scale. In development a\n * NumberInput that looks like money — a currency as its unit, or a currency in the\n * label of a field with no unit — says so on the console, once per field. A unit of\n * measure (\"mm\", \"N·m\", \"%\") keeps it quiet, as does any number of decimals.\n *\n * THE LOCALE'S MARK (keksdose K5). The field shows the `locale`'s decimal mark — \"3,5\"\n * to a French, Italian or German reader — and reads what is typed the way\n * {@link AmountInput} does (keksdose G1): \"1.234,56\" from a German typist is 1234.56,\n * \"1,234.56\" from an English one too, and a lone mark that cannot be grouping is the\n * decimal, whichever key typed it. Before, it always showed \"3.5\" and folded\n * \"1.234,56\" into 1.23456. `value` and `onChange` stay dot-decimal, which is the\n * contract every caller's `Number(value)` reads.\n *\n * While a figure is being typed the field shows the typist's OWN text — \"1.234,5\"\n * stays exactly that — rather than the value re-spelt: re-spelling turned a grouping\n * \".\" into a \",\" under their fingers, after which no rule could tell the two apart, and\n * a text that changes length under the caret moves it to the end. It is re-spelt in the\n * locale's mark, without grouping, once the figure settles (blur, Enter, a step or a\n * calculator result) or when the value changes from outside.\n */\nexport function NumberInput(props: NumberInputProps) {\n const {\n ref,\n value,\n onChange,\n onCommit,\n label,\n \"aria-label\": ariaLabel,\n labels,\n placeholder,\n autoFocus,\n className,\n inputClassName,\n id,\n \"aria-required\": ariaRequired,\n suffix,\n step,\n min,\n max,\n disabledReasonDisplay,\n } = props;\n const generatedId = useId();\n const fieldId = id ?? generatedId;\n // The engine AmountInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n // changes or commits — see `disabledReason`), the hint — a FieldHint is its words at\n // Large and on touch, §4 — the error, the description's order, the typist's draft and\n // the locale's mark (see the component's note), the calculator and the numpad.\n // NumberInput never rounds; it shows the value as it is.\n const numeric = useNumericField(props, { settle: asTyped, display: () => value });\n const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, setDraft, derived } = numeric;\n const invalid = numeric.isInvalid;\n // Passed at all — even as `undefined` — the field keeps its box; see `error`.\n const reserve = \"error\" in props || \"hint\" in props;\n const labelled = label !== undefined;\n // The unit and the calculator's measured width, reserved as the field's end padding.\n const hasEnd = showCalc || suffix !== undefined;\n const [endRef, endWidth] = useEndWidth(hasEnd);\n // Before the first measurement (and wherever there is no layout), a TEXT unit\n // reserves an estimate from its length — one `ch` a character, in the input's own\n // (larger) font, so it errs wide — plus the span's `pe-2` and the 4px gap, and the\n // calculator's 36px. The class fallback's flat pe-8 gave a \"%\" 32px for a frame and\n // \"km/h\" too little.\n const suffixChars = typeof suffix === \"string\" || typeof suffix === \"number\" ? String(suffix).length : null;\n const estimatedEnd =\n suffixChars !== null ? `calc(${suffixChars}ch + 0.75rem${showCalc ? \" + 2.25rem\" : \"\"})` : undefined;\n // On mobile, focusing opens the numpad bottom sheet instead of the native\n // keyboard (#334); the ref lets its \"Done\" blur → commit + close. The caller's `ref`\n // gets the same element.\n const inputRef = useRef<HTMLInputElement>(null);\n const setInput = useMemo(() => mergeRefs(inputRef, ref), [ref]);\n\n // `derived` is the value in the locale's mark — one character for one, no grouping —\n // and the draft the typist's own text, shown only while it still says what the value\n // says (see `showsTyped`).\n const display = numeric.typedFor(value) ?? derived;\n\n // A keystroke, a paste or a numpad key: the typist's text is kept, the value is what\n // a number reads it as.\n const typed = (raw: string) => onChange(numeric.read(raw));\n // A RESULT — the calculator's, the numpad's \"=\" — is dot-decimal already. It does not\n // go through `typed`: \"1.234\" out of `100/81.03…` is never a thousand.\n const result = (next: string) => {\n setDraft(null);\n onChange(next);\n };\n\n // The money guard: once per field, development only. See `looksLikeMoney`.\n const warnedMoney = useRef(false);\n useEffect(() => {\n if (warnedMoney.current || !devWarnings()) return;\n if (!looksLikeMoney(suffix, [label, ariaLabel, placeholder])) return;\n warnedMoney.current = true;\n const name = [label, ariaLabel, suffix].find((t) => typeof t === \"string\" || typeof t === \"number\");\n console.warn(\n `[ui-kit] NumberInput${name === undefined ? \"\" : ` \"${String(name)}\"`} looks like a money field: a ` +\n `currency, and no unit. NumberInput never rounds, so \"12.345\" or a calculator's \"100/3\" is sent with ` +\n `three or more decimals (kastlan 5: a 422 from a 2-decimal Money column). Use AmountInput (string ` +\n `value) or MoneyField (number value) — both settle to the currency's minor unit. ` +\n `(Development builds only; once per field.)`,\n );\n }, [suffix, label, ariaLabel, placeholder]);\n\n // `text`: the calculator commits its session's result (INP-1), which on its \"=\" can be\n // newer than this render's `value` — `onChange` was handed it in the same event.\n const commit = (text: string = value) => {\n setDraft(null);\n const next = numeric.settle(commitExpression(text));\n if (next !== value) onChange(next);\n onCommit?.(next);\n };\n\n const stepBy = (count: number) => {\n setDraft(null);\n // The step starts from the text as a commit would read it, so \"12+5\" steps from 17.\n const resolved = commitExpression(value).trim();\n const n = resolved === \"\" ? NaN : Number(resolved);\n const next = formatResult(stepNumber(Number.isFinite(n) ? n : null, count, step as number, min, max));\n if (next !== value) onChange(next);\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n // Locked: Enter submits no form and commits nothing, and no key steps the value.\n // The arrows and Home/End stay the caret's, for a long value someone is reading.\n if (locked) {\n if (e.key === \"Enter\") e.preventDefault();\n return;\n }\n if (e.key === \"Enter\") return commit();\n // A zero, negative or non-finite step is no step: the keys stay the caret's.\n if (!step || !(step > 0) || !Number.isFinite(step) || e.altKey || e.ctrlKey || e.metaKey) return;\n const count =\n e.key === \"ArrowUp\" ? 1 : e.key === \"ArrowDown\" ? -1 : e.key === \"PageUp\" ? 10 : e.key === \"PageDown\" ? -10 : 0;\n if (count === 0) return;\n // Otherwise ArrowUp/Down also jump the caret to the start/end of the text.\n e.preventDefault();\n stepBy(count);\n };\n\n // While locked the field sits in the reason's frame (line or Tooltip), its outermost\n // box — so `className` (a width, a flex or grid cell) moves onto that, and the form\n // keeps its layout, as on Select.\n const field = (\n <FloatingField\n className={cn(\"w-full\", !locked && className)}\n htmlFor={fieldId}\n label={label}\n srOnlyLabel={asDisplay}\n hint={numeric.hint.labelHint}\n >\n <input\n ref={setInput}\n id={fieldId}\n aria-label={ariaLabel}\n type=\"text\"\n // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n // keeps focus/caret); desktop keeps the native decimal keypad.\n inputMode={isMobile ? \"none\" : \"decimal\"}\n autoComplete=\"off\"\n // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n autoFocus={autoFocus}\n disabled={off}\n // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n readOnly={locked || undefined}\n aria-disabled={locked || undefined}\n // Display mode has no floating label to feed the blank-placeholder trick,\n // and an empty borderless figure shows nothing — so it keeps whatever\n // placeholder the caller gave, falling back to a zero to aim at.\n placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n value={display}\n onChange={(e) => {\n if (!locked) typed(e.target.value);\n }}\n onFocus={() => setFocused(true)}\n onBlur={() => {\n // Nothing commits under the lock — not even a draft typed before it arrived,\n // which stays in the field for when it lifts.\n if (!locked) commit();\n setFocused(false);\n }}\n onKeyDown={onKeyDown}\n aria-invalid={invalid || undefined}\n aria-describedby={numeric.describedBy}\n aria-required={ariaRequired}\n // The end padding sits last so it always wins over an inputClassName that\n // sets its own px. Both trailing controls can be on at once, so the room\n // they need is reserved together rather than by whichever happens to render:\n // the calculator is ~36px and a short unit ~24px, and a field that reserved\n // only one of them would let the digits run under the other.\n className={cn(\n asDisplay\n ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n : labelled\n ? FLOATING_INPUT_CLASS\n : FIELD_BASE,\n inputClassName,\n showCalc && suffix !== undefined ? \"pe-16\" : showCalc ? \"pe-9\" : suffix !== undefined ? \"pe-8\" : undefined,\n invalid && FIELD_INVALID,\n locked && \"cursor-not-allowed\",\n )}\n // The classes above are the fallback; once the end controls are measured the\n // field reserves exactly their width (+4px). A fixed pe-8 for any unit left a\n // \"%\" in a ~78px table cell 32px of padding and the digits ~32px of room\n // (keksdose live #367); a long unit (\"km/h\") got too little.\n style={\n hasEnd && endWidth != null\n ? { paddingInlineEnd: endWidth + 4 }\n : estimatedEnd !== undefined\n ? { paddingInlineEnd: estimatedEnd }\n : undefined\n }\n />\n {hasEnd && (\n // One flex track for both, so the unit and the calculator sit side by side\n // instead of stacking on the same corner — AmountInput's arrangement, which\n // has carried a chip and a calculator together since #430.\n <div ref={endRef} className=\"absolute inset-y-0 end-0 flex items-center\">\n {showCalc && (\n <CalculatorButton\n // Seeded with the value in the field's mark but WITHOUT the typist's\n // grouping: the evaluator reads either mark, but \"1.234,5\" is two of them.\n value={derived}\n onChange={result}\n onCommit={commit}\n className=\"self-stretch px-2.5\"\n aria-label={labels?.calculatorTrigger}\n labels={labels?.calculator}\n />\n )}\n {suffix !== undefined && (\n <span\n aria-hidden\n // pe-2, not the input's px-3: the unit is chrome at the box's edge, and\n // with pe-3 plus the 4px gap it took ~26px of a narrow table cell.\n className=\"pointer-events-none pe-2 text-xs font-medium text-muted\"\n >\n {suffix}\n </span>\n )}\n </div>\n )}\n {showNumpad && (\n <NumberPadSheet\n // Localised like the field it mirrors, as AmountInput's is: its keys are\n // typing, read by the locale's marks like the keyboard's; \"=\" is a result.\n value={display}\n onChange={typed}\n onResult={result}\n onDone={() => inputRef.current?.blur()}\n label={label}\n labels={labels?.pad}\n decimalMark={mark}\n />\n )}\n </FloatingField>\n );\n const box = locked ? (\n <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block w-full\", className)}>\n {field}\n </LockedReason>\n ) : (\n field\n );\n const data = dataAttributes(props);\n if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) {\n // Bare, unless the caller tags it: then the same plain root as below carries the tags.\n return Object.keys(data).length > 0 ? <div {...data}>{box}</div> : box;\n }\n // Outside the field's own `relative` box, as Select's caption is: the calculator\n // and the unit are `inset-y-0` in it and would stretch down over a second line.\n // `className` stays on the field, so adding a caption cannot change what it styles.\n return (\n <div {...data}>\n {box}\n <FieldCaption parts={numeric.hint} />\n {numeric.errorEl}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -97,7 +97,7 @@ export declare function anchoredBand(extent: readonly [number, number] | undefin
|
|
|
97
97
|
* it in its neighbour's colour on each click. Resolving the colours on the full list
|
|
98
98
|
* and filtering after keeps each series in the colour its legend entry shows.
|
|
99
99
|
*/
|
|
100
|
-
export declare function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[];
|
|
100
|
+
export declare function visibleSeries<TRow extends object>(series: readonly SeriesChartSeries<TRow>[], hidden: ReadonlySet<string>): SeriesChartSeries<TRow>[];
|
|
101
101
|
/** A finite number, or `undefined` — the only thing a row cell counts as a sample. */
|
|
102
102
|
export declare const finite: (value: unknown) => number | undefined;
|
|
103
103
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/series-chart-axes.ts"],"sourcesContent":["// The series chart's pure half: the axis bands, the padded and anchored domains, the\n// series keys and colours, and the abscissa reduced to a number line. No React, no\n// recharts and no JSX here (chart-zoom-core lends the one name `DEFAULT_Y_AXIS`) —\n// arithmetic over rows and axes, which is why apps import some of it in\n// files that draw no chart (Kurvenschmiede's curve-chart-model.ts builds its series\n// keys with `seriesKey`).\n//\n// Moved out of series-chart.tsx as it was (MOD-9, refactor audit 2026-10). The public\n// names are still exported from series-chart.tsx, so `/chart` and the barrel are\n// unchanged; this module is not an entry of its own. The names below that series-chart\n// does not re-export (the tick-band constants, `xModel`, `finite`, …) stay internal.\nimport { DEFAULT_Y_AXIS } from \"./chart-zoom-core\";\nimport type { TimeTickUnit } from \"./series-chart-ticks\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport type {\n SeriesChartAxis,\n SeriesChartRow,\n SeriesChartSeries,\n SeriesChartTickValues,\n SeriesChartX,\n SeriesChartXValue,\n} from \"./series-chart\";\n\n/** How much of an axis band the rotated title takes, in px at Normal — × the text size's\n * scale on the chart (§3.2), since the title is text. Reserved rather than shared with\n * the ticks: a title merely offset inside the band prints on top of a five-figure tick,\n * and which gives way depends on the data. */\nexport const AXIS_TITLE_STRIP = 16;\n\n/** Where inside its strip the rotated title sits. */\nexport const AXIS_TITLE_OFFSET = 10;\n\n/** The tallest band tilted x ticks reserve, in px at Normal (× the scale). A category\n * name longer than this at its angle is clipped rather than squeezing the plot down to\n * a strip. */\nconst MAX_TILTED_TICK_BAND = 120;\n\n/** What one character of a tick label is taken to be, in px at Normal, for the tilted\n * band — the shell's `text-xs`. An estimate: the SVG is not laid out yet when the band\n * is decided. Both grow with the text size, as `text-xs` does (§3.2). */\nconst TICK_CHAR_WIDTH = 7;\nconst TICK_LINE_HEIGHT = 12;\n/** recharts' gap between the axis line and a bottom tick's text — px, at every size:\n * recharts draws it, not the type. */\nconst TICK_GAP = 8;\n/** recharts' own band under level x ticks. */\nconst LEVEL_TICK_BAND = 30;\n/** The least room recharts' x ticks keep between labels, in px at Normal. */\nexport const MIN_TICK_GAP = 32;\n\n/**\n * The height the x axis reserves for its ticks at a text `scale`: tilted by `angle`\n * degrees, the rotated box of the longest label, from its length; level, recharts' own\n * 30 px grown with the labels. `undefined` for level ticks at Normal, where recharts'\n * default is exactly that.\n */\nexport function tiltedTickBand(labels: readonly string[], angle: number, scale = 1): number | undefined {\n if (!angle) return scale === 1 ? undefined : Math.ceil(LEVEL_TICK_BAND * scale);\n const rad = (Math.abs(angle) * Math.PI) / 180;\n const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;\n const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;\n return Math.min(\n Math.round(MAX_TILTED_TICK_BAND * scale),\n Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)),\n );\n}\n\n/** The width the ticks of a y axis get when a caller does not say, in px at Normal. */\nexport const AXIS_TICK_WIDTH = 48;\n\n/**\n * How much air a FITTED axis leaves between the data and its frame, as a fraction of\n * the range. Recharts fits `[dataMin, dataMax]`, which draws a peak half a stroke\n * outside the plot and a curve running to its limit indistinguishable from the frame.\n */\nconst AUTO_PAD = 0.04;\n\n/** The band a fitted axis draws, padded — and a real band for constant data, which is\n * a zero-height domain recharts cannot scale into. `undefined` when nothing finite. */\nexport function paddedDomain(values: Iterable<number>): [number, number] | undefined {\n let low = Infinity;\n let high = -Infinity;\n for (const value of values) {\n if (!Number.isFinite(value)) continue;\n if (value < low) low = value;\n if (value > high) high = value;\n }\n return padBand(low, high);\n}\n\n/**\n * {@link paddedDomain} for a caller that has already walked its own data — so a row\n * of charts can share one scale without building an array to find two numbers in, and\n * without a second padding rule. `low > high` means \"nothing was seen\": `undefined`.\n */\nexport function padBand(low: number, high: number): [number, number] | undefined {\n if (!(low <= high)) return undefined;\n const pad = (high - low) * AUTO_PAD || Math.abs(high) * AUTO_PAD || 1;\n return [low - pad, high + pad];\n}\n\n/**\n * The whole band a y axis occupies: its ticks, and its title when it draws one. For\n * lining a heading up over a PLOT rather than over its column.\n *\n * `scale` is the text size's (`useTextSize().scale`, §3.2, §10.10): the chart draws every\n * band — the default 48 px and a caller's own `width` alike (keksdose's\n * `MONEY_AXIS_WIDTH`) — this many times wider, because the ticks in it are `text-xs`\n * and grow with the text. A heading lined up over the plot has to pass the same scale.\n * One factor for both sides of a facing pair, so the mirrored bands stay equal.\n */\nexport function axisBandWidth(tickWidth: number | undefined, titled: boolean, scale = 1): number {\n const band = (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);\n return scale === 1 ? band : Math.round(band * scale);\n}\n\n/**\n * The colour an axis TITLE takes, or `undefined` for the neutral one.\n *\n * An axis measuring exactly one line is that line's, and saying so in the title lets a\n * reader find a channel's scale without counting axes. An axis measuring several is\n * nobody's — a title in the first one's colour would be claiming it. Counted off the\n * series, so toggling a second line onto an axis gives the colour up in the same render.\n */\nexport function soleSeriesColor(\n axis: Pick<SeriesChartAxis, \"id\" | \"color\">,\n series: readonly Pick<SeriesChartSeries, \"axis\">[],\n): string | undefined {\n const mine = series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id);\n return mine.length === 1 ? axis.color : undefined;\n}\n\n/** The single-axis case, which is most charts. `width` is what the TICKS need;\n * `orientation` is which side they stand on. */\nexport function oneAxis(\n format: ((value: number) => string) | undefined,\n title: string,\n width?: number,\n orientation?: \"left\" | \"right\",\n): SeriesChartAxis[] {\n return [{ id: DEFAULT_Y_AXIS, format, title, width, orientation }];\n}\n\n/** One source's samples: an abscissa and the channels measured against it. */\nexport interface SeriesSource {\n x: readonly number[];\n channels: Readonly<Record<string, readonly number[]>>;\n}\n\n/**\n * Merge sources sampled on different grids into rows the chart can draw.\n *\n * Merged ON THE ABSCISSA VALUE ITSELF, never interpolated onto a common grid: a line\n * through invented points looks exactly like one through measured ones. Where a source\n * has no sample the key is absent, and `connectNulls` bridges the hole with the same\n * straight segment an interpolation would have drawn — without claiming a measurement.\n */\nexport function mergeSeries(sources: readonly SeriesSource[]): Record<string, number>[] {\n const byAbscissa = new Map<number, Record<string, number>>();\n for (const source of sources) {\n source.x.forEach((value, index) => {\n const row = byAbscissa.get(value) ?? { x: value };\n for (const [key, channel] of Object.entries(source.channels)) row[key] = channel[index];\n byAbscissa.set(value, row);\n });\n }\n return [...byAbscissa.values()].sort((a, b) => a.x - b.x);\n}\n\n/**\n * A series key built out of parts — as a CSS identifier.\n *\n * The chart shell paints each series through `--color-<key>`, and skips (with a\n * console warning) any key that is not `[A-Za-z_][A-Za-z0-9_-]*`. A line whose colour\n * was skipped has no stroke at all: an axis, a grid and nothing between them. So a key\n * assembled out of DATA — an id, an enum, a side — goes through here: every other\n * character becomes `_`, the parts are joined with `_`, and a key that would start with\n * a digit or a hyphen gets a leading `_`.\n */\nexport function seriesKey(...parts: (string | number)[]): string {\n const key = parts.map((part) => String(part).replace(/[^A-Za-z0-9_-]/g, \"_\")).join(\"_\");\n return /^[A-Za-z_]/.test(key) ? key : `_${key}`;\n}\n\n/**\n * The band an axis carrying bars or areas draws: the data's extent with ZERO in it,\n * padded only on the sides that are not zero — bars standing on a frame's bottom edge,\n * not floating four per cent above it on a band of air nobody asked for.\n * `undefined` when there is nothing to fit.\n *\n * All-zero data (a quiet period, a zoom window over empty months) is `[0, 1]`: one unit\n * on the free side, the unit {@link padBand} pads a zero extent by. d3 maps every value\n * of a zero-height domain to the range's midpoint, so `[0, 0]` stood the bars on a\n * baseline in the middle of the plot, the \"0\" tick beside it (audit 2026-10-30 DSP-10;\n * keksdose's weekday pattern drew seven 4 px stubs mid-card for a period with no\n * spending).\n */\nexport function anchoredBand(extent: readonly [number, number] | undefined): [number, number] | undefined {\n if (!extent) return undefined;\n const low = Math.min(0, extent[0]);\n const high = Math.max(0, extent[1]);\n if (low === 0 && high === 0) return [0, 1];\n const pad = (high - low) * AUTO_PAD || 1;\n return [low < 0 ? low - pad : 0, high > 0 ? high + pad : 0];\n}\n\n/**\n * Series with their colours settled BEFORE any are switched off.\n *\n * A series with no `color` takes `paletteFor(its position)` — and a legend toggle that\n * hands the chart a shorter list moves every later series one position up, repainting\n * it in its neighbour's colour on each click. Resolving the colours on the full list\n * and filtering after keeps each series in the colour its legend entry shows.\n */\nexport function visibleSeries(series: readonly SeriesChartSeries[], hidden: ReadonlySet<string>): SeriesChartSeries[] {\n return series\n .map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) }))\n .filter((entry) => !hidden.has(entry.key));\n}\n\n/** Where a category or time chart keeps each row's plotted position. Not the caller's\n * key: that one still holds their own value, which `format` and a hit hand back. */\nconst PLOTTED_X = \"__seriesChartX\";\n\n/** A finite number, or `undefined` — the only thing a row cell counts as a sample. */\nexport const finite = (value: unknown): number | undefined =>\n typeof value === \"number\" && Number.isFinite(value) ? value : undefined;\n\n/** A time value as epoch ms. A date-only ISO string is LOCAL midnight (see\n * `SeriesChartX.type`); anything unreadable is `undefined`, i.e. not plotted. */\nfunction toTime(value: unknown): number | undefined {\n if (value instanceof Date) return finite(value.getTime());\n if (typeof value === \"number\") return finite(value);\n if (typeof value !== \"string\") return undefined;\n const day = /^(\\d{4})-(\\d{2})(?:-(\\d{2}))?$/.exec(value);\n if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3] ?? 1)).getTime();\n return finite(Date.parse(value));\n}\n\n/** A category's identity, so a Date matches another Date of the same instant. */\nconst categoryId = (value: unknown) =>\n value instanceof Date ? `d:${value.getTime()}` : `${typeof value}:${String(value)}`;\n\n/**\n * The abscissa, reduced to a number line — which is all the plot, the ticks and the\n * zoom ever deal in. A number stays itself; a category becomes its slot index; a time\n * its epoch ms. Everything the caller sees (ticks, tooltip, hits) is turned back.\n */\nexport interface XModel {\n kind: \"number\" | \"category\" | \"time\";\n /** The caller's key, still holding their value. */\n sourceKey: string;\n /** The key the plot reads. The same as `sourceKey` on a number line. */\n plotKey: string;\n /** The rows as plotted. The caller's own on a number line. */\n rows: readonly SeriesChartRow[];\n /** The caller's rows, which dots and hits hand back. */\n source: readonly SeriesChartRow[];\n position: (value: unknown) => number | undefined;\n valueAt: (position: number) => SeriesChartXValue;\n}\n\nexport function xModel(rows: readonly SeriesChartRow[], x: SeriesChartX): XModel {\n const sourceKey = x.key ?? \"x\";\n if (x.type === \"category\") {\n const slots = new Map<string, number>();\n rows.forEach((row, index) => {\n const id = categoryId(row[sourceKey]);\n if (!slots.has(id)) slots.set(id, index);\n });\n return {\n kind: \"category\",\n sourceKey,\n plotKey: PLOTTED_X,\n rows: rows.map((row, index) => ({ ...row, [PLOTTED_X]: index })),\n source: rows,\n position: (value) => slots.get(categoryId(value)),\n valueAt: (position) => rows[Math.round(position)]?.[sourceKey] as SeriesChartXValue,\n };\n }\n if (x.type === \"time\") {\n return {\n kind: \"time\",\n sourceKey,\n plotKey: PLOTTED_X,\n rows: rows.map((row) => ({ ...row, [PLOTTED_X]: toTime(row[sourceKey]) })),\n source: rows,\n position: toTime,\n valueAt: (position) => new Date(position),\n };\n }\n return {\n kind: \"number\",\n sourceKey,\n plotKey: sourceKey,\n rows,\n source: rows,\n position: finite,\n valueAt: (position) => position,\n };\n}\n\n/** Caller ticks, as positions inside the domain on show. */\nexport function resolveTicks<T>(\n values: SeriesChartTickValues<T> | undefined,\n domain: [number, number] | undefined,\n position: (value: T) => number | undefined,\n): number[] | undefined {\n if (!values || !domain) return undefined;\n const list = typeof values === \"function\" ? values(domain) : values;\n if (!list) return undefined;\n const slack = (domain[1] - domain[0]) * 1e-9;\n return list\n .map(position)\n .filter((at): at is number => at !== undefined && at >= domain[0] - slack && at <= domain[1] + slack);\n}\n\n/** A low/high pair widened by some values, or `undefined` if there is still none. */\nexport function extend(\n span: readonly [number, number] | undefined,\n values: readonly (number | undefined)[],\n): [number, number] | undefined {\n let out: [number, number] | undefined = span ? [span[0], span[1]] : undefined;\n for (const value of values) {\n if (value === undefined || !Number.isFinite(value)) continue;\n out = out ? [Math.min(out[0], value), Math.max(out[1], value)] : [value, value];\n }\n return out;\n}\n\n/** How a time tick is written, by what one step of the ticks is. */\nexport const TIME_TICK_FORMAT: Record<TimeTickUnit, Intl.DateTimeFormatOptions> = {\n hour: { hour: \"2-digit\", minute: \"2-digit\" },\n day: { day: \"numeric\", month: \"short\" },\n month: { month: \"short\", year: \"2-digit\" },\n year: { year: \"numeric\" },\n};\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/series-chart-axes.ts"],"sourcesContent":["// The series chart's pure half: the axis bands, the padded and anchored domains, the\n// series keys and colours, and the abscissa reduced to a number line. No React, no\n// recharts and no JSX here (chart-zoom-core lends the one name `DEFAULT_Y_AXIS`) —\n// arithmetic over rows and axes, which is why apps import some of it in\n// files that draw no chart (Kurvenschmiede's curve-chart-model.ts builds its series\n// keys with `seriesKey`).\n//\n// Moved out of series-chart.tsx as it was (MOD-9, refactor audit 2026-10). The public\n// names are still exported from series-chart.tsx, so `/chart` and the barrel are\n// unchanged; this module is not an entry of its own. The names below that series-chart\n// does not re-export (the tick-band constants, `xModel`, `finite`, …) stay internal.\nimport { DEFAULT_Y_AXIS } from \"./chart-zoom-core\";\nimport type { TimeTickUnit } from \"./series-chart-ticks\";\nimport { paletteFor } from \"../theme/chart-palette\";\nimport type {\n SeriesChartAxis,\n SeriesChartRow,\n SeriesChartSeries,\n SeriesChartTickValues,\n SeriesChartX,\n SeriesChartXValue,\n} from \"./series-chart\";\n\n/** How much of an axis band the rotated title takes, in px at Normal — × the text size's\n * scale on the chart (§3.2), since the title is text. Reserved rather than shared with\n * the ticks: a title merely offset inside the band prints on top of a five-figure tick,\n * and which gives way depends on the data. */\nexport const AXIS_TITLE_STRIP = 16;\n\n/** Where inside its strip the rotated title sits. */\nexport const AXIS_TITLE_OFFSET = 10;\n\n/** The tallest band tilted x ticks reserve, in px at Normal (× the scale). A category\n * name longer than this at its angle is clipped rather than squeezing the plot down to\n * a strip. */\nconst MAX_TILTED_TICK_BAND = 120;\n\n/** What one character of a tick label is taken to be, in px at Normal, for the tilted\n * band — the shell's `text-xs`. An estimate: the SVG is not laid out yet when the band\n * is decided. Both grow with the text size, as `text-xs` does (§3.2). */\nconst TICK_CHAR_WIDTH = 7;\nconst TICK_LINE_HEIGHT = 12;\n/** recharts' gap between the axis line and a bottom tick's text — px, at every size:\n * recharts draws it, not the type. */\nconst TICK_GAP = 8;\n/** recharts' own band under level x ticks. */\nconst LEVEL_TICK_BAND = 30;\n/** The least room recharts' x ticks keep between labels, in px at Normal. */\nexport const MIN_TICK_GAP = 32;\n\n/**\n * The height the x axis reserves for its ticks at a text `scale`: tilted by `angle`\n * degrees, the rotated box of the longest label, from its length; level, recharts' own\n * 30 px grown with the labels. `undefined` for level ticks at Normal, where recharts'\n * default is exactly that.\n */\nexport function tiltedTickBand(labels: readonly string[], angle: number, scale = 1): number | undefined {\n if (!angle) return scale === 1 ? undefined : Math.ceil(LEVEL_TICK_BAND * scale);\n const rad = (Math.abs(angle) * Math.PI) / 180;\n const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;\n const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;\n return Math.min(\n Math.round(MAX_TILTED_TICK_BAND * scale),\n Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)),\n );\n}\n\n/** The width the ticks of a y axis get when a caller does not say, in px at Normal. */\nexport const AXIS_TICK_WIDTH = 48;\n\n/**\n * How much air a FITTED axis leaves between the data and its frame, as a fraction of\n * the range. Recharts fits `[dataMin, dataMax]`, which draws a peak half a stroke\n * outside the plot and a curve running to its limit indistinguishable from the frame.\n */\nconst AUTO_PAD = 0.04;\n\n/** The band a fitted axis draws, padded — and a real band for constant data, which is\n * a zero-height domain recharts cannot scale into. `undefined` when nothing finite. */\nexport function paddedDomain(values: Iterable<number>): [number, number] | undefined {\n let low = Infinity;\n let high = -Infinity;\n for (const value of values) {\n if (!Number.isFinite(value)) continue;\n if (value < low) low = value;\n if (value > high) high = value;\n }\n return padBand(low, high);\n}\n\n/**\n * {@link paddedDomain} for a caller that has already walked its own data — so a row\n * of charts can share one scale without building an array to find two numbers in, and\n * without a second padding rule. `low > high` means \"nothing was seen\": `undefined`.\n */\nexport function padBand(low: number, high: number): [number, number] | undefined {\n if (!(low <= high)) return undefined;\n const pad = (high - low) * AUTO_PAD || Math.abs(high) * AUTO_PAD || 1;\n return [low - pad, high + pad];\n}\n\n/**\n * The whole band a y axis occupies: its ticks, and its title when it draws one. For\n * lining a heading up over a PLOT rather than over its column.\n *\n * `scale` is the text size's (`useTextSize().scale`, §3.2, §10.10): the chart draws every\n * band — the default 48 px and a caller's own `width` alike (keksdose's\n * `MONEY_AXIS_WIDTH`) — this many times wider, because the ticks in it are `text-xs`\n * and grow with the text. A heading lined up over the plot has to pass the same scale.\n * One factor for both sides of a facing pair, so the mirrored bands stay equal.\n */\nexport function axisBandWidth(tickWidth: number | undefined, titled: boolean, scale = 1): number {\n const band = (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);\n return scale === 1 ? band : Math.round(band * scale);\n}\n\n/**\n * The colour an axis TITLE takes, or `undefined` for the neutral one.\n *\n * An axis measuring exactly one line is that line's, and saying so in the title lets a\n * reader find a channel's scale without counting axes. An axis measuring several is\n * nobody's — a title in the first one's colour would be claiming it. Counted off the\n * series, so toggling a second line onto an axis gives the colour up in the same render.\n */\nexport function soleSeriesColor(\n axis: Pick<SeriesChartAxis, \"id\" | \"color\">,\n series: readonly Pick<SeriesChartSeries, \"axis\">[],\n): string | undefined {\n const mine = series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id);\n return mine.length === 1 ? axis.color : undefined;\n}\n\n/** The single-axis case, which is most charts. `width` is what the TICKS need;\n * `orientation` is which side they stand on. */\nexport function oneAxis(\n format: ((value: number) => string) | undefined,\n title: string,\n width?: number,\n orientation?: \"left\" | \"right\",\n): SeriesChartAxis[] {\n return [{ id: DEFAULT_Y_AXIS, format, title, width, orientation }];\n}\n\n/** One source's samples: an abscissa and the channels measured against it. */\nexport interface SeriesSource {\n x: readonly number[];\n channels: Readonly<Record<string, readonly number[]>>;\n}\n\n/**\n * Merge sources sampled on different grids into rows the chart can draw.\n *\n * Merged ON THE ABSCISSA VALUE ITSELF, never interpolated onto a common grid: a line\n * through invented points looks exactly like one through measured ones. Where a source\n * has no sample the key is absent, and `connectNulls` bridges the hole with the same\n * straight segment an interpolation would have drawn — without claiming a measurement.\n */\nexport function mergeSeries(sources: readonly SeriesSource[]): Record<string, number>[] {\n const byAbscissa = new Map<number, Record<string, number>>();\n for (const source of sources) {\n source.x.forEach((value, index) => {\n const row = byAbscissa.get(value) ?? { x: value };\n for (const [key, channel] of Object.entries(source.channels)) row[key] = channel[index];\n byAbscissa.set(value, row);\n });\n }\n return [...byAbscissa.values()].sort((a, b) => a.x - b.x);\n}\n\n/**\n * A series key built out of parts — as a CSS identifier.\n *\n * The chart shell paints each series through `--color-<key>`, and skips (with a\n * console warning) any key that is not `[A-Za-z_][A-Za-z0-9_-]*`. A line whose colour\n * was skipped has no stroke at all: an axis, a grid and nothing between them. So a key\n * assembled out of DATA — an id, an enum, a side — goes through here: every other\n * character becomes `_`, the parts are joined with `_`, and a key that would start with\n * a digit or a hyphen gets a leading `_`.\n */\nexport function seriesKey(...parts: (string | number)[]): string {\n const key = parts.map((part) => String(part).replace(/[^A-Za-z0-9_-]/g, \"_\")).join(\"_\");\n return /^[A-Za-z_]/.test(key) ? key : `_${key}`;\n}\n\n/**\n * The band an axis carrying bars or areas draws: the data's extent with ZERO in it,\n * padded only on the sides that are not zero — bars standing on a frame's bottom edge,\n * not floating four per cent above it on a band of air nobody asked for.\n * `undefined` when there is nothing to fit.\n *\n * All-zero data (a quiet period, a zoom window over empty months) is `[0, 1]`: one unit\n * on the free side, the unit {@link padBand} pads a zero extent by. d3 maps every value\n * of a zero-height domain to the range's midpoint, so `[0, 0]` stood the bars on a\n * baseline in the middle of the plot, the \"0\" tick beside it (audit 2026-10-30 DSP-10;\n * keksdose's weekday pattern drew seven 4 px stubs mid-card for a period with no\n * spending).\n */\nexport function anchoredBand(extent: readonly [number, number] | undefined): [number, number] | undefined {\n if (!extent) return undefined;\n const low = Math.min(0, extent[0]);\n const high = Math.max(0, extent[1]);\n if (low === 0 && high === 0) return [0, 1];\n const pad = (high - low) * AUTO_PAD || 1;\n return [low < 0 ? low - pad : 0, high > 0 ? high + pad : 0];\n}\n\n/**\n * Series with their colours settled BEFORE any are switched off.\n *\n * A series with no `color` takes `paletteFor(its position)` — and a legend toggle that\n * hands the chart a shorter list moves every later series one position up, repainting\n * it in its neighbour's colour on each click. Resolving the colours on the full list\n * and filtering after keeps each series in the colour its legend entry shows.\n */\n// Generic so a typed list comes back typed (0.53): a chart of `Month` rows takes it, and\n// its `dot`s still read `point.row` as a `Month`.\nexport function visibleSeries<TRow extends object>(\n series: readonly SeriesChartSeries<TRow>[],\n hidden: ReadonlySet<string>,\n): SeriesChartSeries<TRow>[] {\n return series\n .map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) }))\n .filter((entry) => !hidden.has(entry.key));\n}\n\n/** Where a category or time chart keeps each row's plotted position. Not the caller's\n * key: that one still holds their own value, which `format` and a hit hand back. */\nconst PLOTTED_X = \"__seriesChartX\";\n\n/** A finite number, or `undefined` — the only thing a row cell counts as a sample. */\nexport const finite = (value: unknown): number | undefined =>\n typeof value === \"number\" && Number.isFinite(value) ? value : undefined;\n\n/** A time value as epoch ms. A date-only ISO string is LOCAL midnight (see\n * `SeriesChartX.type`); anything unreadable is `undefined`, i.e. not plotted. */\nfunction toTime(value: unknown): number | undefined {\n if (value instanceof Date) return finite(value.getTime());\n if (typeof value === \"number\") return finite(value);\n if (typeof value !== \"string\") return undefined;\n const day = /^(\\d{4})-(\\d{2})(?:-(\\d{2}))?$/.exec(value);\n if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3] ?? 1)).getTime();\n return finite(Date.parse(value));\n}\n\n/** A category's identity, so a Date matches another Date of the same instant. */\nconst categoryId = (value: unknown) =>\n value instanceof Date ? `d:${value.getTime()}` : `${typeof value}:${String(value)}`;\n\n/**\n * The abscissa, reduced to a number line — which is all the plot, the ticks and the\n * zoom ever deal in. A number stays itself; a category becomes its slot index; a time\n * its epoch ms. Everything the caller sees (ticks, tooltip, hits) is turned back.\n */\nexport interface XModel {\n kind: \"number\" | \"category\" | \"time\";\n /** The caller's key, still holding their value. */\n sourceKey: string;\n /** The key the plot reads. The same as `sourceKey` on a number line. */\n plotKey: string;\n /** The rows as plotted. The caller's own on a number line. */\n rows: readonly SeriesChartRow[];\n /** The caller's rows, which dots and hits hand back. */\n source: readonly SeriesChartRow[];\n position: (value: unknown) => number | undefined;\n valueAt: (position: number) => SeriesChartXValue;\n}\n\nexport function xModel(rows: readonly SeriesChartRow[], x: SeriesChartX): XModel {\n const sourceKey = x.key ?? \"x\";\n if (x.type === \"category\") {\n const slots = new Map<string, number>();\n rows.forEach((row, index) => {\n const id = categoryId(row[sourceKey]);\n if (!slots.has(id)) slots.set(id, index);\n });\n return {\n kind: \"category\",\n sourceKey,\n plotKey: PLOTTED_X,\n rows: rows.map((row, index) => ({ ...row, [PLOTTED_X]: index })),\n source: rows,\n position: (value) => slots.get(categoryId(value)),\n valueAt: (position) => rows[Math.round(position)]?.[sourceKey] as SeriesChartXValue,\n };\n }\n if (x.type === \"time\") {\n return {\n kind: \"time\",\n sourceKey,\n plotKey: PLOTTED_X,\n rows: rows.map((row) => ({ ...row, [PLOTTED_X]: toTime(row[sourceKey]) })),\n source: rows,\n position: toTime,\n valueAt: (position) => new Date(position),\n };\n }\n return {\n kind: \"number\",\n sourceKey,\n plotKey: sourceKey,\n rows,\n source: rows,\n position: finite,\n valueAt: (position) => position,\n };\n}\n\n/** Caller ticks, as positions inside the domain on show. */\nexport function resolveTicks<T>(\n values: SeriesChartTickValues<T> | undefined,\n domain: [number, number] | undefined,\n position: (value: T) => number | undefined,\n): number[] | undefined {\n if (!values || !domain) return undefined;\n const list = typeof values === \"function\" ? values(domain) : values;\n if (!list) return undefined;\n const slack = (domain[1] - domain[0]) * 1e-9;\n return list\n .map(position)\n .filter((at): at is number => at !== undefined && at >= domain[0] - slack && at <= domain[1] + slack);\n}\n\n/** A low/high pair widened by some values, or `undefined` if there is still none. */\nexport function extend(\n span: readonly [number, number] | undefined,\n values: readonly (number | undefined)[],\n): [number, number] | undefined {\n let out: [number, number] | undefined = span ? [span[0], span[1]] : undefined;\n for (const value of values) {\n if (value === undefined || !Number.isFinite(value)) continue;\n out = out ? [Math.min(out[0], value), Math.max(out[1], value)] : [value, value];\n }\n return out;\n}\n\n/** How a time tick is written, by what one step of the ticks is. */\nexport const TIME_TICK_FORMAT: Record<TimeTickUnit, Intl.DateTimeFormatOptions> = {\n hour: { hour: \"2-digit\", minute: \"2-digit\" },\n day: { day: \"numeric\", month: \"short\" },\n month: { month: \"short\", year: \"2-digit\" },\n year: { year: \"numeric\" },\n};\n"],"mappings":"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","names":[]}
|