@floegence/floe-webapp-core 0.30.0 → 0.32.0

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

@@ -4,6 +4,11 @@ import type { FileItem, ViewMode, ContextMenuCallbacks, ContextMenuItem, FileLis
 export interface FileBrowserProps {
     /** File tree data */
     files: FileItem[];
+    /**
+     * Controlled current path.
+     * When provided, the browser path follows this value and user navigation is emitted via onPathChange.
+     */
+    path?: string;
     /** Initial path to display */
     initialPath?: string;
     /** Initial view mode */
@@ -12,6 +17,11 @@ export interface FileBrowserProps {
     initialListColumnRatios?: FileListColumnRatios;
     /** Callback when navigation occurs */
     onNavigate?: (path: string) => void;
+    /**
+     * Callback when the user changes path from inside FileBrowser.
+     * Use with `path` for controlled mode.
+     */
+    onPathChange?: (path: string, source: 'user' | 'programmatic') => void;
     /** Callback when selection changes */
     onSelect?: (items: FileItem[]) => void;
     /** Callback when a file is opened */

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

@@ -1,23 +1,26 @@
-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 p } from "solid-js/web";
-import { onMount as G, onCleanup as H, createEffect as Q, Show as o } from "solid-js";
+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 q } from "../../context/LayoutContext.js";
-import { useFileBrowserDrag as J } from "../../context/FileBrowserDragContext.js";
-import { deferAfterPaint as U } from "../../utils/defer.js";
-import { FileBrowserProvider as X, useFileBrowser as Y } from "./FileBrowserContext.js";
-import { ResizeHandle as Z } from "../layout/ResizeHandle.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 oe = /* @__PURE__ */ m('<div class="border-b border-border">'), ae = /* @__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]">');
+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(X, {
+  return n(Y, {
     get files() {
       return e.files;
     },
+    get path() {
+      return e.path;
+    },
     get initialPath() {
       return e.initialPath;
     },
@@ -42,6 +45,9 @@ function De(e) {
     get onNavigate() {
       return e.onNavigate;
     },
+    get onPathChange() {
+      return e.onPathChange;
+    },
     get onSelect() {
       return e.onSelect;
     },
@@ -88,9 +94,9 @@ function De(e) {
   });
 }
 function ue(e) {
-  const r = Y(), O = q(), d = J(), a = () => 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)}`;
+  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;
-  G(() => {
+  H(() => {
     if (!d || !s()) return;
     const i = {
       instanceId: u(),
@@ -103,12 +109,12 @@ function ue(e) {
       optimisticInsert: r.optimisticInsert
     };
     d.registerInstance(i);
-  }), H(() => {
+  }), Q(() => {
     d && s() && d.unregisterInstance(u());
   });
   let y = !1, f = !1;
-  Q(() => {
-    const i = a();
+  q(() => {
+    const i = o();
     if (!y) {
       y = !0, f = i, i && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar();
       return;
@@ -116,26 +122,26 @@ function ue(e) {
     !f && i && e.hideSidebarOnMobile !== !1 && !r.sidebarCollapsed() && r.toggleSidebar(), f = i;
   });
   const j = (i) => {
-    (i.metaKey || i.ctrlKey) && i.key.toLowerCase() === "f" && (i.preventDefault(), r.setFilterActive(!0), U(() => M?.focus()));
-  }, D = () => !r.sidebarCollapsed() || !a();
+    (i.metaKey || i.ctrlKey) && i.key.toLowerCase() === "f" && (i.preventDefault(), r.setFilterActive(!0), X(() => M?.focus()));
+  }, D = () => !r.sidebarCollapsed() || !o();
   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(o, {
+    return i.$$keydown = j, l(i, n(a, {
       get when() {
         return e.header;
       },
       get children() {
-        var t = oe();
+        var t = ae();
         return l(t, () => e.header), t;
       }
-    }), h), l(v, n(o, {
+    }), h), l(v, n(a, {
       get when() {
-        return a();
+        return o();
       },
       get children() {
-        var t = ae();
+        var t = oe();
         return P(t, "click", r.toggleSidebar, !0), t;
       }
     }), null), L((t) => {
@@ -147,21 +153,21 @@ function ue(e) {
       get enableDragDrop() {
         return s();
       }
-    })), l(c, n(o, {
+    })), l(c, n(a, {
       get when() {
-        return w(() => !!(E() && D()))() && !a();
+        return w(() => !!(E() && D()))() && !o();
       },
       get children() {
-        return n(Z, {
+        return n(p, {
           direction: "horizontal",
           onResize: (t) => {
             r.setSidebarWidth(r.sidebarWidth() + t);
           }
         });
       }
-    }), null), l(h, n(o, {
+    }), null), l(h, n(a, {
       get when() {
-        return w(() => !!a())() && !r.sidebarCollapsed();
+        return w(() => !!o())() && !r.sidebarCollapsed();
       },
       get children() {
         var t = se();
@@ -171,7 +177,7 @@ function ue(e) {
       filterInputRef: (t) => M = t
     }), b), L((t) => {
       I = t;
-    }, b), l(b, n(o, {
+    }, b), l(b, n(a, {
       get when() {
         return r.viewMode() === "list";
       },
@@ -195,14 +201,14 @@ function ue(e) {
           }
         });
       }
-    })), l(g, () => r.currentFiles().length, A), l(g, n(o, {
+    })), l(g, () => r.currentFiles().length, A), l(g, n(a, {
       get when() {
         return r.filterQueryApplied().trim();
       },
       get children() {
         return [" ", "(filtered)"];
       }
-    }), null), l(g, n(o, {
+    }), null), l(g, n(a, {
       get when() {
         return r.selectedItems().size > 0;
       },
@@ -222,7 +228,7 @@ function ue(e) {
       get hideItems() {
         return e.hideContextMenuItems;
       }
-    }), null), l(i, n(o, {
+    }), null), l(i, n(a, {
       get when() {
         return s();
       },
@@ -235,7 +241,7 @@ function ue(e) {
         "transition-all duration-200 ease-out",
         "overflow-hidden",
         // Mobile overlay
-        a() && !r.sidebarCollapsed() && "absolute inset-y-0 left-0 z-10 shadow-lg"
+        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;
     }, {
@@ -246,7 +252,7 @@ function ue(e) {
     }), i;
   })();
 }
-p(["keydown", "click"]);
+G(["keydown", "click"]);
 export {
   De as FileBrowser
 };

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

@@ -3,6 +3,10 @@ import type { FileItem, ViewMode, FileListColumnRatios, FileBrowserContextValue
 export interface FileBrowserProviderProps {
     children: JSX.Element;
     files: FileItem[];
+    /**
+     * Controlled current path. When provided, FileBrowser follows this value.
+     */
+    path?: string;
     initialPath?: string;
     initialViewMode?: ViewMode;
     /** Initial list view column ratios (for resizable columns) */
@@ -23,6 +27,7 @@ export interface FileBrowserProviderProps {
     /** Label for the root/home directory in breadcrumb (default: 'Root') */
     homeLabel?: string;
     onNavigate?: (path: string) => void;
+    onPathChange?: (path: string, source: 'user' | 'programmatic') => void;
     onSelect?: (items: FileItem[]) => void;
     onOpen?: (item: FileItem) => void;
 }