@floegence/floe-webapp-core 0.72.0 → 0.74.0

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

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