@floegence/floe-webapp-core 0.35.19 → 0.35.21

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 le, use as K, insert as w, createComponent as b, effect as Y, setStyleProperty as X, className as G, template as C, spread as ce, mergeProps as se, memo as de, delegateEvents as ge } from "solid-js/web";
+import { createSignal as W, createMemo as j, createEffect as ue, Show as p, For as q, untrack as me, onCleanup as fe } from "solid-js";
 import { cn as $ } from "../../utils/cn.js";
-import { useResizeObserver as Ce } from "../../hooks/useResizeObserver.js";
-import { useVirtualWindow as De } 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 { useResizeObserver as he } from "../../hooks/useResizeObserver.js";
+import { useVirtualWindow as ve } from "../../hooks/useVirtualWindow.js";
+import { useFileBrowser as J } from "./FileBrowserContext.js";
+import { useFileBrowserDrag as xe } from "../../context/FileBrowserDragContext.js";
+import { FileItemIcon as be } from "./FileIcons.js";
+import { createLongPressContextMenuHandlers as Ce } from "./longPressContextMenu.js";
+import { fileBrowserTouchTargetAttrs as De } from "./touchInteractionGuard.js";
+var Ie = /* @__PURE__ */ C('<mark class="bg-warning/40 text-inherit rounded-sm">'), we = /* @__PURE__ */ C('<div class="grid gap-2">'), ye = /* @__PURE__ */ C('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Pe = /* @__PURE__ */ C('<span>No files matching "<!>"'), Se = /* @__PURE__ */ C('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Me = /* @__PURE__ */ C('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), _e = /* @__PURE__ */ C("<span>This folder is empty"), Te = /* @__PURE__ */ C('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), Ee = /* @__PURE__ */ C("<button type=button><div></div><span></span><div>");
+function Le(e) {
   const n = j(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
@@ -17,82 +17,82 @@ function Re(e) {
         highlight: !1
       }];
     const o = [], D = new Set(e.match.matchedIndices);
-    let h = "", u = !1;
+    let h = "", d = !1;
     for (let l = 0; l < e.name.length; l++) {
       const f = D.has(l);
-      l === 0 ? (u = f, h = e.name[l]) : f === u ? h += e.name[l] : (o.push({
+      l === 0 ? (d = f, h = e.name[l]) : f === d ? h += e.name[l] : (o.push({
         text: h,
-        highlight: u
-      }), h = e.name[l], u = f);
+        highlight: d
+      }), h = e.name[l], d = f);
     }
     return h && o.push({
       text: h,
-      highlight: u
+      highlight: d
     }), o;
   });
