@flanksource/clicky-ui 0.3.36 → 0.3.37

package/dist/overlay/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport {\n  UiArrowLeft,\n  UiClose,\n  UiFullscreen,\n  UiFullscreenFilled,\n} from \"../icons\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /**\n   * Whether the body scrolls its overflow. Default `true`. Set `false` when the\n   * body owns a single fill-height child that scrolls internally (e.g. a\n   * DataTable with a sticky header): the body becomes a non-scrolling flex\n   * column, so only that child's own scroll region moves.\n   */\n  scrollBody?: boolean;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n  \"2xl\": \"max-w-6xl\",\n  full: \"max-w-[95vw]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nconst MOBILE_QUERY = \"(max-width: 639px)\";\nconst REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst MOBILE_TRANSITION_MS = 200;\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nfunction visibleFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((element) => {\n    const style = window.getComputedStyle(element);\n    return (\n      !element.hidden &&\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\"\n    );\n  });\n}\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  scrollBody = true,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const closeTimerRef = useRef<number | undefined>(undefined);\n  const openFrameRef = useRef<number | undefined>(undefined);\n  const [present, setPresent] = useState(open);\n  const [mobileVisible, setMobileVisible] = useState(false);\n  const { depth } = useModalStack(present);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    window.clearTimeout(closeTimerRef.current);\n    window.cancelAnimationFrame(openFrameRef.current ?? 0);\n    const animateMobile =\n      window.matchMedia(MOBILE_QUERY).matches &&\n      !window.matchMedia(REDUCED_MOTION_QUERY).matches;\n\n    if (open) {\n      setPresent(true);\n      if (animateMobile) {\n        setMobileVisible(false);\n        openFrameRef.current = window.requestAnimationFrame(() => {\n          setMobileVisible(true);\n        });\n      } else {\n        setMobileVisible(true);\n      }\n    } else if (animateMobile) {\n      setMobileVisible(false);\n      closeTimerRef.current = window.setTimeout(\n        () => setPresent(false),\n        MOBILE_TRANSITION_MS,\n      );\n    } else {\n      setMobileVisible(false);\n      setPresent(false);\n    }\n\n    return () => {\n      window.clearTimeout(closeTimerRef.current);\n      window.cancelAnimationFrame(openFrameRef.current ?? 0);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEscapeLayer(present, () => {\n    if (!open || !closeOnEsc) return;\n    // While the prompt is up, Escape dismisses the prompt rather than the modal.\n    if (confirming) setConfirming(false);\n    else requestClose();\n  });\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!present) return null;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4 max-sm:items-stretch max-sm:justify-end max-sm:p-0 max-sm:!bg-transparent\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Sits in the modal band of the centralized z-index scale; +depth keeps\n      // nested modals above their parent. Floating content (dropdowns, tooltips)\n      // computes its z relative to this via useFloatingZIndex so it clears the\n      // modal instead of rendering behind it.\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        data-state={mobileVisible ? \"open\" : \"closed\"}\n        className={cn(\n          \"relative flex w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          \"max-sm:!h-dvh max-sm:!max-h-dvh max-sm:!max-w-none max-sm:!rounded-none max-sm:!border-0 max-sm:shadow-none\",\n          \"max-sm:transition-transform max-sm:duration-200 max-sm:ease-out max-sm:motion-reduce:transition-none\",\n          \"max-sm:data-[state=closed]:translate-x-full max-sm:data-[state=open]:translate-x-0\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        // Inline maxHeight (not an arbitrary Tailwind class) so the panel stays\n        // viewport-bounded even when a consumer's Tailwind build can't generate\n        // the dvh utility — e.g. www aliases clicky-ui to source but scans the\n        // published dist. When expanded, fill the viewport.\n        style={{\n          maxHeight: \"calc(100dvh - 2rem)\",\n          ...(expanded ? { height: \"calc(100dvh - 2rem)\" } : {}),\n        }}\n        onClick={(e) => e.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== \"Tab\") return;\n          const scope = confirming\n            ? dialogRef.current?.querySelector<HTMLElement>(\n                \"[role='alertdialog']\",\n              )\n            : dialogRef.current;\n          if (!scope) return;\n          const focusable = visibleFocusableElements(scope);\n          const first = focusable[0];\n          const last = focusable[focusable.length - 1];\n          if (!first || !last) {\n            event.preventDefault();\n            scope.focus();\n          } else if (event.shiftKey && document.activeElement === first) {\n            event.preventDefault();\n            last.focus();\n          } else if (!event.shiftKey && document.activeElement === last) {\n            event.preventDefault();\n            first.focus();\n          }\n        }}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"shrink-0 px-density-4 py-density-3 border-b border-border max-sm:min-h-14 max-sm:bg-background\">\n            <div className=\"flex items-center gap-density-2\">\n              {!hideClose && (\n                <Button\n                  type=\"button\"\n                  onClick={requestClose}\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  aria-label=\"Back\"\n                  className=\"-ml-2 text-foreground sm:hidden\"\n                >\n                  <Icon icon={UiArrowLeft} />\n                </Button>\n              )}\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1 max-sm:text-base max-sm:leading-6\">\n                  {title}\n                </h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={\n                    expanded ? \"Restore size\" : \"Expand to fullscreen\"\n                  }\n                  className=\"text-muted-foreground hover:text-foreground max-sm:hidden\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground max-sm:hidden\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div\n          data-slot=\"modal-body\"\n          className={cn(\n            \"min-h-0 flex-1 px-density-4 py-density-3 max-sm:py-density-4\",\n            scrollBody ? \"overflow-auto\" : \"flex flex-col overflow-hidden\",\n          )}\n        >\n          {children}\n        </div>\n        {footer && (\n          <div\n            data-slot=\"modal-footer\"\n            className=\"shrink-0 px-density-4 py-density-3 border-t border-border max-sm:py-density-4\"\n          >\n            {footer}\n          </div>\n        )}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={\n              confirmClose === true\n                ? DEFAULT_CONFIRM\n                : { ...DEFAULT_CONFIRM, ...confirmClose }\n            }\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  // Render into document.body so the fixed-position overlay escapes any ancestor\n  // transform/overflow (e.g. a dropdown menu positioned via a CSS transform),\n  // which would otherwise trap position:fixed inside that ancestor's box and clip\n  // the modal to it.\n  return typeof document !== \"undefined\"\n    ? createPortal(overlay, document.body)\n    : null;\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4 max-sm:rounded-none\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={\n        typeof options.title === \"string\" ? options.title : \"Confirm close\"\n      }\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">\n          {options.message}\n        </p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport {\n  UiArrowLeft,\n  UiClose,\n  UiFullscreen,\n  UiFullscreenFilled,\n} from \"../icons\";\nimport { mediaMatches } from \"../hooks/use-media-query\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /**\n   * Whether the body scrolls its overflow. Default `true`. Set `false` when the\n   * body owns a single fill-height child that scrolls internally (e.g. a\n   * DataTable with a sticky header): the body becomes a non-scrolling flex\n   * column, so only that child's own scroll region moves.\n   */\n  scrollBody?: boolean;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-2xl\",\n  xl: \"max-w-4xl\",\n  \"2xl\": \"max-w-6xl\",\n  full: \"max-w-[95vw]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nconst MOBILE_QUERY = \"(max-width: 639px)\";\nconst REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\nconst MOBILE_TRANSITION_MS = 200;\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nfunction visibleFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((element) => {\n    const style = window.getComputedStyle(element);\n    return (\n      !element.hidden &&\n      style.display !== \"none\" &&\n      style.visibility !== \"hidden\"\n    );\n  });\n}\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  scrollBody = true,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const closeTimerRef = useRef<number | undefined>(undefined);\n  const openFrameRef = useRef<number | undefined>(undefined);\n  const [present, setPresent] = useState(open);\n  const [mobileVisible, setMobileVisible] = useState(false);\n  const { depth } = useModalStack(present);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    window.clearTimeout(closeTimerRef.current);\n    window.cancelAnimationFrame(openFrameRef.current ?? 0);\n    // Both false where the environment cannot be asked, which lands on the\n    // desktop path: mount and unmount immediately, no deferred unmount to wait\n    // on. That is the right answer under SSR and in a consumer's jsdom suite.\n    const animateMobile =\n      mediaMatches(MOBILE_QUERY) && !mediaMatches(REDUCED_MOTION_QUERY);\n\n    if (open) {\n      setPresent(true);\n      if (animateMobile) {\n        setMobileVisible(false);\n        openFrameRef.current = window.requestAnimationFrame(() => {\n          setMobileVisible(true);\n        });\n      } else {\n        setMobileVisible(true);\n      }\n    } else if (animateMobile) {\n      setMobileVisible(false);\n      closeTimerRef.current = window.setTimeout(\n        () => setPresent(false),\n        MOBILE_TRANSITION_MS,\n      );\n    } else {\n      setMobileVisible(false);\n      setPresent(false);\n    }\n\n    return () => {\n      window.clearTimeout(closeTimerRef.current);\n      window.cancelAnimationFrame(openFrameRef.current ?? 0);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEscapeLayer(present, () => {\n    if (!open || !closeOnEsc) return;\n    // While the prompt is up, Escape dismisses the prompt rather than the modal.\n    if (confirming) setConfirming(false);\n    else requestClose();\n  });\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!present) return null;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4 max-sm:items-stretch max-sm:justify-end max-sm:p-0 max-sm:!bg-transparent\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Sits in the modal band of the centralized z-index scale; +depth keeps\n      // nested modals above their parent. Floating content (dropdowns, tooltips)\n      // computes its z relative to this via useFloatingZIndex so it clears the\n      // modal instead of rendering behind it.\n      style={{ zIndex: zIndex.modal + depth * zIndex.modalStep }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        data-state={mobileVisible ? \"open\" : \"closed\"}\n        className={cn(\n          \"relative flex w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\n          \"max-sm:!h-dvh max-sm:!max-h-dvh max-sm:!max-w-none max-sm:!rounded-none max-sm:!border-0 max-sm:shadow-none\",\n          \"max-sm:transition-transform max-sm:duration-200 max-sm:ease-out max-sm:motion-reduce:transition-none\",\n          \"max-sm:data-[state=closed]:translate-x-full max-sm:data-[state=open]:translate-x-0\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        // Inline maxHeight (not an arbitrary Tailwind class) so the panel stays\n        // viewport-bounded even when a consumer's Tailwind build can't generate\n        // the dvh utility — e.g. www aliases clicky-ui to source but scans the\n        // published dist. When expanded, fill the viewport.\n        style={{\n          maxHeight: \"calc(100dvh - 2rem)\",\n          ...(expanded ? { height: \"calc(100dvh - 2rem)\" } : {}),\n        }}\n        onClick={(e) => e.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== \"Tab\") return;\n          const scope = confirming\n            ? dialogRef.current?.querySelector<HTMLElement>(\n                \"[role='alertdialog']\",\n              )\n            : dialogRef.current;\n          if (!scope) return;\n          const focusable = visibleFocusableElements(scope);\n          const first = focusable[0];\n          const last = focusable[focusable.length - 1];\n          if (!first || !last) {\n            event.preventDefault();\n            scope.focus();\n          } else if (event.shiftKey && document.activeElement === first) {\n            event.preventDefault();\n            last.focus();\n          } else if (!event.shiftKey && document.activeElement === last) {\n            event.preventDefault();\n            first.focus();\n          }\n        }}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"shrink-0 px-density-4 py-density-3 border-b border-border max-sm:min-h-14 max-sm:bg-background\">\n            <div className=\"flex items-center gap-density-2\">\n              {!hideClose && (\n                <Button\n                  type=\"button\"\n                  onClick={requestClose}\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  aria-label=\"Back\"\n                  className=\"-ml-2 text-foreground sm:hidden\"\n                >\n                  <Icon icon={UiArrowLeft} />\n                </Button>\n              )}\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1 max-sm:text-base max-sm:leading-6\">\n                  {title}\n                </h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={\n                    expanded ? \"Restore size\" : \"Expand to fullscreen\"\n                  }\n                  className=\"text-muted-foreground hover:text-foreground max-sm:hidden\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground max-sm:hidden\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div\n          data-slot=\"modal-body\"\n          className={cn(\n            \"min-h-0 flex-1 px-density-4 py-density-3 max-sm:py-density-4\",\n            scrollBody ? \"overflow-auto\" : \"flex flex-col overflow-hidden\",\n          )}\n        >\n          {children}\n        </div>\n        {footer && (\n          <div\n            data-slot=\"modal-footer\"\n            className=\"shrink-0 px-density-4 py-density-3 border-t border-border max-sm:py-density-4\"\n          >\n            {footer}\n          </div>\n        )}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={\n              confirmClose === true\n                ? DEFAULT_CONFIRM\n                : { ...DEFAULT_CONFIRM, ...confirmClose }\n            }\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  // Render into document.body so the fixed-position overlay escapes any ancestor\n  // transform/overflow (e.g. a dropdown menu positioned via a CSS transform),\n  // which would otherwise trap position:fixed inside that ancestor's box and clip\n  // the modal to it.\n  return typeof document !== \"undefined\"\n    ? createPortal(overlay, document.body)\n    : null;\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4 max-sm:rounded-none\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={\n        typeof options.title === \"string\" ? options.title : \"Confirm close\"\n      }\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">\n          {options.message}\n        </p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/overlay/confirmMemory.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const PREFIX = "clicky-ui:confirm:";
+const CONFIRMED = "confirmed";
+const listeners = /* @__PURE__ */ new Set();
+function store() {
+  if (typeof window === "undefined") return null;
+  try {
+    const storage = window.localStorage;
+    storage.getItem(PREFIX);
+    return storage;
+  } catch {
+    return null;
+  }
+}
+function canRememberConfirm() {
+  return store() !== null;
+}
+function isConfirmRemembered(key) {
+  var _a;
+  return ((_a = store()) == null ? void 0 : _a.getItem(PREFIX + key)) === CONFIRMED;
+}
+function rememberConfirm(key) {
+  const storage = store();
+  if (!storage) throw new Error(`cannot remember confirmation "${key}": localStorage is unavailable`);
+  storage.setItem(PREFIX + key, CONFIRMED);
+  notify();
+}
+function forgetConfirm(key) {
+  var _a;
+  (_a = store()) == null ? void 0 : _a.removeItem(PREFIX + key);
+  notify();
+}
+function subscribeConfirmMemory(listener) {
+  listeners.add(listener);
+  window.addEventListener("storage", listener);
+  return () => {
+    listeners.delete(listener);
+    window.removeEventListener("storage", listener);
+  };
+}
+function notify() {
+  for (const listener of listeners) listener();
+}
+exports.canRememberConfirm = canRememberConfirm;
+exports.forgetConfirm = forgetConfirm;
+exports.isConfirmRemembered = isConfirmRemembered;
+exports.rememberConfirm = rememberConfirm;
+exports.subscribeConfirmMemory = subscribeConfirmMemory;
+//# sourceMappingURL=confirmMemory.cjs.map

