@flanksource/clicky-ui 0.2.20 → 0.3.1

package/dist/overlay/modalStack.cjs

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
+const zIndex = require("./zIndex.cjs");
 const stack = [];
 const listeners = /* @__PURE__ */ new Set();
+const escapeStack = [];
+let escapeDocument = null;
 function emit() {
   for (const listener of listeners) listener();
 }
@@ -15,6 +18,30 @@ function subscribe(listener) {
 function getSnapshot() {
   return stack.join("\0");
 }
+function onEscapeKeyDown(event) {
+  if (event.defaultPrevented || event.key !== "Escape" || event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  const top = escapeStack[escapeStack.length - 1];
+  if (!top) return;
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+  top.onEscape();
+}
+function ensureEscapeListener() {
+  if (escapeDocument || typeof document === "undefined") return;
+  escapeDocument = document;
+  escapeDocument.addEventListener("keydown", onEscapeKeyDown);
+}
+function removeEscapeLayer(id) {
+  const index = escapeStack.findIndex((entry) => entry.id === id);
+  if (index !== -1) escapeStack.splice(index, 1);
+  if (escapeStack.length === 0 && escapeDocument) {
+    escapeDocument.removeEventListener("keydown", onEscapeKeyDown);
+    escapeDocument = null;
+  }
+}
 function useModalStack(open) {
   const id = react.useId();
   react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
@@ -29,7 +56,32 @@ function useModalStack(open) {
     };
   }, [open, id]);
   const depth = stack.indexOf(id);
-  return { isTop: depth === stack.length - 1, depth: depth === -1 ? 0 : depth };
+  return {
+    isTop: depth !== -1 && depth === stack.length - 1,
+    depth: depth === -1 ? 0 : depth
+  };
+}
+function useEscapeLayer(open, onEscape, enabled = true) {
+  const id = react.useId();
+  const onEscapeRef = react.useRef(onEscape);
+  onEscapeRef.current = onEscape;
+  react.useEffect(() => {
+    if (!open || !enabled) return;
+    ensureEscapeListener();
+    escapeStack.push({
+      id,
+      onEscape: () => onEscapeRef.current()
+    });
+    return () => removeEscapeLayer(id);
+  }, [enabled, id, open]);
+}
+function useFloatingZIndex() {
+  react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (stack.length === 0) return zIndex.zIndex.popover;
+  const topModalZ = zIndex.zIndex.modal + (stack.length - 1) * zIndex.zIndex.modalStep;
+  return topModalZ + zIndex.zIndex.popoverOverModalOffset;
 }
+exports.useEscapeLayer = useEscapeLayer;
+exports.useFloatingZIndex = useFloatingZIndex;
 exports.useModalStack = useModalStack;
 //# sourceMappingURL=modalStack.cjs.map

