@flanksource/clicky-ui 0.2.11 → 0.2.13

package/dist/overlay/DropdownMenu.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useListNavigation, useInteractions, FloatingPortal, FloatingFocusManager } from "@floating-ui/react";
 import { cn } from "../lib/utils.js";
 import { Button } from "../components/button.js";
 import { Icon } from "../data/Icon.js";
@@ -20,50 +21,61 @@ function DropdownMenu({
   menuClassName
 }) {
   const [open, setOpen] = useState(false);
-  const wrapperRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const listRef = useRef([]);
   const onOpenChangeRef = useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
   useEffect(() => {
     var _a;
     (_a = onOpenChangeRef.current) == null ? void 0 : _a.call(onOpenChangeRef, open);
   }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const onMouseDown = (e) => {
-      var _a;
-      if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(e.target))) setOpen(false);
-    };
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("mousedown", onMouseDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onMouseDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    // bottom-end / bottom-start reproduce the previous right/left alignment.
+    placement: align === "right" ? "bottom-end" : "bottom-start",
+    whileElementsMounted: autoUpdate,
+    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and
+    // shift slides the menu back on-screen at the horizontal edges.
+    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })]
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "menu" });
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    click,
+    dismiss,
+    role,
+    listNav
+  ]);
   const closeMenu = () => setOpen(false);
