@floegence/floe-webapp-core 0.35.19 → 0.35.20

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

@@ -1,22 +1,22 @@
-import { createComponent as o, Portal as V, insert as l, Dynamic as j, effect as u, className as D, memo as B, template as a, setAttribute as A } from "solid-js/web";
-import { createSignal as F, createEffect as U, createMemo as d, Show as m, For as X } from "solid-js";
-import { Presence as G, Motion as W } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { createComponent as o, Portal as N, insert as a, effect as u, className as $, memo as V, template as l, setAttribute as A } from "solid-js/web";
+import { createSignal as F, createEffect as j, createMemo as d, Show as m, For as B } from "solid-js";
+import { Presence as U, Motion as X } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
 import { cn as f } from "../../utils/cn.js";
-import { useFileBrowserDrag as Y } from "../../context/FileBrowserDragContext.js";
-import { FolderIcon as q, getFileIcon as H } from "./FileIcons.js";
-var J = /* @__PURE__ */ a('<div class="text-[10px] text-muted-foreground pl-6">and <!> more...'), K = /* @__PURE__ */ a("<span>Drop to move"), $ = /* @__PURE__ */ a("<div>"), L = /* @__PURE__ */ a('<div class="flex items-center gap-2.5 text-xs text-foreground"><span class="flex-shrink-0 w-4 h-4"></span><span class="truncate font-medium">'), Q = /* @__PURE__ */ a("<span>Cannot drop here"), Z = /* @__PURE__ */ a('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polyline points="20 6 9 17 4 12">'), tt = /* @__PURE__ */ a('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><line x1=18 y1=6 x2=6 y2=18></line><line x1=6 y1=6 x2=18 y2=18>');
-const x = 3, P = 4, T = 4, et = 0.2;
-function dt() {
-  const g = Y(), n = () => g?.dragState(), S = () => n()?.isDragging ?? !1, C = () => n()?.isDragEnding ?? !1, [c, h] = F(null), [s, w] = F(!1);
+import { useFileBrowserDrag as G } from "../../context/FileBrowserDragContext.js";
+import { FileItemIcon as W } from "./FileIcons.js";
+var Y = /* @__PURE__ */ l('<div class="text-[10px] text-muted-foreground pl-6">and <!> more...'), q = /* @__PURE__ */ l("<span>Drop to move"), y = /* @__PURE__ */ l("<div>"), H = /* @__PURE__ */ l('<div class="flex items-center gap-2.5 text-xs text-foreground"><span class="flex-shrink-0 w-4 h-4"></span><span class="truncate font-medium">'), J = /* @__PURE__ */ l("<span>Cannot drop here"), K = /* @__PURE__ */ l('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polyline points="20 6 9 17 4 12">'), L = /* @__PURE__ */ l('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><line x1=18 y1=6 x2=6 y2=18></line><line x1=6 y1=6 x2=18 y2=18>');
+const x = 3, P = 4, T = 4, Q = 0.2;
+function at() {
+  const g = G(), n = () => g?.dragState(), S = () => n()?.isDragging ?? !1, C = () => n()?.isDragEnding ?? !1, [c, h] = F(null), [s, w] = F(!1);
   let _ = !1;
-  U(() => {
+  j(() => {
     const t = S(), e = C();
     if (t && !e && !_ && (h(null), w(!1)), e && !_) {
       const r = n();
       if (r && r.draggedItems.length > 0) {
         const i = r.pointerPosition;
         h({
-          items: r.draggedItems.map((y) => y.item),
+          items: r.draggedItems.map((D) => D.item),
           position: {
             x: i.x + P,
             y: i.y + T
@@ -52,17 +52,17 @@ function dt() {
   }), z = d(() => {
     const t = c();
     return t?.committed && t?.target ? t.target : b();
-  }), M = d(() => c()?.committed ?? !1), p = () => n()?.isValidDrop ?? !1, O = () => !!n()?.dropTarget, I = () => O() && !c(), N = (t) => t.type === "folder" ? q : H(t.extension);
-  return o(G, {
+  }), M = d(() => c()?.committed ?? !1), p = () => n()?.isValidDrop ?? !1, O = () => !!n()?.dropTarget, I = () => O() && !c();
+  return o(U, {
     get children() {
       return o(m, {
         get when() {
-          return B(() => !!R())() && E().length > 0;
+          return V(() => !!R())() && E().length > 0;
         },
         get children() {
-          return o(V, {
+          return o(N, {
             get children() {
-              return o(W.div, {
+              return o(X.div, {
                 get class() {
                   return f("fixed top-0 left-0 pointer-events-none z-[9999]", "will-change-transform");
                 },
@@ -81,7 +81,7 @@ function dt() {
                 },
                 get transition() {
                   return {
-                    duration: s() ? et : 0,
+                    duration: s() ? Q : 0,
                     easing: "ease-out"
                   };
                 },
@@ -90,51 +90,49 @@ function dt() {
                 },
                 get children() {
                   return [(() => {
-                    var t = $();
-                    return l(t, o(X, {
+                    var t = y();
+                    return a(t, o(B, {
                       get each() {
                         return E();
                       },
                       children: (e) => (() => {
-                        var r = L(), i = r.firstChild, y = i.nextSibling;
-                        return l(i, o(j, {
-                          get component() {
-                            return N(e);
-                          },
+                        var r = H(), i = r.firstChild, D = i.nextSibling;
+                        return a(i, o(W, {
+                          item: e,
                           class: "w-4 h-4"
-                        })), l(y, () => e.name), r;
+                        })), a(D, () => e.name), r;
                       })()
-                    }), null), l(t, o(m, {
+                    }), null), a(t, o(m, {
                       get when() {
                         return k() > 0;
                       },
                       get children() {
-                        var e = J(), r = e.firstChild, i = r.nextSibling;
-                        return i.nextSibling, l(e, k, i), e;
+                        var e = Y(), r = e.firstChild, i = r.nextSibling;
+                        return i.nextSibling, a(e, k, i), e;
                       }
-                    }), null), l(t, o(m, {
+                    }), null), a(t, o(m, {
                       get when() {
                         return I();
                       },
                       get children() {
-                        var e = $();
-                        return l(e, o(m, {
+                        var e = y();
+                        return a(e, o(m, {
                           get when() {
                             return p();
                           },
                           get fallback() {
-                            return [o(nt, {
+                            return [o(tt, {
                               class: "w-3.5 h-3.5"
-                            }), Q()];
+                            }), J()];
                           },
                           get children() {
-                            return [o(rt, {
+                            return [o(Z, {
                               class: "w-3.5 h-3.5"
-                            }), K()];
+                            }), q()];
                           }
-                        })), u(() => D(e, f("flex items-center gap-1.5 pt-1.5 mt-1 border-t border-border text-[11px] font-medium", "transition-colors duration-150", p() ? "text-success" : "text-error"))), e;
+                        })), u(() => $(e, f("flex items-center gap-1.5 pt-1.5 mt-1 border-t border-border text-[11px] font-medium", "transition-colors duration-150", p() ? "text-success" : "text-error"))), e;
                       }
-                    }), null), u(() => D(t, f(
+                    }), null), u(() => $(t, f(
                       "flex flex-col gap-1 p-2.5 rounded-lg",
                       "bg-card border border-border",
                       "shadow-md",
@@ -153,8 +151,8 @@ function dt() {
                       return v() > 1;
                     },
                     get children() {
-                      var t = $();
-                      return l(t, v), u(() => D(t, f(
+                      var t = y();
+                      return a(t, v), u(() => $(t, f(
                         "absolute -top-2 -right-2",
                         "min-w-[20px] h-5 px-1.5 rounded-full",
                         "bg-foreground text-background",
@@ -175,18 +173,18 @@ function dt() {
     }
   });
 }
-function rt(g) {
+function Z(g) {
   return (() => {
-    var n = Z();
+    var n = K();
     return u(() => A(n, "class", g.class)), n;
   })();
 }
-function nt(g) {
+function tt(g) {
   return (() => {
-    var n = tt();
+    var n = L();
     return u(() => A(n, "class", g.class)), n;
   })();
 }
 export {
-  dt as DragPreview
+  at as DragPreview
 };

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 de, mergeProps as ge, Dynamic as ue, setAttribute as me, memo as fe, delegateEvents as he } from "solid-js/web";
-import { createSignal as q, createMemo as j, createEffect as ve, Show as A, For as J, untrack as xe, onCleanup as be } from "solid-js";
+import { 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 { cn as $ } from "../../utils/cn.js";
-import { useResizeObserver as Ce } from "../../hooks/useResizeObserver.js";
-import { useVirtualWindow as De } from "../../hooks/useVirtualWindow.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 Ie } from "../../context/FileBrowserDragContext.js";
-import { FolderIcon as we, getFileIcon as ye } from "./FileIcons.js";
-import { createLongPressContextMenuHandlers as Pe } from "./longPressContextMenu.js";
-import { fileBrowserTouchTargetAttrs as Se } from "./touchInteractionGuard.js";
-var Me = /* @__PURE__ */ C('<mark class="bg-warning/40 text-inherit rounded-sm">'), Te = /* @__PURE__ */ C('<div class="grid gap-2">'), _e = /* @__PURE__ */ C('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Ee = /* @__PURE__ */ C('<span>No files matching "<!>"'), Le = /* @__PURE__ */ C('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), $e = /* @__PURE__ */ C('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), ke = /* @__PURE__ */ C("<span>This folder is empty"), Fe = /* @__PURE__ */ C('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), He = /* @__PURE__ */ C("<button type=button><div></div><span></span><div>");
-function Re(e) {
+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) {
   const n = j(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
@@ -39,60 +39,60 @@ function Re(e) {
         return o.highlight;
       },
       get fallback() {
-        return fe(() => o.text);
+        return ue(() => o.text);
       },
       get children() {
-        var D = Me();
+        var D = ye();
         return w(D, () => o.text), D;
       }
     })
   });
 }
-function ze(e) {
-  const n = Z(), o = Ie(), D = () => (e.enableDragDrop ?? !0) && !!o, h = () => e.instanceId ?? "default", u = 112, l = 8, f = 180, y = 2, E = 6, [m, O] = q(null), p = Ce(m), v = j(() => {
-    const s = p()?.width ?? 0;
-    if (s <= 0) return y;
-    const x = Math.floor((s + l) / (f + l));
+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));
     return Math.max(y, Math.min(E, x));
-  }), k = () => u + l, c = De({
+  }), k = () => u + l, s = be({
     count: () => Math.ceil(n.currentFiles().length / Math.max(1, v())),
     itemSize: k,
     overscan: 2
-  }), N = () => c.range().start * v(), L = () => Math.min(n.currentFiles().length, c.range().end * v()), F = j(() => n.currentFiles().slice(N(), L()));
+  }), 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 ve(() => {
-    const s = v();
+  return fe(() => {
+    const c = v();
     if (!_) {
-      P = s;
+      P = c;
       return;
     }
-    if (s === P) return;
-    const x = k(), a = Math.floor(_.scrollTop / Math.max(1, x)) * Math.max(1, P), r = Math.floor(a / Math.max(1, s));
-    _.scrollTop = r * x, c.onScroll(), P = s;
+    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;
   }), (() => {
-    var s = _e(), x = s.firstChild, S = x.firstChild;
-    return se(s, "scroll", c.onScroll), W((a) => {
-      _ = a, c.scrollRef(a), n.setScrollContainer(a);
-    }, s), W((a) => O(a), S), w(x, b(A, {
+    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, {
       get when() {
         return n.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var a = $e();
+          var a = _e();
           return w(a, b(A, {
             get when() {
               return n.filterQueryApplied().trim();
             },
             get fallback() {
-              return ke();
+              return Ee();
             },
             get children() {
               return [(() => {
-                var r = Ee(), M = r.firstChild, I = M.nextSibling;
+                var r = Me(), M = r.firstChild, I = M.nextSibling;
                 return I.nextSibling, w(r, () => n.filterQueryApplied(), I), r;
               })(), (() => {
-                var r = Le();
+                var r = Te();
                 return r.$$click = () => n.setFilterQuery(""), r;
               })()];
             }
@@ -100,12 +100,12 @@ function ze(e) {
         })();
       },
       get children() {
-        var a = Te();
+        var a = Pe();
         return w(a, b(J, {
           get each() {
             return F();
           },
-          children: (r) => b(Xe, {
+          children: (r) => b(Fe, {
             item: r,
             get instanceId() {
               return h();
@@ -116,7 +116,7 @@ function ze(e) {
             dragContext: o
           })
         })), Y((r) => {
-          var M = `repeat(${v()}, minmax(0, 1fr))`, I = `${c.paddingTop()}px`, H = `${c.paddingBottom()}px`;
+          var M = `repeat(${v()}, minmax(0, 1fr))`, I = `${s.paddingTop()}px`, H = `${s.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,15 +124,15 @@ function ze(e) {
           a: void 0
         }), a;
       }
-    }), null), Y(() => G(s, $("h-full min-h-0 overflow-auto", e.class))), s;
+    }), null), Y(() => G(c, $("h-full min-h-0 overflow-auto", e.class))), c;
   })();
 }
-function Xe(e) {
-  const n = Z(), o = () => n.isSelected(e.item.id), D = () => n.getFilterMatchForId(e.item.id), h = xe(() => e.item), u = Pe(n, h);
+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;
   let v = null;
-  const [k, B] = q(!1), c = () => l === "touch" || l === "pen", N = () => e.item.type === "folder", L = () => N() && e.enableDragDrop && e.dragContext, F = () => {
+  const [k, B] = q(!1), s = () => 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;
@@ -142,14 +142,14 @@ function Xe(e) {
     return t.isDragging ? t.draggedItems.some((i) => i.item.id === e.item.id) : !1;
   }, P = () => {
     v !== null && (clearTimeout(v), v = null);
-  }, s = () => {
+  }, c = () => {
     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(), s(), m && e.dragContext && e.dragContext.endDrag(t), f = null, m = !1;
+    P(), c(), m && e.dragContext && e.dragContext.endDrag(t), f = null, m = !1;
   };
-  be(() => {
+  ve(() => {
     S(!1);
   });
   const a = (t, i) => {
@@ -160,7 +160,7 @@ function Xe(e) {
       sourceInstanceId: e.instanceId,
       sourcePath: n.currentPath()
     }));
-    if (c() && "vibrate" in navigator)
+    if (s() && "vibrate" in navigator)
       try {
         navigator.vibrate(50);
       } catch {
@@ -169,17 +169,17 @@ function Xe(e) {
   }, r = (t) => {
     if (f !== t.pointerId) return;
     const i = t.clientX - y, g = t.clientY - E, T = Math.sqrt(i * i + g * g);
-    if (c() && !m && T > 10) {
+    if (s() && !m && T > 10) {
       S(!1);
       return;
     }
-    !c() && !m && T > O && a(t.clientX, t.clientY), m && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+    !s() && !m && T > O && a(t.clientX, t.clientY), m && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
   }, M = (t) => {
     f === t.pointerId && (u.onPointerUp(), S(!0));
   }, I = (t) => {
     f === t.pointerId && (u.onPointerCancel(), S(!1));
   }, H = (t) => {
-    l = t.pointerType, u.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (f = t.pointerId, y = t.clientX, E = t.clientY, m = !1, x(), c() && (P(), v = setTimeout(() => {
+    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))));
   }, ee = (t) => {
@@ -206,16 +206,16 @@ function Xe(e) {
       return;
     }
     if (!u.consumeClickSuppression(t)) {
-      if (c()) {
+      if (s()) {
         n.openItem(e.item);
         return;
       }
       n.selectItem(e.item.id, t.metaKey || t.ctrlKey);
     }
   }, ie = () => {
-    c() || n.openItem(e.item);
+    s() || n.openItem(e.item);
   }, ae = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), c()) return;
+    if (t.preventDefault(), t.stopPropagation(), s()) return;
     o() || n.selectItem(e.item.id, !1);
     const i = n.getSelectedItemsList(), g = i.length > 0 ? i : [e.item];
     n.showContextMenu({
@@ -223,10 +223,10 @@ function Xe(e) {
       y: t.clientY,
       items: g
     });
-  }, oe = () => e.item.type === "folder" ? we : ye(e.item.extension), le = () => e.dragContext?.dragState(), ce = () => le()?.isDragging ?? !1, U = () => k() && ce() && L();
+  }, oe = () => e.dragContext?.dragState(), le = () => oe()?.isDragging ?? !1, U = () => k() && le() && L();
   return (() => {
-    var t = He(), i = t.firstChild, g = i.nextSibling, T = g.nextSibling;
-    return de(t, ge(Se, {
+    var t = $e(), i = t.firstChild, g = i.nextSibling, T = g.nextSibling;
+    return ce(t, de(we, {
       onClick: re,
       onDblClick: ie,
       onContextMenu: ae,
@@ -254,14 +254,14 @@ function Xe(e) {
         return o();
       },
       get children() {
-        return Fe();
+        return Le();
       }
-    }), i), w(i, b(ue, {
-      get component() {
-        return oe();
+    }), i), w(i, b(De, {
+      get item() {
+        return e.item;
       },
       class: "w-8 h-8"
-    })), w(g, b(Re, {
+    })), w(g, b(ke, {
       get name() {
         return e.item.name;
       },
@@ -270,7 +270,7 @@ function Xe(e) {
       }
     })), Y((d) => {
       var R = $("w-12 h-12 flex items-center justify-center rounded-lg", "transition-transform duration-200", "group-hover:scale-110", e.item.type === "folder" ? "bg-warning/10" : "bg-muted/50"), V = $("text-xs text-center line-clamp-2 w-full px-1", "transition-colors duration-150", o() && "font-medium"), z = e.item.name, Q = $("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), K = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
-      return R !== d.e && G(i, d.e = R), V !== d.t && G(g, d.t = V), z !== d.a && me(g, "title", d.a = z), Q !== d.o && G(T, d.o = Q), K !== d.i && X(T, "background", d.i = K), d;
+      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;
     }, {
       e: void 0,
       t: void 0,
@@ -280,7 +280,7 @@ function Xe(e) {
     }), t;
   })();
 }
-he(["click"]);
+me(["click"]);
 export {
-  ze as FileGridView
+  je as FileGridView
 };

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

@@ -1,15 +1,26 @@
-import { type JSX } from 'solid-js';
-interface FileIconProps {
+import { type Component, type JSX } from 'solid-js';
+import type { FileItem } from './types';
+export interface FileIconProps {
     class?: string;
 }
+type FileIconComponent = Component<FileIconProps>;
+type ResolvableFileIcon = Pick<FileItem, 'name' | 'type' | 'extension' | 'icon'>;
+export type FileItemIconRenderer = FileIconComponent | JSX.Element;
 export declare const FolderIcon: (props: FileIconProps) => JSX.Element;
 export declare const FolderOpenIcon: (props: FileIconProps) => JSX.Element;
 export declare const FileIcon: (props: FileIconProps) => JSX.Element;
 export declare const CodeFileIcon: (props: FileIconProps) => JSX.Element;
-export declare const ShellScriptFileIcon: (props: FileIconProps) => JSX.Element;
+export declare const JavaScriptFileIcon: FileIconComponent;
+export declare const TypeScriptFileIcon: FileIconComponent;
+export declare const ShellScriptFileIcon: FileIconComponent;
 export declare const ImageFileIcon: (props: FileIconProps) => JSX.Element;
 export declare const DocumentFileIcon: (props: FileIconProps) => JSX.Element;
 export declare const ConfigFileIcon: (props: FileIconProps) => JSX.Element;
 export declare const StyleFileIcon: (props: FileIconProps) => JSX.Element;
-export declare function getFileIcon(extension?: string): (props: FileIconProps) => JSX.Element;
+export declare function getFileIcon(extension?: string): FileIconComponent;
+export declare function resolveFileItemIcon(item: ResolvableFileIcon): FileItemIconRenderer;
+export declare function FileItemIcon(props: {
+    item: ResolvableFileIcon;
+    class?: string;
+}): JSX.Element;
 export {};