@floegence/floe-webapp-core 0.33.4 → 0.33.6

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,20 +1,20 @@
-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 { useLayout as J } from "../../context/LayoutContext.js";
-import { useFileBrowserDrag as U } from "../../context/FileBrowserDragContext.js";
-import { deferAfterPaint as X } from "../../utils/defer.js";
-import { FileBrowserProvider as Y, useFileBrowser as Z } from "./FileBrowserContext.js";
-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 { 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, {
+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 { 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";
+import { DirectoryTree as j } from "./DirectoryTree.js";
+import { FileListView as G } from "./FileListView.js";
+import { FileGridView as Q } from "./FileGridView.js";
+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) {
+  return n(H, {
     get files() {
       return e.files;
     },
@@ -55,13 +55,16 @@ function De(e) {
       return e.onOpen;
     },
     get children() {
-      return n(ue, {
+      return n(Z, {
         get class() {
           return e.class;
         },
         get header() {
           return e.header;
         },
+        get sidebarHeaderActions() {
+          return e.sidebarHeaderActions;
+        },
         get sidebarResizable() {
           return e.sidebarResizable;
         },
@@ -93,129 +96,124 @@ 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(),
-      currentPath: r.currentPath,
-      files: r.files,
+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)}`;
+  let h, C = null, x = null;
+  A(() => {
+    if (!o || !a()) return;
+    const r = {
+      instanceId: s(),
+      currentPath: t.currentPath,
+      files: t.files,
       onDragMove: e.onDragMove,
-      getScrollContainer: () => I,
-      getSidebarScrollContainer: () => S,
-      optimisticRemove: r.optimisticRemove,
-      optimisticInsert: r.optimisticInsert
+      getScrollContainer: () => C,
+      getSidebarScrollContainer: () => x,
+      optimisticRemove: t.optimisticRemove,
+      optimisticInsert: t.optimisticInsert
     };
-    d.registerInstance(i);
-  }), Q(() => {
-    d && s() && d.unregisterInstance(u());
+    o.registerInstance(r);
+  }), K(() => {
+    o && a() && o.unregisterInstance(s());
   });
-  let y = !1, f = !1;
-  q(() => {
-    const i = o();
-    if (!y) {
-      y = !0, f = i, i && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar();
+  let v = !1, g = !1;
+  L(() => {
+    const r = f();
+    if (!v) {
+      v = !0, g = r, r && e.hideSidebarOnMobile !== !1 && !t.sidebarCollapsed() && t.toggleSidebar();
       return;
     }
-    !f && i && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar(), f = i;
+    !g && r && e.hideSidebarOnMobile !== !1 && !t.sidebarCollapsed() && t.toggleSidebar(), g = r;
   });
-  const j = (i) => {
-    (i.metaKey || i.ctrlKey) && i.key.toLowerCase() === "f" && (i.preventDefault(), r.setFilterActive(!0), X(() => M?.focus()));
-  }, D = () => !r.sidebarCollapsed() || !o();
+  const D = (r) => {
+    (r.metaKey || r.ctrlKey) && r.key.toLowerCase() === "f" && (r.preventDefault(), t.setFilterActive(!0), V(() => h?.focus()));
+  }, y = () => !t.sidebarCollapsed() || !f();
   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 r = Y(), m = r.firstChild, b = m.firstChild, c = b.firstChild, R = c.nextSibling, d = R.firstChild, $ = d.firstChild, F = d.nextSibling;
+    return r.$$keydown = D, i(r, n(u, {
       get when() {
         return e.header;
       },
       get children() {
-        var t = ae();
-        return l(t, () => e.header), t;
+        var l = X();
+        return i(l, () => e.header), l;
       }
-    }), h), l(v, n(a, {
-      get when() {
-        return o();
+    }), m), i(m, n(T, {
+      title: "Explorer",
+      get width() {
+        return M();
       },
-      get children() {
-        var t = oe();
-        return P(t, "click", r.toggleSidebar, !0), t;
-      }
-    }), null), L((t) => {
-      S = t;
-    }, $), l($, n(ee, {
-      get instanceId() {
-        return u();
+      get open() {
+        return y();
       },
-      get enableDragDrop() {
-        return s();
-      }
-    })), l(c, n(a, {
-      get when() {
-        return w(() => !!(E() && D()))() && !o();
+      get headerActions() {
+        return e.sidebarHeaderActions;
       },
+      get resizable() {
+        return S();
+      },
+      onResize: (l) => {
+        t.setSidebarWidth(t.sidebarWidth() + l);
+      },
+      get onClose() {
+        return t.toggleSidebar;
+      },
+      bodyRef: (l) => {
+        x = l;
+      },
+      bodyClass: "py-1",
       get children() {
-        return n(p, {
-          direction: "horizontal",
-          onResize: (t) => {
-            r.setSidebarWidth(r.sidebarWidth() + t);
+        return n(j, {
+          get instanceId() {
+            return s();
+          },
+          get enableDragDrop() {
+            return a();
           }
         });
       }
-    }), null), l(h, n(a, {
+    }), b), i(b, n(q, {
+      filterInputRef: (l) => h = l
+    }), c), P((l) => {
+      C = l;
+    }, c), i(c, n(u, {
       get when() {
-        return w(() => !!o())() && !r.sidebarCollapsed();
-      },
-      get children() {
-        var t = se();
-        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, {
-      get when() {
-        return r.viewMode() === "list";
+        return t.viewMode() === "list";
       },
       get fallback() {
-        return n(re, {
+        return n(Q, {
           get instanceId() {
-            return u();
+            return s();
           },
           get enableDragDrop() {
-            return s();
+            return a();
           }
         });
       },
       get children() {
-        return n(te, {
+        return n(G, {
           get instanceId() {
-            return u();
+            return s();
           },
           get enableDragDrop() {
-            return s();
+            return a();
           }
         });
       }
-    })), l(g, () => r.currentFiles().length, A), l(g, n(a, {
+    })), i(d, () => t.currentFiles().length, $), i(d, n(u, {
       get when() {
-        return r.filterQueryApplied().trim();
+        return t.filterQueryApplied().trim();
       },
       get children() {
         return [" ", "(filtered)"];
       }
-    }), null), l(g, n(a, {
+    }), null), i(d, n(u, {
       get when() {
-        return r.selectedItems().size > 0;
+        return t.selectedItems().size > 0;
       },
       get children() {
-        return [" · ", w(() => r.selectedItems().size), " selected"];
+        return [" · ", _(() => t.selectedItems().size), " selected"];
       }
-    }), null), l(N, () => r.currentPath()), l(i, n(ne, {
+    }), null), i(F, () => t.currentPath()), i(r, n(J, {
       get callbacks() {
         return e.contextMenuCallbacks;
       },
@@ -228,31 +226,17 @@ function ue(e) {
       get hideItems() {
         return e.hideContextMenuItems;
       }
-    }), null), l(i, n(a, {
+    }), null), i(r, n(u, {
       get when() {
-        return s();
+        return a();
       },
       get children() {
-        return n(le, {});
+        return n(U, {});
       }
-    }), 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(
-        "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;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    }), i;
+    }), 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;
   })();
 }
-G(["keydown", "click"]);
+W(["keydown"]);
 export {
-  De as FileBrowser
+  me as FileBrowser
 };

package/dist/components/layout/SidebarPane.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from 'solid-js';
+export interface SidebarPaneProps {
+    children: JSX.Element;
+    title?: JSX.Element;
+    headerActions?: JSX.Element;
+    width?: number;
+    open?: boolean;
+    resizable?: boolean;
+    onResize?: (delta: number) => void;
+    onClose?: () => void;
+    mobileOverlay?: boolean;
+    mobileBackdrop?: boolean;
+    class?: string;
+    innerClass?: string;
+    bodyClass?: string;
+    backdropClass?: string;
+    bodyRef?: (el: HTMLDivElement) => void;
+}
+export declare function SidebarPane(props: SidebarPaneProps): JSX.Element;

package/dist/components/layout/SidebarPane.js

@@ -0,0 +1,68 @@
+import { insert as i, createComponent as o, use as M, effect as k, className as a, setStyleProperty as C, template as s, delegateEvents as S } from "solid-js/web";
+import { Show as l } from "solid-js";
+import { useLayout as j } from "../../context/LayoutContext.js";
+import { cn as d } from "../../utils/cn.js";
+import { ResizeHandle as A } from "./ResizeHandle.js";
+var O = /* @__PURE__ */ s('<div class="min-w-0 flex items-center gap-1.5">'), P = /* @__PURE__ */ s('<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">'), E = /* @__PURE__ */ s('<div class="flex min-w-0 items-center gap-1.5">'), H = /* @__PURE__ */ s('<aside><div><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"></span></div><div>'), L = /* @__PURE__ */ s("<div>");
+function I(e) {
+  const z = j(), v = () => z.isMobile(), m = () => e.width ?? 240, c = () => e.open ?? !0, u = () => v() && e.mobileOverlay !== !1 && c(), w = () => u() && typeof e.onClose == "function", _ = () => u() && e.mobileBackdrop !== !1 && typeof e.onClose == "function", R = () => e.resizable && c() && !v() && typeof e.onResize == "function";
+  return [(() => {
+    var n = H(), h = n.firstChild, f = h.firstChild, B = f.firstChild, b = f.nextSibling;
+    return i(B, () => e.title), i(f, o(l, {
+      get when() {
+        return e.headerActions || w();
+      },
+      get children() {
+        var t = E();
+        return i(t, o(l, {
+          get when() {
+            return e.headerActions;
+          },
+          get children() {
+            var r = O();
+            return i(r, () => e.headerActions), r;
+          }
+        }), null), i(t, o(l, {
+          get when() {
+            return w();
+          },
+          get children() {
+            var r = P();
+            return r.$$click = () => e.onClose?.(), r;
+          }
+        }), null), t;
+      }
+    }), null), M((t) => e.bodyRef?.(t), b), i(b, () => e.children), i(n, o(l, {
+      get when() {
+        return R();
+      },
+      get children() {
+        return o(A, {
+          direction: "horizontal",
+          onResize: (t) => e.onResize?.(t)
+        });
+      }
+    }), null), k((t) => {
+      var r = d("flex-shrink-0 border-r border-border bg-sidebar relative", "transition-all duration-200 ease-out", "overflow-hidden", u() && "absolute inset-y-0 left-0 z-10 shadow-lg", e.class), g = c() ? `${m()}px` : "0px", x = d("h-full flex flex-col", e.innerClass), y = `${m()}px`, $ = d("flex-1 min-h-0 overflow-auto", e.bodyClass);
+      return r !== t.e && a(n, t.e = r), g !== t.t && C(n, "width", t.t = g), x !== t.a && a(h, t.a = x), y !== t.o && C(h, "width", t.o = y), $ !== t.i && a(b, t.i = $), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), n;
+  })(), o(l, {
+    get when() {
+      return _();
+    },
+    get children() {
+      var n = L();
+      return n.$$click = () => e.onClose?.(), k(() => a(n, d("absolute inset-0 bg-background/60 backdrop-blur-sm z-[9]", e.backdropClass))), n;
+    }
+  })];
+}
+S(["click"]);
+export {
+  I as SidebarPane
+};

package/dist/components/layout/index.d.ts

@@ -6,5 +6,6 @@ export { TopBarIconButton, type TopBarIconButtonProps } from './TopBarIconButton
 export { BottomBar, BottomBarItem, StatusIndicator, type BottomBarProps, type BottomBarItemProps, type StatusIndicatorProps } from './BottomBar';
 export { MobileTabBar, type MobileTabBarItem, type MobileTabBarProps } from './MobileTabBar';
 export { ResizeHandle, type ResizeHandleProps } from './ResizeHandle';
+export { SidebarPane, type SidebarPaneProps } from './SidebarPane';
 export { Panel, PanelHeader, PanelContent, type PanelProps, type PanelHeaderProps, type PanelContentProps } from './Panel';
 export { KeepAliveStack, type KeepAliveStackProps, type KeepAliveView } from './KeepAliveStack';