-  const toggle = () => setOpen((v) => !v);
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), ref: wrapperRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), children: [
     trigger ? /* @__PURE__ */ jsx(
       "span",
       {
-        className: "contents",
-        onClick: toggle,
+        ref: refs.setReference,
+        className: "inline-flex",
         "aria-haspopup": "menu",
         "aria-expanded": open,
+        ...getReferenceProps(),
         children: trigger
       }
     ) : /* @__PURE__ */ jsxs(
       Button,
       {
+        ref: refs.setReference,
         variant,
         size,
-        onClick: toggle,
         title,
         "aria-haspopup": "menu",
         "aria-expanded": open,
+        ...getReferenceProps(),
         children: [
           icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon } }),
           label,
@@ -71,27 +83,42 @@ function DropdownMenu({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsx(
       "div",
       {
+        ref: refs.setFloating,
         role: "menu",
+        style: floatingStyles,
         className: cn(
-          "absolute z-20 mt-1 min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md",
-          align === "right" ? "right-0" : "left-0",
+          "z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md",
           menuClassName
         ),
+        ...getFloatingProps(),
         children: children ? children(closeMenu) : items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ jsxs(
           "button",
           {
+            ref: (node) => {
+              listRef.current[i] = node;
+            },
             type: "button",
             role: "menuitem",
+            tabIndex: i === activeIndex ? 0 : -1,
             disabled: item.disabled,
             title: item.title,
-            onClick: () => {
-              item.onSelect();
-              closeMenu();
-            },
             className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+            ...getItemProps({
+              onClick: () => {
+                item.onSelect();
+                closeMenu();
+              },
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  item.onSelect();
+                  closeMenu();
+                }
+              }
+            }),
             children: [
               item.icon && /* @__PURE__ */ jsx(
                 Icon,
@@ -105,7 +132,7 @@ function DropdownMenu({
           i
         ))
       }
-    )
+    ) }) })
   ] });
 }
 export {

package/dist/overlay/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onMouseDown = (e: MouseEvent) => {\n      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onMouseDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onMouseDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  const closeMenu = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)} ref={wrapperRef}>\n      {trigger ? (\n        <span\n          className=\"contents\"\n          onClick={toggle}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          variant={variant}\n          size={size}\n          onClick={toggle}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <div\n          role=\"menu\"\n          className={cn(\n            \"absolute z-20 mt-1 min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n            align === \"right\" ? \"right-0\" : \"left-0\",\n            menuClassName,\n          )}\n        >\n          {children\n            ? children(closeMenu)\n            : items?.map((item, i) => (\n                <button\n                  key={i}\n                  type=\"button\"\n                  role=\"menuitem\"\n                  disabled={item.disabled}\n                  title={item.title}\n                  onClick={() => {\n                    item.onSelect();\n                    closeMenu();\n                  }}\n                  className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {item.icon && (\n                    <Icon\n                      {...(typeof item.icon === \"string\"\n                        ? { name: item.icon }\n                        : { icon: item.icon })}\n                    />\n                  )}\n                  {item.label}\n                </button>\n              ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAgDO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,aAAa,OAAuB,IAAI;AAE9C,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAC1B,YAAU,MAAM;;AACd,0BAAgB,YAAhB,yCAA0B;AAAA,EAC5B,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,cAAc,CAAC,MAAkB;;AACrC,UAAI,GAAC,gBAAW,YAAX,mBAAoB,SAAS,EAAE,kBAAyB,KAAK;AAAA,IACpE;AACA,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,IACvC;AACA,aAAS,iBAAiB,aAAa,WAAW;AAClD,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,WAAW;AACrD,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,YAAY,MAAM,QAAQ,KAAK;AACrC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAEtC,SACE,qBAAC,SAAI,WAAW,GAAG,wBAAwB,SAAS,GAAG,KAAK,YACzD,UAAA;AAAA,IAAA,UACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS;AAAA,QACT,iBAAc;AAAA,QACd,iBAAe;AAAA,QAEd,UAAA;AAAA,MAAA;AAAA,IAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,iBAAc;AAAA,QACd,iBAAe;AAAA,QAEd,UAAA;AAAA,UAAA,QAAQ,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,UACA,CAAC,eAAe,oBAAC,MAAA,EAAK,MAAM,cAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/C,QACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,UAAU,UAAU,YAAY;AAAA,UAChC;AAAA,QAAA;AAAA,QAGD,UAAA,WACG,SAAS,SAAS,IAClB,+BAAO,IAAI,CAAC,MAAM,MAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,UAAU,KAAK;AAAA,YACf,OAAO,KAAK;AAAA,YACZ,SAAS,MAAM;AACb,mBAAK,SAAA;AACL,wBAAA;AAAA,YACF;AAAA,YACA,WAAU;AAAA,YAET,UAAA;AAAA,cAAA,KAAK,QACJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,gBAAK;AAAA,cAAA;AAAA,cAGzB,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAlBD;AAAA,QAAA;AAAA,MAoBR;AAAA,IAAA;AAAA,EACP,GAEJ;AAEJ;"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/Modal.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
+const button = require("../components/button.cjs");
 const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
 const sizeClass = {
@@ -13,9 +14,16 @@ const sizeClass = {
   xl: "max-w-4xl max-h-[90vh]",
   full: "max-w-[95vw] max-h-[95vh]"
 };
+const DEFAULT_CONFIRM = {
+  title: "Discard changes?",
+  message: "You have unsaved changes. Closing now will discard them.",
+  confirmLabel: "Discard",
+  cancelLabel: "Keep editing"
+};
 function Modal({
   open,
   onClose,
+  confirmClose = false,
   title,
   size = "md",
   closeOnBackdrop = true,
@@ -29,17 +37,30 @@ function Modal({
 }) {
   const dialogRef = react.useRef(null);
   const [expanded, setExpanded] = react.useState(false);
+  const [confirming, setConfirming] = react.useState(false);
+  const requestClose = () => {
+    if (confirmClose) setConfirming(true);
+    else onClose();
+  };
   react.useEffect(() => {
-    if (!open) setExpanded(false);
+    if (!open) {
+      setExpanded(false);
+      setConfirming(false);
+    }
   }, [open]);
+  react.useEffect(() => {
+    if (!confirmClose) setConfirming(false);
+  }, [confirmClose]);
   react.useEffect(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key !== "Escape") return;
+      if (confirming) setConfirming(false);
+      else requestClose();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, closeOnEsc, onClose]);
+  }, [open, closeOnEsc, confirming, confirmClose, onClose]);
   react.useEffect(() => {
     var _a;
     if (!open) return;
@@ -55,7 +76,7 @@ function Modal({
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40",
-      onClick: closeOnBackdrop ? onClose : void 0,
+      onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -89,7 +110,7 @@ function Modal({
                 "button",
                 {
                   type: "button",
-                  onClick: onClose,
+                  onClick: requestClose,
                   "aria-label": "Close",
                   className: "text-muted-foreground hover:text-foreground",
                   children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose })
@@ -97,12 +118,47 @@ function Modal({
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto px-density-4 py-density-3", children }),
-            footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-4 py-density-3 border-t border-border", children: footer })
+            footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-4 py-density-3 border-t border-border", children: footer }),
+            confirming && /* @__PURE__ */ jsxRuntime.jsx(
+              ConfirmClosePrompt,
+              {
+                options: confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose },
+                onConfirm: () => {
+                  setConfirming(false);
+                  onClose();
+                },
+                onCancel: () => setConfirming(false)
+              }
+            )
           ]
         }
       )
     }
   );
 }
+function ConfirmClosePrompt({
+  options,
+  onConfirm,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4",
+      role: "alertdialog",
+      "aria-modal": "true",
+      "aria-label": typeof options.title === "string" ? options.title : "Confirm close",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: options.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-density-2 text-sm text-muted-foreground", children: options.message }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-density-4 flex justify-end gap-density-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "sm", onClick: onCancel, children: options.cancelLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "destructive", size: "sm", onClick: onConfirm, children: options.confirmLabel })
+        ] })
+      ] })
+    }
+  );
+}
 exports.Modal = Modal;
 //# sourceMappingURL=Modal.cjs.map

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 { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\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  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. */\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  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  title,\n  size = \"md\",\n  closeOnBackdrop = true,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    if (!open) setExpanded(false);\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, onClose]);\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  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40\"\n      onClick={closeOnBackdrop ? onClose : 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 bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || headerSlot || expandable || !hideClose) && (\n          <div className=\"flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border\">\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={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\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={onClose}\n                aria-label=\"Close\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={UiClose} />\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useState","useEffect","_a","jsx","jsxs","cn","Icon","UiFullscreenFilled","UiFullscreen","UiClose"],"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 { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"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  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. */\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  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\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  size = \"md\",\n  closeOnBackdrop = true,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\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  useEffect(() => {\n    if (!open || !closeOnEsc) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") 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    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, confirming, confirmClose, onClose]);\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  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40\"\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 bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || headerSlot || expandable || !hideClose) && (\n          <div className=\"flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border\">\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={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\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        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\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={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\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\">{options.message}</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","useEffect","_a","jsx","jsxs","cn","Icon","UiFullscreenFilled","UiFullscreen","UiClose","Button"],"mappings":"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"}

