@floegence/floe-webapp-core 0.86.60 → 0.86.62

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

@@ -1,15 +1,15 @@
 import { createComponent as d, Portal as ce, spread as de, mergeProps as me, insert as M, effect as R, setStyleProperty as fe, template as C, Dynamic as Me, memo as ae, className as Ce, setAttribute as E, use as W, delegateEvents as ke } from "solid-js/web";
-import { createSignal as z, createMemo as ue, createEffect as H, onCleanup as Q, untrack as J, on as Se, Show as F, For as he } from "solid-js";
+import { createSignal as z, createMemo as le, createEffect as H, onCleanup as Q, untrack as J, on as Se, Show as F, For as he } from "solid-js";
 import { cn as ee } from "../../utils/cn.js";
 import { deferAfterPaint as Ee } from "../../utils/defer.js";
 import { ChevronLeft as Le, ChevronRight as Pe } from "../icons/index.js";
-import { focusMenuItem as X, moveMenuFocus as le, calculateSubmenuPosition as Re, clampMenuPosition as $e } from "../ui/menuUtils.js";
+import { focusMenuItem as X, moveMenuFocus as ue, calculateSubmenuPosition as Re, clampMenuPosition as $e } from "../ui/menuUtils.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as ve, CANVAS_WHEEL_INTERACTIVE_ATTR as ge } from "../ui/localInteractionSurface.js";
 import { readSurfaceSafeArea as Ie, resolveFloatingBoundary as Ae } from "../ui/surfaceFloatingBoundary.js";
 import { resolveSurfacePortalHost as _e, readFreshInteractionSnapshot as De, projectSurfacePortalPosition as Fe, resolveSurfacePortalScale as Te, isSurfacePortalMode as Be, resolveSurfacePortalMount as je } from "../ui/dialogSurfaceScope.js";
 import { useResolvedFloeConfig as Ve } from "../../context/FloeConfigContext.js";
 import { useFileBrowser as He } from "./FileBrowserContext.js";
