@floegence/floe-webapp-core 0.35.4 → 0.35.6

package/dist/components/file-browser/FileBrowser.d.ts

@@ -32,6 +32,8 @@ export interface FileBrowserProps {
     header?: JSX.Element;
     /** Actions rendered on the right side of the Explorer sidebar header */
     sidebarHeaderActions?: JSX.Element;
+    /** Actions rendered at the end of the main file browser toolbar */
+    toolbarEndActions?: JSX.Element;
     /** Sidebar width in pixels */
     sidebarWidth?: number;
     /** Persisted sidebar width storage key (defaults to a shared user preference key) */

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

@@ -1,8 +1,8 @@
-import { createComponent as n, insert as i, use as P, memo as _, effect as k, className as z, template as w, delegateEvents as W } from "solid-js/web";
-import { onMount as A, onCleanup as K, createEffect as L, Show as u } from "solid-js";
-import { cn as B } from "../../utils/cn.js";
-import { useLayout as O } from "../../context/LayoutContext.js";
-import { useFileBrowserDrag as E } from "../../context/FileBrowserDragContext.js";
+import { createComponent as n, insert as i, use as F, memo as P, effect as _, className as k, template as w, delegateEvents as z } from "solid-js/web";
+import { onMount as W, onCleanup as E, createEffect as K, Show as u } from "solid-js";
+import { cn as L } from "../../utils/cn.js";
+import { useLayout as B } from "../../context/LayoutContext.js";
+import { useFileBrowserDrag as O } from "../../context/FileBrowserDragContext.js";
 import { deferAfterPaint as V } from "../../utils/defer.js";
 import { FileBrowserProvider as H, useFileBrowser as N } from "./FileBrowserContext.js";
 import { SidebarPane as T } from "../layout/SidebarPane.js";
@@ -13,7 +13,7 @@ import { FileBrowserToolbar as q } from "./FileBrowserToolbar.js";
 import { FileContextMenu as J } from "./FileContextMenu.js";
 import { DragPreview as U } from "./DragPreview.js";
 var X = /* @__PURE__ */ w('<div class="border-b border-border">'), Y = /* @__PURE__ */ w('<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"></div><div class="flex items-center justify-between px-3 py-1 border-t border-border text-[10px] text-muted-foreground"><span> items</span><span class="truncate max-w-[200px]">');
-function me(e) {
+function be(e) {
   return n(H, {
     get files() {
       return e.files;
@@ -65,6 +65,9 @@ function me(e) {
         get sidebarHeaderActions() {
           return e.sidebarHeaderActions;
         },
+        get toolbarEndActions() {
+          return e.toolbarEndActions;
+        },
         get sidebarResizable() {
           return e.sidebarResizable;
         },
@@ -97,12 +100,12 @@ function me(e) {
   });
 }
 function Z(e) {
-  const t = N(), I = O(), o = E(), f = () => I.isMobile(), M = () => t.sidebarWidth(), S = () => e.sidebarResizable ?? !0, a = () => (e.enableDragDrop ?? !0) && !!o, s = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
+  const t = N(), I = B(), o = O(), f = () => I.isMobile(), M = () => t.sidebarWidth(), S = () => e.sidebarResizable ?? !0, a = () => (e.enableDragDrop ?? !0) && !!o, d = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
   let h, C = null, x = null;
-  A(() => {
+  W(() => {
     if (!o || !a()) return;
     const r = {
-      instanceId: s(),
+      instanceId: d(),
       currentPath: t.currentPath,
       files: t.files,
       onDragMove: e.onDragMove,
@@ -112,11 +115,11 @@ function Z(e) {
       optimisticInsert: t.optimisticInsert
     };
     o.registerInstance(r);
-  }), K(() => {
-    o && a() && o.unregisterInstance(s());
+  }), E(() => {
+    o && a() && o.unregisterInstance(d());
   });
   let v = !1, g = !1;
-  L(() => {
+  K(() => {
     const r = f();
     if (!v) {
       v = !0, g = r, r && e.hideSidebarOnMobile !== !1 && !t.sidebarCollapsed() && t.toggleSidebar();
@@ -128,7 +131,7 @@ function Z(e) {
     (r.metaKey || r.ctrlKey) && r.key.toLowerCase() === "f" && (r.preventDefault(), t.setFilterActive(!0), V(() => h?.focus()));
   }, y = () => !t.sidebarCollapsed() || !f();
   return (() => {
-    var r = Y(), m = r.firstChild, b = m.firstChild, c = b.firstChild, R = c.nextSibling, d = R.firstChild, $ = d.firstChild, F = d.nextSibling;
+    var r = Y(), b = r.firstChild, m = b.firstChild, c = m.firstChild, R = c.nextSibling, s = R.firstChild, $ = s.firstChild, A = s.nextSibling;
     return r.$$keydown = D, i(r, n(u, {
       get when() {
         return e.header;
@@ -137,7 +140,7 @@ function Z(e) {
         var l = X();
         return i(l, () => e.header), l;
       }
-    }), m), i(m, n(T, {
+    }), b), i(b, n(T, {
       title: "Explorer",
       get width() {
         return M();
@@ -164,16 +167,19 @@ function Z(e) {
       get children() {
         return n(j, {
           get instanceId() {
-            return s();
+            return d();
           },
           get enableDragDrop() {
             return a();
           }
         });
       }
-    }), b), i(b, n(q, {
-      filterInputRef: (l) => h = l
-    }), c), P((l) => {
+    }), m), i(m, n(q, {
+      filterInputRef: (l) => h = l,
+      get endActions() {
+        return e.toolbarEndActions;
+      }
+    }), c), F((l) => {
       C = l;
     }, c), i(c, n(u, {
       get when() {
@@ -182,7 +188,7 @@ function Z(e) {
       get fallback() {
         return n(Q, {
           get instanceId() {
-            return s();
+            return d();
           },
           get enableDragDrop() {
             return a();
@@ -192,28 +198,28 @@ function Z(e) {
       get children() {
         return n(G, {
           get instanceId() {
-            return s();
+            return d();
           },
           get enableDragDrop() {
             return a();
           }
         });
       }
-    })), i(d, () => t.currentFiles().length, $), i(d, n(u, {
+    })), i(s, () => t.currentFiles().length, $), i(s, n(u, {
       get when() {
         return t.filterQueryApplied().trim();
       },
       get children() {
         return [" ", "(filtered)"];
       }
-    }), null), i(d, n(u, {
+    }), null), i(s, n(u, {
       get when() {
         return t.selectedItems().size > 0;
       },
       get children() {
-        return [" · ", _(() => t.selectedItems().size), " selected"];
+        return [" · ", P(() => t.selectedItems().size), " selected"];
       }
-    }), null), i(F, () => t.currentPath()), i(r, n(J, {
+    }), null), i(A, () => t.currentPath()), i(r, n(J, {
       get callbacks() {
         return e.contextMenuCallbacks;
       },
@@ -233,10 +239,10 @@ function Z(e) {
       get children() {
         return n(U, {});
       }
-    }), null), k(() => z(r, B("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class))), r;
+    }), null), _(() => k(r, L("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class))), r;
   })();
 }
-W(["keydown"]);
+z(["keydown"]);
 export {
-  me as FileBrowser
+  be as FileBrowser
 };

package/dist/components/file-browser/FileBrowserToolbar.d.ts

@@ -3,6 +3,8 @@ export interface FileBrowserToolbarProps {
     class?: string;
     /** Reference to focus the filter input */
     filterInputRef?: (el: HTMLInputElement) => void;
+    /** Actions rendered at the end of the toolbar */
+    endActions?: JSX.Element;
 }
 /**
  * Toolbar with navigation, breadcrumb, filter, and view mode toggle

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

@@ -1,89 +1,89 @@
-import { addEventListener as A, insert as o, createComponent as l, use as S, effect as s, className as d, template as u, setAttribute as g, delegateEvents as Q } from "solid-js/web";
-import { onMount as R, Show as M } from "solid-js";
-import { cn as f } from "../../utils/cn.js";
+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 { 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__ */ u('<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__ */ u('<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__ */ u('<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__ */ u('<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__ */ u('<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__ */ u('<button type=button aria-label="Clear filter">'), K = /* @__PURE__ */ u('<div class="flex items-center flex-1 gap-1 px-2 py-1 bg-muted/50 rounded-md border border-border/50 focus-within:border-ring focus-within:ring-1 focus-within:ring-ring"><input type=text placeholder=Filter... aria-label="Filter files by name">'), X = /* @__PURE__ */ u('<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">'), Z = /* @__PURE__ */ u('<button type=button aria-label="Filter files">'), q = /* @__PURE__ */ u("<button type=button>");
-const z = (r) => (() => {
+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 class="flex items-center flex-1 gap-1 px-2 py-1 bg-muted/50 rounded-md border border-border/50 focus-within:border-ring focus-within:ring-1 focus-within:ring-ring"><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>");
+const J = (r) => (() => {
   var e = N();
   return s(() => g(e, "class", r.class)), e;
-})(), J = (r) => (() => {
+})(), O = (r) => (() => {
   var e = U();
   return s(() => g(e, "class", r.class)), e;
-})(), O = (r) => (() => {
+})(), W = (r) => (() => {
   var e = G();
   return s(() => g(e, "class", r.class)), e;
 })(), j = (r) => (() => {
   var e = P();
   return s(() => g(e, "class", r.class)), e;
-})(), W = (r) => (() => {
+})(), Y = (r) => (() => {
   var e = D();
   return s(() => g(e, "class", r.class)), e;
 })();
-function le(r) {
+function se(r) {
   const e = L();
-  let n;
+  let i;
   const c = () => {
-    const v = e.currentPath();
-    return v !== "/" && v !== "";
-  }, m = () => {
-    e.isFilterActive() ? (e.setFilterQuery(""), e.setFilterActive(!1)) : (e.setFilterActive(!0), E(() => n?.focus()));
-  }, w = () => {
-    e.setFilterQuery(""), n?.focus();
-  }, h = (v) => {
-    v.key === "Escape" && (e.setFilterQuery(""), e.setFilterActive(!1));
+    const d = e.currentPath();
+    return d !== "/" && d !== "";
+  }, b = () => {
+    e.isFilterActive() ? (e.setFilterQuery(""), e.setFilterActive(!1)) : (e.setFilterActive(!0), E(() => i?.focus()));
+  }, h = () => {
+    e.setFilterQuery(""), i?.focus();
+  }, w = (d) => {
+    d.key === "Escape" && (e.setFilterQuery(""), e.setFilterActive(!1));
   }, I = () => {
     e.filterQuery().trim() || e.setFilterActive(!1);
   };
   return R(() => {
-    r.filterInputRef && n && r.filterInputRef(n);
+    r.filterInputRef && i && r.filterInputRef(i);
   }), (() => {
-    var v = X(), x = v.firstChild, b = x.nextSibling, p = b.nextSibling, y = p.nextSibling, k = y.nextSibling;
-    return A(x, "click", e.toggleSidebar, !0), o(x, l(O, {
+    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, {
       class: "w-4 h-4"
-    })), A(b, "click", e.navigateUp, !0), o(b, l(J, {
+    })), M(m, "click", e.navigateUp, !0), n(m, l(O, {
       class: "w-4 h-4"
-    })), o(p, l(T, {})), o(y, l(M, {
+    })), n(p, l(T, {})), n(y, l(k, {
       get when() {
         return e.isFilterActive();
       },
       get fallback() {
         return (() => {
-          var t = Z();
-          return t.$$click = m, o(t, l(j, {
+          var t = q();
+          return t.$$click = b, n(t, l(j, {
             class: "w-4 h-4"
-          })), s(() => d(t, f("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 cursor-pointer", "transition-colors duration-100", "hover:bg-muted/70", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"))), t;
         })();
       },
       get children() {
-        var t = K(), a = t.firstChild;
-        return o(t, l(j, {
+        var t = K(), u = t.firstChild;
+        return n(t, l(j, {
           class: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0"
-        }), a), a.addEventListener("blur", I), a.$$keydown = h, a.$$input = (i) => e.setFilterQuery(i.currentTarget.value), S((i) => {
-          n = i, r.filterInputRef && r.filterInputRef(i);
-        }, a), o(t, l(M, {
+        }), u), u.addEventListener("blur", I), u.$$keydown = w, u.$$input = (o) => e.setFilterQuery(o.currentTarget.value), S((o) => {
+          i = o, r.filterInputRef && r.filterInputRef(o);
+        }, u), n(t, l(k, {
           get when() {
             return e.filterQuery();
           },
           get children() {
-            var i = H();
-            return i.$$click = w, o(i, l(W, {
+            var o = H();
+            return o.$$click = h, n(o, l(Y, {
               class: "w-3 h-3"
-            })), s(() => d(i, f("flex items-center justify-center w-4 h-4 rounded-sm cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-100"))), i;
+            })), 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;
           }
-        }), null), s(() => d(a, f("flex-1 min-w-0 bg-transparent text-xs", "outline-none border-0 ring-0 shadow-none appearance-none", "focus:outline-none focus:border-0 focus:ring-0", "placeholder:text-muted-foreground/60"))), s(() => a.value = e.filterQuery()), t;
+        }), 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:border-0 focus:ring-0", "placeholder:text-muted-foreground/60"))), s(() => u.value = e.filterQuery()), t;
       }
-    })), o(k, l(B, {
+    })), n($, l(B, {
       mode: "list",
       get currentMode() {
         return e.viewMode();
       },
       onClick: () => e.setViewMode("list"),
-      icon: z,
+      icon: J,
       label: "List view"
-    }), null), o(k, l(B, {
+    }), null), n($, l(B, {
       mode: "grid",
       get currentMode() {
         return e.viewMode();
@@ -91,9 +91,17 @@ function le(r) {
       onClick: () => e.setViewMode("grid"),
       icon: V,
       label: "Grid view"
+    }), null), n(d, l(k, {
+      get when() {
+        return r.endActions;
+      },
+      get children() {
+        var t = X();
+        return n(t, () => r.endActions), t;
+      }
     }), null), s((t) => {
-      var a = f("flex items-center gap-2 px-2 py-1.5 border-b border-border", "bg-background/50 backdrop-blur-sm", r.class), i = f("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"), $ = !c(), F = f("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"), _ = f("flex-1 min-w-0 overflow-hidden transition-all duration-200", e.isFilterActive() && "hidden sm:block sm:flex-1"), C = f("flex items-center gap-1 transition-all duration-200 ease-out", e.isFilterActive() ? "flex-1 sm:flex-none sm:w-48" : "w-7");
-      return a !== t.e && d(v, t.e = a), i !== t.t && d(x, t.t = i), $ !== t.a && (b.disabled = t.a = $), F !== t.o && d(b, t.o = F), _ !== t.i && d(p, t.i = _), C !== t.n && d(y, t.n = C), 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;
     }, {
       e: void 0,
       t: void 0,
@@ -101,26 +109,26 @@ function le(r) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), v;
+    }), d;
   })();
 }
 function B(r) {
   const e = () => r.currentMode === r.mode;
   return (() => {
-    var n = q();
-    return n.$$click = () => r.onClick(), o(n, l(r.icon, {
+    var i = z();
+    return i.$$click = () => r.onClick(), n(i, l(r.icon, {
       class: "w-3.5 h-3.5"
     })), s((c) => {
-      var m = f("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"), w = r.label, h = e();
-      return m !== c.e && d(n, c.e = m), w !== c.t && g(n, "aria-label", c.t = w), h !== c.a && g(n, "aria-pressed", c.a = h), 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;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), n;
+    }), i;
   })();
 }
 Q(["click", "input", "keydown"]);
 export {
-  le as FileBrowserToolbar
+  se as FileBrowserToolbar
 };

package/dist/components/file-browser/FileContextMenu.d.ts

@@ -28,6 +28,8 @@ export interface FileContextMenuProps {
      */
     hideItems?: HideItemsValue;
 }
+export declare function createDefaultContextMenuItems(callbacks?: ContextMenuCallbacks): ContextMenuItem[];
+export declare function dispatchContextMenuAction(item: ContextMenuItem, items: FileItem[], callbacks?: ContextMenuCallbacks): void;
 /**
  * Context menu for file browser items
  */

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

@@ -1,145 +1,161 @@
-import { createComponent as d, Portal as E, insert as m, Dynamic as L, effect as u, className as M, setStyleProperty as C, template as l, setAttribute as p, use as P, delegateEvents as F } from "solid-js/web";
-import { createSignal as H, createEffect as $, onCleanup as S, Show as v, For as R } from "solid-js";
+import { createComponent as u, Portal as D, insert as v, Dynamic as E, effect as h, className as C, setStyleProperty as M, template as c, setAttribute as p, use as L, delegateEvents as P } from "solid-js/web";
+import { createSignal as H, createEffect as $, onCleanup as F, Show as m, For as N } from "solid-js";
 import { cn as I } from "../../utils/cn.js";
-import { deferAfterPaint as T } from "../../utils/defer.js";
+import { deferAfterPaint as S } from "../../utils/defer.js";
 import { useFileBrowser as V } from "./FileBrowserContext.js";
-var Z = /* @__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><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">'), z = /* @__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><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">'), W = /* @__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><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">'), q = /* @__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><path d="M12 3v18"></path><path d="m8 7-4 4 4 4"></path><path d="m16 7 4 4-4 4">'), 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><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">'), N = /* @__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><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">'), O = /* @__PURE__ */ l("<div role=menu aria-orientation=vertical>"), G = /* @__PURE__ */ l('<span class="text-[10px] text-muted-foreground opacity-60">'), J = /* @__PURE__ */ l('<button type=button role=menuitem><span class="flex-1 text-left">'), Q = /* @__PURE__ */ l('<div class="my-1 h-px bg-border">');
-const U = (s) => (() => {
-  var n = Z();
-  return u(() => p(n, "class", s.class)), n;
-})(), X = (s) => (() => {
-  var n = z();
-  return u(() => p(n, "class", s.class)), n;
-})(), Y = (s) => (() => {
-  var n = W();
-  return u(() => p(n, "class", s.class)), n;
-})(), ee = (s) => (() => {
-  var n = q();
-  return u(() => p(n, "class", s.class)), n;
-})(), te = (s) => (() => {
-  var n = K();
-  return u(() => p(n, "class", s.class)), n;
-})(), ne = (s) => (() => {
-  var n = N();
-  return u(() => p(n, "class", s.class)), n;
+var R = /* @__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">'), T = /* @__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">'), Z = /* @__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">'), z = /* @__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">'), W = /* @__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">'), q = /* @__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">'), K = /* @__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">'), O = /* @__PURE__ */ c("<div role=menu aria-orientation=vertical>"), G = /* @__PURE__ */ c('<span class="text-[10px] text-muted-foreground opacity-60">'), J = /* @__PURE__ */ c('<button type=button role=menuitem><span class="flex-1 text-left">'), Q = /* @__PURE__ */ c('<div class="my-1 h-px bg-border">');
+const U = (n) => (() => {
+  var e = R();
+  return h(() => p(e, "class", n.class)), e;
+})(), X = (n) => (() => {
+  var e = T();
+  return h(() => p(e, "class", n.class)), e;
+})(), Y = (n) => (() => {
+  var e = Z();
+  return h(() => p(e, "class", n.class)), e;
+})(), ee = (n) => (() => {
+  var e = z();
+  return h(() => p(e, "class", n.class)), e;
+})(), te = (n) => (() => {
+  var e = W();
+  return h(() => p(e, "class", n.class)), e;
+})(), ne = (n) => (() => {
+  var e = q();
+  return h(() => p(e, "class", n.class)), e;
+})(), oe = (n) => (() => {
+  var e = K();
+  return h(() => p(e, "class", n.class)), e;
 })();
-function ce(s) {
-  const n = V();
-  let h;
+function re(n) {
+  const e = !!n?.onAskAgent, a = !!n?.onCopyName;
+  return [{
+    id: "duplicate",
+    label: "Duplicate",
+    type: "duplicate",
+    icon: U,
+    shortcut: "Cmd+D",
+    separator: !a && !e
+  }, ...a ? [{
+    id: "copy-name",
+    label: "Copy Name",
+    type: "copy-name",
+    icon: X,
+    separator: !e
+  }] : [], ...e ? [{
+    id: "ask-agent",
+    label: "Ask Agent",
+    type: "ask-agent",
+    icon: Y,
+    separator: !0
+  }] : [], {
+    id: "copy-to",
+    label: "Copy to...",
+    type: "copy-to",
+    icon: ee
+  }, {
+    id: "move-to",
+    label: "Move to...",
+    type: "move-to",
+    icon: te,
+    separator: !0
+  }, {
+    id: "rename",
+    label: "Rename",
+    type: "rename",
+    icon: oe,
+    shortcut: "Enter"
+  }, {
+    id: "delete",
+    label: "Delete",
+    type: "delete",
+    icon: ne,
+    shortcut: "Del"
+  }];
+}
+function ae(n, e, a) {
+  switch (n.type) {
+    case "duplicate":
+      a?.onDuplicate?.(e);
+      break;
+    case "copy-name":
+      a?.onCopyName?.(e);
+      break;
+    case "ask-agent":
+      a?.onAskAgent?.(e);
+      break;
+    case "copy-to":
+      a?.onCopyTo?.(e);
+      break;
+    case "move-to":
+      a?.onMoveTo?.(e);
+      break;
+    case "delete":
+      a?.onDelete?.(e);
+      break;
+    case "rename":
+      e.length === 1 && a?.onRename?.(e[0]);
+      break;
+    case "custom":
+      n.onAction?.(e);
+      break;
+  }
+}
+function ue(n) {
+  const e = V();
+  let a;
   const _ = typeof window > "u" || typeof document > "u", [g, w] = H({
     x: -9999,
     y: -9999
   }), A = () => {
-    const t = !!s.callbacks?.onAskAgent;
-    return [{
-      id: "duplicate",
-      label: "Duplicate",
-      type: "duplicate",
-      icon: U,
-      shortcut: "Cmd+D",
-      separator: !t
-    }, ...t ? [{
-      id: "ask-agent",
-      label: "Ask Agent",
-      type: "ask-agent",
-      icon: X,
-      separator: !0
-    }] : [], {
-      id: "copy-to",
-      label: "Copy to...",
-      type: "copy-to",
-      icon: Y
-    }, {
-      id: "move-to",
-      label: "Move to...",
-      type: "move-to",
-      icon: ee,
-      separator: !0
-    }, {
-      id: "rename",
-      label: "Rename",
-      type: "rename",
-      icon: ne,
-      shortcut: "Enter"
-    }, {
-      id: "delete",
-      label: "Delete",
-      type: "delete",
-      icon: te,
-      shortcut: "Del"
-    }];
-  }, j = () => {
-    if (s.overrideItems)
-      return s.overrideItems;
-    const t = () => {
-      const e = s.hideItems;
-      if (!e) return [];
-      if (typeof e == "function") {
-        const r = n.contextMenu()?.items ?? [];
-        return e(r);
+    if (n.overrideItems)
+      return n.overrideItems;
+    const r = () => {
+      const t = n.hideItems;
+      if (!t) return [];
+      if (typeof t == "function") {
+        const s = e.contextMenu()?.items ?? [];
+        return t(s);
       }
-      return e;
+      return t;
     };
-    let o = A();
-    const c = t();
-    return c.length > 0 && (o = o.filter((e) => !c.includes(e.type))), s.customItems?.length && (o = [...o, ...s.customItems]), o;
-  }, B = (t, o) => {
-    n.hideContextMenu();
-    const c = t.type, e = [...o], r = s.callbacks, i = t.onAction;
-    T(() => {
-      switch (c) {
-        case "duplicate":
-          r?.onDuplicate?.(e);
-          break;
-        case "ask-agent":
-          r?.onAskAgent?.(e);
-          break;
-        case "copy-to":
-          r?.onCopyTo?.(e);
-          break;
-        case "move-to":
-          r?.onMoveTo?.(e);
-          break;
-        case "delete":
-          r?.onDelete?.(e);
-          break;
-        case "rename":
-          e.length === 1 && r?.onRename?.(e[0]);
-          break;
-        case "custom":
-          i?.(e);
-          break;
-      }
+    let o = re(n.callbacks);
+    const l = r();
+    return l.length > 0 && (o = o.filter((t) => !l.includes(t.type))), n.customItems?.length && (o = [...o, ...n.customItems]), o;
+  }, j = (r, o) => {
+    e.hideContextMenu();
+    const l = [...o], t = n.callbacks;
+    S(() => {
+      ae(r, l, t);
     });
-  }, f = (t) => {
-    h && !h.contains(t.target) && n.hideContextMenu();
-  }, x = (t) => {
-    t.key === "Escape" && n.hideContextMenu();
+  }, f = (r) => {
+    a && !a.contains(r.target) && e.hideContextMenu();
+  }, x = (r) => {
+    r.key === "Escape" && e.hideContextMenu();
   };
   $(() => {
-    n.contextMenu() && (document.addEventListener("click", f), document.addEventListener("keydown", x), S(() => {
+    e.contextMenu() && (document.addEventListener("click", f), document.addEventListener("keydown", x), F(() => {
       document.removeEventListener("click", f), document.removeEventListener("keydown", x);
     }));
   });
-  const D = () => {
-    const t = n.contextMenu();
-    if (!t || !h) return {
-      x: t?.x ?? 0,
-      y: t?.y ?? 0
+  const B = () => {
+    const r = e.contextMenu();
+    if (!r || !a) return {
+      x: r?.x ?? 0,
+      y: r?.y ?? 0
     };
-    const o = h.getBoundingClientRect(), c = window.innerWidth, e = window.innerHeight;
-    let r = t.x, i = t.y;
+    const o = a.getBoundingClientRect(), l = window.innerWidth, t = window.innerHeight;
+    let s = r.x, d = r.y;
     return o.width === 0 || o.height === 0 ? {
-      x: r,
-      y: i
-    } : (r + o.width > c && (r = c - o.width - 8), i + o.height > e && (i = e - o.height - 8), {
-      x: Math.max(8, r),
-      y: Math.max(8, i)
+      x: s,
+      y: d
+    } : (s + o.width > l && (s = l - o.width - 8), d + o.height > t && (d = t - o.height - 8), {
+      x: Math.max(8, s),
+      y: Math.max(8, d)
     });
   };
   $(() => {
-    const t = n.contextMenu();
-    if (!t) {
+    const r = e.contextMenu();
+    if (!r) {
       w({
         x: -9999,
         y: -9999
@@ -147,79 +163,81 @@ function ce(s) {
       return;
     }
     w({
-      x: t.x,
-      y: t.y
+      x: r.x,
+      y: r.y
     }), requestAnimationFrame(() => {
-      const o = D();
+      const o = B();
       w(o);
     });
   });
-  const k = (t) => (() => {
-    var o = O(), c = h;
-    return typeof c == "function" ? P(c, o) : h = o, m(o, d(R, {
+  const y = (r) => (() => {
+    var o = O(), l = a;
+    return typeof l == "function" ? L(l, o) : a = o, v(o, u(N, {
       get each() {
-        return j();
+        return A();
       },
-      children: (e) => [(() => {
-        var r = J(), i = r.firstChild;
-        return r.$$click = () => B(e, t.menu().items), m(r, d(v, {
+      children: (t) => [(() => {
+        var s = J(), d = s.firstChild;
+        return s.$$click = () => j(t, r.menu().items), v(s, u(m, {
           get when() {
-            return e.icon;
+            return t.icon;
           },
-          children: (a) => d(L, {
+          children: (i) => u(E, {
             get component() {
-              return a();
+              return i();
             },
             class: "w-3.5 h-3.5 opacity-60"
           })
-        }), i), m(i, () => e.label), m(r, d(v, {
+        }), d), v(d, () => t.label), v(s, u(m, {
           get when() {
-            return e.shortcut;
+            return t.shortcut;
           },
           get children() {
-            var a = G();
-            return m(a, () => e.shortcut), a;
+            var i = G();
+            return v(i, () => t.shortcut), i;
           }
-        }), null), u((a) => {
-          var y = e.disabled || e.type === "rename" && t.menu().items.length > 1, b = I("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.type === "delete" && "text-error hover:bg-error/10 hover:text-error");
-          return y !== a.e && (r.disabled = a.e = y), b !== a.t && M(r, a.t = b), a;
+        }), null), h((i) => {
+          var k = t.disabled || t.type === "rename" && r.menu().items.length > 1, b = I("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", t.type === "delete" && "text-error hover:bg-error/10 hover:text-error");
+          return k !== i.e && (s.disabled = i.e = k), b !== i.t && C(s, i.t = b), i;
         }, {
           e: void 0,
           t: void 0
-        }), r;
-      })(), d(v, {
+        }), s;
+      })(), u(m, {
         get when() {
-          return e.separator;
+          return t.separator;
         },
         get children() {
           return Q();
         }
       })]
-    })), u((e) => {
-      var r = I("fixed z-50 min-w-[180px] py-1", "bg-popover border border-border rounded-lg shadow-lg", "animate-in fade-in zoom-in-95 duration-100"), i = `${g().x}px`, a = `${g().y}px`;
-      return r !== e.e && M(o, e.e = r), i !== e.t && C(o, "left", e.t = i), a !== e.a && C(o, "top", e.a = a), e;
+    })), h((t) => {
+      var s = I("fixed z-50 min-w-[180px] py-1", "bg-popover border border-border rounded-lg shadow-lg", "animate-in fade-in zoom-in-95 duration-100"), d = `${g().x}px`, i = `${g().y}px`;
+      return s !== t.e && C(o, t.e = s), d !== t.t && M(o, "left", t.t = d), i !== t.a && M(o, "top", t.a = i), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     }), o;
   })();
-  return d(v, {
+  return u(m, {
     get when() {
-      return n.contextMenu();
+      return e.contextMenu();
     },
-    children: (t) => _ ? d(k, {
-      menu: t
-    }) : d(E, {
+    children: (r) => _ ? u(y, {
+      menu: r
+    }) : u(D, {
       get children() {
-        return d(k, {
-          menu: t
+        return u(y, {
+          menu: r
         });
       }
     })
   });
 }
-F(["click"]);
+P(["click"]);
 export {
-  ce as FileContextMenu
+  ue as FileContextMenu,
+  re as createDefaultContextMenuItems,
+  ae as dispatchContextMenuAction
 };

package/dist/components/file-browser/types.d.ts

@@ -38,7 +38,7 @@ export interface FileListColumnRatios {
 /**
  * Built-in context menu action types
  */
-export type ContextMenuActionType = 'duplicate' | 'ask-agent' | 'copy-to' | 'move-to' | 'delete' | 'rename' | 'custom';
+export type ContextMenuActionType = 'duplicate' | 'copy-name' | 'ask-agent' | 'copy-to' | 'move-to' | 'delete' | 'rename' | 'custom';
 /**
  * Context menu item definition
  */
@@ -78,6 +78,7 @@ export interface ContextMenuEvent {
  */
 export interface ContextMenuCallbacks {
     onDuplicate?: (items: FileItem[]) => void;
+    onCopyName?: (items: FileItem[]) => void;
     onAskAgent?: (items: FileItem[]) => void;
     onCopyTo?: (items: FileItem[]) => void;
     onMoveTo?: (items: FileItem[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.35.4",
+  "version": "0.35.6",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",