package/dist/overlay/Modal.d.ts

@@ -1,10 +1,28 @@
 import { ReactNode } from 'react';
 export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+/** Copy for the discard-confirmation prompt shown before a guarded close. */
+export type ConfirmCloseOptions = {
+    /** Heading of the confirmation prompt. */
+    title?: ReactNode;
+    /** Body explaining what is lost on close. */
+    message?: ReactNode;
+    /** Label of the button that proceeds with closing. */
+    confirmLabel?: string;
+    /** Label of the button that dismisses the prompt and keeps the modal open. */
+    cancelLabel?: string;
+};
 export type ModalProps = {
     /** Controls whether the modal is mounted. */
     open: boolean;
     /** Called when the modal requests to close. */
     onClose: () => void;
+    /**
+     * Guard every close path (close button, Escape, backdrop) behind a discard
+     * confirmation. `true` uses the default copy; pass options to customise it.
+     * `onClose` only fires once the user confirms. Set this while the modal holds
+     * unsaved edits and clear it (or pass `false`) once there is nothing to lose.
+     */
+    confirmClose?: boolean | ConfirmCloseOptions;
     /** Header title and accessible dialog label when it is a string. */
     title?: ReactNode;
     /** Width/height preset for the dialog. */
@@ -26,5 +44,5 @@ export type ModalProps = {
     /** Modal body content. */
     children: ReactNode;
 };
-export declare function Modal({ open, onClose, title, size, closeOnBackdrop, closeOnEsc, hideClose, expandable, className, headerSlot, footer, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Modal({ open, onClose, confirmClose, title, size, closeOnBackdrop, closeOnEsc, hideClose, expandable, className, headerSlot, footer, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | 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;AAKpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,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,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAW,EACX,eAAsB,EACtB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,kDAgFZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,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,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,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,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAiBF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,IAAW,EACX,eAAsB,EACtB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,kDAgHZ"}

package/dist/overlay/Modal.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
+import { Button } from "../components/button.js";
 import { UiFullscreenFilled, UiFullscreen } from "../icons/components/UiFullscreen.js";
 import { UiClose } from "../icons/components/UiClose.js";
 const sizeClass = {
@@ -11,9 +12,16 @@ const sizeClass = {
   xl: "max-w-4xl max-h-[90vh]",
   full: "max-w-[95vw] max-h-[95vh]"
 };
+const DEFAULT_CONFIRM = {
+  title: "Discard changes?",
+  message: "You have unsaved changes. Closing now will discard them.",
+  confirmLabel: "Discard",
+  cancelLabel: "Keep editing"
+};
 function Modal({
   open,
   onClose,
+  confirmClose = false,
   title,
   size = "md",
   closeOnBackdrop = true,
@@ -27,17 +35,30 @@ function Modal({
 }) {
   const dialogRef = useRef(null);
   const [expanded, setExpanded] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const requestClose = () => {
+    if (confirmClose) setConfirming(true);
+    else onClose();
+  };
   useEffect(() => {
-    if (!open) setExpanded(false);
+    if (!open) {
+      setExpanded(false);
+      setConfirming(false);
+    }
   }, [open]);
+  useEffect(() => {
+    if (!confirmClose) setConfirming(false);
+  }, [confirmClose]);
   useEffect(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key !== "Escape") return;
+      if (confirming) setConfirming(false);
+      else requestClose();
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, closeOnEsc, onClose]);
+  }, [open, closeOnEsc, confirming, confirmClose, onClose]);
   useEffect(() => {
     var _a;
     if (!open) return;
@@ -53,7 +74,7 @@ function Modal({
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40",
-      onClick: closeOnBackdrop ? onClose : void 0,
+      onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -87,7 +108,7 @@ function Modal({
                 "button",
                 {
                   type: "button",
-                  onClick: onClose,
+                  onClick: requestClose,
                   "aria-label": "Close",
                   className: "text-muted-foreground hover:text-foreground",
                   children: /* @__PURE__ */ jsx(Icon, { icon: UiClose })
@@ -95,13 +116,48 @@ function Modal({
               )
             ] }),
             /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto px-density-4 py-density-3", children }),
-            footer && /* @__PURE__ */ jsx("div", { className: "px-density-4 py-density-3 border-t border-border", children: footer })
+            footer && /* @__PURE__ */ jsx("div", { className: "px-density-4 py-density-3 border-t border-border", children: footer }),
+            confirming && /* @__PURE__ */ jsx(
+              ConfirmClosePrompt,
+              {
+                options: confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose },
+                onConfirm: () => {
+                  setConfirming(false);
+                  onClose();
+                },
+                onCancel: () => setConfirming(false)
+              }
+            )
           ]
         }
       )
     }
   );
 }
+function ConfirmClosePrompt({
+  options,
+  onConfirm,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4",
+      role: "alertdialog",
+      "aria-modal": "true",
+      "aria-label": typeof options.title === "string" ? options.title : "Confirm close",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: options.title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-density-2 text-sm text-muted-foreground", children: options.message }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-density-4 flex justify-end gap-density-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onCancel, children: options.cancelLabel }),
+          /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: onConfirm, children: options.confirmLabel })
+        ] })
+      ] })
+    }
+  );
+}
 export {
   Modal
 };

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 { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\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  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. */\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  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  title,\n  size = \"md\",\n  closeOnBackdrop = true,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    if (!open) setExpanded(false);\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, onClose]);\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  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40\"\n      onClick={closeOnBackdrop ? onClose : 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 bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || headerSlot || expandable || !hideClose) && (\n          <div className=\"flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border\">\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={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\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={onClose}\n                aria-label=\"Close\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={UiClose} />\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":";;;;;;AAkCA,MAAM,YAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;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;AACF,GAAe;AACb,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,KAAM,aAAY,KAAK;AAAA,EAC9B,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,WAAY;AAC1B,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU,SAAA;AAAA,IAC1B;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,MAAM,YAAY,OAAO,CAAC;AAE9B,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,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS,kBAAkB,UAAU;AAAA,MACrC,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,UAEF,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEhB,UAAA;AAAA,aAAA,SAAS,cAAc,cAAc,CAAC,cACtC,qBAAC,OAAA,EAAI,WAAU,oFACZ,UAAA;AAAA,cAAA,QACC,oBAAC,QAAG,WAAU,gCAAgC,iBAAM,IAEpD,oBAAC,QAAA,EAAK,WAAU,SAAA,CAAS;AAAA,cAE1B;AAAA,cACA,cACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,kBACpC,cAAY,WAAW,iBAAiB;AAAA,kBACxC,WAAU;AAAA,kBAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,qBAAqB,aAAA,CAAc;AAAA,gBAAA;AAAA,cAAA;AAAA,cAG7D,CAAC,aACA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,cAAW;AAAA,kBACX,WAAU;AAAA,kBAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,QAAA,CAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvB,GAEJ;AAAA,YAEF,oBAAC,OAAA,EAAI,WAAU,kDAAkD,SAAA,CAAS;AAAA,YACzE,UAAU,oBAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACvF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Modal.js","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"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  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. */\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  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\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  size = \"md\",\n  closeOnBackdrop = true,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\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  useEffect(() => {\n    if (!open || !closeOnEsc) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") 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    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, confirming, confirmClose, onClose]);\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  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40\"\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 bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || headerSlot || expandable || !hideClose) && (\n          <div className=\"flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border\">\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={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\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        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\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={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\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\">{options.message}</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/rpc/CommandForm.cjs

@@ -78,7 +78,7 @@ function ParameterField({
       {
         id: fieldId,
         value,
-        placeholder: param.description || param.name,
+        placeholder: types.parameterPlaceholder(param) || param.name,
         onChange
       }
     ) });
@@ -159,7 +159,7 @@ function ParameterField({
       value,
       className: inputClassName,
       onChange: (event) => onChange(event.target.value),
-      placeholder: (schema == null ? void 0 : schema.default) != null ? String(schema.default) : param.description || param.name
+      placeholder: (schema == null ? void 0 : schema.default) != null ? String(schema.default) : types.parameterPlaceholder(param) || param.name
     }
   ) });
 }