package/dist/overlay/confirmMemory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmMemory.cjs","sources":["../../src/overlay/confirmMemory.ts"],"sourcesContent":["const PREFIX = \"clicky-ui:confirm:\";\nconst CONFIRMED = \"confirmed\";\n\nconst listeners = new Set<() => void>();\n\n/**\n * The browser store, or null where it cannot be used. Merely reading\n * `window.localStorage` throws in a sandboxed frame or with site data blocked,\n * so the probe is the access itself.\n *\n * Null means \"never remembered\": a store that cannot be read must not be\n * mistaken for an approval, so the prompt keeps showing.\n */\nfunction store(): Storage | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const storage = window.localStorage;\n    storage.getItem(PREFIX);\n    return storage;\n  } catch {\n    return null;\n  }\n}\n\n/** Whether a \"remember my choice\" answer can be persisted at all. */\nexport function canRememberConfirm(): boolean {\n  return store() !== null;\n}\n\nexport function isConfirmRemembered(key: string): boolean {\n  return store()?.getItem(PREFIX + key) === CONFIRMED;\n}\n\nexport function rememberConfirm(key: string): void {\n  const storage = store();\n  if (!storage) throw new Error(`cannot remember confirmation \"${key}\": localStorage is unavailable`);\n  storage.setItem(PREFIX + key, CONFIRMED);\n  notify();\n}\n\nexport function forgetConfirm(key: string): void {\n  store()?.removeItem(PREFIX + key);\n  notify();\n}\n\n/** Subscribes to remember/forget in this tab and to storage edits in others. */\nexport function subscribeConfirmMemory(listener: () => void): () => void {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction notify() {\n  for (const listener of listeners) listener();\n}\n"],"names":[],"mappings":";;AAAA,MAAM,SAAS;AACf,MAAM,YAAY;AAElB,MAAM,gCAAgB,IAAA;AAUtB,SAAS,QAAwB;AAC/B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,MAAI;AACF,UAAM,UAAU,OAAO;AACvB,YAAQ,QAAQ,MAAM;AACtB,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGO,SAAS,qBAA8B;AAC5C,SAAO,YAAY;AACrB;AAEO,SAAS,oBAAoB,KAAsB;;AACxD,WAAO,WAAA,MAAA,mBAAS,QAAQ,SAAS,UAAS;AAC5C;AAEO,SAAS,gBAAgB,KAAmB;AACjD,QAAM,UAAU,MAAA;AAChB,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,iCAAiC,GAAG,gCAAgC;AAClG,UAAQ,QAAQ,SAAS,KAAK,SAAS;AACvC,SAAA;AACF;AAEO,SAAS,cAAc,KAAmB;;AAC/C,oBAAA,mBAAS,WAAW,SAAS;AAC7B,SAAA;AACF;AAGO,SAAS,uBAAuB,UAAkC;AACvE,YAAU,IAAI,QAAQ;AACtB,SAAO,iBAAiB,WAAW,QAAQ;AAC3C,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AACzB,WAAO,oBAAoB,WAAW,QAAQ;AAAA,EAChD;AACF;AAEA,SAAS,SAAS;AAChB,aAAW,YAAY,UAAW,UAAA;AACpC;;;;;;"}

