@floegence/floe-webapp-core 0.35.49 → 0.35.51

package/dist/components/file-browser/FileContextMenu.d.ts

@@ -9,6 +9,7 @@ export type BuiltinContextMenuAction = Exclude<ContextMenuActionType, 'custom'>;
  * - Dynamic function: decide which action types to hide based on the target items.
  */
 export type HideItemsValue = BuiltinContextMenuAction[] | ((targetItems: FileItem[]) => BuiltinContextMenuAction[]);
+type ContextMenuDismissWindow = Pick<Window, 'addEventListener' | 'removeEventListener'>;
 export interface FileContextMenuProps {
     /** Custom menu items to add (will be merged with defaults) */
     customItems?: ContextMenuItem[];
@@ -30,7 +31,13 @@ export interface FileContextMenuProps {
 }
 export declare function createDefaultContextMenuItems(callbacks?: ContextMenuCallbacks): ContextMenuItem[];
 export declare function dispatchContextMenuAction(item: ContextMenuItem, items: FileItem[], callbacks?: ContextMenuCallbacks, event?: ContextMenuEvent): void;
+export declare function installContextMenuDismissListeners(options: {
+    ownerWindow: ContextMenuDismissWindow;
+    contextMenuId: string;
+    onDismiss: () => void;
+}): () => void;
 /**
  * Context menu for file browser items
  */
 export declare function FileContextMenu(props: FileContextMenuProps): import("solid-js").JSX.Element;
+export {};

package/dist/components/file-browser/FileContextMenu.js

@@ -1,44 +1,44 @@
-import { createComponent as c, Portal as z, setAttribute as g, insert as y, effect as w, className as R, setStyleProperty as _, template as h, Dynamic as J, memo as V, use as E, delegateEvents as Q } from "solid-js/web";
-import { createSignal as B, createEffect as q, onCleanup as O, Show as $, For as W } from "solid-js";
+import { createComponent as c, Portal as W, setAttribute as x, insert as C, effect as b, className as R, setStyleProperty as P, template as p, Dynamic as J, memo as V, use as L, delegateEvents as Q } from "solid-js/web";
+import { createSignal as B, createEffect as z, onCleanup as Z, Show as $, For as O } from "solid-js";
 import { cn as T } from "../../utils/cn.js";
 import { deferAfterPaint as X } from "../../utils/defer.js";
 import { ChevronRight as Y } from "../icons/index.js";
-import { focusMenuItem as P, moveMenuFocus as Z, calculateSubmenuPosition as ee } from "../ui/menuUtils.js";
+import { focusMenuItem as _, moveMenuFocus as q, calculateSubmenuPosition as ee } from "../ui/menuUtils.js";
 import { useFileBrowser as te } from "./FileBrowserContext.js";
-var ne = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=14 x=8 y=8 rx=2 ry=2></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2">'), oe = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=16 x=5 y=4 rx=2></rect><path d="M9 4.5h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v.5a1 1 0 0 0 1 1Z">'), re = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z">'), ie = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6">'), ae = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 3v18"></path><path d="m8 7-4 4 4 4"></path><path d="m16 7 4 4-4 4">'), se = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2">'), ue = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4">'), le = /* @__PURE__ */ h('<span class="text-[10px] text-muted-foreground opacity-60">'), ce = /* @__PURE__ */ h("<div role=menu>"), de = /* @__PURE__ */ h('<div class=relative><button type=button role=menuitem><span class="flex-1 text-left">'), K = /* @__PURE__ */ h('<div class="my-1 h-px bg-border"role=separator>'), me = /* @__PURE__ */ h("<div role=menu aria-orientation=vertical>");
+var ne = /* @__PURE__ */ p('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=14 x=8 y=8 rx=2 ry=2></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2">'), re = /* @__PURE__ */ p('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=16 x=5 y=4 rx=2></rect><path d="M9 4.5h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v.5a1 1 0 0 0 1 1Z">'), oe = /* @__PURE__ */ p('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z">'), ie = /* @__PURE__ */ p('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6">'), se = /* @__PURE__ */ p('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 3v18"></path><path d="m8 7-4 4 4 4"></path><path d="m16 7 4 4-4 4">'), ae = /* @__PURE__ */ p('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2">'), ue = /* @__PURE__ */ p('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4">'), le = /* @__PURE__ */ p('<span class="text-[10px] text-muted-foreground opacity-60">'), ce = /* @__PURE__ */ p("<div role=menu>"), de = /* @__PURE__ */ p('<div class=relative><button type=button role=menuitem><span class="flex-1 text-left">'), K = /* @__PURE__ */ p('<div class="my-1 h-px bg-border"role=separator>'), me = /* @__PURE__ */ p("<div role=menu aria-orientation=vertical>");
 const he = (e) => (() => {
   var t = ne();
-  return w(() => g(t, "class", e.class)), t;
+  return b(() => x(t, "class", e.class)), t;
 })(), fe = (e) => (() => {
-  var t = oe();
-  return w(() => g(t, "class", e.class)), t;
-})(), ve = (e) => (() => {
   var t = re();
-  return w(() => g(t, "class", e.class)), t;
+  return b(() => x(t, "class", e.class)), t;
+})(), ve = (e) => (() => {
+  var t = oe();
+  return b(() => x(t, "class", e.class)), t;
 })(), ge = (e) => (() => {
   var t = ie();
-  return w(() => g(t, "class", e.class)), t;
-})(), we = (e) => (() => {
-  var t = ae();
-  return w(() => g(t, "class", e.class)), t;
+  return b(() => x(t, "class", e.class)), t;
 })(), pe = (e) => (() => {
   var t = se();
-  return w(() => g(t, "class", e.class)), t;
+  return b(() => x(t, "class", e.class)), t;
+})(), we = (e) => (() => {
+  var t = ae();
+  return b(() => x(t, "class", e.class)), t;
 })(), xe = (e) => (() => {
   var t = ue();
-  return w(() => g(t, "class", e.class)), t;
+  return b(() => x(t, "class", e.class)), t;
 })();
 let ye = 0;
 function be(e) {
-  const t = !!e?.onAskAgent, a = !!e?.onCopyName;
+  const t = !!e?.onAskAgent, o = !!e?.onCopyName;
   return [{
     id: "duplicate",
     label: "Duplicate",
     type: "duplicate",
     icon: he,
     shortcut: "Cmd+D",
-    separator: !a && !t
-  }, ...a ? [{
+    separator: !o && !t
+  }, ...o ? [{
     id: "copy-name",
     label: "Copy Name",
     type: "copy-name",
@@ -59,7 +59,7 @@ function be(e) {
     id: "move-to",
     label: "Move to...",
     type: "move-to",
-    icon: we,
+    icon: pe,
     separator: !0
   }, {
     id: "rename",
@@ -71,52 +71,52 @@ function be(e) {
     id: "delete",
     label: "Delete",
     type: "delete",
-    icon: pe,
+    icon: we,
     shortcut: "Del"
   }];
 }
-function ke(e, t, a, f) {
+function ke(e, t, o, a) {
   switch (e.type) {
     case "duplicate":
-      a?.onDuplicate?.(t);
+      o?.onDuplicate?.(t);
       break;
     case "copy-name":
-      a?.onCopyName?.(t);
+      o?.onCopyName?.(t);
       break;
     case "ask-agent":
-      a?.onAskAgent?.(t);
+      o?.onAskAgent?.(t);
       break;
     case "copy-to":
-      a?.onCopyTo?.(t);
+      o?.onCopyTo?.(t);
       break;
     case "move-to":
-      a?.onMoveTo?.(t);
+      o?.onMoveTo?.(t);
       break;
     case "delete":
-      a?.onDelete?.(t);
+      o?.onDelete?.(t);
       break;
     case "rename":
-      t.length === 1 && a?.onRename?.(t[0]);
+      t.length === 1 && o?.onRename?.(t[0]);
       break;
     case "custom":
-      e.onAction?.(t, f);
+      e.onAction?.(t, a);
       break;
   }
 }
 function U(e, t) {
-  const a = e.target, f = a?.closest('[role="menu"]'), x = a?.closest('[role="menuitem"]');
+  const o = e.target, a = o?.closest('[role="menu"]'), m = o?.closest('[role="menuitem"]');
   switch (e.key) {
     case "ArrowDown":
-      e.preventDefault(), Z(f, x, 1);
+      e.preventDefault(), q(a, m, 1);
       return;
     case "ArrowUp":
-      e.preventDefault(), Z(f, x, -1);
+      e.preventDefault(), q(a, m, -1);
       return;
     case "Home":
-      e.preventDefault(), P(f, "first");
+      e.preventDefault(), _(a, "first");
       return;
     case "End":
-      e.preventDefault(), P(f, "last");
+      e.preventDefault(), _(a, "last");
       return;
     case "ArrowLeft":
       if (!t.onCloseSubmenu) return;
@@ -136,92 +136,120 @@ function U(e, t) {
       return;
   }
 }
+function Ce(e, t) {
+  return !e || typeof e != "object" ? !1 : ("dataset" in e ? e.dataset : void 0)?.floeContextMenu === t;
+}
+function Me(e, t) {
+  if (typeof e.composedPath == "function") {
+    const a = e.composedPath();
+    for (const m of a)
+      if (Ce(m, t)) return !0;
+  }
+  const o = e.target;
+  return typeof Element < "u" && o instanceof Element ? !!o.closest(`[data-floe-context-menu="${t}"]`) : !1;
+}
+function $e(e) {
+  const {
+    ownerWindow: t,
+    contextMenuId: o,
+    onDismiss: a
+  } = e, m = (w) => {
+    Me(w, o) || a();
+  }, y = (w) => {
+    w.key === "Escape" && a();
+  }, v = () => {
+    a();
+  };
+  return t.addEventListener("pointerdown", m, !0), t.addEventListener("keydown", y, !0), t.addEventListener("resize", v), t.addEventListener("scroll", v, !0), () => {
+    t.removeEventListener("pointerdown", m, !0), t.removeEventListener("keydown", y, !0), t.removeEventListener("resize", v), t.removeEventListener("scroll", v, !0);
+  };
+}
 function G(e) {
-  const [t, a] = B(!1), [f, x] = B({
+  const [t, o] = B(!1), [a, m] = B({
     x: -9999,
     y: -9999
   });
-  let b, k, C, M;
-  const d = () => (e.item.children?.length ?? 0) > 0, L = () => {
-    if (!b || !C) return;
-    const s = b.getBoundingClientRect(), u = C.getBoundingClientRect(), A = ee(s, u);
-    x(A);
-  }, p = () => {
+  let y, v, w, M;
+  const h = () => (e.item.children?.length ?? 0) > 0, S = () => {
+    if (!y || !w) return;
+    const u = y.getBoundingClientRect(), d = w.getBoundingClientRect(), A = ee(u, d);
+    m(A);
+  }, i = () => {
     M && (clearTimeout(M), M = void 0);
-  }, r = (s = "first") => {
-    !d() || e.item.disabled || (p(), a(!0), requestAnimationFrame(() => {
-      L(), P(C, s);
+  }, n = (u = "first") => {
+    !h() || e.item.disabled || (i(), o(!0), requestAnimationFrame(() => {
+      S(), _(w, u);
     }));
-  }, n = () => {
-    p(), a(!1), requestAnimationFrame(() => k?.focus());
-  }, m = () => {
-    !d() || e.item.disabled || (p(), M = setTimeout(() => {
-      r("first");
+  }, f = () => {
+    i(), o(!1), requestAnimationFrame(() => v?.focus());
+  }, s = () => {
+    !h() || e.item.disabled || (i(), M = setTimeout(() => {
+      n("first");
     }, 100));
-  }, i = () => {
-    d() && (p(), M = setTimeout(() => {
-      a(!1);
+  }, g = () => {
+    h() && (i(), M = setTimeout(() => {
+      o(!1);
     }, 150));
-  }, v = (s) => {
+  }, k = (u) => {
     if (!e.item.disabled) {
-      if (d()) {
-        s.preventDefault(), s.stopPropagation(), t() ? n() : r("first");
+      if (h()) {
+        u.preventDefault(), u.stopPropagation(), t() ? f() : n("first");
         return;
       }
       e.onSelect(e.item, e.menu);
     }
   };
-  return O(() => {
-    p();
+  return Z(() => {
+    i();
   }), (() => {
-    var s = de(), u = s.firstChild, A = u.firstChild;
-    s.addEventListener("mouseleave", i), s.addEventListener("mouseenter", m);
-    var j = b;
-    typeof j == "function" ? E(j, s) : b = s, u.$$keydown = (o) => {
-      e.item.disabled || !d() || (o.key === "ArrowRight" || o.key === "Enter" || o.key === " ") && (o.preventDefault(), r("first"));
-    }, u.$$click = v;
-    var F = k;
-    return typeof F == "function" ? E(F, u) : k = u, y(u, c($, {
+    var u = de(), d = u.firstChild, A = d.firstChild;
+    u.addEventListener("mouseleave", g), u.addEventListener("mouseenter", s);
+    var j = y;
+    typeof j == "function" ? L(j, u) : y = u, d.$$keydown = (r) => {
+      e.item.disabled || !h() || (r.key === "ArrowRight" || r.key === "Enter" || r.key === " ") && (r.preventDefault(), n("first"));
+    }, d.$$click = k;
+    var F = v;
+    return typeof F == "function" ? L(F, d) : v = d, C(d, c($, {
       get when() {
         return e.item.icon;
       },
-      children: (o) => c(J, {
+      children: (r) => c(J, {
         get component() {
-          return o();
+          return r();
         },
         class: "w-3.5 h-3.5 opacity-60"
       })
-    }), A), y(A, () => e.item.label), y(u, c($, {
+    }), A), C(A, () => e.item.label), C(d, c($, {
       get when() {
-        return V(() => !!e.item.shortcut)() && !d();
+        return V(() => !!e.item.shortcut)() && !h();
       },
       get children() {
-        var o = le();
-        return y(o, () => e.item.shortcut), o;
+        var r = le();
+        return C(r, () => e.item.shortcut), r;
       }
-    }), null), y(u, c($, {
+    }), null), C(d, c($, {
       get when() {
-        return d();
+        return h();
       },
       get children() {
         return c(Y, {
           class: "w-3 h-3 text-muted-foreground"
         });
       }
-    }), null), y(s, c($, {
+    }), null), C(u, c($, {
       get when() {
-        return V(() => !!t())() && d();
+        return V(() => !!t())() && h();
       },
       get children() {
-        return c(z, {
+        return c(W, {
           get children() {
-            var o = ce();
-            o.$$keydown = (l) => U(l, {
+            var r = ce();
+            r.$$keydown = (l) => U(l, {
               onDismiss: e.onDismiss,
-              onCloseSubmenu: n
-            }), o.addEventListener("mouseleave", i), o.addEventListener("mouseenter", p);
-            var D = C;
-            return typeof D == "function" ? E(D, o) : C = o, y(o, c(W, {
+              onCloseSubmenu: f
+            }), r.addEventListener("mouseleave", g), r.addEventListener("mouseenter", i);
+            var D = w;
+            return typeof D == "function" ? L(D, r) : w = r, C(r, c(O, {
               get each() {
                 return e.item.children;
               },
@@ -247,131 +275,130 @@ function G(e) {
                   return K();
                 }
               })]
-            })), w((l) => {
-              var I = T("fixed z-50 min-w-[180px] py-1", "bg-popover border border-border rounded-lg shadow-lg", "animate-in fade-in slide-in-from-left-1"), S = e.contextMenuId, H = `${f().x}px`, N = `${f().y}px`;
-              return I !== l.e && R(o, l.e = I), S !== l.t && g(o, "data-floe-context-menu", l.t = S), H !== l.a && _(o, "left", l.a = H), N !== l.o && _(o, "top", l.o = N), l;
+            })), b((l) => {
+              var I = T("fixed z-50 min-w-[180px] py-1", "bg-popover border border-border rounded-lg shadow-lg", "animate-in fade-in slide-in-from-left-1"), E = e.contextMenuId, H = `${a().x}px`, N = `${a().y}px`;
+              return I !== l.e && R(r, l.e = I), E !== l.t && x(r, "data-floe-context-menu", l.t = E), H !== l.a && P(r, "left", l.a = H), N !== l.o && P(r, "top", l.o = N), l;
             }, {
               e: void 0,
               t: void 0,
               a: void 0,
               o: void 0
-            }), o;
+            }), r;
           }
         });
       }
-    }), null), w((o) => {
-      var D = e.item.disabled || !d() && e.item.type === "rename" && e.menu.items.length > 1, l = T("w-full flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer", "transition-colors duration-75", "hover:bg-accent hover:text-accent-foreground", "focus:outline-none focus-visible:bg-accent focus-visible:text-accent-foreground", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent", e.item.type === "delete" && "text-error hover:bg-error/10 hover:text-error"), I = d() ? "menu" : void 0, S = d() ? t() : void 0;
-      return D !== o.e && (u.disabled = o.e = D), l !== o.t && R(u, o.t = l), I !== o.a && g(u, "aria-haspopup", o.a = I), S !== o.o && g(u, "aria-expanded", o.o = S), o;
+    }), null), b((r) => {
+      var D = e.item.disabled || !h() && e.item.type === "rename" && e.menu.items.length > 1, l = T("w-full flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer", "transition-colors duration-75", "hover:bg-accent hover:text-accent-foreground", "focus:outline-none focus-visible:bg-accent focus-visible:text-accent-foreground", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent", e.item.type === "delete" && "text-error hover:bg-error/10 hover:text-error"), I = h() ? "menu" : void 0, E = h() ? t() : void 0;
+      return D !== r.e && (d.disabled = r.e = D), l !== r.t && R(d, r.t = l), I !== r.a && x(d, "aria-haspopup", r.a = I), E !== r.o && x(d, "aria-expanded", r.o = E), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), s;
+    }), u;
   })();
 }
-function Ee(e) {
+function _e(e) {
   const t = te();
-  let a;
-  const f = typeof window > "u" || typeof document > "u", x = `floe-context-menu-${ye += 1}`, [b, k] = B({
+  let o;
+  const a = typeof window > "u" || typeof document > "u", m = `floe-context-menu-${ye += 1}`, [y, v] = B({
     x: -9999,
     y: -9999
-  }), C = () => {
+  }), w = () => {
     if (e.overrideItems)
       return e.overrideItems;
-    const r = () => {
-      const i = e.hideItems;
-      if (!i) return [];
-      if (typeof i == "function") {
-        const v = t.contextMenu()?.items ?? [];
-        return i(v);
+    const i = () => {
+      const s = e.hideItems;
+      if (!s) return [];
+      if (typeof s == "function") {
+        const g = t.contextMenu()?.items ?? [];
+        return s(g);
       }
-      return i;
+      return s;
     };
     let n = be(e.callbacks);
-    const m = r();
-    return m.length > 0 && (n = n.filter((i) => !m.includes(i.type))), e.customItems?.length && (n = [...n, ...e.customItems]), n;
-  }, M = (r, n) => {
+    const f = i();
+    return f.length > 0 && (n = n.filter((s) => !f.includes(s.type))), e.customItems?.length && (n = [...n, ...e.customItems]), n;
+  }, M = (i, n) => {
     t.hideContextMenu();
-    const m = [...n.items], i = e.callbacks;
+    const f = [...n.items], s = e.callbacks;
     X(() => {
-      ke(r, m, i, n);
+      ke(i, f, s, n);
     });
-  }, d = (r) => {
-    const n = r.target;
-    n && typeof n.closest == "function" && n.closest(`[data-floe-context-menu="${x}"]`) || t.hideContextMenu();
-  }, L = () => {
-    const r = t.contextMenu();
-    if (!r || !a) return {
-      x: r?.x ?? 0,
-      y: r?.y ?? 0
+  }, h = () => {
+    const i = t.contextMenu();
+    if (!i || !o) return {
+      x: i?.x ?? 0,
+      y: i?.y ?? 0
     };
-    const n = a.getBoundingClientRect(), m = window.innerWidth, i = window.innerHeight;
-    let v = r.x, s = r.y;
+    const n = o.getBoundingClientRect(), f = window.innerWidth, s = window.innerHeight;
+    let g = i.x, k = i.y;
     return n.width === 0 || n.height === 0 ? {
-      x: v,
-      y: s
-    } : (v + n.width > m && (v = m - n.width - 8), s + n.height > i && (s = i - n.height - 8), {
-      x: Math.max(8, v),
-      y: Math.max(8, s)
+      x: g,
+      y: k
+    } : (g + n.width > f && (g = f - n.width - 8), k + n.height > s && (k = s - n.height - 8), {
+      x: Math.max(8, g),
+      y: Math.max(8, k)
     });
   };
-  q(() => {
-    if (!t.contextMenu()) return;
-    const r = (n) => {
-      n.key === "Escape" && t.hideContextMenu();
-    };
-    document.addEventListener("mousedown", d), document.addEventListener("keydown", r), O(() => {
-      document.removeEventListener("mousedown", d), document.removeEventListener("keydown", r);
+  z(() => {
+    if (a || !t.contextMenu()) return;
+    const i = $e({
+      ownerWindow: window,
+      contextMenuId: m,
+      onDismiss: t.hideContextMenu
+    });
+    Z(() => {
+      i();
     });
-  }), q(() => {
-    const r = t.contextMenu();
-    if (!r) {
-      k({
+  }), z(() => {
+    const i = t.contextMenu();
+    if (!i) {
+      v({
         x: -9999,
         y: -9999
       });
       return;
     }
-    k({
-      x: r.x,
-      y: r.y
+    v({
+      x: i.x,
+      y: i.y
     }), requestAnimationFrame(() => {
-      const n = L();
-      k(n), P(a, "first");
+      const n = h();
+      v(n), _(o, "first");
     });
   });
-  const p = (r) => (() => {
+  const S = (i) => (() => {
     var n = me();
-    n.$$keydown = (i) => U(i, {
+    n.$$keydown = (s) => U(s, {
       onDismiss: t.hideContextMenu
     });
-    var m = a;
-    return typeof m == "function" ? E(m, n) : a = n, g(n, "data-floe-context-menu", x), y(n, c(W, {
+    var f = o;
+    return typeof f == "function" ? L(f, n) : o = n, x(n, "data-floe-context-menu", m), C(n, c(O, {
       get each() {
-        return C();
+        return w();
       },
-      children: (i) => [c(G, {
-        item: i,
+      children: (s) => [c(G, {
+        item: s,
         get menu() {
-          return r.menu();
+          return i.menu();
         },
-        contextMenuId: x,
+        contextMenuId: m,
         onSelect: M,
         get onDismiss() {
           return t.hideContextMenu;
         }
       }), c($, {
         get when() {
-          return i.separator;
+          return s.separator;
         },
         get children() {
           return K();
         }
       })]
-    })), w((i) => {
-      var v = T("fixed z-50 min-w-[180px] py-1", "bg-popover border border-border rounded-lg shadow-lg", "animate-in fade-in zoom-in-95 duration-100"), s = `${b().x}px`, u = `${b().y}px`;
-      return v !== i.e && R(n, i.e = v), s !== i.t && _(n, "left", i.t = s), u !== i.a && _(n, "top", i.a = u), i;
+    })), b((s) => {
+      var g = T("fixed z-50 min-w-[180px] py-1", "bg-popover border border-border rounded-lg shadow-lg", "animate-in fade-in zoom-in-95 duration-100"), k = `${y().x}px`, u = `${y().y}px`;
+      return g !== s.e && R(n, s.e = g), k !== s.t && P(n, "left", s.t = k), u !== s.a && P(n, "top", s.a = u), s;
     }, {
       e: void 0,
       t: void 0,
@@ -382,12 +409,12 @@ function Ee(e) {
     get when() {
       return t.contextMenu();
     },
-    children: (r) => f ? c(p, {
-      menu: r
-    }) : c(z, {
+    children: (i) => a ? c(S, {
+      menu: i
+    }) : c(W, {
       get children() {
-        return c(p, {
-          menu: r
+        return c(S, {
+          menu: i
         });
       }
     })
@@ -395,7 +422,8 @@ function Ee(e) {
 }
 Q(["click", "keydown"]);
 export {
-  Ee as FileContextMenu,
+  _e as FileContextMenu,
   be as createDefaultContextMenuItems,
-  ke as dispatchContextMenuAction
+  ke as dispatchContextMenuAction,
+  $e as installContextMenuDismissListeners
 };