package/dist/overlay/modalStack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.cjs","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useSyncExternalStore } from \"react\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity; it only changes when an entry is pushed or\n// popped, so subscribers re-render exactly when their position could have moved.\nfunction getSnapshot() {\n  return stack.join(\"\u0000\");\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return { isTop: depth === stack.length - 1, depth: depth === -1 ? 0 : depth };\n}\n"],"names":["useId","useSyncExternalStore","useEffect"],"mappings":";;;AAMA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AAEtB,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAIA,SAAS,cAAc;AACrB,SAAO,MAAM,KAAK,IAAG;AACvB;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAKA,MAAAA,MAAA;AACXC,6BAAqB,WAAW,aAAa,WAAW;AAExDC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO,EAAE,OAAO,UAAU,MAAM,SAAS,GAAG,OAAO,UAAU,KAAK,IAAI,MAAA;AACxE;;"}
+{"version":3,"file":"modalStack.cjs","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useRef, useSyncExternalStore } from \"react\";\nimport { zIndex } from \"./zIndex\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\nconst escapeStack: Array<{ id: string; onEscape: () => void }> = [];\nlet escapeDocument: Document | null = null;\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity; it only changes when an entry is pushed or\n// popped, so subscribers re-render exactly when their position could have moved.\nfunction getSnapshot() {\n  return stack.join(\"\\u0000\");\n}\n\nfunction onEscapeKeyDown(event: KeyboardEvent) {\n  if (\n    event.defaultPrevented ||\n    event.key !== \"Escape\" ||\n    event.isComposing ||\n    (event as KeyboardEvent & { keyCode?: number }).keyCode === 229\n  ) {\n    return;\n  }\n\n  const top = escapeStack[escapeStack.length - 1];\n  if (!top) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n  top.onEscape();\n}\n\nfunction ensureEscapeListener() {\n  if (escapeDocument || typeof document === \"undefined\") return;\n  escapeDocument = document;\n  escapeDocument.addEventListener(\"keydown\", onEscapeKeyDown);\n}\n\nfunction removeEscapeLayer(id: string) {\n  const index = escapeStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) escapeStack.splice(index, 1);\n\n  if (escapeStack.length === 0 && escapeDocument) {\n    escapeDocument.removeEventListener(\"keydown\", onEscapeKeyDown);\n    escapeDocument = null;\n  }\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return {\n    isTop: depth !== -1 && depth === stack.length - 1,\n    depth: depth === -1 ? 0 : depth,\n  };\n}\n\n/**\n * Registers an Escape-closeable overlay while `open`. The topmost registered\n * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.\n */\nexport function useEscapeLayer(open: boolean, onEscape: () => void, enabled = true) {\n  const id = useId();\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  useEffect(() => {\n    if (!open || !enabled) return;\n\n    ensureEscapeListener();\n    escapeStack.push({\n      id,\n      onEscape: () => onEscapeRef.current(),\n    });\n\n    return () => removeEscapeLayer(id);\n  }, [enabled, id, open]);\n}\n\n/**\n * z-index a floating layer (dropdown / combobox / tooltip / popover) should use\n * so it renders above any open modal — and below the next nested modal — or at\n * the popover floor when no modal is open. Subscribes to the modal stack so the\n * value tracks modals opening and closing.\n */\nexport function useFloatingZIndex(): number {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n  if (stack.length === 0) return zIndex.popover;\n  const topModalZ = zIndex.modal + (stack.length - 1) * zIndex.modalStep;\n  return topModalZ + zIndex.popoverOverModalOffset;\n}\n"],"names":["useId","useSyncExternalStore","useEffect","useRef","zIndex"],"mappings":";;;;AAOA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AACtB,MAAM,cAA2D,CAAA;AACjE,IAAI,iBAAkC;AAEtC,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAIA,SAAS,cAAc;AACrB,SAAO,MAAM,KAAK,IAAQ;AAC5B;AAEA,SAAS,gBAAgB,OAAsB;AAC7C,MACE,MAAM,oBACN,MAAM,QAAQ,YACd,MAAM,eACL,MAA+C,YAAY,KAC5D;AACA;AAAA,EACF;AAEA,QAAM,MAAM,YAAY,YAAY,SAAS,CAAC;AAC9C,MAAI,CAAC,IAAK;AAEV,QAAM,eAAA;AACN,QAAM,gBAAA;AACN,QAAM,yBAAA;AACN,MAAI,SAAA;AACN;AAEA,SAAS,uBAAuB;AAC9B,MAAI,kBAAkB,OAAO,aAAa,YAAa;AACvD,mBAAiB;AACjB,iBAAe,iBAAiB,WAAW,eAAe;AAC5D;AAEA,SAAS,kBAAkB,IAAY;AACrC,QAAM,QAAQ,YAAY,UAAU,CAAC,UAAU,MAAM,OAAO,EAAE;AAC9D,MAAI,UAAU,GAAI,aAAY,OAAO,OAAO,CAAC;AAE7C,MAAI,YAAY,WAAW,KAAK,gBAAgB;AAC9C,mBAAe,oBAAoB,WAAW,eAAe;AAC7D,qBAAiB;AAAA,EACnB;AACF;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAKA,MAAAA,MAAA;AACXC,6BAAqB,WAAW,aAAa,WAAW;AAExDC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO;AAAA,IACL,OAAO,UAAU,MAAM,UAAU,MAAM,SAAS;AAAA,IAChD,OAAO,UAAU,KAAK,IAAI;AAAA,EAAA;AAE9B;AAMO,SAAS,eAAe,MAAe,UAAsB,UAAU,MAAM;AAClF,QAAM,KAAKF,MAAAA,MAAA;AACX,QAAM,cAAcG,MAAAA,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtBD,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,QAAS;AAEvB,yBAAA;AACA,gBAAY,KAAK;AAAA,MACf;AAAA,MACA,UAAU,MAAM,YAAY,QAAA;AAAA,IAAQ,CACrC;AAED,WAAO,MAAM,kBAAkB,EAAE;AAAA,EACnC,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC;AACxB;AAQO,SAAS,oBAA4B;AAC1CD,6BAAqB,WAAW,aAAa,WAAW;AACxD,MAAI,MAAM,WAAW,EAAG,QAAOG,OAAAA,OAAO;AACtC,QAAM,YAAYA,OAAAA,OAAO,SAAS,MAAM,SAAS,KAAKA,OAAAA,OAAO;AAC7D,SAAO,YAAYA,OAAAA,OAAO;AAC5B;;;;"}

package/dist/overlay/modalStack.d.ts

