@floegence/floe-webapp-core 0.35.31 → 0.35.33

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

@@ -9,10 +9,11 @@ import { useFileBrowserDrag as wt } from "../../context/FileBrowserDragContext.j
 import { FileItemIcon as Ct } from "./FileIcons.js";
 import { ChevronDown as bt } from "../icons/index.js";
 import { createLongPressContextMenuHandlers as Dt } from "./longPressContextMenu.js";
-import { ResizeHandle as nt } from "../layout/ResizeHandle.js";
+import { ResizeHandle as it } from "../layout/ResizeHandle.js";
 import { fileBrowserTouchTargetAttrs as St } from "./touchInteractionGuard.js";
-var $t = /* @__PURE__ */ _("<span class=truncate>"), Mt = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), zt = /* @__PURE__ */ _("<span>"), _t = /* @__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'), yt = /* @__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'), It = /* @__PURE__ */ _("<div>"), Pt = /* @__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="flex-1 min-h-0 overflow-auto">'), kt = /* @__PURE__ */ _('<span>No files matching "<!>"'), Tt = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Lt = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), pt = /* @__PURE__ */ _("<span>This folder is empty"), it = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Rt = /* @__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">');
-function Wt(t) {
+import { createItemContextMenuEvent as $t } from "./contextMenuEvent.js";
+var Mt = /* @__PURE__ */ _("<span class=truncate>"), zt = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), _t = /* @__PURE__ */ _("<span>"), yt = /* @__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'), It = /* @__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'), Pt = /* @__PURE__ */ _("<div>"), kt = /* @__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="flex-1 min-h-0 overflow-auto">'), Tt = /* @__PURE__ */ _('<span>No files matching "<!>"'), Lt = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Rt = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), pt = /* @__PURE__ */ _("<span>This folder is empty"), nt = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Wt = /* @__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">');
+function Et(t) {
   const a = Z(() => {
     if (!t.match || t.match.matchedIndices.length === 0)
       return [{
@@ -34,7 +35,7 @@ function Wt(t) {
     }), C;
   });
   return (() => {
-    var C = $t();
+    var C = Mt();
     return u(C, m(at, {
       get each() {
         return a();
@@ -47,14 +48,14 @@ function Wt(t) {
           return rt(() => L.text);
         },
         get children() {
-          var D = Mt();
+          var D = zt();
           return u(D, () => L.text), D;
         }
       })
     })), C;
   })();
 }
-function Kt(t) {
+function Jt(t) {
   const a = st(), C = wt(), L = () => (t.enableDragDrop ?? !0) && !!C, D = () => t.instanceId ?? "default", S = 32, f = vt({
     count: () => a.currentFiles().length,
     itemSize: () => S,
@@ -62,35 +63,35 @@ function Kt(t) {
   }), y = Z(() => {
     const {
       start: r,
-      end: n
+      end: i
     } = f.range();
-    return a.currentFiles().slice(r, n);
+    return a.currentFiles().slice(r, i);
   }), E = (r) => {
-    const n = a.sortConfig();
+    const i = a.sortConfig();
     a.setSortConfig({
       field: r,
-      direction: n.field === r && n.direction === "asc" ? "desc" : "asc"
+      direction: i.field === r && i.direction === "asc" ? "desc" : "asc"
     });
   }, O = (r) => r === void 0 ? "-" : r < 1024 ? `${r} B` : r < 1024 * 1024 ? `${(r / 1024).toFixed(1)} KB` : `${(r / (1024 * 1024)).toFixed(1)} MB`, $ = (r) => r ? r.toLocaleDateString("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric"
   }) : "-", X = (r) => {
-    const n = () => a.sortConfig(), l = () => n().field === r.field;
+    const i = () => a.sortConfig(), l = () => i().field === r.field;
     return (() => {
-      var d = zt();
+      var d = _t();
       return u(d, m(bt, {
         get class() {
-          return H("w-3 h-3 transition-transform duration-150", l() && n().direction === "asc" && "rotate-180");
+          return H("w-3 h-3 transition-transform duration-150", l() && i().direction === "asc" && "rotate-180");
         }
       })), F(() => V(d, H("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), d;
     })();
-  }, j = et("(min-width: 640px)"), A = et("(min-width: 768px)"), [K, Y] = ot(null), p = xt(K), N = (r, n, l) => Math.max(n, Math.min(l, r)), h = Z(() => {
-    const r = p()?.width ?? 0, n = j(), l = A(), d = a.listColumnRatios(), x = 160, g = 120, w = 80, M = 128, o = 96;
-    if (!n || r <= 0)
+  }, j = et("(min-width: 640px)"), A = et("(min-width: 768px)"), [K, Y] = ot(null), R = xt(K), N = (r, i, l) => Math.max(i, Math.min(l, r)), h = Z(() => {
+    const r = R()?.width ?? 0, i = j(), l = A(), d = a.listColumnRatios(), x = 160, g = 120, w = 80, M = 128, o = 96;
+    if (!i || r <= 0)
       return {
         width: r,
-        showModified: n,
+        showModified: i,
         showSize: l,
         minName: x,
         minModified: g,
@@ -103,7 +104,7 @@ function Kt(t) {
       let P = (k > 0 ? d.modifiedAt / k : d.modifiedAt) * r;
       return P = N(P, g, Math.max(g, r - x)), {
         width: r,
-        showModified: n,
+        showModified: i,
         showSize: l,
         minName: x,
         minModified: g,
@@ -112,31 +113,31 @@ function Kt(t) {
         sizeWidth: 0
       };
     }
-    let i = Math.max(g, d.modifiedAt * r), s = Math.max(w, d.size * r);
+    let n = Math.max(g, d.modifiedAt * r), s = Math.max(w, d.size * r);
     const b = Math.max(0, r - x);
-    if (i + s > b) {
-      const I = i + s - b, k = Math.max(0, i - g), P = Math.max(0, s - w), T = k + P;
-      T > 0 && (i -= I * (k / T), s -= I * (P / T));
+    if (n + s > b) {
+      const I = n + s - b, k = Math.max(0, n - g), P = Math.max(0, s - w), T = k + P;
+      T > 0 && (n -= I * (k / T), s -= I * (P / T));
     }
-    return i = Math.max(g, i), s = Math.max(w, s), {
+    return n = Math.max(g, n), s = Math.max(w, s), {
       width: r,
-      showModified: n,
+      showModified: i,
       showSize: l,
       minName: x,
       minModified: g,
       minSize: w,
-      modifiedWidth: i,
+      modifiedWidth: n,
       sizeWidth: s
     };
   }), G = () => h().modifiedWidth, U = () => h().sizeWidth, Q = (r) => {
-    const n = h();
-    if (!n.showModified || n.width <= 0) return;
-    if (!n.showSize) {
+    const i = h();
+    if (!i.showModified || i.width <= 0) return;
+    if (!i.showSize) {
       const I = a.listColumnRatios().size, k = Math.max(0, 1 - I);
       if (k <= 0) return;
-      const P = n.width, T = n.modifiedWidth, e = Math.max(0, P - T), c = n.minName - e, z = T - n.minModified, v = N(r, c, z);
+      const P = i.width, T = i.modifiedWidth, e = Math.max(0, P - T), c = i.minName - e, z = T - i.minModified, v = N(r, c, z);
       if (v === 0) return;
-      const R = e + v, J = T - v, lt = R / P * k, dt = J / P * k;
+      const p = e + v, J = T - v, lt = p / P * k, dt = J / P * k;
       a.setListColumnRatios({
         name: lt,
         modifiedAt: dt,
@@ -144,56 +145,56 @@ function Kt(t) {
       });
       return;
     }
-    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, g = Math.max(0, l - d - x), w = n.minName - g, M = d - n.minModified, o = N(r, w, M);
+    const l = i.width, d = i.modifiedWidth, x = i.sizeWidth, g = Math.max(0, l - d - x), w = i.minName - g, M = d - i.minModified, o = N(r, w, M);
     if (o === 0) return;
-    const i = g + o, s = d - o;
+    const n = g + o, s = d - o;
     a.setListColumnRatios({
-      name: i / l,
+      name: n / l,
       modifiedAt: s / l,
       size: x / l
     });
   }, q = (r) => {
-    const n = h();
-    if (!n.showSize || n.width <= 0) return;
-    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, g = n.minModified - d, w = x - n.minSize, M = N(r, g, w);
+    const i = h();
+    if (!i.showSize || i.width <= 0) return;
+    const l = i.width, d = i.modifiedWidth, x = i.sizeWidth, g = i.minModified - d, w = x - i.minSize, M = N(r, g, w);
     if (M === 0) return;
-    const o = d + M, i = x - M, s = Math.max(0, l - o - i);
+    const o = d + M, n = x - M, s = Math.max(0, l - o - n);
     a.setListColumnRatios({
       name: s / l,
       modifiedAt: o / l,
-      size: i / l
+      size: n / l
     });
   };
   return (() => {
-    var r = Pt(), n = r.firstChild, l = n.firstChild, d = l.firstChild, x = d.firstChild, g = x.firstChild, w = g.nextSibling;
+    var r = kt(), i = r.firstChild, l = i.firstChild, d = l.firstChild, x = d.firstChild, g = x.firstChild, w = g.nextSibling;
     w.firstChild;
-    var M = n.nextSibling;
-    return tt(Y, n), d.$$click = () => E("name"), u(w, m(X, {
+    var M = i.nextSibling;
+    return tt(Y, i), d.$$click = () => E("name"), u(w, m(X, {
       field: "name"
     }), null), u(l, m(W, {
       get when() {
         return h().showModified;
       },
       get children() {
-        return m(nt, {
+        return m(it, {
           direction: "horizontal",
           onResize: Q
         });
       }
-    }), null), u(n, m(W, {
+    }), null), u(i, m(W, {
       get when() {
         return h().showModified;
       },
       get children() {
-        var o = _t(), i = o.firstChild;
-        return i.firstChild, i.$$click = () => E("modifiedAt"), u(i, m(X, {
+        var o = yt(), n = o.firstChild;
+        return n.firstChild, n.$$click = () => E("modifiedAt"), u(n, m(X, {
           field: "modifiedAt"
         }), null), u(o, m(W, {
           get when() {
             return h().showSize;
           },
           get children() {
-            return m(nt, {
+            return m(it, {
               direction: "horizontal",
               onResize: q
             });
@@ -206,13 +207,13 @@ function Kt(t) {
           t: void 0
         }), o;
       }
-    }), null), u(n, m(W, {
+    }), null), u(i, m(W, {
       get when() {
         return h().showSize;
       },
       get children() {
-        var o = yt(), i = o.firstChild;
-        return i.firstChild, i.$$click = () => E("size"), u(i, m(X, {
+        var o = It(), n = o.firstChild;
+        return n.firstChild, n.$$click = () => E("size"), u(n, m(X, {
           field: "size"
         }), null), F((s) => B(o, "width", `${U()}px`)), o;
       }
@@ -224,7 +225,7 @@ function Kt(t) {
       },
       get fallback() {
         return (() => {
-          var o = Lt();
+          var o = Rt();
           return u(o, m(W, {
             get when() {
               return a.filterQueryApplied().trim();
@@ -234,24 +235,24 @@ function Kt(t) {
             },
             get children() {
               return [(() => {
-                var i = kt(), s = i.firstChild, b = s.nextSibling;
-                return b.nextSibling, u(i, () => a.filterQueryApplied(), b), i;
+                var n = Tt(), s = n.firstChild, b = s.nextSibling;
+                return b.nextSibling, u(n, () => a.filterQueryApplied(), b), n;
               })(), (() => {
-                var i = Tt();
-                return i.$$click = () => a.setFilterQuery(""), i;
+                var n = Lt();
+                return n.$$click = () => a.setFilterQuery(""), n;
               })()];
             }
           })), o;
         })();
       },
       get children() {
-        var o = It();
+        var o = Pt();
         return u(o, m(at, {
           get each() {
             return y();
           },
-          children: (i) => m(Et, {
-            item: i,
+          children: (n) => m(Ft, {
+            item: n,
             formatSize: O,
             formatDate: $,
             get showModified() {
@@ -274,29 +275,31 @@ function Kt(t) {
             },
             dragContext: C
           })
-        })), F((i) => {
+        })), F((n) => {
           var s = `${f.paddingTop()}px`, b = `${f.paddingBottom()}px`;
-          return s !== i.e && B(o, "padding-top", i.e = s), b !== i.t && B(o, "padding-bottom", i.t = b), i;
+          return s !== n.e && B(o, "padding-top", n.e = s), b !== n.t && B(o, "padding-bottom", n.t = b), n;
         }, {
           e: void 0,
           t: void 0
         }), o;
       }
     })), F((o) => {
-      var i = H("flex flex-col h-full min-h-0", t.class), s = H("relative flex-1 min-w-0", h().showModified && "border-r border-border");
-      return i !== o.e && V(r, o.e = i), s !== o.t && V(l, o.t = s), o;
+      var n = H("flex flex-col h-full min-h-0", t.class), s = H("relative flex-1 min-w-0", h().showModified && "border-r border-border");
+      return n !== o.e && V(r, o.e = n), s !== o.t && V(l, o.t = s), o;
     }, {
       e: void 0,
       t: void 0
     }), r;
   })();
 }
-function Et(t) {
-  const a = st(), C = () => a.isSelected(t.item.id), L = () => a.getFilterMatchForId(t.item.id), D = gt(() => t.item), S = Dt(a, D);
+function Ft(t) {
+  const a = st(), C = () => a.isSelected(t.item.id), L = () => a.getFilterMatchForId(t.item.id), D = gt(() => t.item), S = Dt(a, D, {
+    source: "list"
+  });
   let f, y = null, E = 0, O = 0, $ = !1;
   const X = 5, j = 500;
   let A = null;
-  const [K, Y] = ot(!1), p = () => f === "touch" || f === "pen", N = () => t.item.type === "folder", h = () => N() && t.enableDragDrop && t.dragContext, G = () => {
+  const [K, Y] = ot(!1), R = () => f === "touch" || f === "pen", N = () => t.item.type === "folder", h = () => N() && t.enableDragDrop && t.dragContext, G = () => {
     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;
@@ -310,40 +313,40 @@ function Et(t) {
     typeof document > "u" || (document.removeEventListener("pointermove", d, !0), document.removeEventListener("pointerup", x, !0), document.removeEventListener("pointercancel", g, !0));
   }, r = () => {
     typeof document > "u" || (document.addEventListener("pointermove", d, !0), document.addEventListener("pointerup", x, !0), document.addEventListener("pointercancel", g, !0));
-  }, n = (e) => {
+  }, i = (e) => {
     Q(), q(), $ && t.dragContext && t.dragContext.endDrag(e), y = null, $ = !1;
   };
   ht(() => {
-    n(!1);
+    i(!1);
   });
   const l = (e, c) => {
     if (!t.enableDragDrop || !t.dragContext || $) return;
     $ = !0, C() || a.selectItem(t.item.id, !1);
-    const z = a.getSelectedItemsList(), R = (z.length > 0 && C() ? z : [t.item]).map((J) => ({
+    const z = a.getSelectedItemsList(), p = (z.length > 0 && C() ? z : [t.item]).map((J) => ({
       item: J,
       sourceInstanceId: t.instanceId,
       sourcePath: a.currentPath()
     }));
-    if (p() && "vibrate" in navigator)
+    if (R() && "vibrate" in navigator)
       try {
         navigator.vibrate(50);
       } catch {
       }
-    t.dragContext.startDrag(R, e, c);
+    t.dragContext.startDrag(p, e, c);
   }, d = (e) => {
     if (y !== e.pointerId) return;
     const c = e.clientX - E, z = e.clientY - O, v = Math.sqrt(c * c + z * z);
-    if (p() && !$ && v > 10) {
-      n(!1);
+    if (R() && !$ && v > 10) {
+      i(!1);
       return;
     }
-    !p() && !$ && v > X && l(e.clientX, e.clientY), $ && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
+    !R() && !$ && v > X && l(e.clientX, e.clientY), $ && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
   }, x = (e) => {
-    y === e.pointerId && (S.onPointerUp(), n(!0));
+    y === e.pointerId && (S.onPointerUp(), i(!0));
   }, g = (e) => {
-    y === e.pointerId && (S.onPointerCancel(), n(!1));
+    y === e.pointerId && (S.onPointerCancel(), i(!1));
   }, w = (e) => {
-    f = e.pointerType, S.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || (y = e.pointerId, E = e.clientX, O = e.clientY, $ = !1, r(), p() && (Q(), A = setTimeout(() => {
+    f = e.pointerType, S.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || (y = e.pointerId, E = e.clientX, O = e.clientY, $ = !1, r(), R() && (Q(), A = setTimeout(() => {
       y !== null && !$ && l(E, O);
     }, j))));
   }, M = (e) => {
@@ -353,13 +356,13 @@ function Et(t) {
     const c = t.dragContext.dragState();
     if (!c.isDragging) return;
     Y(!0);
-    const z = t.dragContext.canDropOn(c.draggedItems, t.item.path, t.item, t.instanceId), R = e.currentTarget?.getBoundingClientRect() ?? null;
+    const z = t.dragContext.canDropOn(c.draggedItems, t.item.path, t.item, t.instanceId), p = e.currentTarget?.getBoundingClientRect() ?? null;
     t.dragContext.setDropTarget({
       instanceId: t.instanceId,
       targetPath: t.item.path,
       targetItem: t.item
-    }, z, R);
-  }, i = (e) => {
+    }, z, p);
+  }, n = (e) => {
     if (!t.dragContext) return;
     Y(!1);
     const c = t.dragContext.dragState();
@@ -370,26 +373,28 @@ function Et(t) {
       return;
     }
     if (!S.consumeClickSuppression(e)) {
-      if (p()) {
+      if (R()) {
         a.openItem(t.item);
         return;
       }
       a.selectItem(t.item.id, e.metaKey || e.ctrlKey);
     }
   }, b = () => {
-    p() || a.openItem(t.item);
+    R() || a.openItem(t.item);
   }, I = (e) => {
-    if (e.preventDefault(), e.stopPropagation(), p()) return;
+    if (e.preventDefault(), e.stopPropagation(), R()) return;
     C() || a.selectItem(t.item.id, !1);
     const c = a.getSelectedItemsList(), z = c.length > 0 ? c : [t.item];
-    a.showContextMenu({
+    a.showContextMenu($t({
       x: e.clientX,
       y: e.clientY,
-      items: z
-    });
+      triggerItem: t.item,
+      items: z,
+      source: "list"
+    }));
   }, k = () => t.dragContext?.dragState(), P = () => k()?.isDragging ?? !1, T = () => K() && P() && h();
   return (() => {
-    var e = Rt(), c = e.firstChild, z = c.firstChild;
+    var e = Wt(), c = e.firstChild, z = c.firstChild;
     return mt(e, ut(St, {
       onClick: s,
       onDblClick: b,
@@ -397,7 +402,7 @@ function Et(t) {
       onPointerDown: w,
       onPointerMove: M,
       onPointerEnter: o,
-      onPointerLeave: i,
+      onPointerLeave: n,
       get class() {
         return H(
           "group w-full h-8 flex items-center text-xs cursor-pointer",
@@ -417,7 +422,7 @@ function Et(t) {
         return t.item;
       },
       class: "w-4 h-4"
-    })), u(c, m(Wt, {
+    })), u(c, m(Et, {
       get name() {
         return t.item.name;
       },
@@ -429,24 +434,24 @@ function Et(t) {
         return t.showModified;
       },
       get children() {
-        var v = it();
-        return u(v, () => t.formatDate(t.item.modifiedAt)), F((R) => B(v, "width", `${t.modifiedWidthPx}px`)), v;
+        var v = nt();
+        return u(v, () => t.formatDate(t.item.modifiedAt)), F((p) => B(v, "width", `${t.modifiedWidthPx}px`)), v;
       }
     }), null), u(e, m(W, {
       get when() {
         return t.showSize;
       },
       get children() {
-        var v = it();
+        var v = nt();
         return u(v, (() => {
-          var R = rt(() => t.item.type === "folder");
-          return () => R() ? "-" : t.formatSize(t.item.size);
-        })()), F((R) => B(v, "width", `${t.sizeWidthPx}px`)), v;
+          var p = rt(() => t.item.type === "folder");
+          return () => p() ? "-" : t.formatSize(t.item.size);
+        })()), F((p) => B(v, "width", `${t.sizeWidthPx}px`)), v;
       }
     }), null), e;
   })();
 }
 ft(["click"]);
 export {
-  Kt as FileListView
+  Jt as FileListView
 };

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

@@ -0,0 +1,10 @@
+import type { ContextMenuEvent, ContextMenuSource, FileItem } from './types';
+type ItemContextMenuSource = Extract<ContextMenuSource, 'list' | 'grid' | 'tree'>;
+export declare function createItemContextMenuEvent(params: {
+    x: number;
+    y: number;
+    triggerItem: FileItem;
+    items: FileItem[];
+    source: ItemContextMenuSource;
+}): ContextMenuEvent;
+export {};

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

@@ -0,0 +1,19 @@
+function n(e, t) {
+  return t.length !== 1 || e.type !== "folder" || t[0]?.path !== e.path ? null : {
+    path: e.path,
+    item: e
+  };
+}
+function o(e) {
+  return {
+    x: e.x,
+    y: e.y,
+    items: e.items,
+    targetKind: "item",
+    source: e.source,
+    directory: n(e.triggerItem, e.items)
+  };
+}
+export {
+  o as createItemContextMenuEvent
+};

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

@@ -8,4 +8,4 @@ export { Breadcrumb, type BreadcrumbProps } from './Breadcrumb';
 export { FileBrowserToolbar, type FileBrowserToolbarProps } from './FileBrowserToolbar';
 export { FileBrowserDragPreview } from './DragPreview';
 export { FolderIcon, FolderOpenIcon, FileIcon, CodeFileIcon, JavaScriptFileIcon, TypeScriptFileIcon, ShellScriptFileIcon, ImageFileIcon, DocumentFileIcon, ConfigFileIcon, StyleFileIcon, FileItemIcon, getFileIcon, resolveFileItemIcon, } from './FileIcons';
-export type { FileItem, FileItemIconOverride, ViewMode, SortField, SortDirection, SortConfig, FileListColumnRatios, FileBrowserContextValue, ContextMenuActionType, ContextMenuItem, ContextMenuEvent, ContextMenuCallbacks, OptimisticUpdateType, OptimisticRemove, OptimisticUpdate, OptimisticInsert, OptimisticOperation, ScrollPosition, } from './types';
+export type { FileItem, FileItemIconOverride, ViewMode, SortField, SortDirection, SortConfig, FileListColumnRatios, FileBrowserContextValue, ContextMenuActionType, ContextMenuTargetKind, ContextMenuSource, ContextMenuDirectory, ContextMenuItem, ContextMenuEvent, ContextMenuCallbacks, OptimisticUpdateType, OptimisticRemove, OptimisticUpdate, OptimisticInsert, OptimisticOperation, ScrollPosition, } from './types';

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

@@ -3,6 +3,7 @@ export declare function createLongPressContextMenuHandlers(ctx: FileBrowserConte
     delayMs?: number;
     moveTolerancePx?: number;
     selectOnOpen?: boolean;
+    source?: 'list' | 'grid' | 'tree';
 }): {
     onPointerDown: (e: PointerEvent) => void;
     onPointerMove: (e: PointerEvent) => void;

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

@@ -1,42 +1,55 @@
-import { onCleanup as T } from "solid-js";
-function v(s, i, u) {
-  const d = u?.delayMs ?? 500, p = u?.moveTolerancePx ?? 10, m = u?.selectOnOpen ?? !0;
-  let n = null, l = null, c = !1;
-  const r = () => {
-    n !== null && typeof window < "u" && (window.clearTimeout(n), n = null), l = null;
+import { onCleanup as v } from "solid-js";
+import { createItemContextMenuEvent as p } from "./contextMenuEvent.js";
+function S(s, r, i) {
+  const m = i?.delayMs ?? 500, w = i?.moveTolerancePx ?? 10, C = i?.selectOnOpen ?? !0, f = i?.source ?? "list";
+  let t = null, l = null, u = !1;
+  const c = () => {
+    t !== null && typeof window < "u" && (window.clearTimeout(t), t = null), l = null;
   }, a = () => {
-    c = !0;
-  }, w = (e, t) => {
-    if (!m) {
-      s.showContextMenu({ x: e, y: t, items: [i] }), a();
+    u = !0;
+  }, y = (e, n) => {
+    if (!C) {
+      s.showContextMenu(p({
+        x: e,
+        y: n,
+        triggerItem: r,
+        items: [r],
+        source: f
+      })), a();
       return;
     }
-    const o = i.id;
+    const o = r.id;
     s.isSelected(o) || s.selectItem(o, !1);
-    const f = s.getSelectedItemsList(), h = f.length > 0 ? f : [i];
-    s.showContextMenu({ x: e, y: t, items: h }), a();
-  }, y = (e) => {
-    if (c = !1, e.pointerType === "mouse" || typeof window > "u") return;
-    r(), l = { x: e.clientX, y: e.clientY };
-    const t = e.clientX, o = e.clientY;
-    n = window.setTimeout(() => {
-      n = null, w(t, o);
-    }, d);
-  }, C = (e) => {
-    if (n === null || !l) return;
-    const t = e.clientX - l.x, o = e.clientY - l.y;
-    Math.hypot(t, o) > p && (r(), a());
-  }, M = () => r(), P = () => r(), x = (e) => c ? (c = !1, e.preventDefault(), e.stopPropagation(), !0) : !1;
-  return T(() => {
-    r();
+    const d = s.getSelectedItemsList(), h = d.length > 0 ? d : [r];
+    s.showContextMenu(p({
+      x: e,
+      y: n,
+      triggerItem: r,
+      items: h,
+      source: f
+    })), a();
+  }, M = (e) => {
+    if (u = !1, e.pointerType === "mouse" || typeof window > "u") return;
+    c(), l = { x: e.clientX, y: e.clientY };
+    const n = e.clientX, o = e.clientY;
+    t = window.setTimeout(() => {
+      t = null, y(n, o);
+    }, m);
+  }, g = (e) => {
+    if (t === null || !l) return;
+    const n = e.clientX - l.x, o = e.clientY - l.y;
+    Math.hypot(n, o) > w && (c(), a());
+  }, x = () => c(), P = () => c(), I = (e) => u ? (u = !1, e.preventDefault(), e.stopPropagation(), !0) : !1;
+  return v(() => {
+    c();
   }), {
-    onPointerDown: y,
-    onPointerMove: C,
-    onPointerUp: M,
+    onPointerDown: M,
+    onPointerMove: g,
+    onPointerUp: x,
     onPointerCancel: P,
-    consumeClickSuppression: x
+    consumeClickSuppression: I
   };
 }
 export {
-  v as createLongPressContextMenuHandlers
+  S as createLongPressContextMenuHandlers
 };

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

@@ -42,6 +42,12 @@ export interface FileListColumnRatios {
  * Built-in context menu action types
  */
 export type ContextMenuActionType = 'duplicate' | 'copy-name' | 'ask-agent' | 'copy-to' | 'move-to' | 'delete' | 'rename' | 'custom';
+export type ContextMenuTargetKind = 'item' | 'directory-background';
+export type ContextMenuSource = 'list' | 'grid' | 'tree' | 'background' | 'custom';
+export interface ContextMenuDirectory {
+    path: string;
+    item?: FileItem;
+}
 /**
  * Context menu item definition
  */
@@ -63,7 +69,9 @@ export interface ContextMenuItem {
     /** Keyboard shortcut hint (display only) */
     shortcut?: string;
     /** Custom handler for 'custom' type actions */
-    onAction?: (items: FileItem[]) => void;
+    onAction?: (items: FileItem[], event?: ContextMenuEvent) => void;
+    /** Cascade submenu items */
+    children?: ContextMenuItem[];
 }
 /**
  * Context menu event with position and target items
@@ -75,6 +83,12 @@ export interface ContextMenuEvent {
     y: number;
     /** Target file/folder items */
     items: FileItem[];
+    /** Semantic menu target category */
+    targetKind: ContextMenuTargetKind;
+    /** Source surface that opened the menu */
+    source: ContextMenuSource;
+    /** Resolved directory scope for directory-scoped actions */
+    directory: ContextMenuDirectory | null;
 }
 /**
  * Callbacks for context menu actions