@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/modal.tsx

@@ -1,505 +0,0 @@
-import { createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import type {
-  ComponentPropsWithoutRef,
-  KeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  PointerEvent as ReactPointerEvent,
-  ReactNode,
-  Ref,
-} from "react";
-import { cn } from "../lib/cn";
-import { mergeRefs } from "./field-parts";
-import { useFocusTrap } from "../hooks/use-focus-trap";
-import { useBreakpoint } from "../hooks/use-breakpoint";
-import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
-import { useOverlayHistory } from "../hooks/use-overlay-history";
-import { useDialogParam, type DialogParam } from "../hooks/use-search-param-state";
-import { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from "../hooks/use-close-transition";
-import { runOwnKeyDown, takeEscape, useDismissLayer } from "../hooks/use-dismiss";
-
-/**
- * Drag the panel by its top strip, in pointer space (dev#460).
- *
- * Deliberately not a library and not persisted: the offset is component state that
- * dies with the dialog. It starts only on a press that lands on the panel's own
- * chrome — never on a field, a button or a link, which is what keeps "drag to select
- * text in the textarea" working. Above `md` only: below it the panel is a
- * full-width bottom sheet with nothing beside it to uncover.
- *
- * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than
- * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from
- * inside the `pointerdown` handler and took them off again from the `pointerup` handler,
- * so the teardown ran only if the gesture ended: React never sees a listener added from
- * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for
- * the life of the page, pinning this hook's state with it. The one caller that enables
- * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent
- * with the pointer still down is exactly that order of events, once per drag.
- */
-function useDragOffset(enabled: boolean) {
-  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);
-  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);
-  // `md:` as the panel's own CSS reads it, at the text size in force: 768 px at Normal,
-  // 960 at Large. `innerWidth >= 768` dragged the bottom sheet of an 800 px window at
-  // Large (refactor audit 2026-10-30, DUP-9). Without `matchMedia` (jsdom), the desktop.
-  const wide = useBreakpoint("md", true);
-
-  const endDrag = () => {
-    from.current = null;
-  };
-
-  return {
-    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own
-     *  closes, so "the position resets when the dialog closes" needs saying. */
-    reset: () => setOffset(null),
-    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,
-    handlers: !enabled
-      ? undefined
-      : {
-          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {
-            if (e.button !== 0 || !wide) return;
-            const target = e.target as HTMLElement;
-            // Only the panel itself and its non-interactive chrome start a drag; a
-            // press inside any control belongs to that control.
-            if (target.closest("input,textarea,select,button,a,[role='button']")) return;
-            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };
-            try {
-              // Capture is what lets the handlers live on the panel: every later
-              // pointer event for this pointer retargets here, so the drag keeps
-              // working once the pointer outruns the panel's own box — which it always
-              // does, since the panel moves out from under it.
-              e.currentTarget.setPointerCapture(e.pointerId);
-            } catch {
-              // jsdom implements no pointer capture, and a browser throws
-              // NotFoundError for a pointerId that is already gone. Neither is worth
-              // refusing the drag: uncaptured, the panel still gets the moves that
-              // land on it.
-            }
-          },
-          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {
-            const start = from.current;
-            if (!start) return;
-            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });
-          },
-          onPointerUp: endDrag,
-          // A cancel (the browser taking the pointer for a scroll or a gesture) and a
-          // lost capture both mean no `pointerup` is coming. Without them the drag would
-          // stay "live" and the next move over the panel would jump it.
-          onPointerCancel: endDrag,
-          onLostPointerCapture: endDrag,
-        },
-  };
-}
-
-/**
- * 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`.
- */
-export const ModalCloseContext = createContext<(() => void) | null>(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
- * selection that starts inside the panel and releases over the backdrop would
- * dismiss the dialog (feedback #254) — and the reverse drag would too, since
- * click targets the common ancestor of the down/up elements.
- */
-export function useBackdropClose(onClose: () => void) {
-  const pressStartedOnBackdrop = useRef(false);
-  return {
-    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {
-      pressStartedOnBackdrop.current = e.target === e.currentTarget;
-    },
-    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {
-      const started = pressStartedOnBackdrop.current;
-      pressStartedOnBackdrop.current = false;
-      if (started && e.target === e.currentTarget) onClose();
-    },
-  };
-}
-
-// Tab-cycle target set: the interactive descendants the focus trap rotates
-// through. Querying live (per keystroke) means dynamically rendered fields are
-// included automatically.
-/**
- * `extends ComponentPropsWithoutRef<"div">` so anything a `<div>` takes reaches the
- * PANEL — the element with `role="dialog"`, which is the one a consumer means. That is
- * 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).
- */
-export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
-  /** Invoked on backdrop click and on Escape. */
-  onClose: () => void;
-  /**
-   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.
-   *
-   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,
-   * which is every caller before this prop and stays exactly as it was. That idiom has
-   * one blind spot: a close the CALLER decides on (a save that succeeded, a
-   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,
-   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an
-   * `if (!open) return null` gate in front of this.
-   *
-   * Passed, the component stays mounted while closed and renders nothing, and a flip
-   * to `false` plays the same exit a dismissal does before the panel goes. The focus
-   * trap, the scroll lock and the Back-gesture history entry are held only while
-   * `open` is true — they are released the moment it turns false, so focus is back on
-   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,
-   * Back, the frame's X) animates first and then calls `onClose`; the `false` that
-   * comes back from it is not animated a second time.
-   *
-   * The body is unmounted once the exit has finished, as it is today, so a form inside
-   * still starts fresh on the next open.
-   */
-  open?: boolean;
-  /** `"alertdialog"` for a dialog that interrupts to ask a question the user must
-   *  answer (a confirmation) — screen readers announce it with more urgency. Only the
-   *  two dialog roles are allowed: the panel stays modal either way. */
-  role?: "dialog" | "alertdialog";
-  children: ReactNode;
-  /**
-   * 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
-   * of which hold a list and several fields rather than one question. A caller
-   * 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 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" | "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; 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;
-  /**
-   * Drop the backdrop's mobile margin so the panel can reach the screen edges
-   * (a full-screen sheet on phones). The panel still needs its own
-   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the
-   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).
-   */
-  fullBleed?: boolean;
-  /**
-   * Let the user drag the panel out of the way by its top edge (Keksdose feedback
-   * dev#460: *"Make the feedback dialog draggable so I can see behind it if it
-   * blocks something."*).
-   *
-   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page
-   * behind it — the feedback composer is the case, an ordinary form is not, and a
-   * draggable panel that has nothing to reveal is a control that can only get lost.
-   *
-   * Pointer-only by design: it is a "move this out of the way" gesture, not a layout
-   * choice worth persisting, and the position resets when the dialog closes. On a
-   * phone the panel is a bottom sheet the width of the screen, so dragging is
-   * suppressed there — there is nothing beside it to see.
-   */
-  draggable?: boolean;
-  /**
-   * Bind the open state to a URL search param (0.12.0): `"edit"` is open while
-   * `?edit` is in the query, `{ key: "dialog", value: "create-lease" }` while
-   * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —
-   * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s
-   * setter, a `<Link>`, a shared link, a reload.
-   *
-   * kastlan's `useDialogParam` did this beside the dialog, so its open state could be
-   * deep-linked and captured in a feedback report. Here it also owns the history:
-   * opening through `useDialogParam` pushes an entry, so the Back gesture closes the
-   * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over
-   * that entry rather than stacking a second one. The dialog's own Back handling
-   * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's
-   * entry already is one, and two would take two Back presses to close one dialog.
-   *
-   * `onClose` still runs, after the param is cleared. Requires a react-router Router.
-   */
-  urlParam?: DialogParam;
-  /**
-   * A request the dialog started is in flight: it stays until the caller says otherwise
-   * (refactor audit 2026-10-30, DUP-3). A request that has left cannot be called back by
-   * closing the dialog, and the dialog should not pretend it can.
-   *
-   * While true the panel is `aria-busy`, and every dismissal is refused before the exit
-   * starts — the backdrop, Escape, Back, the frame's X and an `actions(close)` button —
-   * so nothing lowers and snaps back. Five dialogs used to hold Escape by hand, in an
-   * `onKeyDown`, and nothing else: a backdrop press or Android's Back closed four of them
-   * mid-request, and CancelSubscriptionConfirm, which guarded its `onClose`, lowered its
-   * panel and popped it back up.
-   *
-   * Escape still goes to whatever is open over the dialog first (a list, a tooltip); the
-   * press that reaches the dialog's own layer is taken and dropped. A refused Back puts
-   * the dialog's history entry back, so the Back after the request closes the dialog
-   * rather than leaving the page.
-   *
-   * Not held: a close the caller decides on (`open={false}`, unmounting), and — with
-   * `urlParam` — Back, which leaves the param's entry like any other navigation. A close
-   * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one
-   * made from an effect that depends on that close (ReauthDialog's on a resolved submit)
-   * runs again once `busy` turns false, because the close changes with it.
-   */
-  busy?: boolean;
-  /**
-   * The PANEL — the `role="dialog"` element the rest of the props go on, not the
-   * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on
-   * `FullBleedDialog`). Merged with the panel's own ref, which the focus
-   * trap holds. Set while the panel is in the document: `null` while a dialog with
-   * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.
-   */
-  ref?: Ref<HTMLDivElement>;
-}
-
-/**
- * The URL-bound dialog: the param is the open state, and closing clears it. A
- * component of its own so the router hook is only called by a `Modal` that asked for
- * it — a plain `Modal` must keep working with no Router above it.
- */
-function UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {
-  const [open, setOpen] = useDialogParam(urlParam);
-  // Closed from here the moment the dismissal is decided. Going back is a traversal
-  // the browser lands a task later, and between the two the param still says "open":
-  // without this the panel, already lowered, would pop back up for that task.
-  const [leaving, setLeaving] = useState(false);
-  if (leaving && !open) setLeaving(false);
-  return (
-    <ModalPanel
-      {...rest}
-      open={open && !leaving}
-      ownHistoryEntry={false}
-      onClose={() => {
-        setLeaving(true);
-        setOpen(false);
-        onClose();
-      }}
-    />
-  );
-}
-
-/**
- * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single
- * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each
- * re-implemented or lacked — backdrop-click + Escape to close, the platform Back
- * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus
- * into the panel on open and back to the trigger on close, a Tab focus trap, and
- * `role="dialog"`/`aria-modal`.
- */
-export function Modal(props: ModalProps) {
-  return props.urlParam !== undefined ? (
-    <UrlParamModal {...props} urlParam={props.urlParam} />
-  ) : (
-    <ModalPanel {...props} />
-  );
-}
-
-function ModalPanel({
-  onClose,
-  open,
-  children,
-  size = "md",
-  className,
-  labelledBy,
-  onKeyDown,
-  fullBleed,
-  draggable,
-  style,
-  role = "dialog",
-  urlParam: _urlParam,
-  busy = false,
-  "aria-busy": ariaBusy,
-  ownHistoryEntry = true,
-  ref,
-  ...rest
-}: ModalProps & {
-  /** False when the URL already holds an entry for this dialog — see `urlParam`. */
-  ownHistoryEntry?: boolean;
-}) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not
-  // detached and re-attached on every render.
-  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);
-  const drag = useDragOffset(Boolean(draggable));
-  // Without `open`, mounted means open — the constant `true` every hook below used to
-  // be given. With it, `open` itself.
-  const active = open ?? true;
-
-  // Whether the last close came through `requestClose`, i.e. has ALREADY been
-  // animated. Set in the same batch as the caller's `onClose`, so the render that sees
-  // `open` turn false also sees this and does not lower the panel a second time.
-  const [dismissed, setDismissed] = useState(false);
-  // The exit of a close the caller decided on (only reachable with `open`). Adjusted
-  // during render when `open` flips — `Collapse`'s pattern — so the very render that
-  // closes it already paints the `-out` classes rather than a frame of nothing.
-  const [exiting, setExiting] = useState(false);
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    setDismissed(false);
-    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());
-    if (open) drag.reset();
-  }
-  useEffect(() => {
-    if (!exiting) return;
-    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);
-    return () => clearTimeout(timer);
-  }, [exiting]);
-
-  // The panel lowers itself before the caller unmounts it (live #320 rework). Every
-  // dismissal below goes through `requestClose`; `onClose` still does the closing, one
-  // animation later. A caller that closes the dialog ITSELF — after a save, say —
-  // unmounts with no exit unless it passes `open`, which is what that prop is for.
-  const { closing, requestClose: lower } = useCloseTransition(() => {
-    setDismissed(true);
-    onClose();
-  });
-  // `busy` (DUP-3) refuses HERE, before `lower` starts the exit: a refusal in the
-  // caller's `onClose` comes 220ms too late, after the panel has already gone down.
-  // A new function when `busy` flips, so a close asked for from an effect while busy
-  // (a resolved action whose caller's `isPending` trails its promise) runs again.
-  const requestClose = useCallback(() => {
-    if (!busy) lower();
-  }, [busy, lower]);
-  // A panel on its way out after `open` turned false is already closed: a press on
-  // its fading backdrop must not report a second close.
-  const backdropClose = useBackdropClose(active ? requestClose : () => {});
-  // Back means the same as Escape here. On a phone Escape doesn't exist, so without
-  // this the only way out of a dialog is finding its close button — and Back, the
-  // gesture everyone reaches for, navigated the page underneath instead (#172).
-  // Held only while open: a closed `open={false}` dialog must not own a history entry.
-  // `held`: a Back while busy is refused, and the entry it took is put back.
-  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });
-
-  // Through the shared hook and not by hand: this component's own save/restore copy
-  // was one half of the pair that left the page permanently unscrollable when a dialog
-  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.
-  useBodyScrollLock(active);
-
-  // Focus the panel itself (not the first field) so opening doesn't pop the mobile
-  // keyboard, while still moving focus into the dialog for keyboard and screen-reader
-  // users. Through the shared hook since this component is where it came from — the
-  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,
-  // and nesting, none of which this copy had. Released when `open` turns false, which
-  // hands focus back to the trigger while the panel is still on its way out.
-  //
-  // "The panel itself" only when nothing inside asked for focus: a field the app
-  // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took
-  // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the
-  // one the app chose to show; the trigger still gets focus back on close.
-  useFocusTrap(panelRef, { active, initialFocus: "container" });
-  const leaving = closing || exiting;
-
-  // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a
-  // tooltip opened inside takes the key before the dialog does, wherever focus is —
-  // and the dialog gets it even when focus is not in the panel.
-  const layer = useDismissLayer(active, requestClose);
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    // The caller's handler sees Escape only while this dialog is the layer on top: a
-    // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).
-    runOwnKeyDown(e, onKeyDown, layer);
-    // To whatever is on top — this dialog, unless something opened over it — and
-    // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.
-    takeEscape(e);
-  };
-
-  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking
-  // context its caller sits in. Rendered inline, a modal opened from e.g. the top
-  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the
-  // expanded transaction editor (feedback #320). The tour/command-palette overlays
-  // already portal for the same reason.
-  if (!active && !exiting) return null;
-  return createPortal(
-    <div
-      // Out of the accessibility tree for the length of a caller-driven exit: focus is
-      // already back on the page, and an `aria-modal` panel that is leaving would hide
-      // that page from a screen reader for 220ms. Not `inert` — that would let a tap
-      // fall through the fading backdrop to the row underneath.
-      aria-hidden={exiting || undefined}
-      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):
-      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.
-      data-kit-layer="backdrop"
-      className={cn(
-        // Live #320. The panel below rises only where it is bottom-anchored: from md up
-        // it is centred, and a centred box sliding up from off-screen reads as a
-        // different component arriving rather than as the same one settling.
-        leaving ? "animate-overlay-out" : "animate-overlay",
-        "fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center",
-        fullBleed ? "p-0 md:p-4" : "p-4",
-      )}
-      {...backdropClose}
-    >
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always
-          role="dialog" or "alertdialog" (the ternary hides that from the rule): `onKeyDown`
-          is Escape-to-close per the APG dialog pattern, and the drag handlers are
-          swipe-to-dismiss, whose keyboard path is that same Escape. */}
-      <div
-        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A
-        // wrapper that spreads its own props through to this one cannot then take away
-        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —
-        // losing any of the three is silent, and the symptom (a dialog a screen reader
-        // walks straight out of) shows up nowhere near the call site that caused it.
-        {...rest}
-        ref={setPanel}
-        // Normalised at runtime too: an untyped caller's `role="presentation"` must not
-        // take the dialog role away (props-passthrough pins that).
-        role={role === "alertdialog" ? "alertdialog" : "dialog"}
-        aria-modal="true"
-        // A caller's own `aria-busy` (a preview still loading) is kept beside `busy`.
-        aria-busy={busy ? true : ariaBusy}
-        aria-labelledby={labelledBy}
-        tabIndex={-1}
-        onKeyDown={handleKeyDown}
-        {...drag.handlers}
-        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so
-        // assigning it outright would drop a caller's own `style` on every render but
-        // the ones where the panel is being dragged.
-        style={{ ...style, ...drag.style }}
-        className={cn(
-          leaving ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
-          "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
-          // is bottom-anchored, so it grew UPWARD past the top edge and the part that
-          // went past it could not be reached by any gesture (Keksdose live #254, on
-          // the price-merge dialog — but it was every dialog with more than a screen
-          // of content). `max-h-full` resolves against the backdrop's content box,
-          // which is the viewport minus its own padding, so the panel stops exactly
-          // where the screen does; `overscroll-contain` keeps the fling inside it.
-          //
-          // Three callers had already patched themselves with `max-h-[90vh]` +
-          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is
-          // the default they should not have needed.
-          "max-h-full overflow-y-auto overscroll-contain",
-          "p-4",
-          // The grab affordance sits on the panel's own top strip: a drag handle of
-          // its own would be one more control in a dialog that is mostly one field.
-          draggable && "md:[&>*:first-child]:cursor-grab",
-          className,
-        )}
-      >
-        <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>
-      </div>
-    </div>,
-    document.body,
-  );
-}

