@floegence/floe-webapp-core 0.31.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;
 }

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

@@ -1,164 +1,164 @@
-import { createComponent as tt } from "solid-js/web";
-import { createSignal as h, createEffect as g, createMemo as z, useContext as nt, createContext as ot, untrack as it } from "solid-js";
-import { useResolvedFloeConfig as st } from "../../context/FloeConfigContext.js";
-import { deferAfterPaint as rt, deferNonBlocking as A } from "../../utils/defer.js";
-const de = ot(), b = {
+import { createComponent as ot } from "solid-js/web";
+import { createSignal as p, createEffect as I, createMemo as z, useContext as it, createContext as st, untrack as rt } from "solid-js";
+import { useResolvedFloeConfig as ct } from "../../context/FloeConfigContext.js";
+import { deferAfterPaint as at, deferNonBlocking as y } from "../../utils/defer.js";
+const ue = st(), b = {
   name: 0.65,
   modifiedAt: 0.2,
   size: 0.15
-}, te = "fileBrowser:listColumnRatios", ne = 220, ct = "fileBrowser:sidebarWidth", at = 160, lt = 520, oe = "fileBrowser:viewMode", ie = "fileBrowser:sortConfig", se = "fileBrowser:expandedFolders", re = "fileBrowser:sidebarCollapsed";
-function ce(n, s) {
-  const c = typeof n == "number" && Number.isFinite(n) ? n : s;
-  return Math.max(at, Math.min(lt, Math.round(c)));
+}, oe = "fileBrowser:listColumnRatios", ie = 220, lt = "fileBrowser:sidebarWidth", dt = 160, ft = 520, se = "fileBrowser:viewMode", re = "fileBrowser:sortConfig", ce = "fileBrowser:expandedFolders", ae = "fileBrowser:sidebarCollapsed";
+function le(n, r) {
+  const s = typeof n == "number" && Number.isFinite(n) ? n : r;
+  return Math.max(dt, Math.min(ft, Math.round(s)));
 }
-function dt(n, s) {
-  return n === "list" || n === "grid" ? n : s;
+function ut(n, r) {
+  return n === "list" || n === "grid" ? n : r;
 }
-function ft(n, s) {
-  if (!n || typeof n != "object") return s;
-  const c = n, f = c.field, l = c.direction;
-  return !(f === "name" || f === "size" || f === "modifiedAt" || f === "type") || !(l === "asc" || l === "desc") ? s : {
+function mt(n, r) {
+  if (!n || typeof n != "object") return r;
+  const s = n, f = s.field, l = s.direction;
+  return !(f === "name" || f === "size" || f === "modifiedAt" || f === "type") || !(l === "asc" || l === "desc") ? r : {
     field: f,
     direction: l
   };
 }
-function ut(n) {
+function ht(n) {
   if (!Array.isArray(n)) return ["/"];
-  const s = [], c = /* @__PURE__ */ new Set();
+  const r = [], s = /* @__PURE__ */ new Set();
   for (const f of n) {
     if (typeof f != "string") continue;
     const l = f.trim();
-    !l || c.has(l) || (c.add(l), s.push(l));
+    !l || s.has(l) || (s.add(l), r.push(l));
   }
-  return c.has("/") || s.unshift("/"), s;
+  return s.has("/") || r.unshift("/"), r;
 }
-function ae(n) {
-  const s = Number.isFinite(n.name) ? n.name : b.name, c = Number.isFinite(n.modifiedAt) ? n.modifiedAt : b.modifiedAt, f = Number.isFinite(n.size) ? n.size : b.size, l = Math.max(0, s), m = Math.max(0, c), y = Math.max(0, f), w = l + m + y;
+function de(n) {
+  const r = Number.isFinite(n.name) ? n.name : b.name, s = Number.isFinite(n.modifiedAt) ? n.modifiedAt : b.modifiedAt, f = Number.isFinite(n.size) ? n.size : b.size, l = Math.max(0, r), m = Math.max(0, s), C = Math.max(0, f), w = l + m + C;
   return w <= 0 ? b : {
     name: l / w,
     modifiedAt: m / w,
-    size: y / w
+    size: C / w
   };
 }
-function le(n, s) {
-  if (!s) return [];
-  const c = [];
+function fe(n, r) {
+  if (!r) return [];
+  const s = [];
   let f = 0;
-  for (const l of s) {
+  for (const l of r) {
     const m = n.indexOf(l, f);
     if (m === -1) return null;
-    c.push(m), f = m + 1;
+    s.push(m), f = m + 1;
   }
-  return c;
+  return s;
 }
-function gt(n) {
-  const s = st(), c = (e) => {
+function Ct(n) {
+  const r = ct(), s = (e) => {
     const t = (e ?? "").trim();
     return t === "" ? "/" : t;
-  }, f = (n.persistenceKey ?? "").trim(), l = !!f, m = (e) => f ? `${f}:${e}` : e, y = l ? dt(s.persist.load(m(oe), n.initialViewMode ?? "list"), n.initialViewMode ?? "list") : n.initialViewMode ?? "list", w = {
+  }, f = (n.persistenceKey ?? "").trim(), l = !!f, m = (e) => f ? `${f}:${e}` : e, C = l ? ut(r.persist.load(m(se), n.initialViewMode ?? "list"), n.initialViewMode ?? "list") : n.initialViewMode ?? "list", w = {
     field: "name",
     direction: "asc"
-  }, fe = l ? ft(s.persist.load(m(ie), w), w) : w, ue = l ? ut(s.persist.load(m(se), ["/"])) : ["/"], me = l ? s.persist.load(m(re), !1) === !0 : !1, [E, pe] = h(c(n.initialPath ?? "/")), [M, F] = h(/* @__PURE__ */ new Set()), [D, he] = h(y), [P, Se] = h(fe), we = ae(s.persist.load(te, n.initialListColumnRatios ?? b)), [N, Ie] = h(we), W = (n.sidebarWidthStorageKey ?? "").trim() || ct, ge = ce(s.persist.load(W, n.initialSidebarWidth ?? ne), n.initialSidebarWidth ?? ne), [K, ye] = h(ge), [_, k] = h(new Set(ue)), [U, Ce] = h(me), [xe, V] = h(null), [G, X] = h(""), [v, R] = h(""), [Ae, Y] = h(!1);
+  }, me = l ? mt(r.persist.load(m(re), w), w) : w, he = l ? ht(r.persist.load(m(ce), ["/"])) : ["/"], pe = l ? r.persist.load(m(ae), !1) === !0 : !1, Se = () => typeof n.path == "string" ? s(n.path) : s(n.initialPath ?? "/"), [x, D] = p(Se()), [E, M] = p(/* @__PURE__ */ new Set()), [N, we] = p(C), [F, Ie] = p(me), ge = de(r.persist.load(oe, n.initialListColumnRatios ?? b)), [W, ye] = p(ge), K = (n.sidebarWidthStorageKey ?? "").trim() || lt, Ce = le(r.persist.load(K, n.initialSidebarWidth ?? ie), n.initialSidebarWidth ?? ie), [U, xe] = p(Ce), [v, k] = p(new Set(he)), [V, Ae] = p(pe), [Pe, G] = p(null), [X, Y] = p(""), [_, R] = p(""), [be, q] = p(!1);
   let L = 0;
-  g(() => {
-    const e = G().trim();
+  I(() => {
+    const e = X().trim();
     L += 1;
     const t = L;
     if (!e) {
       R("");
       return;
     }
-    rt(() => {
+    at(() => {
       t === L && R(e);
     });
-  }), g(() => {
-    s.persist.debouncedSave(te, N());
-  }), g(() => {
-    s.persist.debouncedSave(W, K());
-  }), g(() => {
-    l && s.persist.debouncedSave(m(oe), D());
-  }), g(() => {
-    l && s.persist.debouncedSave(m(ie), P());
-  }), g(() => {
+  }), I(() => {
+    r.persist.debouncedSave(oe, W());
+  }), I(() => {
+    r.persist.debouncedSave(K, U());
+  }), I(() => {
+    l && r.persist.debouncedSave(m(se), N());
+  }), I(() => {
+    l && r.persist.debouncedSave(m(re), F());
+  }), I(() => {
     if (!l) return;
-    const e = [..._()].sort((t, o) => t.localeCompare(o));
-    s.persist.debouncedSave(m(se), e);
-  }), g(() => {
-    l && s.persist.debouncedSave(m(re), U());
+    const e = [...v()].sort((t, o) => t.localeCompare(o));
+    r.persist.debouncedSave(m(ce), e);
+  }), I(() => {
+    l && r.persist.debouncedSave(m(ae), V());
   });
-  const be = (e) => he(e), Ee = (e) => Se(e), Me = () => n.homeLabel ?? "Root", [q, C] = h([]);
-  let I = null, B = {
+  const Ee = (e) => we(e), Me = (e) => Ie(e), Fe = () => n.homeLabel ?? "Root", [Q, A] = p([]);
+  let g = null, B = {
     top: 0,
     left: 0
   };
-  const Q = () => n.files, j = (e) => {
-    const t = c(e);
+  const j = () => n.files, H = (e) => {
+    const t = s(e);
     if (t === "/") return "/";
     const o = t.split("/").filter(Boolean);
     return o.pop(), o.length ? "/" + o.join("/") : "/";
-  }, Fe = (e, t) => {
-    const o = q();
+  }, ve = (e, t) => {
+    const o = Q();
     if (o.length === 0) return e;
     let i = [...e];
-    const a = c(t);
-    for (const r of o)
-      switch (r.type) {
+    const a = s(t);
+    for (const c of o)
+      switch (c.type) {
         case "remove": {
-          const u = new Set(r.paths.map(c));
-          i = i.filter((d) => !u.has(c(d.path)));
+          const u = new Set(c.paths.map(s));
+          i = i.filter((d) => !u.has(s(d.path)));
           break;
         }
         case "update": {
-          const u = c(r.oldPath), d = i.findIndex((S) => c(S.path) === u);
+          const u = s(c.oldPath), d = i.findIndex((S) => s(S.path) === u);
           if (d !== -1) {
-            const S = r.updates.path ?? i[d].path;
-            j(S) === a ? i[d] = {
+            const S = c.updates.path ?? i[d].path;
+            H(S) === a ? i[d] = {
               ...i[d],
-              ...r.updates
+              ...c.updates
             } : i.splice(d, 1);
           } else {
-            const S = r.updates.path;
-            S && j(S);
+            const S = c.updates.path;
+            S && H(S);
           }
           break;
         }
         case "insert": {
-          c(r.parentPath) === a && (i.some((d) => c(d.path) === c(r.item.path)) || i.push(r.item));
+          s(c.parentPath) === a && (i.some((d) => s(d.path) === s(c.item.path)) || i.push(c.item));
           break;
         }
       }
     return i;
-  }, Pe = z(() => {
+  }, _e = z(() => {
     const e = /* @__PURE__ */ new Map(), t = (i) => {
       for (const a of i)
-        a.type === "folder" && (e.set(c(a.path), a.children ?? []), a.children?.length && t(a.children));
-    }, o = Q();
+        a.type === "folder" && (e.set(s(a.path), a.children ?? []), a.children?.length && t(a.children));
+    }, o = j();
     return e.set("/", o), t(o), e;
-  }), _e = z(() => {
-    const e = c(E());
-    let t = Pe().get(e) ?? [];
-    t = Fe(t, e);
-    const o = P(), i = [...t].sort((r, u) => {
-      if (r.type !== u.type) return r.type === "folder" ? -1 : 1;
+  }), Re = z(() => {
+    const e = s(x());
+    let t = _e().get(e) ?? [];
+    t = ve(t, e);
+    const o = F(), i = [...t].sort((c, u) => {
+      if (c.type !== u.type) return c.type === "folder" ? -1 : 1;
       let d = 0;
       switch (o.field) {
         case "name":
-          d = r.name.localeCompare(u.name);
+          d = c.name.localeCompare(u.name);
           break;
         case "size":
-          d = (r.size ?? 0) - (u.size ?? 0);
+          d = (c.size ?? 0) - (u.size ?? 0);
           break;
         case "modifiedAt":
-          d = (r.modifiedAt?.getTime() ?? 0) - (u.modifiedAt?.getTime() ?? 0);
+          d = (c.modifiedAt?.getTime() ?? 0) - (u.modifiedAt?.getTime() ?? 0);
           break;
         case "type":
-          d = (r.extension ?? "").localeCompare(u.extension ?? "");
+          d = (c.extension ?? "").localeCompare(u.extension ?? "");
           break;
       }
       return o.direction === "asc" ? d : -d;
     }), a = /* @__PURE__ */ new Map();
-    for (const r of i)
-      a.set(r.id, r.name.toLowerCase());
+    for (const c of i)
+      a.set(c.id, c.name.toLowerCase());
     return {
       items: i,
       nameLowerById: a
@@ -167,203 +167,213 @@ function gt(n) {
     const {
       items: e,
       nameLowerById: t
-    } = _e(), i = v().trim().toLowerCase(), a = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
+    } = Re(), i = _().trim().toLowerCase(), a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
     if (!i) {
-      for (let p = 0; p < e.length; p++) {
-        const x = e[p];
-        r.set(x.id, x), u.set(x.id, p);
+      for (let h = 0; h < e.length; h++) {
+        const P = e[h];
+        c.set(P.id, P), u.set(P.id, h);
       }
       return {
         items: e,
         matchById: a,
-        fileById: r,
+        fileById: c,
         indexById: u
       };
     }
     const d = [];
     let S = 0;
-    for (const p of e) {
-      const x = t.get(p.id) ?? p.name.toLowerCase(), ee = le(x, i);
-      ee && (d.push(p), a.set(p.id, {
-        matchedIndices: ee
-      }), r.set(p.id, p), u.set(p.id, S), S += 1);
+    for (const h of e) {
+      const P = t.get(h.id) ?? h.name.toLowerCase(), ne = fe(P, i);
+      ne && (d.push(h), a.set(h.id, {
+        matchedIndices: ne
+      }), c.set(h.id, h), u.set(h.id, S), S += 1);
     }
     return {
       items: d,
       matchById: a,
-      fileById: r,
+      fileById: c,
       indexById: u
     };
-  }), ve = () => O().items, H = (e) => {
+  }), Le = () => O().items, $ = (e) => {
     const t = O(), o = [];
     for (const i of e) {
       const a = t.fileById.get(i);
       if (!a) continue;
-      const r = t.indexById.get(i);
+      const c = t.indexById.get(i);
       o.push({
-        index: r ?? Number.MAX_SAFE_INTEGER,
+        index: c ?? Number.MAX_SAFE_INTEGER,
         item: a
       });
     }
     return o.sort((i, a) => i.index - a.index), o.map((i) => i.item);
-  }, T = (e) => {
-    const t = c(e);
-    if (t === E()) return;
-    pe(t), F(/* @__PURE__ */ new Set()), X(""), R(""), Y(!1);
-    const o = n.onSelect;
-    A(() => o?.([]));
-    const i = n.onNavigate;
-    A(() => i?.(t));
-  }, Re = (e) => {
-    Ie(ae(e));
-  }, Le = () => {
-    const e = E();
+  }, J = () => {
+    M(/* @__PURE__ */ new Set()), Y(""), R(""), q(!1);
+    const e = n.onSelect;
+    y(() => e?.([]));
+  };
+  I(() => {
+    if (typeof n.path != "string") return;
+    const e = s(n.path);
+    e !== x() && (D(e), J());
+  });
+  const T = (e) => {
+    const t = s(e);
+    if (t === x()) return;
+    D(t), J();
+    const o = n.onNavigate;
+    y(() => o?.(t));
+    const i = n.onPathChange;
+    y(() => i?.(t, "user"));
+  }, Be = (e) => {
+    ye(de(e));
+  }, Oe = () => {
+    const e = x();
     if (e === "/" || e === "") return;
     const t = e.split("/").filter(Boolean);
     t.pop(), T(t.length ? "/" + t.join("/") : "/");
-  }, $ = (e) => {
+  }, Z = (e) => {
     e.type === "folder" && (T(e.path), k((t) => {
       const o = new Set(t);
       return o.add(e.path), o;
     }));
-  }, Be = (e, t = !1) => {
-    const o = M(), i = t ? new Set(o) : /* @__PURE__ */ new Set();
-    t ? i.has(e) ? i.delete(e) : i.add(e) : (i.clear(), i.add(e)), F(i);
+  }, Te = (e, t = !1) => {
+    const o = E(), i = t ? new Set(o) : /* @__PURE__ */ new Set();
+    t ? i.has(e) ? i.delete(e) : i.add(e) : (i.clear(), i.add(e)), M(i);
     const a = n.onSelect;
     if (a) {
-      const r = new Set(i);
-      A(() => {
-        const u = it(() => H(r));
+      const c = new Set(i);
+      y(() => {
+        const u = rt(() => $(c));
         a(u);
       });
     }
-  }, Oe = () => {
-    F(/* @__PURE__ */ new Set());
+  }, ze = () => {
+    M(/* @__PURE__ */ new Set());
     const e = n.onSelect;
-    A(() => e?.([]));
-  }, Te = (e) => M().has(e), ze = (e) => {
+    y(() => e?.([]));
+  }, De = (e) => E().has(e), Ne = (e) => {
     k((t) => {
       const o = new Set(t);
       return o.has(e) ? o.delete(e) : o.add(e), o;
     });
-  }, De = (e) => _().has(e), Ne = () => Ce((e) => !e), We = (e) => {
-    ye((t) => ce(e, t));
-  }, Ke = (e) => V(e), ke = () => V(null), Ue = (e) => {
-    X(e);
-  }, Ve = (e) => {
-    const t = v().trim();
+  }, We = (e) => v().has(e), Ke = () => Ae((e) => !e), Ue = (e) => {
+    xe((t) => le(e, t));
+  }, ke = (e) => G(e), Ve = () => G(null), Ge = (e) => {
+    Y(e);
+  }, Xe = (e) => {
+    const t = _().trim();
     if (!t) return null;
-    const o = le(e.toLowerCase(), t.toLowerCase());
+    const o = fe(e.toLowerCase(), t.toLowerCase());
     return o ? {
       matchedIndices: o
     } : null;
-  }, Ge = (e) => O().matchById.get(e) ?? null, Xe = () => H(M()), Ye = (e) => {
+  }, Ye = (e) => O().matchById.get(e) ?? null, qe = () => $(E()), Qe = (e) => {
     if (e.type === "folder")
-      $(e);
+      Z(e);
     else {
       const t = n.onOpen;
-      A(() => t?.(e));
+      y(() => t?.(e));
     }
-  }, qe = (e) => {
-    e.length !== 0 && C((t) => [...t, {
+  }, je = (e) => {
+    e.length !== 0 && A((t) => [...t, {
       type: "remove",
       paths: e
     }]);
-  }, Qe = (e, t) => {
-    C((o) => [...o, {
+  }, He = (e, t) => {
+    A((o) => [...o, {
       type: "update",
       oldPath: e,
       updates: t
     }]);
-  }, je = (e, t) => {
-    C((o) => [...o, {
+  }, $e = (e, t) => {
+    A((o) => [...o, {
       type: "insert",
       parentPath: e,
       item: t
     }]);
-  }, He = () => {
-    C([]);
-  }, $e = () => {
-    C([]);
-  }, Je = () => q().length > 0, Ze = (e) => {
-    I = e;
-  }, J = () => I ? {
-    top: I.scrollTop,
-    left: I.scrollLeft
+  }, Je = () => {
+    A([]);
+  }, Ze = () => {
+    A([]);
+  }, et = () => Q().length > 0, tt = (e) => {
+    g = e;
+  }, ee = () => g ? {
+    top: g.scrollTop,
+    left: g.scrollLeft
   } : {
     top: 0,
     left: 0
-  }, Z = (e) => {
-    I && (I.scrollTop = e.top, I.scrollLeft = e.left);
-  }, et = {
-    currentPath: E,
+  }, te = (e) => {
+    g && (g.scrollTop = e.top, g.scrollLeft = e.left);
+  }, nt = {
+    currentPath: x,
     setCurrentPath: T,
-    navigateUp: Le,
-    navigateTo: $,
-    homeLabel: Me,
-    selectedItems: () => M(),
-    selectItem: Be,
-    clearSelection: Oe,
-    isSelected: Te,
-    getSelectedItemsList: Xe,
-    viewMode: D,
-    setViewMode: be,
-    sortConfig: P,
-    setSortConfig: Ee,
-    listColumnRatios: N,
-    setListColumnRatios: Re,
-    expandedFolders: _,
-    toggleFolder: ze,
-    isExpanded: De,
-    files: Q,
-    currentFiles: ve,
-    filterQuery: G,
-    setFilterQuery: Ue,
-    filterQueryApplied: v,
-    isFilterActive: Ae,
-    setFilterActive: Y,
-    getFilterMatch: Ve,
-    getFilterMatchForId: Ge,
-    sidebarCollapsed: U,
-    toggleSidebar: Ne,
-    sidebarWidth: K,
-    setSidebarWidth: We,
-    contextMenu: xe,
-    showContextMenu: Ke,
-    hideContextMenu: ke,
-    openItem: Ye,
+    navigateUp: Oe,
+    navigateTo: Z,
+    homeLabel: Fe,
+    selectedItems: () => E(),
+    selectItem: Te,
+    clearSelection: ze,
+    isSelected: De,
+    getSelectedItemsList: qe,
+    viewMode: N,
+    setViewMode: Ee,
+    sortConfig: F,
+    setSortConfig: Me,
+    listColumnRatios: W,
+    setListColumnRatios: Be,
+    expandedFolders: v,
+    toggleFolder: Ne,
+    isExpanded: We,
+    files: j,
+    currentFiles: Le,
+    filterQuery: X,
+    setFilterQuery: Ge,
+    filterQueryApplied: _,
+    isFilterActive: be,
+    setFilterActive: q,
+    getFilterMatch: Xe,
+    getFilterMatchForId: Ye,
+    sidebarCollapsed: V,
+    toggleSidebar: Ke,
+    sidebarWidth: U,
+    setSidebarWidth: Ue,
+    contextMenu: Pe,
+    showContextMenu: ke,
+    hideContextMenu: Ve,
+    openItem: Qe,
     // Optimistic updates
-    optimisticRemove: qe,
-    optimisticUpdate: Qe,
-    optimisticInsert: je,
-    clearOptimisticUpdates: He,
-    rollbackOptimisticUpdates: $e,
-    hasOptimisticUpdates: Je,
+    optimisticRemove: je,
+    optimisticUpdate: He,
+    optimisticInsert: $e,
+    clearOptimisticUpdates: Je,
+    rollbackOptimisticUpdates: Ze,
+    hasOptimisticUpdates: et,
     // Scroll position management
-    setScrollContainer: Ze,
-    getScrollPosition: J,
-    setScrollPosition: Z,
-    saveScrollPosition: () => (B = J(), B),
+    setScrollContainer: tt,
+    getScrollPosition: ee,
+    setScrollPosition: te,
+    saveScrollPosition: () => (B = ee(), B),
     restoreScrollPosition: () => {
       requestAnimationFrame(() => {
-        Z(B);
+        te(B);
       });
     }
   };
-  return tt(de.Provider, {
-    value: et,
+  return ot(ue.Provider, {
+    value: nt,
     get children() {
       return n.children;
     }
   });
 }
-function yt() {
-  const n = nt(de);
+function xt() {
+  const n = it(ue);
   if (!n)
     throw new Error("useFileBrowser must be used within a FileBrowserProvider");
   return n;
 }
 export {
-  gt as FileBrowserProvider,
-  yt as useFileBrowser
+  Ct as FileBrowserProvider,
+  xt as useFileBrowser
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -81,7 +81,7 @@
     "clsx": "^2.1.1",
     "diff": "^8.0.3",
     "marked": "^17.0.1",
-    "mermaid": "^11.12.2",
+    "mermaid": "^11.12.3",
     "shiki": "^3.21.0",
     "solid-motionone": "^1.0.4",
     "tailwind-merge": "^3.4.0"