@floegence/floe-webapp-core 0.36.72 → 0.36.73

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

@@ -1,44 +1,45 @@
-import { use as ee, insert as f, createComponent as m, effect as p, className as N, setStyleProperty as L, addEventListener as ie, style as Ce, template as z, spread as be, mergeProps as Me, memo as ce, delegateEvents as De } from "solid-js/web";
-import { createMemo as te, createEffect as Ie, onCleanup as de, createSignal as ue, Show as P, For as me, untrack as $e } from "solid-js";
+import { use as ee, insert as f, createComponent as m, effect as k, className as W, setStyleProperty as p, addEventListener as ie, style as be, template as _, spread as De, mergeProps as Ie, memo as ce, delegateEvents as Me } from "solid-js/web";
+import { createMemo as te, createEffect as $e, onCleanup as de, createSignal as ue, Show as P, For as me, untrack as ze } from "solid-js";
 import { cn as E } from "../../utils/cn.js";
 import { useMediaQuery as re } from "../../hooks/useMediaQuery.js";
 import { useResizeObserver as _e } from "../../hooks/useResizeObserver.js";
-import { useVirtualWindow as ze } from "../../hooks/useVirtualWindow.js";
+import { useVirtualWindow as ye } from "../../hooks/useVirtualWindow.js";
 import { useFileBrowser as fe } from "./FileBrowserContext.js";
-import { useFileBrowserDrag as ye } from "../../context/FileBrowserDragContext.js";
-import { FileItemIcon as Pe } from "./FileIcons.js";
-import { ChevronDown as Re } from "../icons/index.js";
-import { createLongPressContextMenuHandlers as Te } from "./longPressContextMenu.js";
+import { useFileBrowserDrag as Pe } from "../../context/FileBrowserDragContext.js";
+import { FileItemIcon as Re } from "./FileIcons.js";
+import { FileItemDecorationBadge as Fe, fileItemDecorationNameClass as Te } from "./FileItemDecorations.js";
+import { ChevronDown as ke } from "../icons/index.js";
+import { createLongPressContextMenuHandlers as Ae } from "./longPressContextMenu.js";
 import { ResizeHandle as oe } from "../layout/ResizeHandle.js";
-import { fileBrowserTouchTargetAttrs as Fe } from "./touchInteractionGuard.js";
-import { createItemContextMenuEvent as ke } from "./contextMenuEvent.js";
-import { createFileBrowserMarqueeSelection as pe, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as Ae } from "./useFileBrowserMarqueeSelection.js";
+import { fileBrowserTouchTargetAttrs as Ee } from "./touchInteractionGuard.js";
+import { createItemContextMenuEvent as Le } from "./contextMenuEvent.js";
+import { createFileBrowserMarqueeSelection as We, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as pe } from "./useFileBrowserMarqueeSelection.js";
 import { isPrimaryModKeyPressed as ae } from "../../utils/keybind.js";
