@floegence/floe-webapp-core 0.35.34 → 0.35.35

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

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