package/dist/overlay/confirmMemory.d.ts

@@ -0,0 +1,8 @@
+/** Whether a "remember my choice" answer can be persisted at all. */
+export declare function canRememberConfirm(): boolean;
+export declare function isConfirmRemembered(key: string): boolean;
+export declare function rememberConfirm(key: string): void;
+export declare function forgetConfirm(key: string): void;
+/** Subscribes to remember/forget in this tab and to storage edits in others. */
+export declare function subscribeConfirmMemory(listener: () => void): () => void;
+//# sourceMappingURL=confirmMemory.d.ts.map

package/dist/overlay/confirmMemory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmMemory.d.ts","sourceRoot":"","sources":["../../src/overlay/confirmMemory.ts"],"names":[],"mappings":"AAwBA,qEAAqE;AACrE,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAExD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAKjD;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAG/C;AAED,gFAAgF;AAChF,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAOvE"}

package/dist/overlay/confirmMemory.js

@@ -0,0 +1,50 @@
+const PREFIX = "clicky-ui:confirm:";
+const CONFIRMED = "confirmed";
+const listeners = /* @__PURE__ */ new Set();
+function store() {
+  if (typeof window === "undefined") return null;
+  try {
+    const storage = window.localStorage;
+    storage.getItem(PREFIX);
+    return storage;
+  } catch {
+    return null;
+  }
+}
+function canRememberConfirm() {
+  return store() !== null;
+}
+function isConfirmRemembered(key) {
+  var _a;
+  return ((_a = store()) == null ? void 0 : _a.getItem(PREFIX + key)) === CONFIRMED;
+}
+function rememberConfirm(key) {
+  const storage = store();
+  if (!storage) throw new Error(`cannot remember confirmation "${key}": localStorage is unavailable`);
+  storage.setItem(PREFIX + key, CONFIRMED);
+  notify();
+}
+function forgetConfirm(key) {
+  var _a;
+  (_a = store()) == null ? void 0 : _a.removeItem(PREFIX + key);
+  notify();
+}
+function subscribeConfirmMemory(listener) {
+  listeners.add(listener);
+  window.addEventListener("storage", listener);
+  return () => {
+    listeners.delete(listener);
+    window.removeEventListener("storage", listener);
+  };
+}
+function notify() {
+  for (const listener of listeners) listener();
+}
+export {
+  canRememberConfirm,
+  forgetConfirm,
+  isConfirmRemembered,
+  rememberConfirm,
+  subscribeConfirmMemory
+};
+//# sourceMappingURL=confirmMemory.js.map

