@floegence/floe-webapp-core 0.78.1 → 0.78.3

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

@@ -1,362 +1,375 @@
-import { use as ne, insert as c, createComponent as d, effect as R, className as B, setStyleProperty as L, addEventListener as ae, style as $e, setAttribute as Ie, template as M, spread as Me, mergeProps as De, memo as ue, delegateEvents as _e } from "solid-js/web";
-import { createMemo as ie, createEffect as ze, onCleanup as me, createSignal as fe, Show as y, For as re, untrack as ye } from "solid-js";
-import { Skeleton as U } from "../loading/Skeleton.js";
-import { cn as E } from "../../utils/cn.js";
-import { useMediaQuery as le } from "../../hooks/useMediaQuery.js";
-import { useResizeObserver as Re } from "../../hooks/useResizeObserver.js";
-import { useVirtualWindow as Pe } from "../../hooks/useVirtualWindow.js";
-import { useFileBrowser as ge } from "./FileBrowserContext.js";
-import { useFileBrowserDrag as Fe } from "../../context/FileBrowserDragContext.js";
-import { FileItemIcon as Te } from "./FileIcons.js";
-import { FileItemDecorationBadge as ke, fileItemDecorationNameClass as Ae } from "./FileItemDecorations.js";
-import { ChevronDown as Le } from "../icons/index.js";
-import { createLongPressContextMenuHandlers as Ee } from "./longPressContextMenu.js";
-import { ResizeHandle as se } from "../layout/ResizeHandle.js";
-import { fileBrowserTouchTargetAttrs as pe } from "./touchInteractionGuard.js";
-import { createItemContextMenuEvent as We } from "./contextMenuEvent.js";
-import { createFileBrowserMarqueeSelection as He, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as Be } from "./useFileBrowserMarqueeSelection.js";
-import { isPrimaryModKeyPressed as de } from "../../utils/keybind.js";
-var he = /* @__PURE__ */ M("<span>"), Ne = /* @__PURE__ */ M('<mark class="bg-warning/40 text-inherit rounded-sm">'), Oe = /* @__PURE__ */ M('<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'), qe = /* @__PURE__ */ M('<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'), ce = /* @__PURE__ */ M("<div>"), Xe = /* @__PURE__ */ M('<div><div data-file-list-header 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">'), Ye = /* @__PURE__ */ M("<div aria-hidden=true>"), Q = /* @__PURE__ */ M('<div class="shrink-0 px-3 py-1.5 text-left text-muted-foreground truncate">'), Ge = /* @__PURE__ */ M('<div data-file-browser-placeholder data-file-list-row class="w-full h-8 flex items-center text-xs"><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1.5">'), Ve = /* @__PURE__ */ M('<span>No files matching "<!>"'), Ue = /* @__PURE__ */ M('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Qe = /* @__PURE__ */ M('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), je = /* @__PURE__ */ M("<span>This folder is empty"), Ke = /* @__PURE__ */ M('<button type=button data-file-list-row><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">');
-const Je = "w-full h-8 flex items-center text-xs";
-function Ze(e) {
-  const l = ie(() => {
+import { use as K, insert as f, createComponent as d, effect as p, className as N, setStyleProperty as T, addEventListener as ue, style as _e, setAttribute as ze, template as I, spread as ye, mergeProps as Re, memo as xe, delegateEvents as Pe } from "solid-js/web";
+import { createSignal as J, createEffect as me, onCleanup as ae, createMemo as se, Show as _, For as ce, untrack as pe } from "solid-js";
+import { Skeleton as j } from "../loading/Skeleton.js";
+import { cn as W } from "../../utils/cn.js";
+import { useMediaQuery as fe } from "../../hooks/useMediaQuery.js";
+import { useResizeObserver as Fe } from "../../hooks/useResizeObserver.js";
+import { useVirtualWindow as ke } from "../../hooks/useVirtualWindow.js";
+import { useFileBrowser as we } from "./FileBrowserContext.js";
+import { useFileBrowserDrag as Te } from "../../context/FileBrowserDragContext.js";
+import { FileItemIcon as Ae } from "./FileIcons.js";
+import { FileItemDecorationBadge as Le, fileItemDecorationNameClass as Ee } from "./FileItemDecorations.js";
+import { ChevronDown as We } from "../icons/index.js";
+import { createLongPressContextMenuHandlers as He } from "./longPressContextMenu.js";
+import { ResizeHandle as ge } from "../layout/ResizeHandle.js";
+import { fileBrowserTouchTargetAttrs as Be } from "./touchInteractionGuard.js";
+import { createItemContextMenuEvent as Ne } from "./contextMenuEvent.js";
+import { createFileBrowserMarqueeSelection as Oe, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as qe } from "./useFileBrowserMarqueeSelection.js";
+import { isPrimaryModKeyPressed as he } from "../../utils/keybind.js";
+var be = /* @__PURE__ */ I("<span>"), Xe = /* @__PURE__ */ I('<mark class="bg-warning/40 text-inherit rounded-sm">'), Ye = /* @__PURE__ */ I('<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'), Ve = /* @__PURE__ */ I('<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'), ve = /* @__PURE__ */ I("<div>"), Ge = /* @__PURE__ */ I('<div><div aria-hidden=true class="absolute invisible pointer-events-none w-px h-[var(--floe-row-height)]"></div><div data-file-list-header 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">'), Ue = /* @__PURE__ */ I("<div aria-hidden=true>"), Z = /* @__PURE__ */ I('<div class="shrink-0 px-3 py-1 text-left text-muted-foreground truncate">'), Qe = /* @__PURE__ */ I('<div data-file-browser-placeholder data-file-list-row class="w-full h-[var(--floe-row-height)] flex items-center text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1">'), je = /* @__PURE__ */ I('<span>No files matching "<!>"'), Ke = /* @__PURE__ */ I('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Je = /* @__PURE__ */ I('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Ze = /* @__PURE__ */ I("<span>This folder is empty"), et = /* @__PURE__ */ I('<button type=button data-file-list-row><div class="flex items-center gap-2 flex-1 min-w-0 px-3 py-1"><span class="relative flex-shrink-0 w-4 h-4">');
+const tt = "w-full h-[var(--floe-row-height)] flex items-center text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]";
+function nt(e) {
+  const l = se(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
         text: e.name,
         highlight: !1
       }];
-    const I = [], F = new Set(e.match.matchedIndices);
-    let D = "", b = !1;
-    for (let g = 0; g < e.name.length; g++) {
-      const _ = F.has(g);
-      g === 0 ? (b = _, D = e.name[g]) : _ === b ? D += e.name[g] : (I.push({
-        text: D,
-        highlight: b
-      }), D = e.name[g], b = _);
+    const w = [], k = new Set(e.match.matchedIndices);
+    let M = "", D = !1;
+    for (let b = 0; b < e.name.length; b++) {
+      const S = k.has(b);
+      b === 0 ? (D = S, M = e.name[b]) : S === D ? M += e.name[b] : (w.push({
+        text: M,
+        highlight: D
+      }), M = e.name[b], D = S);
     }
-    return D && I.push({
-      text: D,
-      highlight: b
-    }), I;
+    return M && w.push({
+      text: M,
+      highlight: D
+    }), w;
   });
   return (() => {
-    var I = he();
-    return c(I, d(re, {
+    var w = be();
+    return f(w, d(ce, {
       get each() {
         return l();
       },
-      children: (F) => d(y, {
+      children: (k) => d(_, {
         get when() {
-          return F.highlight;
+          return k.highlight;
         },
         get fallback() {
-          return ue(() => F.text);
+          return xe(() => k.text);
         },
         get children() {
-          var D = Ne();
-          return c(D, () => F.text), D;
+          var M = Xe();
+          return f(M, () => k.text), M;
         }
       })
-    })), R(() => B(I, E("truncate", e.class))), I;
+    })), p(() => N(w, W("truncate", e.class))), w;
   })();
 }
-function St(e) {
-  const l = ge(), I = Fe(), F = () => (e.enableDragDrop ?? !0) && !!I, D = () => e.instanceId ?? "default", b = 32, g = Pe({
+function $t(e) {
+  const l = we(), w = Te(), k = () => (e.enableDragDrop ?? !0) && !!w, M = () => e.instanceId ?? "default", [D, b] = J(null), [S, O] = J(28);
+  me(() => {
+    const t = D();
+    if (!t) return;
+    const o = () => {
+      if (!t.getClientRects().length) return;
+      const u = Number.parseFloat(getComputedStyle(t).height);
+      u > 0 && O(u);
+    };
+    if (o(), typeof ResizeObserver > "u") return;
+    const a = new ResizeObserver(o);
+    a.observe(t), ae(() => a.disconnect());
+  });
+  const y = ke({
     count: () => l.currentFiles().length,
-    itemSize: () => b,
+    itemSize: S,
     overscan: 12
-  }), _ = ie(() => {
+  }), C = se(() => {
     const {
-      start: n,
-      end: i
-    } = g.range();
-    return l.currentFiles().slice(n, i);
-  }), T = /* @__PURE__ */ new Map();
-  let z = null, x = 0;
-  const j = (n, i) => {
-    if (i) {
-      T.set(n, i);
+      start: t,
+      end: o
+    } = y.range();
+    return l.currentFiles().slice(t, o);
+  }), A = /* @__PURE__ */ new Map();
+  let R = null, z = 0;
+  const ee = (t, o) => {
+    if (o) {
+      A.set(t, o);
       return;
     }
-    T.delete(n);
-  }, K = (n) => {
-    if (!z) return;
-    const i = n * b, s = i + b, u = z.scrollTop, h = u + z.clientHeight;
-    if (i < u) {
-      z.scrollTop = i, g.onScroll();
+    A.delete(t);
+  }, G = (t) => {
+    if (!R) return;
+    const o = t * S(), a = o + S(), u = R.scrollTop, g = u + R.clientHeight;
+    if (o < u) {
+      R.scrollTop = o, y.onScroll();
       return;
     }
-    s > h && (z.scrollTop = Math.max(0, s - z.clientHeight), g.onScroll());
+    a > g && (R.scrollTop = Math.max(0, a - R.clientHeight), y.onScroll());
   };
-  ze(() => {
-    const n = l.revealRequest(), i = l.currentFiles();
-    if (_(), !n) return;
-    const s = i.findIndex((w) => w.id === n.targetId);
-    if (s < 0) return;
-    if (!T.get(n.targetId)) {
-      K(s);
+  me(() => {
+    const t = l.revealRequest(), o = l.currentFiles();
+    if (C(), !t) return;
+    const a = o.findIndex((h) => h.id === t.targetId);
+    if (a < 0) return;
+    if (!A.get(t.targetId)) {
+      G(a);
       return;
     }
-    typeof cancelAnimationFrame == "function" && x && (cancelAnimationFrame(x), x = 0);
-    const h = () => {
-      l.revealRequest()?.requestId === n.requestId && (T.get(n.targetId)?.scrollIntoView({
+    typeof cancelAnimationFrame == "function" && z && (cancelAnimationFrame(z), z = 0);
+    const g = () => {
+      l.revealRequest()?.requestId === t.requestId && (A.get(t.targetId)?.scrollIntoView({
         block: "nearest",
         inline: "nearest"
-      }), l.selectItem(n.targetId, !1), l.consumeRevealRequest(n.requestId));
+      }), l.selectItem(t.targetId, !1), l.consumeRevealRequest(t.requestId));
     };
     if (typeof requestAnimationFrame == "function") {
-      x = requestAnimationFrame(() => {
-        x = 0, h();
+      z = requestAnimationFrame(() => {
+        z = 0, g();
       });
       return;
     }
-    queueMicrotask(h);
-  }), me(() => {
-    typeof cancelAnimationFrame == "function" && x && cancelAnimationFrame(x);
+    queueMicrotask(g);
+  }), ae(() => {
+    typeof cancelAnimationFrame == "function" && z && cancelAnimationFrame(z);
   });
-  const A = (n) => {
-    const i = l.sortConfig();
+  const P = (t) => {
+    const o = l.sortConfig();
     l.setSortConfig({
-      field: n,
-      direction: i.field === n && i.direction === "asc" ? "desc" : "asc"
+      field: t,
+      direction: o.field === t && o.direction === "asc" ? "desc" : "asc"
     });
-  }, J = (n) => n === void 0 ? "-" : n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${(n / 1024).toFixed(1)} KB` : `${(n / (1024 * 1024)).toFixed(1)} MB`, q = (n) => n ? n.toLocaleDateString("en-US", {
+  }, te = (t) => t === void 0 ? "-" : t < 1024 ? `${t} B` : t < 1024 * 1024 ? `${(t / 1024).toFixed(1)} KB` : `${(t / (1024 * 1024)).toFixed(1)} MB`, q = (t) => t ? t.toLocaleDateString("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric"
-  }) : "-", P = He({
-    getContainer: () => z,
-    getOverlayHost: () => z,
-    getVisibleItemIdsInOrder: () => l.currentFiles().map((n) => n.id),
-    getElementForId: (n) => T.get(n) ?? null,
+  }) : "-", X = Oe({
+    getContainer: () => R,
+    getOverlayHost: () => R,
+    getVisibleItemIdsInOrder: () => l.currentFiles().map((t) => t.id),
+    getElementForId: (t) => A.get(t) ?? null,
     getSelectedIds: () => [...l.selectedItems()],
-    replaceSelection: (n, i) => l.replaceSelection(n, i),
+    replaceSelection: (t, o) => l.replaceSelection(t, o),
     clearSelection: l.clearSelection
-  }), N = (n) => {
-    const i = () => l.sortConfig(), s = () => i().field === n.field;
+  }), Y = (t) => {
+    const o = () => l.sortConfig(), a = () => o().field === t.field;
     return (() => {
-      var u = he();
-      return c(u, d(Le, {
+      var u = be();
+      return f(u, d(We, {
         get class() {
-          return E("w-3 h-3 transition-transform duration-150", s() && i().direction === "asc" && "rotate-180");
+          return W("w-3 h-3 transition-transform duration-150", a() && o().direction === "asc" && "rotate-180");
         }
-      })), R(() => B(u, E("ml-1 transition-all duration-150", s() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), u;
+      })), p(() => N(u, W("ml-1 transition-all duration-150", a() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), u;
     })();
-  }, O = le("(min-width: 640px)"), X = le("(min-width: 768px)"), [Z, Y] = fe(null), ee = Re(Z, {
+  }, U = fe("(min-width: 640px)"), ne = fe("(min-width: 768px)"), [ie, H] = J(null), Q = Fe(ie, {
     preserveWhenHidden: !0
-  }), p = (n, i, s) => Math.max(i, Math.min(s, n)), v = ie(() => {
-    const n = ee()?.width ?? 0, i = O(), s = X(), u = l.listColumnRatios(), h = 160, w = 120, C = 80, $ = 128, o = 96;
-    if (!i || n <= 0)
+  }), L = (t, o, a) => Math.max(o, Math.min(a, t)), v = se(() => {
+    const t = Q()?.width ?? 0, o = U(), a = ne(), u = l.listColumnRatios(), g = 160, h = 120, x = 80, n = 128, s = 96;
+    if (!o || t <= 0)
       return {
-        width: n,
-        showModified: i,
-        showSize: s,
-        minName: h,
-        minModified: w,
-        minSize: C,
-        modifiedWidth: $,
-        sizeWidth: o
+        width: t,
+        showModified: o,
+        showSize: a,
+        minName: g,
+        minModified: h,
+        minSize: x,
+        modifiedWidth: n,
+        sizeWidth: s
       };
-    if (!s) {
-      const m = u.size, f = Math.max(0, 1 - m);
-      let S = (f > 0 ? u.modifiedAt / f : u.modifiedAt) * n;
-      return S = p(S, w, Math.max(w, n - h)), {
-        width: n,
-        showModified: i,
-        showSize: s,
-        minName: h,
-        minModified: w,
-        minSize: C,
-        modifiedWidth: S,
+    if (!a) {
+      const m = u.size, $ = Math.max(0, 1 - m);
+      let F = ($ > 0 ? u.modifiedAt / $ : u.modifiedAt) * t;
+      return F = L(F, h, Math.max(h, t - g)), {
+        width: t,
+        showModified: o,
+        showSize: a,
+        minName: g,
+        minModified: h,
+        minSize: x,
+        modifiedWidth: F,
         sizeWidth: 0
       };
     }
-    let r = Math.max(w, u.modifiedAt * n), t = Math.max(C, u.size * n);
-    const a = Math.max(0, n - h);
-    if (r + t > a) {
-      const m = r + t - a, f = Math.max(0, r - w), S = Math.max(0, t - C), k = f + S;
-      k > 0 && (r -= m * (f / k), t -= m * (S / k));
+    let r = Math.max(h, u.modifiedAt * t), i = Math.max(x, u.size * t);
+    const c = Math.max(0, t - g);
+    if (r + i > c) {
+      const m = r + i - c, $ = Math.max(0, r - h), F = Math.max(0, i - x), E = $ + F;
+      E > 0 && (r -= m * ($ / E), i -= m * (F / E));
     }
-    return r = Math.max(w, r), t = Math.max(C, t), {
-      width: n,
-      showModified: i,
-      showSize: s,
-      minName: h,
-      minModified: w,
-      minSize: C,
+    return r = Math.max(h, r), i = Math.max(x, i), {
+      width: t,
+      showModified: o,
+      showSize: a,
+      minName: g,
+      minModified: h,
+      minSize: x,
       modifiedWidth: r,
-      sizeWidth: t
+      sizeWidth: i
     };
-  }), W = () => v().modifiedWidth, H = () => v().sizeWidth, G = (n) => {
-    const i = v();
-    if (!i.showModified || i.width <= 0) return;
-    if (!i.showSize) {
-      const m = l.listColumnRatios().size, f = Math.max(0, 1 - m);
-      if (f <= 0) return;
-      const S = i.width, k = i.modifiedWidth, oe = Math.max(0, S - k), xe = i.minName - oe, ve = k - i.minModified, te = p(n, xe, ve);
-      if (te === 0) return;
-      const we = oe + te, Se = k - te, be = we / S * f, Ce = Se / S * f;
+  }), B = () => v().modifiedWidth, V = () => v().sizeWidth, re = (t) => {
+    const o = v();
+    if (!o.showModified || o.width <= 0) return;
+    if (!o.showSize) {
+      const m = l.listColumnRatios().size, $ = Math.max(0, 1 - m);
+      if ($ <= 0) return;
+      const F = o.width, E = o.modifiedWidth, de = Math.max(0, F - E), Se = o.minName - de, Ce = E - o.minModified, le = L(t, Se, Ce);
+      if (le === 0) return;
+      const $e = de + le, Ie = E - le, Me = $e / F * $, De = Ie / F * $;
       l.setListColumnRatios({
-        name: be,
-        modifiedAt: Ce,
+        name: Me,
+        modifiedAt: De,
         size: m
       });
       return;
     }
-    const s = i.width, u = i.modifiedWidth, h = i.sizeWidth, w = Math.max(0, s - u - h), C = i.minName - w, $ = u - i.minModified, o = p(n, C, $);
-    if (o === 0) return;
-    const r = w + o, t = u - o;
+    const a = o.width, u = o.modifiedWidth, g = o.sizeWidth, h = Math.max(0, a - u - g), x = o.minName - h, n = u - o.minModified, s = L(t, x, n);
+    if (s === 0) return;
+    const r = h + s, i = u - s;
     l.setListColumnRatios({
-      name: r / s,
-      modifiedAt: t / s,
-      size: h / s
+      name: r / a,
+      modifiedAt: i / a,
+      size: g / a
     });
-  }, V = (n) => {
-    const i = v();
-    if (!i.showSize || i.width <= 0) return;
-    const s = i.width, u = i.modifiedWidth, h = i.sizeWidth, w = i.minModified - u, C = h - i.minSize, $ = p(n, w, C);
-    if ($ === 0) return;
-    const o = u + $, r = h - $, t = Math.max(0, s - o - r);
+  }, oe = (t) => {
+    const o = v();
+    if (!o.showSize || o.width <= 0) return;
+    const a = o.width, u = o.modifiedWidth, g = o.sizeWidth, h = o.minModified - u, x = g - o.minSize, n = L(t, h, x);
+    if (n === 0) return;
+    const s = u + n, r = g - n, i = Math.max(0, a - s - r);
     l.setListColumnRatios({
-      name: t / s,
-      modifiedAt: o / s,
-      size: r / s
+      name: i / a,
+      modifiedAt: s / a,
+      size: r / a
     });
   };
   return (() => {
-    var n = Xe(), i = n.firstChild, s = i.firstChild, u = s.firstChild, h = u.firstChild, w = h.firstChild, C = w.nextSibling;
-    C.firstChild;
-    var $ = i.nextSibling;
-    return ne(Y, i), u.$$click = () => A("name"), c(C, d(N, {
+    var t = Ge(), o = t.firstChild, a = o.nextSibling, u = a.firstChild, g = u.firstChild, h = g.firstChild, x = h.firstChild, n = x.nextSibling;
+    n.firstChild;
+    var s = a.nextSibling;
+    return K(b, o), K(H, a), g.$$click = () => P("name"), f(n, d(Y, {
       field: "name"
-    }), null), c(s, d(y, {
+    }), null), f(u, d(_, {
       get when() {
         return v().showModified;
       },
       get children() {
-        return d(se, {
+        return d(ge, {
           direction: "horizontal",
-          onResize: G
+          onResize: re
         });
       }
-    }), null), c(i, d(y, {
+    }), null), f(a, d(_, {
       get when() {
         return v().showModified;
       },
       get children() {
-        var o = Oe(), r = o.firstChild;
-        return r.firstChild, r.$$click = () => A("modifiedAt"), c(r, d(N, {
+        var r = Ye(), i = r.firstChild;
+        return i.firstChild, i.$$click = () => P("modifiedAt"), f(i, d(Y, {
           field: "modifiedAt"
-        }), null), c(o, d(y, {
+        }), null), f(r, d(_, {
           get when() {
             return v().showSize;
           },
           get children() {
-            return d(se, {
+            return d(ge, {
               direction: "horizontal",
-              onResize: V
+              onResize: oe
             });
           }
-        }), null), R((t) => {
-          var a = E("relative shrink-0", v().showSize && "border-r border-border"), m = `${W()}px`;
-          return a !== t.e && B(o, t.e = a), m !== t.t && L(o, "width", t.t = m), t;
+        }), null), p((c) => {
+          var m = W("relative shrink-0", v().showSize && "border-r border-border"), $ = `${B()}px`;
+          return m !== c.e && N(r, c.e = m), $ !== c.t && T(r, "width", c.t = $), c;
         }, {
           e: void 0,
           t: void 0
-        }), o;
+        }), r;
       }
-    }), null), c(i, d(y, {
+    }), null), f(a, d(_, {
       get when() {
         return v().showSize;
       },
       get children() {
-        var o = qe(), r = o.firstChild;
-        return r.firstChild, r.$$click = () => A("size"), c(r, d(N, {
+        var r = Ve(), i = r.firstChild;
+        return i.firstChild, i.$$click = () => P("size"), f(i, d(Y, {
           field: "size"
-        }), null), R((t) => L(o, "width", `${H()}px`)), o;
+        }), null), p((c) => T(r, "width", `${V()}px`)), r;
       }
-    }), null), ae($, "pointerdown", P.onPointerDown, !0), ae($, "scroll", g.onScroll), ne((o) => {
-      z = o, g.scrollRef(o), l.setScrollContainer(o);
-    }, $), c($, d(y, {
+    }), null), ue(s, "pointerdown", X.onPointerDown, !0), ue(s, "scroll", y.onScroll), K((r) => {
+      R = r, y.scrollRef(r), l.setScrollContainer(r);
+    }, s), f(s, d(_, {
       get when() {
         return !e.initializing;
       },
       get fallback() {
         return (() => {
-          var o = Ye();
-          return c(o, d(re, {
+          var r = Ue();
+          return f(r, d(ce, {
             get each() {
               return Array.from({
                 length: 8
               });
             },
             children: () => (() => {
-              var r = Ge(), t = r.firstChild;
-              return c(t, d(U, {
+              var i = Qe(), c = i.firstChild;
+              return f(c, d(j, {
                 class: "h-4 w-4 shrink-0"
-              }), null), c(t, d(U, {
-                class: "h-4 w-32 max-w-full"
-              }), null), c(r, d(y, {
+              }), null), f(c, d(j, {
+                class: "h-[var(--floe-line-control)] w-32 max-w-full"
+              }), null), f(i, d(_, {
                 get when() {
                   return v().showModified;
                 },
                 get children() {
-                  var a = Q();
-                  return c(a, d(U, {
-                    class: "h-4 w-20 max-w-full"
-                  })), R((m) => L(a, "width", `${W()}px`)), a;
+                  var m = Z();
+                  return f(m, d(j, {
+                    class: "h-[var(--floe-line-control)] w-20 max-w-full"
+                  })), p(($) => T(m, "width", `${B()}px`)), m;
                 }
-              }), null), c(r, d(y, {
+              }), null), f(i, d(_, {
                 get when() {
                   return v().showSize;
                 },
                 get children() {
-                  var a = Q();
-                  return c(a, d(U, {
-                    class: "h-4 w-10 max-w-full"
-                  })), R((m) => L(a, "width", `${H()}px`)), a;
+                  var m = Z();
+                  return f(m, d(j, {
+                    class: "h-[var(--floe-line-control)] w-10 max-w-full"
+                  })), p(($) => T(m, "width", `${V()}px`)), m;
                 }
-              }), null), r;
+              }), null), i;
             })()
-          })), o;
+          })), r;
         })();
       },
       get children() {
-        return d(y, {
+        return d(_, {
           get when() {
             return l.currentFiles().length > 0;
           },
           get fallback() {
             return (() => {
-              var o = Qe();
-              return c(o, d(y, {
+              var r = Je();
+              return f(r, d(_, {
                 get when() {
                   return l.filterQueryApplied().trim();
                 },
                 get fallback() {
-                  return je();
+                  return Ze();
                 },
                 get children() {
                   return [(() => {
-                    var r = Ve(), t = r.firstChild, a = t.nextSibling;
-                    return a.nextSibling, c(r, () => l.filterQueryApplied(), a), r;
+                    var i = je(), c = i.firstChild, m = c.nextSibling;
+                    return m.nextSibling, f(i, () => l.filterQueryApplied(), m), i;
                   })(), (() => {
-                    var r = Ue();
-                    return r.$$click = () => l.setFilterQuery(""), r;
+                    var i = Ke();
+                    return i.$$click = () => l.setFilterQuery(""), i;
                   })()];
                 }
-              })), o;
+              })), r;
             })();
           },
           get children() {
-            var o = ce();
-            return c(o, d(re, {
+            var r = ve();
+            return f(r, d(ce, {
               get each() {
-                return _();
+                return C();
               },
-              children: (r) => d(et, {
-                item: r,
-                formatSize: J,
+              children: (i) => d(it, {
+                item: i,
+                formatSize: te,
                 formatDate: q,
                 get showModified() {
                   return v().showModified;
@@ -365,80 +378,80 @@ function St(e) {
                   return v().showSize;
                 },
                 get modifiedWidthPx() {
-                  return W();
+                  return B();
                 },
                 get sizeWidthPx() {
-                  return H();
+                  return V();
                 },
                 get instanceId() {
-                  return D();
+                  return M();
                 },
                 get enableDragDrop() {
-                  return F();
+                  return k();
                 },
-                dragContext: I,
-                registerRow: j
+                dragContext: w,
+                registerRow: ee
               })
-            })), R((r) => {
-              var t = `${g.paddingTop()}px`, a = `${g.paddingBottom()}px`;
-              return t !== r.e && L(o, "padding-top", r.e = t), a !== r.t && L(o, "padding-bottom", r.t = a), r;
+            })), p((i) => {
+              var c = `${y.paddingTop()}px`, m = `${y.paddingBottom()}px`;
+              return c !== i.e && T(r, "padding-top", i.e = c), m !== i.t && T(r, "padding-bottom", i.t = m), i;
             }, {
               e: void 0,
               t: void 0
-            }), o;
+            }), r;
           }
         });
       }
-    }), null), c($, d(y, {
+    }), null), f(s, d(_, {
       get when() {
-        return P.overlayStyle();
+        return X.overlayStyle();
       },
-      children: (o) => (() => {
-        var r = ce();
-        return B(r, Be), R((t) => $e(r, o(), t)), r;
+      children: (r) => (() => {
+        var i = ve();
+        return N(i, qe), p((c) => _e(i, r(), c)), i;
       })()
-    }), null), R((o) => {
-      var r = E("flex flex-col h-full min-h-0", e.class), t = e.initializing || void 0, a = E("relative flex-1 min-w-0", v().showModified && "border-r border-border");
-      return r !== o.e && B(n, o.e = r), t !== o.t && Ie(n, "aria-busy", o.t = t), a !== o.a && B(s, o.a = a), o;
+    }), null), p((r) => {
+      var i = W("relative flex flex-col h-full min-h-0", e.class), c = e.initializing || void 0, m = W("relative flex-1 min-w-0", v().showModified && "border-r border-border");
+      return i !== r.e && N(t, r.e = i), c !== r.t && ze(t, "aria-busy", r.t = c), m !== r.a && N(u, r.a = m), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), n;
+    }), t;
   })();
 }
-function et(e) {
-  const l = ge(), I = () => l.isSelected(e.item.id), F = () => l.getFilterMatchForId(e.item.id), D = ye(() => e.item), b = Ee(l, D, {
+function it(e) {
+  const l = we(), w = () => l.isSelected(e.item.id), k = () => l.getFilterMatchForId(e.item.id), M = pe(() => e.item), D = He(l, M, {
     source: "list"
   });
-  let g, _ = null, T = 0, z = 0, x = !1;
-  const j = 5, K = 500;
-  let A = null;
-  const [J, q] = fe(!1), P = () => g === "touch" || g === "pen", N = () => e.item.type === "folder", O = () => N() && e.enableDragDrop && e.dragContext, X = () => {
-    if (!O() || !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;
-  }, Z = () => {
-    if (!e.dragContext) return !1;
-    const t = e.dragContext.dragState();
-    return t.isDragging ? t.draggedItems.some((a) => a.item.id === e.item.id) : !1;
+  let b, S = null, O = 0, y = 0, C = !1;
+  const A = 5, R = 500;
+  let z = null;
+  const [ee, G] = J(!1), P = () => b === "touch" || b === "pen", te = () => e.item.type === "folder", q = () => te() && e.enableDragDrop && e.dragContext, X = () => {
+    if (!q() || !e.dragContext) return !1;
+    const n = e.dragContext.dragState();
+    return n.isDragging ? e.dragContext.canDropOn(n.draggedItems, e.item.path, e.item, e.instanceId) : !1;
   }, Y = () => {
-    A !== null && (clearTimeout(A), A = null);
-  }, ee = () => {
-    typeof document > "u" || (document.removeEventListener("pointermove", H, !0), document.removeEventListener("pointerup", G, !0), document.removeEventListener("pointercancel", V, !0));
-  }, p = () => {
-    typeof document > "u" || (document.addEventListener("pointermove", H, !0), document.addEventListener("pointerup", G, !0), document.addEventListener("pointercancel", V, !0));
-  }, v = (t) => {
-    Y(), ee(), x && e.dragContext && e.dragContext.endDrag(t), _ = null, x = !1;
+    if (!e.dragContext) return !1;
+    const n = e.dragContext.dragState();
+    return n.isDragging ? n.draggedItems.some((s) => s.item.id === e.item.id) : !1;
+  }, U = () => {
+    z !== null && (clearTimeout(z), z = null);
+  }, ne = () => {
+    typeof document > "u" || (document.removeEventListener("pointermove", L, !0), document.removeEventListener("pointerup", v, !0), document.removeEventListener("pointercancel", B, !0));
+  }, ie = () => {
+    typeof document > "u" || (document.addEventListener("pointermove", L, !0), document.addEventListener("pointerup", v, !0), document.addEventListener("pointercancel", B, !0));
+  }, H = (n) => {
+    U(), ne(), C && e.dragContext && e.dragContext.endDrag(n), S = null, C = !1;
   };
-  me(() => {
-    e.registerRow(e.item.id, null), v(!1);
+  ae(() => {
+    e.registerRow(e.item.id, null), H(!1);
   });
-  const W = (t, a) => {
-    if (!e.enableDragDrop || !e.dragContext || x) return;
-    x = !0, I() || l.selectItem(e.item.id, !1);
-    const m = l.getSelectedItemsList(), S = (m.length > 0 && I() ? m : [e.item]).map((k) => ({
-      item: k,
+  const Q = (n, s) => {
+    if (!e.enableDragDrop || !e.dragContext || C) return;
+    C = !0, w() || l.selectItem(e.item.id, !1);
+    const r = l.getSelectedItemsList(), c = (r.length > 0 && w() ? r : [e.item]).map((m) => ({
+      item: m,
       sourceInstanceId: e.instanceId,
       sourcePath: l.currentPath()
     }));
@@ -447,149 +460,149 @@ function et(e) {
         navigator.vibrate(50);
       } catch {
       }
-    e.dragContext.startDrag(S, t, a);
-  }, H = (t) => {
-    if (_ !== t.pointerId) return;
-    const a = t.clientX - T, m = t.clientY - z, f = Math.sqrt(a * a + m * m);
-    if (P() && !x && f > 10) {
-      v(!1);
+    e.dragContext.startDrag(c, n, s);
+  }, L = (n) => {
+    if (S !== n.pointerId) return;
+    const s = n.clientX - O, r = n.clientY - y, i = Math.sqrt(s * s + r * r);
+    if (P() && !C && i > 10) {
+      H(!1);
       return;
     }
-    !P() && !x && f > j && W(t.clientX, t.clientY), x && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
-  }, G = (t) => {
-    _ === t.pointerId && (b.onPointerUp(), v(!0));
-  }, V = (t) => {
-    _ === t.pointerId && (b.onPointerCancel(), v(!1));
-  }, n = (t) => {
-    g = t.pointerType, b.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (_ = t.pointerId, T = t.clientX, z = t.clientY, x = !1, p(), P() && (Y(), A = setTimeout(() => {
-      _ !== null && !x && W(T, z);
-    }, K))));
-  }, i = (t) => {
-    g = t.pointerType, b.onPointerMove(t);
-  }, s = (t) => {
-    if (!O() || !e.dragContext) return;
-    const a = e.dragContext.dragState();
-    if (!a.isDragging) return;
-    q(!0);
-    const m = e.dragContext.canDropOn(a.draggedItems, e.item.path, e.item, e.instanceId), S = t.currentTarget?.getBoundingClientRect() ?? null;
+    !P() && !C && i > A && Q(n.clientX, n.clientY), C && e.dragContext && e.dragContext.updateDrag(n.clientX, n.clientY);
+  }, v = (n) => {
+    S === n.pointerId && (D.onPointerUp(), H(!0));
+  }, B = (n) => {
+    S === n.pointerId && (D.onPointerCancel(), H(!1));
+  }, V = (n) => {
+    b = n.pointerType, D.onPointerDown(n), !(n.pointerType === "mouse" && n.button !== 0) && (!e.enableDragDrop || !e.dragContext || (S = n.pointerId, O = n.clientX, y = n.clientY, C = !1, ie(), P() && (U(), z = setTimeout(() => {
+      S !== null && !C && Q(O, y);
+    }, R))));
+  }, re = (n) => {
+    b = n.pointerType, D.onPointerMove(n);
+  }, oe = (n) => {
+    if (!q() || !e.dragContext) return;
+    const s = e.dragContext.dragState();
+    if (!s.isDragging) return;
+    G(!0);
+    const r = e.dragContext.canDropOn(s.draggedItems, e.item.path, e.item, e.instanceId), c = n.currentTarget?.getBoundingClientRect() ?? null;
     e.dragContext.setDropTarget({
       instanceId: e.instanceId,
       targetPath: e.item.path,
       targetItem: e.item
-    }, m, S);
-  }, u = (t) => {
+    }, r, c);
+  }, t = (n) => {
     if (!e.dragContext) return;
-    q(!1);
-    const a = e.dragContext.dragState();
-    a.isDragging && a.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
-  }, h = (t) => {
-    if (x) {
-      x = !1;
+    G(!1);
+    const s = e.dragContext.dragState();
+    s.isDragging && s.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
+  }, o = (n) => {
+    if (C) {
+      C = !1;
       return;
     }
-    if (!b.consumeClickSuppression(t)) {
+    if (!D.consumeClickSuppression(n)) {
       if (P()) {
         l.openItem(e.item);
         return;
       }
-      if (t.shiftKey) {
-        l.selectRangeTo(e.item.id, de(t));
+      if (n.shiftKey) {
+        l.selectRangeTo(e.item.id, he(n));
         return;
       }
-      l.selectItem(e.item.id, de(t));
+      l.selectItem(e.item.id, he(n));
     }
-  }, w = () => {
+  }, a = () => {
     P() || l.openItem(e.item);
-  }, C = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), P()) return;
+  }, u = (n) => {
+    if (n.preventDefault(), n.stopPropagation(), P()) return;
     l.ensureContextMenuSelection(e.item.id);
-    const a = l.getSelectedItemsList(), m = a.length > 0 ? a : [e.item];
-    l.showContextMenu(We({
-      x: t.clientX,
-      y: t.clientY,
+    const s = l.getSelectedItemsList(), r = s.length > 0 ? s : [e.item];
+    l.showContextMenu(Ne({
+      x: n.clientX,
+      y: n.clientY,
       triggerItem: e.item,
-      items: m,
+      items: r,
       source: "list"
     }));
-  }, $ = () => e.dragContext?.dragState(), o = () => $()?.isDragging ?? !1, r = () => J() && o() && O();
+  }, g = () => e.dragContext?.dragState(), h = () => g()?.isDragging ?? !1, x = () => ee() && h() && q();
   return (() => {
-    var t = Ke(), a = t.firstChild, m = a.firstChild;
-    return ne((f) => {
-      e.registerRow(e.item.id, f);
-    }, t), Me(t, De({
+    var n = et(), s = n.firstChild, r = s.firstChild;
+    return K((i) => {
+      e.registerRow(e.item.id, i);
+    }, n), ye(n, Re({
       get "data-file-browser-item-id"() {
         return e.item.id;
       },
       get "data-file-browser-item-path"() {
         return e.item.path;
       }
-    }, pe, {
-      onClick: h,
-      onDblClick: w,
-      onContextMenu: C,
-      onPointerDown: n,
-      onPointerMove: i,
-      onPointerEnter: s,
-      onPointerLeave: u,
+    }, Be, {
+      onClick: o,
+      onDblClick: a,
+      onContextMenu: u,
+      onPointerDown: V,
+      onPointerMove: re,
+      onPointerEnter: oe,
+      onPointerLeave: t,
       get class() {
-        return E(
-          Je,
+        return W(
+          tt,
           "group cursor-pointer",
           "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",
-          I() && "bg-accent text-accent-foreground",
+          w() && "bg-accent text-accent-foreground",
           // Drag state styling - being dragged items become translucent
-          Z() && "opacity-40 scale-[0.98]",
+          Y() && "opacity-40 scale-[0.98]",
           // Drop target styling - enhanced visual feedback
-          r() && X() && ["bg-primary/15 outline outline-2 outline-primary/60", "scale-[1.01] shadow-sm shadow-primary/10"],
-          r() && !X() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
+          x() && X() && ["bg-primary/15 outline outline-2 outline-primary/60", "scale-[1.01] shadow-sm shadow-primary/10"],
+          x() && !X() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
         );
       }
-    }), !1, !0), c(m, d(Te, {
+    }), !1, !0), f(r, d(Ae, {
       get item() {
         return e.item;
       },
       size: 16,
       class: "w-4 h-4"
-    }), null), c(m, d(ke, {
+    }), null), f(r, d(Le, {
       get item() {
         return e.item;
       },
       size: "xs"
-    }), null), c(a, d(Ze, {
+    }), null), f(s, d(nt, {
       get name() {
         return e.item.name;
       },
       get match() {
-        return F();
+        return k();
       },
       get class() {
-        return Ae(e.item);
+        return Ee(e.item);
       }
-    }), null), c(t, d(y, {
+    }), null), f(n, d(_, {
       get when() {
         return e.showModified;
       },
       get children() {
-        var f = Q();
-        return c(f, () => e.formatDate(e.item.modifiedAt)), R((S) => L(f, "width", `${e.modifiedWidthPx}px`)), f;
+        var i = Z();
+        return f(i, () => e.formatDate(e.item.modifiedAt)), p((c) => T(i, "width", `${e.modifiedWidthPx}px`)), i;
       }
-    }), null), c(t, d(y, {
+    }), null), f(n, d(_, {
       get when() {
         return e.showSize;
       },
       get children() {
-        var f = Q();
-        return c(f, (() => {
-          var S = ue(() => e.item.type === "folder");
-          return () => S() ? "-" : e.formatSize(e.item.size);
-        })()), R((S) => L(f, "width", `${e.sizeWidthPx}px`)), f;
+        var i = Z();
+        return f(i, (() => {
+          var c = xe(() => e.item.type === "folder");
+          return () => c() ? "-" : e.formatSize(e.item.size);
+        })()), p((c) => T(i, "width", `${e.sizeWidthPx}px`)), i;
       }
-    }), null), t;
+    }), null), n;
   })();
 }
-_e(["click", "pointerdown"]);
+Pe(["click", "pointerdown"]);
 export {
-  St as FileListView
+  $t as FileListView
 };