@@ -10,4 +10,16 @@ export type ModalStackPosition = {
  * modal closes on Escape.
  */
 export declare function useModalStack(open: boolean): ModalStackPosition;
+/**
+ * Registers an Escape-closeable overlay while `open`. The topmost registered
+ * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.
+ */
+export declare function useEscapeLayer(open: boolean, onEscape: () => void, enabled?: boolean): void;
+/**
+ * z-index a floating layer (dropdown / combobox / tooltip / popover) should use
+ * so it renders above any open modal — and below the next nested modal — or at
+ * the popover floor when no modal is open. Subscribes to the modal stack so the
+ * value tracks modals opening and closing.
+ */
+export declare function useFloatingZIndex(): number;
 //# sourceMappingURL=modalStack.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"modalStack.d.ts","sourceRoot":"","sources":["../../src/overlay/modalStack.ts"],"names":[],"mappings":"AA0BA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oFAAoF;IACpF,KAAK,EAAE,OAAO,CAAC;IACf,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,CAiB/D"}
+{"version":3,"file":"modalStack.d.ts","sourceRoot":"","sources":["../../src/overlay/modalStack.ts"],"names":[],"mappings":"AAgEA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oFAAoF;IACpF,KAAK,EAAE,OAAO,CAAC;IACf,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,kBAAkB,CAoB/D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,UAAO,QAgBjF;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAK1C"}

package/dist/overlay/modalStack.js

@@ -1,6 +1,9 @@
-import { useId, useSyncExternalStore, useEffect } from "react";
+import { useId, useSyncExternalStore, useEffect, useRef } from "react";
+import { zIndex } from "./zIndex.js";
 const stack = [];
 const listeners = /* @__PURE__ */ new Set();
+const escapeStack = [];
+let escapeDocument = null;
 function emit() {
   for (const listener of listeners) listener();
 }
@@ -13,6 +16,30 @@ function subscribe(listener) {
 function getSnapshot() {
   return stack.join("\0");
 }
+function onEscapeKeyDown(event) {
+  if (event.defaultPrevented || event.key !== "Escape" || event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  const top = escapeStack[escapeStack.length - 1];
+  if (!top) return;
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+  top.onEscape();
+}
+function ensureEscapeListener() {
+  if (escapeDocument || typeof document === "undefined") return;
+  escapeDocument = document;
+  escapeDocument.addEventListener("keydown", onEscapeKeyDown);
+}
+function removeEscapeLayer(id) {
+  const index = escapeStack.findIndex((entry) => entry.id === id);
+  if (index !== -1) escapeStack.splice(index, 1);
+  if (escapeStack.length === 0 && escapeDocument) {
+    escapeDocument.removeEventListener("keydown", onEscapeKeyDown);
+    escapeDocument = null;
+  }
+}
 function useModalStack(open) {
   const id = useId();
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
@@ -27,9 +54,34 @@ function useModalStack(open) {
     };
   }, [open, id]);
   const depth = stack.indexOf(id);
-  return { isTop: depth === stack.length - 1, depth: depth === -1 ? 0 : depth };
+  return {
+    isTop: depth !== -1 && depth === stack.length - 1,
+    depth: depth === -1 ? 0 : depth
+  };
+}
+function useEscapeLayer(open, onEscape, enabled = true) {
+  const id = useId();
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+  useEffect(() => {
+    if (!open || !enabled) return;
+    ensureEscapeListener();
+    escapeStack.push({
+      id,
+      onEscape: () => onEscapeRef.current()
+    });
+    return () => removeEscapeLayer(id);
+  }, [enabled, id, open]);
+}
+function useFloatingZIndex() {
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (stack.length === 0) return zIndex.popover;
+  const topModalZ = zIndex.modal + (stack.length - 1) * zIndex.modalStep;
+  return topModalZ + zIndex.popoverOverModalOffset;
 }
 export {
+  useEscapeLayer,
+  useFloatingZIndex,
   useModalStack
 };
 //# sourceMappingURL=modalStack.js.map

package/dist/overlay/modalStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalStack.js","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useSyncExternalStore } from \"react\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity; it only changes when an entry is pushed or\n// popped, so subscribers re-render exactly when their position could have moved.\nfunction getSnapshot() {\n  return stack.join(\"\u0000\");\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return { isTop: depth === stack.length - 1, depth: depth === -1 ? 0 : depth };\n}\n"],"names":[],"mappings":";AAMA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AAEtB,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAIA,SAAS,cAAc;AACrB,SAAO,MAAM,KAAK,IAAG;AACvB;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAK,MAAA;AACX,uBAAqB,WAAW,aAAa,WAAW;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO,EAAE,OAAO,UAAU,MAAM,SAAS,GAAG,OAAO,UAAU,KAAK,IAAI,MAAA;AACxE;"}
+{"version":3,"file":"modalStack.js","sources":["../../src/overlay/modalStack.ts"],"sourcesContent":["import { useEffect, useId, useRef, useSyncExternalStore } from \"react\";\nimport { zIndex } from \"./zIndex\";\n\n// A process-wide stack of the currently open modals, topmost last. Modals mount\n// independently (no shared provider), so the stack lives at module scope and is\n// shared through useSyncExternalStore. It lets nested modals cooperate: only the\n// topmost reacts to Escape, and each renders above the one it opened over.\nconst stack: string[] = [];\nconst listeners = new Set<() => void>();\nconst escapeStack: Array<{ id: string; onEscape: () => void }> = [];\nlet escapeDocument: Document | null = null;\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n// The snapshot is the stack identity; it only changes when an entry is pushed or\n// popped, so subscribers re-render exactly when their position could have moved.\nfunction getSnapshot() {\n  return stack.join(\"\\u0000\");\n}\n\nfunction onEscapeKeyDown(event: KeyboardEvent) {\n  if (\n    event.defaultPrevented ||\n    event.key !== \"Escape\" ||\n    event.isComposing ||\n    (event as KeyboardEvent & { keyCode?: number }).keyCode === 229\n  ) {\n    return;\n  }\n\n  const top = escapeStack[escapeStack.length - 1];\n  if (!top) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  event.stopImmediatePropagation();\n  top.onEscape();\n}\n\nfunction ensureEscapeListener() {\n  if (escapeDocument || typeof document === \"undefined\") return;\n  escapeDocument = document;\n  escapeDocument.addEventListener(\"keydown\", onEscapeKeyDown);\n}\n\nfunction removeEscapeLayer(id: string) {\n  const index = escapeStack.findIndex((entry) => entry.id === id);\n  if (index !== -1) escapeStack.splice(index, 1);\n\n  if (escapeStack.length === 0 && escapeDocument) {\n    escapeDocument.removeEventListener(\"keydown\", onEscapeKeyDown);\n    escapeDocument = null;\n  }\n}\n\nexport type ModalStackPosition = {\n  /** Whether this modal is the topmost open one and should own global affordances. */\n  isTop: boolean;\n  /** Zero-based depth in the stack; drives the stacking order of nested modals. */\n  depth: number;\n};\n\n/**\n * Registers a modal in the global stack while `open`, returning its live\n * position. Used so a nested modal sits above its opener and only the topmost\n * modal closes on Escape.\n */\nexport function useModalStack(open: boolean): ModalStackPosition {\n  const id = useId();\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  useEffect(() => {\n    if (!open) return;\n    stack.push(id);\n    emit();\n    return () => {\n      const index = stack.indexOf(id);\n      if (index !== -1) stack.splice(index, 1);\n      emit();\n    };\n  }, [open, id]);\n\n  const depth = stack.indexOf(id);\n  return {\n    isTop: depth !== -1 && depth === stack.length - 1,\n    depth: depth === -1 ? 0 : depth,\n  };\n}\n\n/**\n * Registers an Escape-closeable overlay while `open`. The topmost registered\n * layer owns Escape, so a keypress dismisses one dialog/menu layer at a time.\n */\nexport function useEscapeLayer(open: boolean, onEscape: () => void, enabled = true) {\n  const id = useId();\n  const onEscapeRef = useRef(onEscape);\n  onEscapeRef.current = onEscape;\n\n  useEffect(() => {\n    if (!open || !enabled) return;\n\n    ensureEscapeListener();\n    escapeStack.push({\n      id,\n      onEscape: () => onEscapeRef.current(),\n    });\n\n    return () => removeEscapeLayer(id);\n  }, [enabled, id, open]);\n}\n\n/**\n * z-index a floating layer (dropdown / combobox / tooltip / popover) should use\n * so it renders above any open modal — and below the next nested modal — or at\n * the popover floor when no modal is open. Subscribes to the modal stack so the\n * value tracks modals opening and closing.\n */\nexport function useFloatingZIndex(): number {\n  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n  if (stack.length === 0) return zIndex.popover;\n  const topModalZ = zIndex.modal + (stack.length - 1) * zIndex.modalStep;\n  return topModalZ + zIndex.popoverOverModalOffset;\n}\n"],"names":[],"mappings":";;AAOA,MAAM,QAAkB,CAAA;AACxB,MAAM,gCAAgB,IAAA;AACtB,MAAM,cAA2D,CAAA;AACjE,IAAI,iBAAkC;AAEtC,SAAS,OAAO;AACd,aAAW,YAAY,UAAW,UAAA;AACpC;AAEA,SAAS,UAAU,UAAsB;AACvC,YAAU,IAAI,QAAQ;AACtB,SAAO,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAIA,SAAS,cAAc;AACrB,SAAO,MAAM,KAAK,IAAQ;AAC5B;AAEA,SAAS,gBAAgB,OAAsB;AAC7C,MACE,MAAM,oBACN,MAAM,QAAQ,YACd,MAAM,eACL,MAA+C,YAAY,KAC5D;AACA;AAAA,EACF;AAEA,QAAM,MAAM,YAAY,YAAY,SAAS,CAAC;AAC9C,MAAI,CAAC,IAAK;AAEV,QAAM,eAAA;AACN,QAAM,gBAAA;AACN,QAAM,yBAAA;AACN,MAAI,SAAA;AACN;AAEA,SAAS,uBAAuB;AAC9B,MAAI,kBAAkB,OAAO,aAAa,YAAa;AACvD,mBAAiB;AACjB,iBAAe,iBAAiB,WAAW,eAAe;AAC5D;AAEA,SAAS,kBAAkB,IAAY;AACrC,QAAM,QAAQ,YAAY,UAAU,CAAC,UAAU,MAAM,OAAO,EAAE;AAC9D,MAAI,UAAU,GAAI,aAAY,OAAO,OAAO,CAAC;AAE7C,MAAI,YAAY,WAAW,KAAK,gBAAgB;AAC9C,mBAAe,oBAAoB,WAAW,eAAe;AAC7D,qBAAiB;AAAA,EACnB;AACF;AAcO,SAAS,cAAc,MAAmC;AAC/D,QAAM,KAAK,MAAA;AACX,uBAAqB,WAAW,aAAa,WAAW;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,EAAE;AACb,SAAA;AACA,WAAO,MAAM;AACX,YAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,UAAI,UAAU,GAAI,OAAM,OAAO,OAAO,CAAC;AACvC,WAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,QAAM,QAAQ,MAAM,QAAQ,EAAE;AAC9B,SAAO;AAAA,IACL,OAAO,UAAU,MAAM,UAAU,MAAM,SAAS;AAAA,IAChD,OAAO,UAAU,KAAK,IAAI;AAAA,EAAA;AAE9B;AAMO,SAAS,eAAe,MAAe,UAAsB,UAAU,MAAM;AAClF,QAAM,KAAK,MAAA;AACX,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtB,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,QAAS;AAEvB,yBAAA;AACA,gBAAY,KAAK;AAAA,MACf;AAAA,MACA,UAAU,MAAM,YAAY,QAAA;AAAA,IAAQ,CACrC;AAED,WAAO,MAAM,kBAAkB,EAAE;AAAA,EACnC,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC;AACxB;AAQO,SAAS,oBAA4B;AAC1C,uBAAqB,WAAW,aAAa,WAAW;AACxD,MAAI,MAAM,WAAW,EAAG,QAAO,OAAO;AACtC,QAAM,YAAY,OAAO,SAAS,MAAM,SAAS,KAAK,OAAO;AAC7D,SAAO,YAAY,OAAO;AAC5B;"}

