@floegence/floe-webapp-core 0.86.60 → 0.86.62

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

@@ -1,50 +1,53 @@
-import { createComponent as f, insert as l, effect as x, setAttribute as c, className as b, template as p } from "solid-js/web";
-import { Show as S } from "solid-js";
-import { cn as w } from "../../utils/cn.js";
-var v = /* @__PURE__ */ p("<span aria-hidden=true>");
-const E = ["default", "primary", "info", "success", "warning", "error", "muted"], h = {
+import { createComponent as m, insert as u, effect as x, setAttribute as s, className as v, template as b } from "solid-js/web";
+import { Show as w } from "solid-js";
+import { cn as S } from "../../utils/cn.js";
+var p = /* @__PURE__ */ b("<span aria-hidden=true>");
+const h = ["default", "primary", "info", "success", "warning", "error", "muted"], E = {
   default: "bg-foreground text-background",
   primary: "bg-primary text-primary-foreground",
   info: "bg-info text-info-foreground",
   success: "bg-success text-success-foreground",
   warning: "bg-warning text-warning-foreground",
   error: "bg-error text-error-foreground",
-  muted: "bg-muted text-muted-foreground"
-}, A = {
+  muted: "bg-[var(--floe-well)] text-[var(--floe-ink-soft)]"
+}, y = {
   default: "",
-  primary: "text-primary",
+  primary: "text-[var(--floe-accent-ink)]",
   info: "text-info",
   success: "text-success",
   warning: "text-warning",
   error: "text-error",
-  muted: "text-muted-foreground"
-}, y = {
-  xs: "-left-0.5 -top-0.5 h-2 min-w-2 px-[1px] text-[5px] ring-[0.5px]",
-  sm: "-left-1 -top-1 h-3.5 min-w-3.5 px-[3px] text-[7px] ring-1 shadow-sm",
-  md: "-left-1 -top-1 h-4 min-w-4 px-1 text-[8px] ring-1 shadow-sm"
+  muted: "text-[var(--floe-ink-soft)]"
+}, A = {
+  /* Chip type is a ladder step, not a per-size invention: 5/7/8px were three
+   * hand-picked values below the caption floor. `nano` for the smallest chip,
+   * `micro` above it. */
+  xs: "-left-0.5 -top-0.5 h-2 min-w-2 px-[1px] text-[length:var(--floe-type-nano)] ring-[0.5px]",
+  sm: "-left-1 -top-1 h-3.5 min-w-3.5 px-[3px] text-[length:var(--floe-type-micro)] ring-1 shadow-[var(--floe-elevation-raised)]",
+  md: "-left-1 -top-1 h-4 min-w-4 px-1 text-[length:var(--floe-type-micro)] ring-1 shadow-[var(--floe-elevation-raised)]"
 };
-function d(e) {
+function c(e) {
   const r = String(e ?? "").trim();
-  return E.includes(r) ? r : "default";
+  return h.includes(r) ? r : "default";
 }
 function C(e) {
   return String(e.decoration?.badge?.label ?? "").trim().slice(0, 2).toUpperCase();
 }
-function _(e) {
-  const r = d(e.decoration?.nameTone);
-  return A[r];
+function T(e) {
+  const r = c(e.decoration?.nameTone);
+  return y[r];
 }
-function z(e) {
-  const r = () => C(e.item), o = () => d(e.item.decoration?.badge?.tone), u = () => String(e.item.decoration?.badge?.title ?? "").trim() || void 0, m = () => e.size ?? "sm";
-  return f(S, {
+function _(e) {
+  const r = () => C(e.item), o = () => c(e.item.decoration?.badge?.tone), f = () => String(e.item.decoration?.badge?.title ?? "").trim() || void 0, d = () => e.size ?? "sm";
+  return m(w, {
     get when() {
       return r();
     },
     children: (g) => (() => {
-      var n = v();
-      return l(n, g), x((t) => {
-        var i = u(), a = o(), s = w("pointer-events-none absolute z-10 inline-flex items-center justify-center rounded-full ring-background/90", "font-black leading-none", y[m()], h[o()], e.class);
-        return i !== t.e && c(n, "title", t.e = i), a !== t.t && c(n, "data-file-browser-decoration-badge", t.t = a), s !== t.a && b(n, t.a = s), t;
+      var n = p();
+      return u(n, g), x((t) => {
+        var i = f(), a = o(), l = S("pointer-events-none absolute z-10 inline-flex items-center justify-center rounded-full ring-background/90", "font-black leading-none", A[d()], E[o()], e.class);
+        return i !== t.e && s(n, "title", t.e = i), a !== t.t && s(n, "data-file-browser-decoration-badge", t.t = a), l !== t.a && v(n, t.a = l), t;
       }, {
         e: void 0,
         t: void 0,
@@ -54,6 +57,6 @@ function z(e) {
   });
 }
 export {
-  z as FileItemDecorationBadge,
-  _ as fileItemDecorationNameClass
+  _ as FileItemDecorationBadge,
+  T as fileItemDecorationNameClass
 };

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

@@ -1,10 +1,10 @@
-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 { 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 ye, template as I, spread as ze, mergeProps as Re, memo as xe, delegateEvents as Pe } from "solid-js/web";
+import { createSignal as J, createEffect as me, onCleanup as le, 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 { useResizeObserver as ke } from "../../hooks/useResizeObserver.js";
+import { useVirtualWindow as Fe } 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";
@@ -16,19 +16,19 @@ 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">');
+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-[var(--floe-state-hover)] 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-[var(--floe-state-hover)] 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-[var(--floe-line)] text-caption text-[var(--floe-ink-soft)] font-medium"><div><button type=button class="group w-full flex items-center min-w-0 px-3 py-2 cursor-pointer hover:bg-[var(--floe-state-hover)] 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-[var(--floe-ink-soft)] 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-xs bg-[var(--floe-well)] hover:bg-[var(--floe-state-press)] transition-colors">Clear Filter'), Je = /* @__PURE__ */ I('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-[var(--floe-ink-soft)]">'), 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(() => {
+  const a = se(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
         text: e.name,
         highlight: !1
       }];
-    const w = [], k = new Set(e.match.matchedIndices);
+    const w = [], F = new Set(e.match.matchedIndices);
     let M = "", D = !1;
     for (let b = 0; b < e.name.length; b++) {
-      const S = k.has(b);
+      const S = F.has(b);
       b === 0 ? (D = S, M = e.name[b]) : S === D ? M += e.name[b] : (w.push({
         text: M,
         highlight: D
@@ -43,25 +43,25 @@ function nt(e) {
     var w = be();
     return f(w, d(ce, {
       get each() {
-        return l();
+        return a();
       },
-      children: (k) => d(_, {
+      children: (F) => d(_, {
         get when() {
-          return k.highlight;
+          return F.highlight;
         },
         get fallback() {
-          return xe(() => k.text);
+          return xe(() => F.text);
         },
         get children() {
           var M = Xe();
-          return f(M, () => k.text), M;
+          return f(M, () => F.text), M;
         }
       })
     })), p(() => N(w, W("truncate", e.class))), w;
   })();
 }
 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);
+  const a = we(), w = Te(), F = () => (e.enableDragDrop ?? !0) && !!w, M = () => e.instanceId ?? "default", [D, b] = J(null), [S, O] = J(28);
   me(() => {
     const t = D();
     if (!t) return;
@@ -71,21 +71,21 @@ function $t(e) {
       u > 0 && O(u);
     };
     if (o(), typeof ResizeObserver > "u") return;
-    const a = new ResizeObserver(o);
-    a.observe(t), ae(() => a.disconnect());
+    const l = new ResizeObserver(o);
+    l.observe(t), le(() => l.disconnect());
   });
-  const y = ke({
-    count: () => l.currentFiles().length,
+  const z = Fe({
+    count: () => a.currentFiles().length,
     itemSize: S,
     overscan: 12
   }), C = se(() => {
     const {
       start: t,
       end: o
-    } = y.range();
-    return l.currentFiles().slice(t, o);
+    } = z.range();
+    return a.currentFiles().slice(t, o);
   }), A = /* @__PURE__ */ new Map();
-  let R = null, z = 0;
+  let R = null, y = 0;
   const ee = (t, o) => {
     if (o) {
       A.set(t, o);
@@ -94,42 +94,42 @@ function $t(e) {
     A.delete(t);
   }, G = (t) => {
     if (!R) return;
-    const o = t * S(), a = o + S(), u = R.scrollTop, g = u + R.clientHeight;
+    const o = t * S(), l = o + S(), u = R.scrollTop, g = u + R.clientHeight;
     if (o < u) {
-      R.scrollTop = o, y.onScroll();
+      R.scrollTop = o, z.onScroll();
       return;
     }
-    a > g && (R.scrollTop = Math.max(0, a - R.clientHeight), y.onScroll());
+    l > g && (R.scrollTop = Math.max(0, l - R.clientHeight), z.onScroll());
   };
   me(() => {
-    const t = l.revealRequest(), o = l.currentFiles();
+    const t = a.revealRequest(), o = a.currentFiles();
     if (C(), !t) return;
-    const a = o.findIndex((h) => h.id === t.targetId);
-    if (a < 0) return;
+    const l = o.findIndex((h) => h.id === t.targetId);
+    if (l < 0) return;
     if (!A.get(t.targetId)) {
-      G(a);
+      G(l);
       return;
     }
-    typeof cancelAnimationFrame == "function" && z && (cancelAnimationFrame(z), z = 0);
+    typeof cancelAnimationFrame == "function" && y && (cancelAnimationFrame(y), y = 0);
     const g = () => {
-      l.revealRequest()?.requestId === t.requestId && (A.get(t.targetId)?.scrollIntoView({
+      a.revealRequest()?.requestId === t.requestId && (A.get(t.targetId)?.scrollIntoView({
         block: "nearest",
         inline: "nearest"
-      }), l.selectItem(t.targetId, !1), l.consumeRevealRequest(t.requestId));
+      }), a.selectItem(t.targetId, !1), a.consumeRevealRequest(t.requestId));
     };
     if (typeof requestAnimationFrame == "function") {
-      z = requestAnimationFrame(() => {
-        z = 0, g();
+      y = requestAnimationFrame(() => {
+        y = 0, g();
       });
       return;
     }
     queueMicrotask(g);
-  }), ae(() => {
-    typeof cancelAnimationFrame == "function" && z && cancelAnimationFrame(z);
+  }), le(() => {
+    typeof cancelAnimationFrame == "function" && y && cancelAnimationFrame(y);
   });
   const P = (t) => {
-    const o = l.sortConfig();
-    l.setSortConfig({
+    const o = a.sortConfig();
+    a.setSortConfig({
       field: t,
       direction: o.field === t && o.direction === "asc" ? "desc" : "asc"
     });
@@ -140,60 +140,60 @@ function $t(e) {
   }) : "-", X = Oe({
     getContainer: () => R,
     getOverlayHost: () => R,
-    getVisibleItemIdsInOrder: () => l.currentFiles().map((t) => t.id),
+    getVisibleItemIdsInOrder: () => a.currentFiles().map((t) => t.id),
     getElementForId: (t) => A.get(t) ?? null,
-    getSelectedIds: () => [...l.selectedItems()],
-    replaceSelection: (t, o) => l.replaceSelection(t, o),
-    clearSelection: l.clearSelection
+    getSelectedIds: () => [...a.selectedItems()],
+    replaceSelection: (t, o) => a.replaceSelection(t, o),
+    clearSelection: a.clearSelection
   }), Y = (t) => {
-    const o = () => l.sortConfig(), a = () => o().field === t.field;
+    const o = () => a.sortConfig(), l = () => o().field === t.field;
     return (() => {
       var u = be();
       return f(u, d(We, {
         get class() {
-          return W("w-3 h-3 transition-transform duration-150", a() && o().direction === "asc" && "rotate-180");
+          return W("w-3 h-3 transition-transform duration-[var(--floe-duration-fast)]", l() && o().direction === "asc" && "rotate-180");
         }
-      })), p(() => N(u, W("ml-1 transition-all duration-150", a() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), u;
+      })), p(() => N(u, W("ml-1 transition-opacity duration-[var(--floe-duration-fast)]", l() ? "opacity-100" : "opacity-0 group-hover:opacity-40"))), u;
     })();
-  }, U = fe("(min-width: 640px)"), ne = fe("(min-width: 768px)"), [ie, H] = J(null), Q = Fe(ie, {
+  }, U = fe("(min-width: 640px)"), ne = fe("(min-width: 768px)"), [ie, H] = J(null), Q = ke(ie, {
     preserveWhenHidden: !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;
+  }), L = (t, o, l) => Math.max(o, Math.min(l, t)), v = se(() => {
+    const t = Q()?.width ?? 0, o = U(), l = ne(), u = a.listColumnRatios(), g = 160, h = 120, x = 80, n = 128, s = 96;
     if (!o || t <= 0)
       return {
         width: t,
         showModified: o,
-        showSize: a,
+        showSize: l,
         minName: g,
         minModified: h,
         minSize: x,
         modifiedWidth: n,
         sizeWidth: s
       };
-    if (!a) {
+    if (!l) {
       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)), {
+      let k = ($ > 0 ? u.modifiedAt / $ : u.modifiedAt) * t;
+      return k = L(k, h, Math.max(h, t - g)), {
         width: t,
         showModified: o,
-        showSize: a,
+        showSize: l,
         minName: g,
         minModified: h,
         minSize: x,
-        modifiedWidth: F,
+        modifiedWidth: k,
         sizeWidth: 0
       };
     }
     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));
+      const m = r + i - c, $ = Math.max(0, r - h), k = Math.max(0, i - x), E = $ + k;
+      E > 0 && (r -= m * ($ / E), i -= m * (k / E));
     }
     return r = Math.max(h, r), i = Math.max(x, i), {
       width: t,
       showModified: o,
-      showSize: a,
+      showSize: l,
       minName: g,
       minModified: h,
       minSize: x,
@@ -204,43 +204,43 @@ function $t(e) {
     const o = v();
     if (!o.showModified || o.width <= 0) return;
     if (!o.showSize) {
-      const m = l.listColumnRatios().size, $ = Math.max(0, 1 - m);
+      const m = a.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({
+      const k = o.width, E = o.modifiedWidth, de = Math.max(0, k - E), Se = o.minName - de, Ce = E - o.minModified, ae = L(t, Se, Ce);
+      if (ae === 0) return;
+      const $e = de + ae, Ie = E - ae, Me = $e / k * $, De = Ie / k * $;
+      a.setListColumnRatios({
         name: Me,
         modifiedAt: De,
         size: m
       });
       return;
     }
-    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);
+    const l = o.width, u = o.modifiedWidth, g = o.sizeWidth, h = Math.max(0, l - 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 / a,
-      modifiedAt: i / a,
-      size: g / a
+    a.setListColumnRatios({
+      name: r / l,
+      modifiedAt: i / l,
+      size: g / l
     });
   }, 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);
+    const l = 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: i / a,
-      modifiedAt: s / a,
-      size: r / a
+    const s = u + n, r = g - n, i = Math.max(0, l - s - r);
+    a.setListColumnRatios({
+      name: i / l,
+      modifiedAt: s / l,
+      size: r / l
     });
   };
   return (() => {
-    var t = Ge(), o = t.firstChild, a = o.nextSibling, u = a.firstChild, g = u.firstChild, h = g.firstChild, x = h.firstChild, n = x.nextSibling;
+    var t = Ge(), o = t.firstChild, l = o.nextSibling, u = l.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, {
+    var s = l.nextSibling;
+    return K(b, o), K(H, l), g.$$click = () => P("name"), f(n, d(Y, {
       field: "name"
     }), null), f(u, d(_, {
       get when() {
@@ -252,7 +252,7 @@ function $t(e) {
           onResize: re
         });
       }
-    }), null), f(a, d(_, {
+    }), null), f(l, d(_, {
       get when() {
         return v().showModified;
       },
@@ -271,14 +271,14 @@ function $t(e) {
             });
           }
         }), null), p((c) => {
-          var m = W("relative shrink-0", v().showSize && "border-r border-border"), $ = `${B()}px`;
+          var m = W("relative shrink-0", v().showSize && "border-r border-[var(--floe-line)]"), $ = `${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
         }), r;
       }
-    }), null), f(a, d(_, {
+    }), null), f(l, d(_, {
       get when() {
         return v().showSize;
       },
@@ -288,8 +288,8 @@ function $t(e) {
           field: "size"
         }), null), p((c) => T(r, "width", `${V()}px`)), r;
       }
-    }), null), ue(s, "pointerdown", X.onPointerDown, !0), ue(s, "scroll", y.onScroll), K((r) => {
-      R = r, y.scrollRef(r), l.setScrollContainer(r);
+    }), null), ue(s, "pointerdown", X.onPointerDown, !0), ue(s, "scroll", z.onScroll), K((r) => {
+      R = r, z.scrollRef(r), a.setScrollContainer(r);
     }, s), f(s, d(_, {
       get when() {
         return !e.initializing;
@@ -337,14 +337,14 @@ function $t(e) {
       get children() {
         return d(_, {
           get when() {
-            return l.currentFiles().length > 0;
+            return a.currentFiles().length > 0;
           },
           get fallback() {
             return (() => {
               var r = Je();
               return f(r, d(_, {
                 get when() {
-                  return l.filterQueryApplied().trim();
+                  return a.filterQueryApplied().trim();
                 },
                 get fallback() {
                   return Ze();
@@ -352,10 +352,10 @@ function $t(e) {
                 get children() {
                   return [(() => {
                     var i = je(), c = i.firstChild, m = c.nextSibling;
-                    return m.nextSibling, f(i, () => l.filterQueryApplied(), m), i;
+                    return m.nextSibling, f(i, () => a.filterQueryApplied(), m), i;
                   })(), (() => {
                     var i = Ke();
-                    return i.$$click = () => l.setFilterQuery(""), i;
+                    return i.$$click = () => a.setFilterQuery(""), i;
                   })()];
                 }
               })), r;
@@ -387,13 +387,13 @@ function $t(e) {
                   return M();
                 },
                 get enableDragDrop() {
-                  return k();
+                  return F();
                 },
                 dragContext: w,
                 registerRow: ee
               })
             })), p((i) => {
-              var c = `${y.paddingTop()}px`, m = `${y.paddingBottom()}px`;
+              var c = `${z.paddingTop()}px`, m = `${z.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,
@@ -411,8 +411,8 @@ function $t(e) {
         return N(i, qe), p((c) => _e(i, r(), c)), i;
       })()
     }), 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;
+      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-[var(--floe-line)]");
+      return i !== r.e && N(t, r.e = i), c !== r.t && ye(t, "aria-busy", r.t = c), m !== r.a && N(u, r.a = m), r;
     }, {
       e: void 0,
       t: void 0,
@@ -421,12 +421,12 @@ function $t(e) {
   })();
 }
 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, {
+  const a = we(), w = () => a.isSelected(e.item.id), F = () => a.getFilterMatchForId(e.item.id), M = pe(() => e.item), D = He(a, M, {
     source: "list"
   });
-  let b, S = null, O = 0, y = 0, C = !1;
+  let b, S = null, O = 0, z = 0, C = !1;
   const A = 5, R = 500;
-  let z = null;
+  let y = 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();
@@ -436,7 +436,7 @@ function it(e) {
     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);
+    y !== null && (clearTimeout(y), y = null);
   }, ne = () => {
     typeof document > "u" || (document.removeEventListener("pointermove", L, !0), document.removeEventListener("pointerup", v, !0), document.removeEventListener("pointercancel", B, !0));
   }, ie = () => {
@@ -444,16 +444,16 @@ function it(e) {
   }, H = (n) => {
     U(), ne(), C && e.dragContext && e.dragContext.endDrag(n), S = null, C = !1;
   };
-  ae(() => {
+  le(() => {
     e.registerRow(e.item.id, null), H(!1);
   });
   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) => ({
+    C = !0, w() || a.selectItem(e.item.id, !1);
+    const r = a.getSelectedItemsList(), c = (r.length > 0 && w() ? r : [e.item]).map((m) => ({
       item: m,
       sourceInstanceId: e.instanceId,
-      sourcePath: l.currentPath()
+      sourcePath: a.currentPath()
     }));
     if (P() && "vibrate" in navigator)
       try {
@@ -463,7 +463,7 @@ function it(e) {
     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);
+    const s = n.clientX - O, r = n.clientY - z, i = Math.sqrt(s * s + r * r);
     if (P() && !C && i > 10) {
       H(!1);
       return;
@@ -474,8 +474,8 @@ function it(e) {
   }, 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);
+    b = n.pointerType, D.onPointerDown(n), !(n.pointerType === "mouse" && n.button !== 0) && (!e.enableDragDrop || !e.dragContext || (S = n.pointerId, O = n.clientX, z = n.clientY, C = !1, ie(), P() && (U(), y = setTimeout(() => {
+      S !== null && !C && Q(O, z);
     }, R))));
   }, re = (n) => {
     b = n.pointerType, D.onPointerMove(n);
@@ -502,22 +502,22 @@ function it(e) {
     }
     if (!D.consumeClickSuppression(n)) {
       if (P()) {
-        l.openItem(e.item);
+        a.openItem(e.item);
         return;
       }
       if (n.shiftKey) {
-        l.selectRangeTo(e.item.id, he(n));
+        a.selectRangeTo(e.item.id, he(n));
         return;
       }
-      l.selectItem(e.item.id, he(n));
+      a.selectItem(e.item.id, he(n));
     }
-  }, a = () => {
-    P() || l.openItem(e.item);
+  }, l = () => {
+    P() || a.openItem(e.item);
   }, u = (n) => {
     if (n.preventDefault(), n.stopPropagation(), P()) return;
-    l.ensureContextMenuSelection(e.item.id);
-    const s = l.getSelectedItemsList(), r = s.length > 0 ? s : [e.item];
-    l.showContextMenu(Ne({
+    a.ensureContextMenuSelection(e.item.id);
+    const s = a.getSelectedItemsList(), r = s.length > 0 ? s : [e.item];
+    a.showContextMenu(Ne({
       x: n.clientX,
       y: n.clientY,
       triggerItem: e.item,
@@ -529,7 +529,7 @@ function it(e) {
     var n = et(), s = n.firstChild, r = s.firstChild;
     return K((i) => {
       e.registerRow(e.item.id, i);
-    }, n), ye(n, Re({
+    }, n), ze(n, Re({
       get "data-file-browser-item-id"() {
         return e.item.id;
       },
@@ -538,7 +538,7 @@ function it(e) {
       }
     }, Be, {
       onClick: o,
-      onDblClick: a,
+      onDblClick: l,
       onContextMenu: u,
       onPointerDown: V,
       onPointerMove: re,
@@ -548,14 +548,14 @@ function it(e) {
         return W(
           tt,
           "group cursor-pointer",
-          "transition-all duration-150 ease-out",
-          "hover:bg-accent/50",
+          "transition-[background-color,transform,opacity,box-shadow] duration-[var(--floe-duration-fast)] ease-out",
+          "hover:bg-[var(--floe-state-selected)]",
           "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-          w() && "bg-accent text-accent-foreground",
+          w() && "bg-[var(--floe-state-selected)] text-accent-foreground",
           // Drag state styling - being dragged items become translucent
           Y() && "opacity-40 scale-[0.98]",
           // Drop target styling - enhanced visual feedback
-          x() && X() && ["bg-primary/15 outline outline-2 outline-primary/60", "scale-[1.01] shadow-sm shadow-primary/10"],
+          x() && X() && ["bg-primary/15 outline outline-2 outline-primary/60", "scale-[1.01] shadow-[var(--floe-elevation-raised)]"],
           x() && !X() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
         );
       }
@@ -575,7 +575,7 @@ function it(e) {
         return e.item.name;
       },
       get match() {
-        return k();
+        return F();
       },
       get class() {
         return Ee(e.item);