-var ze = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=14 x=8 y=8 rx=2 ry=2></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2">'), Oe = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=16 x=5 y=4 rx=2></rect><path d="M9 4.5h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v.5a1 1 0 0 0 1 1Z">'), Ne = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z">'), qe = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6">'), Ze = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 3v18"></path><path d="m8 7-4 4 4 4"></path><path d="m16 7 4 4-4 4">'), Ke = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2">'), Ue = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4">'), We = /* @__PURE__ */ C('<span class="shrink-0 text-[10px] text-muted-foreground opacity-60">'), we = /* @__PURE__ */ C("<div>"), Qe = /* @__PURE__ */ C('<div class=relative><button type=button role=menuitem><span class="min-w-0 flex-1 text-left [overflow-wrap:anywhere]">'), ye = /* @__PURE__ */ C('<div class="my-1 h-px bg-border"role=separator>'), Ge = /* @__PURE__ */ C('<button type=button role=menuitem class="flex w-full items-center gap-2 border-b px-3 py-1.5 text-xs cursor-pointer hover:bg-accent focus-visible:bg-accent focus:outline-none"><span></span><span class="min-w-0 flex-1 truncate text-right text-muted-foreground">');
+var ze = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=14 x=8 y=8 rx=2 ry=2></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2">'), Oe = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect width=14 height=16 x=5 y=4 rx=2></rect><path d="M9 4.5h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v.5a1 1 0 0 0 1 1Z">'), Ne = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z">'), qe = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6">'), Ze = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M12 3v18"></path><path d="m8 7-4 4 4 4"></path><path d="m16 7 4 4-4 4">'), Ke = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2">'), Ue = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4">'), We = /* @__PURE__ */ C('<span class="shrink-0 text-caption text-[var(--floe-ink-soft)] opacity-60">'), we = /* @__PURE__ */ C("<div>"), Qe = /* @__PURE__ */ C('<div class=relative><button type=button role=menuitem><span class="min-w-0 flex-1 text-left [overflow-wrap:anywhere]">'), ye = /* @__PURE__ */ C('<div class="my-1 h-px bg-border"role=separator>'), Ge = /* @__PURE__ */ C('<button type=button role=menuitem class="flex w-full items-center gap-2 border-b px-3 py-1.5 text-xs cursor-pointer hover:bg-[var(--floe-state-selected)] focus-visible:bg-[var(--floe-state-selected)] focus:outline-none"><span></span><span class="min-w-0 flex-1 truncate text-right text-[var(--floe-ink-soft)]">');
 const Je = (e) => (() => {
   var t = ze();
   return R(() => E(t, "class", e.class)), t;
@@ -136,10 +136,10 @@ function be(e, t) {
   const s = e.target, a = s?.closest('[role="menu"]'), g = s?.closest('[role="menuitem"]');
   switch (e.key) {
     case "ArrowDown":
-      e.preventDefault(), le(a, g, 1);
+      e.preventDefault(), ue(a, g, 1);
       return;
     case "ArrowUp":
-      e.preventDefault(), le(a, g, -1);
+      e.preventDefault(), ue(a, g, -1);
       return;
     case "Home":
       e.preventDefault(), X(a, "first");
@@ -177,7 +177,7 @@ function G(e, t) {
   const s = e.target;
   return typeof Element < "u" && s instanceof Element ? !!s.closest(`[data-floe-context-menu="${t}"]`) : !1;
 }
-function ut(e) {
+function lt(e) {
   const {
     ownerWindow: t,
     contextMenuId: s,
@@ -204,42 +204,42 @@ function xe(e) {
   });
   const h = () => (e.item.children?.length ?? 0) > 0, A = () => t().phase !== "closed", _ = () => te(t()), N = () => {
     if (!a) return pe;
-    const l = a.getBoundingClientRect();
+    const u = a.getBoundingClientRect();
     return {
-      x: l.right,
-      y: l.top
+      x: u.right,
+      y: u.top
     };
-  }, V = (l, u) => {
-    if (!a || !f) return l;
+  }, V = (u, l) => {
+    if (!a || !f) return u;
     const p = a.getBoundingClientRect(), L = f.getBoundingClientRect();
-    return Re(p, L, u);
+    return Re(p, L, l);
   }, k = () => {
     v && (clearTimeout(v), v = void 0);
   }, S = () => {
     oe(w), w = void 0;
   }, q = () => {
     oe($), $ = void 0;
-  }, j = (l = "first") => {
+  }, j = (u = "first") => {
     if (!h() || e.item.disabled) return;
     if (k(), S(), q(), e.portalLayout.touch()) {
-      e.portalLayout.enterChild([...e.path, e.item], l);
+      e.portalLayout.enterChild([...e.path, e.item], u);
       return;
     }
-    const u = ++O, p = N(), L = e.portalLayout.boundaryRect;
-    s(T("measuring", u, p)), w = ne(() => J(() => {
-      if (w = void 0, O !== u) return;
+    const l = ++O, p = N(), L = e.portalLayout.boundaryRect;
+    s(T("measuring", l, p)), w = ne(() => J(() => {
+      if (w = void 0, O !== l) return;
       const P = L(), n = a?.getBoundingClientRect(), o = f?.getBoundingClientRect();
       if (n && o && o.width > 0 && Math.max(P.right - n.right - 8, n.left - P.left - 8) < o.width) {
         y({
           restoreFocus: !1
-        }), e.portalLayout.enterChild([...e.path, e.item], l);
+        }), e.portalLayout.enterChild([...e.path, e.item], u);
         return;
       }
       const r = V(p, P);
-      s(T("positioned", u, p, r)), X(f, l);
+      s(T("positioned", l, p, r)), X(f, u);
     }));
-  }, y = (l = {}) => {
-    k(), S(), s(T("closed", ++O)), (l.restoreFocus ?? !0) && (q(), $ = ne(() => {
+  }, y = (u = {}) => {
+    k(), S(), s(T("closed", ++O)), (u.restoreFocus ?? !0) && (q(), $ = ne(() => {
       $ = void 0, g?.focus();
     }));
   }, Y = () => {
@@ -252,10 +252,10 @@ function xe(e) {
         restoreFocus: !1
       });
     }, 150));
-  }, K = (l) => {
+  }, K = (u) => {
     if (!e.item.disabled) {
       if (h()) {
-        l.preventDefault(), l.stopPropagation(), A() ? y() : j("first");
+        u.preventDefault(), u.stopPropagation(), A() ? y() : j("first");
         return;
       }
       e.onSelect(e.item, e.menu);
@@ -266,14 +266,14 @@ function xe(e) {
   });
   const U = () => e.portalLayout.projectPosition(t().position);
   return (() => {
-    var l = Qe(), u = l.firstChild, p = u.firstChild;
-    l.addEventListener("mouseleave", b), l.addEventListener("mouseenter", Y);
+    var u = Qe(), l = u.firstChild, p = l.firstChild;
+    u.addEventListener("mouseleave", b), u.addEventListener("mouseenter", Y);
     var L = a;
-    typeof L == "function" ? W(L, l) : a = l, u.$$keydown = (n) => {
+    typeof L == "function" ? W(L, u) : a = u, l.$$keydown = (n) => {
       e.item.disabled || !h() || (n.key === "ArrowRight" || n.key === "Enter" || n.key === " ") && (n.preventDefault(), j("first"));
-    }, u.$$click = K;
+    }, l.$$click = K;
     var P = g;
-    return typeof P == "function" ? W(P, u) : g = u, M(u, d(F, {
+    return typeof P == "function" ? W(P, l) : g = l, M(l, d(F, {
       get when() {
         return e.item.icon;
       },
@@ -283,7 +283,7 @@ function xe(e) {
         },
         class: "w-3.5 h-3.5 shrink-0 opacity-60"
       })
-    }), p), M(p, () => e.item.label), M(u, d(F, {
+    }), p), M(p, () => e.item.label), M(l, d(F, {
       get when() {
         return ae(() => !!e.item.shortcut)() && !h();
       },
@@ -291,16 +291,16 @@ function xe(e) {
         var n = We();
         return M(n, () => e.item.shortcut), n;
       }
-    }), null), M(u, d(F, {
+    }), null), M(l, d(F, {
       get when() {
         return h();
       },
       get children() {
         return d(Pe, {
-          class: "w-3 h-3 shrink-0 text-muted-foreground"
+          class: "w-3 h-3 shrink-0 text-[var(--floe-ink-soft)]"
         });
       }
-    }), null), M(l, d(F, {
+    }), null), M(u, d(F, {
       get when() {
         return ae(() => !!A())() && h();
       },
@@ -314,7 +314,7 @@ function xe(e) {
             return typeof o == "function" ? W(o, n) : f = n, de(n, me(() => e.portalLayout.scrollViewportProps(), {
               onScroll: () => I((r) => r + 1),
               get class() {
-                return ee(e.portalLayout.isSurfaceMode() ? "absolute z-20 py-1" : "fixed z-50 py-1", "bg-popover border border-border rounded-lg shadow-lg overflow-y-auto overscroll-contain touch-pan-y motion-reduce:animate-none", _() && "animate-in fade-in slide-in-from-left-1");
+                return ee(e.portalLayout.isSurfaceMode() ? "absolute z-20 py-1" : "fixed z-50 py-1", "bg-popover border border-[var(--floe-line)] rounded-control shadow-[var(--floe-elevation-float)] overflow-y-auto overscroll-contain touch-pan-y motion-reduce:animate-none", _() && "animate-in fade-in slide-in-from-left-1");
               },
               get "data-floe-context-menu"() {
                 return e.contextMenuId;
@@ -382,8 +382,8 @@ function xe(e) {
         });
       }
     }), null), R((n) => {
-      var o = e.item.disabled || !h() && e.item.type === "rename" && e.menu.items.length > 1, r = ee("w-full flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer", "transition-colors duration-75", "hover:bg-accent hover:text-accent-foreground", "focus:outline-none focus-visible:bg-accent focus-visible:text-accent-foreground", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent", e.item.type === "delete" && "text-error hover:bg-error/10 hover:text-error"), i = e.item.id, m = e.portalLayout.touch() ? "44px" : void 0, x = h() ? "menu" : void 0, D = h() ? A() : void 0;
-      return o !== n.e && (u.disabled = n.e = o), r !== n.t && Ce(u, n.t = r), i !== n.a && E(u, "data-file-menu-item", n.a = i), m !== n.o && fe(u, "min-height", n.o = m), x !== n.i && E(u, "aria-haspopup", n.i = x), D !== n.n && E(u, "aria-expanded", n.n = D), n;
+      var o = e.item.disabled || !h() && e.item.type === "rename" && e.menu.items.length > 1, r = ee("w-full flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer", "transition-colors duration-[var(--floe-duration-instant)]", "hover:bg-[var(--floe-state-selected)] hover:text-accent-foreground", "focus:outline-none focus-visible:bg-[var(--floe-state-selected)] focus-visible:text-accent-foreground", "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent", e.item.type === "delete" && "text-error hover:bg-error/10 hover:text-error"), i = e.item.id, m = e.portalLayout.touch() ? "44px" : void 0, x = h() ? "menu" : void 0, D = h() ? A() : void 0;
+      return o !== n.e && (l.disabled = n.e = o), r !== n.t && Ce(l, n.t = r), i !== n.a && E(l, "data-file-menu-item", n.a = i), m !== n.o && fe(l, "min-height", n.o = m), x !== n.i && E(l, "aria-haspopup", n.i = x), D !== n.n && E(l, "aria-expanded", n.n = D), n;
     }, {
       e: void 0,
       t: void 0,
@@ -391,7 +391,7 @@ function xe(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), l;
+    }), u;
   })();
 }
 function bt(e) {
@@ -399,14 +399,14 @@ function bt(e) {
   let $ = null, B = "first", I;
   const h = typeof window > "u" || typeof document > "u", A = `floe-context-menu-${rt += 1}`, [_, N] = z(T("closed"));
   let V, k = 0;
-  const S = ue(() => t.contextMenu() ? _e({
+  const S = le(() => t.contextMenu() ? _e({
     owner: e.owner
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), q = ue(() => (t.contextMenu(), Ie())), j = () => Ae(S(), e.boundary, q()), y = {
+  }), q = le(() => (t.contextMenu(), Ie())), j = () => Ae(S(), e.boundary, q()), y = {
     mount: () => je(S()),
     isSurfaceMode: () => Be(S()),
     boundaryRect: () => j() ?? {
@@ -464,16 +464,16 @@ function bt(e) {
     Ee(() => {
       st(n, r, i, o);
     });
-  }, l = (n) => {
+  }, u = (n) => {
     if (!I) return n;
     const o = I.getBoundingClientRect();
     return $e(n, o, y.boundaryRect());
-  }, u = () => {
+  }, l = () => {
     oe(V), V = void 0;
   };
   H(() => {
     if (h || !t.contextMenu()) return;
-    const n = ut({
+    const n = lt({
       ownerWindow: window,
       contextMenuId: A,
       onDismiss: (o) => b(o === "escape")
@@ -487,11 +487,11 @@ function bt(e) {
       v([]), B = "first";
       const o = De()?.target, r = o?.closest("button, [tabindex], a[href]") ?? o;
       $ = e.owner ?? (r instanceof HTMLElement ? r : !h && document.activeElement instanceof HTMLElement ? document.activeElement : null), g(typeof window < "u" && !!window.matchMedia?.(`${s.config.layout.mobileQuery}, (pointer: coarse)`).matches);
-    }), n || (u(), N(T("closed", ++k)));
+    }), n || (l(), N(T("closed", ++k)));
   }), H(() => {
     const n = t.contextMenu();
     if (f(), e.boundary, !n) return;
-    u();
+    l();
     const o = ++k, r = {
       x: n.x,
       y: n.y
@@ -503,7 +503,7 @@ function bt(e) {
         b();
         return;
       }
-      const m = l(r);
+      const m = u(r);
       N(T("positioned", o, r, m));
       const x = B, D = Array.from(I?.querySelectorAll("[data-file-menu-item]") ?? []).find((Z) => Z.dataset.fileMenuItem === x);
       D ? D.focus({
@@ -541,14 +541,14 @@ function bt(e) {
       x?.disconnect(), re?.disconnect(), document.removeEventListener("focusin", o, !0), window.visualViewport?.removeEventListener("resize", n), window.visualViewport?.removeEventListener("scroll", n), window.removeEventListener("blur", n);
     });
   }), Q(() => {
-    u();
+    l();
   });
   const p = () => te(_()), L = () => y.projectPosition(_().position), P = (n) => (() => {
     var o = we(), r = I;
     return typeof r == "function" ? W(r, o) : I = o, de(o, me(() => e.scrollViewportProps, {
       onScroll: () => O((i) => i + 1),
       get class() {
-        return ee(y.isSurfaceMode() ? "absolute z-20 py-1" : "fixed z-50 py-1", "bg-popover border border-border rounded-lg shadow-lg overflow-y-auto overscroll-contain touch-pan-y motion-reduce:animate-none", p() && (a() ? "animate-in fade-in" : "animate-in fade-in zoom-in-95"));
+        return ee(y.isSurfaceMode() ? "absolute z-20 py-1" : "fixed z-50 py-1", "bg-popover border border-[var(--floe-line)] rounded-control shadow-[var(--floe-elevation-float)] overflow-y-auto overscroll-contain touch-pan-y motion-reduce:animate-none", p() && (a() ? "animate-in fade-in" : "animate-in fade-in zoom-in-95"));
       },
       "data-floe-context-menu": A
     }, () => ({
@@ -636,5 +636,5 @@ export {
   bt as FileContextMenu,
   it as createDefaultContextMenuItems,
   st as dispatchContextMenuAction,
-  ut as installContextMenuDismissListeners
+  lt as installContextMenuDismissListeners
 };

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

@@ -13,8 +13,8 @@ import { fileBrowserTouchTargetAttrs as ye } from "./touchInteractionGuard.js";
 import { createItemContextMenuEvent as Me } from "./contextMenuEvent.js";
 import { createFileBrowserMarqueeSelection as Te, FILE_BROWSER_MARQUEE_OVERLAY_CLASS as Pe } from "./useFileBrowserMarqueeSelection.js";
 import { isPrimaryModKeyPressed as ie } from "../../utils/keybind.js";
-var Ee = /* @__PURE__ */ D('<mark class="bg-warning/40 text-inherit rounded-sm">'), Fe = /* @__PURE__ */ D('<div class="grid gap-2">'), $e = /* @__PURE__ */ D('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Le = /* @__PURE__ */ D('<div aria-hidden=true class="grid gap-2">'), Re = /* @__PURE__ */ D('<div data-file-browser-placeholder class="relative flex flex-col items-center gap-2 p-3 rounded-lg h-28"><div class="w-12 h-12 flex items-center justify-center rounded-lg relative"></div><span class="block w-full min-w-0 truncate px-1 text-xs text-center">'), Ae = /* @__PURE__ */ D('<span>No files matching "<!>"'), ke = /* @__PURE__ */ D('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), pe = /* @__PURE__ */ D('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), He = /* @__PURE__ */ D("<span>This folder is empty"), qe = /* @__PURE__ */ D("<div>"), Be = /* @__PURE__ */ D('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), Ge = /* @__PURE__ */ D('<button type=button><div class="w-12 h-12 flex items-center justify-center rounded-lg relative"></div><span></span><div>');
-const Oe = "relative flex flex-col items-center gap-2 p-3 rounded-lg h-28", Xe = "block w-full min-w-0 truncate px-1 text-xs text-center";
+var Ee = /* @__PURE__ */ D('<mark class="bg-warning/40 text-inherit rounded-sm">'), Fe = /* @__PURE__ */ D('<div class="grid gap-2">'), $e = /* @__PURE__ */ D('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Le = /* @__PURE__ */ D('<div aria-hidden=true class="grid gap-2">'), ke = /* @__PURE__ */ D('<div data-file-browser-placeholder class="relative flex flex-col items-center gap-2 p-3 rounded-control h-28"><div class="w-12 h-12 flex items-center justify-center rounded-control relative"></div><span class="block w-full min-w-0 truncate px-1 text-xs text-center">'), Re = /* @__PURE__ */ D('<span>No files matching "<!>"'), Ae = /* @__PURE__ */ D('<button type=button class="px-2 py-1 rounded-xs bg-[var(--floe-well)] hover:bg-[var(--floe-state-press)] transition-colors">Clear Filter'), pe = /* @__PURE__ */ D('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-[var(--floe-ink-soft)]">'), He = /* @__PURE__ */ D("<span>This folder is empty"), qe = /* @__PURE__ */ D("<div>"), Be = /* @__PURE__ */ D('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), Ge = /* @__PURE__ */ D('<button type=button><div class="w-12 h-12 flex items-center justify-center rounded-control relative"></div><span></span><div>');
+const Oe = "relative flex flex-col items-center gap-2 p-3 rounded-control h-28", Xe = "block w-full min-w-0 truncate px-1 text-xs text-center";
 function Ne(e) {
   const a = W(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
@@ -55,18 +55,18 @@ function Ne(e) {
   });
 }
 function ot(e) {
-  const a = le(), d = be(), M = () => (e.enableDragDrop ?? !0) && !!d, _ = () => e.instanceId ?? "default", h = 112, u = 8, b = 180, T = 2, R = 6, [v, z] = ae(null), V = Ie(v, {
+  const a = le(), d = be(), M = () => (e.enableDragDrop ?? !0) && !!d, _ = () => e.instanceId ?? "default", h = 112, u = 8, b = 180, T = 2, k = 6, [v, z] = ae(null), V = Ie(v, {
     preserveWhenHidden: !0
   }), m = W(() => {
     const n = V()?.width ?? 0;
     if (n <= 0) return T;
     const l = Math.floor((n + u) / (b + u));
-    return Math.max(T, Math.min(R, l));
-  }), F = () => h + u, s = we({
+    return Math.max(T, Math.min(k, l));
+  }), F = () => h + u, c = we({
     count: () => Math.ceil(a.currentFiles().length / Math.max(1, m())),
     itemSize: F,
     overscan: 2
-  }), U = () => s.range().start * m(), A = () => Math.min(a.currentFiles().length, s.range().end * m()), k = W(() => a.currentFiles().slice(U(), A())), P = /* @__PURE__ */ new Map(), B = (n, l) => {
+  }), U = () => c.range().start * m(), R = () => Math.min(a.currentFiles().length, c.range().end * m()), A = W(() => a.currentFiles().slice(U(), R())), P = /* @__PURE__ */ new Map(), B = (n, l) => {
     if (l) {
       P.set(n, l);
       return;
@@ -82,21 +82,21 @@ function ot(e) {
     }
     if (n === $) return;
     const l = F(), i = Math.floor(f.scrollTop / Math.max(1, l)) * Math.max(1, $), r = Math.floor(i / Math.max(1, n));
-    f.scrollTop = r * l, s.onScroll(), $ = n;
+    f.scrollTop = r * l, c.onScroll(), $ = n;
   });
   const G = (n) => {
     if (!f) return;
-    const S = Math.floor(n / Math.max(1, m())) * F(), i = S + F(), r = f.scrollTop, c = r + f.clientHeight;
+    const S = Math.floor(n / Math.max(1, m())) * F(), i = S + F(), r = f.scrollTop, s = r + f.clientHeight;
     if (S < r) {
-      f.scrollTop = S, s.onScroll();
+      f.scrollTop = S, c.onScroll();
       return;
     }
-    i > c && (f.scrollTop = Math.max(0, i - f.clientHeight), s.onScroll());
+    i > s && (f.scrollTop = Math.max(0, i - f.clientHeight), c.onScroll());
   };
   ne(() => {
     const n = a.revealRequest(), l = a.currentFiles();
-    if (m(), k(), !n) return;
-    const S = l.findIndex((c) => c.id === n.targetId);
+    if (m(), A(), !n) return;
+    const S = l.findIndex((s) => s.id === n.targetId);
     if (S < 0) return;
     if (!P.get(n.targetId)) {
       G(S);
@@ -130,8 +130,8 @@ function ot(e) {
   });
   return (() => {
     var n = $e(), l = n.firstChild, S = l.firstChild;
-    return te(n, "pointerdown", p.onPointerDown, !0), te(n, "scroll", s.onScroll), Q((i) => {
-      f = i, s.scrollRef(i), a.setScrollContainer(i);
+    return te(n, "pointerdown", p.onPointerDown, !0), te(n, "scroll", c.onScroll), Q((i) => {
+      f = i, c.scrollRef(i), a.setScrollContainer(i);
     }, n), Q((i) => z(i), S), w(l, g(L, {
       get when() {
         return !e.initializing;
@@ -146,11 +146,11 @@ function ot(e) {
               });
             },
             children: () => (() => {
-              var r = Re(), c = r.firstChild, y = c.nextSibling;
-              return w(c, g(re, {
-                class: "h-10 w-10 rounded-lg"
+              var r = ke(), s = r.firstChild, y = s.nextSibling;
+              return w(s, g(re, {
+                class: "h-10 w-10 rounded-control"
               })), w(y, g(re, {
-                class: "mx-auto h-4 w-24 max-w-full"
+                class: "mx-auto h-[var(--floe-line-caption)] w-24 max-w-full"
               })), r;
             })()
           })), H((r) => q(i, "grid-template-columns", `repeat(${m()}, minmax(0, 1fr))`)), i;
@@ -173,10 +173,10 @@ function ot(e) {
                 },
                 get children() {
                   return [(() => {
-                    var r = Ae(), c = r.firstChild, y = c.nextSibling;
+                    var r = Re(), s = r.firstChild, y = s.nextSibling;
                     return y.nextSibling, w(r, () => a.filterQueryApplied(), y), r;
                   })(), (() => {
-                    var r = ke();
+                    var r = Ae();
                     return r.$$click = () => a.setFilterQuery(""), r;
                   })()];
                 }
@@ -187,7 +187,7 @@ function ot(e) {
             var i = Fe();
             return w(i, g(K, {
               get each() {
-                return k();
+                return A();
               },
               children: (r) => g(Ye, {
                 item: r,
@@ -201,8 +201,8 @@ function ot(e) {
                 registerTile: B
               })
             })), H((r) => {
-              var c = `repeat(${m()}, minmax(0, 1fr))`, y = `${s.paddingTop()}px`, O = `${s.paddingBottom()}px`;
-              return c !== r.e && q(i, "grid-template-columns", r.e = c), y !== r.t && q(i, "padding-top", r.t = y), O !== r.a && q(i, "padding-bottom", r.a = O), r;
+              var s = `repeat(${m()}, minmax(0, 1fr))`, y = `${c.paddingTop()}px`, O = `${c.paddingBottom()}px`;
+              return s !== r.e && q(i, "grid-template-columns", r.e = s), y !== r.t && q(i, "padding-top", r.t = y), O !== r.a && q(i, "padding-bottom", r.a = O), r;
             }, {
               e: void 0,
               t: void 0,
@@ -217,11 +217,11 @@ function ot(e) {
       },
       children: (i) => (() => {
         var r = qe();
-        return Y(r, Pe), H((c) => ue(r, i(), c)), r;
+        return Y(r, Pe), H((s) => ue(r, i(), s)), r;
       })()
     }), null), H((i) => {
-      var r = N("relative h-full min-h-0 overflow-auto", e.class), c = e.initializing || void 0;
-      return r !== i.e && Y(n, i.e = r), c !== i.t && ge(n, "aria-busy", i.t = c), i;
+      var r = N("relative h-full min-h-0 overflow-auto", e.class), s = e.initializing || void 0;
+      return r !== i.e && Y(n, i.e = r), s !== i.t && ge(n, "aria-busy", i.t = s), i;
     }, {
       e: void 0,
       t: void 0
@@ -232,11 +232,11 @@ function Ye(e) {
   const a = le(), d = () => a.isSelected(e.item.id), M = () => a.getFilterMatchForId(e.item.id), _ = xe(() => e.item), h = _e(a, _, {
     source: "grid"
   });
-  let u, b = null, T = 0, R = 0, v = !1;
+  let u, b = null, T = 0, k = 0, v = !1;
   const z = 5, V = 500;
   let m = null;
-  const [F, j] = ae(!1), s = () => u === "touch" || u === "pen", U = () => e.item.type === "folder", A = () => U() && e.enableDragDrop && e.dragContext, k = () => {
-    if (!A() || !e.dragContext) return !1;
+  const [F, j] = ae(!1), c = () => u === "touch" || u === "pen", U = () => e.item.type === "folder", R = () => U() && e.enableDragDrop && e.dragContext, A = () => {
+    if (!R() || !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;
   }, P = () => {
@@ -263,7 +263,7 @@ function Ye(e) {
       sourceInstanceId: e.instanceId,
       sourcePath: a.currentPath()
     }));
-    if (s() && "vibrate" in navigator)
+    if (c() && "vibrate" in navigator)
       try {
         navigator.vibrate(50);
       } catch {
@@ -271,24 +271,24 @@ function Ye(e) {
     e.dragContext.startDrag(I, t, o);
   }, p = (t) => {
     if (b !== t.pointerId) return;
-    const o = t.clientX - T, x = t.clientY - R, E = Math.sqrt(o * o + x * x);
-    if (s() && !v && E > 10) {
+    const o = t.clientX - T, x = t.clientY - k, E = Math.sqrt(o * o + x * x);
+    if (c() && !v && E > 10) {
       C(!1);
       return;
     }
-    !s() && !v && E > z && G(t.clientX, t.clientY), v && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+    !c() && !v && E > z && G(t.clientX, t.clientY), v && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
   }, n = (t) => {
     b === t.pointerId && (h.onPointerUp(), C(!0));
   }, l = (t) => {
     b === t.pointerId && (h.onPointerCancel(), C(!1));
   }, S = (t) => {
-    u = t.pointerType, h.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (b = t.pointerId, T = t.clientX, R = t.clientY, v = !1, $(), s() && (B(), m = setTimeout(() => {
-      b !== null && !v && G(T, R);
+    u = t.pointerType, h.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (b = t.pointerId, T = t.clientX, k = t.clientY, v = !1, $(), c() && (B(), m = setTimeout(() => {
+      b !== null && !v && G(T, k);
     }, V))));
   }, i = (t) => {
     u = t.pointerType, h.onPointerMove(t);
   }, r = (t) => {
-    if (!A() || !e.dragContext) return;
+    if (!R() || !e.dragContext) return;
     const o = e.dragContext.dragState();
     if (!o.isDragging) return;
     j(!0);
@@ -298,7 +298,7 @@ function Ye(e) {
       targetPath: e.item.path,
       targetItem: e.item
     }, x, I);
-  }, c = (t) => {
+  }, s = (t) => {
     if (!e.dragContext) return;
     j(!1);
     const o = e.dragContext.dragState();
@@ -309,7 +309,7 @@ function Ye(e) {
       return;
     }
     if (!h.consumeClickSuppression(t)) {
-      if (s()) {
+      if (c()) {
         a.openItem(e.item);
         return;
       }
@@ -320,9 +320,9 @@ function Ye(e) {
       a.selectItem(e.item.id, ie(t));
     }
   }, O = () => {
-    s() || a.openItem(e.item);
-  }, ce = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), s()) return;
+    c() || a.openItem(e.item);
+  }, se = (t) => {
+    if (t.preventDefault(), t.stopPropagation(), c()) return;
     a.ensureContextMenuSelection(e.item.id);
     const o = a.getSelectedItemsList(), x = o.length > 0 ? o : [e.item];
     a.showContextMenu(Me({
@@ -332,7 +332,7 @@ function Ye(e) {
       items: x,
       source: "grid"
     }));
-  }, se = () => e.dragContext?.dragState(), de = () => se()?.isDragging ?? !1, J = () => F() && de() && A();
+  }, ce = () => e.dragContext?.dragState(), de = () => ce()?.isDragging ?? !1, J = () => F() && de() && R();
   return (() => {
     var t = Ge(), o = t.firstChild, x = o.nextSibling, E = x.nextSibling;
     return Q((I) => {
@@ -350,25 +350,27 @@ function Ye(e) {
       },
       onClick: y,
       onDblClick: O,
-      onContextMenu: ce,
+      onContextMenu: se,
       onPointerDown: S,
       onPointerMove: i,
       onPointerEnter: r,
-      onPointerLeave: c,
+      onPointerLeave: s,
       get class() {
         return N(
           Oe,
           "group cursor-pointer",
-          "transition-all duration-150 ease-out",
-          "hover:bg-accent/50 hover:scale-[1.02]",
+          "transition-[background-color,transform,opacity,box-shadow] duration-[var(--floe-duration-fast)] ease-out",
+          /* Hover is the fill, not a zoom: a tile that grows under the pointer
+           * makes the grid shift. Press settles on the shared scale step. */
+          "hover:bg-[var(--floe-state-selected)]",
           "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "active:scale-[0.98]",
-          d() && "bg-accent ring-2 ring-primary/50",
+          "active:scale-[var(--floe-press-scale)]",
+          d() && "bg-[var(--floe-state-selected)] ring-2 ring-primary/50",
           // Drag state styling - being dragged items become translucent and shrink
           P() && "opacity-40 scale-90",
           // Drop target styling - enhanced visual feedback for folders
-          J() && k() && ["bg-primary/15 ring-2 ring-primary/60", "scale-105 shadow-lg shadow-primary/15"],
-          J() && !k() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
+          J() && A() && ["bg-primary/15 ring-2 ring-primary/60", "scale-105 shadow-[var(--floe-elevation-float)]"],
+          J() && !A() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
         );
       }
     }), !1, !0), w(t, g(L, {
@@ -397,7 +399,7 @@ function Ye(e) {
         return M();
       }
     })), H((I) => {
-      var X = N(Xe, "transition-colors duration-150", Se(e.item), d() && "font-medium"), Z = N("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), ee = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
+      var X = N(Xe, "transition-colors duration-[var(--floe-duration-fast)]", Se(e.item), d() && "font-medium"), Z = N("absolute inset-0 rounded-control opacity-0 transition-opacity duration-[var(--floe-duration-slow)]", "group-hover:opacity-100", "pointer-events-none"), ee = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
       return X !== I.e && Y(x, I.e = X), Z !== I.t && Y(E, I.t = Z), ee !== I.a && q(E, "background", I.a = ee), I;
     }, {
       e: void 0,