package/dist/overlay/zIndex.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const zIndex = {
+  /** Persistent chat launcher. */
+  chatFab: 60,
+  /** Floating chat windows; `ChatWindowManager` increments from this base. */
+  chatWindow: 61,
+  /** Floating transient content when NO modal is open (above app chrome). */
+  popover: 9e3,
+  /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */
+  modal: 1e4,
+  /** Per-level step between stacked modals. */
+  modalStep: 10,
+  /** How far above the top modal floating content sits (below the next nest). */
+  popoverOverModalOffset: 5,
+  /** Toasts / notifications — always the topmost layer. */
+  toast: 1e5
+};
+exports.zIndex = zIndex;
+//# sourceMappingURL=zIndex.cjs.map

package/dist/overlay/zIndex.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.cjs","sources":["../../src/overlay/zIndex.ts"],"sourcesContent":["/**\n * Centralized z-index scale for clicky-ui overlays — the single source of truth\n * so stacking conflicts (e.g. a dropdown opened inside a modal rendering behind\n * it) cannot recur.\n *\n * These are applied as inline `style={{ zIndex }}`, never as arbitrary `z-[N]`\n * Tailwind classes: a consumer's Tailwind build only generates the arbitrary\n * classes it can scan from clicky-ui's published dist, so a freshly chosen\n * `z-[N]` may silently emit no rule. Inline styles are immune to that.\n *\n * Floating, transient content (dropdown / combobox / menu / tooltip / popover)\n * must clear whatever modal is open, so its z-index is computed relative to the\n * active modal via `useFloatingZIndex` (see ./modalStack) rather than taken from\n * a constant here.\n *\n * Layers NOT listed here are intentionally local: they live inside their own\n * stacking context and never participate in the global ordering —\n * `Timeline` (`z-[1]`), `RangeSlider` thumbs (20/30), and `Modal`'s\n * `ConfirmClosePrompt` (`z-10`, relative to the modal panel).\n */\nexport const zIndex = {\n  /** In-flow raised affordances (sticky bits). */\n  raised: 30,\n  /** Persistent chat launcher. */\n  chatFab: 60,\n  /** Floating chat windows; `ChatWindowManager` increments from this base. */\n  chatWindow: 61,\n  /** Floating transient content when NO modal is open (above app chrome). */\n  popover: 9000,\n  /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */\n  modal: 10000,\n  /** Per-level step between stacked modals. */\n  modalStep: 10,\n  /** How far above the top modal floating content sits (below the next nest). */\n  popoverOverModalOffset: 5,\n  /** Toasts / notifications — always the topmost layer. */\n  toast: 100000,\n} as const;\n"],"names":[],"mappings":";;AAoBO,MAAM,SAAS;AAAA;AAAA,EAIpB,SAAS;AAAA;AAAA,EAET,YAAY;AAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,EAET,OAAO;AAAA;AAAA,EAEP,WAAW;AAAA;AAAA,EAEX,wBAAwB;AAAA;AAAA,EAExB,OAAO;AACT;;"}