package/dist/overlay/confirmMemory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmMemory.js","sources":["../../src/overlay/confirmMemory.ts"],"sourcesContent":["const PREFIX = \"clicky-ui:confirm:\";\nconst CONFIRMED = \"confirmed\";\n\nconst listeners = new Set<() => void>();\n\n/**\n * The browser store, or null where it cannot be used. Merely reading\n * `window.localStorage` throws in a sandboxed frame or with site data blocked,\n * so the probe is the access itself.\n *\n * Null means \"never remembered\": a store that cannot be read must not be\n * mistaken for an approval, so the prompt keeps showing.\n */\nfunction store(): Storage | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const storage = window.localStorage;\n    storage.getItem(PREFIX);\n    return storage;\n  } catch {\n    return null;\n  }\n}\n\n/** Whether a \"remember my choice\" answer can be persisted at all. */\nexport function canRememberConfirm(): boolean {\n  return store() !== null;\n}\n\nexport function isConfirmRemembered(key: string): boolean {\n  return store()?.getItem(PREFIX + key) === CONFIRMED;\n}\n\nexport function rememberConfirm(key: string): void {\n  const storage = store();\n  if (!storage) throw new Error(`cannot remember confirmation \"${key}\": localStorage is unavailable`);\n  storage.setItem(PREFIX + key, CONFIRMED);\n  notify();\n}\n\nexport function forgetConfirm(key: string): void {\n  store()?.removeItem(PREFIX + key);\n  notify();\n}\n\n/** Subscribes to remember/forget in this tab and to storage edits in others. */\nexport function subscribeConfirmMemory(listener: () => void): () => void {\n  listeners.add(listener);\n  window.addEventListener(\"storage\", listener);\n  return () => {\n    listeners.delete(listener);\n    window.removeEventListener(\"storage\", listener);\n  };\n}\n\nfunction notify() {\n  for (const listener of listeners) listener();\n}\n"],"names":[],"mappings":"AAAA,MAAM,SAAS;AACf,MAAM,YAAY;AAElB,MAAM,gCAAgB,IAAA;AAUtB,SAAS,QAAwB;AAC/B,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,MAAI;AACF,UAAM,UAAU,OAAO;AACvB,YAAQ,QAAQ,MAAM;AACtB,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGO,SAAS,qBAA8B;AAC5C,SAAO,YAAY;AACrB;AAEO,SAAS,oBAAoB,KAAsB;AA7B1D;AA8BE,WAAO,WAAA,MAAA,mBAAS,QAAQ,SAAS,UAAS;AAC5C;AAEO,SAAS,gBAAgB,KAAmB;AACjD,QAAM,UAAU,MAAA;AAChB,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,iCAAiC,GAAG,gCAAgC;AAClG,UAAQ,QAAQ,SAAS,KAAK,SAAS;AACvC,SAAA;AACF;AAEO,SAAS,cAAc,KAAmB;AAxCjD;AAyCE,oBAAA,mBAAS,WAAW,SAAS;AAC7B,SAAA;AACF;AAGO,SAAS,uBAAuB,UAAkC;AACvE,YAAU,IAAI,QAAQ;AACtB,SAAO,iBAAiB,WAAW,QAAQ;AAC3C,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AACzB,WAAO,oBAAoB,WAAW,QAAQ;AAAA,EAChD;AACF;AAEA,SAAS,SAAS;AAChB,aAAW,YAAY,UAAW,UAAA;AACpC;"}

