@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/components/modal.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, KeyboardEvent, MouseEvent } from 'react';
+import { DialogParam } from '../hooks/use-search-param-state.js';
 
 /**
  * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X
@@ -101,6 +102,24 @@ interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
      * 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;
 }
 /**
  * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single
@@ -110,6 +129,6 @@ 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({ onClose, open, children, size, className, labelledBy, onKeyDown, fullBleed, draggable, style, role, ...rest }: ModalProps): react.ReactPortal | null;
+declare function Modal(props: ModalProps): react.JSX.Element;
 
 export { Modal, ModalCloseContext, type ModalProps, useBackdropClose };

package/dist/components/modal.js

@@ -6,6 +6,7 @@ import { cn } from "../lib/cn.js";
 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";
 function useDragOffset(enabled) {
   const [offset, setOffset] = useState(null);
@@ -57,7 +58,28 @@ function useBackdropClose(onClose) {
     }
   };
 }
-function Modal({
+function UrlParamModal({ urlParam, onClose, ...rest }) {
+  const [open, setOpen] = useDialogParam(urlParam);
+  const [leaving, setLeaving] = useState(false);
+  if (leaving && !open) setLeaving(false);
+  return /* @__PURE__ */ jsx(
+    ModalPanel,
+    {
+      ...rest,
+      open: open && !leaving,
+      ownHistoryEntry: false,
+      onClose: () => {
+        setLeaving(true);
+        setOpen(false);
+        onClose();
+      }
+    }
+  );
+}
+function Modal(props) {
+  return props.urlParam !== void 0 ? /* @__PURE__ */ jsx(UrlParamModal, { ...props, urlParam: props.urlParam }) : /* @__PURE__ */ jsx(ModalPanel, { ...props });
+}
+function ModalPanel({
   onClose,
   open,
   children,
@@ -69,6 +91,8 @@ function Modal({
   draggable,
   style,
   role = "dialog",
+  urlParam: _urlParam,
+  ownHistoryEntry = true,
   ...rest
 }) {
   const panelRef = useRef(null);
@@ -94,7 +118,7 @@ function Modal({
   });
   const backdropClose = useBackdropClose(active ? requestClose : () => {
   });
-  useOverlayHistory(active, requestClose);
+  useOverlayHistory(active && ownHistoryEntry, requestClose);
   useBodyScrollLock(active);
   useFocusTrap(panelRef, { active, initialFocus: "container" });
   const leaving = closing || exiting;

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 { 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\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({\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  ...rest\n}: ModalProps) {\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, 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      <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, 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      <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":";AAwOI;AAxOJ,SAAS,eAAe,WAAW,QAAQ,gBAAgB;AAC3D,SAAS,oBAAoB;AAQ7B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,sBAAwC;AACjD,SAAS,iBAAiB,sBAAsB,0BAA0B;AAoB1E,SAAS,cAAc,SAAkB;AACvC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0C,IAAI;AAC1E,QAAM,OAAO,OAAgE,IAAI;AAEjF,QAAM,UAAU,MAAM;AACpB,SAAK,UAAU;AAAA,EACjB;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,OAAO,MAAM,UAAU,IAAI;AAAA,IAC3B,OAAO,SAAS,EAAE,WAAW,aAAa,OAAO,CAAC,OAAO,OAAO,CAAC,MAAM,IAAI;AAAA,IAC3E,UAAU,CAAC,UACP,SACA;AAAA,MACE,eAAe,CAAC,MAAyC;AACvD,YAAI,EAAE,WAAW,KAAK,OAAO,aAAa,IAAK;AAC/C,cAAM,SAAS,EAAE;AAGjB,YAAI,OAAO,QAAQ,gDAAgD,EAAG;AACtE,aAAK,UAAU,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,SAAS,IAAI,QAAQ,KAAK,GAAG,IAAI,QAAQ,KAAK,EAAE;AACpF,YAAI;AAKF,YAAE,cAAc,kBAAkB,EAAE,SAAS;AAAA,QAC/C,QAAQ;AAAA,QAKR;AAAA,MACF;AAAA,MACA,eAAe,CAAC,MAAyC;AACvD,cAAM,QAAQ,KAAK;AACnB,YAAI,CAAC,MAAO;AACZ,kBAAU,EAAE,GAAG,MAAM,KAAK,EAAE,UAAU,MAAM,GAAG,GAAG,MAAM,KAAK,EAAE,UAAU,MAAM,EAAE,CAAC;AAAA,MACpF;AAAA,MACA,aAAa;AAAA;AAAA;AAAA;AAAA,MAIb,iBAAiB;AAAA,MACjB,sBAAsB;AAAA,IACxB;AAAA,EACN;AACF;AAQO,MAAM,oBAAoB,cAAmC,IAAI;AASjE,SAAS,iBAAiB,SAAqB;AACpD,QAAM,yBAAyB,OAAO,KAAK;AAC3C,SAAO;AAAA,IACL,aAAa,CAAC,MAAuC;AACnD,6BAAuB,UAAU,EAAE,WAAW,EAAE;AAAA,IAClD;AAAA,IACA,WAAW,CAAC,MAAuC;AACjD,YAAM,UAAU,uBAAuB;AACvC,6BAAuB,UAAU;AACjC,UAAI,WAAW,EAAE,WAAW,EAAE,cAAe,SAAQ;AAAA,IACvD;AAAA,EACF;AACF;AAgHA,SAAS,cAAc,EAAE,UAAU,SAAS,GAAG,KAAK,GAA2C;AAC7F,QAAM,CAAC,MAAM,OAAO,IAAI,eAAe,QAAQ;AAI/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,MAAI,WAAW,CAAC,KAAM,YAAW,KAAK;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,QAAQ,CAAC;AAAA,MACf,iBAAiB;AAAA,MACjB,SAAS,MAAM;AACb,mBAAW,IAAI;AACf,gBAAQ,KAAK;AACb,gBAAQ;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,MAAM,OAAmB;AACvC,SAAO,MAAM,aAAa,SACxB,oBAAC,iBAAe,GAAG,OAAO,UAAU,MAAM,UAAU,IAEpD,oBAAC,cAAY,GAAG,OAAO;AAE3B;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,GAAG;AACL,GAGG;AACD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,OAAO,cAAc,QAAQ,SAAS,CAAC;AAG7C,QAAM,SAAS,QAAQ;AAKvB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAIhD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAC7C,MAAI,SAAS,UAAU;AACrB,gBAAY,IAAI;AAChB,iBAAa,KAAK;AAClB,eAAW,SAAS,SAAS,aAAa,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC;AACvF,QAAI,KAAM,MAAK,MAAM;AAAA,EACvB;AACA,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,eAAe;AACjE,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,CAAC;AAMZ,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,MAAM;AACzD,iBAAa,IAAI;AACjB,YAAQ;AAAA,EACV,CAAC;AAGD,QAAM,gBAAgB,iBAAiB,SAAS,eAAe,MAAM;AAAA,EAAC,CAAC;AAKvE,oBAAkB,UAAU,iBAAiB,YAAY;AAKzD,oBAAkB,MAAM;AAQxB,eAAa,UAAU,EAAE,QAAQ,cAAc,YAAY,CAAC;AAC5D,QAAM,UAAU,WAAW;AAE3B,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,gBAAY,CAAC;AACb,QAAI,EAAE,iBAAkB;AACxB,QAAI,EAAE,QAAQ,UAAU;AACtB,QAAE,gBAAgB;AAClB,UAAI,OAAQ,cAAa;AACzB;AAAA,IACF;AAAA,EAEF;AAOA,MAAI,CAAC,UAAU,CAAC,QAAS,QAAO;AAChC,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAKC,eAAa,WAAW;AAAA,QACxB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIT,UAAU,wBAAwB;AAAA,UAClC;AAAA,UACA,YAAY,eAAe;AAAA,QAC7B;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YAME,GAAG;AAAA,YACJ,KAAK;AAAA,YAGL,MAAM,SAAS,gBAAgB,gBAAgB;AAAA,YAC/C,cAAW;AAAA,YACX,mBAAiB;AAAA,YACjB,UAAU;AAAA,YACV,WAAW;AAAA,YACV,GAAG,KAAK;AAAA,YAIT,OAAO,EAAE,GAAG,OAAO,GAAG,KAAK,MAAM;AAAA,YACjC,WAAW;AAAA,cACT,UAAU,sCAAsC;AAAA,cAChD;AAAA,cACA,EAAE,IAAI,YAAY,IAAI,YAAY,IAAI,YAAY,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAcxD;AAAA,cACA;AAAA;AAAA;AAAA,cAGA,aAAa;AAAA,cACb;AAAA,YACF;AAAA,YAEA,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,cAAe,UAAS;AAAA;AAAA,QAC7D;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

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

@@ -18,6 +18,11 @@ interface MonthPickerLabels {
      * "Aug" read out on its own does not say which year the grid is on.
      */
     month: (monthYear: string) => string;
+    /** `variant="stepper"`: the icon-only arrows that step the value by one month. */
+    previousMonth: string;
+    nextMonth: string;
+    /** `variant="stepper"`: the button that jumps to the current month. Visible text. */
+    today: string;
 }
 /** 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
@@ -73,7 +78,22 @@ interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChan
     /** Extra classes for the trigger button — e.g. a compact `h-9 w-auto` trigger
      *  sitting between two icon buttons in a toolbar. */
     triggerClassName?: string;
+    /**
+     * `"field"` (default): the field-shaped trigger, for a form.
+     *
+     * `"stepper"`: the header of a month PAGE — the month as a heading that opens the
+     * grid, then Today and ‹ › stepping the value by one month. What a calendar page
+     * assembled by hand around the field (overriding its trigger to look like a
+     * heading). `label`, `placeholder`, `invalid` and `triggerClassName` are the field's
+     * and are not drawn here; with no `value` the arrows step from the current month.
+     */
+    variant?: "field" | "stepper";
+    /** `variant="stepper"`: the heading level the month is set in (`<h2>` by default), or
+     *  `false` for no heading element — the page already has one for the month. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | false;
+    /** `variant="stepper"`: draw the Today button. Default `true`. */
+    showToday?: boolean;
 }
-declare function MonthPicker({ value, onChange, locale: localeProp, min, max, label, placeholder, disabled, invalid, formatOptions, currentMonth, labels: labelsProp, className, triggerClassName, ...rest }: MonthPickerProps): react.JSX.Element;
+declare function MonthPicker({ value, onChange, locale: localeProp, min, max, label, placeholder, disabled, invalid, formatOptions, currentMonth, labels: labelsProp, className, triggerClassName, variant, headingLevel, showToday, ...rest }: MonthPickerProps): react.JSX.Element;
 
 export { DEFAULT_MONTH_PICKER_LABELS, MonthPicker, type MonthPickerLabels, type MonthPickerProps };

package/dist/components/month-picker.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
+import { Calendar, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { dirOf, horizontalStep } from "../lib/direction.js";
 import { monthKey, pad } from "../lib/dates.js";
-import { FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from "./ui.js";
+import { Button, FieldLabel, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, IconButton } from "./ui.js";
 import { Popover } from "./popover.js";
 import { splitTriggerAria } from "./trigger-aria.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
@@ -13,7 +13,10 @@ const DEFAULT_MONTH_PICKER_LABELS = {
   previousYear: "Previous year",
   nextYear: "Next year",
   panel: "Choose a month",
-  month: (monthYear) => monthYear
+  month: (monthYear) => monthYear,
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  today: "Today"
 };
 function useMonthPickerLabels(partial) {
   return useKitLabels("monthPicker", DEFAULT_MONTH_PICKER_LABELS, partial);
@@ -41,6 +44,52 @@ function firstOf({ year, month }) {
 }
 const DEFAULT_TRIGGER_FORMAT = { month: "long", year: "numeric" };
 const MONTH_NAME_FORMAT = { month: "long", year: "numeric" };
+function useFocusBackOnClose(open, triggerRef) {
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    const justClosed = wasOpen.current && !open;
+    wasOpen.current = open;
+    if (!justClosed) return;
+    const active = document.activeElement;
+    if (!active || active === document.body) triggerRef.current?.focus();
+  }, [open, triggerRef]);
+}
+function MonthHeadingTrigger({
+  open,
+  toggle,
+  triggerRef,
+  text,
+  panelId,
+  disabled,
+  aria
+}) {
+  useFocusBackOnClose(open, triggerRef);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      disabled,
+      onClick: toggle,
+      "aria-haspopup": "dialog",
+      "aria-controls": panelId,
+      "aria-expanded": open,
+      id: aria.id,
+      "aria-label": aria["aria-label"],
+      "aria-labelledby": aria["aria-labelledby"],
+      "aria-describedby": aria["aria-describedby"],
+      className: cn(
+        "-ms-1.5 inline-flex h-9 min-w-0 items-center gap-1 rounded-md px-1.5 text-lg font-semibold text-[var(--text-primary)] transition-colors",
+        "hover:bg-[var(--bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+        disabled && "cursor-not-allowed opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "truncate", children: text || "\xA0" }),
+        /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 shrink-0 text-[var(--text-muted)]" })
+      ]
+    }
+  );
+}
 function MonthFieldTrigger({
   open,
   toggle,
@@ -56,14 +105,7 @@ function MonthFieldTrigger({
   className,
   aria
 }) {
-  const wasOpen = useRef(false);
-  useEffect(() => {
-    const justClosed = wasOpen.current && !open;
-    wasOpen.current = open;
-    if (!justClosed) return;
-    const active = document.activeElement;
-    if (!active || active === document.body) triggerRef.current?.focus();
-  }, [open, triggerRef]);
+  useFocusBackOnClose(open, triggerRef);
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -267,6 +309,9 @@ function MonthPicker({
   labels: labelsProp,
   className,
   triggerClassName,
+  variant = "field",
+  headingLevel = 2,
+  showToday = true,
   ...rest
 }) {
   const labels = useMonthPickerLabels(labelsProp);
@@ -289,6 +334,88 @@ function MonthPicker({
   const named = typeof label === "string";
   const rootRef = useRef(null);
   const [dir, setDir] = useState("ltr");
+  const grid = (close) => /* @__PURE__ */ jsx(
+    MonthGrid,
+    {
+      value: selected,
+      locale,
+      minKey,
+      maxKey,
+      currentKey,
+      labels,
+      onPick: (key) => {
+        onChange(key);
+        close();
+      }
+    }
+  );
+  if (variant === "stepper") {
+    const base = selected ?? parseMonth(currentKey);
+    const prevKey = toKey(shiftMonth(base, -1));
+    const nextKey = toKey(shiftMonth(base, 1));
+    const outside = (key) => Boolean(minKey && key < minKey || maxKey && key > maxKey);
+    const Heading = headingLevel ? `h${headingLevel}` : null;
+    const trigger = /* @__PURE__ */ jsx(
+      Popover,
+      {
+        width: 256,
+        panelId,
+        labels: { panel: labels.panel },
+        dir,
+        trigger: ({ open, toggle, ref }) => /* @__PURE__ */ jsx(
+          MonthHeadingTrigger,
+          {
+            open,
+            toggle: () => {
+              setDir(dirOf(rootRef.current));
+              toggle();
+            },
+            triggerRef: ref,
+            text: triggerText,
+            panelId,
+            disabled,
+            aria
+          }
+        ),
+        children: grid
+      }
+    );
+    return /* @__PURE__ */ jsxs("div", { ...wrapperRest, ref: rootRef, className: cn("flex min-w-0 items-center gap-2", className), children: [
+      Heading ? /* @__PURE__ */ jsx(Heading, { className: "m-0 min-w-0 text-lg font-semibold", children: trigger }) : trigger,
+      /* @__PURE__ */ jsxs("div", { className: "ms-auto flex shrink-0 items-center gap-1", children: [
+        showToday && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            disabled: disabled || outside(currentKey),
+            onClick: () => {
+              if (currentKey !== value) onChange(currentKey);
+            },
+            children: labels.today
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": labels.previousMonth,
+            disabled: disabled || outside(prevKey),
+            onClick: () => onChange(prevKey),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "rtl:-scale-x-100" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": labels.nextMonth,
+            disabled: disabled || outside(nextKey),
+            onClick: () => onChange(nextKey),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:-scale-x-100" })
+          }
+        )
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { ...wrapperRest, ref: rootRef, className: cn("relative", className), children: [
     label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
     named && /* @__PURE__ */ jsx("span", { id: labelId, "aria-hidden": true, className: "sr-only-fixed", children: label }),
@@ -324,21 +451,7 @@ function MonthPicker({
             className: triggerClassName
           }
         ),
-        children: (close) => /* @__PURE__ */ jsx(
-          MonthGrid,
-          {
-            value: selected,
-            locale,
-            minKey,
-            maxKey,
-            currentKey,
-            labels,
-            onPick: (key) => {
-              onChange(key);
-              close();
-            }
-          }
-        )
+        children: grid
       }
     ),
     /* @__PURE__ */ jsx(