package/dist/overlay/zIndex.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Centralized z-index scale for clicky-ui overlays — the single source of truth
+ * so stacking conflicts (e.g. a dropdown opened inside a modal rendering behind
+ * it) cannot recur.
+ *
+ * These are applied as inline `style={{ zIndex }}`, never as arbitrary `z-[N]`
+ * Tailwind classes: a consumer's Tailwind build only generates the arbitrary
+ * classes it can scan from clicky-ui's published dist, so a freshly chosen
+ * `z-[N]` may silently emit no rule. Inline styles are immune to that.
+ *
+ * Floating, transient content (dropdown / combobox / menu / tooltip / popover)
+ * must clear whatever modal is open, so its z-index is computed relative to the
+ * active modal via `useFloatingZIndex` (see ./modalStack) rather than taken from
+ * a constant here.
+ *
+ * Layers NOT listed here are intentionally local: they live inside their own
+ * stacking context and never participate in the global ordering —
+ * `Timeline` (`z-[1]`), `RangeSlider` thumbs (20/30), and `Modal`'s
+ * `ConfirmClosePrompt` (`z-10`, relative to the modal panel).
+ */
+export declare const zIndex: {
+    /** In-flow raised affordances (sticky bits). */
+    readonly raised: 30;
+    /** Persistent chat launcher. */
+    readonly chatFab: 60;
+    /** Floating chat windows; `ChatWindowManager` increments from this base. */
+    readonly chatWindow: 61;
+    /** Floating transient content when NO modal is open (above app chrome). */
+    readonly popover: 9000;
+    /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */
+    readonly modal: 10000;
+    /** Per-level step between stacked modals. */
+    readonly modalStep: 10;
+    /** How far above the top modal floating content sits (below the next nest). */
+    readonly popoverOverModalOffset: 5;
+    /** Toasts / notifications — always the topmost layer. */
+    readonly toast: 100000;
+};
+//# sourceMappingURL=zIndex.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.d.ts","sourceRoot":"","sources":["../../src/overlay/zIndex.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;IACjB,gDAAgD;;IAEhD,gCAAgC;;IAEhC,4EAA4E;;IAE5E,2EAA2E;;IAE3E,wEAAwE;;IAExE,6CAA6C;;IAE7C,+EAA+E;;IAE/E,yDAAyD;;CAEjD,CAAC"}

package/dist/overlay/zIndex.js

