@floegence/floe-webapp-core 0.35.19 → 0.35.21

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

@@ -1,92 +1,92 @@
-import { use as et, insert as u, createComponent as m, effect as E, className as j, setStyleProperty as B, addEventListener as ct, template as _, spread as mt, mergeProps as ut, Dynamic as ft, memo as ot, delegateEvents as gt } from "solid-js/web";
-import { createMemo as tt, createSignal as at, Show as W, For as st, untrack as ht, onCleanup as xt } from "solid-js";
+import { use as tt, insert as u, createComponent as m, effect as F, className as V, setStyleProperty as B, addEventListener as ct, template as _, spread as mt, mergeProps as ut, memo as rt, delegateEvents as ft } from "solid-js/web";
+import { createMemo as Z, createSignal as ot, Show as W, For as at, untrack as gt, onCleanup as ht } from "solid-js";
 import { cn as H } from "../../utils/cn.js";
-import { useMediaQuery as nt } from "../../hooks/useMediaQuery.js";
-import { useResizeObserver as vt } from "../../hooks/useResizeObserver.js";
-import { useVirtualWindow as wt } from "../../hooks/useVirtualWindow.js";
-import { useFileBrowser as lt } from "./FileBrowserContext.js";
-import { useFileBrowserDrag as Ct } from "../../context/FileBrowserDragContext.js";
-import { FolderIcon as bt, getFileIcon as Dt } from "./FileIcons.js";
-import { ChevronDown as St } from "../icons/index.js";
-import { createLongPressContextMenuHandlers as $t } from "./longPressContextMenu.js";
-import { ResizeHandle as it } from "../layout/ResizeHandle.js";
-import { fileBrowserTouchTargetAttrs as Mt } from "./touchInteractionGuard.js";
-var zt = /* @__PURE__ */ _("<span class=truncate>"), _t = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), yt = /* @__PURE__ */ _("<span>"), It = /* @__PURE__ */ _('<div><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), Pt = /* @__PURE__ */ _('<div class=shrink-0><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Size'), kt = /* @__PURE__ */ _("<div>"), Tt = /* @__PURE__ */ _('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"><span class="flex items-center gap-2 min-w-0"><span class="flex-shrink-0 w-4 h-4"aria-hidden=true></span><span class="flex items-center min-w-0"><span class=truncate>Name</span></span></span></button></div></div><div class="flex-1 min-h-0 overflow-auto">'), Lt = /* @__PURE__ */ _('<span>No files matching "<!>"'), pt = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Rt = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Wt = /* @__PURE__ */ _("<span>This folder is empty"), rt = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ft = /* @__PURE__ */ _('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="flex-shrink-0 w-4 h-4">');
-function Et(t) {
-  const a = tt(() => {
+import { useMediaQuery as et } from "../../hooks/useMediaQuery.js";
+import { useResizeObserver as xt } from "../../hooks/useResizeObserver.js";
+import { useVirtualWindow as vt } from "../../hooks/useVirtualWindow.js";
+import { useFileBrowser as st } from "./FileBrowserContext.js";
+import { useFileBrowserDrag as wt } from "../../context/FileBrowserDragContext.js";
+import { FileItemIcon as Ct } from "./FileIcons.js";
+import { ChevronDown as bt } from "../icons/index.js";
+import { createLongPressContextMenuHandlers as Dt } from "./longPressContextMenu.js";
+import { ResizeHandle as nt } from "../layout/ResizeHandle.js";
+import { fileBrowserTouchTargetAttrs as St } from "./touchInteractionGuard.js";
+var $t = /* @__PURE__ */ _("<span class=truncate>"), Mt = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), zt = /* @__PURE__ */ _("<span>"), _t = /* @__PURE__ */ _('<div><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), yt = /* @__PURE__ */ _('<div class=shrink-0><button type=button class="group w-full flex items-center justify-start text-left px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Size'), It = /* @__PURE__ */ _("<div>"), Pt = /* @__PURE__ */ _('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"><span class="flex items-center gap-2 min-w-0"><span class="flex-shrink-0 w-4 h-4"aria-hidden=true></span><span class="flex items-center min-w-0"><span class=truncate>Name</span></span></span></button></div></div><div class="flex-1 min-h-0 overflow-auto">'), kt = /* @__PURE__ */ _('<span>No files matching "<!>"'), Tt = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Lt = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), pt = /* @__PURE__ */ _("<span>This folder is empty"), it = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Rt = /* @__PURE__ */ _('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="flex-shrink-0 w-4 h-4">');
+function Wt(t) {
+  const a = Z(() => {
     if (!t.match || t.match.matchedIndices.length === 0)
       return [{
         text: t.name,
         highlight: !1
       }];
-    const C = [], T = new Set(t.match.matchedIndices);
-    let S = "", $ = !1;
+    const C = [], L = new Set(t.match.matchedIndices);
+    let D = "", S = !1;
     for (let f = 0; f < t.name.length; f++) {
-      const y = T.has(f);
-      f === 0 ? ($ = y, S = t.name[f]) : y === $ ? S += t.name[f] : (C.push({
-        text: S,
-        highlight: $
-      }), S = t.name[f], $ = y);
+      const y = L.has(f);
+      f === 0 ? (S = y, D = t.name[f]) : y === S ? D += t.name[f] : (C.push({
+        text: D,
+        highlight: S
+      }), D = t.name[f], S = y);
     }
-    return S && C.push({
-      text: S,
-      highlight: $
+    return D && C.push({
+      text: D,
+      highlight: S
     }), C;
   });
   return (() => {
-    var C = zt();
-    return u(C, m(st, {
+    var C = $t();
+    return u(C, m(at, {
       get each() {
         return a();
       },
-      children: (T) => m(W, {
+      children: (L) => m(W, {
         get when() {
-          return T.highlight;
+          return L.highlight;
         },
         get fallback() {
-          return ot(() => T.text);
+          return rt(() => L.text);
         },
         get children() {
-          var S = _t();
-          return u(S, () => T.text), S;
+          var D = Mt();
+          return u(D, () => L.text), D;
         }
       })
     })), C;
   })();
 }
-function Jt(t) {
-  const a = lt(), C = Ct(), T = () => (t.enableDragDrop ?? !0) && !!C, S = () => t.instanceId ?? "default", $ = 32, f = wt({
+function Kt(t) {
+  const a = st(), C = wt(), L = () => (t.enableDragDrop ?? !0) && !!C, D = () => t.instanceId ?? "default", S = 32, f = vt({
     count: () => a.currentFiles().length,
-    itemSize: () => $,
+    itemSize: () => S,
     overscan: 12
-  }), y = tt(() => {
+  }), y = Z(() => {
     const {
       start: r,
       end: n
     } = f.range();
     return a.currentFiles().slice(r, n);
-  }), F = (r) => {
+  }), E = (r) => {
     const n = a.sortConfig();
     a.setSortConfig({
       field: r,
       direction: n.field === r && n.direction === "asc" ? "desc" : "asc"
     });
-  }, O = (r) => r === void 0 ? "-" : r < 1024 ? `${r} B` : r < 1024 * 1024 ? `${(r / 1024).toFixed(1)} KB` : `${(r / (1024 * 1024)).toFixed(1)} MB`, M = (r) => r ? r.toLocaleDateString("en-US", {
+  }, O = (r) => r === void 0 ? "-" : r < 1024 ? `${r} B` : r < 1024 * 1024 ? `${(r / 1024).toFixed(1)} KB` : `${(r / (1024 * 1024)).toFixed(1)} MB`, $ = (r) => r ? r.toLocaleDateString("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric"
   }) : "-", X = (r) => {
     const n = () => a.sortConfig(), l = () => n().field === r.field;
     return (() => {
-      var d = yt();
-      return u(d, m(St, {
+      var d = zt();
+      return u(d, m(bt, {
         get class() {
           return H("w-3 h-3 transition-transform duration-150", l() && n().direction === "asc" && "rotate-180");
         }
-      })), E(() => j(d, H("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), d;
+      })), F(() => V(d, H("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), d;
     })();
-  }, K = nt("(min-width: 640px)"), A = nt("(min-width: 768px)"), [q, U] = at(null), L = vt(q), N = (r, n, l) => Math.max(n, Math.min(l, r)), h = tt(() => {
-    const r = L()?.width ?? 0, n = K(), l = A(), d = a.listColumnRatios(), x = 160, g = 120, v = 80, z = 128, o = 96;
+  }, j = et("(min-width: 640px)"), A = et("(min-width: 768px)"), [K, Y] = ot(null), p = xt(K), N = (r, n, l) => Math.max(n, Math.min(l, r)), h = Z(() => {
+    const r = p()?.width ?? 0, n = j(), l = A(), d = a.listColumnRatios(), x = 160, g = 120, w = 80, M = 128, o = 96;
     if (!n || r <= 0)
       return {
         width: r,
@@ -94,8 +94,8 @@ function Jt(t) {
         showSize: l,
         minName: x,
         minModified: g,
-        minSize: v,
-        modifiedWidth: z,
+        minSize: w,
+        modifiedWidth: M,
         sizeWidth: o
       };
     if (!l) {
@@ -107,44 +107,44 @@ function Jt(t) {
         showSize: l,
         minName: x,
         minModified: g,
-        minSize: v,
+        minSize: w,
         modifiedWidth: P,
         sizeWidth: 0
       };
     }
-    let i = Math.max(g, d.modifiedAt * r), s = Math.max(v, d.size * r);
+    let i = Math.max(g, d.modifiedAt * r), s = Math.max(w, d.size * r);
     const b = Math.max(0, r - x);
     if (i + s > b) {
-      const I = i + s - b, k = Math.max(0, i - g), P = Math.max(0, s - v), p = k + P;
-      p > 0 && (i -= I * (k / p), s -= I * (P / p));
+      const I = i + s - b, k = Math.max(0, i - g), P = Math.max(0, s - w), T = k + P;
+      T > 0 && (i -= I * (k / T), s -= I * (P / T));
     }
-    return i = Math.max(g, i), s = Math.max(v, s), {
+    return i = Math.max(g, i), s = Math.max(w, s), {
       width: r,
       showModified: n,
       showSize: l,
       minName: x,
       minModified: g,
-      minSize: v,
+      minSize: w,
       modifiedWidth: i,
       sizeWidth: s
     };
-  }), G = () => h().modifiedWidth, Q = () => h().sizeWidth, V = (r) => {
+  }), G = () => h().modifiedWidth, U = () => h().sizeWidth, Q = (r) => {
     const n = h();
     if (!n.showModified || n.width <= 0) return;
     if (!n.showSize) {
       const I = a.listColumnRatios().size, k = Math.max(0, 1 - I);
       if (k <= 0) return;
-      const P = n.width, p = n.modifiedWidth, Y = Math.max(0, P - p), e = n.minName - Y, c = p - n.minModified, w = N(r, e, c);
-      if (w === 0) return;
-      const D = Y + w, R = p - w, Z = D / P * k, dt = R / P * k;
+      const P = n.width, T = n.modifiedWidth, e = Math.max(0, P - T), c = n.minName - e, z = T - n.minModified, v = N(r, c, z);
+      if (v === 0) return;
+      const R = e + v, J = T - v, lt = R / P * k, dt = J / P * k;
       a.setListColumnRatios({
-        name: Z,
+        name: lt,
         modifiedAt: dt,
         size: I
       });
       return;
     }
-    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, g = Math.max(0, l - d - x), v = n.minName - g, z = d - n.minModified, o = N(r, v, z);
+    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, g = Math.max(0, l - d - x), w = n.minName - g, M = d - n.minModified, o = N(r, w, M);
     if (o === 0) return;
     const i = g + o, s = d - o;
     a.setListColumnRatios({
@@ -152,12 +152,12 @@ function Jt(t) {
       modifiedAt: s / l,
       size: x / l
     });
-  }, J = (r) => {
+  }, q = (r) => {
     const n = h();
     if (!n.showSize || n.width <= 0) return;
-    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, g = n.minModified - d, v = x - n.minSize, z = N(r, g, v);
-    if (z === 0) return;
-    const o = d + z, i = x - z, s = Math.max(0, l - o - i);
+    const l = n.width, d = n.modifiedWidth, x = n.sizeWidth, g = n.minModified - d, w = x - n.minSize, M = N(r, g, w);
+    if (M === 0) return;
+    const o = d + M, i = x - M, s = Math.max(0, l - o - i);
     a.setListColumnRatios({
       name: s / l,
       modifiedAt: o / l,
@@ -165,19 +165,19 @@ function Jt(t) {
     });
   };
   return (() => {
-    var r = Tt(), n = r.firstChild, l = n.firstChild, d = l.firstChild, x = d.firstChild, g = x.firstChild, v = g.nextSibling;
-    v.firstChild;
-    var z = n.nextSibling;
-    return et(U, n), d.$$click = () => F("name"), u(v, m(X, {
+    var r = Pt(), n = r.firstChild, l = n.firstChild, d = l.firstChild, x = d.firstChild, g = x.firstChild, w = g.nextSibling;
+    w.firstChild;
+    var M = n.nextSibling;
+    return tt(Y, n), d.$$click = () => E("name"), u(w, m(X, {
       field: "name"
     }), null), u(l, m(W, {
       get when() {
         return h().showModified;
       },
       get children() {
-        return m(it, {
+        return m(nt, {
           direction: "horizontal",
-          onResize: V
+          onResize: Q
         });
       }
     }), null), u(n, m(W, {
@@ -185,22 +185,22 @@ function Jt(t) {
         return h().showModified;
       },
       get children() {
-        var o = It(), i = o.firstChild;
-        return i.firstChild, i.$$click = () => F("modifiedAt"), u(i, m(X, {
+        var o = _t(), i = o.firstChild;
+        return i.firstChild, i.$$click = () => E("modifiedAt"), u(i, m(X, {
           field: "modifiedAt"
         }), null), u(o, m(W, {
           get when() {
             return h().showSize;
           },
           get children() {
-            return m(it, {
+            return m(nt, {
               direction: "horizontal",
-              onResize: J
+              onResize: q
             });
           }
-        }), null), E((s) => {
+        }), null), F((s) => {
           var b = H("relative shrink-0", h().showSize && "border-r border-border"), I = `${G()}px`;
-          return b !== s.e && j(o, s.e = b), I !== s.t && B(o, "width", s.t = I), s;
+          return b !== s.e && V(o, s.e = b), I !== s.t && B(o, "width", s.t = I), s;
         }, {
           e: void 0,
           t: void 0
@@ -211,33 +211,33 @@ function Jt(t) {
         return h().showSize;
       },
       get children() {
-        var o = Pt(), i = o.firstChild;
-        return i.firstChild, i.$$click = () => F("size"), u(i, m(X, {
+        var o = yt(), i = o.firstChild;
+        return i.firstChild, i.$$click = () => E("size"), u(i, m(X, {
           field: "size"
-        }), null), E((s) => B(o, "width", `${Q()}px`)), o;
+        }), null), F((s) => B(o, "width", `${U()}px`)), o;
       }
-    }), null), ct(z, "scroll", f.onScroll), et((o) => {
+    }), null), ct(M, "scroll", f.onScroll), tt((o) => {
       f.scrollRef(o), a.setScrollContainer(o);
-    }, z), u(z, m(W, {
+    }, M), u(M, m(W, {
       get when() {
         return a.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var o = Rt();
+          var o = Lt();
           return u(o, m(W, {
             get when() {
               return a.filterQueryApplied().trim();
             },
             get fallback() {
-              return Wt();
+              return pt();
             },
             get children() {
               return [(() => {
-                var i = Lt(), s = i.firstChild, b = s.nextSibling;
+                var i = kt(), s = i.firstChild, b = s.nextSibling;
                 return b.nextSibling, u(i, () => a.filterQueryApplied(), b), i;
               })(), (() => {
-                var i = pt();
+                var i = Tt();
                 return i.$$click = () => a.setFilterQuery(""), i;
               })()];
             }
@@ -245,15 +245,15 @@ function Jt(t) {
         })();
       },
       get children() {
-        var o = kt();
-        return u(o, m(st, {
+        var o = It();
+        return u(o, m(at, {
           get each() {
             return y();
           },
-          children: (i) => m(At, {
+          children: (i) => m(Et, {
             item: i,
             formatSize: O,
-            formatDate: M,
+            formatDate: $,
             get showModified() {
               return h().showModified;
             },
@@ -264,17 +264,17 @@ function Jt(t) {
               return G();
             },
             get sizeWidthPx() {
-              return Q();
+              return U();
             },
             get instanceId() {
-              return S();
+              return D();
             },
             get enableDragDrop() {
-              return T();
+              return L();
             },
             dragContext: C
           })
-        })), E((i) => {
+        })), F((i) => {
           var s = `${f.paddingTop()}px`, b = `${f.paddingBottom()}px`;
           return s !== i.e && B(o, "padding-top", i.e = s), b !== i.t && B(o, "padding-bottom", i.t = b), i;
         }, {
@@ -282,49 +282,49 @@ function Jt(t) {
           t: void 0
         }), o;
       }
-    })), E((o) => {
+    })), F((o) => {
       var i = H("flex flex-col h-full min-h-0", t.class), s = H("relative flex-1 min-w-0", h().showModified && "border-r border-border");
-      return i !== o.e && j(r, o.e = i), s !== o.t && j(l, o.t = s), o;
+      return i !== o.e && V(r, o.e = i), s !== o.t && V(l, o.t = s), o;
     }, {
       e: void 0,
       t: void 0
     }), r;
   })();
 }
-function At(t) {
-  const a = lt(), C = () => a.isSelected(t.item.id), T = () => a.getFilterMatchForId(t.item.id), S = ht(() => t.item), $ = $t(a, S);
-  let f, y = null, F = 0, O = 0, M = !1;
-  const X = 5, K = 500;
+function Et(t) {
+  const a = st(), C = () => a.isSelected(t.item.id), L = () => a.getFilterMatchForId(t.item.id), D = gt(() => t.item), S = Dt(a, D);
+  let f, y = null, E = 0, O = 0, $ = !1;
+  const X = 5, j = 500;
   let A = null;
-  const [q, U] = at(!1), L = () => f === "touch" || f === "pen", N = () => t.item.type === "folder", h = () => N() && t.enableDragDrop && t.dragContext, G = () => {
+  const [K, Y] = ot(!1), p = () => f === "touch" || f === "pen", N = () => t.item.type === "folder", h = () => N() && t.enableDragDrop && t.dragContext, G = () => {
     if (!h() || !t.dragContext) return !1;
     const e = t.dragContext.dragState();
     return e.isDragging ? t.dragContext.canDropOn(e.draggedItems, t.item.path, t.item, t.instanceId) : !1;
-  }, Q = () => {
+  }, U = () => {
     if (!t.dragContext) return !1;
     const e = t.dragContext.dragState();
     return e.isDragging ? e.draggedItems.some((c) => c.item.id === t.item.id) : !1;
-  }, V = () => {
+  }, Q = () => {
     A !== null && (clearTimeout(A), A = null);
-  }, J = () => {
+  }, q = () => {
     typeof document > "u" || (document.removeEventListener("pointermove", d, !0), document.removeEventListener("pointerup", x, !0), document.removeEventListener("pointercancel", g, !0));
   }, r = () => {
     typeof document > "u" || (document.addEventListener("pointermove", d, !0), document.addEventListener("pointerup", x, !0), document.addEventListener("pointercancel", g, !0));
   }, n = (e) => {
-    V(), J(), M && t.dragContext && t.dragContext.endDrag(e), y = null, M = !1;
+    Q(), q(), $ && t.dragContext && t.dragContext.endDrag(e), y = null, $ = !1;
   };
-  xt(() => {
+  ht(() => {
     n(!1);
   });
   const l = (e, c) => {
-    if (!t.enableDragDrop || !t.dragContext || M) return;
-    M = !0, C() || a.selectItem(t.item.id, !1);
-    const w = a.getSelectedItemsList(), R = (w.length > 0 && C() ? w : [t.item]).map((Z) => ({
-      item: Z,
+    if (!t.enableDragDrop || !t.dragContext || $) return;
+    $ = !0, C() || a.selectItem(t.item.id, !1);
+    const z = a.getSelectedItemsList(), R = (z.length > 0 && C() ? z : [t.item]).map((J) => ({
+      item: J,
       sourceInstanceId: t.instanceId,
       sourcePath: a.currentPath()
     }));
-    if (L() && "vibrate" in navigator)
+    if (p() && "vibrate" in navigator)
       try {
         navigator.vibrate(50);
       } catch {
@@ -332,70 +332,70 @@ function At(t) {
     t.dragContext.startDrag(R, e, c);
   }, d = (e) => {
     if (y !== e.pointerId) return;
-    const c = e.clientX - F, w = e.clientY - O, D = Math.sqrt(c * c + w * w);
-    if (L() && !M && D > 10) {
+    const c = e.clientX - E, z = e.clientY - O, v = Math.sqrt(c * c + z * z);
+    if (p() && !$ && v > 10) {
       n(!1);
       return;
     }
-    !L() && !M && D > X && l(e.clientX, e.clientY), M && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
+    !p() && !$ && v > X && l(e.clientX, e.clientY), $ && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
   }, x = (e) => {
-    y === e.pointerId && ($.onPointerUp(), n(!0));
+    y === e.pointerId && (S.onPointerUp(), n(!0));
   }, g = (e) => {
-    y === e.pointerId && ($.onPointerCancel(), n(!1));
-  }, v = (e) => {
-    f = e.pointerType, $.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || (y = e.pointerId, F = e.clientX, O = e.clientY, M = !1, r(), L() && (V(), A = setTimeout(() => {
-      y !== null && !M && l(F, O);
-    }, K))));
-  }, z = (e) => {
-    f = e.pointerType, $.onPointerMove(e);
+    y === e.pointerId && (S.onPointerCancel(), n(!1));
+  }, w = (e) => {
+    f = e.pointerType, S.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || (y = e.pointerId, E = e.clientX, O = e.clientY, $ = !1, r(), p() && (Q(), A = setTimeout(() => {
+      y !== null && !$ && l(E, O);
+    }, j))));
+  }, M = (e) => {
+    f = e.pointerType, S.onPointerMove(e);
   }, o = (e) => {
     if (!h() || !t.dragContext) return;
     const c = t.dragContext.dragState();
     if (!c.isDragging) return;
-    U(!0);
-    const w = t.dragContext.canDropOn(c.draggedItems, t.item.path, t.item, t.instanceId), R = e.currentTarget?.getBoundingClientRect() ?? null;
+    Y(!0);
+    const z = t.dragContext.canDropOn(c.draggedItems, t.item.path, t.item, t.instanceId), R = e.currentTarget?.getBoundingClientRect() ?? null;
     t.dragContext.setDropTarget({
       instanceId: t.instanceId,
       targetPath: t.item.path,
       targetItem: t.item
-    }, w, R);
+    }, z, R);
   }, i = (e) => {
     if (!t.dragContext) return;
-    U(!1);
+    Y(!1);
     const c = t.dragContext.dragState();
     c.isDragging && c.dropTarget?.targetPath === t.item.path && t.dragContext.setDropTarget(null, !1);
   }, s = (e) => {
-    if (M) {
-      M = !1;
+    if ($) {
+      $ = !1;
       return;
     }
-    if (!$.consumeClickSuppression(e)) {
-      if (L()) {
+    if (!S.consumeClickSuppression(e)) {
+      if (p()) {
         a.openItem(t.item);
         return;
       }
       a.selectItem(t.item.id, e.metaKey || e.ctrlKey);
     }
   }, b = () => {
-    L() || a.openItem(t.item);
+    p() || a.openItem(t.item);
   }, I = (e) => {
-    if (e.preventDefault(), e.stopPropagation(), L()) return;
+    if (e.preventDefault(), e.stopPropagation(), p()) return;
     C() || a.selectItem(t.item.id, !1);
-    const c = a.getSelectedItemsList(), w = c.length > 0 ? c : [t.item];
+    const c = a.getSelectedItemsList(), z = c.length > 0 ? c : [t.item];
     a.showContextMenu({
       x: e.clientX,
       y: e.clientY,
-      items: w
+      items: z
     });
-  }, k = () => t.item.type === "folder" ? bt : Dt(t.item.extension), P = () => t.dragContext?.dragState(), p = () => P()?.isDragging ?? !1, Y = () => q() && p() && h();
+  }, k = () => t.dragContext?.dragState(), P = () => k()?.isDragging ?? !1, T = () => K() && P() && h();
   return (() => {
-    var e = Ft(), c = e.firstChild, w = c.firstChild;
-    return mt(e, ut(Mt, {
+    var e = Rt(), c = e.firstChild, z = c.firstChild;
+    return mt(e, ut(St, {
       onClick: s,
       onDblClick: b,
       onContextMenu: I,
-      onPointerDown: v,
-      onPointerMove: z,
+      onPointerDown: w,
+      onPointerMove: M,
       onPointerEnter: o,
       onPointerLeave: i,
       get class() {
@@ -406,47 +406,47 @@ function At(t) {
           "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
           C() && "bg-accent text-accent-foreground",
           // Drag state styling - being dragged items become translucent
-          Q() && "opacity-40 scale-[0.98]",
+          U() && "opacity-40 scale-[0.98]",
           // Drop target styling - enhanced visual feedback
-          Y() && G() && ["bg-primary/15 outline outline-2 outline-primary/60", "scale-[1.01] shadow-sm shadow-primary/10"],
-          Y() && !G() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
+          T() && G() && ["bg-primary/15 outline outline-2 outline-primary/60", "scale-[1.01] shadow-sm shadow-primary/10"],
+          T() && !G() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
         );
       }
-    }), !1, !0), u(w, m(ft, {
-      get component() {
-        return k();
+    }), !1, !0), u(z, m(Ct, {
+      get item() {
+        return t.item;
       },
       class: "w-4 h-4"
-    })), u(c, m(Et, {
+    })), u(c, m(Wt, {
       get name() {
         return t.item.name;
       },
       get match() {
-        return T();
+        return L();
       }
     }), null), u(e, m(W, {
       get when() {
         return t.showModified;
       },
       get children() {
-        var D = rt();
-        return u(D, () => t.formatDate(t.item.modifiedAt)), E((R) => B(D, "width", `${t.modifiedWidthPx}px`)), D;
+        var v = it();
+        return u(v, () => t.formatDate(t.item.modifiedAt)), F((R) => B(v, "width", `${t.modifiedWidthPx}px`)), v;
       }
     }), null), u(e, m(W, {
       get when() {
         return t.showSize;
       },
       get children() {
-        var D = rt();
-        return u(D, (() => {
-          var R = ot(() => t.item.type === "folder");
+        var v = it();
+        return u(v, (() => {
+          var R = rt(() => t.item.type === "folder");
           return () => R() ? "-" : t.formatSize(t.item.size);
-        })()), E((R) => B(D, "width", `${t.sizeWidthPx}px`)), D;
+        })()), F((R) => B(v, "width", `${t.sizeWidthPx}px`)), v;
       }
     }), null), e;
   })();
 }
-gt(["click"]);
+ft(["click"]);
 export {
-  Jt as FileListView
+  Kt as FileListView
 };

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

@@ -6,5 +6,5 @@ export { FileGridView, type FileGridViewProps } from './FileGridView';
 export { FileContextMenu, type FileContextMenuProps, type BuiltinContextMenuAction, type HideItemsValue } from './FileContextMenu';
 export { Breadcrumb, type BreadcrumbProps } from './Breadcrumb';
 export { FileBrowserToolbar, type FileBrowserToolbarProps } from './FileBrowserToolbar';
-export { FolderIcon, FolderOpenIcon, FileIcon, CodeFileIcon, ShellScriptFileIcon, ImageFileIcon, DocumentFileIcon, ConfigFileIcon, StyleFileIcon, getFileIcon, } from './FileIcons';
-export type { FileItem, ViewMode, SortField, SortDirection, SortConfig, FileListColumnRatios, FileBrowserContextValue, ContextMenuActionType, ContextMenuItem, ContextMenuEvent, ContextMenuCallbacks, OptimisticUpdateType, OptimisticRemove, OptimisticUpdate, OptimisticInsert, OptimisticOperation, ScrollPosition, } from './types';
+export { FolderIcon, FolderOpenIcon, FileIcon, CodeFileIcon, JavaScriptFileIcon, TypeScriptFileIcon, ShellScriptFileIcon, ImageFileIcon, DocumentFileIcon, ConfigFileIcon, StyleFileIcon, FileItemIcon, getFileIcon, resolveFileItemIcon, } from './FileIcons';
+export type { FileItem, FileItemIconOverride, ViewMode, SortField, SortDirection, SortConfig, FileListColumnRatios, FileBrowserContextValue, ContextMenuActionType, ContextMenuItem, ContextMenuEvent, ContextMenuCallbacks, OptimisticUpdateType, OptimisticRemove, OptimisticUpdate, OptimisticInsert, OptimisticOperation, ScrollPosition, } from './types';

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

@@ -1,4 +1,7 @@
-import type { JSX, Accessor } from 'solid-js';
+import type { JSX, Accessor, Component } from 'solid-js';
+export type FileItemIconOverride = Component<{
+    class?: string;
+}> | JSX.Element;
 /**
  * Represents a file or folder item in the browser
  */
@@ -11,7 +14,7 @@ export interface FileItem {
     modifiedAt?: Date;
     extension?: string;
     children?: FileItem[];
-    icon?: JSX.Element;
+    icon?: FileItemIconOverride;
 }
 /**
  * View mode for the file browser main content area