package/dist/overlay/useConfirm.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const ConfirmDialog = require("./ConfirmDialog.cjs");
+const confirmMemory = require("./confirmMemory.cjs");
+function useConfirm() {
+  const [pending, setPending] = react.useState(null);
+  const pendingRef = react.useRef(null);
+  react.useEffect(() => () => {
+    var _a;
+    return (_a = pendingRef.current) == null ? void 0 : _a.resolve(false);
+  }, []);
+  const confirm = react.useCallback((options) => {
+    var _a;
+    if (options.remember && confirmMemory.isConfirmRemembered(options.remember.key)) return Promise.resolve(true);
+    (_a = pendingRef.current) == null ? void 0 : _a.resolve(false);
+    return new Promise((resolve) => {
+      const next = { options, resolve };
+      pendingRef.current = next;
+      setPending(next);
+    });
+  }, []);
+  const settle = (confirmed) => {
+    pendingRef.current = null;
+    setPending(null);
+    pending == null ? void 0 : pending.resolve(confirmed);
+  };
+  const dialog = pending ? /* @__PURE__ */ jsxRuntime.jsx(ConfirmDialog.ConfirmDialog, { ...pending.options, open: true, onConfirm: () => settle(true), onCancel: () => settle(false) }) : null;
+  return { confirm, dialog };
+}
+function useConfirmMemory(key) {
+  const remembered = react.useSyncExternalStore(
+    confirmMemory.subscribeConfirmMemory,
+    () => key !== void 0 && confirmMemory.isConfirmRemembered(key),
+    () => false
+  );
+  const forget = react.useCallback(() => {
+    if (key !== void 0) confirmMemory.forgetConfirm(key);
+  }, [key]);
+  return { remembered, forget };
+}
+exports.useConfirm = useConfirm;
+exports.useConfirmMemory = useConfirmMemory;
+//# sourceMappingURL=useConfirm.cjs.map