@@ -0,0 +1,20 @@
+const zIndex = {
+  /** Persistent chat launcher. */
+  chatFab: 60,
+  /** Floating chat windows; `ChatWindowManager` increments from this base. */
+  chatWindow: 61,
+  /** Floating transient content when NO modal is open (above app chrome). */
+  popover: 9e3,
+  /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */
+  modal: 1e4,
+  /** Per-level step between stacked modals. */
+  modalStep: 10,
+  /** How far above the top modal floating content sits (below the next nest). */
+  popoverOverModalOffset: 5,
+  /** Toasts / notifications — always the topmost layer. */
+  toast: 1e5
+};
+export {
+  zIndex
+};
+//# sourceMappingURL=zIndex.js.map

package/dist/overlay/zIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zIndex.js","sources":["../../src/overlay/zIndex.ts"],"sourcesContent":["/**\n * Centralized z-index scale for clicky-ui overlays — the single source of truth\n * so stacking conflicts (e.g. a dropdown opened inside a modal rendering behind\n * it) cannot recur.\n *\n * These are applied as inline `style={{ zIndex }}`, never as arbitrary `z-[N]`\n * Tailwind classes: a consumer's Tailwind build only generates the arbitrary\n * classes it can scan from clicky-ui's published dist, so a freshly chosen\n * `z-[N]` may silently emit no rule. Inline styles are immune to that.\n *\n * Floating, transient content (dropdown / combobox / menu / tooltip / popover)\n * must clear whatever modal is open, so its z-index is computed relative to the\n * active modal via `useFloatingZIndex` (see ./modalStack) rather than taken from\n * a constant here.\n *\n * Layers NOT listed here are intentionally local: they live inside their own\n * stacking context and never participate in the global ordering —\n * `Timeline` (`z-[1]`), `RangeSlider` thumbs (20/30), and `Modal`'s\n * `ConfirmClosePrompt` (`z-10`, relative to the modal panel).\n */\nexport const zIndex = {\n  /** In-flow raised affordances (sticky bits). */\n  raised: 30,\n  /** Persistent chat launcher. */\n  chatFab: 60,\n  /** Floating chat windows; `ChatWindowManager` increments from this base. */\n  chatWindow: 61,\n  /** Floating transient content when NO modal is open (above app chrome). */\n  popover: 9000,\n  /** Modal/dialog at depth 0; nested modals add `modalStep` per level. */\n  modal: 10000,\n  /** Per-level step between stacked modals. */\n  modalStep: 10,\n  /** How far above the top modal floating content sits (below the next nest). */\n  popoverOverModalOffset: 5,\n  /** Toasts / notifications — always the topmost layer. */\n  toast: 100000,\n} as const;\n"],"names":[],"mappings":"AAoBO,MAAM,SAAS;AAAA;AAAA,EAIpB,SAAS;AAAA;AAAA,EAET,YAAY;AAAA;AAAA,EAEZ,SAAS;AAAA;AAAA,EAET,OAAO;AAAA;AAAA,EAEP,WAAW;AAAA;AAAA,EAEX,wBAAwB;AAAA;AAAA,EAExB,OAAO;AACT;"}

package/dist/rpc/AcceptPicker.cjs

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const react$1 = require("@floating-ui/react");
 const button = require("../components/button.cjs");
 const Icon = require("../data/Icon.cjs");
 const utils = require("../lib/utils.cjs");
+const modalStack = require("../overlay/modalStack.cjs");
 const acceptOptions = require("./accept-options.cjs");
 const UiEllipsis = require("../icons/components/UiEllipsis.cjs");
 const UiCheck = require("../icons/components/UiCheck.cjs");
