@floegence/floe-webapp-core 0.26.4 → 0.26.6

package/dist/app/ActivityAppsMain.js

@@ -1,36 +1,30 @@
-import { createComponent as n, Dynamic as a } from "solid-js/web";
+import { createComponent as i, Dynamic as u } from "solid-js/web";
 import { untrack as d, createMemo as m } from "solid-js";
 import { useLayout as l } from "../context/LayoutContext.js";
-import { useComponentRegistry as v } from "../context/ComponentRegistry.js";
+import { useOptionalComponentRegistry as v } from "../context/ComponentRegistry.js";
 import { KeepAliveStack as f } from "../components/layout/KeepAliveStack.js";
-function y(e) {
+function w(e) {
   return e.sidebar?.fullScreen === !0 || e.sidebar?.renderIn === "main";
 }
-function A(e) {
-  const i = l(), r = (() => {
-    try {
-      return v();
-    } catch {
-      return null;
-    }
-  })();
+function b(e) {
+  const n = l(), r = v();
   if (!d(() => !!e.views) && !r)
     throw new Error("ActivityAppsMain requires ComponentRegistryProvider when `views` is not provided.");
-  const o = () => e.activeId ? e.activeId() : i.sidebarActiveTab(), u = m(() => {
+  const o = () => e.activeId ? e.activeId() : n.sidebarActiveTab(), s = m(() => {
     if (!r) return [];
-    const s = e.include ?? y;
-    return r.sidebarItems().filter((t) => s(t)).map((t) => ({
+    const c = e.include ?? w;
+    return r.sidebarItems().filter((t) => c(t)).map((t) => ({
       id: t.id,
-      render: () => n(a, {
+      render: () => i(u, {
         get component() {
           return t.component;
         }
       })
     }));
-  }), c = () => e.views ?? u();
-  return n(f, {
+  }), a = () => e.views ?? s();
+  return i(f, {
     get views() {
-      return c();
+      return a();
     },
     get activeId() {
       return o();
@@ -47,5 +41,5 @@ function A(e) {
   });
 }
 export {
-  A as ActivityAppsMain
+  b as ActivityAppsMain
 };

package/dist/components/ui/Tabs.js

@@ -1,219 +1,259 @@
-import { createComponent as c, spread as W, mergeProps as D, insert as a, effect as b, className as g, setAttribute as k, memo as re, template as f, use as oe, delegateEvents as ne } from "solid-js/web";
-import { splitProps as F, Show as m, createSignal as y, untrack as le, createEffect as _, For as se, onCleanup as ie } from "solid-js";
+import { createComponent as u, spread as Z, mergeProps as ee, insert as c, effect as g, className as p, setStyleProperty as G, memo as J, use as K, setAttribute as C, template as h, delegateEvents as we } from "solid-js/web";
+import { splitProps as te, Show as m, createSignal as b, untrack as Q, createEffect as z, For as xe, onCleanup as Y } from "solid-js";
 import { cn as v } from "../../utils/cn.js";
-import { deferAfterPaint as C } from "../../utils/defer.js";
-import { useViewActivation as de } from "../../context/ViewActivationContext.js";
-import { X as ae, Plus as ce, ChevronRight as ue } from "../icons/index.js";
-var ve = /* @__PURE__ */ f('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), fe = /* @__PURE__ */ f('<button type=button aria-label="Scroll left">'), he = /* @__PURE__ */ f('<button type=button aria-label="Add new tab">'), be = /* @__PURE__ */ f('<button type=button aria-label="Scroll right">'), ge = /* @__PURE__ */ f("<div><div>"), me = /* @__PURE__ */ f("<span class=flex-shrink-0>"), pe = /* @__PURE__ */ f("<button type=button>"), we = /* @__PURE__ */ f('<div role=tab><span class="truncate max-w-32">'), xe = /* @__PURE__ */ f("<div role=tabpanel>");
-const ye = (p) => (() => {
-  var t = ve();
-  return b(() => k(t, "class", p.class)), t;
+import { deferAfterPaint as $ } from "../../utils/defer.js";
+import { useViewActivation as ye } from "../../context/ViewActivationContext.js";
+import { X as ke, Plus as $e, ChevronRight as Ce } from "../icons/index.js";
+var Se = /* @__PURE__ */ h('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), Ae = /* @__PURE__ */ h('<button type=button aria-label="Scroll left">'), Ie = /* @__PURE__ */ h('<div class="pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 bg-primary transition-[transform,width] duration-200 ease-out will-change-transform motion-reduce:transition-none">'), ze = /* @__PURE__ */ h('<button type=button aria-label="Add new tab">'), Re = /* @__PURE__ */ h('<button type=button aria-label="Scroll right">'), Le = /* @__PURE__ */ h("<div><div>"), _e = /* @__PURE__ */ h("<span class=flex-shrink-0>"), Ue = /* @__PURE__ */ h("<button type=button>"), Ee = /* @__PURE__ */ h('<div role=tab><span class="truncate max-w-32">'), Pe = /* @__PURE__ */ h("<div role=tabpanel>");
+const Oe = (w) => (() => {
+  var t = Se();
+  return g(() => C(t, "class", w.class)), t;
 })();
-function ze(p) {
-  const [t, A] = F(p, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "variant", "class"]);
-  let i;
-  const L = (() => {
+function Xe(w) {
+  const [t, R] = te(w, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "variant", "class"]);
+  let d;
+  const j = (() => {
     try {
-      return de();
+      return ye();
     } catch {
       return null;
     }
-  })(), S = () => L ? L.active() : !0;
-  let I = !1;
-  const R = () => t.activeId !== void 0, N = () => t.onChange ?? t.onActiveIdChange, [U, V] = y(le(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), E = () => R() ? t.activeId : U(), [X, O] = y(E());
-  _(() => {
-    O(E());
+  })(), x = () => j ? j.active() : !0;
+  let L = !1;
+  const [re, ne] = b(0), [oe, le] = b(0), [B, _] = b(!1), U = /* @__PURE__ */ new Map();
+  let E = !1;
+  const S = () => (t.variant ?? "default") === "underline", M = (r) => {
+    if (!d || !S()) return !1;
+    const o = U.get(r);
+    if (!o) return !1;
+    const s = d.getBoundingClientRect(), e = o.getBoundingClientRect(), n = e.left - s.left + d.scrollLeft, a = e.width;
+    return ne(n), le(a), _(a > 0), a > 0;
+  }, se = () => {
+    if (!S()) {
+      _(!1);
+      return;
+    }
+    M(P()) || _(!1);
+  }, A = () => {
+    E || (E = !0, $(() => {
+      E = !1, Q(() => {
+        x() && se();
+      });
+    }));
+  }, T = () => t.activeId !== void 0, ie = () => t.onChange ?? t.onActiveIdChange, [de, ae] = b(Q(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), V = () => T() ? t.activeId : de(), [P, W] = b(V());
+  z(() => {
+    W(V());
+  }), z(() => {
+    x() && (t.variant, P(), A());
   });
-  const [P, q] = y(!1), [j, G] = y(!1), [T, J] = y(!1), K = () => {
-    if (!i) return;
+  const [X, ce] = b(!1), [F, ue] = b(!1), [H, fe] = b(!1), ve = () => {
+    if (!d) return;
     const {
       scrollLeft: r,
-      scrollWidth: n,
-      clientWidth: l
-    } = i, e = n > l;
-    J(e), q(r > 0), G(r + l < n - 1);
-  }, $ = () => {
-    I || (I = !0, C(() => {
-      I = !1, S() && K();
+      scrollWidth: o,
+      clientWidth: s
+    } = d, e = o > s;
+    fe(e), ce(r > 0), ue(r + s < o - 1);
+  }, I = () => {
+    L || (L = !0, $(() => {
+      L = !1, x() && ve();
     }));
-  }, Q = () => {
-    i && i.scrollBy({
+  }, he = () => {
+    d && d.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, Y = () => {
-    i && i.scrollBy({
+  }, be = () => {
+    d && d.scrollBy({
       left: 150,
       behavior: "smooth"
     });
   };
-  _(() => {
-    if (!i || !S()) return;
-    $();
-    const r = () => $();
-    i.addEventListener("scroll", r);
-    const n = () => $();
-    let l;
-    typeof ResizeObserver < "u" ? (l = new ResizeObserver(n), l.observe(i)) : typeof window < "u" && window.addEventListener("resize", n), ie(() => {
-      i?.removeEventListener("scroll", r), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", n);
+  z(() => {
+    if (!d || !x()) return;
+    I(), A();
+    const r = () => I();
+    d.addEventListener("scroll", r);
+    const o = () => {
+      I(), A();
+    };
+    let s;
+    typeof ResizeObserver < "u" ? (s = new ResizeObserver(o), s.observe(d)) : typeof window < "u" && window.addEventListener("resize", o), Y(() => {
+      d?.removeEventListener("scroll", r), s?.disconnect(), typeof window < "u" && window.removeEventListener("resize", o);
     });
-  }), _(() => {
-    S() && (t.items.length, $());
+  }), z(() => {
+    x() && (t.items.length, I(), A());
   });
-  const B = (r, n) => {
-    if (n) return;
-    const l = N();
-    if (O(r), R() || V(r), l) {
+  const D = (r, o) => {
+    if (o) return;
+    const s = ie();
+    if (W(r), S() && M(r), T() || ae(r), s) {
       const e = r;
-      C(() => l(e));
+      $(() => s(e));
     }
-  }, Z = (r, n) => {
+  }, ge = (r, o) => {
     r.stopPropagation();
-    const l = t.onClose;
-    if (!l) return;
-    const e = n;
-    C(() => l(e));
-  }, z = {
+    const s = t.onClose;
+    if (!s) return;
+    const e = o;
+    $(() => s(e));
+  }, O = {
     sm: "h-7 px-2 text-[11px]",
     md: "h-8 px-3 text-xs"
-  }, ee = (r, n) => {
-    const l = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", e = n ? "cursor-not-allowed opacity-50" : "cursor-pointer";
+  }, me = (r, o) => {
+    const s = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", e = o ? "cursor-not-allowed opacity-50" : "cursor-pointer";
     return {
-      default: v(l, e, z[t.size ?? "md"], "rounded-t border-b-2", r ? "border-primary text-foreground bg-background" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", n && "hover:bg-transparent hover:text-muted-foreground"),
-      card: v(l, e, z[t.size ?? "md"], "rounded-t border border-b-0", r ? "border-border bg-background text-foreground -mb-px z-10" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", n && "hover:bg-transparent hover:text-muted-foreground"),
-      underline: v(l, e, z[t.size ?? "md"], "border-b-2 -mb-px", r ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/50", n && "hover:border-transparent hover:text-muted-foreground")
+      default: v(s, e, O[t.size ?? "md"], "rounded-t border-b-2", r ? "border-primary text-foreground bg-background" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", o && "hover:bg-transparent hover:text-muted-foreground"),
+      card: v(s, e, O[t.size ?? "md"], "rounded-t border border-b-0", r ? "border-border bg-background text-foreground -mb-px z-10" : "border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", o && "hover:bg-transparent hover:text-muted-foreground"),
+      underline: v(s, e, O[t.size ?? "md"], "border-b-2 -mb-px", r ? B() ? "border-transparent text-foreground" : "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/50", o && "hover:border-transparent hover:text-muted-foreground")
     }[t.variant ?? "default"];
-  }, te = {
+  }, pe = {
     default: "border-b border-border",
     card: "border-b border-border",
     underline: "border-b border-border"
   };
   return (() => {
-    var r = ge(), n = r.firstChild;
-    W(r, D({
+    var r = Le(), o = r.firstChild;
+    Z(r, ee({
       get class() {
-        return v("relative flex items-center gap-0.5", te[t.variant ?? "default"], t.class);
+        return v("relative flex items-center gap-0.5", pe[t.variant ?? "default"], t.class);
       }
-    }, A), !1, !0), a(r, c(m, {
+    }, R), !1, !0), c(r, u(m, {
       get when() {
-        return T();
+        return H();
       },
       get children() {
-        var e = fe();
-        return e.$$click = Q, a(e, c(ye, {
+        var e = Ae();
+        return e.$$click = he, c(e, u(Oe, {
           class: "w-4 h-4"
-        })), b((s) => {
-          var h = !P(), d = v("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", P() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none");
-          return h !== s.e && (e.disabled = s.e = h), d !== s.t && g(e, s.t = d), s;
+        })), g((n) => {
+          var a = !X(), i = v("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", X() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none");
+          return a !== n.e && (e.disabled = n.e = a), i !== n.t && p(e, n.t = i), n;
+        }, {
+          e: void 0,
+          t: void 0
+        }), e;
+      }
+    }), o);
+    var s = d;
+    return typeof s == "function" ? K(s, o) : d = o, c(o, u(m, {
+      get when() {
+        return J(() => !!S())() && B();
+      },
+      get children() {
+        var e = Ie();
+        return g((n) => {
+          var a = `translate3d(${re()}px, 0, 0)`, i = `${oe()}px`;
+          return a !== n.e && G(e, "transform", n.e = a), i !== n.t && G(e, "width", n.t = i), n;
         }, {
           e: void 0,
           t: void 0
         }), e;
       }
-    }), n);
-    var l = i;
-    return typeof l == "function" ? oe(l, n) : i = n, a(n, c(se, {
+    }), null), c(o, u(xe, {
       get each() {
         return t.items;
       },
       children: (e) => {
-        const s = () => e.id === X(), h = () => e.closable ?? t.closable ?? !1;
+        const n = () => e.id === P(), a = () => e.closable ?? t.closable ?? !1;
         return (() => {
-          var d = we(), M = d.firstChild;
-          return d.$$keydown = (o) => {
-            (o.key === "Enter" || o.key === " ") && (o.preventDefault(), B(e.id, e.disabled));
-          }, d.$$click = () => B(e.id, e.disabled), a(d, c(m, {
+          var i = Ee(), N = i.firstChild;
+          return i.$$keydown = (l) => {
+            (l.key === "Enter" || l.key === " ") && (l.preventDefault(), D(e.id, e.disabled));
+          }, i.$$click = () => D(e.id, e.disabled), K((l) => {
+            U.set(e.id, l), Y(() => U.delete(e.id));
+          }, i), c(i, u(m, {
             get when() {
               return e.icon;
             },
             get children() {
-              var o = me();
-              return a(o, () => e.icon), o;
+              var l = _e();
+              return c(l, () => e.icon), l;
             }
-          }), M), a(M, () => e.label), a(d, c(m, {
+          }), N), c(N, () => e.label), c(i, u(m, {
             get when() {
-              return re(() => !!h())() && !e.disabled;
+              return J(() => !!a())() && !e.disabled;
             },
             get children() {
-              var o = pe();
-              return o.$$click = (u) => Z(u, e.id), a(o, c(ae, {
+              var l = Ue();
+              return l.$$click = (f) => ge(f, e.id), c(l, u(ke, {
                 class: "w-3 h-3"
-              })), b((u) => {
-                var w = v("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", "hover:bg-red-500 hover:text-white", "transition-colors duration-150", "ml-1.5"), x = `Close ${e.label}`;
-                return w !== u.e && g(o, u.e = w), x !== u.t && k(o, "aria-label", u.t = x), u;
+              })), g((f) => {
+                var y = v("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", "hover:bg-red-500 hover:text-white", "transition-colors duration-150", "ml-1.5"), k = `Close ${e.label}`;
+                return y !== f.e && p(l, f.e = y), k !== f.t && C(l, "aria-label", f.t = k), f;
               }, {
                 e: void 0,
                 t: void 0
-              }), o;
+              }), l;
             }
-          }), null), b((o) => {
-            var u = ee(s(), e.disabled), w = s(), x = e.disabled, H = e.disabled ? -1 : 0;
-            return u !== o.e && g(d, o.e = u), w !== o.t && k(d, "aria-selected", o.t = w), x !== o.a && k(d, "aria-disabled", o.a = x), H !== o.o && k(d, "tabindex", o.o = H), o;
+          }), null), g((l) => {
+            var f = me(n(), e.disabled), y = n(), k = e.disabled, q = e.disabled ? -1 : 0;
+            return f !== l.e && p(i, l.e = f), y !== l.t && C(i, "aria-selected", l.t = y), k !== l.a && C(i, "aria-disabled", l.a = k), q !== l.o && C(i, "tabindex", l.o = q), l;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0
-          }), d;
+          }), i;
         })();
       }
-    })), a(r, c(m, {
+    }), null), c(r, u(m, {
       get when() {
         return t.showAdd;
       },
       get children() {
-        var e = he();
+        var e = ze();
         return e.$$click = () => {
-          const s = t.onAdd;
-          s && C(() => s());
-        }, a(e, c(ce, {
+          const n = t.onAdd;
+          n && $(() => n());
+        }, c(e, u($e, {
           get class() {
             return t.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
-        })), b(() => g(e, v("flex-shrink-0 flex items-center justify-center", "rounded hover:bg-muted/80 cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-150", t.size === "sm" ? "w-6 h-6" : "w-7 h-7"))), e;
+        })), g(() => p(e, v("flex-shrink-0 flex items-center justify-center", "rounded hover:bg-muted/80 cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-150", t.size === "sm" ? "w-6 h-6" : "w-7 h-7"))), e;
       }
-    }), null), a(r, c(m, {
+    }), null), c(r, u(m, {
       get when() {
-        return T();
+        return H();
       },
       get children() {
-        var e = be();
-        return e.$$click = Y, a(e, c(ue, {
+        var e = Re();
+        return e.$$click = be, c(e, u(Ce, {
           class: "w-4 h-4"
-        })), b((s) => {
-          var h = !j(), d = v("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", j() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none");
-          return h !== s.e && (e.disabled = s.e = h), d !== s.t && g(e, s.t = d), s;
+        })), g((n) => {
+          var a = !F(), i = v("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", F() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none");
+          return a !== n.e && (e.disabled = n.e = a), i !== n.t && p(e, n.t = i), n;
         }, {
           e: void 0,
           t: void 0
         }), e;
       }
-    }), null), b(() => g(n, v(
-      "flex-1 flex items-end gap-0.5 overflow-x-auto",
+    }), null), g(() => p(o, v(
+      "relative flex-1 flex items-end gap-0.5 overflow-x-auto",
       "scrollbar-none",
       // Hide scrollbar for all browsers
       "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
     ))), r;
   })();
 }
-function _e(p) {
-  const [t, A] = F(p, ["active", "keepMounted", "class", "children"]);
-  return c(m, {
+function Fe(w) {
+  const [t, R] = te(w, ["active", "keepMounted", "class", "children"]);
+  return u(m, {
     get when() {
       return t.keepMounted || t.active;
     },
     get children() {
-      var i = xe();
-      return W(i, D({
+      var d = Pe();
+      return Z(d, ee({
         get class() {
           return v(!t.active && t.keepMounted && "hidden", t.class);
         }
-      }, A), !1, !0), a(i, () => t.children), i;
+      }, R), !1, !0), c(d, () => t.children), d;
     }
   });
 }
-ne(["click", "keydown"]);
+we(["click", "keydown"]);
 export {
-  _e as TabPanel,
-  ze as Tabs
+  Fe as TabPanel,
+  Xe as Tabs
 };

package/dist/context/ComponentRegistry.d.ts

@@ -98,4 +98,6 @@ export declare const ComponentRegistryProvider: (props: {
     children: import("solid-js").JSX.Element;
 }) => import("solid-js").JSX.Element;
 export declare function useComponentRegistry<TProtocol = unknown>(): ComponentRegistryValue<TProtocol>;
+export declare function useOptionalComponentRegistry<TProtocol = unknown>(): ComponentRegistryValue<TProtocol> | undefined;
+export declare function hasComponentRegistryContext(): boolean;
 export declare function createComponentRegistry(): ComponentRegistryValue<unknown>;

package/dist/context/ComponentRegistry.js

@@ -1,12 +1,12 @@
-import { createSignal as y } from "solid-js";
+import { createSignal as C } from "solid-js";
 import { createSimpleContext as h } from "./createSimpleContext.js";
 import { useResolvedFloeConfig as w } from "./FloeConfigContext.js";
-import { useTheme as v } from "./ThemeContext.js";
-import { useLayout as x } from "./LayoutContext.js";
+import { useTheme as x } from "./ThemeContext.js";
+import { useLayout as v } from "./LayoutContext.js";
 import { useCommand as b } from "./CommandContext.js";
-import { useNotification as M } from "./NotificationContext.js";
-import { deferNonBlocking as S } from "../utils/defer.js";
-function A(r) {
+import { useNotification as R } from "./NotificationContext.js";
+import { deferNonBlocking as M } from "../utils/defer.js";
+function S(r) {
   const s = `[${r}]`;
   return {
     debug: (...n) => console.debug(s, ...n),
@@ -15,47 +15,53 @@ function A(r) {
     error: (...n) => console.error(s, ...n)
   };
 }
-function R(r, s) {
+function A(r, s) {
   const n = `component:${s}:`;
   return {
     get: (a, m) => r.load(n + a, m),
     set: (a, m) => r.debouncedSave(n + a, m),
-    remove: (a) => S(() => r.remove(n + a))
+    remove: (a) => M(() => r.remove(n + a))
   };
 }
-function G() {
-  const r = v(), s = x(), n = b(), a = M(), m = w();
-  return (f, l) => ({
-    protocol: l?.protocol,
+function D() {
+  const r = x(), s = v(), n = b(), a = R(), m = w();
+  return (f, p) => ({
+    protocol: p?.protocol,
     theme: r,
     layout: s,
     commands: n,
     notifications: a,
-    storage: R(m.persist, f),
-    logger: A(f)
+    storage: A(m.persist, f),
+    logger: S(f)
   });
 }
-const C = h({
+const l = h({
   name: "ComponentRegistry",
   init: B
-}), H = C.Provider;
+}), G = l.Provider;
+function H() {
+  return l.use();
+}
 function J() {
-  return C.use();
+  return l.useOptional();
+}
+function K() {
+  return l.has();
 }
 function B() {
-  const [r, s] = y(/* @__PURE__ */ new Map()), [n, a] = y(/* @__PURE__ */ new Set()), m = /* @__PURE__ */ new Map(), f = (t) => {
+  const [r, s] = C(/* @__PURE__ */ new Map()), [n, a] = C(/* @__PURE__ */ new Set()), m = /* @__PURE__ */ new Map(), f = (t) => {
     s((e) => new Map(e).set(t.id, t));
-  }, l = (t) => {
+  }, p = (t) => {
     const e = t.map((o) => o.id).filter((o) => !!o);
     return s((o) => {
       const c = new Map(o);
       return t.forEach((u) => c.set(u.id, u)), c;
     }), () => {
       e.forEach((o) => {
-        g(o);
+        y(o);
       });
     };
-  }, d = async (t, e) => {
+  }, g = async (t, e) => {
     const o = r().get(t);
     if (!o || n().has(t)) return;
     const c = [];
@@ -79,7 +85,7 @@ function B() {
     } catch (u) {
       throw c.forEach((i) => i()), u;
     }
-  }, p = async (t) => {
+  }, d = async (t) => {
     const e = r().get(t);
     if (e && n().has(t))
       try {
@@ -90,25 +96,25 @@ function B() {
           return c.delete(t), c;
         });
       }
-  }, g = async (t) => {
-    await p(t), s((e) => {
+  }, y = async (t) => {
+    await d(t), s((e) => {
       const o = new Map(e);
       return o.delete(t), o;
     });
   };
   return {
     register: f,
-    registerAll: l,
-    unregister: g,
-    mount: d,
-    unmount: p,
+    registerAll: p,
+    unregister: y,
+    mount: g,
+    unmount: d,
     mountAll: async (t) => {
       for (const e of r().keys())
-        await d(e, t(e));
+        await g(e, t(e));
     },
     unmountAll: async () => {
       for (const t of n())
-        await p(t);
+        await d(t);
     },
     components: r,
     mountedComponents: n,
@@ -137,8 +143,10 @@ function B() {
   };
 }
 export {
-  H as ComponentRegistryProvider,
+  G as ComponentRegistryProvider,
   B as createComponentRegistry,
-  G as useComponentContextFactory,
-  J as useComponentRegistry
+  K as hasComponentRegistryContext,
+  D as useComponentContextFactory,
+  H as useComponentRegistry,
+  J as useOptionalComponentRegistry
 };

package/dist/context/FloeConfigContext.d.ts

@@ -156,6 +156,8 @@ export interface PersistApi {
      * while keeping debounced persistence in the hot interaction path.
      */
     flush?: () => void;
+    /** Cleanup pending timers (best-effort). */
+    dispose?: () => void;
 }
 export interface FloeConfigValue {
     config: FloeConfig;
@@ -165,6 +167,13 @@ export type DeepPartial<T> = T extends (...args: never[]) => unknown ? T : T ext
     [K in keyof T]?: DeepPartial<T[K]>;
 } : T;
 export declare const DEFAULT_FLOE_CONFIG: FloeConfig;
+/**
+ * Install page lifecycle listeners that flush pending debounced saves.
+ *
+ * Keep this side-effect separate from createPersist() so importing the module does not
+ * register global listeners (important for testability and predictable composition).
+ */
+export declare function installPersistFlushListeners(persist: Pick<PersistApi, 'flush'>): () => void;
 export interface FloeConfigProviderProps {
     config?: DeepPartial<FloeConfig>;
     children: JSX.Element;