-  return b(J, {
+  return b(q, {
     get each() {
       return n();
     },
-    children: (o) => b(A, {
+    children: (o) => b(p, {
       get when() {
         return o.highlight;
       },
       get fallback() {
-        return fe(() => o.text);
+        return de(() => o.text);
       },
       get children() {
-        var D = Me();
+        var D = Ie();
         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;
+function Ne(e) {
+  const n = J(), o = xe(), D = () => (e.enableDragDrop ?? !0) && !!o, h = () => e.instanceId ?? "default", d = 112, l = 8, f = 180, y = 2, E = 6, [g, A] = W(null), O = he(g), v = j(() => {
+    const s = O()?.width ?? 0;
     if (s <= 0) return y;
     const x = Math.floor((s + l) / (f + l));
     return Math.max(y, Math.min(E, x));
-  }), k = () => u + l, c = De({
+  }), k = () => d + l, c = ve({
     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()));
-  let _ = null, P = y;
-  return ve(() => {
+  let T = null, P = y;
+  return ue(() => {
     const s = v();
-    if (!_) {
+    if (!T) {
       P = s;
       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;
+    const x = k(), a = Math.floor(T.scrollTop / Math.max(1, x)) * Math.max(1, P), r = Math.floor(a / Math.max(1, s));
+    T.scrollTop = r * x, c.onScroll(), P = s;
   }), (() => {
-    var 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 s = ye(), x = s.firstChild, S = x.firstChild;
+    return le(s, "scroll", c.onScroll), K((a) => {
+      T = a, c.scrollRef(a), n.setScrollContainer(a);
+    }, s), K((a) => A(a), S), w(x, b(p, {
       get when() {
         return n.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var a = $e();
-          return w(a, b(A, {
+          var a = Me();
+          return w(a, b(p, {
             get when() {
               return n.filterQueryApplied().trim();
             },
             get fallback() {
-              return ke();
+              return _e();
             },
             get children() {
               return [(() => {
-                var r = Ee(), M = r.firstChild, I = M.nextSibling;
+                var r = Pe(), M = r.firstChild, I = M.nextSibling;
                 return I.nextSibling, w(r, () => n.filterQueryApplied(), I), r;
               })(), (() => {
-                var r = Le();
+                var r = Se();
                 return r.$$click = () => n.setFilterQuery(""), r;
               })()];
             }
@@ -100,12 +100,12 @@ function ze(e) {
         })();
       },
       get children() {
-        var a = Te();
-        return w(a, b(J, {
+        var a = we();
+        return w(a, b(q, {
           get each() {
             return F();
           },
-          children: (r) => b(Xe, {
+          children: (r) => b($e, {
             item: r,
             get instanceId() {
               return h();
@@ -127,16 +127,16 @@ function ze(e) {
     }), null), Y(() => G(s, $("h-full min-h-0 overflow-auto", e.class))), s;
   })();
 }
-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);
-  let l, f = null, y = 0, E = 0, m = !1;
-  const O = 5, p = 500;
+function $e(e) {
+  const n = J(), o = () => n.isSelected(e.item.id), D = () => n.getFilterMatchForId(e.item.id), h = me(() => e.item), d = Ce(n, h);
+  let l, f = null, y = 0, E = 0, g = !1;
+  const A = 5, O = 500;
   let v = null;
-  const [k, B] = q(!1), c = () => l === "touch" || l === "pen", N = () => e.item.type === "folder", L = () => N() && e.enableDragDrop && e.dragContext, F = () => {
+  const [k, B] = W(!1), c = () => l === "touch" || l === "pen", N = () => e.item.type === "folder", L = () => N() && e.enableDragDrop && e.dragContext, F = () => {
     if (!L() || !e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? e.dragContext.canDropOn(t.draggedItems, e.item.path, e.item, e.instanceId) : !1;
-  }, _ = () => {
+  }, T = () => {
     if (!e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? t.draggedItems.some((i) => i.item.id === e.item.id) : !1;
@@ -147,15 +147,15 @@ function Xe(e) {
   }, 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(), s(), g && e.dragContext && e.dragContext.endDrag(t), f = null, g = !1;
   };
-  be(() => {
+  fe(() => {
     S(!1);
   });
   const a = (t, i) => {
-    if (!e.enableDragDrop || !e.dragContext || m) return;
-    m = !0, o() || n.selectItem(e.item.id, !1);
-    const g = n.getSelectedItemsList(), d = (g.length > 0 && o() ? g : [e.item]).map((R) => ({
+    if (!e.enableDragDrop || !e.dragContext || g) return;
+    g = !0, o() || n.selectItem(e.item.id, !1);
+    const u = n.getSelectedItemsList(), m = (u.length > 0 && o() ? u : [e.item]).map((R) => ({
       item: R,
       sourceInstanceId: e.instanceId,
       sourcePath: n.currentPath()
@@ -165,75 +165,78 @@ function Xe(e) {
         navigator.vibrate(50);
       } catch {
       }
-    e.dragContext.startDrag(d, t, i);
+    e.dragContext.startDrag(m, t, i);
   }, r = (t) => {
     if (f !== t.pointerId) return;
-    const i = t.clientX - y, g = t.clientY - E, T = Math.sqrt(i * i + g * g);
-    if (c() && !m && T > 10) {
+    const i = t.clientX - y, u = t.clientY - E, _ = Math.sqrt(i * i + u * u);
+    if (c() && !g && _ > 10) {
       S(!1);
       return;
     }
-    !c() && !m && T > O && a(t.clientX, t.clientY), m && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+    !c() && !g && _ > A && a(t.clientX, t.clientY), g && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
   }, M = (t) => {
-    f === t.pointerId && (u.onPointerUp(), S(!0));
+    f === t.pointerId && (d.onPointerUp(), S(!0));
   }, I = (t) => {
-    f === t.pointerId && (u.onPointerCancel(), S(!1));
+    f === t.pointerId && (d.onPointerCancel(), S(!1));
   }, H = (t) => {
-    l = t.pointerType, u.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (f = t.pointerId, y = t.clientX, E = t.clientY, m = !1, x(), c() && (P(), v = setTimeout(() => {
-      f !== null && !m && a(y, E);
-    }, p))));
+    l = t.pointerType, d.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (f = t.pointerId, y = t.clientX, E = t.clientY, g = !1, x(), c() && (P(), v = setTimeout(() => {
+      f !== null && !g && a(y, E);
+    }, O))));
+  }, Z = (t) => {
+    l = t.pointerType, d.onPointerMove(t);
   }, ee = (t) => {
-    l = t.pointerType, u.onPointerMove(t);
-  }, te = (t) => {
     if (!L() || !e.dragContext) return;
     const i = e.dragContext.dragState();
     if (!i.isDragging) return;
     B(!0);
-    const g = e.dragContext.canDropOn(i.draggedItems, e.item.path, e.item, e.instanceId), d = t.currentTarget?.getBoundingClientRect() ?? null;
+    const u = e.dragContext.canDropOn(i.draggedItems, e.item.path, e.item, e.instanceId), m = t.currentTarget?.getBoundingClientRect() ?? null;
     e.dragContext.setDropTarget({
       instanceId: e.instanceId,
       targetPath: e.item.path,
       targetItem: e.item
-    }, g, d);
-  }, ne = (t) => {
+    }, u, m);
+  }, te = (t) => {
     if (!e.dragContext) return;
     B(!1);
     const i = e.dragContext.dragState();
     i.isDragging && i.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
-  }, re = (t) => {
-    if (m) {
-      m = !1;
+  }, ne = (t) => {
+    if (g) {
+      g = !1;
       return;
     }
-    if (!u.consumeClickSuppression(t)) {
+    if (!d.consumeClickSuppression(t)) {
       if (c()) {
         n.openItem(e.item);
         return;
       }
       n.selectItem(e.item.id, t.metaKey || t.ctrlKey);
     }
-  }, ie = () => {
+  }, re = () => {
     c() || n.openItem(e.item);
-  }, ae = (t) => {
+  }, ie = (t) => {
     if (t.preventDefault(), t.stopPropagation(), c()) return;
     o() || n.selectItem(e.item.id, !1);
-    const i = n.getSelectedItemsList(), g = i.length > 0 ? i : [e.item];
+    const i = n.getSelectedItemsList(), u = i.length > 0 ? i : [e.item];
     n.showContextMenu({
       x: t.clientX,
       y: t.clientY,
-      items: g
+      items: u
     });
-  }, oe = () => e.item.type === "folder" ? we : ye(e.item.extension), le = () => e.dragContext?.dragState(), ce = () => le()?.isDragging ?? !1, U = () => k() && ce() && L();
+  }, ae = () => e.dragContext?.dragState(), oe = () => ae()?.isDragging ?? !1, U = () => k() && oe() && L();
   return (() => {
-    var t = He(), i = t.firstChild, g = i.nextSibling, T = g.nextSibling;
-    return de(t, ge(Se, {
-      onClick: re,
-      onDblClick: ie,
-      onContextMenu: ae,
+    var t = Ee(), i = t.firstChild, u = i.nextSibling, _ = u.nextSibling;
+    return ce(t, se(De, {
+      get title() {
+        return e.item.name;
+      },
+      onClick: ne,
+      onDblClick: re,
+      onContextMenu: ie,
       onPointerDown: H,
-      onPointerMove: ee,
-      onPointerEnter: te,
-      onPointerLeave: ne,
+      onPointerMove: Z,
+      onPointerEnter: ee,
+      onPointerLeave: te,
       get class() {
         return $(
           "group relative flex flex-col items-center gap-2 p-3 rounded-lg cursor-pointer h-28",
@@ -243,44 +246,43 @@ function Xe(e) {
           "active:scale-[0.98]",
           o() && "bg-accent ring-2 ring-primary/50",
           // Drag state styling - being dragged items become translucent and shrink
-          _() && "opacity-40 scale-90",
+          T() && "opacity-40 scale-90",
           // Drop target styling - enhanced visual feedback for folders
           U() && F() && ["bg-primary/15 ring-2 ring-primary/60", "scale-105 shadow-lg shadow-primary/15"],
           U() && !F() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
         );
       }
-    }), !1, !0), w(t, b(A, {
+    }), !1, !0), w(t, b(p, {
       get when() {
         return o();
       },
       get children() {
-        return Fe();
+        return Te();
       }
-    }), i), w(i, b(ue, {
-      get component() {
-        return oe();
+    }), i), w(i, b(be, {
+      get item() {
+        return e.item;
       },
       class: "w-8 h-8"
-    })), w(g, b(Re, {
+    })), w(u, b(Le, {
       get name() {
         return e.item.name;
       },
       get match() {
         return D();
       }
-    })), Y((d) => {
-      var R = $("w-12 h-12 flex items-center justify-center rounded-lg", "transition-transform duration-200", "group-hover:scale-110", e.item.type === "folder" ? "bg-warning/10" : "bg-muted/50"), V = $("text-xs text-center line-clamp-2 w-full px-1", "transition-colors duration-150", o() && "font-medium"), z = e.item.name, Q = $("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), K = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
-      return R !== d.e && G(i, d.e = R), V !== d.t && G(g, d.t = V), z !== d.a && me(g, "title", d.a = z), Q !== d.o && G(T, d.o = Q), K !== d.i && X(T, "background", d.i = K), d;
+    })), Y((m) => {
+      var R = $("w-12 h-12 flex items-center justify-center rounded-lg", "transition-transform duration-200", "group-hover:scale-110", e.item.type === "folder" ? "bg-warning/10" : "bg-muted/50"), V = $("block w-full min-w-0 truncate px-1 text-xs text-center", "transition-colors duration-150", o() && "font-medium"), z = $("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), Q = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
+      return R !== m.e && G(i, m.e = R), V !== m.t && G(u, m.t = V), z !== m.a && G(_, m.a = z), Q !== m.o && X(_, "background", m.o = Q), m;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
-      o: void 0,
-      i: void 0
+      o: void 0
     }), t;
   })();
 }
-he(["click"]);
+ge(["click"]);
 export {
-  ze as FileGridView
+  Ne 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 {};