@floegence/floe-webapp-core 0.35.20 → 0.35.21

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

@@ -1,15 +1,15 @@
-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 ce, mergeProps as de, setAttribute as ge, memo as ue, delegateEvents as me } from "solid-js/web";
-import { createSignal as q, createMemo as j, createEffect as fe, Show as A, For as J, untrack as he, onCleanup as ve } from "solid-js";
+import { addEventListener as le, use as K, insert as w, createComponent as b, effect as Y, setStyleProperty as X, className as G, template as C, spread as ce, mergeProps as se, memo as de, delegateEvents as ge } from "solid-js/web";
+import { createSignal as W, createMemo as j, createEffect as ue, Show as p, For as q, untrack as me, onCleanup as fe } from "solid-js";
 import { cn as $ } from "../../utils/cn.js";
-import { useResizeObserver as xe } from "../../hooks/useResizeObserver.js";
-import { useVirtualWindow as be } from "../../hooks/useVirtualWindow.js";
-import { useFileBrowser as Z } from "./FileBrowserContext.js";
-import { useFileBrowserDrag as Ce } from "../../context/FileBrowserDragContext.js";
-import { FileItemIcon as De } from "./FileIcons.js";
-import { createLongPressContextMenuHandlers as Ie } from "./longPressContextMenu.js";
-import { fileBrowserTouchTargetAttrs as we } from "./touchInteractionGuard.js";
-var ye = /* @__PURE__ */ C('<mark class="bg-warning/40 text-inherit rounded-sm">'), Pe = /* @__PURE__ */ C('<div class="grid gap-2">'), Se = /* @__PURE__ */ C('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Me = /* @__PURE__ */ C('<span>No files matching "<!>"'), Te = /* @__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">'), Ee = /* @__PURE__ */ C("<span>This folder is empty"), Le = /* @__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">'), $e = /* @__PURE__ */ C("<button type=button><div></div><span></span><div>");
-function ke(e) {
+import { useResizeObserver as he } from "../../hooks/useResizeObserver.js";
+import { useVirtualWindow as ve } from "../../hooks/useVirtualWindow.js";
+import { useFileBrowser as J } from "./FileBrowserContext.js";
+import { useFileBrowserDrag as xe } from "../../context/FileBrowserDragContext.js";
+import { FileItemIcon as be } from "./FileIcons.js";
+import { createLongPressContextMenuHandlers as Ce } from "./longPressContextMenu.js";
+import { fileBrowserTouchTargetAttrs as De } from "./touchInteractionGuard.js";
+var Ie = /* @__PURE__ */ C('<mark class="bg-warning/40 text-inherit rounded-sm">'), we = /* @__PURE__ */ C('<div class="grid gap-2">'), ye = /* @__PURE__ */ C('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Pe = /* @__PURE__ */ C('<span>No files matching "<!>"'), Se = /* @__PURE__ */ C('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Me = /* @__PURE__ */ C('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), _e = /* @__PURE__ */ C("<span>This folder is empty"), Te = /* @__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">'), Ee = /* @__PURE__ */ C("<button type=button><div></div><span></span><div>");
+function Le(e) {
   const n = j(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
@@ -17,82 +17,82 @@ function ke(e) {
         highlight: !1
       }];
     const o = [], D = new Set(e.match.matchedIndices);
-    let h = "", u = !1;
+    let h = "", d = !1;
     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({
+      l === 0 ? (d = f, h = e.name[l]) : f === d ? h += e.name[l] : (o.push({
         text: h,
-        highlight: u
-      }), h = e.name[l], u = f);
+        highlight: d
+      }), h = e.name[l], d = f);
     }
     return h && o.push({
       text: h,
-      highlight: u
+      highlight: d
     }), o;
   });
