@floegence/floe-webapp-core 0.86.58 → 0.86.62

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

@@ -1,41 +1,41 @@
-import { createComponent as o, Portal as N, insert as l, effect as u, className as $, memo as B, template as a, setAttribute as A } from "solid-js/web";
-import { createSignal as F, createEffect as V, createMemo as d, Show as m, For as j } from "solid-js";
+import { createComponent as o, Portal as N, insert as a, effect as m, className as $, memo as B, template as l, setAttribute as A } from "solid-js/web";
+import { createSignal as F, createEffect as V, createMemo as d, Show as u, For as j } from "solid-js";
 import { Presence as U, Motion as X } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.17/node_modules/solid-motionone/dist/index.js";
-import { cn as f } from "../../utils/cn.js";
+import { cn as p } from "../../utils/cn.js";
 import { useFileBrowserDrag as G } from "../../context/FileBrowserDragContext.js";
 import { FileItemIcon as W } from "./FileIcons.js";
-var Y = /* @__PURE__ */ a('<div class="text-[10px] text-muted-foreground pl-6">and <!> more...'), q = /* @__PURE__ */ a("<span>Drop to move"), y = /* @__PURE__ */ a("<div>"), H = /* @__PURE__ */ a('<div class="flex items-center gap-2.5 text-xs text-foreground"><span class="flex-shrink-0 w-4 h-4"></span><span class="truncate font-medium">'), J = /* @__PURE__ */ a("<span>Cannot drop here"), K = /* @__PURE__ */ a('<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><polyline points="20 6 9 17 4 12">'), L = /* @__PURE__ */ a('<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><line x1=18 y1=6 x2=6 y2=18></line><line x1=6 y1=6 x2=18 y2=18>');
+var Y = /* @__PURE__ */ l('<div class="text-caption text-[var(--floe-ink-soft)] pl-6">and <!> more...'), q = /* @__PURE__ */ l("<span>Drop to move"), y = /* @__PURE__ */ l("<div>"), H = /* @__PURE__ */ l('<div class="flex items-center gap-2.5 text-xs text-foreground"><span class="flex-shrink-0 w-4 h-4"></span><span class="truncate font-medium">'), J = /* @__PURE__ */ l("<span>Cannot drop here"), K = /* @__PURE__ */ l('<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><polyline points="20 6 9 17 4 12">'), L = /* @__PURE__ */ l('<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><line x1=18 y1=6 x2=6 y2=18></line><line x1=6 y1=6 x2=18 y2=18>');
 const x = 3, P = 4, T = 4, Q = 0.2;
