@floegence/floe-webapp-core 0.15.0 → 0.15.2

package/dist/components/ui/picker/PickerBase.d.ts

@@ -28,6 +28,12 @@ export interface BasePickerProps {
      * When provided, a "New Folder" button is shown.
      */
     onCreateFolder?: (parentPath: string, name: string) => Promise<void>;
+    /**
+     * Callback when user expands a directory.
+     * Use this to dynamically load children for the expanded directory.
+     * The path parameter is the internal tree path (not the display path).
+     */
+    onExpand?: (path: string) => void;
     /** Filter which directories are selectable (return false to grey-out) */
     filter?: (item: FileItem) => boolean;
     /** Label for the home/root directory (default: 'Root') */
@@ -57,6 +63,11 @@ export interface UsePickerTreeOptions {
     filter?: (item: FileItem) => boolean;
     /** Additional reset logic when the dialog opens */
     onReset?: (initialPath: string) => void;
+    /**
+     * Callback when user expands a directory.
+     * Use this to dynamically load children for the expanded directory.
+     */
+    onExpand?: (path: string) => void;
     /** Label for the home/root directory in tree and breadcrumb (default: 'Root'). Supports accessor for reactivity. */
     homeLabel?: string | Accessor<string | undefined>;
     /**

package/dist/context/FloeConfigContext.d.ts

@@ -149,6 +149,13 @@ export interface PersistApi {
     debouncedSave: <T>(key: string, value: T, delayMs?: number) => void;
     remove: (key: string) => void;
     clearAll: () => void;
+    /**
+     * Flush pending debounced saves immediately.
+     *
+     * Note: This is primarily used to ensure the latest state is persisted on page refresh/close,
+     * while keeping debounced persistence in the hot interaction path.
+     */
+    flush?: () => void;
 }
 export interface FloeConfigValue {
     config: FloeConfig;

package/dist/index29.js

@@ -1,4 +1,4 @@
-import { createComponent as n, insert as l, effect as h, setAttribute as g, template as i } from "solid-js/web";
+import { createComponent as r, insert as l, effect as h, setAttribute as g, template as i } from "solid-js/web";
 import { Show as d } from "solid-js";
 import { cn as m } from "./index111.js";
 import { Dialog as s } from "./index22.js";
@@ -6,22 +6,24 @@ import { Button as o } from "./index20.js";
 import { deferNonBlocking as f } from "./index112.js";
 import { usePickerTree as P, PathInputBar as x, PickerBreadcrumb as C, PickerFolderTree as S, NewFolderSection as p } from "./index31.js";
 var b = /* @__PURE__ */ i('<div class="flex flex-col gap-2 -mt-1">'), y = /* @__PURE__ */ i('<div class="flex items-center w-full gap-2"><span class="flex-1 text-[11px] text-muted-foreground truncate">');
-function T(t) {
+function E(t) {
   const e = P({
     initialPath: t.initialPath,
     open: () => t.open,
     files: () => t.files,
     // eslint-disable-next-line solid/reactivity -- filter is a static callback
-    filter: t.filter ? (r) => t.filter(r) : void 0,
+    filter: t.filter ? (n) => t.filter(n) : void 0,
+    // eslint-disable-next-line solid/reactivity -- onExpand is a static callback
+    onExpand: t.onExpand,
     homeLabel: () => t.homeLabel,
     homePath: () => t.homePath
   }), c = () => {
-    const r = e.selectedPath(), a = t.onSelect;
-    t.onOpenChange(!1), f(() => a(r));
+    const n = e.selectedPath(), a = t.onSelect;
+    t.onOpenChange(!1), f(() => a(n));
   }, u = () => {
     t.onOpenChange(!1);
   };
-  return n(s, {
+  return r(s, {
     get open() {
       return t.open;
     },
@@ -36,27 +38,27 @@ function T(t) {
     },
     get footer() {
       return (() => {
-        var r = y(), a = r.firstChild;
-        return l(a, () => e.toDisplayPath(e.selectedPath())), l(r, n(o, {
+        var n = y(), a = n.firstChild;
+        return l(a, () => e.toDisplayPath(e.selectedPath())), l(n, r(o, {
           variant: "ghost",
           size: "sm",
           onClick: u,
           get children() {
             return t.cancelText ?? "Cancel";
           }
-        }), null), l(r, n(o, {
+        }), null), l(n, r(o, {
           variant: "primary",
           size: "sm",
           onClick: c,
           get children() {
             return t.confirmText ?? "Select";
           }
-        }), null), h(() => g(a, "title", e.toDisplayPath(e.selectedPath()))), r;
+        }), null), h(() => g(a, "title", e.toDisplayPath(e.selectedPath()))), n;
       })();
     },
     get children() {
-      var r = b();
-      return l(r, n(x, {
+      var n = b();
+      return l(n, r(x, {
         get value() {
           return e.pathInput;
         },
@@ -72,14 +74,14 @@ function T(t) {
         get onKeyDown() {
           return e.handlePathInputKeyDown;
         }
-      }), null), l(r, n(C, {
+      }), null), l(n, r(C, {
         get segments() {
           return e.breadcrumbSegments;
         },
         get onClick() {
           return e.handleBreadcrumbClick;
         }
-      }), null), l(r, n(S, {
+      }), null), l(n, r(S, {
         get rootFolders() {
           return e.rootFolders;
         },
@@ -108,12 +110,12 @@ function T(t) {
           "max-height": "280px",
           "min-height": "160px"
         }
-      }), null), l(r, n(d, {
+      }), null), l(n, r(d, {
         get when() {
           return t.onCreateFolder;
         },
         get children() {
-          return n(p, {
+          return r(p, {
             get parentPath() {
               return e.selectedPath;
             },
@@ -125,10 +127,10 @@ function T(t) {
             }
           });
         }
-      }), null), r;
+      }), null), n;
     }
   });
 }
 export {
-  T as DirectoryPicker
+  E as DirectoryPicker
 };

package/dist/index30.js

@@ -1,5 +1,5 @@
-import { delegateEvents as I, createComponent as i, insert as a, effect as F, className as N, setAttribute as D, template as h } from "solid-js/web";
-import { createSignal as $, createMemo as p, createEffect as B, on as E, Show as g, For as z } from "solid-js";
+import { delegateEvents as I, createComponent as i, insert as a, effect as F, className as N, setAttribute as E, template as h } from "solid-js/web";
+import { createSignal as $, createMemo as p, createEffect as D, on as B, Show as g, For as z } from "solid-js";
 import { cn as C } from "./index111.js";
 import { Dialog as T } from "./index22.js";
 import { Button as w } from "./index20.js";
@@ -15,6 +15,8 @@ function ae(e) {
     files: () => e.files,
     // eslint-disable-next-line solid/reactivity -- filter is a static callback
     filter: e.filter ? (t) => e.filter(t) : void 0,
+    // eslint-disable-next-line solid/reactivity -- onExpand is a static callback
+    onExpand: e.onExpand,
     homeLabel: () => e.homeLabel,
     homePath: () => e.homePath,
     onReset: () => {
@@ -27,7 +29,7 @@ function ae(e) {
     const n = r.folderIndex().get(t);
     return n?.children ? n.children.filter((o) => o.type === "file") : [];
   });
-  B(E(u, () => {
+  D(B(u, () => {
     s("");
   }));
   const k = (t) => {
@@ -99,7 +101,7 @@ function ae(e) {
           get children() {
             return e.confirmText ?? "Save";
           }
-        }), null), F(() => D(c, "title", P())), t;
+        }), null), F(() => E(c, "title", P())), t;
       })();
     },
     get children() {

package/dist/index31.js

@@ -1,116 +1,117 @@
-import { delegateEvents as Z, insert as h, createComponent as s, effect as T, className as C, style as ee, memo as B, template as w, setAttribute as te, setStyleProperty as ne } from "solid-js/web";
-import { createSignal as S, createMemo as E, createEffect as A, on as G, For as z, Show as I } from "solid-js";
-import { cn as _ } from "./index111.js";
+import { delegateEvents as Z, insert as d, createComponent as s, effect as E, className as _, style as ee, memo as B, template as y, setAttribute as te, setStyleProperty as ne } from "solid-js/web";
+import { createSignal as C, createMemo as D, createEffect as A, on as G, For as z, Show as I } from "solid-js";
+import { cn as p } from "./index111.js";
 import { deferAfterPaint as re } from "./index112.js";
 import { Button as N } from "./index20.js";
 import { Input as H } from "./index21.js";
-import { ChevronRight as M, Check as le, X as oe, Plus as ae } from "./index40.js";
+import { ChevronRight as M, Check as oe, X as le, Plus as ae } from "./index40.js";
 import { FolderOpenIcon as W, FolderIcon as ie } from "./index54.js";
-var O = /* @__PURE__ */ w('<div class="flex items-center gap-1.5"><div class=flex-1>'), ce = /* @__PURE__ */ w('<p class="text-[11px] text-muted-foreground -mt-1">Creating in: '), se = /* @__PURE__ */ w("<button type=button><span>New Folder"), ue = /* @__PURE__ */ w('<nav class="flex items-center gap-0.5 min-w-0 overflow-x-auto py-0.5"aria-label="Selected path">'), V = /* @__PURE__ */ w("<button type=button>"), de = /* @__PURE__ */ w('<div class="flex items-center justify-center py-6 text-xs text-muted-foreground">'), he = /* @__PURE__ */ w("<div><button type=button><span>"), fe = /* @__PURE__ */ w("<div class=overflow-hidden>"), ge = /* @__PURE__ */ w('<div class="flex flex-col"><div><button type=button><span class="flex-shrink-0 w-4 h-4"></span><span class=truncate>'), me = /* @__PURE__ */ w('<span class="flex-shrink-0 w-4 h-4">');
-function k(e) {
-  const o = (e ?? "").trim();
-  if (o === "" || o === "/") return "/";
-  const n = o.replace(/\/+$/, "");
+var O = /* @__PURE__ */ y('<div class="flex items-center gap-1.5"><div class=flex-1>'), ce = /* @__PURE__ */ y('<p class="text-[11px] text-muted-foreground -mt-1">Creating in: '), se = /* @__PURE__ */ y("<button type=button><span>New Folder"), ue = /* @__PURE__ */ y('<nav class="flex items-center gap-0.5 min-w-0 overflow-x-auto py-0.5"aria-label="Selected path">'), V = /* @__PURE__ */ y("<button type=button>"), de = /* @__PURE__ */ y('<div class="flex items-center justify-center py-6 text-xs text-muted-foreground">'), he = /* @__PURE__ */ y("<div><button type=button><span>"), fe = /* @__PURE__ */ y("<div class=overflow-hidden>"), ge = /* @__PURE__ */ y('<div class="flex flex-col"><div><button type=button><span class="flex-shrink-0 w-4 h-4"></span><span class=truncate>'), me = /* @__PURE__ */ y('<span class="flex-shrink-0 w-4 h-4">');
+function S(e) {
+  const l = (e ?? "").trim();
+  if (l === "" || l === "/") return "/";
+  const n = l.replace(/\/+$/, "");
   return n.startsWith("/") ? n : "/" + n;
 }
 function j(e) {
-  const o = e.split("/").filter(Boolean), n = [];
+  const l = e.split("/").filter(Boolean), n = [];
   let c = "";
-  for (let r = 0; r < o.length - 1; r++)
-    c += "/" + o[r], n.push(c);
+  for (let r = 0; r < l.length - 1; r++)
+    c += "/" + l[r], n.push(c);
   return n;
 }
 function ve(e) {
-  return E(() => {
-    const o = /* @__PURE__ */ new Map(), n = (c) => {
+  return D(() => {
+    const l = /* @__PURE__ */ new Map(), n = (c) => {
       for (const r of c)
-        r.type === "folder" && (o.set(k(r.path), r), r.children?.length && n(r.children));
+        r.type === "folder" && (l.set(S(r.path), r), r.children?.length && n(r.children));
     };
-    return n(e()), o;
+    return n(e()), l;
   });
 }
 function _e(e) {
-  const o = e.initialPath ?? "/", n = () => (typeof e.homeLabel == "function" ? e.homeLabel() : e.homeLabel) ?? "Root", c = () => {
+  const l = e.initialPath ?? "/", n = () => (typeof e.homeLabel == "function" ? e.homeLabel() : e.homeLabel) ?? "Root", c = () => {
     const t = typeof e.homePath == "function" ? e.homePath() : e.homePath;
-    return t ? k(t) : void 0;
+    return t ? S(t) : void 0;
   }, r = (t) => {
     const i = c();
     if (!i) return t;
-    const d = k(t);
-    return d === "/" ? i : i === "/" ? d : i + d;
+    const h = S(t);
+    return h === "/" ? i : i === "/" ? h : i + h;
   }, u = (t) => {
     const i = c();
-    if (!i) return k(t);
-    const d = k(t);
-    return d === i ? "/" : i !== "/" && d.startsWith(i + "/") ? d.slice(i.length) || "/" : k(t);
-  }, [b, m] = S(o), [f, v] = S(/* @__PURE__ */ new Set(["/"])), [P, l] = S(r(o)), [x, a] = S(""), g = ve(e.files), y = E(() => e.files().filter((t) => t.type === "folder"));
+    if (!i) return S(t);
+    const h = S(t);
+    return h === i ? "/" : i !== "/" && h.startsWith(i + "/") ? h.slice(i.length) || "/" : S(t);
+  }, [x, m] = C(l), [f, v] = C(/* @__PURE__ */ new Set(["/"])), [w, o] = C(r(l)), [b, a] = C(""), g = ve(e.files), $ = D(() => e.files().filter((t) => t.type === "folder"));
   A(G(e.open, (t) => {
     if (t) {
       const i = e.initialPath ?? "/";
-      m(i), l(r(i)), a("");
-      const d = j(i);
-      v(/* @__PURE__ */ new Set(["/", ...d])), e.onReset?.(i);
+      m(i), o(r(i)), a("");
+      const h = j(i);
+      v(/* @__PURE__ */ new Set(["/", ...h])), e.onReset?.(i);
     }
-  })), A(G(b, (t) => {
-    l(r(t)), a("");
+  })), A(G(x, (t) => {
+    o(r(t)), a("");
   }));
-  const $ = (t) => {
-    const i = k(t);
+  const k = (t) => {
+    const i = S(t);
     return i === "/" || g().has(i);
   }, F = (t) => e.filter ? e.filter(t) : !0, L = (t) => {
     const i = j(t);
-    v((d) => {
-      const p = new Set(d);
-      for (const D of i) p.add(D);
-      return p.add(t), p;
+    v((h) => {
+      const P = new Set(h);
+      for (const T of i) P.add(T);
+      return P.add(t), P;
     });
   }, q = (t) => {
-    v((i) => {
-      const d = new Set(i);
-      return d.has(t) ? d.delete(t) : d.add(t), d;
-    });
+    const i = f().has(t);
+    v((h) => {
+      const P = new Set(h);
+      return P.has(t) ? P.delete(t) : P.add(t), P;
+    }), i || e.onExpand?.(t);
   }, J = (t) => {
     F(t) && (m(t.path), v((i) => {
-      const d = new Set(i);
-      return d.add(t.path), d;
+      const h = new Set(i);
+      return h.add(t.path), h;
     }));
   }, Q = () => {
     m("/");
   }, R = () => {
-    const t = u(P().trim());
-    $(t) ? (m(t), a(""), L(t)) : a("Path not found");
+    const t = u(w().trim());
+    k(t) ? (m(t), a(""), L(t)) : a("Path not found");
   }, U = (t) => {
     t.key === "Enter" && (t.preventDefault(), R());
-  }, Y = E(() => {
-    const t = b(), i = n();
+  }, Y = D(() => {
+    const t = x(), i = n();
     if (t === "/" || t === "") return [{
       name: i,
       path: "/"
     }];
-    const d = t.split("/").filter(Boolean), p = [{
+    const h = t.split("/").filter(Boolean), P = [{
       name: i,
       path: "/"
     }];
-    let D = "";
-    for (const K of d)
-      D += "/" + K, p.push({
+    let T = "";
+    for (const K of h)
+      T += "/" + K, P.push({
         name: K,
-        path: D
+        path: T
       });
-    return p;
+    return P;
   });
   return {
-    selectedPath: b,
+    selectedPath: x,
     setSelectedPath: m,
     expandedPaths: f,
     toggleExpand: q,
-    pathInput: P,
-    setPathInput: l,
-    pathInputError: x,
+    pathInput: w,
+    setPathInput: o,
+    pathInputError: b,
     setPathInputError: a,
     folderIndex: g,
-    rootFolders: y,
-    isValidPath: $,
+    rootFolders: $,
+    isValidPath: k,
     isSelectable: F,
     handleSelectFolder: J,
     handleSelectRoot: Q,
@@ -126,55 +127,55 @@ function _e(e) {
   };
 }
 function pe(e) {
-  const [o, n] = S(!1), [c, r] = S(""), [u, b] = S(!1), m = () => {
+  const [l, n] = C(!1), [c, r] = C(""), [u, x] = C(!1), m = () => {
     n(!0), r("");
   }, f = () => {
     n(!1), r("");
   }, v = () => {
-    const l = c().trim();
-    if (!l || u()) return;
-    b(!0);
-    const x = e.parentPath(), a = l, g = e.onCreateFolder;
+    const o = c().trim();
+    if (!o || u()) return;
+    x(!0);
+    const b = e.parentPath(), a = o, g = e.onCreateFolder;
     re(() => {
-      g(x, a).then(() => {
+      g(b, a).then(() => {
         n(!1), r("");
-      }).catch((y) => {
-        console.error("Failed to create folder:", y);
+      }).catch(($) => {
+        console.error("Failed to create folder:", $);
       }).finally(() => {
-        b(!1);
+        x(!1);
       });
     });
-  }, P = (l) => {
-    l.key === "Enter" ? (l.preventDefault(), v()) : l.key === "Escape" && (l.preventDefault(), f());
+  }, w = (o) => {
+    o.key === "Enter" ? (o.preventDefault(), v()) : o.key === "Escape" && (o.preventDefault(), f());
   };
   return s(I, {
     get when() {
-      return o();
+      return l();
     },
     get fallback() {
       return (() => {
-        var l = se(), x = l.firstChild;
-        return l.$$click = m, h(l, s(ae, {
+        var o = se(), b = o.firstChild;
+        return o.$$click = m, d(o, s(ae, {
           class: "w-3.5 h-3.5"
-        }), x), T(() => C(l, _("flex items-center gap-1 text-xs text-muted-foreground cursor-pointer", "hover:text-foreground transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded px-1 py-0.5"))), l;
+        }), b), E(() => _(o, p("flex items-center gap-1 text-xs text-muted-foreground cursor-pointer", "hover:text-foreground transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded px-1 py-0.5"))), o;
       })();
     },
     get children() {
       return [(() => {
-        var l = O(), x = l.firstChild;
-        return h(x, s(H, {
+        var o = O(), b = o.firstChild;
+        return d(b, s(H, {
           size: "sm",
           get value() {
             return c();
           },
           onInput: (a) => r(a.currentTarget.value),
-          onKeyDown: P,
+          onKeyDown: w,
           placeholder: "Folder name",
           get disabled() {
             return u();
           },
           autofocus: !0
-        })), h(l, s(N, {
+        })), d(o, s(N, {
           variant: "primary",
           size: "sm",
           onClick: v,
@@ -185,11 +186,11 @@ function pe(e) {
             return !c().trim();
           },
           get children() {
-            return s(le, {
+            return s(oe, {
               class: "w-3.5 h-3.5"
             });
           }
-        }), null), h(l, s(N, {
+        }), null), d(o, s(N, {
           variant: "ghost",
           size: "sm",
           class: "bg-transparent text-muted-foreground hover:bg-red-500 hover:text-white",
@@ -198,25 +199,25 @@ function pe(e) {
             return u();
           },
           get children() {
-            return s(oe, {
+            return s(le, {
               class: "w-3.5 h-3.5"
             });
           }
-        }), null), l;
+        }), null), o;
       })(), (() => {
-        var l = ce();
-        return l.firstChild, h(l, (() => {
-          var x = B(() => !!e.toDisplayPath);
-          return () => x() ? e.toDisplayPath(e.parentPath()) : e.parentPath();
-        })(), null), l;
+        var o = ce();
+        return o.firstChild, d(o, (() => {
+          var b = B(() => !!e.toDisplayPath);
+          return () => b() ? e.toDisplayPath(e.parentPath()) : e.parentPath();
+        })(), null), o;
       })()];
     }
   });
 }
 function Ie(e) {
   return (() => {
-    var o = O(), n = o.firstChild;
-    return h(n, s(H, {
+    var l = O(), n = l.firstChild;
+    return d(n, s(H, {
       size: "sm",
       get value() {
         return e.value();
@@ -231,20 +232,20 @@ function Ie(e) {
       get error() {
         return e.error();
       }
-    })), h(o, s(N, {
+    })), d(l, s(N, {
       variant: "outline",
       size: "sm",
       get onClick() {
         return e.onGo;
       },
       children: "Go"
-    }), null), o;
+    }), null), l;
   })();
 }
 function Fe(e) {
   return (() => {
-    var o = ue();
-    return h(o, s(z, {
+    var l = ue();
+    return d(l, s(z, {
       get each() {
         return e.segments();
       },
@@ -259,18 +260,18 @@ function Fe(e) {
         }
       }), (() => {
         var r = V();
-        return r.$$click = () => e.onClick(n.path), h(r, () => n.name), T(() => C(r, _("text-xs px-1 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", c() === e.segments().length - 1 ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"))), r;
+        return r.$$click = () => e.onClick(n.path), d(r, () => n.name), E(() => _(r, p("text-xs px-1 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-colors duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", c() === e.segments().length - 1 ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"))), r;
       })()]
-    })), o;
+    })), l;
   })();
 }
-function Te(e) {
-  const o = () => (typeof e.homeLabel == "function" ? e.homeLabel() : e.homeLabel) ?? "Root";
+function Ee(e) {
+  const l = () => (typeof e.homeLabel == "function" ? e.homeLabel() : e.homeLabel) ?? "Root";
   return (() => {
     var n = he(), c = n.firstChild, r = c.firstChild;
-    return c.$$click = () => e.onSelectRoot(), h(c, s(W, {
+    return c.$$click = () => e.onSelectRoot(), d(c, s(W, {
       class: "w-4 h-4 flex-shrink-0"
-    }), r), h(r, o), h(n, s(z, {
+    }), r), d(r, l), d(n, s(z, {
       get each() {
         return e.rootFolders();
       },
@@ -293,17 +294,17 @@ function Te(e) {
           return e.isSelectable;
         }
       })
-    }), null), h(n, s(I, {
+    }), null), d(n, s(I, {
       get when() {
         return e.rootFolders().length === 0;
       },
       get children() {
         var u = de();
-        return h(u, () => e.emptyText ?? "No directories available"), u;
+        return d(u, () => e.emptyText ?? "No directories available"), u;
       }
-    }), null), T((u) => {
-      var b = _("border border-border rounded overflow-y-auto", e.class), m = e.style, f = _("flex items-center gap-1.5 w-full text-left text-xs py-1.5 px-2 cursor-pointer", "transition-colors duration-100", "hover:bg-accent/60", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", e.selectedPath() === "/" && "bg-accent text-accent-foreground font-medium");
-      return b !== u.e && C(n, u.e = b), u.t = ee(n, m, u.t), f !== u.a && C(c, u.a = f), u;
+    }), null), E((u) => {
+      var x = p("border border-border rounded overflow-y-auto", e.class), m = e.style, f = p("flex items-center gap-1.5 w-full text-left text-xs py-1.5 px-2 cursor-pointer", "transition-colors duration-100", "hover:bg-accent/60", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", e.selectedPath() === "/" && "bg-accent text-accent-foreground font-medium");
+      return x !== u.e && _(n, u.e = x), u.t = ee(n, m, u.t), f !== u.a && _(c, u.a = f), u;
     }, {
       e: void 0,
       t: void 0,
@@ -312,14 +313,14 @@ function Te(e) {
   })();
 }
 function X(e) {
-  const o = () => e.expandedPaths().has(e.item.path), n = () => e.selectedPath() === e.item.path, c = () => e.isSelectable(e.item), r = E(() => e.item.children?.filter((f) => f.type === "folder") ?? []), u = () => r().length > 0, b = (f) => {
+  const l = () => e.expandedPaths().has(e.item.path), n = () => e.selectedPath() === e.item.path, c = () => e.isSelectable(e.item), r = D(() => e.item.children?.filter((f) => f.type === "folder") ?? []), u = () => r().length > 0, x = (f) => {
     f.stopPropagation(), e.onToggle(e.item.path);
   }, m = () => {
     e.onSelect(e.item);
   };
   return (() => {
-    var f = ge(), v = f.firstChild, P = v.firstChild, l = P.firstChild, x = l.nextSibling;
-    return h(v, s(I, {
+    var f = ge(), v = f.firstChild, w = v.firstChild, o = w.firstChild, b = o.nextSibling;
+    return d(v, s(I, {
       get when() {
         return u();
       },
@@ -328,19 +329,19 @@ function X(e) {
       },
       get children() {
         var a = V();
-        return a.$$click = b, h(a, s(M, {
+        return a.$$click = x, d(a, s(M, {
           class: "w-3 h-3 opacity-60"
-        })), T((g) => {
-          var y = _("flex-shrink-0 w-4 h-4 flex items-center justify-center cursor-pointer", "transition-transform duration-150", o() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring"), $ = o() ? "Collapse folder" : "Expand folder";
-          return y !== g.e && C(a, g.e = y), $ !== g.t && te(a, "aria-label", g.t = $), g;
+        })), E((g) => {
+          var $ = p("flex-shrink-0 w-4 h-4 flex items-center justify-center cursor-pointer", "transition-transform duration-150", l() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring"), k = l() ? "Collapse folder" : "Expand folder";
+          return $ !== g.e && _(a, g.e = $), k !== g.t && te(a, "aria-label", g.t = k), g;
         }, {
           e: void 0,
           t: void 0
         }), a;
       }
-    }), P), P.$$click = m, h(l, s(I, {
+    }), w), w.$$click = m, d(o, s(I, {
       get when() {
-        return B(() => !!u())() && o();
+        return B(() => !!u())() && l();
       },
       get fallback() {
         return s(ie, {
@@ -352,13 +353,13 @@ function X(e) {
           class: "w-4 h-4"
         });
       }
-    })), h(x, () => e.item.name), h(f, s(I, {
+    })), d(b, () => e.item.name), d(f, s(I, {
       get when() {
-        return B(() => !!o())() && u();
+        return B(() => !!l())() && u();
       },
       get children() {
         var a = fe();
-        return h(a, s(z, {
+        return d(a, s(z, {
           get each() {
             return r();
           },
@@ -385,9 +386,9 @@ function X(e) {
           })
         })), a;
       }
-    }), null), T((a) => {
-      var g = _("group flex items-center w-full text-xs", "transition-colors duration-100", c() ? "hover:bg-accent/60" : "opacity-50", n() && c() && "bg-accent text-accent-foreground font-medium"), y = `${4 + e.depth * 14}px`, $ = !c(), F = _("flex items-center gap-1 flex-1 min-w-0 text-left py-1.5 pl-0.5 pr-2", c() ? "cursor-pointer" : "cursor-not-allowed", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring");
-      return g !== a.e && C(v, a.e = g), y !== a.t && ne(v, "padding-left", a.t = y), $ !== a.a && (P.disabled = a.a = $), F !== a.o && C(P, a.o = F), a;
+    }), null), E((a) => {
+      var g = p("group flex items-center w-full text-xs", "transition-colors duration-100", c() ? "hover:bg-accent/60" : "opacity-50", n() && c() && "bg-accent text-accent-foreground font-medium"), $ = `${4 + e.depth * 14}px`, k = !c(), F = p("flex items-center gap-1 flex-1 min-w-0 text-left py-1.5 pl-0.5 pr-2", c() ? "cursor-pointer" : "cursor-not-allowed", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring");
+      return g !== a.e && _(v, a.e = g), $ !== a.t && ne(v, "padding-left", a.t = $), k !== a.a && (w.disabled = a.a = k), F !== a.o && _(w, a.o = F), a;
     }, {
       e: void 0,
       t: void 0,
@@ -401,10 +402,10 @@ export {
   pe as NewFolderSection,
   Ie as PathInputBar,
   Fe as PickerBreadcrumb,
-  Te as PickerFolderTree,
+  Ee as PickerFolderTree,
   X as PickerTreeNode,
   j as getAncestorPaths,
-  k as normalizePath,
+  S as normalizePath,
   ve as useFolderIndex,
   _e as usePickerTree
 };

package/dist/index93.js

@@ -1,5 +1,5 @@
-import { createComponent as v } from "solid-js/web";
-import { createContext as C, useContext as p, createMemo as d } from "solid-js";
+import { createComponent as I } from "solid-js/web";
+import { createContext as b, useContext as h, createMemo as u } from "solid-js";
 const m = {
   storage: {
     namespace: "floe",
@@ -70,7 +70,7 @@ const m = {
     }
   }
 };
-function I() {
+function F() {
   if (!(typeof window > "u"))
     return {
       getItem: (e) => localStorage.getItem(e),
@@ -79,97 +79,126 @@ function I() {
       keys: () => Object.keys(localStorage)
     };
 }
-function g(e) {
-  const t = e.adapter ?? I(), c = e.namespace ? `${e.namespace}-` : "", o = (r) => `${c}${r}`, n = () => e.enabled && !!t, i = /* @__PURE__ */ new Map();
+function v(e) {
+  const t = e.adapter ?? F(), c = e.namespace ? `${e.namespace}-` : "", i = (n) => `${c}${n}`, o = () => e.enabled && !!t, a = /* @__PURE__ */ new Map(), d = () => {
+    if (o()) {
+      for (const [n, r] of a.entries()) {
+        clearTimeout(r.timer);
+        try {
+          t.setItem(n, JSON.stringify(r.value));
+        } catch (s) {
+          console.warn(`Failed to save ${n}:`, s);
+        }
+      }
+      a.clear();
+    }
+  };
+  if (typeof window < "u")
+    try {
+      window.addEventListener("pagehide", d), window.addEventListener("beforeunload", d), typeof document < "u" && document.addEventListener("visibilitychange", () => {
+        document.visibilityState === "hidden" && d();
+      });
+    } catch {
+    }
   return {
-    key: o,
-    load: (r, a) => {
-      if (!n()) return a;
+    key: i,
+    load: (n, r) => {
+      if (!o()) return r;
       try {
-        const s = t.getItem(o(r));
-        return s === null ? a : JSON.parse(s);
+        const s = t.getItem(i(n));
+        return s === null ? r : JSON.parse(s);
       } catch {
-        return a;
+        return r;
       }
     },
-    save: (r, a) => {
-      if (n())
+    save: (n, r) => {
+      if (o())
         try {
-          t.setItem(o(r), JSON.stringify(a));
+          t.setItem(i(n), JSON.stringify(r));
         } catch (s) {
-          console.warn(`Failed to save ${o(r)}:`, s);
+          console.warn(`Failed to save ${i(n)}:`, s);
         }
     },
-    debouncedSave: (r, a, s = 300) => {
-      if (!n()) return;
-      const l = o(r), u = i.get(l);
-      u && clearTimeout(u), i.set(l, setTimeout(() => {
-        try {
-          t.setItem(l, JSON.stringify(a)), i.delete(l);
-        } catch (h) {
-          console.warn(`Failed to save ${l}:`, h);
+    debouncedSave: (n, r, s = 300) => {
+      if (!o()) return;
+      const l = i(n), g = a.get(l);
+      g && clearTimeout(g.timer);
+      const p = setTimeout(() => {
+        const f = a.get(l);
+        if (!(!f || f.timer !== p)) {
+          a.delete(l);
+          try {
+            t.setItem(l, JSON.stringify(f.value));
+          } catch (C) {
+            console.warn(`Failed to save ${l}:`, C);
+          }
         }
-      }, s));
+      }, s);
+      a.set(l, {
+        timer: p,
+        value: r
+      });
     },
-    remove: (r) => {
-      if (n())
+    remove: (n) => {
+      if (o())
         try {
-          t.removeItem(o(r));
+          t.removeItem(i(n));
         } catch {
         }
     },
     clearAll: () => {
-      if (!n()) return;
-      const r = t.keys?.() ?? [];
-      for (const a of r)
-        a.startsWith(c) && t.removeItem(a);
-    }
+      if (!o()) return;
+      const n = t.keys?.() ?? [];
+      for (const r of n)
+        r.startsWith(c) && t.removeItem(r);
+    },
+    flush: d
   };
 }
-function y(e, t) {
+function w(e, t) {
   if (!t) return e;
   if (typeof e != "object" || e === null || Array.isArray(e)) return t ?? e;
   const c = {
     ...e
   };
-  for (const [o, n] of Object.entries(t)) {
-    if (n === void 0) continue;
-    const i = e[o];
-    typeof i == "object" && i !== null && typeof n == "object" && n !== null && !Array.isArray(n) ? c[o] = y(i, n) : c[o] = n;
+  for (const [i, o] of Object.entries(t)) {
+    if (o === void 0) continue;
+    const a = e[i];
+    typeof a == "object" && a !== null && typeof o == "object" && o !== null && !Array.isArray(o) ? c[i] = w(a, o) : c[i] = o;
   }
   return c;
 }
-const f = C();
-function x(e) {
-  const t = d(() => y(m, e.config)), c = d(() => g(t().storage)), o = d(() => ({
+const y = b();
+function A(e) {
+  const t = u(() => w(m, e.config)), c = u(() => v(t().storage)), i = u(() => ({
     config: t(),
     persist: c()
   }));
-  return v(f.Provider, {
+  return I(y.Provider, {
     get value() {
-      return o();
+      return i();
     },
     get children() {
       return e.children;
     }
   });
 }
-function S() {
-  const e = p(f);
+function E() {
+  const e = h(y);
   if (!e)
     throw new Error("FloeConfigContext not found. Make sure to wrap your app with FloeConfigProvider (or FloeProvider).");
   return e;
 }
-const F = g(m.storage), k = {
+const S = v(m.storage), k = {
   config: m,
-  persist: F
+  persist: S
 };
-function T() {
-  return p(f) ?? k;
+function L() {
+  return h(y) ?? k;
 }
 export {
   m as DEFAULT_FLOE_CONFIG,
-  x as FloeConfigProvider,
-  S as useFloeConfig,
-  T as useResolvedFloeConfig
+  A as FloeConfigProvider,
+  E as useFloeConfig,
+  L as useResolvedFloeConfig
 };

package/package.json

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