package/dist/overlay/useConfirm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirm.cjs","sources":["../../src/overlay/useConfirm.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from \"react\";\nimport { ConfirmDialog, type ConfirmOptions } from \"./ConfirmDialog\";\nimport { forgetConfirm, isConfirmRemembered, subscribeConfirmMemory } from \"./confirmMemory\";\n\ntype PendingConfirm = { options: ConfirmOptions; resolve: (confirmed: boolean) => void };\n\n/**\n * Promise-returning confirmation, for call sites that need an answer inline —\n * a `beforeRun` hook, a guard before a mutation. Render `dialog` once.\n */\nexport function useConfirm(): {\n  confirm: (options: ConfirmOptions) => Promise<boolean>;\n  dialog: ReactNode;\n} {\n  const [pending, setPending] = useState<PendingConfirm | null>(null);\n  const pendingRef = useRef<PendingConfirm | null>(null);\n\n  useEffect(() => () => pendingRef.current?.resolve(false), []);\n\n  const confirm = useCallback((options: ConfirmOptions) => {\n    if (options.remember && isConfirmRemembered(options.remember.key)) return Promise.resolve(true);\n    // A newer request supersedes one still on screen.\n    pendingRef.current?.resolve(false);\n    return new Promise<boolean>((resolve) => {\n      const next = { options, resolve };\n      pendingRef.current = next;\n      setPending(next);\n    });\n  }, []);\n\n  const settle = (confirmed: boolean) => {\n    pendingRef.current = null;\n    setPending(null);\n    pending?.resolve(confirmed);\n  };\n\n  const dialog = pending ? (\n    <ConfirmDialog {...pending.options} open onConfirm={() => settle(true)} onCancel={() => settle(false)} />\n  ) : null;\n  return { confirm, dialog };\n}\n\n/**\n * Whether `key` holds a remembered confirmation, live, and a way to clear it —\n * for the \"you will not be asked\" banner a remembered choice owes the user.\n */\nexport function useConfirmMemory(key: string | undefined): { remembered: boolean; forget: () => void } {\n  const remembered = useSyncExternalStore(\n    subscribeConfirmMemory,\n    () => key !== undefined && isConfirmRemembered(key),\n    () => false,\n  );\n  const forget = useCallback(() => {\n    if (key !== undefined) forgetConfirm(key);\n  }, [key]);\n  return { remembered, forget };\n}\n"],"names":["useState","useRef","useEffect","useCallback","isConfirmRemembered","jsx","ConfirmDialog","useSyncExternalStore","subscribeConfirmMemory","forgetConfirm"],"mappings":";;;;;;AAUO,SAAS,aAGd;AACA,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAgC,IAAI;AAClE,QAAM,aAAaC,MAAAA,OAA8B,IAAI;AAErDC,QAAAA,UAAU,MAAM,MAAA;;AAAM,4BAAW,YAAX,mBAAoB,QAAQ;AAAA,KAAQ,EAAE;AAE5D,QAAM,UAAUC,kBAAY,CAAC,YAA4B;;AACvD,QAAI,QAAQ,YAAYC,cAAAA,oBAAoB,QAAQ,SAAS,GAAG,EAAG,QAAO,QAAQ,QAAQ,IAAI;AAE9F,qBAAW,YAAX,mBAAoB,QAAQ;AAC5B,WAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,YAAM,OAAO,EAAE,SAAS,QAAA;AACxB,iBAAW,UAAU;AACrB,iBAAW,IAAI;AAAA,IACjB,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,CAAC,cAAuB;AACrC,eAAW,UAAU;AACrB,eAAW,IAAI;AACf,uCAAS,QAAQ;AAAA,EACnB;AAEA,QAAM,SAAS,UACbC,+BAACC,cAAAA,iBAAe,GAAG,QAAQ,SAAS,MAAI,MAAC,WAAW,MAAM,OAAO,IAAI,GAAG,UAAU,MAAM,OAAO,KAAK,GAAG,IACrG;AACJ,SAAO,EAAE,SAAS,OAAA;AACpB;AAMO,SAAS,iBAAiB,KAAsE;AACrG,QAAM,aAAaC,MAAAA;AAAAA,IACjBC,cAAAA;AAAAA,IACA,MAAM,QAAQ,UAAaJ,cAAAA,oBAAoB,GAAG;AAAA,IAClD,MAAM;AAAA,EAAA;AAER,QAAM,SAASD,MAAAA,YAAY,MAAM;AAC/B,QAAI,QAAQ,OAAWM,eAAAA,cAAc,GAAG;AAAA,EAC1C,GAAG,CAAC,GAAG,CAAC;AACR,SAAO,EAAE,YAAY,OAAA;AACvB;;;"}