-function le() {
-  const g = G(), n = () => g?.dragState(), S = () => n()?.isDragging ?? !1, C = () => n()?.isDragEnding ?? !1, [c, h] = F(null), [s, w] = F(!1);
-  let _ = !1;
+function ae() {
+  const g = G(), n = () => g?.dragState(), S = () => n()?.isDragging ?? !1, C = () => n()?.isDragEnding ?? !1, [c, h] = F(null), [i, v] = F(!1);
+  let w = !1;
   V(() => {
     const e = S(), t = C();
-    if (e && !t && !_ && (h(null), w(!1)), t && !_) {
+    if (e && !t && !w && (h(null), v(!1)), t && !w) {
       const r = n();
       if (r && r.draggedItems.length > 0) {
-        const i = r.pointerPosition;
+        const s = r.pointerPosition;
         h({
           items: r.draggedItems.map((D) => D.item),
           position: {
-            x: i.x + P,
-            y: i.y + T
+            x: s.x + P,
+            y: s.y + T
           },
           target: r.endAnimationTarget,
           committed: r.isDropCommitted
-        }), w(!0);
+        }), v(!0);
       }
     }
-    _ = t;
+    w = t;
   });
-  const R = () => S() || C() || s(), E = d(() => {
+  const R = () => S() || C() || i(), k = d(() => {
     const e = c();
     return e ? e.items.slice(0, x) : (n()?.draggedItems ?? []).slice(0, x).map((r) => r.item);
-  }), v = d(() => {
+  }), _ = d(() => {
     const e = c();
     return e ? e.items.length : n()?.draggedItems?.length ?? 0;
-  }), k = d(() => {
-    const e = v();
+  }), E = d(() => {
+    const e = _();
     return e > x ? e - x : 0;
   }), b = d(() => {
     const e = c();
@@ -52,27 +52,27 @@ function le() {
   }), z = d(() => {
     const e = c();
     return e?.committed && e?.target ? e.target : b();
-  }), M = d(() => c()?.committed ?? !1), p = () => n()?.isValidDrop ?? !1, O = () => !!n()?.dropTarget, I = () => O() && !c();
+  }), M = d(() => c()?.committed ?? !1), f = () => n()?.isValidDrop ?? !1, O = () => !!n()?.dropTarget, I = () => O() && !c();
   return o(U, {
     get children() {
-      return o(m, {
+      return o(u, {
         get when() {
-          return B(() => !!R())() && E().length > 0;
+          return B(() => !!R())() && k().length > 0;
         },
         get children() {
           return o(N, {
             get children() {
               return o(X.div, {
                 get class() {
-                  return f("fixed top-0 left-0 pointer-events-none z-[9999]", "will-change-transform");
+                  return p("fixed top-0 left-0 pointer-events-none z-[9999]", "will-change-transform");
                 },
                 initial: !1,
                 get animate() {
                   return {
-                    x: s() ? z().x : b().x,
-                    y: s() ? z().y : b().y,
-                    opacity: s() ? 0 : 1,
-                    scale: s() ? 0.75 : 1
+                    x: i() ? z().x : b().x,
+                    y: i() ? z().y : b().y,
+                    opacity: i() ? 0 : 1,
+                    scale: i() ? 0.75 : 1
                   };
                 },
                 exit: {
@@ -81,45 +81,45 @@ function le() {
                 },
                 get transition() {
                   return {
-                    duration: s() ? Q : 0,
+                    duration: i() ? Q : 0,
                     easing: "ease-out"
                   };
                 },
                 onMotionComplete: () => {
-                  s() && (w(!1), h(null));
+                  i() && (v(!1), h(null));
                 },
                 get children() {
                   return [(() => {
                     var e = y();
-                    return l(e, o(j, {
+                    return a(e, o(j, {
                       get each() {
-                        return E();
+                        return k();
                       },
                       children: (t) => (() => {
-                        var r = H(), i = r.firstChild, D = i.nextSibling;
-                        return l(i, o(W, {
+                        var r = H(), s = r.firstChild, D = s.nextSibling;
+                        return a(s, o(W, {
                           item: t,
                           size: 16,
                           class: "w-4 h-4"
-                        })), l(D, () => t.name), r;
+                        })), a(D, () => t.name), r;
                       })()
-                    }), null), l(e, o(m, {
+                    }), null), a(e, o(u, {
                       get when() {
-                        return k() > 0;
+                        return E() > 0;
                       },
                       get children() {
-                        var t = Y(), r = t.firstChild, i = r.nextSibling;
-                        return i.nextSibling, l(t, k, i), t;
+                        var t = Y(), r = t.firstChild, s = r.nextSibling;
+                        return s.nextSibling, a(t, E, s), t;
                       }
-                    }), null), l(e, o(m, {
+                    }), null), a(e, o(u, {
                       get when() {
                         return I();
                       },
                       get children() {
                         var t = y();
-                        return l(t, o(m, {
+                        return a(t, o(u, {
                           get when() {
-                            return p();
+                            return f();
                           },
                           get fallback() {
                             return [o(ee, {
@@ -131,37 +131,37 @@ function le() {
                               class: "w-3.5 h-3.5"
                             }), q()];
                           }
-                        })), u(() => $(t, f("flex items-center gap-1.5 pt-1.5 mt-1 border-t border-border text-[11px] font-medium", "transition-colors duration-150", p() ? "text-success" : "text-error"))), t;
+                        })), m(() => $(t, p("flex items-center gap-1.5 pt-1.5 mt-1 border-t border-[var(--floe-line)] text-caption font-medium", "transition-colors duration-[var(--floe-duration-fast)]", f() ? "text-success" : "text-error"))), t;
                       }
-                    }), null), u(() => $(e, f(
-                      "flex flex-col gap-1 p-2.5 rounded-lg",
-                      "bg-card border border-border",
-                      "shadow-md",
+                    }), null), m(() => $(e, p(
+                      "flex flex-col gap-1 p-2.5 rounded-control",
+                      "bg-card border border-[var(--floe-line)]",
+                      "shadow-[var(--floe-elevation-raised)]",
                       "min-w-[150px] max-w-[220px]",
                       // Entrance animation (only when not exiting)
-                      !s() && "animate-in fade-in zoom-in-95 duration-150",
+                      !i() && "animate-in fade-in zoom-in-95 duration-[var(--floe-duration-fast)]",
                       // Border transitions
-                      "transition-[border-color,box-shadow] duration-150",
-                      I() && p() && "border-success/60",
-                      I() && !p() && "border-error/60",
+                      "transition-[border-color,box-shadow] duration-[var(--floe-duration-fast)]",
+                      I() && f() && "border-success/60",
+                      I() && !f() && "border-error/60",
                       // Committed state
-                      s() && M() && "border-success/60"
+                      i() && M() && "border-success/60"
                     ))), e;
-                  })(), o(m, {
+                  })(), o(u, {
                     get when() {
-                      return v() > 1;
+                      return _() > 1;
                     },
                     get children() {
                       var e = y();
-                      return l(e, v), u(() => $(e, f(
+                      return a(e, _), m(() => $(e, p(
                         "absolute -top-2 -right-2",
                         "min-w-[20px] h-5 px-1.5 rounded-full",
                         "bg-foreground text-background",
                         "flex items-center justify-center",
-                        "text-[10px] font-semibold",
-                        "shadow-sm",
+                        "text-caption font-semibold",
+                        "shadow-[var(--floe-elevation-raised)]",
                         // Entrance animation (only when not exiting)
-                        !s() && "animate-in zoom-in-50 duration-200"
+                        !i() && "animate-in zoom-in-50 duration-[var(--floe-duration-base)]"
                       ))), e;
                     }
                   })];
@@ -177,15 +177,15 @@ function le() {
 function Z(g) {
   return (() => {
     var n = K();
-    return u(() => A(n, "class", g.class)), n;
+    return m(() => A(n, "class", g.class)), n;
   })();
 }
 function ee(g) {
   return (() => {
     var n = L();
-    return u(() => A(n, "class", g.class)), n;
+    return m(() => A(n, "class", g.class)), n;
   })();
 }
 export {
-  le as FileBrowserDragPreview
+  ae as FileBrowserDragPreview
 };

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

@@ -14,7 +14,7 @@ import { FileBrowserToolbar as U } from "./FileBrowserToolbar.js";
 import { FileBrowserStatusBar as X } from "./FileBrowserStatusBar.js";
 import { FileContextMenu as Y } from "./FileContextMenu.js";
 import { FileBrowserDragPreview as Z } from "./DragPreview.js";
-var p = /* @__PURE__ */ S('<div class="border-b border-border">'), ee = /* @__PURE__ */ S('<div><div class="flex flex-1 min-h-0 relative"><div class="flex-1 min-w-0 flex flex-col"><div class="flex-1 min-h-0">');
+var p = /* @__PURE__ */ S('<div class="border-b border-[var(--floe-line)]">'), ee = /* @__PURE__ */ S('<div><div class="flex flex-1 min-h-0 relative"><div class="flex-1 min-w-0 flex flex-col"><div class="flex-1 min-h-0">');
 function Ce(e) {
   return n(N, {
     get files() {
@@ -108,12 +108,12 @@ function Ce(e) {
   });
 }
 function te(e) {
-  const r = T(), I = O(), l = q(), f = () => I.isMobile(), [h, c] = B(null), x = () => h() ?? r.sidebarWidth(), R = () => e.sidebarResizable ?? !0, o = () => (e.enableDragDrop ?? !0) && !!l, d = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
+  const r = T(), I = O(), o = q(), f = () => I.isMobile(), [h, c] = B(null), x = () => h() ?? r.sidebarWidth(), R = () => e.sidebarResizable ?? !0, l = () => (e.enableDragDrop ?? !0) && !!o, s = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
   let v, C = null, w = null;
   E(() => {
-    if (!l || !o()) return;
+    if (!o || !l()) return;
     const t = {
-      instanceId: d(),
+      instanceId: s(),
       currentPath: r.currentPath,
       files: r.files,
       onDragMove: e.onDragMove,
@@ -122,9 +122,9 @@ function te(e) {
       optimisticRemove: r.optimisticRemove,
       optimisticInsert: r.optimisticInsert
     };
-    l.registerInstance(t);
+    o.registerInstance(t);
   }), L(() => {
-    l && o() && l.unregisterInstance(d());
+    o && l() && o.unregisterInstance(s());
   });
   let M = !1, g = !1;
   _(() => {
@@ -140,13 +140,13 @@ function te(e) {
   }, y = () => !r.sidebarCollapsed() || !f(), P = () => {
     c(r.sidebarWidth());
   }, W = (t) => {
-    c((s) => r.clampSidebarWidth((s ?? r.sidebarWidth()) + t));
+    c((d) => r.clampSidebarWidth((d ?? r.sidebarWidth()) + t));
   }, F = () => {
     const t = h();
     t !== null && (r.setSidebarWidth(t), c(null));
   };
   return (() => {
-    var t = ee(), s = t.firstChild, u = s.firstChild, b = u.firstChild;
+    var t = ee(), d = t.firstChild, u = d.firstChild, b = u.firstChild;
     return t.$$keydown = D, a(t, n(m, {
       get when() {
         return e.header;
@@ -155,7 +155,7 @@ function te(e) {
         var i = p();
         return a(i, () => e.header), i;
       }
-    }), s), a(s, n(G, {
+    }), d), a(d, n(G, {
       title: "Explorer",
       get width() {
         return x();
@@ -182,10 +182,10 @@ function te(e) {
       get children() {
         return n(j, {
           get instanceId() {
-            return d();
+            return s();
           },
           get enableDragDrop() {
-            return o();
+            return l();
           }
         });
       }
@@ -203,20 +203,20 @@ function te(e) {
       get fallback() {
         return n(Q, {
           get instanceId() {
-            return d();
+            return s();
           },
           get enableDragDrop() {
-            return o();
+            return l();
           }
         });
       },
       get children() {
         return n(J, {
           get instanceId() {
-            return d();
+            return s();
           },
           get enableDragDrop() {
-            return o();
+            return l();
           }
         });
       }
@@ -235,12 +235,12 @@ function te(e) {
       }
     }), null), a(t, n(m, {
       get when() {
-        return o();
+        return l();
       },
       get children() {
         return n(Z, {});
       }
-    }), null), A(() => $(t, K("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class))), t;
+    }), null), A(() => $(t, K("flex flex-col h-full min-h-0 bg-background", "border border-[var(--floe-line)] rounded-control overflow-hidden", "shadow-sm", e.class))), t;
   })();
 }
 k(["keydown"]);

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

@@ -1,9 +1,9 @@
-import { insert as i, createComponent as a, effect as f, className as v, setAttribute as h, template as u } from "solid-js/web";
-import { Show as d } from "solid-js";
+import { insert as l, createComponent as a, effect as f, className as v, setAttribute as h, template as u } from "solid-js/web";
+import { Show as m } from "solid-js";
 import { Skeleton as g } from "../loading/Skeleton.js";
 import { cn as w } from "../../utils/cn.js";
 import { useFileBrowser as $ } from "./FileBrowserContext.js";
-var b = /* @__PURE__ */ u("<span aria-hidden=true>·"), x = /* @__PURE__ */ u("<span>"), C = /* @__PURE__ */ u('<div class="flex flex-wrap items-center gap-1.5"><span>'), p = /* @__PURE__ */ u("<div>"), _ = /* @__PURE__ */ u("<div data-file-browser-status-bar=true>");
+var x = /* @__PURE__ */ u("<span aria-hidden=true>·"), b = /* @__PURE__ */ u("<span>"), C = /* @__PURE__ */ u('<div class="flex flex-wrap items-center gap-1.5"><span>'), p = /* @__PURE__ */ u("<div>"), _ = /* @__PURE__ */ u("<div data-file-browser-status-bar=true>");
 function y(t) {
   return `${t} ${t === 1 ? "item" : "items"}`;
 }
@@ -11,10 +11,10 @@ function S(t) {
   return `${t} selected`;
 }
 function A(t) {
-  const l = $(), m = () => l.currentFiles().length, s = () => l.selectedItems().size;
+  const i = $(), c = () => i.currentFiles().length, s = () => i.selectedItems().size;
   return (() => {
     var o = _();
-    return i(o, a(d, {
+    return l(o, a(m, {
       get when() {
         return !t.initializing;
       },
@@ -28,32 +28,32 @@ function A(t) {
       get children() {
         return [(() => {
           var e = C(), n = e.firstChild;
-          return i(n, () => t.formatItemCount?.(m()) ?? y(m())), i(e, a(d, {
+          return l(n, () => t.formatItemCount?.(c()) ?? y(c())), l(e, a(m, {
             get when() {
-              return l.filterQueryApplied().trim();
+              return i.filterQueryApplied().trim();
             },
             get children() {
-              return [b(), (() => {
-                var r = x();
-                return i(r, () => t.filteredLabel ?? "Filtered"), r;
+              return [x(), (() => {
+                var r = b();
+                return l(r, () => t.filteredLabel ?? "Filtered"), r;
               })()];
             }
-          }), null), i(e, a(d, {
+          }), null), l(e, a(m, {
             get when() {
               return s() > 0;
             },
             get children() {
-              return [b(), (() => {
-                var r = x();
-                return i(r, () => t.formatSelectedCount?.(s()) ?? S(s())), r;
+              return [x(), (() => {
+                var r = b();
+                return l(r, () => t.formatSelectedCount?.(s()) ?? S(s())), r;
               })()];
             }
           }), null), e;
         })(), (() => {
           var e = p();
-          return i(e, () => l.currentPath()), f((n) => {
-            var r = w("max-w-[200px] truncate text-right", t.pathClass), c = l.currentPath();
-            return r !== n.e && v(e, n.e = r), c !== n.t && h(e, "title", n.t = c), n;
+          return l(e, () => i.currentPath()), f((n) => {
+            var r = w("max-w-[200px] truncate text-right", t.pathClass), d = i.currentPath();
+            return r !== n.e && v(e, n.e = r), d !== n.t && h(e, "title", n.t = d), n;
           }, {
             e: void 0,
             t: void 0
@@ -61,7 +61,7 @@ function A(t) {
         })()];
       }
     })), f((e) => {
-      var n = t.initializing || void 0, r = w("flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-1 text-[length:var(--floe-type-caption)] leading-4 text-muted-foreground", t.class);
+      var n = t.initializing || void 0, r = w("flex flex-wrap items-center justify-between gap-2 border-t border-[var(--floe-line)] px-3 py-1 text-[length:var(--floe-type-caption)] leading-4 text-[var(--floe-ink-soft)]", t.class);
       return n !== e.e && h(o, "aria-busy", e.e = n), r !== e.t && v(o, e.t = r), e;
     }, {
       e: void 0,

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

@@ -1,11 +1,11 @@
 import { addEventListener as M, insert as n, createComponent as l, use as S, effect as s, className as f, template as a, setAttribute as g, delegateEvents as Q } from "solid-js/web";
-import { onMount as R, Show as k } from "solid-js";
+import { onMount as R, Show as y } from "solid-js";
 import { cn as v } from "../../utils/cn.js";
 import { deferAfterPaint as E } from "../../utils/defer.js";
 import { useFileBrowser as L } from "./FileBrowserContext.js";
 import { Breadcrumb as T } from "./Breadcrumb.js";
 import { Grid as V } from "../icons/index.js";
-var N = /* @__PURE__ */ a('<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><line x1=8 y1=6 x2=21 y2=6></line><line x1=8 y1=12 x2=21 y2=12></line><line x1=8 y1=18 x2=21 y2=18></line><line x1=3 y1=6 x2=3.01 y2=6></line><line x1=3 y1=12 x2=3.01 y2=12></line><line x1=3 y1=18 x2=3.01 y2=18>'), U = /* @__PURE__ */ a('<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="M12 10v6"></path><path d="m9 13 3-3 3 3">'), G = /* @__PURE__ */ a('<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=18 height=18 x=3 y=3 rx=2 ry=2></rect><line x1=9 y1=3 x2=9 y2=21>'), P = /* @__PURE__ */ a('<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><circle cx=11 cy=11 r=8></circle><path d="m21 21-4.3-4.3">'), D = /* @__PURE__ */ a('<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="M18 6 6 18"></path><path d="m6 6 12 12">'), H = /* @__PURE__ */ a('<button type=button aria-label="Clear filter">'), K = /* @__PURE__ */ a('<div data-floe-input-surface class="flex items-center flex-1 gap-1 px-2 py-1 bg-muted/50 rounded-md border border-border/50"><input type=text placeholder=Filter... aria-label="Filter files by name">'), X = /* @__PURE__ */ a('<div class="ml-0.5 flex shrink-0 items-center gap-1">'), Z = /* @__PURE__ */ a('<div><button type=button aria-label="Toggle sidebar"></button><button type=button aria-label="Navigate to parent folder"></button><div></div><div></div><div class="flex items-center gap-0.5 p-0.5 bg-muted/50 rounded-md">'), q = /* @__PURE__ */ a('<button type=button aria-label="Filter files">'), z = /* @__PURE__ */ a("<button type=button>");
+var N = /* @__PURE__ */ a('<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><line x1=8 y1=6 x2=21 y2=6></line><line x1=8 y1=12 x2=21 y2=12></line><line x1=8 y1=18 x2=21 y2=18></line><line x1=3 y1=6 x2=3.01 y2=6></line><line x1=3 y1=12 x2=3.01 y2=12></line><line x1=3 y1=18 x2=3.01 y2=18>'), U = /* @__PURE__ */ a('<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="M12 10v6"></path><path d="m9 13 3-3 3 3">'), G = /* @__PURE__ */ a('<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=18 height=18 x=3 y=3 rx=2 ry=2></rect><line x1=9 y1=3 x2=9 y2=21>'), P = /* @__PURE__ */ a('<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><circle cx=11 cy=11 r=8></circle><path d="m21 21-4.3-4.3">'), q = /* @__PURE__ */ a('<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="M18 6 6 18"></path><path d="m6 6 12 12">'), D = /* @__PURE__ */ a('<button type=button aria-label="Clear filter">'), H = /* @__PURE__ */ a('<div data-floe-input-surface class="flex items-center flex-1 gap-1 px-2 py-1 bg-[var(--floe-well)] rounded-control border border-[var(--floe-line)]"><input type=text placeholder=Filter... aria-label="Filter files by name">'), K = /* @__PURE__ */ a('<div class="ml-0.5 flex shrink-0 items-center gap-1">'), X = /* @__PURE__ */ a('<div><button type=button aria-label="Toggle sidebar"></button><button type=button aria-label="Navigate to parent folder"></button><div></div><div></div><div class="flex items-center gap-0.5 p-0.5 bg-[var(--floe-well)] rounded-group">'), Z = /* @__PURE__ */ a('<button type=button aria-label="Filter files">'), z = /* @__PURE__ */ a("<button type=button>");
 const J = (r) => (() => {
   var e = N();
   return s(() => g(e, "class", r.class)), e;
@@ -19,20 +19,20 @@ const J = (r) => (() => {
   var e = P();
   return s(() => g(e, "class", r.class)), e;
 })(), Y = (r) => (() => {
-  var e = D();
+  var e = q();
   return s(() => g(e, "class", r.class)), e;
 })();
 function se(r) {
   const e = L();
   let i;
-  const c = () => {
+  const u = () => {
     const d = e.currentPath();
     return d !== "/" && d !== "";
-  }, b = () => {
+  }, w = () => {
     e.isFilterActive() ? (e.setFilterQuery(""), e.setFilterActive(!1)) : (e.setFilterActive(!0), E(() => i?.focus()));
   }, h = () => {
     e.setFilterQuery(""), i?.focus();
-  }, w = (d) => {
+  }, x = (d) => {
     d.key === "Escape" && (e.setFilterQuery(""), e.setFilterActive(!1));
   }, I = () => {
     e.filterQuery().trim() || e.setFilterActive(!1);
@@ -40,40 +40,40 @@ function se(r) {
   return R(() => {
     r.filterInputRef && i && r.filterInputRef(i);
   }), (() => {
-    var d = Z(), x = d.firstChild, m = x.nextSibling, p = m.nextSibling, y = p.nextSibling, $ = y.nextSibling;
-    return M(x, "click", e.toggleSidebar, !0), n(x, l(W, {
+    var d = X(), m = d.firstChild, b = m.nextSibling, p = b.nextSibling, k = p.nextSibling, $ = k.nextSibling;
+    return M(m, "click", e.toggleSidebar, !0), n(m, l(W, {
       class: "w-4 h-4"
-    })), M(m, "click", e.navigateUp, !0), n(m, l(O, {
+    })), M(b, "click", e.navigateUp, !0), n(b, l(O, {
       class: "w-4 h-4"
-    })), n(p, l(T, {})), n(y, l(k, {
+    })), n(p, l(T, {})), n(k, l(y, {
       get when() {
         return e.isFilterActive();
       },
       get fallback() {
         return (() => {
-          var t = q();
-          return t.$$click = b, n(t, l(j, {
+          var t = Z();
+          return t.$$click = w, n(t, l(j, {
             class: "w-4 h-4"
-          })), s(() => f(t, v("flex items-center justify-center w-7 h-7 rounded cursor-pointer", "transition-colors duration-100", "hover:bg-muted/70", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"))), t;
+          })), s(() => f(t, v("flex items-center justify-center w-7 h-7 rounded-xs cursor-pointer", "transition-colors duration-[var(--floe-duration-fast)]", "hover:bg-[var(--floe-state-press)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"))), t;
         })();
       },
       get children() {
-        var t = K(), u = t.firstChild;
+        var t = H(), c = t.firstChild;
         return n(t, l(j, {
-          class: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0"
-        }), u), u.addEventListener("blur", I), u.$$keydown = w, u.$$input = (o) => e.setFilterQuery(o.currentTarget.value), S((o) => {
+          class: "w-3.5 h-3.5 text-[var(--floe-ink-soft)] flex-shrink-0"
+        }), c), c.addEventListener("blur", I), c.$$keydown = x, c.$$input = (o) => e.setFilterQuery(o.currentTarget.value), S((o) => {
           i = o, r.filterInputRef && r.filterInputRef(o);
-        }, u), n(t, l(k, {
+        }, c), n(t, l(y, {
           get when() {
             return e.filterQuery();
           },
           get children() {
-            var o = H();
+            var o = D();
             return o.$$click = h, n(o, l(Y, {
               class: "w-3 h-3"
-            })), s(() => f(o, v("flex items-center justify-center w-4 h-4 rounded-sm cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-100"))), o;
+            })), s(() => f(o, v("flex items-center justify-center w-4 h-4 rounded-sm cursor-pointer", "text-[var(--floe-ink-soft)] hover:text-foreground", "transition-colors duration-[var(--floe-duration-fast)]"))), o;
           }
-        }), null), s(() => f(u, v("flex-1 min-w-0 bg-transparent text-xs", "outline-none border-0 ring-0 shadow-none appearance-none", "focus:outline-none focus:ring-0", "placeholder:text-muted-foreground/60"))), s(() => u.value = e.filterQuery()), t;
+        }), null), s(() => f(c, v("flex-1 min-w-0 bg-transparent text-xs", "outline-none border-0 ring-0 shadow-none appearance-none", "focus:outline-none focus:ring-0", "placeholder:text-[var(--floe-ink-quiet)]"))), s(() => c.value = e.filterQuery()), t;
       }
     })), n($, l(B, {
       mode: "list",
@@ -91,17 +91,17 @@ function se(r) {
       onClick: () => e.setViewMode("grid"),
       icon: V,
       label: "Grid view"
-    }), null), n(d, l(k, {
+    }), null), n(d, l(y, {
       get when() {
         return r.endActions;
       },
       get children() {
-        var t = X();
+        var t = K();
         return n(t, () => r.endActions), t;
       }
     }), null), s((t) => {
-      var u = v("flex items-center gap-2 px-2 py-1.5 border-b border-border", "bg-background/50 backdrop-blur-sm", r.class), o = v("md:hidden flex items-center justify-center w-7 h-7 rounded cursor-pointer", "transition-colors duration-100", "hover:bg-muted/70", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !e.sidebarCollapsed() && "bg-muted/50"), F = !c(), _ = v("flex items-center justify-center w-7 h-7 rounded cursor-pointer", "transition-colors duration-100", "hover:bg-muted/70", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent"), A = v("flex-1 min-w-0 overflow-hidden transition-all duration-200", e.isFilterActive() && "hidden sm:block sm:flex-1"), C = v("flex items-center gap-1 transition-all duration-200 ease-out", e.isFilterActive() ? "flex-1 sm:flex-none sm:w-48" : "w-7");
-      return u !== t.e && f(d, t.e = u), o !== t.t && f(x, t.t = o), F !== t.a && (m.disabled = t.a = F), _ !== t.o && f(m, t.o = _), A !== t.i && f(p, t.i = A), C !== t.n && f(y, t.n = C), t;
+      var c = v("flex items-center gap-2 px-2 py-1.5 border-b border-[var(--floe-line)]", "bg-background/50 backdrop-blur-sm", r.class), o = v("md:hidden flex items-center justify-center w-7 h-7 rounded-xs cursor-pointer", "transition-colors duration-[var(--floe-duration-fast)]", "hover:bg-[var(--floe-state-press)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", !e.sidebarCollapsed() && "bg-[var(--floe-well)]"), F = !u(), _ = v("flex items-center justify-center w-7 h-7 rounded-xs cursor-pointer", "transition-colors duration-[var(--floe-duration-fast)]", "hover:bg-[var(--floe-state-press)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent"), A = v("flex-1 min-w-0 overflow-hidden transition-colors duration-[var(--floe-duration-base)]", e.isFilterActive() && "hidden sm:block sm:flex-1"), C = v("flex items-center gap-1 transition-colors duration-[var(--floe-duration-base)] ease-out", e.isFilterActive() ? "flex-1 sm:flex-none sm:w-48" : "w-7");
+      return c !== t.e && f(d, t.e = c), o !== t.t && f(m, t.t = o), F !== t.a && (b.disabled = t.a = F), _ !== t.o && f(b, t.o = _), A !== t.i && f(p, t.i = A), C !== t.n && f(k, t.n = C), t;
     }, {
       e: void 0,
       t: void 0,
@@ -118,9 +118,9 @@ function B(r) {
     var i = z();
     return i.$$click = () => r.onClick(), n(i, l(r.icon, {
       class: "w-3.5 h-3.5"
-    })), s((c) => {
-      var b = v("flex items-center justify-center w-6 h-6 rounded cursor-pointer", "transition-all duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e() ? "bg-background shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"), h = r.label, w = e();
-      return b !== c.e && f(i, c.e = b), h !== c.t && g(i, "aria-label", c.t = h), w !== c.a && g(i, "aria-pressed", c.a = w), c;
+    })), s((u) => {
+      var w = v("flex items-center justify-center w-6 h-6 rounded-sm cursor-pointer", "transition-colors duration-[var(--floe-duration-fast)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e() ? "bg-background shadow-[var(--floe-elevation-raised)] text-foreground" : "text-[var(--floe-ink-soft)] hover:text-foreground"), h = r.label, x = e();
+      return w !== u.e && f(i, u.e = w), h !== u.t && g(i, "aria-label", u.t = h), x !== u.a && g(i, "aria-pressed", u.a = x), u;
     }, {
       e: void 0,
       t: void 0,