@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/overlay/HoverCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.cjs","sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type HoverCardProps = {\n  /** Trigger content that opens the card on hover/focus. */\n  trigger: ReactNode;\n  /** Floating card content. */\n  children: ReactNode;\n  /** Preferred placement around the trigger. */\n  placement?: HoverCardPlacement;\n  /** Open delay in milliseconds. */\n  delay?: number;\n  /** Show the directional arrow. */\n  arrow?: boolean;\n  /** Classes applied to the trigger wrapper. */\n  className?: string;\n  /** Classes applied to the floating card. */\n  cardClassName?: string;\n};\n\nconst GAP_PX = 6;\n\ntype Position = { top: number; left: number };\n\n// Grace period that lets the cursor cross the gap from the trigger to the\n// portaled card without the card disappearing.\nconst HOVER_CLOSE_DELAY_MS = 120;\n\nexport function HoverCard({\n  trigger,\n  children,\n  placement = \"top\",\n  delay = 0,\n  arrow = true,\n  className,\n  cardClassName,\n}: HoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<Position | null>(null);\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const cancelClose = () => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  };\n\n  function onEnter() {\n    cancelClose();\n    if (delay > 0) {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = window.setTimeout(() => setOpen(true), delay);\n    } else {\n      setOpen(true);\n    }\n  }\n  function onLeave() {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    cancelClose();\n    closeTimerRef.current = window.setTimeout(() => setOpen(false), HOVER_CLOSE_DELAY_MS);\n  }\n\n  // Recompute position whenever the card opens or the viewport scrolls/resizes\n  // while it's open. We position via fixed coordinates so the card escapes\n  // every overflow-hidden / transform ancestor — important when the trigger\n  // sits inside a table row, dropdown, or modal that would otherwise clip it.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const trigger = triggerRef.current;\n      const card = cardRef.current;\n      if (!trigger || !card) return;\n      const t = trigger.getBoundingClientRect();\n      const c = card.getBoundingClientRect();\n      let top = 0;\n      let left = 0;\n      switch (placement) {\n        case \"top\":\n          top = t.top - c.height - GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"bottom\":\n          top = t.bottom + GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"left\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.left - c.width - GAP_PX;\n          break;\n        case \"right\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.right + GAP_PX;\n          break;\n      }\n      // Clamp to viewport so cards near the edge don't overflow off-screen.\n      const margin = 4;\n      left = Math.min(Math.max(margin, left), window.innerWidth - c.width - margin);\n      top = Math.min(Math.max(margin, top), window.innerHeight - c.height - margin);\n      setPosition({ top, left });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, placement, children]);\n\n  useEffect(() => {\n    return () => {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  const card =\n    open && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={cardRef}\n            role=\"tooltip\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={onLeave}\n            style={\n              position\n                ? { position: \"fixed\", top: position.top, left: position.left }\n                : { position: \"fixed\", top: -9999, left: -9999, visibility: \"hidden\" }\n            }\n            className={cn(\n              \"z-[9999] rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg\",\n              \"whitespace-nowrap\",\n              cardClassName,\n            )}\n          >\n            {children}\n            {arrow && position && <Arrow placement={placement} />}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <span\n      ref={triggerRef}\n      className={cn(\"relative inline-flex items-center\", className)}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {trigger}\n      {card}\n    </span>\n  );\n}\n\nfunction Arrow({ placement }: { placement: HoverCardPlacement }) {\n  // The arrow is a small rotated square clipped to look like a notch on the\n  // card edge that points back at the trigger. Drawn relative to the card.\n  const base = \"absolute h-1.5 w-1.5 rotate-45 border bg-background border-border\";\n  switch (placement) {\n    case \"top\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -bottom-0.5 border-l-0 border-t-0\")}\n        />\n      );\n    case \"bottom\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -top-0.5 border-r-0 border-b-0\")}\n        />\n      );\n    case \"left\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -right-0.5 border-l-0 border-b-0\")}\n        />\n      );\n    case \"right\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -left-0.5 border-r-0 border-t-0\")}\n        />\n      );\n  }\n}\n"],"names":["useState","useRef","useLayoutEffect","trigger","card","useEffect","createPortal","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"HoverCard.cjs","sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { useFloatingZIndex } from \"./modalStack\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type HoverCardProps = {\n  /** Trigger content that opens the card on hover/focus. */\n  trigger: ReactNode;\n  /** Floating card content. */\n  children: ReactNode;\n  /** Preferred placement around the trigger. */\n  placement?: HoverCardPlacement;\n  /** Open delay in milliseconds. */\n  delay?: number;\n  /** Show the directional arrow. */\n  arrow?: boolean;\n  /** Classes applied to the trigger wrapper. */\n  className?: string;\n  /** Classes applied to the floating card. */\n  cardClassName?: string;\n};\n\nconst GAP_PX = 6;\n\ntype Position = { top: number; left: number };\n\n// Grace period that lets the cursor cross the gap from the trigger to the\n// portaled card without the card disappearing.\nconst HOVER_CLOSE_DELAY_MS = 120;\n\nexport function HoverCard({\n  trigger,\n  children,\n  placement = \"top\",\n  delay = 0,\n  arrow = true,\n  className,\n  cardClassName,\n}: HoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<Position | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const cancelClose = () => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  };\n\n  function onEnter() {\n    cancelClose();\n    if (delay > 0) {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = window.setTimeout(() => setOpen(true), delay);\n    } else {\n      setOpen(true);\n    }\n  }\n  function onLeave() {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    cancelClose();\n    closeTimerRef.current = window.setTimeout(() => setOpen(false), HOVER_CLOSE_DELAY_MS);\n  }\n\n  // Recompute position whenever the card opens or the viewport scrolls/resizes\n  // while it's open. We position via fixed coordinates so the card escapes\n  // every overflow-hidden / transform ancestor — important when the trigger\n  // sits inside a table row, dropdown, or modal that would otherwise clip it.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const trigger = triggerRef.current;\n      const card = cardRef.current;\n      if (!trigger || !card) return;\n      const t = trigger.getBoundingClientRect();\n      const c = card.getBoundingClientRect();\n      let top = 0;\n      let left = 0;\n      switch (placement) {\n        case \"top\":\n          top = t.top - c.height - GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"bottom\":\n          top = t.bottom + GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"left\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.left - c.width - GAP_PX;\n          break;\n        case \"right\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.right + GAP_PX;\n          break;\n      }\n      // Clamp to viewport so cards near the edge don't overflow off-screen.\n      const margin = 4;\n      left = Math.min(Math.max(margin, left), window.innerWidth - c.width - margin);\n      top = Math.min(Math.max(margin, top), window.innerHeight - c.height - margin);\n      setPosition({ top, left });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, placement, children]);\n\n  useEffect(() => {\n    return () => {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  const card =\n    open && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={cardRef}\n            role=\"tooltip\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={onLeave}\n            style={{\n              ...(position\n                ? { position: \"fixed\", top: position.top, left: position.left }\n                : { position: \"fixed\", top: -9999, left: -9999, visibility: \"hidden\" }),\n              zIndex: floatingZ,\n            }}\n            className={cn(\n              \"rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg\",\n              \"whitespace-nowrap\",\n              cardClassName,\n            )}\n          >\n            {children}\n            {arrow && position && <Arrow placement={placement} />}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <span\n      ref={triggerRef}\n      className={cn(\"relative inline-flex items-center\", className)}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {trigger}\n      {card}\n    </span>\n  );\n}\n\nfunction Arrow({ placement }: { placement: HoverCardPlacement }) {\n  // The arrow is a small rotated square clipped to look like a notch on the\n  // card edge that points back at the trigger. Drawn relative to the card.\n  const base = \"absolute h-1.5 w-1.5 rotate-45 border bg-background border-border\";\n  switch (placement) {\n    case \"top\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -bottom-0.5 border-l-0 border-t-0\")}\n        />\n      );\n    case \"bottom\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -top-0.5 border-r-0 border-b-0\")}\n        />\n      );\n    case \"left\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -right-0.5 border-l-0 border-b-0\")}\n        />\n      );\n    case \"right\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -left-0.5 border-r-0 border-t-0\")}\n        />\n      );\n  }\n}\n"],"names":["useState","useFloatingZIndex","useRef","useLayoutEffect","trigger","card","useEffect","createPortal","jsxs","cn","jsx"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/overlay/HoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG;IAC3B,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC;IACnB,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,KAAS,EACT,KAAY,EACZ,SAAS,EACT,aAAa,GACd,EAAE,cAAc,2CA8HhB"}
+{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/overlay/HoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG;IAC3B,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC;IACnB,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,KAAS,EACT,KAAY,EACZ,SAAS,EACT,aAAa,GACd,EAAE,cAAc,2CAgIhB"}

package/dist/overlay/HoverCard.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useLayoutEffect, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/utils.js";
+import { useFloatingZIndex } from "./modalStack.js";
 const GAP_PX = 6;
 const HOVER_CLOSE_DELAY_MS = 120;
 function HoverCard({
@@ -15,6 +16,7 @@ function HoverCard({
 }) {
   const [open, setOpen] = useState(false);
   const [position, setPosition] = useState(null);
+  const floatingZ = useFloatingZIndex();
   const triggerRef = useRef(null);
   const cardRef = useRef(null);
   const openTimerRef = useRef(null);
@@ -97,9 +99,12 @@ function HoverCard({
         role: "tooltip",
         onMouseEnter: cancelClose,
         onMouseLeave: onLeave,
-        style: position ? { position: "fixed", top: position.top, left: position.left } : { position: "fixed", top: -9999, left: -9999, visibility: "hidden" },
+        style: {
+          ...position ? { position: "fixed", top: position.top, left: position.left } : { position: "fixed", top: -9999, left: -9999, visibility: "hidden" },
+          zIndex: floatingZ
+        },
         className: cn(
-          "z-[9999] rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg",
+          "rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg",
           "whitespace-nowrap",
           cardClassName
         ),

package/dist/overlay/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type HoverCardProps = {\n  /** Trigger content that opens the card on hover/focus. */\n  trigger: ReactNode;\n  /** Floating card content. */\n  children: ReactNode;\n  /** Preferred placement around the trigger. */\n  placement?: HoverCardPlacement;\n  /** Open delay in milliseconds. */\n  delay?: number;\n  /** Show the directional arrow. */\n  arrow?: boolean;\n  /** Classes applied to the trigger wrapper. */\n  className?: string;\n  /** Classes applied to the floating card. */\n  cardClassName?: string;\n};\n\nconst GAP_PX = 6;\n\ntype Position = { top: number; left: number };\n\n// Grace period that lets the cursor cross the gap from the trigger to the\n// portaled card without the card disappearing.\nconst HOVER_CLOSE_DELAY_MS = 120;\n\nexport function HoverCard({\n  trigger,\n  children,\n  placement = \"top\",\n  delay = 0,\n  arrow = true,\n  className,\n  cardClassName,\n}: HoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<Position | null>(null);\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const cancelClose = () => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  };\n\n  function onEnter() {\n    cancelClose();\n    if (delay > 0) {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = window.setTimeout(() => setOpen(true), delay);\n    } else {\n      setOpen(true);\n    }\n  }\n  function onLeave() {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    cancelClose();\n    closeTimerRef.current = window.setTimeout(() => setOpen(false), HOVER_CLOSE_DELAY_MS);\n  }\n\n  // Recompute position whenever the card opens or the viewport scrolls/resizes\n  // while it's open. We position via fixed coordinates so the card escapes\n  // every overflow-hidden / transform ancestor — important when the trigger\n  // sits inside a table row, dropdown, or modal that would otherwise clip it.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const trigger = triggerRef.current;\n      const card = cardRef.current;\n      if (!trigger || !card) return;\n      const t = trigger.getBoundingClientRect();\n      const c = card.getBoundingClientRect();\n      let top = 0;\n      let left = 0;\n      switch (placement) {\n        case \"top\":\n          top = t.top - c.height - GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"bottom\":\n          top = t.bottom + GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"left\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.left - c.width - GAP_PX;\n          break;\n        case \"right\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.right + GAP_PX;\n          break;\n      }\n      // Clamp to viewport so cards near the edge don't overflow off-screen.\n      const margin = 4;\n      left = Math.min(Math.max(margin, left), window.innerWidth - c.width - margin);\n      top = Math.min(Math.max(margin, top), window.innerHeight - c.height - margin);\n      setPosition({ top, left });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, placement, children]);\n\n  useEffect(() => {\n    return () => {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  const card =\n    open && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={cardRef}\n            role=\"tooltip\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={onLeave}\n            style={\n              position\n                ? { position: \"fixed\", top: position.top, left: position.left }\n                : { position: \"fixed\", top: -9999, left: -9999, visibility: \"hidden\" }\n            }\n            className={cn(\n              \"z-[9999] rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg\",\n              \"whitespace-nowrap\",\n              cardClassName,\n            )}\n          >\n            {children}\n            {arrow && position && <Arrow placement={placement} />}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <span\n      ref={triggerRef}\n      className={cn(\"relative inline-flex items-center\", className)}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {trigger}\n      {card}\n    </span>\n  );\n}\n\nfunction Arrow({ placement }: { placement: HoverCardPlacement }) {\n  // The arrow is a small rotated square clipped to look like a notch on the\n  // card edge that points back at the trigger. Drawn relative to the card.\n  const base = \"absolute h-1.5 w-1.5 rotate-45 border bg-background border-border\";\n  switch (placement) {\n    case \"top\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -bottom-0.5 border-l-0 border-t-0\")}\n        />\n      );\n    case \"bottom\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -top-0.5 border-r-0 border-b-0\")}\n        />\n      );\n    case \"left\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -right-0.5 border-l-0 border-b-0\")}\n        />\n      );\n    case \"right\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -left-0.5 border-r-0 border-t-0\")}\n        />\n      );\n  }\n}\n"],"names":["trigger","card"],"mappings":"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"}
+{"version":3,"file":"HoverCard.js","sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { useFloatingZIndex } from \"./modalStack\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type HoverCardProps = {\n  /** Trigger content that opens the card on hover/focus. */\n  trigger: ReactNode;\n  /** Floating card content. */\n  children: ReactNode;\n  /** Preferred placement around the trigger. */\n  placement?: HoverCardPlacement;\n  /** Open delay in milliseconds. */\n  delay?: number;\n  /** Show the directional arrow. */\n  arrow?: boolean;\n  /** Classes applied to the trigger wrapper. */\n  className?: string;\n  /** Classes applied to the floating card. */\n  cardClassName?: string;\n};\n\nconst GAP_PX = 6;\n\ntype Position = { top: number; left: number };\n\n// Grace period that lets the cursor cross the gap from the trigger to the\n// portaled card without the card disappearing.\nconst HOVER_CLOSE_DELAY_MS = 120;\n\nexport function HoverCard({\n  trigger,\n  children,\n  placement = \"top\",\n  delay = 0,\n  arrow = true,\n  className,\n  cardClassName,\n}: HoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<Position | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const cancelClose = () => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  };\n\n  function onEnter() {\n    cancelClose();\n    if (delay > 0) {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = window.setTimeout(() => setOpen(true), delay);\n    } else {\n      setOpen(true);\n    }\n  }\n  function onLeave() {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    cancelClose();\n    closeTimerRef.current = window.setTimeout(() => setOpen(false), HOVER_CLOSE_DELAY_MS);\n  }\n\n  // Recompute position whenever the card opens or the viewport scrolls/resizes\n  // while it's open. We position via fixed coordinates so the card escapes\n  // every overflow-hidden / transform ancestor — important when the trigger\n  // sits inside a table row, dropdown, or modal that would otherwise clip it.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const trigger = triggerRef.current;\n      const card = cardRef.current;\n      if (!trigger || !card) return;\n      const t = trigger.getBoundingClientRect();\n      const c = card.getBoundingClientRect();\n      let top = 0;\n      let left = 0;\n      switch (placement) {\n        case \"top\":\n          top = t.top - c.height - GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"bottom\":\n          top = t.bottom + GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"left\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.left - c.width - GAP_PX;\n          break;\n        case \"right\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.right + GAP_PX;\n          break;\n      }\n      // Clamp to viewport so cards near the edge don't overflow off-screen.\n      const margin = 4;\n      left = Math.min(Math.max(margin, left), window.innerWidth - c.width - margin);\n      top = Math.min(Math.max(margin, top), window.innerHeight - c.height - margin);\n      setPosition({ top, left });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, placement, children]);\n\n  useEffect(() => {\n    return () => {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  const card =\n    open && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={cardRef}\n            role=\"tooltip\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={onLeave}\n            style={{\n              ...(position\n                ? { position: \"fixed\", top: position.top, left: position.left }\n                : { position: \"fixed\", top: -9999, left: -9999, visibility: \"hidden\" }),\n              zIndex: floatingZ,\n            }}\n            className={cn(\n              \"rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg\",\n              \"whitespace-nowrap\",\n              cardClassName,\n            )}\n          >\n            {children}\n            {arrow && position && <Arrow placement={placement} />}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <span\n      ref={triggerRef}\n      className={cn(\"relative inline-flex items-center\", className)}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {trigger}\n      {card}\n    </span>\n  );\n}\n\nfunction Arrow({ placement }: { placement: HoverCardPlacement }) {\n  // The arrow is a small rotated square clipped to look like a notch on the\n  // card edge that points back at the trigger. Drawn relative to the card.\n  const base = \"absolute h-1.5 w-1.5 rotate-45 border bg-background border-border\";\n  switch (placement) {\n    case \"top\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -bottom-0.5 border-l-0 border-t-0\")}\n        />\n      );\n    case \"bottom\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -top-0.5 border-r-0 border-b-0\")}\n        />\n      );\n    case \"left\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -right-0.5 border-l-0 border-b-0\")}\n        />\n      );\n    case \"right\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -left-0.5 border-r-0 border-t-0\")}\n        />\n      );\n  }\n}\n"],"names":["trigger","card"],"mappings":"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"}

package/dist/overlay/Modal.cjs

@@ -7,14 +7,15 @@ const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const button = require("../components/button.cjs");
 const modalStack = require("./modalStack.cjs");
+const zIndex = require("./zIndex.cjs");
 const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
 const sizeClass = {
-  sm: "max-w-sm max-h-[90vh]",
-  md: "max-w-md max-h-[90vh]",
-  lg: "max-w-2xl max-h-[90vh]",
-  xl: "max-w-4xl max-h-[90vh]",
-  full: "max-w-[95vw] max-h-[95vh]"
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[95vw]"
 };
 const DEFAULT_CONFIRM = {
   title: "Discard changes?",
@@ -39,7 +40,7 @@ function Modal({
   children
 }) {
   const dialogRef = react.useRef(null);
-  const { isTop, depth } = modalStack.useModalStack(open);
+  const { depth } = modalStack.useModalStack(open);
   const [expanded, setExpanded] = react.useState(false);
   const [confirming, setConfirming] = react.useState(false);
   const requestClose = () => {
@@ -55,16 +56,14 @@ function Modal({
   react.useEffect(() => {
     if (!confirmClose) setConfirming(false);
   }, [confirmClose]);
-  react.useEffect(() => {
-    if (!open || !closeOnEsc || !isTop) return;
-    const onKey = (e) => {
-      if (e.key !== "Escape") return;
+  modalStack.useEscapeLayer(
+    open,
+    () => {
       if (confirming) setConfirming(false);
       else requestClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);
+    },
+    closeOnEsc
+  );
   react.useEffect(() => {
     var _a;
     if (!open) return;
@@ -80,11 +79,11 @@ function Modal({
     "div",
     {
       className: utils.cn(
-        "fixed inset-0 flex items-center justify-center",
+        "fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4",
         // Nested modals dim less so the dialog they opened over stays visible.
         depth === 0 ? "bg-black/40" : "bg-black/20"
       ),
-      style: { zIndex: 1e4 + depth * 10 },
+      style: { zIndex: zIndex.zIndex.modal + depth * zIndex.zIndex.modalStep },
       onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -96,10 +95,14 @@ function Modal({
           "aria-modal": "true",
           "aria-label": typeof title === "string" ? title : void 0,
           className: utils.cn(
-            "relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col",
+            "relative flex w-full flex-col rounded-lg border border-border bg-background shadow-xl",
             expanded ? sizeClass.full : sizeClass[size],
             className
           ),
+          style: {
+            maxHeight: "calc(100dvh - 2rem)",
+            ...expanded ? { height: "calc(100dvh - 2rem)" } : {}
+          },
           onClick: (e) => e.stopPropagation(),
           children: [
             (title || subtitle || headerSlot || expandable || !hideClose) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-density-4 py-density-3 border-b border-border", children: [

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 { useModalStack } from \"./modalStack\";\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  /**\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  /** 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  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\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 { isTop, 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  useEffect(() => {\n    // Only the topmost modal handles Escape so a keypress closes one nested\n    // layer at a time instead of every open modal at once.\n    if (!open || !closeOnEsc || !isTop) 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, isTop, 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  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Above the z-[9999] popover/overlay layer (dropdowns, tooltips, toasts) so a\n      // modal opened from one of them stacks on top; +depth keeps nested modals\n      // above their parent.\n      style={{ zIndex: 10000 + depth * 10 }}\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 || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"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={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            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\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  // 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\" ? createPortal(overlay, document.body) : 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={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","useModalStack","useState","useEffect","_a","jsx","cn","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 { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useEscapeLayer, useModalStack } from \"./modalStack\";\nimport { zIndex } from \"./zIndex\";\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  /**\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  /** 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  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  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 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=\"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={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            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\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  // 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\" ? createPortal(overlay, document.body) : 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={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","useModalStack","useState","useEffect","useEscapeLayer","_a","jsx","cn","zIndex","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","createPortal","Button"],"mappings":"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"}

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;AAQpE,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;;;;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,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAiBF,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,QAAQ,GACT,EAAE,UAAU,sCAoIZ"}
+{"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,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;;;;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,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAiBF,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,QAAQ,GACT,EAAE,UAAU,sCAyIZ"}

package/dist/overlay/Modal.js

@@ -4,15 +4,16 @@ import { createPortal } from "react-dom";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { Button } from "../components/button.js";
-import { useModalStack } from "./modalStack.js";
+import { useModalStack, useEscapeLayer } from "./modalStack.js";
+import { zIndex } from "./zIndex.js";
 import { UiFullscreenFilled, UiFullscreen } from "../icons/components/UiFullscreen.js";
 import { UiClose } from "../icons/components/UiClose.js";
 const sizeClass = {
-  sm: "max-w-sm max-h-[90vh]",
-  md: "max-w-md max-h-[90vh]",
-  lg: "max-w-2xl max-h-[90vh]",
-  xl: "max-w-4xl max-h-[90vh]",
-  full: "max-w-[95vw] max-h-[95vh]"
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-[95vw]"
 };
 const DEFAULT_CONFIRM = {
   title: "Discard changes?",
@@ -37,7 +38,7 @@ function Modal({
   children
 }) {
   const dialogRef = useRef(null);
-  const { isTop, depth } = useModalStack(open);
+  const { depth } = useModalStack(open);
   const [expanded, setExpanded] = useState(false);
   const [confirming, setConfirming] = useState(false);
   const requestClose = () => {
@@ -53,16 +54,14 @@ function Modal({
   useEffect(() => {
     if (!confirmClose) setConfirming(false);
   }, [confirmClose]);
-  useEffect(() => {
-    if (!open || !closeOnEsc || !isTop) return;
-    const onKey = (e) => {
-      if (e.key !== "Escape") return;
+  useEscapeLayer(
+    open,
+    () => {
       if (confirming) setConfirming(false);
       else requestClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);
+    },
+    closeOnEsc
+  );
   useEffect(() => {
     var _a;
     if (!open) return;
@@ -78,11 +77,11 @@ function Modal({
     "div",
     {
       className: cn(
-        "fixed inset-0 flex items-center justify-center",
+        "fixed inset-0 flex items-center justify-center p-density-2 sm:p-density-4",
         // Nested modals dim less so the dialog they opened over stays visible.
         depth === 0 ? "bg-black/40" : "bg-black/20"
       ),
-      style: { zIndex: 1e4 + depth * 10 },
+      style: { zIndex: zIndex.modal + depth * zIndex.modalStep },
       onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxs(
@@ -94,10 +93,14 @@ function Modal({
           "aria-modal": "true",
           "aria-label": typeof title === "string" ? title : void 0,
           className: cn(
-            "relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col",
+            "relative flex w-full flex-col rounded-lg border border-border bg-background shadow-xl",
             expanded ? sizeClass.full : sizeClass[size],
             className
           ),
+          style: {
+            maxHeight: "calc(100dvh - 2rem)",
+            ...expanded ? { height: "calc(100dvh - 2rem)" } : {}
+          },
           onClick: (e) => e.stopPropagation(),
           children: [
             (title || subtitle || headerSlot || expandable || !hideClose) && /* @__PURE__ */ jsxs("div", { className: "px-density-4 py-density-3 border-b border-border", children: [

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 { useModalStack } from \"./modalStack\";\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  /**\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  /** 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  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\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 { isTop, 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  useEffect(() => {\n    // Only the topmost modal handles Escape so a keypress closes one nested\n    // layer at a time instead of every open modal at once.\n    if (!open || !closeOnEsc || !isTop) 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, isTop, 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  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Above the z-[9999] popover/overlay layer (dropdowns, tooltips, toasts) so a\n      // modal opened from one of them stacks on top; +depth keeps nested modals\n      // above their parent.\n      style={{ zIndex: 10000 + depth * 10 }}\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 || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"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={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            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\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  // 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\" ? createPortal(overlay, document.body) : 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={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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"}
+{"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\" | \"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  /** 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  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  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 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=\"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={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            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\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  // 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\" ? createPortal(overlay, document.body) : 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={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/overlay/Toast.cjs

@@ -6,6 +6,7 @@ const reactDom = require("react-dom");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const toastContext = require("./toast-context.cjs");
+const zIndex = require("./zIndex.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
 const DEFAULT_DURATION_MS = 2200;
 const DOT_TONE = {
@@ -54,7 +55,14 @@ function ToastProvider({ children, durationMs = DEFAULT_DURATION_MS }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(toastContext.ToastContext.Provider, { value, children: [
     children,
     typeof document !== "undefined" && reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none fixed inset-x-0 bottom-6 z-[9999] flex flex-col items-center gap-density-2", children: toasts.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(ToastView, { entry, onDismiss: () => dismiss(entry.id) }, entry.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pointer-events-none fixed inset-x-0 bottom-6 flex flex-col items-center gap-density-2",
+          style: { zIndex: zIndex.zIndex.toast },
+          children: toasts.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(ToastView, { entry, onDismiss: () => dismiss(entry.id) }, entry.id))
+        }
+      ),
       document.body
     )
   ] });

package/dist/overlay/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../src/overlay/Toast.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiClose } from \"../icons\";\nimport {\n  ToastContext,\n  type ToastEntry,\n  type ToastOptions,\n  type ToastTone,\n} from \"./toast-context\";\n\nconst DEFAULT_DURATION_MS = 2200;\n\nconst DOT_TONE: Record<ToastTone, string> = {\n  success: \"bg-emerald-500\",\n  danger: \"bg-rose-500\",\n  warning: \"bg-amber-500\",\n  info: \"bg-sky-500\",\n  neutral: \"bg-primary\",\n};\n\nexport type ToastProviderProps = {\n  children: ReactNode;\n  /** Default auto-dismiss delay applied when a toast omits `durationMs`. */\n  durationMs?: number;\n};\n\n/**\n * Provides the imperative toast API and renders the bottom-center stack into a\n * portal (the Gavel `PRDetail` confirmation toast — a tone dot plus a transient\n * message). Built on clicky tokens; auto-dismisses after `durationMs`. Consume\n * the API with `useToast()` from `./toast-context`.\n */\nexport function ToastProvider({ children, durationMs = DEFAULT_DURATION_MS }: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastEntry[]>([]);\n  const idRef = useRef(0);\n  const timers = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());\n\n  const dismiss = useCallback((id: number) => {\n    setToasts((cur) => cur.filter((t) => t.id !== id));\n    const handle = timers.current.get(id);\n    if (handle !== undefined) {\n      clearTimeout(handle);\n      timers.current.delete(id);\n    }\n  }, []);\n\n  const toast = useCallback(\n    (options: ToastOptions | string) => {\n      const normalized: ToastOptions = typeof options === \"string\" ? { message: options } : options;\n      const id = (idRef.current += 1);\n      setToasts((cur) => [...cur, { tone: \"neutral\", ...normalized, id }]);\n      const ttl = normalized.durationMs ?? durationMs;\n      if (ttl > 0) {\n        timers.current.set(\n          id,\n          setTimeout(() => dismiss(id), ttl),\n        );\n      }\n      return id;\n    },\n    [dismiss, durationMs],\n  );\n\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      pending.forEach((handle) => clearTimeout(handle));\n      pending.clear();\n    };\n  }, []);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <div className=\"pointer-events-none fixed inset-x-0 bottom-6 z-[9999] flex flex-col items-center gap-density-2\">\n            {toasts.map((entry) => (\n              <ToastView key={entry.id} entry={entry} onDismiss={() => dismiss(entry.id)} />\n            ))}\n          </div>,\n          document.body,\n        )}\n    </ToastContext.Provider>\n  );\n}\n\nfunction ToastView({ entry, onDismiss }: { entry: ToastEntry; onDismiss: () => void }) {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        \"pointer-events-auto flex items-center gap-density-2 rounded-md border border-border\",\n        \"bg-popover px-density-3 py-density-2 text-sm font-medium text-popover-foreground shadow-lg\",\n      )}\n    >\n      <span className={cn(\"h-2 w-2 shrink-0 rounded-full\", DOT_TONE[entry.tone ?? \"neutral\"])} />\n      <span>{entry.message}</span>\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        aria-label=\"Dismiss\"\n        className=\"ml-1 text-muted-foreground transition-colors hover:text-foreground\"\n      >\n        <Icon icon={UiClose} className=\"h-3 w-3\" />\n      </button>\n    </div>\n  );\n}\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","jsxs","ToastContext","createPortal","jsx","cn","Icon","UiClose"],"mappings":";;;;;;;;;AAYA,MAAM,sBAAsB;AAE5B,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AAcO,SAAS,cAAc,EAAE,UAAU,aAAa,uBAA2C;AAChG,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAuB,CAAA,CAAE;AACrD,QAAM,QAAQC,MAAAA,OAAO,CAAC;AACtB,QAAM,SAASA,MAAAA,OAAmD,oBAAI,KAAK;AAE3E,QAAM,UAAUC,kBAAY,CAAC,OAAe;AAC1C,cAAU,CAAC,QAAQ,IAAI,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AACjD,UAAM,SAAS,OAAO,QAAQ,IAAI,EAAE;AACpC,QAAI,WAAW,QAAW;AACxB,mBAAa,MAAM;AACnB,aAAO,QAAQ,OAAO,EAAE;AAAA,IAC1B;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQA,MAAAA;AAAAA,IACZ,CAAC,YAAmC;AAClC,YAAM,aAA2B,OAAO,YAAY,WAAW,EAAE,SAAS,YAAY;AACtF,YAAM,KAAM,MAAM,WAAW;AAC7B,gBAAU,CAAC,QAAQ,CAAC,GAAG,KAAK,EAAE,MAAM,WAAW,GAAG,YAAY,GAAA,CAAI,CAAC;AACnE,YAAM,MAAM,WAAW,cAAc;AACrC,UAAI,MAAM,GAAG;AACX,eAAO,QAAQ;AAAA,UACb;AAAA,UACA,WAAW,MAAM,QAAQ,EAAE,GAAG,GAAG;AAAA,QAAA;AAAA,MAErC;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EAAA;AAGtBC,QAAAA,UAAU,MAAM;AACd,UAAM,UAAU,OAAO;AACvB,WAAO,MAAM;AACX,cAAQ,QAAQ,CAAC,WAAW,aAAa,MAAM,CAAC;AAChD,cAAQ,MAAA;AAAA,IACV;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQC,cAAQ,OAAO,EAAE,OAAO,YAAY,CAAC,OAAO,OAAO,CAAC;AAElE,SACEC,2BAAAA,KAACC,aAAAA,aAAa,UAAb,EAAsB,OACpB,UAAA;AAAA,IAAA;AAAA,IACA,OAAO,aAAa,eACnBC,SAAAA;AAAAA,MACEC,+BAAC,SAAI,WAAU,kGACZ,iBAAO,IAAI,CAAC,UACXA,+BAAC,WAAA,EAAyB,OAAc,WAAW,MAAM,QAAQ,MAAM,EAAE,KAAzD,MAAM,EAAsD,CAC7E,GACH;AAAA,MACA,SAAS;AAAA,IAAA;AAAA,EACX,GACJ;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,aAA2D;AACrF,SACEH,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWI,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAWC,SAAG,iCAAiC,SAAS,MAAM,QAAQ,SAAS,CAAC,EAAA,CAAG;AAAA,QACzFD,2BAAAA,IAAC,QAAA,EAAM,UAAA,MAAM,QAAA,CAAQ;AAAA,QACrBA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACE,WAAA,EAAK,MAAMC,QAAAA,SAAS,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3C;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"Toast.cjs","sources":["../../src/overlay/Toast.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiClose } from \"../icons\";\nimport {\n  ToastContext,\n  type ToastEntry,\n  type ToastOptions,\n  type ToastTone,\n} from \"./toast-context\";\nimport { zIndex } from \"./zIndex\";\n\nconst DEFAULT_DURATION_MS = 2200;\n\nconst DOT_TONE: Record<ToastTone, string> = {\n  success: \"bg-emerald-500\",\n  danger: \"bg-rose-500\",\n  warning: \"bg-amber-500\",\n  info: \"bg-sky-500\",\n  neutral: \"bg-primary\",\n};\n\nexport type ToastProviderProps = {\n  children: ReactNode;\n  /** Default auto-dismiss delay applied when a toast omits `durationMs`. */\n  durationMs?: number;\n};\n\n/**\n * Provides the imperative toast API and renders the bottom-center stack into a\n * portal (the Gavel `PRDetail` confirmation toast — a tone dot plus a transient\n * message). Built on clicky tokens; auto-dismisses after `durationMs`. Consume\n * the API with `useToast()` from `./toast-context`.\n */\nexport function ToastProvider({ children, durationMs = DEFAULT_DURATION_MS }: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastEntry[]>([]);\n  const idRef = useRef(0);\n  const timers = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());\n\n  const dismiss = useCallback((id: number) => {\n    setToasts((cur) => cur.filter((t) => t.id !== id));\n    const handle = timers.current.get(id);\n    if (handle !== undefined) {\n      clearTimeout(handle);\n      timers.current.delete(id);\n    }\n  }, []);\n\n  const toast = useCallback(\n    (options: ToastOptions | string) => {\n      const normalized: ToastOptions = typeof options === \"string\" ? { message: options } : options;\n      const id = (idRef.current += 1);\n      setToasts((cur) => [...cur, { tone: \"neutral\", ...normalized, id }]);\n      const ttl = normalized.durationMs ?? durationMs;\n      if (ttl > 0) {\n        timers.current.set(\n          id,\n          setTimeout(() => dismiss(id), ttl),\n        );\n      }\n      return id;\n    },\n    [dismiss, durationMs],\n  );\n\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      pending.forEach((handle) => clearTimeout(handle));\n      pending.clear();\n    };\n  }, []);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            className=\"pointer-events-none fixed inset-x-0 bottom-6 flex flex-col items-center gap-density-2\"\n            style={{ zIndex: zIndex.toast }}\n          >\n            {toasts.map((entry) => (\n              <ToastView key={entry.id} entry={entry} onDismiss={() => dismiss(entry.id)} />\n            ))}\n          </div>,\n          document.body,\n        )}\n    </ToastContext.Provider>\n  );\n}\n\nfunction ToastView({ entry, onDismiss }: { entry: ToastEntry; onDismiss: () => void }) {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        \"pointer-events-auto flex items-center gap-density-2 rounded-md border border-border\",\n        \"bg-popover px-density-3 py-density-2 text-sm font-medium text-popover-foreground shadow-lg\",\n      )}\n    >\n      <span className={cn(\"h-2 w-2 shrink-0 rounded-full\", DOT_TONE[entry.tone ?? \"neutral\"])} />\n      <span>{entry.message}</span>\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        aria-label=\"Dismiss\"\n        className=\"ml-1 text-muted-foreground transition-colors hover:text-foreground\"\n      >\n        <Icon icon={UiClose} className=\"h-3 w-3\" />\n      </button>\n    </div>\n  );\n}\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","jsxs","ToastContext","createPortal","jsx","zIndex","cn","Icon","UiClose"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/overlay/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsB1F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAgC,EAAE,EAAE,kBAAkB,2CAuD/F"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/overlay/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAuB1F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAgC,EAAE,EAAE,kBAAkB,2CA0D/F"}

package/dist/overlay/Toast.js

@@ -4,6 +4,7 @@ import { createPortal } from "react-dom";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { ToastContext } from "./toast-context.js";
+import { zIndex } from "./zIndex.js";
 import { UiClose } from "../icons/components/UiClose.js";
 const DEFAULT_DURATION_MS = 2200;
 const DOT_TONE = {
@@ -52,7 +53,14 @@ function ToastProvider({ children, durationMs = DEFAULT_DURATION_MS }) {
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
     typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed inset-x-0 bottom-6 z-[9999] flex flex-col items-center gap-density-2", children: toasts.map((entry) => /* @__PURE__ */ jsx(ToastView, { entry, onDismiss: () => dismiss(entry.id) }, entry.id)) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none fixed inset-x-0 bottom-6 flex flex-col items-center gap-density-2",
+          style: { zIndex: zIndex.toast },
+          children: toasts.map((entry) => /* @__PURE__ */ jsx(ToastView, { entry, onDismiss: () => dismiss(entry.id) }, entry.id))
+        }
+      ),
       document.body
     )
   ] });

package/dist/overlay/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../src/overlay/Toast.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiClose } from \"../icons\";\nimport {\n  ToastContext,\n  type ToastEntry,\n  type ToastOptions,\n  type ToastTone,\n} from \"./toast-context\";\n\nconst DEFAULT_DURATION_MS = 2200;\n\nconst DOT_TONE: Record<ToastTone, string> = {\n  success: \"bg-emerald-500\",\n  danger: \"bg-rose-500\",\n  warning: \"bg-amber-500\",\n  info: \"bg-sky-500\",\n  neutral: \"bg-primary\",\n};\n\nexport type ToastProviderProps = {\n  children: ReactNode;\n  /** Default auto-dismiss delay applied when a toast omits `durationMs`. */\n  durationMs?: number;\n};\n\n/**\n * Provides the imperative toast API and renders the bottom-center stack into a\n * portal (the Gavel `PRDetail` confirmation toast — a tone dot plus a transient\n * message). Built on clicky tokens; auto-dismisses after `durationMs`. Consume\n * the API with `useToast()` from `./toast-context`.\n */\nexport function ToastProvider({ children, durationMs = DEFAULT_DURATION_MS }: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastEntry[]>([]);\n  const idRef = useRef(0);\n  const timers = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());\n\n  const dismiss = useCallback((id: number) => {\n    setToasts((cur) => cur.filter((t) => t.id !== id));\n    const handle = timers.current.get(id);\n    if (handle !== undefined) {\n      clearTimeout(handle);\n      timers.current.delete(id);\n    }\n  }, []);\n\n  const toast = useCallback(\n    (options: ToastOptions | string) => {\n      const normalized: ToastOptions = typeof options === \"string\" ? { message: options } : options;\n      const id = (idRef.current += 1);\n      setToasts((cur) => [...cur, { tone: \"neutral\", ...normalized, id }]);\n      const ttl = normalized.durationMs ?? durationMs;\n      if (ttl > 0) {\n        timers.current.set(\n          id,\n          setTimeout(() => dismiss(id), ttl),\n        );\n      }\n      return id;\n    },\n    [dismiss, durationMs],\n  );\n\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      pending.forEach((handle) => clearTimeout(handle));\n      pending.clear();\n    };\n  }, []);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <div className=\"pointer-events-none fixed inset-x-0 bottom-6 z-[9999] flex flex-col items-center gap-density-2\">\n            {toasts.map((entry) => (\n              <ToastView key={entry.id} entry={entry} onDismiss={() => dismiss(entry.id)} />\n            ))}\n          </div>,\n          document.body,\n        )}\n    </ToastContext.Provider>\n  );\n}\n\nfunction ToastView({ entry, onDismiss }: { entry: ToastEntry; onDismiss: () => void }) {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        \"pointer-events-auto flex items-center gap-density-2 rounded-md border border-border\",\n        \"bg-popover px-density-3 py-density-2 text-sm font-medium text-popover-foreground shadow-lg\",\n      )}\n    >\n      <span className={cn(\"h-2 w-2 shrink-0 rounded-full\", DOT_TONE[entry.tone ?? \"neutral\"])} />\n      <span>{entry.message}</span>\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        aria-label=\"Dismiss\"\n        className=\"ml-1 text-muted-foreground transition-colors hover:text-foreground\"\n      >\n        <Icon icon={UiClose} className=\"h-3 w-3\" />\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,sBAAsB;AAE5B,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AAcO,SAAS,cAAc,EAAE,UAAU,aAAa,uBAA2C;AAChG,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuB,CAAA,CAAE;AACrD,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,SAAS,OAAmD,oBAAI,KAAK;AAE3E,QAAM,UAAU,YAAY,CAAC,OAAe;AAC1C,cAAU,CAAC,QAAQ,IAAI,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AACjD,UAAM,SAAS,OAAO,QAAQ,IAAI,EAAE;AACpC,QAAI,WAAW,QAAW;AACxB,mBAAa,MAAM;AACnB,aAAO,QAAQ,OAAO,EAAE;AAAA,IAC1B;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,CAAC,YAAmC;AAClC,YAAM,aAA2B,OAAO,YAAY,WAAW,EAAE,SAAS,YAAY;AACtF,YAAM,KAAM,MAAM,WAAW;AAC7B,gBAAU,CAAC,QAAQ,CAAC,GAAG,KAAK,EAAE,MAAM,WAAW,GAAG,YAAY,GAAA,CAAI,CAAC;AACnE,YAAM,MAAM,WAAW,cAAc;AACrC,UAAI,MAAM,GAAG;AACX,eAAO,QAAQ;AAAA,UACb;AAAA,UACA,WAAW,MAAM,QAAQ,EAAE,GAAG,GAAG;AAAA,QAAA;AAAA,MAErC;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EAAA;AAGtB,YAAU,MAAM;AACd,UAAM,UAAU,OAAO;AACvB,WAAO,MAAM;AACX,cAAQ,QAAQ,CAAC,WAAW,aAAa,MAAM,CAAC;AAChD,cAAQ,MAAA;AAAA,IACV;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ,QAAQ,OAAO,EAAE,OAAO,YAAY,CAAC,OAAO,OAAO,CAAC;AAElE,SACE,qBAAC,aAAa,UAAb,EAAsB,OACpB,UAAA;AAAA,IAAA;AAAA,IACA,OAAO,aAAa,eACnB;AAAA,MACE,oBAAC,SAAI,WAAU,kGACZ,iBAAO,IAAI,CAAC,UACX,oBAAC,WAAA,EAAyB,OAAc,WAAW,MAAM,QAAQ,MAAM,EAAE,KAAzD,MAAM,EAAsD,CAC7E,GACH;AAAA,MACA,SAAS;AAAA,IAAA;AAAA,EACX,GACJ;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,aAA2D;AACrF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAW,GAAG,iCAAiC,SAAS,MAAM,QAAQ,SAAS,CAAC,EAAA,CAAG;AAAA,QACzF,oBAAC,QAAA,EAAM,UAAA,MAAM,QAAA,CAAQ;AAAA,QACrB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3C;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Toast.js","sources":["../../src/overlay/Toast.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiClose } from \"../icons\";\nimport {\n  ToastContext,\n  type ToastEntry,\n  type ToastOptions,\n  type ToastTone,\n} from \"./toast-context\";\nimport { zIndex } from \"./zIndex\";\n\nconst DEFAULT_DURATION_MS = 2200;\n\nconst DOT_TONE: Record<ToastTone, string> = {\n  success: \"bg-emerald-500\",\n  danger: \"bg-rose-500\",\n  warning: \"bg-amber-500\",\n  info: \"bg-sky-500\",\n  neutral: \"bg-primary\",\n};\n\nexport type ToastProviderProps = {\n  children: ReactNode;\n  /** Default auto-dismiss delay applied when a toast omits `durationMs`. */\n  durationMs?: number;\n};\n\n/**\n * Provides the imperative toast API and renders the bottom-center stack into a\n * portal (the Gavel `PRDetail` confirmation toast — a tone dot plus a transient\n * message). Built on clicky tokens; auto-dismisses after `durationMs`. Consume\n * the API with `useToast()` from `./toast-context`.\n */\nexport function ToastProvider({ children, durationMs = DEFAULT_DURATION_MS }: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastEntry[]>([]);\n  const idRef = useRef(0);\n  const timers = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());\n\n  const dismiss = useCallback((id: number) => {\n    setToasts((cur) => cur.filter((t) => t.id !== id));\n    const handle = timers.current.get(id);\n    if (handle !== undefined) {\n      clearTimeout(handle);\n      timers.current.delete(id);\n    }\n  }, []);\n\n  const toast = useCallback(\n    (options: ToastOptions | string) => {\n      const normalized: ToastOptions = typeof options === \"string\" ? { message: options } : options;\n      const id = (idRef.current += 1);\n      setToasts((cur) => [...cur, { tone: \"neutral\", ...normalized, id }]);\n      const ttl = normalized.durationMs ?? durationMs;\n      if (ttl > 0) {\n        timers.current.set(\n          id,\n          setTimeout(() => dismiss(id), ttl),\n        );\n      }\n      return id;\n    },\n    [dismiss, durationMs],\n  );\n\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      pending.forEach((handle) => clearTimeout(handle));\n      pending.clear();\n    };\n  }, []);\n\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      {typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            className=\"pointer-events-none fixed inset-x-0 bottom-6 flex flex-col items-center gap-density-2\"\n            style={{ zIndex: zIndex.toast }}\n          >\n            {toasts.map((entry) => (\n              <ToastView key={entry.id} entry={entry} onDismiss={() => dismiss(entry.id)} />\n            ))}\n          </div>,\n          document.body,\n        )}\n    </ToastContext.Provider>\n  );\n}\n\nfunction ToastView({ entry, onDismiss }: { entry: ToastEntry; onDismiss: () => void }) {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        \"pointer-events-auto flex items-center gap-density-2 rounded-md border border-border\",\n        \"bg-popover px-density-3 py-density-2 text-sm font-medium text-popover-foreground shadow-lg\",\n      )}\n    >\n      <span className={cn(\"h-2 w-2 shrink-0 rounded-full\", DOT_TONE[entry.tone ?? \"neutral\"])} />\n      <span>{entry.message}</span>\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        aria-label=\"Dismiss\"\n        className=\"ml-1 text-muted-foreground transition-colors hover:text-foreground\"\n      >\n        <Icon icon={UiClose} className=\"h-3 w-3\" />\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAaA,MAAM,sBAAsB;AAE5B,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AAcO,SAAS,cAAc,EAAE,UAAU,aAAa,uBAA2C;AAChG,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuB,CAAA,CAAE;AACrD,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,SAAS,OAAmD,oBAAI,KAAK;AAE3E,QAAM,UAAU,YAAY,CAAC,OAAe;AAC1C,cAAU,CAAC,QAAQ,IAAI,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AACjD,UAAM,SAAS,OAAO,QAAQ,IAAI,EAAE;AACpC,QAAI,WAAW,QAAW;AACxB,mBAAa,MAAM;AACnB,aAAO,QAAQ,OAAO,EAAE;AAAA,IAC1B;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,CAAC,YAAmC;AAClC,YAAM,aAA2B,OAAO,YAAY,WAAW,EAAE,SAAS,YAAY;AACtF,YAAM,KAAM,MAAM,WAAW;AAC7B,gBAAU,CAAC,QAAQ,CAAC,GAAG,KAAK,EAAE,MAAM,WAAW,GAAG,YAAY,GAAA,CAAI,CAAC;AACnE,YAAM,MAAM,WAAW,cAAc;AACrC,UAAI,MAAM,GAAG;AACX,eAAO,QAAQ;AAAA,UACb;AAAA,UACA,WAAW,MAAM,QAAQ,EAAE,GAAG,GAAG;AAAA,QAAA;AAAA,MAErC;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EAAA;AAGtB,YAAU,MAAM;AACd,UAAM,UAAU,OAAO;AACvB,WAAO,MAAM;AACX,cAAQ,QAAQ,CAAC,WAAW,aAAa,MAAM,CAAC;AAChD,cAAQ,MAAA;AAAA,IACV;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ,QAAQ,OAAO,EAAE,OAAO,YAAY,CAAC,OAAO,OAAO,CAAC;AAElE,SACE,qBAAC,aAAa,UAAb,EAAsB,OACpB,UAAA;AAAA,IAAA;AAAA,IACA,OAAO,aAAa,eACnB;AAAA,MACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,QAAQ,OAAO,MAAA;AAAA,UAEvB,UAAA,OAAO,IAAI,CAAC,8BACV,WAAA,EAAyB,OAAc,WAAW,MAAM,QAAQ,MAAM,EAAE,EAAA,GAAzD,MAAM,EAAsD,CAC7E;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,SAAS;AAAA,IAAA;AAAA,EACX,GACJ;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,aAA2D;AACrF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAW,GAAG,iCAAiC,SAAS,MAAM,QAAQ,SAAS,CAAC,EAAA,CAAG;AAAA,QACzF,oBAAC,QAAA,EAAM,UAAA,MAAM,QAAA,CAAQ;AAAA,QACrB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3C;AAAA,IAAA;AAAA,EAAA;AAGN;"}