@floegence/floe-webapp-core 0.35.49 → 0.35.50

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
 };

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

@@ -1,6 +1,6 @@
-import { addEventListener as te, use as z, insert as y, createComponent as D, effect as N, setStyleProperty as Y, className as H, style as ue, template as S, spread as ge, mergeProps as me, memo as fe, delegateEvents as he } from "solid-js/web";
+import { addEventListener as te, use as z, insert as S, createComponent as D, effect as N, setStyleProperty as Y, className as p, style as ue, template as y, spread as ge, mergeProps as me, memo as fe, delegateEvents as he } from "solid-js/web";
 import { createSignal as ie, createMemo as W, createEffect as ne, onCleanup as oe, Show as q, For as ae, untrack as ve } from "solid-js";
-import { cn as p } from "../../utils/cn.js";
+import { cn as H } from "../../utils/cn.js";
 import { useResizeObserver as xe } from "../../hooks/useResizeObserver.js";
 import { useVirtualWindow as Ie } from "../../hooks/useVirtualWindow.js";
 import { useFileBrowser as le } from "./FileBrowserContext.js";
@@ -8,11 +8,11 @@ import { useFileBrowserDrag as we } from "../../context/FileBrowserDragContext.j
 import { FileItemIcon as be } from "./FileIcons.js";
 import { createLongPressContextMenuHandlers as Ce } from "./longPressContextMenu.js";
 import { fileBrowserTouchTargetAttrs as De } from "./touchInteractionGuard.js";
-import { createItemContextMenuEvent as Se } from "./contextMenuEvent.js";
-import { createFileBrowserMarqueeSelection as ye, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as Me } from "./useFileBrowserMarqueeSelection.js";
+import { createItemContextMenuEvent as ye } from "./contextMenuEvent.js";
+import { createFileBrowserMarqueeSelection as Se, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as Me } from "./useFileBrowserMarqueeSelection.js";
 import { isPrimaryModKeyPressed as re } from "../../utils/keybind.js";
