@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/modal.d.ts

@@ -1,14 +1,12 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, KeyboardEvent, MouseEvent } from 'react';
-import { DialogParam } from '../hooks/use-search-param-state.js';
-
+import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import { type DialogParam } from "../hooks/use-search-param-state.js";
 /**
  * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X
  * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the
  * way Escape does — calling `onClose` from inside unmounts with no exit, which is the
  * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.
  */
-declare const ModalCloseContext: react.Context<(() => void) | null>;
+export declare const ModalCloseContext: import("react").Context<(() => void) | null>;
 /**
  * Backdrop handlers that close only when a press starts AND ends on the
  * backdrop itself. A plain onClick fires on mouseup, so dragging a text
@@ -16,9 +14,9 @@ declare const ModalCloseContext: react.Context<(() => void) | null>;
  * dismiss the dialog (feedback #254) — and the reverse drag would too, since
  * click targets the common ancestor of the down/up elements.
  */
-declare function useBackdropClose(onClose: () => void): {
-    onMouseDown: (e: MouseEvent<HTMLDivElement>) => void;
-    onMouseUp: (e: MouseEvent<HTMLDivElement>) => void;
+export declare function useBackdropClose(onClose: () => void): {
+    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => void;
+    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => void;
 };
 /**
  * `extends ComponentPropsWithoutRef<"div">` so anything a `<div>` takes reaches the
@@ -26,7 +24,7 @@ declare function useBackdropClose(onClose: () => void): {
  * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has
  * to land; before this, a closed prop list dropped all four silently (audit §api-design).
  */
-interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
+export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     /** Invoked on backdrop click and on Escape. */
     onClose: () => void;
     /**
@@ -57,7 +55,8 @@ interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
     role?: "dialog" | "alertdialog";
     children: ReactNode;
     /**
-     * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem).
+     * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less
+     * the backdrop's margin, capped at 110rem).
      *
      * `xl` exists because two callers had already written `className="max-w-3xl"` to
      * reach it — the payee backfill's preview table and the price-merge dialog, both
@@ -65,19 +64,30 @@ interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
      * patching a missing size IS the signal that the size is missing, and a
      * hand-written width in a `className` is a width nothing else can line up with.
      *
+     * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose
+     * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured
+     * table pasted from a spreadsheet and had patched themselves to
+     * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size="lg"`
+     * and then `max-w-5xl`. The cap is the generous one of the two, because a table
+     * squeezed into a box in the middle of a wide screen is a table scrolled sideways
+     * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.
+     * In rem, so it grows with the text size until the screen stops it.
+     *
      * The panel is `w-full` under every one of them, so the cap only bites once the
-     * viewport is wider than it: on a phone all three are the same full-width bottom
+     * viewport is wider than it: on a phone all four are the same full-width bottom
      * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.
      */
-    size?: "md" | "lg" | "xl";
+    size?: "md" | "lg" | "xl" | "2xl";
     /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */
     className?: string;
     /** id of the heading element, wired to `aria-labelledby`. */
     labelledBy?: string;
     /**
-     * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first;
-     * if it calls `preventDefault()` the built-in Escape/Tab handling is skipped
-     * for that event.
+     * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a
+     * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see
+     * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule
+     * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself
+     * no longer holds the dialog open (Wave 2, DUP-1).
      */
     onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
     /**
@@ -129,6 +139,4 @@ interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
  * into the panel on open and back to the trigger on close, a Tab focus trap, and
  * `role="dialog"`/`aria-modal`.
  */
-declare function Modal(props: ModalProps): react.JSX.Element;
-
-export { Modal, ModalCloseContext, type ModalProps, useBackdropClose };
+export declare function Modal(props: ModalProps): import("react").JSX.Element;

package/dist/components/modal.js

@@ -7,7 +7,8 @@ import { useFocusTrap } from "../hooks/use-focus-trap.js";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { useDialogParam } from "../hooks/use-search-param-state.js";
-import { OVERLAY_EXIT_MS, prefersReducedMotion, useCloseTransition } from "../hooks/use-close-transition.js";
+import { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from "../hooks/use-close-transition.js";
+import { runOwnKeyDown, takeEscape, useDismissLayer } from "../hooks/use-dismiss.js";
 function useDragOffset(enabled) {
   const [offset, setOffset] = useState(null);
   const from = useRef(null);
@@ -104,7 +105,7 @@ function ModalPanel({
   if (open !== prevOpen) {
     setPrevOpen(open);
     setDismissed(false);
-    setExiting(open === false && prevOpen === true && !dismissed && !prefersReducedMotion());
+    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());
     if (open) drag.reset();
   }
   useEffect(() => {
@@ -122,14 +123,10 @@ function ModalPanel({
   useBodyScrollLock(active);
   useFocusTrap(panelRef, { active, initialFocus: "container" });
   const leaving = closing || exiting;
+  useDismissLayer(active, requestClose);
   const handleKeyDown = (e) => {
-    onKeyDown?.(e);
-    if (e.defaultPrevented) return;
-    if (e.key === "Escape") {
-      e.stopPropagation();
-      if (active) requestClose();
-      return;
-    }
+    runOwnKeyDown(e, onKeyDown);
+    takeEscape(e);
   };
   if (!active && !exiting) return null;
   return createPortal(
@@ -160,8 +157,8 @@ function ModalPanel({
             style: { ...style, ...drag.style },
             className: cn(
               leaving ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
-              "w-full rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none",
-              { md: "max-w-md", lg: "max-w-lg", xl: "max-w-3xl" }[size],
+              "w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none",
+              { md: "max-w-md", lg: "max-w-lg", xl: "max-w-3xl", "2xl": "max-w-[110rem]" }[size],
               // A panel taller than the screen has to scroll ITSELF. The backdrop is
               // `fixed inset-0` and the body is scroll-locked while a dialog is open, so
               // without this the overflow simply had nowhere to go: on a phone the panel

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useEffect, 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} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\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, prefersReducedMotion, useCloseTransition } from \"../hooks/use-close-transition\";\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\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 || window.innerWidth < 768) 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).\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   * 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 three 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\";\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;\n   * if it calls `preventDefault()` the built-in Escape/Tab handling is skipped\n   * for that event.\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\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  ownHistoryEntry = true,\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  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 && !prefersReducedMotion());\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 } = useCloseTransition(() => {\n    setDismissed(true);\n    onClose();\n  });\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  useOverlayHistory(active && ownHistoryEntry, requestClose);\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  useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n  const leaving = closing || exiting;\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      e.stopPropagation();\n      if (active) requestClose();\n      return;\n    }\n    // Tab containment lives in useFocusTrap, which listens on the panel itself.\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      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={panelRef}\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        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-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\" }[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":[]}
+{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useEffect, 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} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\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\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 || window.innerWidth < 768) 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\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  ownHistoryEntry = true,\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  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 } = useCloseTransition(() => {\n    setDismissed(true);\n    onClose();\n  });\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  useOverlayHistory(active && ownHistoryEntry, requestClose);\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  useDismissLayer(active, requestClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    runOwnKeyDown(e, onKeyDown);\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      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={panelRef}\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        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":[]}

package/dist/components/money-draft.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The draft-and-settle loop of a money field whose store is not AmountInput's text.
+ * Package-private — a module of its own so `money-field.tsx`'s `export *` in the barrel
+ * does not make it API.
+ */
+/** The number an amount's text reads as — AmountInput reports dot-decimal text — `null`
+ *  for empty, `undefined` for no number yet (a lone "-" or ".", a sum still being typed:
+ *  "1200+"). */
+export declare function readAmount(text: string): number | null | undefined;
+/** {@link useMoneyDraft}'s answer. */
+export interface MoneyDraft {
+    /** The text the field shows — AmountInput's `value`. */
+    draft: string;
+    /** AmountInput's `onChange`: keeps the typed text, and answers what it reads as — a
+     *  number, `null` for empty, `undefined` for no number yet. */
+    change: (text: string) => number | null | undefined;
+    /** AmountInput's `onCommit`: what the settled text reads as. With no number in it (a
+     *  lone "-") the draft goes back to the stored amount — rather than a guess, and rather
+     *  than leaving "-" on screen while the store keeps the old figure — and the answer is
+     *  `undefined`. A `"string"` store keeps what was typed: it holds that text too. */
+    settle: (text: string) => number | null | undefined;
+}
+/**
+ * The draft-and-settle loop of a money field whose store is a number, or text the store
+ * holds itself: `MoneyField`'s, and `RhfMoneyField`'s (`valueAs`). One copy since 0.34
+ * (DUP-9, refactor audit 2026-10): the twin's own kept a different parse and no
+ * snap-back, so a lone "-" stayed on screen while the form kept the old number.
+ *
+ * The text being typed lives here — a stored number cannot hold "12." or "12+5" — and is
+ * re-read from `value` only when `value` moves away from what the draft already says (a
+ * reset, another row's save, a `setValue`), so a commit's own echo keeps the typist's
+ * spelling ("12.50" stays "12.50" when 12.5 comes back).
+ */
+export declare function useMoneyDraft(value: unknown, valueAs?: "number" | "string"): MoneyDraft;

package/dist/components/money-draft.js

@@ -0,0 +1,39 @@
+"use client";
+import { useState } from "react";
+function readAmount(text) {
+  const t = text.trim();
+  if (t === "") return null;
+  const n = Number(t);
+  return Number.isFinite(n) ? n : void 0;
+}
+function amountOf(value) {
+  if (value === null || value === void 0) return null;
+  return typeof value === "number" ? Number.isFinite(value) ? value : void 0 : readAmount(String(value));
+}
+function useMoneyDraft(value, valueAs = "number") {
+  const external = value === null || value === void 0 ? "" : String(value);
+  const [draft, setDraft] = useState(external);
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    const same = valueAs === "string" ? draft === external : readAmount(draft) === amountOf(value);
+    if (!same) setDraft(external);
+  }
+  return {
+    draft,
+    change: (text) => {
+      setDraft(text);
+      return readAmount(text);
+    },
+    settle: (text) => {
+      const next = readAmount(text);
+      if (next === void 0 && valueAs === "number") setDraft(external);
+      return next;
+    }
+  };
+}
+export {
+  readAmount,
+  useMoneyDraft
+};
+//# sourceMappingURL=money-draft.js.map

package/dist/components/money-draft.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/money-draft.ts"],"sourcesContent":["import { useState } from \"react\";\n\n/**\n * The draft-and-settle loop of a money field whose store is not AmountInput's text.\n * Package-private — a module of its own so `money-field.tsx`'s `export *` in the barrel\n * does not make it API.\n */\n\n/** The number an amount's text reads as — AmountInput reports dot-decimal text — `null`\n *  for empty, `undefined` for no number yet (a lone \"-\" or \".\", a sum still being typed:\n *  \"1200+\"). */\nexport function readAmount(text: string): number | null | undefined {\n  const t = text.trim();\n  if (t === \"\") return null;\n  const n = Number(t);\n  return Number.isFinite(n) ? n : undefined;\n}\n\n/** A stored amount as a number: a number as it is, a stored text read as an amount's\n *  text is, nothing as `null`. */\nfunction amountOf(value: unknown): number | null | undefined {\n  if (value === null || value === undefined) return null;\n  return typeof value === \"number\" ? (Number.isFinite(value) ? value : undefined) : readAmount(String(value));\n}\n\n/** {@link useMoneyDraft}'s answer. */\nexport interface MoneyDraft {\n  /** The text the field shows — AmountInput's `value`. */\n  draft: string;\n  /** AmountInput's `onChange`: keeps the typed text, and answers what it reads as — a\n   *  number, `null` for empty, `undefined` for no number yet. */\n  change: (text: string) => number | null | undefined;\n  /** AmountInput's `onCommit`: what the settled text reads as. With no number in it (a\n   *  lone \"-\") the draft goes back to the stored amount — rather than a guess, and rather\n   *  than leaving \"-\" on screen while the store keeps the old figure — and the answer is\n   *  `undefined`. A `\"string\"` store keeps what was typed: it holds that text too. */\n  settle: (text: string) => number | null | undefined;\n}\n\n/**\n * The draft-and-settle loop of a money field whose store is a number, or text the store\n * holds itself: `MoneyField`'s, and `RhfMoneyField`'s (`valueAs`). One copy since 0.34\n * (DUP-9, refactor audit 2026-10): the twin's own kept a different parse and no\n * snap-back, so a lone \"-\" stayed on screen while the form kept the old number.\n *\n * The text being typed lives here — a stored number cannot hold \"12.\" or \"12+5\" — and is\n * re-read from `value` only when `value` moves away from what the draft already says (a\n * reset, another row's save, a `setValue`), so a commit's own echo keeps the typist's\n * spelling (\"12.50\" stays \"12.50\" when 12.5 comes back).\n */\nexport function useMoneyDraft(value: unknown, valueAs: \"number\" | \"string\" = \"number\"): MoneyDraft {\n  const external = value === null || value === undefined ? \"\" : String(value);\n  const [draft, setDraft] = useState(external);\n  const [seen, setSeen] = useState<unknown>(value);\n  if (seen !== value) {\n    setSeen(value);\n    const same = valueAs === \"string\" ? draft === external : readAmount(draft) === amountOf(value);\n    if (!same) setDraft(external);\n  }\n  return {\n    draft,\n    change: (text) => {\n      setDraft(text);\n      return readAmount(text);\n    },\n    settle: (text) => {\n      const next = readAmount(text);\n      if (next === undefined && valueAs === \"number\") setDraft(external);\n      return next;\n    },\n  };\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AAWlB,SAAS,WAAW,MAAyC;AAClE,QAAM,IAAI,KAAK,KAAK;AACpB,MAAI,MAAM,GAAI,QAAO;AACrB,QAAM,IAAI,OAAO,CAAC;AAClB,SAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAClC;AAIA,SAAS,SAAS,OAA2C;AAC3D,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,SAAO,OAAO,UAAU,WAAY,OAAO,SAAS,KAAK,IAAI,QAAQ,SAAa,WAAW,OAAO,KAAK,CAAC;AAC5G;AA2BO,SAAS,cAAc,OAAgB,UAA+B,UAAsB;AACjG,QAAM,WAAW,UAAU,QAAQ,UAAU,SAAY,KAAK,OAAO,KAAK;AAC1E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,MAAI,SAAS,OAAO;AAClB,YAAQ,KAAK;AACb,UAAM,OAAO,YAAY,WAAW,UAAU,WAAW,WAAW,KAAK,MAAM,SAAS,KAAK;AAC7F,QAAI,CAAC,KAAM,UAAS,QAAQ;AAAA,EAC9B;AACA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,CAAC,SAAS;AAChB,eAAS,IAAI;AACb,aAAO,WAAW,IAAI;AAAA,IACxB;AAAA,IACA,QAAQ,CAAC,SAAS;AAChB,YAAM,OAAO,WAAW,IAAI;AAC5B,UAAI,SAAS,UAAa,YAAY,SAAU,UAAS,QAAQ;AACjE,aAAO;AAAA,IACT;AAAA,EACF;AACF;","names":[]}

package/dist/components/money-field.d.ts

@@ -1,110 +1,7 @@
-import * as react from 'react';
-import { ComponentProps, Ref } from 'react';
-import { AmountInput } from './amount-input.js';
-import './calculator.js';
-import '../delete-account-setting-DiPX4Vue.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
-import './numpad-sheet.js';
-
+import type { ComponentProps, Ref } from "react";
+import { AmountInput } from "./amount-input.js";
 type AmountInputProps = ComponentProps<typeof AmountInput>;
-interface MoneyFieldProps extends Omit<AmountInputProps, "value" | "onChange" | "onCommit" | "negative" | "onNegativeChange" | "ref"> {
+export interface MoneyFieldProps extends Omit<AmountInputProps, "value" | "onChange" | "onCommit" | "negative" | "onNegativeChange" | "ref"> {
     /** The amount, or `null` for an empty field. */
     value: number | null;
     /**
@@ -138,15 +35,21 @@ interface MoneyFieldProps extends Omit<AmountInputProps, "value" | "onChange" |
  * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a
  * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.
  *
+ * LOCKED (0.34, round 0.34 C2): a row that saves itself passes `commit` (or a
+ * `disabledReason` of its own), AmountInput's — under a locked `WriteLockProvider` the
+ * field stays in the tab order showing its amount, `readOnly`, with the lock's reason in
+ * the kit Tooltip and its description; the calculator, the numpad and the currency
+ * picker are off, and `onCommit` is never called. `disabled` takes it out of the tab
+ * order, which is what a lock must not do.
+ *
  * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:
  * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit
  * price's finer scale (kastlan 5).
  *
  * ```tsx
- * <MoneyField ariaLabel="Amount" currency="CHF" value={row.amount}
+ * <MoneyField aria-label="Amount" currency="CHF" value={row.amount}
  *   onCommit={(amount) => updateRow(row.id, { amount })} />
  * ```
  */
-declare function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps): react.JSX.Element;
-
-export { MoneyField, type MoneyFieldProps };
+export declare function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps): import("react").JSX.Element;
+export {};

package/dist/components/money-field.js

@@ -1,35 +1,19 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import { AmountInput } from "./amount-input.js";
-function parseSettled(text) {
-  const t = text.trim();
-  if (t === "") return null;
-  const n = Number(t);
-  return Number.isFinite(n) ? n : void 0;
-}
+import { useMoneyDraft } from "./money-draft.js";
 function MoneyField({ value, onCommit, ref, ...props }) {
-  const external = value === null ? "" : String(value);
-  const [draft, setDraft] = useState(external);
-  const [seen, setSeen] = useState(value);
-  if (seen !== value) {
-    setSeen(value);
-    if (parseSettled(draft) !== value) setDraft(external);
-  }
+  const money = useMoneyDraft(value);
   return /* @__PURE__ */ jsx(
     AmountInput,
     {
       ...props,
       ref,
-      value: draft,
-      onChange: setDraft,
+      value: money.draft,
+      onChange: money.change,
       onCommit: (text) => {
-        const next = parseSettled(text);
-        if (next === void 0) {
-          setDraft(external);
-          return;
-        }
-        if (next !== value) onCommit(next);
+        const next = money.settle(text);
+        if (next !== void 0 && next !== value) onCommit(next);
       }
     }
   );

package/dist/components/money-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/money-field.tsx"],"sourcesContent":["import { useState, type ComponentProps, type Ref } from \"react\";\nimport { AmountInput } from \"./amount-input\";\n\ntype AmountInputProps = ComponentProps<typeof AmountInput>;\n\nexport interface MoneyFieldProps\n  extends Omit<AmountInputProps, \"value\" | \"onChange\" | \"onCommit\" | \"negative\" | \"onNegativeChange\" | \"ref\"> {\n  /** The amount, or `null` for an empty field. */\n  value: number | null;\n  /**\n   * The settled amount — on blur, on Enter, on the numpad's \"=\" and on a calculator\n   * result; never a half-typed \"1200+\". Rounded to the currency's minor unit (or\n   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the\n   * field was emptied. Not fired when the settled amount equals `value`, so an\n   * Enter-then-blur saves once.\n   */\n  onCommit: (value: number | null) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/** The number a settled text reads as: `null` for empty, `undefined` for no number\n *  (a lone \"-\" or \".\"). */\nfunction parseSettled(text: string): number | null | undefined {\n  const t = text.trim();\n  if (t === \"\") return null;\n  const n = Number(t);\n  return Number.isFinite(n) ? n : undefined;\n}\n\n/**\n * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a\n * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per\n * row with `NumberField` because AmountInput is string-valued and reports every\n * keystroke, \"1200+\" included, so a number-state row needed its own parse-and-settle\n * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed\n * lives here, and only a settled figure reaches `onCommit`.\n *\n * The currency chip, the calculator, the numpad, the locale's decimal mark, the\n * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-\n * owned sign (`negative`) is not offered: the figure here carries its own minus.\n *\n * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the\n * field that paints and describes it like {@link Input}'s, and `calculator={false}`,\n * for an amount in a close-on-blur inline editor, where a click on the calculator icon\n * blurs the field and tears the editor down before the popover can open (typed\n * calculations still evaluate).\n *\n * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a\n * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.\n *\n * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:\n * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit\n * price's finer scale (kastlan 5).\n *\n * ```tsx\n * <MoneyField ariaLabel=\"Amount\" currency=\"CHF\" value={row.amount}\n *   onCommit={(amount) => updateRow(row.id, { amount })} />\n * ```\n */\nexport function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {\n  const external = value === null ? \"\" : String(value);\n  // The draft is re-read from `value` only when `value` moves away from what the draft\n  // already says (a reset, another row's save), so a commit's own echo keeps the\n  // typist's spelling (\"12.50\" stays \"12.50\" when 12.5 comes back).\n  const [draft, setDraft] = useState(external);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (parseSettled(draft) !== value) setDraft(external);\n  }\n  return (\n    <AmountInput\n      {...props}\n      ref={ref}\n      value={draft}\n      onChange={setDraft}\n      onCommit={(text) => {\n        const next = parseSettled(text);\n        // No number (\"-\" alone): back to the stored amount rather than a guess.\n        if (next === undefined) {\n          setDraft(external);\n          return;\n        }\n        if (next !== value) onCommit(next);\n      }}\n    />\n  );\n}\n"],"mappings":";AAuEI;AAvEJ,SAAS,gBAA+C;AACxD,SAAS,mBAAmB;AAqB5B,SAAS,aAAa,MAAyC;AAC7D,QAAM,IAAI,KAAK,KAAK;AACpB,MAAI,MAAM,GAAI,QAAO;AACrB,QAAM,IAAI,OAAO,CAAC;AAClB,SAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAClC;AAgCO,SAAS,WAAW,EAAE,OAAO,UAAU,KAAK,GAAG,MAAM,GAAoB;AAC9E,QAAM,WAAW,UAAU,OAAO,KAAK,OAAO,KAAK;AAInD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,MAAI,SAAS,OAAO;AAClB,YAAQ,KAAK;AACb,QAAI,aAAa,KAAK,MAAM,MAAO,UAAS,QAAQ;AAAA,EACtD;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,CAAC,SAAS;AAClB,cAAM,OAAO,aAAa,IAAI;AAE9B,YAAI,SAAS,QAAW;AACtB,mBAAS,QAAQ;AACjB;AAAA,QACF;AACA,YAAI,SAAS,MAAO,UAAS,IAAI;AAAA,MACnC;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/money-field.tsx"],"sourcesContent":["import type { ComponentProps, Ref } from \"react\";\nimport { AmountInput } from \"./amount-input\";\nimport { useMoneyDraft } from \"./money-draft\";\n\ntype AmountInputProps = ComponentProps<typeof AmountInput>;\n\nexport interface MoneyFieldProps\n  extends Omit<AmountInputProps, \"value\" | \"onChange\" | \"onCommit\" | \"negative\" | \"onNegativeChange\" | \"ref\"> {\n  /** The amount, or `null` for an empty field. */\n  value: number | null;\n  /**\n   * The settled amount — on blur, on Enter, on the numpad's \"=\" and on a calculator\n   * result; never a half-typed \"1200+\". Rounded to the currency's minor unit (or\n   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the\n   * field was emptied. Not fired when the settled amount equals `value`, so an\n   * Enter-then-blur saves once.\n   */\n  onCommit: (value: number | null) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a\n * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per\n * row with `NumberField` because AmountInput is string-valued and reports every\n * keystroke, \"1200+\" included, so a number-state row needed its own parse-and-settle\n * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed\n * lives here, and only a settled figure reaches `onCommit`.\n *\n * The currency chip, the calculator, the numpad, the locale's decimal mark, the\n * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-\n * owned sign (`negative`) is not offered: the figure here carries its own minus.\n *\n * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the\n * field that paints and describes it like {@link Input}'s, and `calculator={false}`,\n * for an amount in a close-on-blur inline editor, where a click on the calculator icon\n * blurs the field and tears the editor down before the popover can open (typed\n * calculations still evaluate).\n *\n * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a\n * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.\n *\n * LOCKED (0.34, round 0.34 C2): a row that saves itself passes `commit` (or a\n * `disabledReason` of its own), AmountInput's — under a locked `WriteLockProvider` the\n * field stays in the tab order showing its amount, `readOnly`, with the lock's reason in\n * the kit Tooltip and its description; the calculator, the numpad and the currency\n * picker are off, and `onCommit` is never called. `disabled` takes it out of the tab\n * order, which is what a lock must not do.\n *\n * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:\n * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit\n * price's finer scale (kastlan 5).\n *\n * ```tsx\n * <MoneyField aria-label=\"Amount\" currency=\"CHF\" value={row.amount}\n *   onCommit={(amount) => updateRow(row.id, { amount })} />\n * ```\n */\nexport function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {\n  const money = useMoneyDraft(value);\n  return (\n    <AmountInput\n      {...props}\n      ref={ref}\n      value={money.draft}\n      onChange={money.change}\n      onCommit={(text) => {\n        // No number (\"-\" alone): the draft is back on the stored amount, nothing commits.\n        const next = money.settle(text);\n        if (next !== undefined && next !== value) onCommit(next);\n      }}\n    />\n  );\n}\n"],"mappings":";AA6DI;AA5DJ,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAwDvB,SAAS,WAAW,EAAE,OAAO,UAAU,KAAK,GAAG,MAAM,GAAoB;AAC9E,QAAM,QAAQ,cAAc,KAAK;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA,MAChB,UAAU,CAAC,SAAS;AAElB,cAAM,OAAO,MAAM,OAAO,IAAI;AAC9B,YAAI,SAAS,UAAa,SAAS,MAAO,UAAS,IAAI;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/month-picker-labels.d.ts

@@ -0,0 +1,5 @@
+import type { MonthPickerLabels } from "./month-picker.js";
+/** The English starting point every override is merged onto. Exported (unlike the
+ *  calendar's) because it is asked for by name: a host building its own translation
+ *  table can spread it rather than re-typing four keys to change one. */
+export declare const DEFAULT_MONTH_PICKER_LABELS: MonthPickerLabels;

package/dist/components/month-picker-labels.js

@@ -0,0 +1,18 @@
+"use client";
+const DEFAULT_MONTH_PICKER_LABELS = {
+  previousYear: "Previous year",
+  nextYear: "Next year",
+  panel: "Choose a month",
+  month: (monthYear) => monthYear,
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  today: "Today",
+  yearPanel: "Choose a year",
+  earlierYears: "Earlier years",
+  laterYears: "Later years",
+  thisYear: "This year"
+};
+export {
+  DEFAULT_MONTH_PICKER_LABELS
+};
+//# sourceMappingURL=month-picker-labels.js.map

package/dist/components/month-picker-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/month-picker-labels.ts"],"sourcesContent":["// The English words of ./month-picker, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./month-picker re-exports them.\n\nimport type { MonthPickerLabels } from \"./month-picker\";\n\n/** The English starting point every override is merged onto. Exported (unlike the\n *  calendar's) because it is asked for by name: a host building its own translation\n *  table can spread it rather than re-typing four keys to change one. */\nexport const DEFAULT_MONTH_PICKER_LABELS: MonthPickerLabels = {\n  previousYear: \"Previous year\",\n  nextYear: \"Next year\",\n  panel: \"Choose a month\",\n  month: (monthYear) => monthYear,\n  previousMonth: \"Previous month\",\n  nextMonth: \"Next month\",\n  today: \"Today\",\n  yearPanel: \"Choose a year\",\n  earlierYears: \"Earlier years\",\n  laterYears: \"Later years\",\n  thisYear: \"This year\",\n};\n"],"mappings":";AASO,MAAM,8BAAiD;AAAA,EAC5D,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO,CAAC,cAAc;AAAA,EACtB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AACZ;","names":[]}