-var Ee = /* @__PURE__ */ z("<span class=truncate>"), Le = /* @__PURE__ */ z('<mark class="bg-warning/40 text-inherit rounded-sm">'), We = /* @__PURE__ */ z("<span>"), He = /* @__PURE__ */ z('<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'), Be = /* @__PURE__ */ z('<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'), le = /* @__PURE__ */ z("<div>"), qe = /* @__PURE__ */ z('<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="relative flex-1 min-h-0 overflow-auto">'), Ne = /* @__PURE__ */ z('<span>No files matching "<!>"'), Oe = /* @__PURE__ */ z('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Xe = /* @__PURE__ */ z('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Ye = /* @__PURE__ */ z("<span>This folder is empty"), se = /* @__PURE__ */ z('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ge = /* @__PURE__ */ z('<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 Ve(t) {
+var ge = /* @__PURE__ */ _("<span>"), Be = /* @__PURE__ */ _('<mark class="bg-warning/40 text-inherit rounded-sm">'), He = /* @__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'), Ne = /* @__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'), le = /* @__PURE__ */ _("<div>"), qe = /* @__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="relative flex-1 min-h-0 overflow-auto">'), Oe = /* @__PURE__ */ _('<span>No files matching "<!>"'), Xe = /* @__PURE__ */ _('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Ye = /* @__PURE__ */ _('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Ge = /* @__PURE__ */ _("<span>This folder is empty"), se = /* @__PURE__ */ _('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ve = /* @__PURE__ */ _('<button type=button><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5"><span class="relative flex-shrink-0 w-4 h-4">');
+function Ue(e) {
   const o = te(() => {
-    if (!t.match || t.match.matchedIndices.length === 0)
+    if (!e.match || e.match.matchedIndices.length === 0)
       return [{
-        text: t.name,
+        text: e.name,
         highlight: !1
       }];
-    const D = [], R = new Set(t.match.matchedIndices);
-    let I = "", C = !1;
-    for (let g = 0; g < t.name.length; g++) {
+    const I = [], R = new Set(e.match.matchedIndices);
+    let M = "", C = !1;
+    for (let g = 0; g < e.name.length; g++) {
       const $ = R.has(g);
-      g === 0 ? (C = $, I = t.name[g]) : $ === C ? I += t.name[g] : (D.push({
-        text: I,
+      g === 0 ? (C = $, M = e.name[g]) : $ === C ? M += e.name[g] : (I.push({
+        text: M,
         highlight: C
-      }), I = t.name[g], C = $);
+      }), M = e.name[g], C = $);
     }
-    return I && D.push({
-      text: I,
+    return M && I.push({
+      text: M,
       highlight: C
-    }), D;
+    }), I;
   });
   return (() => {
-    var D = Ee();
-    return f(D, m(me, {
+    var I = ge();
+    return f(I, m(me, {
       get each() {
         return o();
       },
@@ -50,15 +51,15 @@ function Ve(t) {
           return ce(() => R.text);
         },
         get children() {
-          var I = Le();
-          return f(I, () => R.text), I;
+          var M = Be();
+          return f(M, () => R.text), M;
         }
       })
-    })), D;
+    })), k(() => W(I, E("truncate", e.class))), I;
   })();
 }
-function ut(t) {
-  const o = fe(), D = ye(), R = () => (t.enableDragDrop ?? !0) && !!D, I = () => t.instanceId ?? "default", C = 32, g = ze({
+function ft(e) {
+  const o = fe(), I = Pe(), R = () => (e.enableDragDrop ?? !0) && !!I, M = () => e.instanceId ?? "default", C = 32, g = ye({
     count: () => o.currentFiles().length,
     itemSize: () => C,
     overscan: 12
@@ -68,35 +69,35 @@ function ut(t) {
       end: i
     } = g.range();
     return o.currentFiles().slice(n, i);
-  }), T = /* @__PURE__ */ new Map();
-  let _ = null, x = 0;
+  }), F = /* @__PURE__ */ new Map();
+  let z = null, x = 0;
   const U = (n, i) => {
     if (i) {
-      T.set(n, i);
+      F.set(n, i);
       return;
     }
-    T.delete(n);
+    F.delete(n);
   }, Q = (n) => {
-    if (!_) return;
-    const i = n * C, l = i + C, c = _.scrollTop, h = c + _.clientHeight;
+    if (!z) return;
+    const i = n * C, l = i + C, c = z.scrollTop, h = c + z.clientHeight;
     if (i < c) {
-      _.scrollTop = i, g.onScroll();
+      z.scrollTop = i, g.onScroll();
       return;
     }
-    l > h && (_.scrollTop = Math.max(0, l - _.clientHeight), g.onScroll());
+    l > h && (z.scrollTop = Math.max(0, l - z.clientHeight), g.onScroll());
   };
-  Ie(() => {
+  $e(() => {
     const n = o.revealRequest(), i = o.currentFiles();
     if ($(), !n) return;
     const l = i.findIndex((v) => v.id === n.targetId);
     if (l < 0) return;
-    if (!T.get(n.targetId)) {
+    if (!F.get(n.targetId)) {
       Q(l);
       return;
     }
     typeof cancelAnimationFrame == "function" && x && (cancelAnimationFrame(x), x = 0);
     const h = () => {
-      o.revealRequest()?.requestId === n.requestId && (T.get(n.targetId)?.scrollIntoView({
+      o.revealRequest()?.requestId === n.requestId && (F.get(n.targetId)?.scrollIntoView({
         block: "nearest",
         inline: "nearest"
       }), o.selectItem(n.targetId, !1), o.consumeRevealRequest(n.requestId));
@@ -111,7 +112,7 @@ function ut(t) {
   }), de(() => {
     typeof cancelAnimationFrame == "function" && x && cancelAnimationFrame(x);
   });
-  const k = (n) => {
+  const A = (n) => {
     const i = o.sortConfig();
     o.setSortConfig({
       field: n,
@@ -121,26 +122,26 @@ function ut(t) {
     month: "short",
     day: "numeric",
     year: "numeric"
-  }) : "-", y = pe({
-    getContainer: () => _,
-    getOverlayHost: () => _,
+  }) : "-", y = We({
+    getContainer: () => z,
+    getOverlayHost: () => z,
     getVisibleItemIdsInOrder: () => o.currentFiles().map((n) => n.id),
-    getElementForId: (n) => T.get(n) ?? null,
+    getElementForId: (n) => F.get(n) ?? null,
     getSelectedIds: () => [...o.selectedItems()],
     replaceSelection: (n, i) => o.replaceSelection(n, i),
     clearSelection: o.clearSelection
-  }), W = (n) => {
+  }), B = (n) => {
     const i = () => o.sortConfig(), l = () => i().field === n.field;
     return (() => {
-      var c = We();
-      return f(c, m(Re, {
+      var c = ge();
+      return f(c, m(ke, {
         get class() {
           return E("w-3 h-3 transition-transform duration-150", l() && i().direction === "asc" && "rotate-180");
         }
-      })), p(() => N(c, E("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), c;
+      })), k(() => W(c, E("ml-1 transition-all duration-150", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), c;
     })();
-  }, H = re("(min-width: 640px)"), X = re("(min-width: 768px)"), [K, Y] = ue(null), J = _e(K), A = (n, i, l) => Math.max(i, Math.min(l, n)), S = te(() => {
-    const n = J()?.width ?? 0, i = H(), l = X(), c = o.listColumnRatios(), h = 160, v = 120, b = 80, M = 128, a = 96;
+  }, H = re("(min-width: 640px)"), X = re("(min-width: 768px)"), [K, Y] = ue(null), J = _e(K), L = (n, i, l) => Math.max(i, Math.min(l, n)), S = te(() => {
+    const n = J()?.width ?? 0, i = H(), l = X(), c = o.listColumnRatios(), h = 160, v = 120, b = 80, D = 128, a = 96;
     if (!i || n <= 0)
       return {
         width: n,
@@ -149,13 +150,13 @@ function ut(t) {
         minName: h,
         minModified: v,
         minSize: b,
-        modifiedWidth: M,
+        modifiedWidth: D,
         sizeWidth: a
       };
     if (!l) {
       const u = c.size, d = Math.max(0, 1 - u);
       let w = (d > 0 ? c.modifiedAt / d : c.modifiedAt) * n;
-      return w = A(w, v, Math.max(v, n - h)), {
+      return w = L(w, v, Math.max(v, n - h)), {
         width: n,
         showModified: i,
         showSize: l,
@@ -166,13 +167,13 @@ function ut(t) {
         sizeWidth: 0
       };
     }
-    let r = Math.max(v, c.modifiedAt * n), e = Math.max(b, c.size * n);
+    let r = Math.max(v, c.modifiedAt * n), t = Math.max(b, c.size * n);
     const s = Math.max(0, n - h);
-    if (r + e > s) {
-      const u = r + e - s, d = Math.max(0, r - v), w = Math.max(0, e - b), F = d + w;
-      F > 0 && (r -= u * (d / F), e -= u * (w / F));
+    if (r + t > s) {
+      const u = r + t - s, d = Math.max(0, r - v), w = Math.max(0, t - b), T = d + w;
+      T > 0 && (r -= u * (d / T), t -= u * (w / T));
     }
-    return r = Math.max(v, r), e = Math.max(b, e), {
+    return r = Math.max(v, r), t = Math.max(b, t), {
       width: n,
       showModified: i,
       showSize: l,
@@ -180,40 +181,40 @@ function ut(t) {
       minModified: v,
       minSize: b,
       modifiedWidth: r,
-      sizeWidth: e
+      sizeWidth: t
     };
-  }), B = () => S().modifiedWidth, q = () => S().sizeWidth, G = (n) => {
+  }), N = () => S().modifiedWidth, q = () => S().sizeWidth, G = (n) => {
     const i = S();
     if (!i.showModified || i.width <= 0) return;
     if (!i.showSize) {
       const u = o.listColumnRatios().size, d = Math.max(0, 1 - u);
       if (d <= 0) return;
-      const w = i.width, F = i.modifiedWidth, ne = Math.max(0, w - F), ge = i.minName - ne, he = F - i.minModified, Z = A(n, ge, he);
+      const w = i.width, T = i.modifiedWidth, ne = Math.max(0, w - T), he = i.minName - ne, xe = T - i.minModified, Z = L(n, he, xe);
       if (Z === 0) return;
-      const xe = ne + Z, ve = F - Z, we = xe / w * d, Se = ve / w * d;
+      const ve = ne + Z, we = T - Z, Se = ve / w * d, Ce = we / w * d;
       o.setListColumnRatios({
-        name: we,
-        modifiedAt: Se,
+        name: Se,
+        modifiedAt: Ce,
         size: u
       });
       return;
     }
-    const l = i.width, c = i.modifiedWidth, h = i.sizeWidth, v = Math.max(0, l - c - h), b = i.minName - v, M = c - i.minModified, a = A(n, b, M);
+    const l = i.width, c = i.modifiedWidth, h = i.sizeWidth, v = Math.max(0, l - c - h), b = i.minName - v, D = c - i.minModified, a = L(n, b, D);
     if (a === 0) return;
-    const r = v + a, e = c - a;
+    const r = v + a, t = c - a;
     o.setListColumnRatios({
       name: r / l,
-      modifiedAt: e / l,
+      modifiedAt: t / l,
       size: h / l
     });
   }, V = (n) => {
     const i = S();
     if (!i.showSize || i.width <= 0) return;
-    const l = i.width, c = i.modifiedWidth, h = i.sizeWidth, v = i.minModified - c, b = h - i.minSize, M = A(n, v, b);
-    if (M === 0) return;
-    const a = c + M, r = h - M, e = Math.max(0, l - a - r);
+    const l = i.width, c = i.modifiedWidth, h = i.sizeWidth, v = i.minModified - c, b = h - i.minSize, D = L(n, v, b);
+    if (D === 0) return;
+    const a = c + D, r = h - D, t = Math.max(0, l - a - r);
     o.setListColumnRatios({
-      name: e / l,
+      name: t / l,
       modifiedAt: a / l,
       size: r / l
     });
@@ -221,8 +222,8 @@ function ut(t) {
   return (() => {
     var n = qe(), i = n.firstChild, l = i.firstChild, c = l.firstChild, h = c.firstChild, v = h.firstChild, b = v.nextSibling;
     b.firstChild;
-    var M = i.nextSibling;
-    return ee(Y, i), c.$$click = () => k("name"), f(b, m(W, {
+    var D = i.nextSibling;
+    return ee(Y, i), c.$$click = () => A("name"), f(b, m(B, {
       field: "name"
     }), null), f(l, m(P, {
       get when() {
@@ -240,7 +241,7 @@ function ut(t) {
       },
       get children() {
         var a = He(), r = a.firstChild;
-        return r.firstChild, r.$$click = () => k("modifiedAt"), f(r, m(W, {
+        return r.firstChild, r.$$click = () => A("modifiedAt"), f(r, m(B, {
           field: "modifiedAt"
         }), null), f(a, m(P, {
           get when() {
@@ -252,9 +253,9 @@ function ut(t) {
               onResize: V
             });
           }
-        }), null), p((e) => {
-          var s = E("relative shrink-0", S().showSize && "border-r border-border"), u = `${B()}px`;
-          return s !== e.e && N(a, e.e = s), u !== e.t && L(a, "width", e.t = u), e;
+        }), null), k((t) => {
+          var s = E("relative shrink-0", S().showSize && "border-r border-border"), u = `${N()}px`;
+          return s !== t.e && W(a, t.e = s), u !== t.t && p(a, "width", t.t = u), t;
         }, {
           e: void 0,
           t: void 0
@@ -265,33 +266,33 @@ function ut(t) {
         return S().showSize;
       },
       get children() {
-        var a = Be(), r = a.firstChild;
-        return r.firstChild, r.$$click = () => k("size"), f(r, m(W, {
+        var a = Ne(), r = a.firstChild;
+        return r.firstChild, r.$$click = () => A("size"), f(r, m(B, {
           field: "size"
-        }), null), p((e) => L(a, "width", `${q()}px`)), a;
+        }), null), k((t) => p(a, "width", `${q()}px`)), a;
       }
-    }), null), ie(M, "pointerdown", y.onPointerDown, !0), ie(M, "scroll", g.onScroll), ee((a) => {
-      _ = a, g.scrollRef(a), o.setScrollContainer(a);
-    }, M), f(M, m(P, {
+    }), null), ie(D, "pointerdown", y.onPointerDown, !0), ie(D, "scroll", g.onScroll), ee((a) => {
+      z = a, g.scrollRef(a), o.setScrollContainer(a);
+    }, D), f(D, m(P, {
       get when() {
         return o.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var a = Xe();
+          var a = Ye();
           return f(a, m(P, {
             get when() {
               return o.filterQueryApplied().trim();
             },
             get fallback() {
-              return Ye();
+              return Ge();
             },
             get children() {
               return [(() => {
-                var r = Ne(), e = r.firstChild, s = e.nextSibling;
+                var r = Oe(), t = r.firstChild, s = t.nextSibling;
                 return s.nextSibling, f(r, () => o.filterQueryApplied(), s), r;
               })(), (() => {
-                var r = Oe();
+                var r = Xe();
                 return r.$$click = () => o.setFilterQuery(""), r;
               })()];
             }
@@ -304,7 +305,7 @@ function ut(t) {
           get each() {
             return $();
           },
-          children: (r) => m(Ue, {
+          children: (r) => m(Qe, {
             item: r,
             formatSize: j,
             formatDate: O,
@@ -315,78 +316,78 @@ function ut(t) {
               return S().showSize;
             },
             get modifiedWidthPx() {
-              return B();
+              return N();
             },
             get sizeWidthPx() {
               return q();
             },
             get instanceId() {
-              return I();
+              return M();
             },
             get enableDragDrop() {
               return R();
             },
-            dragContext: D,
+            dragContext: I,
             registerRow: U
           })
-        })), p((r) => {
-          var e = `${g.paddingTop()}px`, s = `${g.paddingBottom()}px`;
-          return e !== r.e && L(a, "padding-top", r.e = e), s !== r.t && L(a, "padding-bottom", r.t = s), r;
+        })), k((r) => {
+          var t = `${g.paddingTop()}px`, s = `${g.paddingBottom()}px`;
+          return t !== r.e && p(a, "padding-top", r.e = t), s !== r.t && p(a, "padding-bottom", r.t = s), r;
         }, {
           e: void 0,
           t: void 0
         }), a;
       }
-    }), null), f(M, m(P, {
+    }), null), f(D, m(P, {
       get when() {
         return y.overlayStyle();
       },
       children: (a) => (() => {
         var r = le();
-        return N(r, Ae), p((e) => Ce(r, a(), e)), r;
+        return W(r, pe), k((t) => be(r, a(), t)), r;
       })()
-    }), null), p((a) => {
-      var r = E("flex flex-col h-full min-h-0", t.class), e = E("relative flex-1 min-w-0", S().showModified && "border-r border-border");
-      return r !== a.e && N(n, a.e = r), e !== a.t && N(l, a.t = e), a;
+    }), null), k((a) => {
+      var r = E("flex flex-col h-full min-h-0", e.class), t = E("relative flex-1 min-w-0", S().showModified && "border-r border-border");
+      return r !== a.e && W(n, a.e = r), t !== a.t && W(l, a.t = t), a;
     }, {
       e: void 0,
       t: void 0
     }), n;
   })();
 }
-function Ue(t) {
-  const o = fe(), D = () => o.isSelected(t.item.id), R = () => o.getFilterMatchForId(t.item.id), I = $e(() => t.item), C = Te(o, I, {
+function Qe(e) {
+  const o = fe(), I = () => o.isSelected(e.item.id), R = () => o.getFilterMatchForId(e.item.id), M = ze(() => e.item), C = Ae(o, M, {
     source: "list"
   });
-  let g, $ = null, T = 0, _ = 0, x = !1;
+  let g, $ = null, F = 0, z = 0, x = !1;
   const U = 5, Q = 500;
-  let k = null;
-  const [j, O] = ue(!1), y = () => g === "touch" || g === "pen", W = () => t.item.type === "folder", H = () => W() && t.enableDragDrop && t.dragContext, X = () => {
-    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;
+  let A = null;
+  const [j, O] = ue(!1), y = () => g === "touch" || g === "pen", B = () => e.item.type === "folder", H = () => B() && e.enableDragDrop && e.dragContext, X = () => {
+    if (!H() || !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;
   }, K = () => {
-    if (!t.dragContext) return !1;
-    const e = t.dragContext.dragState();
-    return e.isDragging ? e.draggedItems.some((s) => s.item.id === t.item.id) : !1;
+    if (!e.dragContext) return !1;
+    const t = e.dragContext.dragState();
+    return t.isDragging ? t.draggedItems.some((s) => s.item.id === e.item.id) : !1;
   }, Y = () => {
-    k !== null && (clearTimeout(k), k = null);
+    A !== null && (clearTimeout(A), A = null);
   }, J = () => {
     typeof document > "u" || (document.removeEventListener("pointermove", q, !0), document.removeEventListener("pointerup", G, !0), document.removeEventListener("pointercancel", V, !0));
-  }, A = () => {
+  }, L = () => {
     typeof document > "u" || (document.addEventListener("pointermove", q, !0), document.addEventListener("pointerup", G, !0), document.addEventListener("pointercancel", V, !0));
-  }, S = (e) => {
-    Y(), J(), x && t.dragContext && t.dragContext.endDrag(e), $ = null, x = !1;
+  }, S = (t) => {
+    Y(), J(), x && e.dragContext && e.dragContext.endDrag(t), $ = null, x = !1;
   };
   de(() => {
-    t.registerRow(t.item.id, null), S(!1);
+    e.registerRow(e.item.id, null), S(!1);
   });
-  const B = (e, s) => {
-    if (!t.enableDragDrop || !t.dragContext || x) return;
-    x = !0, D() || o.selectItem(t.item.id, !1);
-    const u = o.getSelectedItemsList(), w = (u.length > 0 && D() ? u : [t.item]).map((F) => ({
-      item: F,
-      sourceInstanceId: t.instanceId,
+  const N = (t, s) => {
+    if (!e.enableDragDrop || !e.dragContext || x) return;
+    x = !0, I() || o.selectItem(e.item.id, !1);
+    const u = o.getSelectedItemsList(), w = (u.length > 0 && I() ? u : [e.item]).map((T) => ({
+      item: T,
+      sourceInstanceId: e.instanceId,
       sourcePath: o.currentPath()
     }));
     if (y() && "vibrate" in navigator)
@@ -394,83 +395,83 @@ function Ue(t) {
         navigator.vibrate(50);
       } catch {
       }
-    t.dragContext.startDrag(w, e, s);
-  }, q = (e) => {
-    if ($ !== e.pointerId) return;
-    const s = e.clientX - T, u = e.clientY - _, d = Math.sqrt(s * s + u * u);
+    e.dragContext.startDrag(w, t, s);
+  }, q = (t) => {
+    if ($ !== t.pointerId) return;
+    const s = t.clientX - F, u = t.clientY - z, d = Math.sqrt(s * s + u * u);
     if (y() && !x && d > 10) {
       S(!1);
       return;
     }
-    !y() && !x && d > U && B(e.clientX, e.clientY), x && t.dragContext && t.dragContext.updateDrag(e.clientX, e.clientY);
-  }, G = (e) => {
-    $ === e.pointerId && (C.onPointerUp(), S(!0));
-  }, V = (e) => {
-    $ === e.pointerId && (C.onPointerCancel(), S(!1));
-  }, n = (e) => {
-    g = e.pointerType, C.onPointerDown(e), !(e.pointerType === "mouse" && e.button !== 0) && (!t.enableDragDrop || !t.dragContext || ($ = e.pointerId, T = e.clientX, _ = e.clientY, x = !1, A(), y() && (Y(), k = setTimeout(() => {
-      $ !== null && !x && B(T, _);
+    !y() && !x && d > U && N(t.clientX, t.clientY), x && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+  }, G = (t) => {
+    $ === t.pointerId && (C.onPointerUp(), S(!0));
+  }, V = (t) => {
+    $ === t.pointerId && (C.onPointerCancel(), S(!1));
+  }, n = (t) => {
+    g = t.pointerType, C.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || ($ = t.pointerId, F = t.clientX, z = t.clientY, x = !1, L(), y() && (Y(), A = setTimeout(() => {
+      $ !== null && !x && N(F, z);
     }, Q))));
-  }, i = (e) => {
-    g = e.pointerType, C.onPointerMove(e);
-  }, l = (e) => {
-    if (!H() || !t.dragContext) return;
-    const s = t.dragContext.dragState();
+  }, i = (t) => {
+    g = t.pointerType, C.onPointerMove(t);
+  }, l = (t) => {
+    if (!H() || !e.dragContext) return;
+    const s = e.dragContext.dragState();
     if (!s.isDragging) return;
     O(!0);
-    const u = t.dragContext.canDropOn(s.draggedItems, t.item.path, t.item, t.instanceId), w = e.currentTarget?.getBoundingClientRect() ?? null;
-    t.dragContext.setDropTarget({
-      instanceId: t.instanceId,
-      targetPath: t.item.path,
-      targetItem: t.item
+    const u = e.dragContext.canDropOn(s.draggedItems, e.item.path, e.item, e.instanceId), w = t.currentTarget?.getBoundingClientRect() ?? null;
+    e.dragContext.setDropTarget({
+      instanceId: e.instanceId,
+      targetPath: e.item.path,
+      targetItem: e.item
     }, u, w);
-  }, c = (e) => {
-    if (!t.dragContext) return;
+  }, c = (t) => {
+    if (!e.dragContext) return;
     O(!1);
-    const s = t.dragContext.dragState();
-    s.isDragging && s.dropTarget?.targetPath === t.item.path && t.dragContext.setDropTarget(null, !1);
-  }, h = (e) => {
+    const s = e.dragContext.dragState();
+    s.isDragging && s.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
+  }, h = (t) => {
     if (x) {
       x = !1;
       return;
     }
-    if (!C.consumeClickSuppression(e)) {
+    if (!C.consumeClickSuppression(t)) {
       if (y()) {
-        o.openItem(t.item);
+        o.openItem(e.item);
         return;
       }
-      if (e.shiftKey) {
-        o.selectRangeTo(t.item.id, ae(e));
+      if (t.shiftKey) {
+        o.selectRangeTo(e.item.id, ae(t));
         return;
       }
-      o.selectItem(t.item.id, ae(e));
+      o.selectItem(e.item.id, ae(t));
     }
   }, v = () => {
-    y() || o.openItem(t.item);
-  }, b = (e) => {
-    if (e.preventDefault(), e.stopPropagation(), y()) return;
-    o.ensureContextMenuSelection(t.item.id);
-    const s = o.getSelectedItemsList(), u = s.length > 0 ? s : [t.item];
-    o.showContextMenu(ke({
-      x: e.clientX,
-      y: e.clientY,
-      triggerItem: t.item,
+    y() || o.openItem(e.item);
+  }, b = (t) => {
+    if (t.preventDefault(), t.stopPropagation(), y()) return;
+    o.ensureContextMenuSelection(e.item.id);
+    const s = o.getSelectedItemsList(), u = s.length > 0 ? s : [e.item];
+    o.showContextMenu(Le({
+      x: t.clientX,
+      y: t.clientY,
+      triggerItem: e.item,
       items: u,
       source: "list"
     }));
-  }, M = () => t.dragContext?.dragState(), a = () => M()?.isDragging ?? !1, r = () => j() && a() && H();
+  }, D = () => e.dragContext?.dragState(), a = () => D()?.isDragging ?? !1, r = () => j() && a() && H();
   return (() => {
-    var e = Ge(), s = e.firstChild, u = s.firstChild;
+    var t = Ve(), s = t.firstChild, u = s.firstChild;
     return ee((d) => {
-      t.registerRow(t.item.id, d);
-    }, e), be(e, Me({
+      e.registerRow(e.item.id, d);
+    }, t), De(t, Ie({
       get "data-file-browser-item-id"() {
-        return t.item.id;
+        return e.item.id;
       },
       get "data-file-browser-item-path"() {
-        return t.item.path;
+        return e.item.path;
       }
-    }, Fe, {
+    }, Ee, {
       onClick: h,
       onDblClick: v,
       onContextMenu: b,
@@ -484,7 +485,7 @@ function Ue(t) {
           "transition-all duration-150 ease-out",
           "hover:bg-accent/50",
           "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-          D() && "bg-accent text-accent-foreground",
+          I() && "bg-accent text-accent-foreground",
           // Drag state styling - being dragged items become translucent
           K() && "opacity-40 scale-[0.98]",
           // Drop target styling - enhanced visual feedback
@@ -492,41 +493,49 @@ function Ue(t) {
           r() && !X() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
         );
       }
-    }), !1, !0), f(u, m(Pe, {
+    }), !1, !0), f(u, m(Re, {
       get item() {
-        return t.item;
+        return e.item;
       },
       class: "w-4 h-4"
-    })), f(s, m(Ve, {
+    }), null), f(u, m(Fe, {
+      get item() {
+        return e.item;
+      },
+      size: "xs"
+    }), null), f(s, m(Ue, {
       get name() {
-        return t.item.name;
+        return e.item.name;
       },
       get match() {
         return R();
+      },
+      get class() {
+        return Te(e.item);
       }
-    }), null), f(e, m(P, {
+    }), null), f(t, m(P, {
       get when() {
-        return t.showModified;
+        return e.showModified;
       },
       get children() {
         var d = se();
-        return f(d, () => t.formatDate(t.item.modifiedAt)), p((w) => L(d, "width", `${t.modifiedWidthPx}px`)), d;
+        return f(d, () => e.formatDate(e.item.modifiedAt)), k((w) => p(d, "width", `${e.modifiedWidthPx}px`)), d;
       }
-    }), null), f(e, m(P, {
+    }), null), f(t, m(P, {
       get when() {
-        return t.showSize;
+        return e.showSize;
       },
       get children() {
         var d = se();
         return f(d, (() => {
-          var w = ce(() => t.item.type === "folder");
-          return () => w() ? "-" : t.formatSize(t.item.size);
-        })()), p((w) => L(d, "width", `${t.sizeWidthPx}px`)), d;
+          var w = ce(() => e.item.type === "folder");
+          return () => w() ? "-" : e.formatSize(e.item.size);
+        })()), k((w) => p(d, "width", `${e.sizeWidthPx}px`)), d;
       }
-    }), null), e;
+    }), null), t;
   })();
 }
-De(["click", "pointerdown"]);
+Me(["click", "pointerdown"]);
 export {
-  ut as FileListView
+  ft as FileListView
 };