-var Te = /* @__PURE__ */ S('<mark class="bg-warning/40 text-inherit rounded-sm">'), Pe = /* @__PURE__ */ S('<div class="grid gap-2">'), _e = /* @__PURE__ */ S('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Ee = /* @__PURE__ */ S('<span>No files matching "<!>"'), Fe = /* @__PURE__ */ S('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Le = /* @__PURE__ */ S('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Re = /* @__PURE__ */ S("<span>This folder is empty"), $e = /* @__PURE__ */ S("<div>"), ke = /* @__PURE__ */ S('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), Ae = /* @__PURE__ */ S("<button type=button><div></div><span></span><div>");
-function pe(e) {
+var Te = /* @__PURE__ */ y('<mark class="bg-warning/40 text-inherit rounded-sm">'), Pe = /* @__PURE__ */ y('<div class="grid gap-2">'), _e = /* @__PURE__ */ y('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Ee = /* @__PURE__ */ y('<span>No files matching "<!>"'), Fe = /* @__PURE__ */ y('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Le = /* @__PURE__ */ y('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Re = /* @__PURE__ */ y("<span>This folder is empty"), $e = /* @__PURE__ */ y("<div>"), ke = /* @__PURE__ */ y('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), Ae = /* @__PURE__ */ y("<button type=button><div></div><span></span><div>");
+function He(e) {
   const r = W(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
@@ -20,17 +20,17 @@ function pe(e) {
         highlight: !1
       }];
     const s = [], M = new Set(e.match.matchedIndices);
-    let C = "", g = !1;
+    let C = "", m = !1;
     for (let d = 0; d < e.name.length; d++) {
       const v = M.has(d);
-      d === 0 ? (g = v, C = e.name[d]) : v === g ? C += e.name[d] : (s.push({
+      d === 0 ? (m = v, C = e.name[d]) : v === m ? C += e.name[d] : (s.push({
         text: C,
-        highlight: g
-      }), C = e.name[d], g = v);
+        highlight: m
+      }), C = e.name[d], m = v);
     }
     return C && s.push({
       text: C,
-      highlight: g
+      highlight: m
     }), s;
   });
   return D(ae, {
@@ -46,47 +46,47 @@ function pe(e) {
       },
       get children() {
         var M = Te();
-        return y(M, () => s.text), M;
+        return S(M, () => s.text), M;
       }
     })
   });
 }
 function Ke(e) {
-  const r = le(), s = we(), M = () => (e.enableDragDrop ?? !0) && !!s, C = () => e.instanceId ?? "default", g = 112, d = 8, v = 180, T = 2, R = 6, [m, V] = ie(null), U = xe(m), x = W(() => {
+  const r = le(), s = we(), M = () => (e.enableDragDrop ?? !0) && !!s, C = () => e.instanceId ?? "default", m = 112, d = 8, v = 180, T = 2, R = 6, [f, V] = ie(null), U = xe(f), x = W(() => {
     const n = U()?.width ?? 0;
     if (n <= 0) return T;
     const l = Math.floor((n + d) / (v + d));
     return Math.max(T, Math.min(R, l));
-  }), F = () => g + d, c = Ie({
+  }), F = () => m + d, c = Ie({
     count: () => Math.ceil(r.currentFiles().length / Math.max(1, x())),
     itemSize: F,
     overscan: 2
-  }), Q = () => c.range().start * x(), $ = () => Math.min(r.currentFiles().length, c.range().end * x()), k = W(() => r.currentFiles().slice(Q(), $())), P = /* @__PURE__ */ new Map(), B = (n, l) => {
+  }), Q = () => c.range().start * x(), $ = () => Math.min(r.currentFiles().length, c.range().end * x()), k = W(() => r.currentFiles().slice(Q(), $())), P = /* @__PURE__ */ new Map(), O = (n, l) => {
     if (l) {
       P.set(n, l);
       return;
     }
     P.delete(n);
   };
-  let f = null, L = T, I = 0;
+  let g = null, L = T, I = 0;
   ne(() => {
     const n = x();
-    if (!f) {
+    if (!g) {
       L = n;
       return;
     }
     if (n === L) return;
-    const l = F(), o = Math.floor(f.scrollTop / Math.max(1, l)) * Math.max(1, L), i = Math.floor(o / Math.max(1, n));
-    f.scrollTop = i * l, c.onScroll(), L = n;
+    const l = F(), o = Math.floor(g.scrollTop / Math.max(1, l)) * Math.max(1, L), i = Math.floor(o / Math.max(1, n));
+    g.scrollTop = i * l, c.onScroll(), L = n;
   });
-  const O = (n) => {
-    if (!f) return;
-    const b = Math.floor(n / Math.max(1, x())) * F(), o = b + F(), i = f.scrollTop, w = i + f.clientHeight;
+  const B = (n) => {
+    if (!g) return;
+    const b = Math.floor(n / Math.max(1, x())) * F(), o = b + F(), i = g.scrollTop, w = i + g.clientHeight;
     if (b < i) {
-      f.scrollTop = b, c.onScroll();
+      g.scrollTop = b, c.onScroll();
       return;
     }
-    o > w && (f.scrollTop = Math.max(0, o - f.clientHeight), c.onScroll());
+    o > w && (g.scrollTop = Math.max(0, o - g.clientHeight), c.onScroll());
   };
   ne(() => {
     const n = r.revealRequest(), l = r.currentFiles();
@@ -94,7 +94,7 @@ function Ke(e) {
     const b = l.findIndex((w) => w.id === n.targetId);
     if (b < 0) return;
     if (!P.get(n.targetId)) {
-      O(b);
+      B(b);
       return;
     }
     typeof cancelAnimationFrame == "function" && I && (cancelAnimationFrame(I), I = 0);
@@ -114,8 +114,9 @@ function Ke(e) {
   }), oe(() => {
     typeof cancelAnimationFrame == "function" && I && cancelAnimationFrame(I);
   });
-  const A = ye({
-    getContainer: () => f,
+  const A = Se({
+    getContainer: () => g,
+    getOverlayHost: () => g,
     getVisibleItemIdsInOrder: () => r.currentFiles().map((n) => n.id),
     getElementForId: (n) => P.get(n) ?? null,
     getSelectedIds: () => [...r.selectedItems()],
@@ -125,15 +126,15 @@ function Ke(e) {
   return (() => {
     var n = _e(), l = n.firstChild, b = l.firstChild;
     return te(n, "pointerdown", A.onPointerDown, !0), te(n, "scroll", c.onScroll), z((o) => {
-      f = o, c.scrollRef(o), r.setScrollContainer(o);
-    }, n), z((o) => V(o), b), y(l, D(q, {
+      g = o, c.scrollRef(o), r.setScrollContainer(o);
+    }, n), z((o) => V(o), b), S(l, D(q, {
       get when() {
         return r.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
           var o = Le();
-          return y(o, D(q, {
+          return S(o, D(q, {
             get when() {
               return r.filterQueryApplied().trim();
             },
@@ -143,7 +144,7 @@ function Ke(e) {
             get children() {
               return [(() => {
                 var i = Ee(), w = i.firstChild, _ = w.nextSibling;
-                return _.nextSibling, y(i, () => r.filterQueryApplied(), _), i;
+                return _.nextSibling, S(i, () => r.filterQueryApplied(), _), i;
               })(), (() => {
                 var i = Fe();
                 return i.$$click = () => r.setFilterQuery(""), i;
@@ -154,11 +155,11 @@ function Ke(e) {
       },
       get children() {
         var o = Pe();
-        return y(o, D(ae, {
+        return S(o, D(ae, {
           get each() {
             return k();
           },
-          children: (i) => D(He, {
+          children: (i) => D(pe, {
             item: i,
             get instanceId() {
               return C();
@@ -167,7 +168,7 @@ function Ke(e) {
               return M();
             },
             dragContext: s,
-            registerTile: B
+            registerTile: O
           })
         })), N((i) => {
           var w = `repeat(${x()}, minmax(0, 1fr))`, _ = `${c.paddingTop()}px`, X = `${c.paddingBottom()}px`;
@@ -178,22 +179,22 @@ function Ke(e) {
           a: void 0
         }), o;
       }
-    }), null), y(n, D(q, {
+    }), null), S(l, D(q, {
       get when() {
         return A.overlayStyle();
       },
       children: (o) => (() => {
         var i = $e();
-        return H(i, Me), N((w) => ue(i, o(), w)), i;
+        return p(i, Me), N((w) => ue(i, o(), w)), i;
       })()
-    }), null), N(() => H(n, p("relative h-full min-h-0 overflow-auto", e.class))), n;
+    }), null), N(() => p(n, H("relative h-full min-h-0 overflow-auto", e.class))), n;
   })();
 }
-function He(e) {
-  const r = le(), s = () => r.isSelected(e.item.id), M = () => r.getFilterMatchForId(e.item.id), C = ve(() => e.item), g = Ce(r, C, {
+function pe(e) {
+  const r = le(), s = () => r.isSelected(e.item.id), M = () => r.getFilterMatchForId(e.item.id), C = ve(() => e.item), m = Ce(r, C, {
     source: "grid"
   });
-  let d, v = null, T = 0, R = 0, m = !1;
+  let d, v = null, T = 0, R = 0, f = !1;
   const V = 5, U = 500;
   let x = null;
   const [F, j] = ie(!1), c = () => d === "touch" || d === "pen", Q = () => e.item.type === "folder", $ = () => Q() && e.enableDragDrop && e.dragContext, k = () => {
@@ -204,21 +205,21 @@ function He(e) {
     if (!e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? t.draggedItems.some((a) => a.item.id === e.item.id) : !1;
-  }, B = () => {
+  }, O = () => {
     x !== null && (clearTimeout(x), x = null);
-  }, f = () => {
+  }, g = () => {
     typeof document > "u" || (document.removeEventListener("pointermove", A, !0), document.removeEventListener("pointerup", n, !0), document.removeEventListener("pointercancel", l, !0));
   }, L = () => {
     typeof document > "u" || (document.addEventListener("pointermove", A, !0), document.addEventListener("pointerup", n, !0), document.addEventListener("pointercancel", l, !0));
   }, I = (t) => {
-    B(), f(), m && e.dragContext && e.dragContext.endDrag(t), v = null, m = !1;
+    O(), g(), f && e.dragContext && e.dragContext.endDrag(t), v = null, f = !1;
   };
   oe(() => {
     e.registerTile(e.item.id, null), I(!1);
   });
-  const O = (t, a) => {
-    if (!e.enableDragDrop || !e.dragContext || m) return;
-    m = !0, s() || r.selectItem(e.item.id, !1);
+  const B = (t, a) => {
+    if (!e.enableDragDrop || !e.dragContext || f) return;
+    f = !0, s() || r.selectItem(e.item.id, !1);
     const h = r.getSelectedItemsList(), u = (h.length > 0 && s() ? h : [e.item]).map((G) => ({
       item: G,
       sourceInstanceId: e.instanceId,
@@ -233,21 +234,21 @@ function He(e) {
   }, A = (t) => {
     if (v !== t.pointerId) return;
     const a = t.clientX - T, h = t.clientY - R, E = Math.sqrt(a * a + h * h);
-    if (c() && !m && E > 10) {
+    if (c() && !f && E > 10) {
       I(!1);
       return;
     }
-    !c() && !m && E > V && O(t.clientX, t.clientY), m && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+    !c() && !f && E > V && B(t.clientX, t.clientY), f && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
   }, n = (t) => {
-    v === t.pointerId && (g.onPointerUp(), I(!0));
+    v === t.pointerId && (m.onPointerUp(), I(!0));
   }, l = (t) => {
-    v === t.pointerId && (g.onPointerCancel(), I(!1));
+    v === t.pointerId && (m.onPointerCancel(), I(!1));
   }, b = (t) => {
-    d = t.pointerType, g.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (v = t.pointerId, T = t.clientX, R = t.clientY, m = !1, L(), c() && (B(), x = setTimeout(() => {
-      v !== null && !m && O(T, R);
+    d = t.pointerType, m.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (v = t.pointerId, T = t.clientX, R = t.clientY, f = !1, L(), c() && (O(), x = setTimeout(() => {
+      v !== null && !f && B(T, R);
     }, U))));
   }, o = (t) => {
-    d = t.pointerType, g.onPointerMove(t);
+    d = t.pointerType, m.onPointerMove(t);
   }, i = (t) => {
     if (!$() || !e.dragContext) return;
     const a = e.dragContext.dragState();
@@ -265,11 +266,11 @@ function He(e) {
     const a = e.dragContext.dragState();
     a.isDragging && a.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
   }, _ = (t) => {
-    if (m) {
-      m = !1;
+    if (f) {
+      f = !1;
       return;
     }
-    if (!g.consumeClickSuppression(t)) {
+    if (!m.consumeClickSuppression(t)) {
       if (c()) {
         r.openItem(e.item);
         return;
@@ -286,7 +287,7 @@ function He(e) {
     if (t.preventDefault(), t.stopPropagation(), c()) return;
     r.ensureContextMenuSelection(e.item.id);
     const a = r.getSelectedItemsList(), h = a.length > 0 ? a : [e.item];
-    r.showContextMenu(Se({
+    r.showContextMenu(ye({
       x: t.clientX,
       y: t.clientY,
       triggerItem: e.item,
@@ -317,7 +318,7 @@ function He(e) {
       onPointerEnter: i,
       onPointerLeave: w,
       get class() {
-        return p(
+        return H(
           "group relative flex flex-col items-center gap-2 p-3 rounded-lg cursor-pointer h-28",
           "transition-all duration-150 ease-out",
           "hover:bg-accent/50 hover:scale-[1.02]",
@@ -331,19 +332,19 @@ function He(e) {
           K() && !k() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
         );
       }
-    }), !1, !0), y(t, D(q, {
+    }), !1, !0), S(t, D(q, {
       get when() {
         return s();
       },
       get children() {
         return ke();
       }
-    }), a), y(a, D(be, {
+    }), a), S(a, D(be, {
       get item() {
         return e.item;
       },
       class: "w-8 h-8"
-    })), y(h, D(pe, {
+    })), S(h, D(He, {
       get name() {
         return e.item.name;
       },
@@ -351,8 +352,8 @@ function He(e) {
         return M();
       }
     })), N((u) => {
-      var G = p("w-12 h-12 flex items-center justify-center rounded-lg", "transition-transform duration-200", "group-hover:scale-110", e.item.type === "folder" ? "bg-warning/10" : "bg-muted/50"), J = p("block w-full min-w-0 truncate px-1 text-xs text-center", "transition-colors duration-150", s() && "font-medium"), Z = p("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), ee = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
-      return G !== u.e && H(a, u.e = G), J !== u.t && H(h, u.t = J), Z !== u.a && H(E, u.a = Z), ee !== u.o && Y(E, "background", u.o = ee), u;
+      var G = H("w-12 h-12 flex items-center justify-center rounded-lg", "transition-transform duration-200", "group-hover:scale-110", e.item.type === "folder" ? "bg-warning/10" : "bg-muted/50"), J = H("block w-full min-w-0 truncate px-1 text-xs text-center", "transition-colors duration-150", s() && "font-medium"), Z = H("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), ee = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
+      return G !== u.e && p(a, u.e = G), J !== u.t && p(h, u.t = J), Z !== u.a && p(E, u.a = Z), ee !== u.o && Y(E, "background", u.o = ee), u;
     }, {
       e: void 0,
       t: void 0,

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

@@ -1,4 +1,4 @@
-import { use as ee, insert as f, createComponent as m, effect as p, className as N, setStyleProperty as L, addEventListener as ie, style as Ce, template as _, spread as be, mergeProps as Me, memo as ce, delegateEvents as De } from "solid-js/web";
+import { use as ee, insert as f, createComponent as m, effect as p, className as N, setStyleProperty as L, addEventListener as ie, style as Ce, template as z, spread as be, mergeProps as Me, memo as ce, delegateEvents as De } from "solid-js/web";
 import { createMemo as te, createEffect as Ie, onCleanup as de, createSignal as ue, Show as P, For as me, untrack as $e } from "solid-js";
 import { cn as E } from "../../utils/cn.js";
 import { useMediaQuery as re } from "../../hooks/useMediaQuery.js";
@@ -14,7 +14,7 @@ import { fileBrowserTouchTargetAttrs as Fe } from "./touchInteractionGuard.js";
 import { createItemContextMenuEvent as ke } from "./contextMenuEvent.js";
 import { createFileBrowserMarqueeSelection as pe, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as Ae } from "./useFileBrowserMarqueeSelection.js";
 import { isPrimaryModKeyPressed as ae } from "../../utils/keybind.js";
-var Ee = /* @__PURE__ */ _("<span class=truncate>"), Le = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), We = /* @__PURE__ */ _("<span>"), Be = /* @__PURE__ */ _('<div><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), He = /* @__PURE__ */ _('<div class=shrink-0><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Size'), le = /* @__PURE__ */ _("<div>"), qe = /* @__PURE__ */ _('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"><span class="flex items-center gap-2 min-w-0"><span class="flex-shrink-0 w-4 h-4"aria-hidden=true></span><span class="flex items-center min-w-0"><span class=truncate>Name</span></span></span></button></div></div><div class="relative flex-1 min-h-0 overflow-auto">'), Ne = /* @__PURE__ */ _('<span>No files matching "<!>"'), Oe = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Xe = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Ye = /* @__PURE__ */ _("<span>This folder is empty"), se = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ge = /* @__PURE__ */ _('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="flex-shrink-0 w-4 h-4">');
+var Ee = /* @__PURE__ */ z("<span class=truncate>"), Le = /* @__PURE__ */ z('<mark class="bg-warning/40 text-inherit rounded-sm">'), We = /* @__PURE__ */ z("<span>"), He = /* @__PURE__ */ z('<div><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), Be = /* @__PURE__ */ z('<div class=shrink-0><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Size'), le = /* @__PURE__ */ z("<div>"), qe = /* @__PURE__ */ z('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"><span class="flex items-center gap-2 min-w-0"><span class="flex-shrink-0 w-4 h-4"aria-hidden=true></span><span class="flex items-center min-w-0"><span class=truncate>Name</span></span></span></button></div></div><div class="relative flex-1 min-h-0 overflow-auto">'), Ne = /* @__PURE__ */ z('<span>No files matching "<!>"'), Oe = /* @__PURE__ */ z('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Xe = /* @__PURE__ */ z('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Ye = /* @__PURE__ */ z("<span>This folder is empty"), se = /* @__PURE__ */ z('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ge = /* @__PURE__ */ z('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="flex-shrink-0 w-4 h-4">');
 function Ve(t) {
   const o = te(() => {
     if (!t.match || t.match.matchedIndices.length === 0)
@@ -69,7 +69,7 @@ function ut(t) {
     } = g.range();
     return o.currentFiles().slice(n, i);
   }), T = /* @__PURE__ */ new Map();
-  let z = null, x = 0;
+  let _ = null, x = 0;
   const U = (n, i) => {
     if (i) {
       T.set(n, i);
@@ -77,13 +77,13 @@ function ut(t) {
     }
     T.delete(n);
   }, Q = (n) => {
-    if (!z) return;
-    const i = n * C, l = i + C, c = z.scrollTop, h = c + z.clientHeight;
+    if (!_) return;
+    const i = n * C, l = i + C, c = _.scrollTop, h = c + _.clientHeight;
     if (i < c) {
-      z.scrollTop = i, g.onScroll();
+      _.scrollTop = i, g.onScroll();
       return;
     }
-    l > h && (z.scrollTop = Math.max(0, l - z.clientHeight), g.onScroll());
+    l > h && (_.scrollTop = Math.max(0, l - _.clientHeight), g.onScroll());
   };
   Ie(() => {
     const n = o.revealRequest(), i = o.currentFiles();
@@ -122,7 +122,8 @@ function ut(t) {
     day: "numeric",
     year: "numeric"
   }) : "-", y = pe({
-    getContainer: () => z,
+    getContainer: () => _,
+    getOverlayHost: () => _,
     getVisibleItemIdsInOrder: () => o.currentFiles().map((n) => n.id),
     getElementForId: (n) => T.get(n) ?? null,
     getSelectedIds: () => [...o.selectedItems()],
@@ -138,8 +139,8 @@ function ut(t) {
         }
       })), p(() => N(c, E("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), c;
     })();
-  }, B = re("(min-width: 640px)"), X = re("(min-width: 768px)"), [K, Y] = ue(null), J = _e(K), A = (n, i, l) => Math.max(i, Math.min(l, n)), S = te(() => {
-    const n = J()?.width ?? 0, i = B(), l = X(), c = o.listColumnRatios(), h = 160, v = 120, b = 80, M = 128, a = 96;
+  }, H = re("(min-width: 640px)"), X = re("(min-width: 768px)"), [K, Y] = ue(null), J = _e(K), A = (n, i, l) => Math.max(i, Math.min(l, n)), S = te(() => {
+    const n = J()?.width ?? 0, i = H(), l = X(), c = o.listColumnRatios(), h = 160, v = 120, b = 80, M = 128, a = 96;
     if (!i || n <= 0)
       return {
         width: n,
@@ -181,7 +182,7 @@ function ut(t) {
       modifiedWidth: r,
       sizeWidth: e
     };
-  }), H = () => S().modifiedWidth, q = () => S().sizeWidth, G = (n) => {
+  }), B = () => S().modifiedWidth, q = () => S().sizeWidth, G = (n) => {
     const i = S();
     if (!i.showModified || i.width <= 0) return;
     if (!i.showSize) {
@@ -238,7 +239,7 @@ function ut(t) {
         return S().showModified;
       },
       get children() {
-        var a = Be(), r = a.firstChild;
+        var a = He(), r = a.firstChild;
         return r.firstChild, r.$$click = () => k("modifiedAt"), f(r, m(W, {
           field: "modifiedAt"
         }), null), f(a, m(P, {
@@ -252,7 +253,7 @@ function ut(t) {
             });
           }
         }), null), p((e) => {
-          var s = E("relative shrink-0", S().showSize && "border-r border-border"), u = `${H()}px`;
+          var s = E("relative shrink-0", S().showSize && "border-r border-border"), u = `${B()}px`;
           return s !== e.e && N(a, e.e = s), u !== e.t && L(a, "width", e.t = u), e;
         }, {
           e: void 0,
@@ -264,13 +265,13 @@ function ut(t) {
         return S().showSize;
       },
       get children() {
-        var a = He(), r = a.firstChild;
+        var a = Be(), r = a.firstChild;
         return r.firstChild, r.$$click = () => k("size"), f(r, m(W, {
           field: "size"
         }), null), p((e) => L(a, "width", `${q()}px`)), a;
       }
     }), null), ie(M, "pointerdown", y.onPointerDown, !0), ie(M, "scroll", g.onScroll), ee((a) => {
-      z = a, g.scrollRef(a), o.setScrollContainer(a);
+      _ = a, g.scrollRef(a), o.setScrollContainer(a);
     }, M), f(M, m(P, {
       get when() {
         return o.currentFiles().length > 0;
@@ -314,7 +315,7 @@ function ut(t) {
               return S().showSize;
             },
             get modifiedWidthPx() {
-              return H();
+              return B();
             },
             get sizeWidthPx() {
               return q();
@@ -357,11 +358,11 @@ function Ue(t) {
   const o = fe(), D = () => o.isSelected(t.item.id), R = () => o.getFilterMatchForId(t.item.id), I = $e(() => t.item), C = Te(o, I, {
     source: "list"
   });
-  let g, $ = null, T = 0, z = 0, x = !1;
+  let g, $ = null, T = 0, _ = 0, x = !1;
   const U = 5, Q = 500;
   let k = null;
-  const [j, O] = ue(!1), y = () => g === "touch" || g === "pen", W = () => t.item.type === "folder", B = () => W() && t.enableDragDrop && t.dragContext, X = () => {
-    if (!B() || !t.dragContext) return !1;
+  const [j, O] = ue(!1), y = () => g === "touch" || g === "pen", W = () => t.item.type === "folder", H = () => W() && t.enableDragDrop && t.dragContext, X = () => {
+    if (!H() || !t.dragContext) return !1;
     const e = t.dragContext.dragState();
     return e.isDragging ? t.dragContext.canDropOn(e.draggedItems, t.item.path, t.item, t.instanceId) : !1;
   }, K = () => {
@@ -380,7 +381,7 @@ function Ue(t) {
   de(() => {
     t.registerRow(t.item.id, null), S(!1);
   });
-  const H = (e, s) => {
+  const B = (e, s) => {
     if (!t.enableDragDrop || !t.dragContext || x) return;
     x = !0, D() || o.selectItem(t.item.id, !1);
     const u = o.getSelectedItemsList(), w = (u.length > 0 && D() ? u : [t.item]).map((F) => ({
@@ -396,24 +397,24 @@ function Ue(t) {
     t.dragContext.startDrag(w, e, s);
   }, q = (e) => {
     if ($ !== e.pointerId) return;
-    const s = e.clientX - T, u = e.clientY - z, d = Math.sqrt(s * s + u * u);
+    const s = e.clientX - T, u = e.clientY - _, d = Math.sqrt(s * s + u * u);
     if (y() && !x && d > 10) {
       S(!1);
       return;
     }
-    !y() && !x && d > U && H(e.clientX, e.clientY), x && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
+    !y() && !x && d > U && B(e.clientX, e.clientY), x && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
   }, G = (e) => {
     $ === e.pointerId && (C.onPointerUp(), S(!0));
   }, V = (e) => {
     $ === e.pointerId && (C.onPointerCancel(), S(!1));
   }, n = (e) => {
-    g = e.pointerType, C.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || ($ = e.pointerId, T = e.clientX, z = e.clientY, x = !1, A(), y() && (Y(), k = setTimeout(() => {
-      $ !== null && !x && H(T, z);
+    g = e.pointerType, C.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || ($ = e.pointerId, T = e.clientX, _ = e.clientY, x = !1, A(), y() && (Y(), k = setTimeout(() => {
+      $ !== null && !x && B(T, _);
     }, Q))));
   }, i = (e) => {
     g = e.pointerType, C.onPointerMove(e);
   }, l = (e) => {
-    if (!B() || !t.dragContext) return;
+    if (!H() || !t.dragContext) return;
     const s = t.dragContext.dragState();
     if (!s.isDragging) return;
     O(!0);
@@ -457,7 +458,7 @@ function Ue(t) {
       items: u,
       source: "list"
     }));
-  }, M = () => t.dragContext?.dragState(), a = () => M()?.isDragging ?? !1, r = () => j() && a() && B();
+  }, M = () => t.dragContext?.dragState(), a = () => M()?.isDragging ?? !1, r = () => j() && a() && H();
   return (() => {
     var e = Ge(), s = e.firstChild, u = s.firstChild;
     return ee((d) => {

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

@@ -1,7 +1,28 @@
 import { type Accessor } from 'solid-js';
 import type { ReplaceSelectionOptions } from './types';
+export type ViewportRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export type LocalOverlayRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export interface OverlayHostGeometry {
+    left: number;
+    top: number;
+    scrollLeft: number;
+    scrollTop: number;
+    clientLeft: number;
+    clientTop: number;
+}
 export interface FileBrowserMarqueeSelectionOptions {
     getContainer: () => HTMLElement | null;
+    getOverlayHost?: () => HTMLElement | null;
     getVisibleItemIdsInOrder: () => string[];
     getElementForId: (id: string) => HTMLElement | null | undefined;
     getSelectedIds: () => string[];
@@ -12,5 +33,6 @@ export interface FileBrowserMarqueeSelectionResult {
     overlayStyle: Accessor<Record<string, string> | null>;
     onPointerDown: (event: PointerEvent) => void;
 }
-export declare const FILE_BROWSER_MARQUEE_OVERLAY_CLASS = "pointer-events-none fixed z-40 rounded-md floe-file-browser-marquee-overlay";
+export declare const FILE_BROWSER_MARQUEE_OVERLAY_CLASS = "pointer-events-none absolute z-40 rounded-md floe-file-browser-marquee-overlay";
+export declare function projectViewportRectToOverlayHost(rect: ViewportRect, geometry: OverlayHostGeometry): LocalOverlayRect;
 export declare function createFileBrowserMarqueeSelection(options: FileBrowserMarqueeSelectionOptions): FileBrowserMarqueeSelectionResult;

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

@@ -1,69 +1,93 @@
-import { createSignal as R, createMemo as b, onCleanup as y } from "solid-js";
-import { isPrimaryModKeyPressed as L } from "../../utils/keybind.js";
-const w = 4, G = "pointer-events-none fixed z-40 rounded-md floe-file-browser-marquee-overlay";
-function x(t, n, l, o) {
-  const r = Math.min(t, l), c = Math.min(n, o);
+import { createSignal as S, createMemo as b, onCleanup as w } from "solid-js";
+import { isPrimaryModKeyPressed as M } from "../../utils/keybind.js";
+const y = 4, A = "pointer-events-none absolute z-40 rounded-md floe-file-browser-marquee-overlay";
+function T(e, n, c, o) {
+  const l = Math.min(e, c), u = Math.min(n, o);
   return {
-    left: r,
-    top: c,
-    width: Math.abs(l - t),
+    left: l,
+    top: u,
+    width: Math.abs(c - e),
     height: Math.abs(o - n)
   };
 }
-function P(t, n) {
-  return !(t.left + t.width < n.left || n.right < t.left || t.top + t.height < n.top || n.bottom < t.top);
+function O(e, n) {
+  return !(e.left + e.width < n.left || n.right < e.left || e.top + e.height < n.top || n.bottom < e.top);
 }
-function _(t) {
-  return !(!(t instanceof Element) || t.closest("[data-file-browser-item-id]") || t.closest('button, input, textarea, select, a, [role="button"], [role="menuitem"]'));
+function P(e) {
+  return !(!(e instanceof Element) || e.closest("[data-file-browser-item-id]") || e.closest('button, input, textarea, select, a, [role="button"], [role="menuitem"]'));
 }
-function C(t) {
-  const [n, l] = R(null);
-  let o = null, r = !1, c = [], s = 0, a = 0, u = !1;
-  const g = () => {
-    typeof document > "u" || (document.removeEventListener("pointermove", m, !0), document.removeEventListener("pointerup", p, !0), document.removeEventListener("pointercancel", h, !0));
-  }, f = () => {
-    g(), o = null, r = !1, c = [], s = 0, a = 0, u = !1, l(null);
-  }, E = (e) => {
-    const d = t.getVisibleItemIdsInOrder().filter((M) => {
-      const I = t.getElementForId(M);
-      return I ? P(e, I.getBoundingClientRect()) : !1;
-    }), i = r ? [...c, ...d] : d;
-    t.replaceSelection(i, {
-      anchorId: r ? void 0 : i[0] ?? null,
-      lastInteractedId: i[i.length - 1] ?? null,
-      preserveAnchor: r
+function x(e) {
+  const n = e.getBoundingClientRect();
+  return {
+    left: n.left,
+    top: n.top,
+    scrollLeft: e.scrollLeft,
+    scrollTop: e.scrollTop,
+    clientLeft: e.clientLeft,
+    clientTop: e.clientTop
+  };
+}
+function C(e, n) {
+  return {
+    left: e.left - n.left + n.scrollLeft - n.clientLeft,
+    top: e.top - n.top + n.scrollTop - n.clientTop,
+    width: e.width,
+    height: e.height
+  };
+}
+function D(e) {
+  const [n, c] = S(null);
+  let o = null, l = !1, u = [], a = 0, f = 0, s = !1;
+  const I = () => {
+    typeof document > "u" || (document.removeEventListener("pointermove", p, !0), document.removeEventListener("pointerup", m, !0), document.removeEventListener("pointercancel", h, !0));
+  }, d = () => {
+    I(), o = null, l = !1, u = [], a = 0, f = 0, s = !1, c(null);
+  }, L = (t) => {
+    const i = e.getVisibleItemIdsInOrder().filter((R) => {
+      const g = e.getElementForId(R);
+      return g ? O(t, g.getBoundingClientRect()) : !1;
+    }), r = l ? [...u, ...i] : i;
+    e.replaceSelection(r, {
+      anchorId: l ? void 0 : r[0] ?? null,
+      lastInteractedId: r[r.length - 1] ?? null,
+      preserveAnchor: l
     });
-  }, m = (e) => {
-    if (o !== e.pointerId) return;
-    const d = Math.hypot(e.clientX - s, e.clientY - a);
-    if (!u && d < w)
+  }, p = (t) => {
+    if (o !== t.pointerId) return;
+    const i = Math.hypot(t.clientX - a, t.clientY - f);
+    if (!s && i < y)
       return;
-    e.preventDefault(), u = !0;
-    const i = x(s, a, e.clientX, e.clientY);
-    l(i), E(i);
-  }, p = (e) => {
-    o === e.pointerId && (!u && !r && t.clearSelection(), f());
-  }, h = (e) => {
-    o === e.pointerId && f();
-  }, S = (e) => {
-    e.pointerType !== "mouse" || e.button !== 0 || _(e.target) && t.getContainer() && (o = e.pointerId, r = L(e), c = r ? t.getSelectedIds() : [], s = e.clientX, a = e.clientY, u = !1, typeof document < "u" && (document.addEventListener("pointermove", m, !0), document.addEventListener("pointerup", p, !0), document.addEventListener("pointercancel", h, !0)), e.preventDefault());
-  }, v = b(() => {
-    const e = n();
-    return e ? {
-      left: `${e.left}px`,
-      top: `${e.top}px`,
-      width: `${e.width}px`,
-      height: `${e.height}px`
-    } : null;
+    t.preventDefault(), s = !0;
+    const r = T(a, f, t.clientX, t.clientY);
+    c(r), L(r);
+  }, m = (t) => {
+    o === t.pointerId && (!s && !l && e.clearSelection(), d());
+  }, h = (t) => {
+    o === t.pointerId && d();
+  }, v = (t) => {
+    t.pointerType !== "mouse" || t.button !== 0 || P(t.target) && e.getContainer() && (o = t.pointerId, l = M(t), u = l ? e.getSelectedIds() : [], a = t.clientX, f = t.clientY, s = !1, typeof document < "u" && (document.addEventListener("pointermove", p, !0), document.addEventListener("pointerup", m, !0), document.addEventListener("pointercancel", h, !0)), t.preventDefault());
+  }, E = b(() => {
+    const t = n();
+    if (!t) return null;
+    const i = e.getOverlayHost?.() ?? e.getContainer();
+    if (!i) return null;
+    const r = C(t, x(i));
+    return {
+      left: `${r.left}px`,
+      top: `${r.top}px`,
+      width: `${r.width}px`,
+      height: `${r.height}px`
+    };
   });
-  return y(() => {
-    f();
+  return w(() => {
+    d();
   }), {
-    overlayStyle: v,
-    onPointerDown: S
+    overlayStyle: E,
+    onPointerDown: v
   };
 }
 export {
-  G as FILE_BROWSER_MARQUEE_OVERLAY_CLASS,
-  C as createFileBrowserMarqueeSelection
+  A as FILE_BROWSER_MARQUEE_OVERLAY_CLASS,
+  D as createFileBrowserMarqueeSelection,
+  C as projectViewportRectToOverlayHost
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.35.49",
+  "version": "0.35.50",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",