@@ -23,52 +25,52 @@ function AcceptPicker({
   className
 }) {
   var _a;
-  const rootRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const pad = size === "sm" ? "px-2 py-0.5" : "px-2.5 py-1";
   const activeLabel = ((_a = options.find((opt) => opt.value === value)) == null ? void 0 : _a.label) ?? value;
-  react.useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (event) => {
-      var _a2;
-      if (!((_a2 = rootRef.current) == null ? void 0 : _a2.contains(event.target))) {
-        setOpen(false);
-      }
-    };
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn("relative flex", className), children: [
+  const floatingZ = modalStack.useFloatingZIndex();
+  const { refs, floatingStyles, context } = react$1.useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-end",
+    whileElementsMounted: react$1.autoUpdate,
+    middleware: [react$1.offset(6), react$1.flip({ padding: 8 }), react$1.shift({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = react$1.useInteractions([
+    react$1.useClick(context),
+    react$1.useDismiss(context, { escapeKey: false }),
+    react$1.useRole(context, { role: "menu" })
+  ]);
+  modalStack.useEscapeLayer(open, () => {
+    setOpen(false);
+    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       button.Button,
       {
+        ref: refs.setReference,
         type: "button",
         variant: "outline",
         size: "sm",
         "aria-label": "Open format menu",
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
         className: utils.cn("h-auto gap-1.5", pad),
-        onClick: () => setOpen((current) => !current),
+        ...getReferenceProps(),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: activeLabel }),
           /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiEllipsis.UiEllipsis, className: "text-muted-foreground" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
+    open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        ref: refs.setFloating,
         role: "menu",
         "aria-label": "Format and preview options",
-        className: "absolute right-0 top-[calc(100%+0.375rem)] z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+        style: { ...floatingStyles, zIndex: floatingZ },
+        className: "min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+        ...getFloatingProps(),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(MenuSectionLabel, { children: "Format" }),
           options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -101,7 +103,7 @@ function AcceptPicker({
           ] })
         ]
       }
-    )
+    ) }) })
   ] });
 }
 function MenuSectionLabel({ children }) {

package/dist/rpc/AcceptPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AcceptPicker.cjs","sources":["../../src/rpc/AcceptPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { Icon } from \"../data/Icon\";\nimport { UiEllipsis, UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  ACCEPT_OPTIONS,\n  type AcceptOption,\n  type OperationPreviewMode,\n} from \"./accept-options\";\n\nexport type AcceptPickerProps = {\n  value: string;\n  onChange: (value: string) => void;\n  size?: \"sm\" | \"md\";\n  options?: readonly AcceptOption[];\n  previewMode?: OperationPreviewMode;\n  onPreviewModeChange?: (mode: OperationPreviewMode) => void;\n  className?: string;\n};\n\nconst PREVIEW_OPTIONS: Array<{ value: OperationPreviewMode; label: string }> = [\n  { value: \"curl\", label: \"Show cURL preview\" },\n  { value: \"cli\", label: \"Show CLI preview\" },\n  { value: \"hidden\", label: \"Hide preview\" },\n];\n\nexport function AcceptPicker({\n  value,\n  onChange,\n  size = \"md\",\n  options = ACCEPT_OPTIONS,\n  previewMode = \"hidden\",\n  onPreviewModeChange,\n  className,\n}: AcceptPickerProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  const pad = size === \"sm\" ? \"px-2 py-0.5\" : \"px-2.5 py-1\";\n  const activeLabel = options.find((opt) => opt.value === value)?.label ?? value;\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!rootRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  return (\n    <div ref={rootRef} className={cn(\"relative flex\", className)}>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        aria-label=\"Open format menu\"\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        className={cn(\"h-auto gap-1.5\", pad)}\n        onClick={() => setOpen((current) => !current)}\n      >\n        <span className=\"text-xs font-medium\">{activeLabel}</span>\n        <Icon icon={UiEllipsis} className=\"text-muted-foreground\" />\n      </Button>\n      {open && (\n        <div\n          role=\"menu\"\n          aria-label=\"Format and preview options\"\n          className=\"absolute right-0 top-[calc(100%+0.375rem)] z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\"\n        >\n          <MenuSectionLabel>Format</MenuSectionLabel>\n          {options.map((opt) => (\n            <MenuRadioItem\n              key={opt.value}\n              label={opt.label}\n              active={opt.value === value}\n              onSelect={() => {\n                onChange(opt.value);\n                setOpen(false);\n              }}\n            />\n          ))}\n          {onPreviewModeChange && (\n            <>\n              <div role=\"separator\" className=\"my-1 h-px bg-border\" />\n              <MenuSectionLabel>Preview</MenuSectionLabel>\n              {PREVIEW_OPTIONS.map((option) => (\n                <MenuRadioItem\n                  key={option.value}\n                  label={option.label}\n                  active={option.value === previewMode}\n                  onSelect={() => {\n                    onPreviewModeChange(option.value);\n                    setOpen(false);\n                  }}\n                />\n              ))}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction MenuSectionLabel({ children }: { children: string }) {\n  return (\n    <div className=\"px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground\">\n      {children}\n    </div>\n  );\n}\n\nfunction MenuRadioItem({\n  label,\n  active,\n  onSelect,\n}: {\n  label: string;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitemradio\"\n      aria-checked={active}\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n        \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n        active && \"font-medium\",\n      )}\n      onClick={onSelect}\n    >\n      <span className=\"min-w-0 flex-1\">{label}</span>\n      {active ? <Icon icon={UiCheck} className=\"shrink-0\" /> : null}\n    </button>\n  );\n}\n"],"names":["ACCEPT_OPTIONS","useRef","useState","useEffect","_a","jsxs","cn","Button","jsx","Icon","UiEllipsis","Fragment","UiCheck"],"mappings":"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"}
+{"version":3,"file":"AcceptPicker.cjs","sources":["../../src/rpc/AcceptPicker.tsx"],"sourcesContent":["import { useState, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"../components/button\";\nimport { Icon } from \"../data/Icon\";\nimport { UiEllipsis, UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\nimport {\n  ACCEPT_OPTIONS,\n  type AcceptOption,\n  type OperationPreviewMode,\n} from \"./accept-options\";\n\nexport type AcceptPickerProps = {\n  value: string;\n  onChange: (value: string) => void;\n  size?: \"sm\" | \"md\";\n  options?: readonly AcceptOption[];\n  previewMode?: OperationPreviewMode;\n  onPreviewModeChange?: (mode: OperationPreviewMode) => void;\n  className?: string;\n};\n\nconst PREVIEW_OPTIONS: Array<{ value: OperationPreviewMode; label: string }> = [\n  { value: \"curl\", label: \"Show cURL preview\" },\n  { value: \"cli\", label: \"Show CLI preview\" },\n  { value: \"hidden\", label: \"Hide preview\" },\n];\n\nexport function AcceptPicker({\n  value,\n  onChange,\n  size = \"md\",\n  options = ACCEPT_OPTIONS,\n  previewMode = \"hidden\",\n  onPreviewModeChange,\n  className,\n}: AcceptPickerProps) {\n  const [open, setOpen] = useState(false);\n  const pad = size === \"sm\" ? \"px-2 py-0.5\" : \"px-2.5 py-1\";\n  const activeLabel = options.find((opt) => opt.value === value)?.label ?? value;\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-end\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  return (\n    <div className={cn(\"flex\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        aria-label=\"Open format menu\"\n        className={cn(\"h-auto gap-1.5\", pad)}\n        {...getReferenceProps()}\n      >\n        <span className=\"text-xs font-medium\">{activeLabel}</span>\n        <Icon icon={UiEllipsis} className=\"text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label=\"Format and preview options\"\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className=\"min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\"\n              {...getFloatingProps()}\n            >\n          <MenuSectionLabel>Format</MenuSectionLabel>\n          {options.map((opt) => (\n            <MenuRadioItem\n              key={opt.value}\n              label={opt.label}\n              active={opt.value === value}\n              onSelect={() => {\n                onChange(opt.value);\n                setOpen(false);\n              }}\n            />\n          ))}\n          {onPreviewModeChange && (\n            <>\n              <div role=\"separator\" className=\"my-1 h-px bg-border\" />\n              <MenuSectionLabel>Preview</MenuSectionLabel>\n              {PREVIEW_OPTIONS.map((option) => (\n                <MenuRadioItem\n                  key={option.value}\n                  label={option.label}\n                  active={option.value === previewMode}\n                  onSelect={() => {\n                    onPreviewModeChange(option.value);\n                    setOpen(false);\n                  }}\n                />\n              ))}\n            </>\n          )}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n\nfunction MenuSectionLabel({ children }: { children: string }) {\n  return (\n    <div className=\"px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground\">\n      {children}\n    </div>\n  );\n}\n\nfunction MenuRadioItem({\n  label,\n  active,\n  onSelect,\n}: {\n  label: string;\n  active: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitemradio\"\n      aria-checked={active}\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n        \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n        active && \"font-medium\",\n      )}\n      onClick={onSelect}\n    >\n      <span className=\"min-w-0 flex-1\">{label}</span>\n      {active ? <Icon icon={UiCheck} className=\"shrink-0\" /> : null}\n    </button>\n  );\n}\n"],"names":["ACCEPT_OPTIONS","useState","useFloatingZIndex","useFloating","autoUpdate","offset","flip","shift","useInteractions","useClick","useDismiss","useRole","useEscapeLayer","cn","jsxs","Button","jsx","Icon","UiEllipsis","FloatingPortal","FloatingFocusManager","Fragment","UiCheck"],"mappings":"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"}

