@floegence/floe-webapp-core 0.33.5 → 0.33.6

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

@@ -1,20 +1,20 @@
-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 { 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 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 ne } from "./FileBrowserToolbar.js";
-import { FileContextMenu as ie } from "./FileContextMenu.js";
-import { DragPreview as le } from "./DragPreview.js";
-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, {
+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,7 +55,7 @@ function ke(e) {
       return e.onOpen;
     },
     get children() {
-      return i(ge, {
+      return n(Z, {
         get class() {
           return e.class;
         },
@@ -96,145 +96,124 @@ function ke(e) {
     }
   });
 }
-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,
+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: () => S,
-      getSidebarScrollContainer: () => y,
-      optimisticRemove: r.optimisticRemove,
-      optimisticInsert: r.optimisticInsert
+      getScrollContainer: () => C,
+      getSidebarScrollContainer: () => x,
+      optimisticRemove: t.optimisticRemove,
+      optimisticInsert: t.optimisticInsert
     };
-    c.registerInstance(n);
-  }), Q(() => {
-    c && d() && c.unregisterInstance(g());
+    o.registerInstance(r);
+  }), K(() => {
+    o && a() && o.unregisterInstance(s());
   });
-  let $ = !1, f = !1;
-  q(() => {
-    const n = s();
-    if (!$) {
-      $ = !0, f = n, n && 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 && n && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar(), f = n;
+    !g && r && e.hideSidebarOnMobile !== !1 && !t.sidebarCollapsed() && t.toggleSidebar(), g = r;
   });
-  const O = (n) => {
-    (n.metaKey || n.ctrlKey) && n.key.toLowerCase() === "f" && (n.preventDefault(), r.setFilterActive(!0), X(() => I?.focus()));
-  }, D = () => !r.sidebarCollapsed() || !s();
+  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 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, {
+    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;
       }
-    }), v), l(x, i(a, {
-      get when() {
-        return e.sidebarHeaderActions || s();
+    }), m), i(m, n(T, {
+      title: "Explorer",
+      get width() {
+        return M();
       },
-      get children() {
-        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), A((t) => {
-      y = t;
-    }, _), l(_, i(ee, {
-      get instanceId() {
-        return g();
+      get open() {
+        return y();
       },
-      get enableDragDrop() {
-        return d();
-      }
-    })), l(b, i(a, {
-      get when() {
-        return C(() => !!(H() && D()))() && !s();
+      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 i(p, {
-          direction: "horizontal",
-          onResize: (t) => {
-            r.setSidebarWidth(r.sidebarWidth() + t);
+        return n(j, {
+          get instanceId() {
+            return s();
+          },
+          get enableDragDrop() {
+            return a();
           }
         });
       }
-    }), null), l(v, i(a, {
+    }), b), i(b, n(q, {
+      filterInputRef: (l) => h = l
+    }), c), P((l) => {
+      C = l;
+    }, c), i(c, n(u, {
       get when() {
-        return C(() => !!s())() && !r.sidebarCollapsed();
-      },
-      get children() {
-        var t = ue();
-        return P(t, "click", r.toggleSidebar, !0), t;
-      }
-    }), 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";
+        return t.viewMode() === "list";
       },
       get fallback() {
-        return i(re, {
+        return n(Q, {
           get instanceId() {
-            return g();
+            return s();
           },
           get enableDragDrop() {
-            return d();
+            return a();
           }
         });
       },
       get children() {
-        return i(te, {
+        return n(G, {
           get instanceId() {
-            return g();
+            return s();
           },
           get enableDragDrop() {
-            return d();
+            return a();
           }
         });
       }
-    })), l(m, () => r.currentFiles().length, j), l(m, i(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(m, i(a, {
+    }), null), i(d, n(u, {
       get when() {
-        return r.selectedItems().size > 0;
+        return t.selectedItems().size > 0;
       },
       get children() {
-        return [" · ", C(() => r.selectedItems().size), " selected"];
+        return [" · ", _(() => t.selectedItems().size), " selected"];
       }
-    }), null), l(V, () => r.currentPath()), l(n, i(ie, {
+    }), null), i(F, () => t.currentPath()), i(r, n(J, {
       get callbacks() {
         return e.contextMenuCallbacks;
       },
@@ -247,31 +226,17 @@ function ge(e) {
       get hideItems() {
         return e.hideContextMenuItems;
       }
-    }), null), l(n, i(a, {
+    }), null), i(r, n(u, {
       get when() {
-        return d();
+        return a();
       },
       get children() {
-        return i(le, {});
+        return n(U, {});
       }
-    }), 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
-        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
-    }), n;
+    }), 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;
   })();
 }
-T(["keydown", "click"]);
+W(["keydown"]);
 export {
-  ke 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';