-  return b(J, {
+  return b(q, {
     get each() {
       return n();
     },
-    children: (o) => b(A, {
+    children: (o) => b(p, {
       get when() {
         return o.highlight;
       },
       get fallback() {
-        return ue(() => o.text);
+        return de(() => o.text);
       },
       get children() {
-        var D = ye();
+        var D = Ie();
         return w(D, () => o.text), D;
       }
     })
   });
 }
-function je(e) {
-  const n = Z(), o = Ce(), D = () => (e.enableDragDrop ?? !0) && !!o, h = () => e.instanceId ?? "default", u = 112, l = 8, f = 180, y = 2, E = 6, [m, O] = q(null), p = xe(m), v = j(() => {
-    const c = p()?.width ?? 0;
-    if (c <= 0) return y;
-    const x = Math.floor((c + l) / (f + l));
+function Ne(e) {
+  const n = J(), o = xe(), D = () => (e.enableDragDrop ?? !0) && !!o, h = () => e.instanceId ?? "default", d = 112, l = 8, f = 180, y = 2, E = 6, [g, A] = W(null), O = he(g), v = j(() => {
+    const s = O()?.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, s = be({
+  }), k = () => d + l, c = ve({
     count: () => Math.ceil(n.currentFiles().length / Math.max(1, v())),
     itemSize: k,
     overscan: 2
-  }), N = () => s.range().start * v(), L = () => Math.min(n.currentFiles().length, s.range().end * v()), F = j(() => n.currentFiles().slice(N(), L()));
-  let _ = null, P = y;
-  return fe(() => {
-    const c = v();
-    if (!_) {
-      P = c;
+  }), N = () => c.range().start * v(), L = () => Math.min(n.currentFiles().length, c.range().end * v()), F = j(() => n.currentFiles().slice(N(), L()));
+  let T = null, P = y;
+  return ue(() => {
+    const s = v();
+    if (!T) {
+      P = s;
       return;
     }
-    if (c === P) return;
-    const x = k(), a = Math.floor(_.scrollTop / Math.max(1, x)) * Math.max(1, P), r = Math.floor(a / Math.max(1, c));
-    _.scrollTop = r * x, s.onScroll(), P = c;
+    if (s === P) return;
+    const x = k(), a = Math.floor(T.scrollTop / Math.max(1, x)) * Math.max(1, P), r = Math.floor(a / Math.max(1, s));
+    T.scrollTop = r * x, c.onScroll(), P = s;
   }), (() => {
-    var c = Se(), x = c.firstChild, S = x.firstChild;
-    return se(c, "scroll", s.onScroll), W((a) => {
-      _ = a, s.scrollRef(a), n.setScrollContainer(a);
-    }, c), W((a) => O(a), S), w(x, b(A, {
+    var s = ye(), x = s.firstChild, S = x.firstChild;
+    return le(s, "scroll", c.onScroll), K((a) => {
+      T = a, c.scrollRef(a), n.setScrollContainer(a);
+    }, s), K((a) => A(a), S), w(x, b(p, {
       get when() {
         return n.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var a = _e();
-          return w(a, b(A, {
+          var a = Me();
+          return w(a, b(p, {
             get when() {
               return n.filterQueryApplied().trim();
             },
             get fallback() {
-              return Ee();
+              return _e();
             },
             get children() {
               return [(() => {
-                var r = Me(), M = r.firstChild, I = M.nextSibling;
+                var r = Pe(), M = r.firstChild, I = M.nextSibling;
                 return I.nextSibling, w(r, () => n.filterQueryApplied(), I), r;
               })(), (() => {
-                var r = Te();
+                var r = Se();
                 return r.$$click = () => n.setFilterQuery(""), r;
               })()];
             }
@@ -100,12 +100,12 @@ function je(e) {
         })();
       },
       get children() {
-        var a = Pe();
-        return w(a, b(J, {
+        var a = we();
+        return w(a, b(q, {
           get each() {
             return F();
           },
-          children: (r) => b(Fe, {
+          children: (r) => b($e, {
             item: r,
             get instanceId() {
               return h();
@@ -116,7 +116,7 @@ function je(e) {
             dragContext: o
           })
         })), Y((r) => {
-          var M = `repeat(${v()}, minmax(0, 1fr))`, I = `${s.paddingTop()}px`, H = `${s.paddingBottom()}px`;
+          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,
@@ -124,116 +124,119 @@ function je(e) {
           a: void 0
         }), a;
       }
-    }), null), Y(() => G(c, $("h-full min-h-0 overflow-auto", e.class))), c;
+    }), null), Y(() => G(s, $("h-full min-h-0 overflow-auto", e.class))), s;
   })();
 }
-function Fe(e) {
-  const n = Z(), o = () => n.isSelected(e.item.id), D = () => n.getFilterMatchForId(e.item.id), h = he(() => e.item), u = Ie(n, h);
-  let l, f = null, y = 0, E = 0, m = !1;
-  const O = 5, p = 500;
+function $e(e) {
+  const n = J(), o = () => n.isSelected(e.item.id), D = () => n.getFilterMatchForId(e.item.id), h = me(() => e.item), d = Ce(n, h);
+  let l, f = null, y = 0, E = 0, g = !1;
+  const A = 5, O = 500;
   let v = null;
-  const [k, B] = q(!1), s = () => l === "touch" || l === "pen", N = () => e.item.type === "folder", L = () => N() && e.enableDragDrop && e.dragContext, F = () => {
+  const [k, B] = W(!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;
-  }, _ = () => {
+  }, T = () => {
     if (!e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? t.draggedItems.some((i) => i.item.id === e.item.id) : !1;
   }, P = () => {
     v !== null && (clearTimeout(v), v = null);
-  }, c = () => {
+  }, 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", M, !0), document.addEventListener("pointercancel", I, !0));
   }, S = (t) => {
-    P(), c(), m && e.dragContext && e.dragContext.endDrag(t), f = null, m = !1;
+    P(), s(), g && e.dragContext && e.dragContext.endDrag(t), f = null, g = !1;
   };
-  ve(() => {
+  fe(() => {
     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(), d = (g.length > 0 && o() ? g : [e.item]).map((R) => ({
+    if (!e.enableDragDrop || !e.dragContext || g) return;
+    g = !0, o() || n.selectItem(e.item.id, !1);
+    const u = n.getSelectedItemsList(), m = (u.length > 0 && o() ? u : [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(d, t, i);
+    e.dragContext.startDrag(m, t, i);
   }, r = (t) => {
     if (f !== t.pointerId) return;
-    const i = t.clientX - y, g = t.clientY - E, T = Math.sqrt(i * i + g * g);
-    if (s() && !m && T > 10) {
+    const i = t.clientX - y, u = t.clientY - E, _ = Math.sqrt(i * i + u * u);
+    if (c() && !g && _ > 10) {
       S(!1);
       return;
     }
-    !s() && !m && T > O && a(t.clientX, t.clientY), m && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+    !c() && !g && _ > A && a(t.clientX, t.clientY), g && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
   }, M = (t) => {
-    f === t.pointerId && (u.onPointerUp(), S(!0));
+    f === t.pointerId && (d.onPointerUp(), S(!0));
   }, I = (t) => {
-    f === t.pointerId && (u.onPointerCancel(), S(!1));
+    f === t.pointerId && (d.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(), s() && (P(), v = setTimeout(() => {
-      f !== null && !m && a(y, E);
-    }, p))));
+    l = t.pointerType, d.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (f = t.pointerId, y = t.clientX, E = t.clientY, g = !1, x(), c() && (P(), v = setTimeout(() => {
+      f !== null && !g && a(y, E);
+    }, O))));
+  }, Z = (t) => {
+    l = t.pointerType, d.onPointerMove(t);
   }, ee = (t) => {
-    l = t.pointerType, u.onPointerMove(t);
-  }, te = (t) => {
     if (!L() || !e.dragContext) return;
     const i = e.dragContext.dragState();
     if (!i.isDragging) return;
     B(!0);
-    const g = e.dragContext.canDropOn(i.draggedItems, e.item.path, e.item, e.instanceId), d = t.currentTarget?.getBoundingClientRect() ?? null;
+    const u = e.dragContext.canDropOn(i.draggedItems, e.item.path, e.item, e.instanceId), m = t.currentTarget?.getBoundingClientRect() ?? null;
     e.dragContext.setDropTarget({
       instanceId: e.instanceId,
       targetPath: e.item.path,
       targetItem: e.item
-    }, g, d);
-  }, ne = (t) => {
+    }, u, m);
+  }, te = (t) => {
     if (!e.dragContext) return;
     B(!1);
     const i = e.dragContext.dragState();
     i.isDragging && i.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
-  }, re = (t) => {
-    if (m) {
-      m = !1;
+  }, ne = (t) => {
+    if (g) {
+      g = !1;
       return;
     }
-    if (!u.consumeClickSuppression(t)) {
-      if (s()) {
+    if (!d.consumeClickSuppression(t)) {
+      if (c()) {
         n.openItem(e.item);
         return;
       }
       n.selectItem(e.item.id, t.metaKey || t.ctrlKey);
     }
-  }, ie = () => {
-    s() || n.openItem(e.item);
-  }, ae = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), s()) return;
+  }, re = () => {
+    c() || n.openItem(e.item);
+  }, ie = (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];
+    const i = n.getSelectedItemsList(), u = i.length > 0 ? i : [e.item];
     n.showContextMenu({
       x: t.clientX,
       y: t.clientY,
-      items: g
+      items: u
     });
-  }, oe = () => e.dragContext?.dragState(), le = () => oe()?.isDragging ?? !1, U = () => k() && le() && L();
+  }, ae = () => e.dragContext?.dragState(), oe = () => ae()?.isDragging ?? !1, U = () => k() && oe() && L();
   return (() => {
-    var t = $e(), i = t.firstChild, g = i.nextSibling, T = g.nextSibling;
-    return ce(t, de(we, {
-      onClick: re,
-      onDblClick: ie,
-      onContextMenu: ae,
+    var t = Ee(), i = t.firstChild, u = i.nextSibling, _ = u.nextSibling;
+    return ce(t, se(De, {
+      get title() {
+        return e.item.name;
+      },
+      onClick: ne,
+      onDblClick: re,
+      onContextMenu: ie,
       onPointerDown: H,
-      onPointerMove: ee,
-      onPointerEnter: te,
-      onPointerLeave: ne,
+      onPointerMove: Z,
+      onPointerEnter: ee,
+      onPointerLeave: te,
       get class() {
         return $(
           "group relative flex flex-col items-center gap-2 p-3 rounded-lg cursor-pointer h-28",
@@ -243,44 +246,43 @@ function Fe(e) {
           "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",
+          T() && "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, {
+    }), !1, !0), w(t, b(p, {
       get when() {
         return o();
       },
       get children() {
-        return Le();
+        return Te();
       }
-    }), i), w(i, b(De, {
+    }), i), w(i, b(be, {
       get item() {
         return e.item;
       },
       class: "w-8 h-8"
-    })), w(g, b(ke, {
+    })), w(u, b(Le, {
       get name() {
         return e.item.name;
       },
       get match() {
         return D();
       }
-    })), 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 && ge(g, "title", d.a = z), Q !== d.o && G(T, d.o = Q), K !== d.i && X(T, "background", d.i = K), d;
+    })), Y((m) => {
+      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 = $("block w-full min-w-0 truncate px-1 text-xs text-center", "transition-colors duration-150", o() && "font-medium"), z = $("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), Q = 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 !== m.e && G(i, m.e = R), V !== m.t && G(u, m.t = V), z !== m.a && G(_, m.a = z), Q !== m.o && X(_, "background", m.o = Q), m;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0,
-      i: void 0
+      o: void 0
     }), t;
   })();
 }
-me(["click"]);
+ge(["click"]);
 export {
-  je as FileGridView
+  Ne as FileGridView
 };

package/package.json

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