@floegence/floe-webapp-core 0.36.71 → 0.36.73

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

@@ -1,40 +1,41 @@
-import { insert as l, createComponent as s, effect as v, className as D, template as m, setAttribute as X, spread as Y, mergeProps as q, memo as z, setStyleProperty as J, delegateEvents as K } from "solid-js/web";
-import { createMemo as I, For as Q, untrack as W, createSignal as Z, Show as w } from "solid-js";
-import { cn as f } from "../../utils/cn.js";
+import { insert as l, createComponent as s, effect as y, className as h, template as v, setAttribute as G, spread as X, mergeProps as Y, memo as q, setStyleProperty as J, delegateEvents as K } from "solid-js/web";
+import { createMemo as T, For as Q, untrack as W, createSignal as Z, Show as w } from "solid-js";
+import { cn as u } from "../../utils/cn.js";
 import { useFileBrowser as _ } from "./FileBrowserContext.js";
 import { useFileBrowserDrag as ee } from "../../context/FileBrowserDragContext.js";
 import { FileItemIcon as te } from "./FileIcons.js";
-import { ChevronRight as ne } from "../icons/index.js";
-import { createLongPressContextMenuHandlers as re } from "./longPressContextMenu.js";
-import { fileBrowserTouchTargetAttrs as ie } from "./touchInteractionGuard.js";
-import { createItemContextMenuEvent as ae } from "./contextMenuEvent.js";
-var k = /* @__PURE__ */ m("<div>"), oe = /* @__PURE__ */ m("<button type=button>"), le = /* @__PURE__ */ m('<span class="ml-auto mr-2 text-[10px] text-muted-foreground/60 opacity-0 group-hover:opacity-100 transition-opacity">'), se = /* @__PURE__ */ m('<div class="flex flex-col"><div><button type=button><span class="flex-shrink-0 w-4 h-4"></span><span class=truncate>'), ce = /* @__PURE__ */ m('<span class="flex-shrink-0 w-3.5 h-3.5">');
-function ye(e) {
-  const o = _(), i = ee(), b = () => (e.enableDragDrop ?? !0) && !!i, h = () => e.instanceId ?? "default", g = I(() => o.files().filter((r) => r.type === "folder"));
+import { FileItemDecorationBadge as ne, fileItemDecorationNameClass as re } from "./FileItemDecorations.js";
+import { ChevronRight as ie } from "../icons/index.js";
+import { createLongPressContextMenuHandlers as ae } from "./longPressContextMenu.js";
+import { fileBrowserTouchTargetAttrs as oe } from "./touchInteractionGuard.js";
+import { createItemContextMenuEvent as le } from "./contextMenuEvent.js";
+var M = /* @__PURE__ */ v("<div>"), se = /* @__PURE__ */ v("<button type=button>"), ce = /* @__PURE__ */ v('<span class="ml-auto mr-2 text-[10px] text-muted-foreground/60 opacity-0 group-hover:opacity-100 transition-opacity">'), ge = /* @__PURE__ */ v('<div class="flex flex-col"><div><button type=button><span class="relative flex-shrink-0 w-4 h-4"></span><span>'), de = /* @__PURE__ */ v('<span class="flex-shrink-0 w-3.5 h-3.5">');
+function we(e) {
+  const o = _(), i = ee(), P = () => (e.enableDragDrop ?? !0) && !!i, x = () => e.instanceId ?? "default", g = T(() => o.files().filter((r) => r.type === "folder"));
   return (() => {
-    var r = k();
-    return r.$$contextmenu = (C) => C.preventDefault(), l(r, s(M, {
+    var r = M();
+    return r.$$contextmenu = (I) => I.preventDefault(), l(r, s(p, {
       get items() {
         return g();
       },
       depth: 0,
       get instanceId() {
-        return h();
+        return x();
       },
       get enableDragDrop() {
-        return b();
+        return P();
       },
       dragContext: i
-    })), v(() => D(r, f("flex flex-col", e.class))), r;
+    })), y(() => h(r, u("flex flex-col", e.class))), r;
   })();
 }
-function M(e) {
-  const o = I(() => e.items.filter((i) => i.type === "folder"));
+function p(e) {
+  const o = T(() => e.items.filter((i) => i.type === "folder"));
   return s(Q, {
     get each() {
       return o();
     },
-    children: (i) => s(ge, {
+    children: (i) => s(ue, {
       item: i,
       get depth() {
         return e.depth;
@@ -51,85 +52,85 @@ function M(e) {
     })
   });
 }
-function ge(e) {
-  const o = _(), i = () => o.isExpanded(e.item.path), b = () => o.currentPath() === e.item.path, h = W(() => e.item), g = re(o, h, {
+function ue(e) {
+  const o = _(), i = () => o.isExpanded(e.item.path), P = () => o.currentPath() === e.item.path, x = W(() => e.item), g = ae(o, x, {
     selectOnOpen: !1,
     source: "tree"
   });
   let r;
-  const [C, T] = Z(!1), F = () => r === "touch" || r === "pen", $ = I(() => e.item.children?.filter((t) => t.type === "folder").length ?? 0), x = () => $() > 0, p = () => {
+  const [I, $] = Z(!1), F = () => r === "touch" || r === "pen", E = T(() => e.item.children?.filter((t) => t.type === "folder").length ?? 0), D = () => E() > 0, S = () => {
     if (!e.enableDragDrop || !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;
-  }, L = () => e.dragContext?.dragState(), A = () => L()?.isDragging ?? !1, E = () => C() && A() && e.enableDragDrop, B = (t) => {
+  }, B = () => e.dragContext?.dragState(), L = () => B()?.isDragging ?? !1, k = () => I() && L() && e.enableDragDrop, A = (t) => {
     r = t.pointerType, g.onPointerDown(t);
-  }, O = (t) => {
+  }, N = (t) => {
     r = t.pointerType, g.onPointerMove(t);
-  }, H = (t) => {
+  }, O = (t) => {
     r = t.pointerType, g.onPointerUp();
-  }, N = (t) => {
+  }, H = (t) => {
     r = t.pointerType, g.onPointerCancel();
   }, R = (t) => {
     if (!e.enableDragDrop || !e.dragContext) return;
     const a = e.dragContext.dragState();
     if (!a.isDragging) return;
-    T(!0);
-    const d = e.dragContext.canDropOn(a.draggedItems, e.item.path, e.item, e.instanceId), P = t.currentTarget?.getBoundingClientRect() ?? null;
+    $(!0);
+    const d = e.dragContext.canDropOn(a.draggedItems, e.item.path, e.item, e.instanceId), C = t.currentTarget?.getBoundingClientRect() ?? null;
     e.dragContext.setDropTarget({
       instanceId: e.instanceId,
       targetPath: e.item.path,
       targetItem: e.item
-    }, d, P);
+    }, d, C);
   }, U = (t) => {
     if (!e.dragContext) return;
-    T(!1);
+    $(!1);
     const a = e.dragContext.dragState();
     a.isDragging && a.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
   }, V = (t) => {
-    g.consumeClickSuppression(t) || o.navigateTo(h);
+    g.consumeClickSuppression(t) || o.navigateTo(x);
   }, j = (t) => {
-    t.preventDefault(), t.stopPropagation(), !F() && o.showContextMenu(ae({
+    t.preventDefault(), t.stopPropagation(), !F() && o.showContextMenu(le({
       x: t.clientX,
       y: t.clientY,
       triggerItem: e.item,
       items: [e.item],
       source: "tree"
     }));
-  }, G = () => {
-    x() && o.toggleFolder(e.item.path);
+  }, z = () => {
+    D() && o.toggleFolder(e.item.path);
   };
   return (() => {
-    var t = se(), a = t.firstChild, d = a.firstChild, y = d.firstChild, P = y.nextSibling;
+    var t = ge(), a = t.firstChild, d = a.firstChild, b = d.firstChild, C = b.nextSibling;
     return a.addEventListener("pointerleave", U), a.addEventListener("pointerenter", R), l(a, s(w, {
       get when() {
-        return x();
+        return D();
       },
       get fallback() {
-        return ce();
+        return de();
       },
       get children() {
-        var n = oe();
-        return n.$$click = G, l(n, s(ne, {
+        var n = se();
+        return n.$$click = z, l(n, s(ie, {
           class: "w-3 h-3 opacity-50"
-        })), v((c) => {
-          var u = f("flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center cursor-pointer", "transition-transform duration-150", i() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring"), S = i() ? "Collapse folder" : "Expand folder";
-          return u !== c.e && D(n, c.e = u), S !== c.t && X(n, "aria-label", c.t = S), c;
+        })), y((c) => {
+          var m = u("flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center cursor-pointer", "transition-transform duration-150", i() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring"), f = i() ? "Collapse folder" : "Expand folder";
+          return m !== c.e && h(n, c.e = m), f !== c.t && G(n, "aria-label", c.t = f), c;
         }, {
           e: void 0,
           t: void 0
         }), n;
       }
-    }), d), Y(d, q(ie, {
+    }), d), X(d, Y(oe, {
       onClick: V,
       onContextMenu: j,
-      onPointerDown: B,
-      onPointerMove: O,
-      onPointerUp: H,
-      onPointerCancel: N,
+      onPointerDown: A,
+      onPointerMove: N,
+      onPointerUp: O,
+      onPointerCancel: H,
       get class() {
-        return f("flex items-center gap-1 flex-1 min-w-0 text-left cursor-pointer pl-1", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring");
+        return u("flex items-center gap-1 flex-1 min-w-0 text-left cursor-pointer pl-1", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring");
       }
-    }), !1, !0), l(y, s(te, {
+    }), !1, !0), l(b, s(te, {
       get item() {
         return e.item;
       },
@@ -137,21 +138,26 @@ function ge(e) {
         return i();
       },
       class: "w-4 h-4"
-    })), l(P, () => e.item.name), l(d, s(w, {
+    }), null), l(b, s(ne, {
+      get item() {
+        return e.item;
+      },
+      size: "xs"
+    }), null), l(C, () => e.item.name), l(d, s(w, {
       get when() {
-        return x();
+        return D();
       },
       get children() {
-        var n = le();
-        return l(n, $), n;
+        var n = ce();
+        return l(n, E), n;
       }
     }), null), l(t, s(w, {
       get when() {
-        return z(() => !!i())() && x();
+        return q(() => !!i())() && D();
       },
       get children() {
-        var n = k();
-        return l(n, s(M, {
+        var n = M();
+        return l(n, s(p, {
           get items() {
             return e.item.children ?? [];
           },
@@ -167,26 +173,27 @@ function ge(e) {
           get dragContext() {
             return e.dragContext;
           }
-        })), v(() => D(n, f("overflow-hidden transition-all duration-200", i() ? "opacity-100" : "opacity-0"))), n;
+        })), y(() => h(n, u("overflow-hidden transition-all duration-200", i() ? "opacity-100" : "opacity-0"))), n;
       }
-    }), null), v((n) => {
-      var c = f(
+    }), null), y((n) => {
+      var c = u(
         "group flex items-center w-full py-1 text-xs",
         "transition-all duration-150 ease-out",
         "hover:bg-sidebar-accent/60",
-        b() && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
+        P() && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
         // Drop target styling - enhanced visual feedback
-        E() && p() && ["bg-primary/15 outline outline-2 outline-primary/60", "shadow-sm shadow-primary/10"],
-        E() && !p() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
-      ), u = `${8 + e.depth * 12}px`;
-      return c !== n.e && D(a, n.e = c), u !== n.t && J(a, "padding-left", n.t = u), n;
+        k() && S() && ["bg-primary/15 outline outline-2 outline-primary/60", "shadow-sm shadow-primary/10"],
+        k() && !S() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
+      ), m = `${8 + e.depth * 12}px`, f = u("truncate", re(e.item));
+      return c !== n.e && h(a, n.e = c), m !== n.t && J(a, "padding-left", n.t = m), f !== n.a && h(C, n.a = f), n;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     }), t;
   })();
 }
 K(["contextmenu", "click"]);
 export {
-  ye as DirectoryTree
+  we as DirectoryTree
 };

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

@@ -1,18 +1,19 @@
-import { addEventListener as te, use as z, insert as S, createComponent as D, 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 { addEventListener as te, use as Q, insert as y, createComponent as b, effect as N, setStyleProperty as Y, className as q, style as ue, template as S, 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 B, 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 { useFileBrowser as le } from "./FileBrowserContext.js";
 import { useFileBrowserDrag as we } 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";
-import { createItemContextMenuEvent as ye } from "./contextMenuEvent.js";
-import { createFileBrowserMarqueeSelection as Se, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as Me } from "./useFileBrowserMarqueeSelection.js";
+import { FileItemIcon as Ce } from "./FileIcons.js";
+import { FileItemDecorationBadge as be, fileItemDecorationNameClass as De } from "./FileItemDecorations.js";
+import { createLongPressContextMenuHandlers as ye } from "./longPressContextMenu.js";
+import { fileBrowserTouchTargetAttrs as Se } 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 Te = /* @__PURE__ */ y('<mark class="bg-warning/40 text-inherit rounded-sm">'), Pe = /* @__PURE__ */ y('<div class="grid gap-2">'), _e = /* @__PURE__ */ y('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Ee = /* @__PURE__ */ y('<span>No files matching "<!>"'), Fe = /* @__PURE__ */ y('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Le = /* @__PURE__ */ y('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Re = /* @__PURE__ */ y("<span>This folder is empty"), $e = /* @__PURE__ */ y("<div>"), ke = /* @__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">'), Ae = /* @__PURE__ */ y("<button type=button><div></div><span></span><div>");
-function He(e) {
+var _e = /* @__PURE__ */ S('<mark class="bg-warning/40 text-inherit rounded-sm">'), Fe = /* @__PURE__ */ S('<div class="grid gap-2">'), Ee = /* @__PURE__ */ S('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Le = /* @__PURE__ */ S('<span>No files matching "<!>"'), Re = /* @__PURE__ */ S('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), $e = /* @__PURE__ */ S('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), ke = /* @__PURE__ */ S("<span>This folder is empty"), Ae = /* @__PURE__ */ S("<div>"), He = /* @__PURE__ */ S('<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">'), qe = /* @__PURE__ */ S("<button type=button><div></div><span></span><div>");
+function Be(e) {
   const r = W(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
@@ -20,24 +21,24 @@ function He(e) {
         highlight: !1
       }];
     const s = [], M = new Set(e.match.matchedIndices);
-    let C = "", m = !1;
+    let D = "", m = !1;
     for (let d = 0; d < e.name.length; d++) {
       const v = M.has(d);
-      d === 0 ? (m = v, C = e.name[d]) : v === m ? C += e.name[d] : (s.push({
-        text: C,
+      d === 0 ? (m = v, D = e.name[d]) : v === m ? D += e.name[d] : (s.push({
+        text: D,
         highlight: m
-      }), C = e.name[d], m = v);
+      }), D = e.name[d], m = v);
     }
-    return C && s.push({
-      text: C,
+    return D && s.push({
+      text: D,
       highlight: m
     }), s;
   });
-  return D(ae, {
+  return b(ae, {
     get each() {
       return r();
     },
-    children: (s) => D(q, {
+    children: (s) => b(B, {
       get when() {
         return s.highlight;
       },
@@ -45,23 +46,23 @@ function He(e) {
         return fe(() => s.text);
       },
       get children() {
-        var M = Te();
-        return S(M, () => s.text), M;
+        var M = _e();
+        return y(M, () => s.text), M;
       }
     })
   });
 }
-function Ke(e) {
-  const r = le(), s = we(), M = () => (e.enableDragDrop ?? !0) && !!s, C = () => e.instanceId ?? "default", m = 112, d = 8, v = 180, T = 2, R = 6, [f, V] = ie(null), U = xe(f), x = W(() => {
+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), U = xe(f), x = W(() => {
     const n = U()?.width ?? 0;
     if (n <= 0) return T;
     const l = Math.floor((n + d) / (v + d));
     return Math.max(T, Math.min(R, l));
-  }), F = () => m + d, c = Ie({
+  }), E = () => m + d, c = Ie({
     count: () => Math.ceil(r.currentFiles().length / Math.max(1, x())),
-    itemSize: F,
+    itemSize: E,
     overscan: 2
-  }), Q = () => c.range().start * x(), $ = () => Math.min(r.currentFiles().length, c.range().end * x()), k = W(() => r.currentFiles().slice(Q(), $())), P = /* @__PURE__ */ new Map(), O = (n, l) => {
+  }), z = () => c.range().start * x(), $ = () => Math.min(r.currentFiles().length, c.range().end * x()), k = W(() => r.currentFiles().slice(z(), $())), P = /* @__PURE__ */ new Map(), O = (n, l) => {
     if (l) {
       P.set(n, l);
       return;
@@ -76,14 +77,14 @@ function Ke(e) {
       return;
     }
     if (n === L) return;
-    const l = F(), o = Math.floor(g.scrollTop / Math.max(1, l)) * Math.max(1, L), i = Math.floor(o / Math.max(1, n));
+    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;
   });
-  const B = (n) => {
+  const p = (n) => {
     if (!g) return;
-    const b = Math.floor(n / Math.max(1, x())) * F(), o = b + F(), i = g.scrollTop, w = i + g.clientHeight;
-    if (b < i) {
-      g.scrollTop = b, c.onScroll();
+    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();
       return;
     }
     o > w && (g.scrollTop = Math.max(0, o - g.clientHeight), c.onScroll());
@@ -91,10 +92,10 @@ function Ke(e) {
   ne(() => {
     const n = r.revealRequest(), l = r.currentFiles();
     if (x(), k(), !n) return;
-    const b = l.findIndex((w) => w.id === n.targetId);
-    if (b < 0) return;
+    const C = l.findIndex((w) => w.id === n.targetId);
+    if (C < 0) return;
     if (!P.get(n.targetId)) {
-      B(b);
+      p(C);
       return;
     }
     typeof cancelAnimationFrame == "function" && I && (cancelAnimationFrame(I), I = 0);
@@ -114,7 +115,7 @@ function Ke(e) {
   }), oe(() => {
     typeof cancelAnimationFrame == "function" && I && cancelAnimationFrame(I);
   });
-  const A = Se({
+  const A = Te({
     getContainer: () => g,
     getOverlayHost: () => g,
     getVisibleItemIdsInOrder: () => r.currentFiles().map((n) => n.id),
@@ -124,29 +125,29 @@ function Ke(e) {
     clearSelection: r.clearSelection
   });
   return (() => {
-    var n = _e(), l = n.firstChild, b = l.firstChild;
-    return te(n, "pointerdown", A.onPointerDown, !0), te(n, "scroll", c.onScroll), z((o) => {
+    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), z((o) => V(o), b), S(l, D(q, {
+    }, n), Q((o) => V(o), C), y(l, b(B, {
       get when() {
         return r.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var o = Le();
-          return S(o, D(q, {
+          var o = $e();
+          return y(o, b(B, {
             get when() {
               return r.filterQueryApplied().trim();
             },
             get fallback() {
-              return Re();
+              return ke();
             },
             get children() {
               return [(() => {
-                var i = Ee(), w = i.firstChild, _ = w.nextSibling;
-                return _.nextSibling, S(i, () => r.filterQueryApplied(), _), i;
+                var i = Le(), w = i.firstChild, _ = w.nextSibling;
+                return _.nextSibling, y(i, () => r.filterQueryApplied(), _), i;
               })(), (() => {
-                var i = Fe();
+                var i = Re();
                 return i.$$click = () => r.setFilterQuery(""), i;
               })()];
             }
@@ -154,15 +155,15 @@ function Ke(e) {
         })();
       },
       get children() {
-        var o = Pe();
-        return S(o, D(ae, {
+        var o = Fe();
+        return y(o, b(ae, {
           get each() {
             return k();
           },
-          children: (i) => D(pe, {
+          children: (i) => b(Oe, {
             item: i,
             get instanceId() {
-              return C();
+              return D();
             },
             get enableDragDrop() {
               return M();
@@ -179,25 +180,25 @@ function Ke(e) {
           a: void 0
         }), o;
       }
-    }), null), S(l, D(q, {
+    }), null), y(l, b(B, {
       get when() {
         return A.overlayStyle();
       },
       children: (o) => (() => {
-        var i = $e();
-        return p(i, Me), N((w) => ue(i, o(), w)), i;
+        var i = Ae();
+        return q(i, Pe), N((w) => ue(i, o(), w)), i;
       })()
-    }), null), N(() => p(n, H("relative h-full min-h-0 overflow-auto", e.class))), n;
+    }), null), N(() => q(n, H("relative h-full min-h-0 overflow-auto", e.class))), n;
   })();
 }
-function pe(e) {
-  const r = le(), s = () => r.isSelected(e.item.id), M = () => r.getFilterMatchForId(e.item.id), C = ve(() => e.item), m = Ce(r, C, {
+function Oe(e) {
+  const r = le(), s = () => r.isSelected(e.item.id), M = () => r.getFilterMatchForId(e.item.id), D = ve(() => e.item), m = ye(r, D, {
     source: "grid"
   });
   let d, v = null, T = 0, R = 0, f = !1;
   const V = 5, U = 500;
   let x = null;
-  const [F, j] = ie(!1), c = () => d === "touch" || d === "pen", Q = () => e.item.type === "folder", $ = () => Q() && e.enableDragDrop && e.dragContext, k = () => {
+  const [E, j] = ie(!1), c = () => d === "touch" || d === "pen", z = () => e.item.type === "folder", $ = () => z() && e.enableDragDrop && e.dragContext, k = () => {
     if (!$() || !e.dragContext) return !1;
     const t = e.dragContext.dragState();
     return t.isDragging ? e.dragContext.canDropOn(t.draggedItems, e.item.path, e.item, e.instanceId) : !1;
@@ -217,7 +218,7 @@ function pe(e) {
   oe(() => {
     e.registerTile(e.item.id, null), I(!1);
   });
-  const B = (t, a) => {
+  const p = (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) => ({
@@ -233,19 +234,19 @@ function pe(e) {
     e.dragContext.startDrag(u, t, a);
   }, A = (t) => {
     if (v !== t.pointerId) return;
-    const a = t.clientX - T, h = t.clientY - R, E = Math.sqrt(a * a + h * h);
-    if (c() && !f && E > 10) {
+    const a = t.clientX - T, h = t.clientY - R, F = Math.sqrt(a * a + h * h);
+    if (c() && !f && F > 10) {
       I(!1);
       return;
     }
-    !c() && !f && E > V && B(t.clientX, t.clientY), f && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+    !c() && !f && F > V && p(t.clientX, t.clientY), f && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
   }, n = (t) => {
     v === t.pointerId && (m.onPointerUp(), I(!0));
   }, l = (t) => {
     v === t.pointerId && (m.onPointerCancel(), I(!1));
-  }, b = (t) => {
+  }, 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() && (O(), x = setTimeout(() => {
-      v !== null && !f && B(T, R);
+      v !== null && !f && p(T, R);
     }, U))));
   }, o = (t) => {
     d = t.pointerType, m.onPointerMove(t);
@@ -287,17 +288,17 @@ function pe(e) {
     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(ye({
+    r.showContextMenu(Me({
       x: t.clientX,
       y: t.clientY,
       triggerItem: e.item,
       items: h,
       source: "grid"
     }));
-  }, se = () => e.dragContext?.dragState(), de = () => se()?.isDragging ?? !1, K = () => F() && de() && $();
+  }, se = () => e.dragContext?.dragState(), de = () => se()?.isDragging ?? !1, K = () => E() && de() && $();
   return (() => {
-    var t = Ae(), a = t.firstChild, h = a.nextSibling, E = h.nextSibling;
-    return z((u) => {
+    var t = qe(), a = t.firstChild, h = a.nextSibling, F = h.nextSibling;
+    return Q((u) => {
       e.registerTile(e.item.id, u);
     }, t), ge(t, me({
       get "data-file-browser-item-id"() {
@@ -306,14 +307,14 @@ function pe(e) {
       get "data-file-browser-item-path"() {
         return e.item.path;
       }
-    }, De, {
+    }, Se, {
       get title() {
         return e.item.name;
       },
       onClick: _,
       onDblClick: X,
       onContextMenu: ce,
-      onPointerDown: b,
+      onPointerDown: C,
       onPointerMove: o,
       onPointerEnter: i,
       onPointerLeave: w,
@@ -332,19 +333,24 @@ function pe(e) {
           K() && !k() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
         );
       }
-    }), !1, !0), S(t, D(q, {
+    }), !1, !0), y(t, b(B, {
       get when() {
         return s();
       },
       get children() {
-        return ke();
+        return He();
       }
-    }), a), S(a, D(be, {
+    }), a), y(a, b(Ce, {
       get item() {
         return e.item;
       },
       class: "w-8 h-8"
-    })), S(h, D(He, {
+    }), null), y(a, b(be, {
+      get item() {
+        return e.item;
+      },
+      size: "md"
+    }), null), y(h, b(Be, {
       get name() {
         return e.item.name;
       },
@@ -352,8 +358,8 @@ function pe(e) {
         return M();
       }
     })), N((u) => {
-      var G = H("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"), J = H("block w-full min-w-0 truncate px-1 text-xs text-center", "transition-colors duration-150", 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(E, u.a = Z), ee !== u.o && Y(E, "background", u.o = ee), u;
+      var G = H("w-12 h-12 flex items-center justify-center rounded-lg", "relative", "transition-transform duration-200", "group-hover:scale-110", e.item.type === "folder" ? "bg-warning/10" : "bg-muted/50"), 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 && q(a, u.e = G), J !== u.t && q(h, u.t = J), Z !== u.a && q(F, u.a = Z), ee !== u.o && Y(F, "background", u.o = ee), u;
     }, {
       e: void 0,
       t: void 0,
@@ -364,5 +370,5 @@ function pe(e) {
 }
 he(["pointerdown", "click"]);
 export {
-  Ke as FileGridView
+  et as FileGridView
 };

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

@@ -0,0 +1,9 @@
+import type { FileItem } from './types';
+type FileItemDecorationBadgeSize = 'xs' | 'sm' | 'md';
+export declare function fileItemDecorationNameClass(item: FileItem): string;
+export declare function FileItemDecorationBadge(props: {
+    item: FileItem;
+    size?: FileItemDecorationBadgeSize;
+    class?: string;
+}): import("solid-js").JSX.Element;
+export {};