@floegence/floe-webapp-core 0.33.4 → 0.33.5

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

@@ -30,6 +30,8 @@ export interface FileBrowserProps {
     class?: string;
     /** Custom header content */
     header?: JSX.Element;
+    /** Actions rendered on the right side of the Explorer sidebar header */
+    sidebarHeaderActions?: 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,6 +1,6 @@
-import { createComponent as n, insert as l, addEventListener as P, use as L, memo as w, effect as T, className as W, setStyleProperty as B, template as m, delegateEvents as G } from "solid-js/web";
-import { onMount as H, onCleanup as Q, createEffect as q, Show as a } from "solid-js";
-import { cn as K } from "../../utils/cn.js";
+import { createComponent as i, insert as l, addEventListener as P, use as A, memo as C, effect as N, className as L, setStyleProperty as W, template as u, delegateEvents as T } from "solid-js/web";
+import { onMount as G, onCleanup as Q, createEffect as q, Show as a } from "solid-js";
+import { cn as B } from "../../utils/cn.js";
 import { useLayout as J } from "../../context/LayoutContext.js";
 import { useFileBrowserDrag as U } from "../../context/FileBrowserDragContext.js";
 import { deferAfterPaint as X } from "../../utils/defer.js";
@@ -9,12 +9,12 @@ import { ResizeHandle as p } from "../layout/ResizeHandle.js";
 import { DirectoryTree as ee } from "./DirectoryTree.js";
 import { FileListView as te } from "./FileListView.js";
 import { FileGridView as re } from "./FileGridView.js";
-import { FileBrowserToolbar as ie } from "./FileBrowserToolbar.js";
-import { FileContextMenu as ne } from "./FileContextMenu.js";
+import { FileBrowserToolbar as ne } from "./FileBrowserToolbar.js";
+import { FileContextMenu as ie } from "./FileContextMenu.js";
 import { DragPreview as le } from "./DragPreview.js";
-var ae = /* @__PURE__ */ m('<div class="border-b border-border">'), oe = /* @__PURE__ */ m('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors"aria-label="Close sidebar"><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 class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), se = /* @__PURE__ */ m('<div class="absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]">'), de = /* @__PURE__ */ m('<div><div class="flex flex-1 min-h-0 relative"><aside><div class="h-full flex flex-col"><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">Explorer</span></div><div class="flex-1 min-h-0 overflow-auto py-1"></div></div></aside><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 De(e) {
-  return n(Y, {
+var ae = /* @__PURE__ */ u('<div class="border-b border-border">'), oe = /* @__PURE__ */ u('<div class="min-w-0 flex items-center gap-1.5">'), se = /* @__PURE__ */ u('<button type=button class="flex items-center justify-center w-5 h-5 rounded cursor-pointer hover:bg-sidebar-accent/80 transition-colors"aria-label="Close sidebar"><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 class="w-3.5 h-3.5"><path d="M18 6 6 18"></path><path d="m6 6 12 12">'), de = /* @__PURE__ */ u('<div class="flex min-w-0 items-center gap-1.5">'), ue = /* @__PURE__ */ u('<div class="absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]">'), ce = /* @__PURE__ */ u('<div><div class="flex flex-1 min-h-0 relative"><aside><div class="h-full flex flex-col"><div class="flex items-center justify-between px-3 py-2 border-b border-sidebar-border"><span class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">Explorer</span></div><div class="flex-1 min-h-0 overflow-auto py-1"></div></div></aside><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 ke(e) {
+  return i(Y, {
     get files() {
       return e.files;
     },
@@ -55,13 +55,16 @@ function De(e) {
       return e.onOpen;
     },
     get children() {
-      return n(ue, {
+      return i(ge, {
         get class() {
           return e.class;
         },
         get header() {
           return e.header;
         },
+        get sidebarHeaderActions() {
+          return e.sidebarHeaderActions;
+        },
         get sidebarResizable() {
           return e.sidebarResizable;
         },
@@ -93,42 +96,42 @@ function De(e) {
     }
   });
 }
-function ue(e) {
-  const r = Z(), O = J(), d = U(), o = () => O.isMobile(), C = () => r.sidebarWidth(), E = () => e.sidebarResizable ?? !0, s = () => (e.enableDragDrop ?? !0) && !!d, u = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
-  let M, I = null, S = null;
-  H(() => {
-    if (!d || !s()) return;
-    const i = {
-      instanceId: u(),
+function ge(e) {
+  const r = Z(), K = J(), c = U(), s = () => K.isMobile(), M = () => r.sidebarWidth(), H = () => e.sidebarResizable ?? !0, d = () => (e.enableDragDrop ?? !0) && !!c, g = () => e.instanceId ?? `filebrowser-${Math.random().toString(36).slice(2, 9)}`;
+  let I, S = null, y = null;
+  G(() => {
+    if (!c || !d()) return;
+    const n = {
+      instanceId: g(),
       currentPath: r.currentPath,
       files: r.files,
       onDragMove: e.onDragMove,
-      getScrollContainer: () => I,
-      getSidebarScrollContainer: () => S,
+      getScrollContainer: () => S,
+      getSidebarScrollContainer: () => y,
       optimisticRemove: r.optimisticRemove,
       optimisticInsert: r.optimisticInsert
     };
-    d.registerInstance(i);
+    c.registerInstance(n);
   }), Q(() => {
-    d && s() && d.unregisterInstance(u());
+    c && d() && c.unregisterInstance(g());
   });
-  let y = !1, f = !1;
+  let $ = !1, f = !1;
   q(() => {
-    const i = o();
-    if (!y) {
-      y = !0, f = i, i && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar();
+    const n = s();
+    if (!$) {
+      $ = !0, f = n, n && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar();
       return;
     }
-    !f && i && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar(), f = i;
+    !f && n && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar(), f = n;
   });
-  const j = (i) => {
-    (i.metaKey || i.ctrlKey) && i.key.toLowerCase() === "f" && (i.preventDefault(), r.setFilterActive(!0), X(() => M?.focus()));
-  }, D = () => !r.sidebarCollapsed() || !o();
+  const O = (n) => {
+    (n.metaKey || n.ctrlKey) && n.key.toLowerCase() === "f" && (n.preventDefault(), r.setFilterActive(!0), X(() => I?.focus()));
+  }, D = () => !r.sidebarCollapsed() || !s();
   return (() => {
-    var i = de(), h = i.firstChild, c = h.firstChild, k = c.firstChild, v = k.firstChild;
-    v.firstChild;
-    var $ = v.nextSibling, x = c.nextSibling, b = x.firstChild, V = b.nextSibling, g = V.firstChild, A = g.firstChild, N = g.nextSibling;
-    return i.$$keydown = j, l(i, n(a, {
+    var n = ce(), v = n.firstChild, b = v.firstChild, k = b.firstChild, x = k.firstChild;
+    x.firstChild;
+    var _ = x.nextSibling, w = b.nextSibling, h = w.firstChild, E = h.nextSibling, m = E.firstChild, j = m.firstChild, V = m.nextSibling;
+    return n.$$keydown = O, l(n, i(a, {
       get when() {
         return e.header;
       },
@@ -136,86 +139,102 @@ function ue(e) {
         var t = ae();
         return l(t, () => e.header), t;
       }
-    }), h), l(v, n(a, {
+    }), v), l(x, i(a, {
       get when() {
-        return o();
+        return e.sidebarHeaderActions || s();
       },
       get children() {
-        var t = oe();
-        return P(t, "click", r.toggleSidebar, !0), t;
+        var t = de();
+        return l(t, i(a, {
+          get when() {
+            return e.sidebarHeaderActions;
+          },
+          get children() {
+            var o = oe();
+            return l(o, () => e.sidebarHeaderActions), o;
+          }
+        }), null), l(t, i(a, {
+          get when() {
+            return s();
+          },
+          get children() {
+            var o = se();
+            return P(o, "click", r.toggleSidebar, !0), o;
+          }
+        }), null), t;
       }
-    }), null), L((t) => {
-      S = t;
-    }, $), l($, n(ee, {
+    }), null), A((t) => {
+      y = t;
+    }, _), l(_, i(ee, {
       get instanceId() {
-        return u();
+        return g();
       },
       get enableDragDrop() {
-        return s();
+        return d();
       }
-    })), l(c, n(a, {
+    })), l(b, i(a, {
       get when() {
-        return w(() => !!(E() && D()))() && !o();
+        return C(() => !!(H() && D()))() && !s();
       },
       get children() {
-        return n(p, {
+        return i(p, {
           direction: "horizontal",
           onResize: (t) => {
             r.setSidebarWidth(r.sidebarWidth() + t);
           }
         });
       }
-    }), null), l(h, n(a, {
+    }), null), l(v, i(a, {
       get when() {
-        return w(() => !!o())() && !r.sidebarCollapsed();
+        return C(() => !!s())() && !r.sidebarCollapsed();
       },
       get children() {
-        var t = se();
+        var t = ue();
         return P(t, "click", r.toggleSidebar, !0), t;
       }
-    }), x), l(x, n(ie, {
-      filterInputRef: (t) => M = t
-    }), b), L((t) => {
-      I = t;
-    }, b), l(b, n(a, {
+    }), w), l(w, i(ne, {
+      filterInputRef: (t) => I = t
+    }), h), A((t) => {
+      S = t;
+    }, h), l(h, i(a, {
       get when() {
         return r.viewMode() === "list";
       },
       get fallback() {
-        return n(re, {
+        return i(re, {
           get instanceId() {
-            return u();
+            return g();
           },
           get enableDragDrop() {
-            return s();
+            return d();
           }
         });
       },
       get children() {
-        return n(te, {
+        return i(te, {
           get instanceId() {
-            return u();
+            return g();
           },
           get enableDragDrop() {
-            return s();
+            return d();
           }
         });
       }
-    })), l(g, () => r.currentFiles().length, A), l(g, n(a, {
+    })), l(m, () => r.currentFiles().length, j), l(m, i(a, {
       get when() {
         return r.filterQueryApplied().trim();
       },
       get children() {
         return [" ", "(filtered)"];
       }
-    }), null), l(g, n(a, {
+    }), null), l(m, i(a, {
       get when() {
         return r.selectedItems().size > 0;
       },
       get children() {
-        return [" · ", w(() => r.selectedItems().size), " selected"];
+        return [" · ", C(() => r.selectedItems().size), " selected"];
       }
-    }), null), l(N, () => r.currentPath()), l(i, n(ne, {
+    }), null), l(V, () => r.currentPath()), l(n, i(ie, {
       get callbacks() {
         return e.contextMenuCallbacks;
       },
@@ -228,31 +247,31 @@ function ue(e) {
       get hideItems() {
         return e.hideContextMenuItems;
       }
-    }), null), l(i, n(a, {
+    }), null), l(n, i(a, {
       get when() {
-        return s();
+        return d();
       },
       get children() {
-        return n(le, {});
+        return i(le, {});
       }
-    }), null), T((t) => {
-      var _ = K("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class), R = K(
+    }), null), N((t) => {
+      var o = B("flex flex-col h-full min-h-0 bg-background", "border border-border rounded-lg overflow-hidden", "shadow-sm", e.class), R = B(
         "flex-shrink-0 border-r border-border bg-sidebar relative",
         "transition-all duration-200 ease-out",
         "overflow-hidden",
         // Mobile overlay
-        o() && !r.sidebarCollapsed() && "absolute inset-y-0 left-0 z-10 shadow-lg"
-      ), z = D() ? `${C()}px` : "0px", F = `${C()}px`;
-      return _ !== t.e && W(i, t.e = _), R !== t.t && W(c, t.t = R), z !== t.a && B(c, "width", t.a = z), F !== t.o && B(k, "width", t.o = F), t;
+        s() && !r.sidebarCollapsed() && "absolute inset-y-0 left-0 z-10 shadow-lg"
+      ), z = D() ? `${M()}px` : "0px", F = `${M()}px`;
+      return o !== t.e && L(n, t.e = o), R !== t.t && L(b, t.t = R), z !== t.a && W(b, "width", t.a = z), F !== t.o && W(k, "width", t.o = F), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), i;
+    }), n;
   })();
 }
-G(["keydown", "click"]);
+T(["keydown", "click"]);
 export {
-  De as FileBrowser
+  ke as FileBrowser
 };

package/package.json

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