package/dist/overlay/useConfirm.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ConfirmOptions } from './ConfirmDialog';
+/**
+ * Promise-returning confirmation, for call sites that need an answer inline —
+ * a `beforeRun` hook, a guard before a mutation. Render `dialog` once.
+ */
+export declare function useConfirm(): {
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+    dialog: ReactNode;
+};
+/**
+ * Whether `key` holds a remembered confirmation, live, and a way to clear it —
+ * for the "you will not be asked" banner a remembered choice owes the user.
+ */
+export declare function useConfirmMemory(key: string | undefined): {
+    remembered: boolean;
+    forget: () => void;
+};
+//# sourceMappingURL=useConfirm.d.ts.map

package/dist/overlay/useConfirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirm.d.ts","sourceRoot":"","sources":["../../src/overlay/useConfirm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvG,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKrE;;;GAGG;AACH,wBAAgB,UAAU,IAAI;IAC5B,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACvD,MAAM,EAAE,SAAS,CAAC;CACnB,CA2BA;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CAUrG"}

package/dist/overlay/useConfirm.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useSyncExternalStore } from "react";
+import { ConfirmDialog } from "./ConfirmDialog.js";
+import { isConfirmRemembered, subscribeConfirmMemory, forgetConfirm } from "./confirmMemory.js";
+function useConfirm() {
+  const [pending, setPending] = useState(null);
+  const pendingRef = useRef(null);
+  useEffect(() => () => {
+    var _a;
+    return (_a = pendingRef.current) == null ? void 0 : _a.resolve(false);
+  }, []);
+  const confirm = useCallback((options) => {
+    var _a;
+    if (options.remember && isConfirmRemembered(options.remember.key)) return Promise.resolve(true);
+    (_a = pendingRef.current) == null ? void 0 : _a.resolve(false);
+    return new Promise((resolve) => {
+      const next = { options, resolve };
+      pendingRef.current = next;
+      setPending(next);
+    });
+  }, []);
+  const settle = (confirmed) => {
+    pendingRef.current = null;
+    setPending(null);
+    pending == null ? void 0 : pending.resolve(confirmed);
+  };
+  const dialog = pending ? /* @__PURE__ */ jsx(ConfirmDialog, { ...pending.options, open: true, onConfirm: () => settle(true), onCancel: () => settle(false) }) : null;
+  return { confirm, dialog };
+}
+function useConfirmMemory(key) {
+  const remembered = useSyncExternalStore(
+    subscribeConfirmMemory,
+    () => key !== void 0 && isConfirmRemembered(key),
+    () => false
+  );
+  const forget = useCallback(() => {
+    if (key !== void 0) forgetConfirm(key);
+  }, [key]);
+  return { remembered, forget };
+}
+export {
+  useConfirm,
+  useConfirmMemory
+};
+//# sourceMappingURL=useConfirm.js.map

