@flanksource/clicky-ui 0.3.28 → 0.3.29

package/dist/overlay/Modal.cjs

@@ -8,6 +8,7 @@ const Icon = require("../data/Icon.cjs");
 const button = require("../components/button.cjs");
 const modalStack = require("./modalStack.cjs");
 const zIndex = require("./zIndex.cjs");
+const UiArrowLeft = require("../icons/components/UiArrowLeft.cjs");
 const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
 const sizeClass = {
@@ -24,6 +25,25 @@ const DEFAULT_CONFIRM = {
   confirmLabel: "Discard",
   cancelLabel: "Keep editing"
 };
+const MOBILE_QUERY = "(max-width: 639px)";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const MOBILE_TRANSITION_MS = 200;
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+function visibleFocusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(FOCUSABLE_SELECTOR)
+  ).filter((element) => {
+    const style = window.getComputedStyle(element);
+    return !element.hidden && style.display !== "none" && style.visibility !== "hidden";
+  });
+}
 function Modal({
   open,
   onClose,
@@ -42,13 +62,46 @@ function Modal({
   children
 }) {
   const dialogRef = react.useRef(null);
-  const { depth } = modalStack.useModalStack(open);
+  const closeTimerRef = react.useRef(void 0);
+  const openFrameRef = react.useRef(void 0);
+  const [present, setPresent] = react.useState(open);
+  const [mobileVisible, setMobileVisible] = react.useState(false);
+  const { depth } = modalStack.useModalStack(present);
   const [expanded, setExpanded] = react.useState(false);
   const [confirming, setConfirming] = react.useState(false);
   const requestClose = () => {
     if (confirmClose) setConfirming(true);
     else onClose();
   };
+  react.useEffect(() => {
+    window.clearTimeout(closeTimerRef.current);
+    window.cancelAnimationFrame(openFrameRef.current ?? 0);
+    const animateMobile = window.matchMedia(MOBILE_QUERY).matches && !window.matchMedia(REDUCED_MOTION_QUERY).matches;
+    if (open) {
+      setPresent(true);
+      if (animateMobile) {
+        setMobileVisible(false);
+        openFrameRef.current = window.requestAnimationFrame(() => {
+          setMobileVisible(true);
+        });
+      } else {
+        setMobileVisible(true);
+      }
+    } else if (animateMobile) {
+      setMobileVisible(false);
+      closeTimerRef.current = window.setTimeout(
+        () => setPresent(false),
+        MOBILE_TRANSITION_MS
+      );
+    } else {
+      setMobileVisible(false);
+      setPresent(false);
+    }
+    return () => {
+      window.clearTimeout(closeTimerRef.current);
+      window.cancelAnimationFrame(openFrameRef.current ?? 0);
+    };
+  }, [open]);
   react.useEffect(() => {
     if (!open) {
       setExpanded(false);
@@ -58,14 +111,11 @@ function Modal({
   react.useEffect(() => {
     if (!confirmClose) setConfirming(false);
   }, [confirmClose]);
-  modalStack.useEscapeLayer(
-    open,
-    () => {
-      if (confirming) setConfirming(false);
-      else requestClose();
-    },
-    closeOnEsc
-  );
+  modalStack.useEscapeLayer(present, () => {
+    if (!open || !closeOnEsc) return;
+    if (confirming) setConfirming(false);
+    else requestClose();
+  });
   react.useEffect(() => {
     var _a;
     if (!open) return;
@@ -76,12 +126,12 @@ function Modal({
       return (_a2 = prev == null ? void 0 : prev.focus) == null ? void 0 : _a2.call(prev);
     };
   }, [open]);
-  if (!open) return null;
+  if (!present) return null;
   const overlay = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: utils.cn(
-        "fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4",
+        "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",
         // Nested modals dim less so the dialog they opened over stays visible.
         depth === 0 ? "bg-black/40" : "bg-black/20"
       ),
@@ -96,8 +146,12 @@ function Modal({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": typeof title === "string" ? title : void 0,
+          "data-state": mobileVisible ? "open" : "closed",
           className: utils.cn(
             "relative flex w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl",
+            "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",
+            "max-sm:transition-transform max-sm:duration-200 max-sm:ease-out max-sm:motion-reduce:transition-none",
+            "max-sm:data-[state=closed]:translate-x-full max-sm:data-[state=open]:translate-x-0",
             expanded ? sizeClass.full : sizeClass[size],
             className
           ),
@@ -106,10 +160,43 @@ function Modal({
             ...expanded ? { height: "calc(100dvh - 2rem)" } : {}
           },
           onClick: (e) => e.stopPropagation(),
+          onKeyDown: (event) => {
+            var _a;
+            if (event.key !== "Tab") return;
+            const scope = confirming ? (_a = dialogRef.current) == null ? void 0 : _a.querySelector(
+              "[role='alertdialog']"
+            ) : dialogRef.current;
+            if (!scope) return;
+            const focusable = visibleFocusableElements(scope);
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (!first || !last) {
+              event.preventDefault();
+              scope.focus();
+            } else if (event.shiftKey && document.activeElement === first) {
+              event.preventDefault();
+              last.focus();
+            } else if (!event.shiftKey && document.activeElement === last) {
+              event.preventDefault();
+              first.focus();
+            }
+          },
           children: [
-            (title || subtitle || headerSlot || expandable || !hideClose) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-density-4 py-density-3 border-b border-border", children: [
+            (title || subtitle || headerSlot || expandable || !hideClose) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-density-4 py-density-3 border-b border-border max-sm:min-h-14 max-sm:bg-background", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-density-2", children: [
-                title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold flex-1", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
+                !hideClose && /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    type: "button",
+                    onClick: requestClose,
+                    variant: "ghost",
+                    size: "icon",
+                    "aria-label": "Back",
+                    className: "-ml-2 text-foreground sm:hidden",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowLeft.UiArrowLeft })
+                  }
+                ),
+                title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold flex-1 max-sm:text-base max-sm:leading-6", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
                 headerSlot,
                 expandable && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -117,7 +204,7 @@ function Modal({
                     type: "button",
                     onClick: () => setExpanded((v) => !v),
                     "aria-label": expanded ? "Restore size" : "Expand to fullscreen",
-                    className: "text-muted-foreground hover:text-foreground",
+                    className: "text-muted-foreground hover:text-foreground max-sm:hidden",
                     children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: expanded ? UiFullscreen.UiFullscreenFilled : UiFullscreen.UiFullscreen })
                   }
                 ),
@@ -127,7 +214,7 @@ function Modal({
                     type: "button",
                     onClick: requestClose,
                     "aria-label": "Close",
-                    className: "text-muted-foreground hover:text-foreground",
+                    className: "text-muted-foreground hover:text-foreground max-sm:hidden",
                     children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose })
                   }
                 )
@@ -139,7 +226,7 @@ function Modal({
               {
                 "data-slot": "modal-body",
                 className: utils.cn(
-                  "min-h-0 flex-1 px-density-4 py-density-3",
+                  "min-h-0 flex-1 px-density-4 py-density-3 max-sm:py-density-4",
                   scrollBody ? "overflow-auto" : "flex flex-col overflow-hidden"
                 ),
                 children
@@ -149,7 +236,7 @@ function Modal({
               "div",
               {
                 "data-slot": "modal-footer",
-                className: "shrink-0 px-density-4 py-density-3 border-t border-border",
+                className: "shrink-0 px-density-4 py-density-3 border-t border-border max-sm:py-density-4",
                 children: footer
               }
             ),
@@ -179,7 +266,7 @@ function ConfirmClosePrompt({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4",
+      className: "absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4 max-sm:rounded-none",
       role: "alertdialog",
       "aria-modal": "true",
       "aria-label": typeof options.title === "string" ? options.title : "Confirm close",

package/dist/overlay/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","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 { UiClose, UiFullscreen, UiFullscreenFilled } 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\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 { depth } = useModalStack(open);\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    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(\n    open,\n    () => {\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    },\n    closeOnEsc,\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 (!open) 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\",\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        className={cn(\n          \"relative flex w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\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      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"shrink-0 px-density-4 py-density-3 border-b border-border\">\n            <div className=\"flex items-center gap-density-2\">\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1\">{title}</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\"\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\"\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\",\n            scrollBody\n              ? \"overflow-auto\"\n              : \"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\"\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\"\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":["useRef","useModalStack","useState","useEffect","useEscapeLayer","_a","jsx","cn","zIndex","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","createPortal","Button"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","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":["useRef","useState","useModalStack","useEffect","useEscapeLayer","_a","jsx","cn","zIndex","jsxs","Button","Icon","UiArrowLeft","UiFullscreenFilled","UiFullscreen","UiClose","createPortal"],"mappings":"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"}

package/dist/overlay/Modal.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
 export type ModalSize = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 /** Copy for the discard-confirmation prompt shown before a guarded close. */
 export type ConfirmCloseOptions = {
@@ -57,5 +57,5 @@ export type ModalProps = {
     /** Modal body content. */
     children: ReactNode;
 };
-export declare function Modal({ open, onClose, confirmClose, title, subtitle, size, closeOnBackdrop, closeOnEsc, hideClose, expandable, className, headerSlot, footer, scrollBody, children, }: ModalProps): import('react').ReactPortal | null;
+export declare function Modal({ open, onClose, confirmClose, title, subtitle, size, closeOnBackdrop, closeOnEsc, hideClose, expandable, className, headerSlot, footer, scrollBody, children, }: ModalProps): import('../../../../node_modules/@types/react/index.d.ts').ReactPortal | null;
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnE,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAkBF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAuB,EACvB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,UAAiB,EACjB,QAAQ,GACT,EAAE,UAAU,sCAkKZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnE,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AA2CF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAuB,EACvB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,UAAiB,EACjB,QAAQ,GACT,EAAE,UAAU,sCA2OZ"}

package/dist/overlay/Modal.js

@@ -6,6 +6,7 @@ import { Icon } from "../data/Icon.js";
 import { Button } from "../components/button.js";
 import { useModalStack, useEscapeLayer } from "./modalStack.js";
 import { zIndex } from "./zIndex.js";
+import { UiArrowLeft } from "../icons/components/UiArrowLeft.js";
 import { UiFullscreenFilled, UiFullscreen } from "../icons/components/UiFullscreen.js";
 import { UiClose } from "../icons/components/UiClose.js";
 const sizeClass = {
@@ -22,6 +23,25 @@ const DEFAULT_CONFIRM = {
   confirmLabel: "Discard",
   cancelLabel: "Keep editing"
 };
+const MOBILE_QUERY = "(max-width: 639px)";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const MOBILE_TRANSITION_MS = 200;
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+function visibleFocusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(FOCUSABLE_SELECTOR)
+  ).filter((element) => {
+    const style = window.getComputedStyle(element);
+    return !element.hidden && style.display !== "none" && style.visibility !== "hidden";
+  });
+}
 function Modal({
   open,
   onClose,
@@ -40,13 +60,46 @@ function Modal({
   children
 }) {
   const dialogRef = useRef(null);
-  const { depth } = useModalStack(open);
+  const closeTimerRef = useRef(void 0);
+  const openFrameRef = useRef(void 0);
+  const [present, setPresent] = useState(open);
+  const [mobileVisible, setMobileVisible] = useState(false);
+  const { depth } = useModalStack(present);
   const [expanded, setExpanded] = useState(false);
   const [confirming, setConfirming] = useState(false);
   const requestClose = () => {
     if (confirmClose) setConfirming(true);
     else onClose();
   };
+  useEffect(() => {
+    window.clearTimeout(closeTimerRef.current);
+    window.cancelAnimationFrame(openFrameRef.current ?? 0);
+    const animateMobile = window.matchMedia(MOBILE_QUERY).matches && !window.matchMedia(REDUCED_MOTION_QUERY).matches;
+    if (open) {
+      setPresent(true);
+      if (animateMobile) {
+        setMobileVisible(false);
+        openFrameRef.current = window.requestAnimationFrame(() => {
+          setMobileVisible(true);
+        });
+      } else {
+        setMobileVisible(true);
+      }
+    } else if (animateMobile) {
+      setMobileVisible(false);
+      closeTimerRef.current = window.setTimeout(
+        () => setPresent(false),
+        MOBILE_TRANSITION_MS
+      );
+    } else {
+      setMobileVisible(false);
+      setPresent(false);
+    }
+    return () => {
+      window.clearTimeout(closeTimerRef.current);
+      window.cancelAnimationFrame(openFrameRef.current ?? 0);
+    };
+  }, [open]);
   useEffect(() => {
     if (!open) {
       setExpanded(false);
@@ -56,14 +109,11 @@ function Modal({
   useEffect(() => {
     if (!confirmClose) setConfirming(false);
   }, [confirmClose]);
-  useEscapeLayer(
-    open,
-    () => {
-      if (confirming) setConfirming(false);
-      else requestClose();
-    },
-    closeOnEsc
-  );
+  useEscapeLayer(present, () => {
+    if (!open || !closeOnEsc) return;
+    if (confirming) setConfirming(false);
+    else requestClose();
+  });
   useEffect(() => {
     var _a;
     if (!open) return;
@@ -74,12 +124,12 @@ function Modal({
       return (_a2 = prev == null ? void 0 : prev.focus) == null ? void 0 : _a2.call(prev);
     };
   }, [open]);
-  if (!open) return null;
+  if (!present) return null;
   const overlay = /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4",
+        "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",
         // Nested modals dim less so the dialog they opened over stays visible.
         depth === 0 ? "bg-black/40" : "bg-black/20"
       ),
@@ -94,8 +144,12 @@ function Modal({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": typeof title === "string" ? title : void 0,
+          "data-state": mobileVisible ? "open" : "closed",
           className: cn(
             "relative flex w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl",
+            "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",
+            "max-sm:transition-transform max-sm:duration-200 max-sm:ease-out max-sm:motion-reduce:transition-none",
+            "max-sm:data-[state=closed]:translate-x-full max-sm:data-[state=open]:translate-x-0",
             expanded ? sizeClass.full : sizeClass[size],
             className
           ),
@@ -104,10 +158,43 @@ function Modal({
             ...expanded ? { height: "calc(100dvh - 2rem)" } : {}
           },
           onClick: (e) => e.stopPropagation(),
+          onKeyDown: (event) => {
+            var _a;
+            if (event.key !== "Tab") return;
+            const scope = confirming ? (_a = dialogRef.current) == null ? void 0 : _a.querySelector(
+              "[role='alertdialog']"
+            ) : dialogRef.current;
+            if (!scope) return;
+            const focusable = visibleFocusableElements(scope);
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (!first || !last) {
+              event.preventDefault();
+              scope.focus();
+            } else if (event.shiftKey && document.activeElement === first) {
+              event.preventDefault();
+              last.focus();
+            } else if (!event.shiftKey && document.activeElement === last) {
+              event.preventDefault();
+              first.focus();
+            }
+          },
           children: [
-            (title || subtitle || headerSlot || expandable || !hideClose) && /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-density-4 py-density-3 border-b border-border", children: [
+            (title || subtitle || headerSlot || expandable || !hideClose) && /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-density-4 py-density-3 border-b border-border max-sm:min-h-14 max-sm:bg-background", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-density-2", children: [
-                title ? /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold flex-1", children: title }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+                !hideClose && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: requestClose,
+                    variant: "ghost",
+                    size: "icon",
+                    "aria-label": "Back",
+                    className: "-ml-2 text-foreground sm:hidden",
+                    children: /* @__PURE__ */ jsx(Icon, { icon: UiArrowLeft })
+                  }
+                ),
+                title ? /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold flex-1 max-sm:text-base max-sm:leading-6", children: title }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
                 headerSlot,
                 expandable && /* @__PURE__ */ jsx(
                   "button",
@@ -115,7 +202,7 @@ function Modal({
                     type: "button",
                     onClick: () => setExpanded((v) => !v),
                     "aria-label": expanded ? "Restore size" : "Expand to fullscreen",
-                    className: "text-muted-foreground hover:text-foreground",
+                    className: "text-muted-foreground hover:text-foreground max-sm:hidden",
                     children: /* @__PURE__ */ jsx(Icon, { icon: expanded ? UiFullscreenFilled : UiFullscreen })
                   }
                 ),
@@ -125,7 +212,7 @@ function Modal({
                     type: "button",
                     onClick: requestClose,
                     "aria-label": "Close",
-                    className: "text-muted-foreground hover:text-foreground",
+                    className: "text-muted-foreground hover:text-foreground max-sm:hidden",
                     children: /* @__PURE__ */ jsx(Icon, { icon: UiClose })
                   }
                 )
@@ -137,7 +224,7 @@ function Modal({
               {
                 "data-slot": "modal-body",
                 className: cn(
-                  "min-h-0 flex-1 px-density-4 py-density-3",
+                  "min-h-0 flex-1 px-density-4 py-density-3 max-sm:py-density-4",
                   scrollBody ? "overflow-auto" : "flex flex-col overflow-hidden"
                 ),
                 children
@@ -147,7 +234,7 @@ function Modal({
               "div",
               {
                 "data-slot": "modal-footer",
-                className: "shrink-0 px-density-4 py-density-3 border-t border-border",
+                className: "shrink-0 px-density-4 py-density-3 border-t border-border max-sm:py-density-4",
                 children: footer
               }
             ),
@@ -177,7 +264,7 @@ function ConfirmClosePrompt({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4",
+      className: "absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4 max-sm:rounded-none",
       role: "alertdialog",
       "aria-modal": "true",
       "aria-label": typeof options.title === "string" ? options.title : "Confirm close",

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 { UiClose, UiFullscreen, UiFullscreenFilled } 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\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 { depth } = useModalStack(open);\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    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(\n    open,\n    () => {\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    },\n    closeOnEsc,\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 (!open) 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\",\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        className={cn(\n          \"relative flex w-full flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl\",\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      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"shrink-0 px-density-4 py-density-3 border-b border-border\">\n            <div className=\"flex items-center gap-density-2\">\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1\">{title}</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\"\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\"\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\",\n            scrollBody\n              ? \"overflow-auto\"\n              : \"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\"\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\"\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":";;;;;;;;;;AAsEA,MAAM,YAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,kBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AACf;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAAe;AACb,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,EAAE,MAAA,IAAU,cAAc,IAAI;AACpC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAG9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAIlD,QAAM,eAAe,MAAM;AACzB,QAAI,4BAA4B,IAAI;AAAA,QAC/B,SAAA;AAAA,EACP;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT,kBAAY,KAAK;AACjB,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAIT,YAAU,MAAM;AACd,QAAI,CAAC,aAAc,eAAc,KAAK;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB;AAAA,IACE;AAAA,IACA,MAAM;AAEJ,UAAI,0BAA0B,KAAK;AAAA,UAC9B,cAAA;AAAA,IACP;AAAA,IACA;AAAA,EAAA;AAGF,YAAU,MAAM;;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,SAAS;AACtB,oBAAU,YAAV,mBAAmB;AACnB,WAAO,MAAA;;AAAM,cAAAA,MAAA,6BAAM,UAAN,gBAAAA,IAAA;AAAA;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA,QAEA,UAAU,IAAI,gBAAgB;AAAA,MAAA;AAAA,MAMhC,OAAO,EAAE,QAAQ,OAAO,QAAQ,QAAQ,OAAO,UAAA;AAAA,MAC/C,SAAS,kBAAkB,eAAe;AAAA,MAC1C,MAAK;AAAA,MAEL,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAW;AAAA,UACX,cAAY,OAAO,UAAU,WAAW,QAAQ;AAAA,UAChD,WAAW;AAAA,YACT;AAAA,YACA,WAAW,UAAU,OAAO,UAAU,IAAI;AAAA,YAC1C;AAAA,UAAA;AAAA,UAMF,OAAO;AAAA,YACL,WAAW;AAAA,YACX,GAAI,WAAW,EAAE,QAAQ,0BAA0B,CAAA;AAAA,UAAC;AAAA,UAEtD,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEhB,UAAA;AAAA,aAAA,SAAS,YAAY,cAAc,cAAc,CAAC,cAClD,qBAAC,OAAA,EAAI,WAAU,6DACb,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,gBAAA,QACC,oBAAC,QAAG,WAAU,gCAAgC,iBAAM,IAEpD,oBAAC,QAAA,EAAK,WAAU,SAAA,CAAS;AAAA,gBAE1B;AAAA,gBACA,cACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,oBACpC,cACE,WAAW,iBAAiB;AAAA,oBAE9B,WAAU;AAAA,oBAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,qBAAqB,aAAA,CAAc;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAG7D,CAAC,aACA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAW;AAAA,oBACX,WAAU;AAAA,oBAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,QAAA,CAAS;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACvB,GAEJ;AAAA,cACC,WAAW,oBAAC,OAAA,EAAI,WAAU,gBAAgB,oBAAS,IAAS;AAAA,YAAA,GAC/D;AAAA,YAEF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,aAAU;AAAA,gBACV,WAAW;AAAA,kBACT;AAAA,kBACA,aACI,kBACA;AAAA,gBAAA;AAAA,gBAGL;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,UACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,aAAU;AAAA,gBACV,WAAU;AAAA,gBAET,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGJ,cACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SACE,iBAAiB,OACb,kBACA,EAAE,GAAG,iBAAiB,GAAG,aAAA;AAAA,gBAE/B,WAAW,MAAM;AACf,gCAAc,KAAK;AACnB,0BAAA;AAAA,gBACF;AAAA,gBACA,UAAU,MAAM,cAAc,KAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAQJ,SAAO,OAAO,aAAa,cACvB,aAAa,SAAS,SAAS,IAAI,IACnC;AACN;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cACE,OAAO,QAAQ,UAAU,WAAW,QAAQ,QAAQ;AAAA,MAEtD,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,MAElB,UAAA,qBAAC,OAAA,EAAI,WAAU,uFACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,QAAQ,OAAM;AAAA,QACrD,oBAAC,KAAA,EAAE,WAAU,8CACV,kBAAQ,SACX;AAAA,QACA,qBAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,UACxC,kBAAQ,YAAA,CACX;AAAA,UACA,oBAAC,UAAO,SAAQ,eAAc,MAAK,MAAK,SAAS,WAC9C,UAAA,QAAQ,aAAA,CACX;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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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"}