package/dist/rpc/AcceptPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AcceptPicker.d.ts","sourceRoot":"","sources":["../../src/rpc/AcceptPicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,oBAAoB,EAC1B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,IAAW,EACX,OAAwB,EACxB,WAAsB,EACtB,mBAAmB,EACnB,SAAS,GACV,EAAE,iBAAiB,2CA8EnB"}
+{"version":3,"file":"AcceptPicker.d.ts","sourceRoot":"","sources":["../../src/rpc/AcceptPicker.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,oBAAoB,EAC1B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAClC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,IAAW,EACX,OAAwB,EACxB,WAAsB,EACtB,mBAAmB,EACnB,SAAS,GACV,EAAE,iBAAiB,2CAqFnB"}

package/dist/rpc/AcceptPicker.js

@@ -1,8 +1,10 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
+import { useState } from "react";
+import { useFloating, autoUpdate, offset, flip, shift, useInteractions, useClick, useDismiss, useRole, FloatingPortal, FloatingFocusManager } from "@floating-ui/react";
 import { Button } from "../components/button.js";
 import { Icon } from "../data/Icon.js";
 import { cn } from "../lib/utils.js";
+import { useFloatingZIndex, useEscapeLayer } from "../overlay/modalStack.js";
 import { ACCEPT_OPTIONS } from "./accept-options.js";
 import { UiEllipsis } from "../icons/components/UiEllipsis.js";
 import { UiCheck } from "../icons/components/UiCheck.js";
@@ -21,52 +23,52 @@ function AcceptPicker({
   className
 }) {
   var _a;
-  const rootRef = useRef(null);
   const [open, setOpen] = useState(false);
   const pad = size === "sm" ? "px-2 py-0.5" : "px-2.5 py-1";
   const activeLabel = ((_a = options.find((opt) => opt.value === value)) == null ? void 0 : _a.label) ?? value;
-  useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (event) => {
-      var _a2;
-      if (!((_a2 = rootRef.current) == null ? void 0 : _a2.contains(event.target))) {
-        setOpen(false);
-      }
-    };
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative flex", className), children: [
+  const floatingZ = useFloatingZIndex();
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-end",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClick(context),
+    useDismiss(context, { escapeKey: false }),
+    useRole(context, { role: "menu" })
+  ]);
+  useEscapeLayer(open, () => {
+    setOpen(false);
+    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex", className), children: [
     /* @__PURE__ */ jsxs(
       Button,
       {
+        ref: refs.setReference,
         type: "button",
         variant: "outline",
         size: "sm",
         "aria-label": "Open format menu",
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
         className: cn("h-auto gap-1.5", pad),
-        onClick: () => setOpen((current) => !current),
+        ...getReferenceProps(),
         children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: activeLabel }),
           /* @__PURE__ */ jsx(Icon, { icon: UiEllipsis, className: "text-muted-foreground" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: refs.setFloating,
         role: "menu",
         "aria-label": "Format and preview options",
-        className: "absolute right-0 top-[calc(100%+0.375rem)] z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+        style: { ...floatingStyles, zIndex: floatingZ },
+        className: "min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+        ...getFloatingProps(),
         children: [
           /* @__PURE__ */ jsx(MenuSectionLabel, { children: "Format" }),
           options.map((opt) => /* @__PURE__ */ jsx(
@@ -99,7 +101,7 @@ function AcceptPicker({
           ] })
         ]
       }
-    )
+    ) }) })
   ] });
 }
 function MenuSectionLabel({ children }) {