@floegence/floe-webapp-core 0.35.6 → 0.35.7

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

@@ -1,97 +1,98 @@
-import { addEventListener as de, use as q, insert as w, createComponent as b, effect as Y, setStyleProperty as G, className as L, template as D, Dynamic as ge, setAttribute as ue, memo as me, delegateEvents as fe } from "solid-js/web";
-import { createSignal as J, createMemo as j, createEffect as he, Show as p, For as Z, untrack as ve, onCleanup as xe } from "solid-js";
-import { cn as k } from "../../utils/cn.js";
-import { useResizeObserver as be } from "../../hooks/useResizeObserver.js";
+import { addEventListener as se, use as W, insert as w, createComponent as b, effect as Y, setStyleProperty as X, className as G, template as C, spread as de, mergeProps as ge, Dynamic as ue, setAttribute as me, memo as fe, delegateEvents as he } from "solid-js/web";
+import { createSignal as q, createMemo as j, createEffect as ve, Show as A, For as J, untrack as xe, onCleanup as be } from "solid-js";
+import { cn as $ } from "../../utils/cn.js";
+import { useResizeObserver as Ce } from "../../hooks/useResizeObserver.js";
 import { useVirtualWindow as De } from "../../hooks/useVirtualWindow.js";
-import { useFileBrowser as ee } from "./FileBrowserContext.js";
-import { useFileBrowserDrag as Ce } from "../../context/FileBrowserDragContext.js";
-import { FolderIcon as Ie, getFileIcon as we } from "./FileIcons.js";
-import { createLongPressContextMenuHandlers as ye } from "./longPressContextMenu.js";
-var Se = /* @__PURE__ */ D('<mark class="bg-warning/40 text-inherit rounded-sm">'), Me = /* @__PURE__ */ D('<div class="grid gap-2">'), Pe = /* @__PURE__ */ D('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), _e = /* @__PURE__ */ D('<span>No files matching "<!>"'), $e = /* @__PURE__ */ D('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Te = /* @__PURE__ */ D('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Ee = /* @__PURE__ */ D("<span>This folder is empty"), Le = /* @__PURE__ */ D('<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">'), ke = /* @__PURE__ */ D("<button type=button><div></div><span></span><div>");
-function Fe(e) {
+import { useFileBrowser as Z } from "./FileBrowserContext.js";
+import { useFileBrowserDrag as Ie } from "../../context/FileBrowserDragContext.js";
+import { FolderIcon as we, getFileIcon as ye } from "./FileIcons.js";
+import { createLongPressContextMenuHandlers as Pe } from "./longPressContextMenu.js";
+import { fileBrowserTouchTargetAttrs as Se } from "./touchInteractionGuard.js";
+var Me = /* @__PURE__ */ C('<mark class="bg-warning/40 text-inherit rounded-sm">'), Te = /* @__PURE__ */ C('<div class="grid gap-2">'), _e = /* @__PURE__ */ C('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Ee = /* @__PURE__ */ C('<span>No files matching "<!>"'), Le = /* @__PURE__ */ C('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), $e = /* @__PURE__ */ C('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), ke = /* @__PURE__ */ C("<span>This folder is empty"), Fe = /* @__PURE__ */ C('<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">'), He = /* @__PURE__ */ C("<button type=button><div></div><span></span><div>");
+function Re(e) {
   const n = j(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
         text: e.name,
         highlight: !1
       }];
-    const o = [], C = new Set(e.match.matchedIndices);
+    const o = [], D = new Set(e.match.matchedIndices);
     let h = "", u = !1;
-    for (let c = 0; c < e.name.length; c++) {
-      const f = C.has(c);
-      c === 0 ? (u = f, h = e.name[c]) : f === u ? h += e.name[c] : (o.push({
+    for (let l = 0; l < e.name.length; l++) {
+      const f = D.has(l);
+      l === 0 ? (u = f, h = e.name[l]) : f === u ? h += e.name[l] : (o.push({
         text: h,
         highlight: u
-      }), h = e.name[c], u = f);
+      }), h = e.name[l], u = f);
     }
     return h && o.push({
       text: h,
       highlight: u
     }), o;
   });
-  return b(Z, {
+  return b(J, {
     get each() {
       return n();
     },
-    children: (o) => b(p, {
+    children: (o) => b(A, {
       get when() {
         return o.highlight;
       },
       get fallback() {
-        return me(() => o.text);
+        return fe(() => o.text);
       },
       get children() {
-        var C = Se();
-        return w(C, () => o.text), C;
+        var D = Me();
+        return w(D, () => o.text), D;
       }
     })
   });
 }
-function je(e) {
-  const n = ee(), o = Ce(), C = () => (e.enableDragDrop ?? !0) && !!o, h = () => e.instanceId ?? "default", u = 112, c = 8, f = 180, y = 2, T = 6, [m, A] = J(null), O = be(m), v = j(() => {
-    const d = O()?.width ?? 0;
-    if (d <= 0) return y;
-    const x = Math.floor((d + c) / (f + c));
-    return Math.max(y, Math.min(T, x));
-  }), F = () => u + c, s = De({
+function ze(e) {
+  const n = Z(), o = Ie(), D = () => (e.enableDragDrop ?? !0) && !!o, h = () => e.instanceId ?? "default", u = 112, l = 8, f = 180, y = 2, E = 6, [m, O] = q(null), p = Ce(m), v = j(() => {
+    const s = p()?.width ?? 0;
+    if (s <= 0) return y;
+    const x = Math.floor((s + l) / (f + l));
+    return Math.max(y, Math.min(E, x));
+  }), k = () => u + l, c = De({
     count: () => Math.ceil(n.currentFiles().length / Math.max(1, v())),
-    itemSize: F,
+    itemSize: k,
     overscan: 2
-  }), B = () => s.range().start * v(), E = () => Math.min(n.currentFiles().length, s.range().end * v()), H = j(() => n.currentFiles().slice(B(), E()));
-  let $ = null, S = y;
-  return he(() => {
-    const d = v();
-    if (!$) {
-      S = d;
+  }), N = () => c.range().start * v(), L = () => Math.min(n.currentFiles().length, c.range().end * v()), F = j(() => n.currentFiles().slice(N(), L()));
+  let _ = null, P = y;
+  return ve(() => {
+    const s = v();
+    if (!_) {
+      P = s;
       return;
     }
-    if (d === S) return;
-    const x = F(), a = Math.floor($.scrollTop / Math.max(1, x)) * Math.max(1, S), r = Math.floor(a / Math.max(1, d));
-    $.scrollTop = r * x, s.onScroll(), S = d;
+    if (s === P) return;
+    const x = k(), a = Math.floor(_.scrollTop / Math.max(1, x)) * Math.max(1, P), r = Math.floor(a / Math.max(1, s));
+    _.scrollTop = r * x, c.onScroll(), P = s;
   }), (() => {
-    var d = Pe(), x = d.firstChild, M = x.firstChild;
-    return de(d, "scroll", s.onScroll), q((a) => {
-      $ = a, s.scrollRef(a), n.setScrollContainer(a);
-    }, d), q((a) => A(a), M), w(x, b(p, {
+    var s = _e(), x = s.firstChild, S = x.firstChild;
+    return se(s, "scroll", c.onScroll), W((a) => {
+      _ = a, c.scrollRef(a), n.setScrollContainer(a);
+    }, s), W((a) => O(a), S), w(x, b(A, {
       get when() {
         return n.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var a = Te();
-          return w(a, b(p, {
+          var a = $e();
+          return w(a, b(A, {
             get when() {
               return n.filterQueryApplied().trim();
             },
             get fallback() {
-              return Ee();
+              return ke();
             },
             get children() {
               return [(() => {
-                var r = _e(), P = r.firstChild, I = P.nextSibling;
+                var r = Ee(), M = r.firstChild, I = M.nextSibling;
                 return I.nextSibling, w(r, () => n.filterQueryApplied(), I), r;
               })(), (() => {
-                var r = $e();
+                var r = Le();
                 return r.$$click = () => n.setFilterQuery(""), r;
               })()];
             }
@@ -99,122 +100,122 @@ function je(e) {
         })();
       },
       get children() {
-        var a = Me();
-        return w(a, b(Z, {
+        var a = Te();
+        return w(a, b(J, {
           get each() {
-            return H();
+            return F();
           },
-          children: (r) => b(He, {
+          children: (r) => b(Xe, {
             item: r,
             get instanceId() {
               return h();
             },
             get enableDragDrop() {
-              return C();
+              return D();
             },
             dragContext: o
           })
         })), Y((r) => {
-          var P = `repeat(${v()}, minmax(0, 1fr))`, I = `${s.paddingTop()}px`, R = `${s.paddingBottom()}px`;
-          return P !== r.e && G(a, "grid-template-columns", r.e = P), I !== r.t && G(a, "padding-top", r.t = I), R !== r.a && G(a, "padding-bottom", r.a = R), r;
+          var M = `repeat(${v()}, minmax(0, 1fr))`, I = `${c.paddingTop()}px`, H = `${c.paddingBottom()}px`;
+          return M !== r.e && X(a, "grid-template-columns", r.e = M), I !== r.t && X(a, "padding-top", r.t = I), H !== r.a && X(a, "padding-bottom", r.a = H), r;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), a;
       }
-    }), null), Y(() => L(d, k("h-full min-h-0 overflow-auto", e.class))), d;
+    }), null), Y(() => G(s, $("h-full min-h-0 overflow-auto", e.class))), s;
   })();
 }
-function He(e) {
-  const n = ee(), o = () => n.isSelected(e.item.id), C = () => n.getFilterMatchForId(e.item.id), h = ve(() => e.item), u = ye(n, h);
-  let c, f = null, y = 0, T = 0, m = !1;
-  const A = 5, O = 500;
+function Xe(e) {
+  const n = Z(), o = () => n.isSelected(e.item.id), D = () => n.getFilterMatchForId(e.item.id), h = xe(() => e.item), u = Pe(n, h);
+  let l, f = null, y = 0, E = 0, m = !1;
+  const O = 5, p = 500;
   let v = null;
-  const [F, N] = J(!1), s = () => c === "touch" || c === "pen", B = () => e.item.type === "folder", E = () => B() && e.enableDragDrop && e.dragContext, H = () => {
-    if (!E() || !e.dragContext) return !1;
+  const [k, B] = q(!1), c = () => l === "touch" || l === "pen", N = () => e.item.type === "folder", L = () => N() && e.enableDragDrop && e.dragContext, F = () => {
+    if (!L() || !e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? e.dragContext.canDropOn(t.draggedItems, e.item.path, e.item, e.instanceId) : !1;
-  }, $ = () => {
+  }, _ = () => {
     if (!e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? t.draggedItems.some((i) => i.item.id === e.item.id) : !1;
-  }, S = () => {
+  }, P = () => {
     v !== null && (clearTimeout(v), v = null);
-  }, d = () => {
-    typeof document > "u" || (document.removeEventListener("pointermove", r, !0), document.removeEventListener("pointerup", P, !0), document.removeEventListener("pointercancel", I, !0));
+  }, s = () => {
+    typeof document > "u" || (document.removeEventListener("pointermove", r, !0), document.removeEventListener("pointerup", M, !0), document.removeEventListener("pointercancel", I, !0));
   }, x = () => {
-    typeof document > "u" || (document.addEventListener("pointermove", r, !0), document.addEventListener("pointerup", P, !0), document.addEventListener("pointercancel", I, !0));
-  }, M = (t) => {
-    S(), d(), m && e.dragContext && e.dragContext.endDrag(t), f = null, m = !1;
+    typeof document > "u" || (document.addEventListener("pointermove", r, !0), document.addEventListener("pointerup", M, !0), document.addEventListener("pointercancel", I, !0));
+  }, S = (t) => {
+    P(), s(), m && e.dragContext && e.dragContext.endDrag(t), f = null, m = !1;
   };
-  xe(() => {
-    M(!1);
+  be(() => {
+    S(!1);
   });
   const a = (t, i) => {
     if (!e.enableDragDrop || !e.dragContext || m) return;
     m = !0, o() || n.selectItem(e.item.id, !1);
-    const g = n.getSelectedItemsList(), l = (g.length > 0 && o() ? g : [e.item]).map((X) => ({
-      item: X,
+    const g = n.getSelectedItemsList(), d = (g.length > 0 && o() ? g : [e.item]).map((R) => ({
+      item: R,
       sourceInstanceId: e.instanceId,
       sourcePath: n.currentPath()
     }));
-    if (s() && "vibrate" in navigator)
+    if (c() && "vibrate" in navigator)
       try {
         navigator.vibrate(50);
       } catch {
       }
-    e.dragContext.startDrag(l, t, i);
+    e.dragContext.startDrag(d, t, i);
   }, r = (t) => {
     if (f !== t.pointerId) return;
-    const i = t.clientX - y, g = t.clientY - T, _ = Math.sqrt(i * i + g * g);
-    if (s() && !m && _ > 10) {
-      M(!1);
+    const i = t.clientX - y, g = t.clientY - E, T = Math.sqrt(i * i + g * g);
+    if (c() && !m && T > 10) {
+      S(!1);
       return;
     }
-    !s() && !m && _ > A && a(t.clientX, t.clientY), m && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
-  }, P = (t) => {
-    f === t.pointerId && (u.onPointerUp(), M(!0));
+    !c() && !m && T > O && a(t.clientX, t.clientY), m && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+  }, M = (t) => {
+    f === t.pointerId && (u.onPointerUp(), S(!0));
   }, I = (t) => {
-    f === t.pointerId && (u.onPointerCancel(), M(!1));
-  }, R = (t) => {
-    c = t.pointerType, u.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (f = t.pointerId, y = t.clientX, T = t.clientY, m = !1, x(), s() && (S(), v = setTimeout(() => {
-      f !== null && !m && a(y, T);
-    }, O))));
+    f === t.pointerId && (u.onPointerCancel(), S(!1));
+  }, H = (t) => {
+    l = t.pointerType, u.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (f = t.pointerId, y = t.clientX, E = t.clientY, m = !1, x(), c() && (P(), v = setTimeout(() => {
+      f !== null && !m && a(y, E);
+    }, p))));
+  }, ee = (t) => {
+    l = t.pointerType, u.onPointerMove(t);
   }, te = (t) => {
-    c = t.pointerType, u.onPointerMove(t);
-  }, ne = (t) => {
-    if (!E() || !e.dragContext) return;
+    if (!L() || !e.dragContext) return;
     const i = e.dragContext.dragState();
     if (!i.isDragging) return;
-    N(!0);
-    const g = e.dragContext.canDropOn(i.draggedItems, e.item.path, e.item, e.instanceId), l = t.currentTarget?.getBoundingClientRect() ?? null;
+    B(!0);
+    const g = e.dragContext.canDropOn(i.draggedItems, e.item.path, e.item, e.instanceId), d = t.currentTarget?.getBoundingClientRect() ?? null;
     e.dragContext.setDropTarget({
       instanceId: e.instanceId,
       targetPath: e.item.path,
       targetItem: e.item
-    }, g, l);
-  }, re = (t) => {
+    }, g, d);
+  }, ne = (t) => {
     if (!e.dragContext) return;
-    N(!1);
+    B(!1);
     const i = e.dragContext.dragState();
     i.isDragging && i.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
-  }, ie = (t) => {
+  }, re = (t) => {
     if (m) {
       m = !1;
       return;
     }
     if (!u.consumeClickSuppression(t)) {
-      if (s()) {
+      if (c()) {
         n.openItem(e.item);
         return;
       }
       n.selectItem(e.item.id, t.metaKey || t.ctrlKey);
     }
-  }, ae = () => {
-    s() || n.openItem(e.item);
-  }, oe = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), s()) return;
+  }, ie = () => {
+    c() || n.openItem(e.item);
+  }, ae = (t) => {
+    if (t.preventDefault(), t.stopPropagation(), c()) return;
     o() || n.selectItem(e.item.id, !1);
     const i = n.getSelectedItemsList(), g = i.length > 0 ? i : [e.item];
     n.showContextMenu({
@@ -222,54 +223,64 @@ function He(e) {
       y: t.clientY,
       items: g
     });
-  }, le = () => e.item.type === "folder" ? Ie : we(e.item.extension), ce = () => e.dragContext?.dragState(), se = () => ce()?.isDragging ?? !1, U = () => F() && se() && E();
+  }, oe = () => e.item.type === "folder" ? we : ye(e.item.extension), le = () => e.dragContext?.dragState(), ce = () => le()?.isDragging ?? !1, U = () => k() && ce() && L();
   return (() => {
-    var t = ke(), i = t.firstChild, g = i.nextSibling, _ = g.nextSibling;
-    return t.addEventListener("pointerleave", re), t.addEventListener("pointerenter", ne), t.$$pointermove = te, t.$$pointerdown = R, t.$$contextmenu = oe, t.$$dblclick = ae, t.$$click = ie, w(t, b(p, {
+    var t = He(), i = t.firstChild, g = i.nextSibling, T = g.nextSibling;
+    return de(t, ge(Se, {
+      onClick: re,
+      onDblClick: ie,
+      onContextMenu: ae,
+      onPointerDown: H,
+      onPointerMove: ee,
+      onPointerEnter: te,
+      onPointerLeave: ne,
+      get class() {
+        return $(
+          "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]",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "active:scale-[0.98]",
+          o() && "bg-accent ring-2 ring-primary/50",
+          // Drag state styling - being dragged items become translucent and shrink
+          _() && "opacity-40 scale-90",
+          // Drop target styling - enhanced visual feedback for folders
+          U() && F() && ["bg-primary/15 ring-2 ring-primary/60", "scale-105 shadow-lg shadow-primary/15"],
+          U() && !F() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
+        );
+      }
+    }), !1, !0), w(t, b(A, {
       get when() {
         return o();
       },
       get children() {
-        return Le();
+        return Fe();
       }
-    }), i), w(i, b(ge, {
+    }), i), w(i, b(ue, {
       get component() {
-        return le();
+        return oe();
       },
       class: "w-8 h-8"
-    })), w(g, b(Fe, {
+    })), w(g, b(Re, {
       get name() {
         return e.item.name;
       },
       get match() {
-        return C();
+        return D();
       }
-    })), Y((l) => {
-      var X = k(
-        "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]",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "active:scale-[0.98]",
-        o() && "bg-accent ring-2 ring-primary/50",
-        // Drag state styling - being dragged items become translucent and shrink
-        $() && "opacity-40 scale-90",
-        // Drop target styling - enhanced visual feedback for folders
-        U() && H() && ["bg-primary/15 ring-2 ring-primary/60", "scale-105 shadow-lg shadow-primary/15"],
-        U() && !H() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
-      ), V = k("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"), z = k("text-xs text-center line-clamp-2 w-full px-1", "transition-colors duration-150", o() && "font-medium"), Q = e.item.name, K = k("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), W = 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 X !== l.e && L(t, l.e = X), V !== l.t && L(i, l.t = V), z !== l.a && L(g, l.a = z), Q !== l.o && ue(g, "title", l.o = Q), K !== l.i && L(_, l.i = K), W !== l.n && G(_, "background", l.n = W), l;
+    })), Y((d) => {
+      var R = $("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"), V = $("text-xs text-center line-clamp-2 w-full px-1", "transition-colors duration-150", o() && "font-medium"), z = e.item.name, Q = $("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), K = 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 R !== d.e && G(i, d.e = R), V !== d.t && G(g, d.t = V), z !== d.a && me(g, "title", d.a = z), Q !== d.o && G(T, d.o = Q), K !== d.i && X(T, "background", d.i = K), d;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
-      i: void 0,
-      n: void 0
+      i: void 0
     }), t;
   })();
 }
-fe(["click", "dblclick", "contextmenu", "pointerdown", "pointermove"]);
+he(["click"]);
 export {
-  je as FileGridView
+  ze as FileGridView
 };