@floegence/floe-webapp-core 0.8.2 → 0.8.4

package/dist/index42.js

@@ -1,5 +1,5 @@
-import { delegateEvents as U, template as x, insert as s, createComponent as o, effect as $, className as g, setAttribute as j, memo as k, setStyleProperty as B } from "solid-js/web";
-import { createMemo as w, For as H, untrack as R, Show as b } from "solid-js";
+import { delegateEvents as U, template as x, insert as s, createComponent as o, effect as y, className as g, setAttribute as j, memo as k, setStyleProperty as B } from "solid-js/web";
+import { createMemo as w, For as H, untrack as R, Show as $ } from "solid-js";
 import { cn as v } from "./index69.js";
 import { useFileBrowser as T } from "./index41.js";
 import { FolderOpenIcon as X, FolderIcon as Y } from "./index48.js";
@@ -10,12 +10,12 @@ function ie(n) {
   const i = T(), r = w(() => i.files().filter((c) => c.type === "folder"));
   return (() => {
     var c = _();
-    return c.$$contextmenu = (y) => y.preventDefault(), s(c, o(F, {
+    return c.$$contextmenu = (b) => b.preventDefault(), s(c, o(F, {
       get items() {
         return r();
       },
       depth: 0
-    })), $(() => g(c, v("flex flex-col", n.class))), c;
+    })), y(() => g(c, v("flex flex-col", n.class))), c;
   })();
 }
 function F(n) {
@@ -33,7 +33,7 @@ function F(n) {
   });
 }
 function V(n) {
-  const i = T(), r = () => i.isExpanded(n.item.path), c = () => i.currentPath() === n.item.path, y = R(() => n.item), f = z(i, y, {
+  const i = T(), r = () => i.isExpanded(n.item.path), c = () => i.currentPath() === n.item.path, b = R(() => n.item), f = z(i, b, {
     selectOnOpen: !1
   });
   let u;
@@ -49,7 +49,7 @@ function V(n) {
   }, I = (e) => {
     u = e.pointerType, f.onPointerCancel();
   }, L = (e) => {
-    f.consumeClickSuppression(e) || i.setCurrentPath(n.item.path);
+    f.consumeClickSuppression(e) || i.navigateTo(b);
   }, N = (e) => {
     e.preventDefault(), e.stopPropagation(), !M() && i.showContextMenu({
       x: e.clientX,
@@ -61,7 +61,7 @@ function V(n) {
   };
   return (() => {
     var e = K(), d = e.firstChild, l = d.firstChild, C = l.firstChild, A = C.nextSibling;
-    return s(d, o(b, {
+    return s(d, o($, {
       get when() {
         return m();
       },
@@ -72,15 +72,15 @@ function V(n) {
         var t = G();
         return t.$$click = O, s(t, o(q, {
           class: "w-3 h-3 opacity-50"
-        })), $((a) => {
-          var h = v("flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center cursor-pointer", "transition-transform duration-150", r() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring"), p = r() ? "Collapse folder" : "Expand folder";
-          return h !== a.e && g(t, a.e = h), p !== a.t && j(t, "aria-label", a.t = p), a;
+        })), y((a) => {
+          var p = v("flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center cursor-pointer", "transition-transform duration-150", r() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring"), h = r() ? "Collapse folder" : "Expand folder";
+          return p !== a.e && g(t, a.e = p), h !== a.t && j(t, "aria-label", a.t = h), a;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), l), l.addEventListener("pointercancel", I), l.$$pointerup = S, l.$$pointermove = E, l.$$pointerdown = D, l.$$contextmenu = N, l.$$click = L, s(C, o(b, {
+    }), l), l.addEventListener("pointercancel", I), l.$$pointerup = S, l.$$pointermove = E, l.$$pointerdown = D, l.$$contextmenu = N, l.$$click = L, s(C, o($, {
       get when() {
         return k(() => !!m())() && r();
       },
@@ -94,7 +94,7 @@ function V(n) {
           class: "w-4 h-4"
         });
       }
-    })), s(A, () => n.item.name), s(l, o(b, {
+    })), s(A, () => n.item.name), s(l, o($, {
       get when() {
         return m();
       },
@@ -102,7 +102,7 @@ function V(n) {
         var t = J();
         return s(t, P), t;
       }
-    }), null), s(e, o(b, {
+    }), null), s(e, o($, {
       get when() {
         return k(() => !!r())() && m();
       },
@@ -115,11 +115,11 @@ function V(n) {
           get depth() {
             return n.depth + 1;
           }
-        })), $(() => g(t, v("overflow-hidden transition-all duration-200", r() ? "opacity-100" : "opacity-0"))), t;
+        })), y(() => g(t, v("overflow-hidden transition-all duration-200", r() ? "opacity-100" : "opacity-0"))), t;
       }
-    }), null), $((t) => {
-      var a = v("group flex items-center w-full py-1 text-xs", "transition-all duration-100", "hover:bg-sidebar-accent/60", c() && "bg-sidebar-accent text-sidebar-accent-foreground font-medium"), h = `${8 + n.depth * 12}px`, p = v("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 a !== t.e && g(d, t.e = a), h !== t.t && B(d, "padding-left", t.t = h), p !== t.a && g(l, t.a = p), t;
+    }), null), y((t) => {
+      var a = v("group flex items-center w-full py-1 text-xs", "transition-all duration-100", "hover:bg-sidebar-accent/60", c() && "bg-sidebar-accent text-sidebar-accent-foreground font-medium"), p = `${8 + n.depth * 12}px`, h = v("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 a !== t.e && g(d, t.e = a), p !== t.t && B(d, "padding-left", t.t = p), h !== t.a && g(l, t.a = h), t;
     }, {
       e: void 0,
       t: void 0,

package/dist/index43.js

@@ -1,199 +1,341 @@
-import { delegateEvents as L, template as h, insert as s, createComponent as a, effect as S, className as F, Dynamic as A, memo as D, setStyleProperty as B } from "solid-js/web";
-import { Show as I, For as T, untrack as H, createMemo as N } from "solid-js";
-import { cn as y } from "./index69.js";
-import { useFileBrowser as z } from "./index41.js";
-import { FolderIcon as K, getFileIcon as Q } from "./index48.js";
-import { ChevronDown as U } from "./index34.js";
-import { createLongPressContextMenuHandlers as j } from "./index84.js";
-var E = /* @__PURE__ */ h("<span class=truncate>"), V = /* @__PURE__ */ h('<mark class="bg-warning/40 text-inherit rounded-sm">'), X = /* @__PURE__ */ h("<span>"), Y = /* @__PURE__ */ h('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><button type=button class="group flex items-center flex-1 min-w-0 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Name</button><button type=button class="group hidden sm:flex items-center w-32 px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified</button><button type=button class="group hidden md:flex items-center w-24 px-3 py-2 text-right justify-end cursor-pointer hover:bg-muted/50 transition-colors">Size</button></div><div class="flex-1 min-h-0 overflow-auto">'), q = /* @__PURE__ */ h('<span>No files matching "<!>"'), G = /* @__PURE__ */ h('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), J = /* @__PURE__ */ h('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), O = /* @__PURE__ */ h("<span>This folder is empty"), R = /* @__PURE__ */ h('<button type=button style=animation-fill-mode:backwards><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"></span></div><div class="hidden sm:block w-32 px-3 py-1.5 text-muted-foreground truncate"></div><div class="hidden md:block w-24 px-3 py-1.5 text-right text-muted-foreground">');
-function W(n) {
-  const i = N(() => {
-    if (!n.match || n.match.matchedIndices.length === 0)
+import { delegateEvents as te, template as g, use as ie, insert as a, createComponent as c, effect as k, setStyleProperty as F, className as E, Dynamic as ne, memo as j } from "solid-js/web";
+import { createSignal as re, createMemo as O, Show as b, For as V, untrack as oe } from "solid-js";
+import { cn as N } from "./index69.js";
+import { useMediaQuery as Q } from "./index63.js";
+import { useResizeObserver as se } from "./index65.js";
+import { useFileBrowser as X } from "./index41.js";
+import { FolderIcon as le, getFileIcon as de } from "./index48.js";
+import { ChevronDown as ce } from "./index34.js";
+import { createLongPressContextMenuHandlers as ae } from "./index84.js";
+import { ResizeHandle as K } from "./index8.js";
+var me = /* @__PURE__ */ g("<span class=truncate>"), he = /* @__PURE__ */ g('<mark class="bg-warning/40 text-inherit rounded-sm">'), ue = /* @__PURE__ */ g("<span>"), fe = /* @__PURE__ */ g('<div class="relative shrink-0"><button type=button class="group w-full flex items-center px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors">Modified'), xe = /* @__PURE__ */ g('<div class=shrink-0><button type=button class="group w-full flex items-center px-3 py-2 text-right justify-end cursor-pointer hover:bg-muted/50 transition-colors">Size'), ge = /* @__PURE__ */ g('<div><div class="flex items-center border-b border-border text-[11px] text-muted-foreground font-medium"><div class="relative flex-1 min-w-0"><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">Name</button></div></div><div class="flex-1 min-h-0 overflow-auto">'), $e = /* @__PURE__ */ g('<span>No files matching "<!>"'), we = /* @__PURE__ */ g('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), ve = /* @__PURE__ */ g('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), pe = /* @__PURE__ */ g("<span>This folder is empty"), ze = /* @__PURE__ */ g('<div class="shrink-0 px-3 py-1.5 text-muted-foreground truncate">'), Me = /* @__PURE__ */ g('<div class="shrink-0 px-3 py-1.5 text-right text-muted-foreground">'), _e = /* @__PURE__ */ g('<button type=button style=animation-fill-mode:backwards><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 ye(r) {
+  const d = O(() => {
+    if (!r.match || r.match.matchedIndices.length === 0)
       return [{
-        text: n.name,
+        text: r.name,
         highlight: !1
       }];
-    const l = [], d = new Set(n.match.matchedIndices);
-    let c = "", o = !1;
-    for (let e = 0; e < n.name.length; e++) {
-      const r = d.has(e);
-      e === 0 ? (o = r, c = n.name[e]) : r === o ? c += n.name[e] : (l.push({
-        text: c,
-        highlight: o
-      }), c = n.name[e], o = r);
+    const f = [], _ = new Set(r.match.matchedIndices);
+    let x = "", u = !1;
+    for (let m = 0; m < r.name.length; m++) {
+      const y = _.has(m);
+      m === 0 ? (u = y, x = r.name[m]) : y === u ? x += r.name[m] : (f.push({
+        text: x,
+        highlight: u
+      }), x = r.name[m], u = y);
     }
-    return c && l.push({
-      text: c,
-      highlight: o
-    }), l;
+    return x && f.push({
+      text: x,
+      highlight: u
+    }), f;
   });
   return (() => {
-    var l = E();
-    return s(l, a(T, {
+    var f = me();
+    return a(f, c(V, {
       get each() {
-        return i();
+        return d();
       },
-      children: (d) => a(I, {
+      children: (_) => c(b, {
         get when() {
-          return d.highlight;
+          return _.highlight;
         },
         get fallback() {
-          return D(() => d.text);
+          return j(() => _.text);
         },
         get children() {
-          var c = V();
-          return s(c, () => d.text), c;
+          var x = he();
+          return a(x, () => _.text), x;
         }
       })
-    })), l;
+    })), f;
   })();
 }
-function ce(n) {
-  const i = z(), l = (e) => {
-    const r = i.sortConfig();
-    i.setSortConfig({
-      field: e,
-      direction: r.field === e && r.direction === "asc" ? "desc" : "asc"
+function Ae(r) {
+  const d = X(), f = (t) => {
+    const e = d.sortConfig();
+    d.setSortConfig({
+      field: t,
+      direction: e.field === t && e.direction === "asc" ? "desc" : "asc"
     });
-  }, d = (e) => e === void 0 ? "-" : e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`, c = (e) => e ? e.toLocaleDateString("en-US", {
+  }, _ = (t) => t === void 0 ? "-" : t < 1024 ? `${t} B` : t < 1024 * 1024 ? `${(t / 1024).toFixed(1)} KB` : `${(t / (1024 * 1024)).toFixed(1)} MB`, x = (t) => t ? t.toLocaleDateString("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric"
-  }) : "-", o = (e) => {
-    const r = () => i.sortConfig(), f = () => r().field === e.field;
+  }) : "-", u = (t) => {
+    const e = () => d.sortConfig(), i = () => e().field === t.field;
     return (() => {
-      var u = X();
-      return s(u, a(U, {
+      var o = ue();
+      return a(o, c(ce, {
         get class() {
-          return y("w-3 h-3 transition-transform duration-150", f() && r().direction === "asc" && "rotate-180");
+          return N("w-3 h-3 transition-transform duration-150", i() && e().direction === "asc" && "rotate-180");
         }
-      })), S(() => F(u, y("ml-1 transition-all duration-150", f() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), u;
+      })), k(() => E(o, N("ml-1 transition-all duration-150", i() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), o;
     })();
+  }, m = Q("(min-width: 640px)"), y = Q("(min-width: 768px)"), [A, L] = re(null), T = se(A), W = (t, e, i) => Math.max(e, Math.min(i, t)), $ = O(() => {
+    var D;
+    const t = ((D = T()) == null ? void 0 : D.width) ?? 0, e = m(), i = y(), o = d.listColumnRatios(), h = 160, s = 120, l = 80, v = 128, p = 96;
+    if (!e || t <= 0)
+      return {
+        width: t,
+        showModified: e,
+        showSize: i,
+        minName: h,
+        minModified: s,
+        minSize: l,
+        modifiedWidth: v,
+        sizeWidth: p
+      };
+    if (!i) {
+      const C = o.size, S = Math.max(0, 1 - C);
+      let M = (S > 0 ? o.modifiedAt / S : o.modifiedAt) * t;
+      return M = W(M, s, Math.max(s, t - h)), {
+        width: t,
+        showModified: e,
+        showSize: i,
+        minName: h,
+        minModified: s,
+        minSize: l,
+        modifiedWidth: M,
+        sizeWidth: 0
+      };
+    }
+    let w = Math.max(s, o.modifiedAt * t), z = Math.max(l, o.size * t);
+    const U = Math.max(0, t - h);
+    if (w + z > U) {
+      const C = w + z - U, S = Math.max(0, w - s), M = Math.max(0, z - l), P = S + M;
+      P > 0 && (w -= C * (S / P), z -= C * (M / P));
+    }
+    return w = Math.max(s, w), z = Math.max(l, z), {
+      width: t,
+      showModified: e,
+      showSize: i,
+      minName: h,
+      minModified: s,
+      minSize: l,
+      modifiedWidth: w,
+      sizeWidth: z
+    };
+  }), R = () => $().modifiedWidth, I = () => $().sizeWidth, H = (t) => {
+    const e = $();
+    if (!e.showModified || e.width <= 0) return;
+    if (!e.showSize) {
+      const D = d.listColumnRatios().size, C = Math.max(0, 1 - D);
+      if (C <= 0) return;
+      const S = e.width, M = e.modifiedWidth, P = Math.max(0, S - M), Y = e.minName - P, q = M - e.minModified, B = W(t, Y, q);
+      if (B === 0) return;
+      const G = P + B, J = M - B, Z = G / S * C, ee = J / S * C;
+      d.setListColumnRatios({
+        name: Z,
+        modifiedAt: ee,
+        size: D
+      });
+      return;
+    }
+    const i = e.width, o = e.modifiedWidth, h = e.sizeWidth, s = Math.max(0, i - o - h), l = e.minName - s, v = o - e.minModified, p = W(t, l, v);
+    if (p === 0) return;
+    const w = s + p, z = o - p;
+    d.setListColumnRatios({
+      name: w / i,
+      modifiedAt: z / i,
+      size: h / i
+    });
+  }, n = (t) => {
+    const e = $();
+    if (!e.showSize || e.width <= 0) return;
+    const i = e.width, o = e.modifiedWidth, h = e.sizeWidth, s = e.minModified - o, l = h - e.minSize, v = W(t, s, l);
+    if (v === 0) return;
+    const p = o + v, w = h - v, z = Math.max(0, i - p - w);
+    d.setListColumnRatios({
+      name: z / i,
+      modifiedAt: p / i,
+      size: w / i
+    });
   };
   return (() => {
-    var e = Y(), r = e.firstChild, f = r.firstChild;
-    f.firstChild;
-    var u = f.nextSibling;
-    u.firstChild;
-    var v = u.nextSibling;
-    v.firstChild;
-    var _ = r.nextSibling;
-    return f.$$click = () => l("name"), s(f, a(o, {
+    var t = ge(), e = t.firstChild, i = e.firstChild, o = i.firstChild;
+    o.firstChild;
+    var h = e.nextSibling;
+    return ie(L, e), o.$$click = () => f("name"), a(o, c(u, {
       field: "name"
-    }), null), u.$$click = () => l("modifiedAt"), s(u, a(o, {
-      field: "modifiedAt"
-    }), null), v.$$click = () => l("size"), s(v, a(o, {
-      field: "size"
-    }), null), s(_, a(I, {
+    }), null), a(i, c(b, {
       get when() {
-        return i.currentFiles().length > 0;
+        return $().showModified;
+      },
+      get children() {
+        return c(K, {
+          direction: "horizontal",
+          onResize: H
+        });
+      }
+    }), null), a(e, c(b, {
+      get when() {
+        return $().showModified;
+      },
+      get children() {
+        var s = fe(), l = s.firstChild;
+        return l.firstChild, l.$$click = () => f("modifiedAt"), a(l, c(u, {
+          field: "modifiedAt"
+        }), null), a(s, c(b, {
+          get when() {
+            return $().showSize;
+          },
+          get children() {
+            return c(K, {
+              direction: "horizontal",
+              onResize: n
+            });
+          }
+        }), null), k((v) => F(s, "width", `${R()}px`)), s;
+      }
+    }), null), a(e, c(b, {
+      get when() {
+        return $().showSize;
+      },
+      get children() {
+        var s = xe(), l = s.firstChild;
+        return l.firstChild, l.$$click = () => f("size"), a(l, c(u, {
+          field: "size"
+        }), null), k((v) => F(s, "width", `${I()}px`)), s;
+      }
+    }), null), a(h, c(b, {
+      get when() {
+        return d.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var x = J();
-          return s(x, a(I, {
+          var s = ve();
+          return a(s, c(b, {
             get when() {
-              return i.filterQuery().trim();
+              return d.filterQuery().trim();
             },
             get fallback() {
-              return O();
+              return pe();
             },
             get children() {
               return [(() => {
-                var m = q(), w = m.firstChild, p = w.nextSibling;
-                return p.nextSibling, s(m, () => i.filterQuery(), p), m;
+                var l = $e(), v = l.firstChild, p = v.nextSibling;
+                return p.nextSibling, a(l, () => d.filterQuery(), p), l;
               })(), (() => {
-                var m = G();
-                return m.$$click = () => i.setFilterQuery(""), m;
+                var l = we();
+                return l.$$click = () => d.setFilterQuery(""), l;
               })()];
             }
-          })), x;
+          })), s;
         })();
       },
       get children() {
-        return a(T, {
+        return c(V, {
           get each() {
-            return i.currentFiles();
+            return d.currentFiles();
           },
-          children: (x, m) => a(Z, {
-            item: x,
-            formatSize: d,
-            formatDate: c,
+          children: (s, l) => c(Se, {
+            item: s,
+            formatSize: _,
+            formatDate: x,
             get index() {
-              return m();
+              return l();
+            },
+            get showModified() {
+              return $().showModified;
+            },
+            get showSize() {
+              return $().showSize;
+            },
+            get modifiedWidthPx() {
+              return R();
+            },
+            get sizeWidthPx() {
+              return I();
             }
           })
         });
       }
-    })), S(() => F(e, y("flex flex-col h-full min-h-0", n.class))), e;
+    })), k(() => E(t, N("flex flex-col h-full min-h-0", r.class))), t;
   })();
 }
-function Z(n) {
-  const i = z(), l = () => i.isSelected(n.item.id), d = () => i.getFilterMatch(n.item.name), c = H(() => n.item), o = j(i, c);
-  let e;
-  const r = () => e === "touch" || e === "pen", f = (t) => {
-    e = t.pointerType, o.onPointerDown(t);
-  }, u = (t) => {
-    e = t.pointerType, o.onPointerMove(t);
-  }, v = (t) => {
-    e = t.pointerType, o.onPointerUp();
-  }, _ = (t) => {
-    e = t.pointerType, o.onPointerCancel();
-  }, x = (t) => {
-    if (!o.consumeClickSuppression(t)) {
-      if (r()) {
-        i.openItem(n.item);
+function Se(r) {
+  const d = X(), f = () => d.isSelected(r.item.id), _ = () => d.getFilterMatch(r.item.name), x = oe(() => r.item), u = ae(d, x);
+  let m;
+  const y = () => m === "touch" || m === "pen", A = (n) => {
+    m = n.pointerType, u.onPointerDown(n);
+  }, L = (n) => {
+    m = n.pointerType, u.onPointerMove(n);
+  }, T = (n) => {
+    m = n.pointerType, u.onPointerUp();
+  }, W = (n) => {
+    m = n.pointerType, u.onPointerCancel();
+  }, $ = (n) => {
+    if (!u.consumeClickSuppression(n)) {
+      if (y()) {
+        d.openItem(r.item);
         return;
       }
-      i.selectItem(n.item.id, t.metaKey || t.ctrlKey);
+      d.selectItem(r.item.id, n.metaKey || n.ctrlKey);
     }
-  }, m = () => {
-    r() || i.openItem(n.item);
-  }, w = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), r()) return;
-    l() || i.selectItem(n.item.id, !1);
-    const $ = i.selectedItems(), C = i.currentFiles(), b = $.size > 0 ? C.filter((k) => $.has(k.id)) : [n.item];
-    i.showContextMenu({
-      x: t.clientX,
-      y: t.clientY,
-      items: b
+  }, R = () => {
+    y() || d.openItem(r.item);
+  }, I = (n) => {
+    if (n.preventDefault(), n.stopPropagation(), y()) return;
+    f() || d.selectItem(r.item.id, !1);
+    const t = d.selectedItems(), e = d.currentFiles(), i = t.size > 0 ? e.filter((o) => t.has(o.id)) : [r.item];
+    d.showContextMenu({
+      x: n.clientX,
+      y: n.clientY,
+      items: i
     });
-  }, p = () => n.item.type === "folder" ? K : Q(n.item.extension);
+  }, H = () => r.item.type === "folder" ? le : de(r.item.extension);
   return (() => {
-    var t = R(), $ = t.firstChild, C = $.firstChild, b = $.nextSibling, k = b.nextSibling;
-    return t.addEventListener("pointercancel", _), t.$$pointerup = v, t.$$pointermove = u, t.$$pointerdown = f, t.$$contextmenu = w, t.$$dblclick = m, t.$$click = x, s(C, a(A, {
+    var n = _e(), t = n.firstChild, e = t.firstChild;
+    return n.addEventListener("pointercancel", W), n.$$pointerup = T, n.$$pointermove = L, n.$$pointerdown = A, n.$$contextmenu = I, n.$$dblclick = R, n.$$click = $, a(e, c(ne, {
       get component() {
-        return p();
+        return H();
       },
       class: "w-4 h-4"
-    })), s($, a(W, {
+    })), a(t, c(ye, {
       get name() {
-        return n.item.name;
+        return r.item.name;
       },
       get match() {
-        return d();
+        return _();
+      }
+    }), null), a(n, c(b, {
+      get when() {
+        return r.showModified;
+      },
+      get children() {
+        var i = ze();
+        return a(i, () => r.formatDate(r.item.modifiedAt)), k((o) => F(i, "width", `${r.modifiedWidthPx}px`)), i;
+      }
+    }), null), a(n, c(b, {
+      get when() {
+        return r.showSize;
+      },
+      get children() {
+        var i = Me();
+        return a(i, (() => {
+          var o = j(() => r.item.type === "folder");
+          return () => o() ? "-" : r.formatSize(r.item.size);
+        })()), k((o) => F(i, "width", `${r.sizeWidthPx}px`)), i;
       }
-    }), null), s(b, () => n.formatDate(n.item.modifiedAt)), s(k, (() => {
-      var g = D(() => n.item.type === "folder");
-      return () => g() ? "-" : n.formatSize(n.item.size);
-    })()), S((g) => {
-      var P = y(
+    }), null), k((i) => {
+      var o = N(
         "group w-full flex items-center text-xs cursor-pointer",
         "transition-all duration-100",
         "hover:bg-accent/50",
         "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-        l() && "bg-accent text-accent-foreground",
+        f() && "bg-accent text-accent-foreground",
         // Staggered animation on mount
         "animate-in fade-in slide-in-from-top-2"
-      ), M = `${Math.min(n.index * 20, 200)}ms`;
-      return P !== g.e && F(t, g.e = P), M !== g.t && B(t, "animation-delay", g.t = M), g;
+      ), h = `${Math.min(r.index * 20, 200)}ms`;
+      return o !== i.e && E(n, i.e = o), h !== i.t && F(n, "animation-delay", i.t = h), i;
     }, {
       e: void 0,
       t: void 0
-    }), t;
+    }), n;
   })();
 }
-L(["click", "dblclick", "contextmenu", "pointerdown", "pointermove", "pointerup"]);
+te(["click", "dblclick", "contextmenu", "pointerdown", "pointermove", "pointerup"]);
 export {
-  ce as FileListView
+  Ae as FileListView
 };