package/src/components/money-draft.ts

@@ -1,83 +0,0 @@
-import { useState } from "react";
-import { formatResult } from "../lib/calc";
-
-/**
- * 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 function readAmount(text: string): number | null | undefined {
-  const t = text.trim();
-  if (t === "") return null;
-  const n = Number(t);
-  return Number.isFinite(n) ? n : undefined;
-}
-
-/** A stored amount as a number: a number as it is, a stored text read as an amount's
- *  text is, nothing as `null`. */
-function amountOf(value: unknown): number | null | undefined {
-  if (value === null || value === undefined) return null;
-  return typeof value === "number" ? (Number.isFinite(value) ? value : undefined) : readAmount(String(value));
-}
-
-/** {@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 function useMoneyDraft(value: unknown, valueAs: "number" | "string" = "number"): MoneyDraft {
-  // A number that is not finite is no amount, as on NumberField. NaN never equals itself,
-  // and the re-read below took it for a new value on every render until React threw "Too
-  // many re-renders" — MoneyField and RhfMoneyField both (refactor audit 2026-10-30,
-  // INP-11).
-  const stored = typeof value === "number" && !Number.isFinite(value) ? null : value;
-  // `formatResult`, not `String`: `String` writes exponent form below 1e-6 and from 1e21,
-  // and the commit's digits-only cleanup strips the "e" — one click into the field and
-  // away committed a float leftover of 5.1e-15 as 5.12, 1e-7 as 17 and 1e21 as 121
-  // (INP-12, BUG-11's class).
-  const external =
-    stored === null || stored === undefined ? "" : typeof stored === "number" ? formatResult(stored) : String(stored);
-  const [draft, setDraft] = useState(external);
-  const [seen, setSeen] = useState<unknown>(stored);
-  if (!Object.is(seen, stored)) {
-    setSeen(stored);
-    const same = valueAs === "string" ? draft === external : readAmount(draft) === amountOf(stored);
-    if (!same) setDraft(external);
-  }
-  return {
-    draft,
-    change: (text) => {
-      setDraft(text);
-      return readAmount(text);
-    },
-    settle: (text) => {
-      const next = readAmount(text);
-      if (next === undefined && valueAs === "number") setDraft(external);
-      return next;
-    },
-  };
-}

package/src/components/money-field.tsx

@@ -1,76 +0,0 @@
-import type { ComponentProps, Ref } from "react";
-import { AmountInput } from "./amount-input";
-import { useMoneyDraft } from "./money-draft";
-
-type AmountInputProps = ComponentProps<typeof AmountInput>;
-
-export interface MoneyFieldProps extends Omit<
-  AmountInputProps,
-  "value" | "onChange" | "onCommit" | "negative" | "onNegativeChange" | "ref"
-> {
-  /** The amount, or `null` for an empty field. */
-  value: number | null;
-  /**
-   * The settled amount — on blur, on Enter, on the numpad's "=" and once per calculator
-   * session (its "=", or the pad closing on a newer result); never a half-typed "1200+". Rounded to the currency's minor unit (or
-   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the
-   * field was emptied. Not fired when the settled amount equals `value`, so an
-   * Enter-then-blur saves once.
-   */
-  onCommit: (value: number | null) => void;
-  ref?: Ref<HTMLInputElement>;
-}
-
-/**
- * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a
- * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per
- * row with `NumberField` because AmountInput is string-valued and reports every
- * keystroke, "1200+" included, so a number-state row needed its own parse-and-settle
- * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed
- * lives here, and only a settled figure reaches `onCommit`.
- *
- * The currency chip, the calculator, the numpad, the locale's decimal mark, the
- * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-
- * owned sign (`negative`) is not offered: the figure here carries its own minus.
- *
- * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the
- * field that paints and describes it like {@link Input}'s, and `calculator={false}`,
- * for an amount in a close-on-blur inline editor, where a click on the calculator icon
- * blurs the field and tears the editor down before the popover can open (typed
- * calculations still evaluate).
- *
- * `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 aria-label="Amount" currency="CHF" value={row.amount}
- *   onCommit={(amount) => updateRow(row.id, { amount })} />
- * ```
- */
-export function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {
-  const money = useMoneyDraft(value);
-  return (
-    <AmountInput
-      {...props}
-      ref={ref}
-      value={money.draft}
-      onChange={money.change}
-      onCommit={(text) => {
-        // No number ("-" alone): the draft is back on the stored amount, nothing commits.
-        const next = money.settle(text);
-        if (next !== undefined && next !== value) onCommit(next);
-      }}
-    />
-  );
-}