package/dist/overlay/useConfirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirm.js","sources":["../../src/overlay/useConfirm.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from \"react\";\nimport { ConfirmDialog, type ConfirmOptions } from \"./ConfirmDialog\";\nimport { forgetConfirm, isConfirmRemembered, subscribeConfirmMemory } from \"./confirmMemory\";\n\ntype PendingConfirm = { options: ConfirmOptions; resolve: (confirmed: boolean) => void };\n\n/**\n * Promise-returning confirmation, for call sites that need an answer inline —\n * a `beforeRun` hook, a guard before a mutation. Render `dialog` once.\n */\nexport function useConfirm(): {\n  confirm: (options: ConfirmOptions) => Promise<boolean>;\n  dialog: ReactNode;\n} {\n  const [pending, setPending] = useState<PendingConfirm | null>(null);\n  const pendingRef = useRef<PendingConfirm | null>(null);\n\n  useEffect(() => () => pendingRef.current?.resolve(false), []);\n\n  const confirm = useCallback((options: ConfirmOptions) => {\n    if (options.remember && isConfirmRemembered(options.remember.key)) return Promise.resolve(true);\n    // A newer request supersedes one still on screen.\n    pendingRef.current?.resolve(false);\n    return new Promise<boolean>((resolve) => {\n      const next = { options, resolve };\n      pendingRef.current = next;\n      setPending(next);\n    });\n  }, []);\n\n  const settle = (confirmed: boolean) => {\n    pendingRef.current = null;\n    setPending(null);\n    pending?.resolve(confirmed);\n  };\n\n  const dialog = pending ? (\n    <ConfirmDialog {...pending.options} open onConfirm={() => settle(true)} onCancel={() => settle(false)} />\n  ) : null;\n  return { confirm, dialog };\n}\n\n/**\n * Whether `key` holds a remembered confirmation, live, and a way to clear it —\n * for the \"you will not be asked\" banner a remembered choice owes the user.\n */\nexport function useConfirmMemory(key: string | undefined): { remembered: boolean; forget: () => void } {\n  const remembered = useSyncExternalStore(\n    subscribeConfirmMemory,\n    () => key !== undefined && isConfirmRemembered(key),\n    () => false,\n  );\n  const forget = useCallback(() => {\n    if (key !== undefined) forgetConfirm(key);\n  }, [key]);\n  return { remembered, forget };\n}\n"],"names":[],"mappings":";;;;AAUO,SAAS,aAGd;AACA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAgC,IAAI;AAClE,QAAM,aAAa,OAA8B,IAAI;AAErD,YAAU,MAAM,MAAA;;AAAM,4BAAW,YAAX,mBAAoB,QAAQ;AAAA,KAAQ,EAAE;AAE5D,QAAM,UAAU,YAAY,CAAC,YAA4B;;AACvD,QAAI,QAAQ,YAAY,oBAAoB,QAAQ,SAAS,GAAG,EAAG,QAAO,QAAQ,QAAQ,IAAI;AAE9F,qBAAW,YAAX,mBAAoB,QAAQ;AAC5B,WAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,YAAM,OAAO,EAAE,SAAS,QAAA;AACxB,iBAAW,UAAU;AACrB,iBAAW,IAAI;AAAA,IACjB,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,CAAC,cAAuB;AACrC,eAAW,UAAU;AACrB,eAAW,IAAI;AACf,uCAAS,QAAQ;AAAA,EACnB;AAEA,QAAM,SAAS,UACb,oBAAC,iBAAe,GAAG,QAAQ,SAAS,MAAI,MAAC,WAAW,MAAM,OAAO,IAAI,GAAG,UAAU,MAAM,OAAO,KAAK,GAAG,IACrG;AACJ,SAAO,EAAE,SAAS,OAAA;AACpB;AAMO,SAAS,iBAAiB,KAAsE;AACrG,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,MAAM,QAAQ,UAAa,oBAAoB,GAAG;AAAA,IAClD,MAAM;AAAA,EAAA;AAER,QAAM,SAAS,YAAY,MAAM;AAC/B,QAAI,QAAQ,OAAW,eAAc,GAAG;AAAA,EAC1C,GAAG,CAAC,GAAG,CAAC;AACR,SAAO,EAAE,YAAY,OAAA;AACvB;"}