@fluixi/core 1.0.0-alpha.92 → 1.0.0-alpha.94

package/dist/src/cdn/core.cjs

@@ -72,79 +72,20 @@ var init_lazy = __esm({
 });
 
 // src/lib/context/context.ts
-function warnEagerProvider() {
-  if (_warnedEagerProvider) return;
-  _warnedEagerProvider = true;
-  if (typeof process !== "undefined" && true) return;
-  console.warn(
-    "[fluixi] createProvider({ context, value, children }) reads `children` eagerly: the object literal materialises `children` BEFORE the context is stamped, so a routed <Outlet/> that has siblings inside the provider renders detached and its descendants see no context under SSR. Use the lazy form instead:\n  createProvider(Context, value, props)   // children stays a getter\n  // or JSX:  <Context.Provider value={...}>{props.children}</Context.Provider>"
-  );
-}
-function createProvider(a, value, childProps) {
-  const isLazyForm = !!a?.Provider;
-  const context = isLazyForm ? a : a.context;
-  const rawValue = isLazyForm ? value : a.value;
-  const debug = isLazyForm ? false : a.debug ?? false;
-  if (!isLazyForm) warnEagerProvider();
-  const resolvedValue = typeof rawValue === "function" ? rawValue() : rawValue;
-  const sourceProps = isLazyForm ? childProps : a;
-  return context.Provider({
-    value: resolvedValue,
-    get children() {
-      return sourceProps?.children;
-    },
-    debug
-  });
-}
-function createContextWithProvider(defaultValue) {
-  const context = createContext3(defaultValue);
-  const provider = (props) => {
-    return createProvider(context, props.value, props);
-  };
-  return [context, provider];
-}
-function composeProviders(contexts, children) {
-  if (contexts.length === 0) {
-    return (0, import_signal8.readChildren)(() => children);
-  }
-  const [context, value] = contexts[0];
-  const remaining = contexts.slice(1);
-  return createProvider(context, value, {
-    get children() {
-      return composeProviders(remaining, children);
-    }
-  });
-}
-function createConsumer(context) {
-  return (props) => {
-    const value = useContext3(context);
-    return props.children(value);
-  };
-}
-function useProvide(context, factory) {
-  const existing = useContext3(context);
-  if (existing === context.defaultValue) {
-    return factory();
-  }
-  return existing;
-}
 function createContext3(defaultValue, name) {
   const context = (0, import_signal7.createContext)(defaultValue, name);
-  const Provider = (props) => {
-    if (props.debug === true) {
-    }
-    return context.Provider({
+  const Provider = (props) => (
+    // Children stay a getter: the reactive Provider reads them after stamping the value on
+    // its owner. Reading `props.children` here would render them, and any <Outlet/> in them,
+    // before the context exists.
+    context.Provider({
       value: props.value,
       get children() {
         return props.children;
       },
       debug: props.debug
-    });
-  };
-  if (typeof Symbol !== "undefined" && Symbol.for) {
-    Provider.$$typeof = /* @__PURE__ */ Symbol.for("react.provider");
-  }
-  Provider.$$typeof = /* @__PURE__ */ Symbol.for("react.provider");
+    })
+  );
   return {
     id: context.id,
     Provider: (0, import_dom10.asProvider)(Provider),
@@ -155,93 +96,38 @@ function useContext3(context) {
   const value = (0, import_signal7.useContext)(context);
   return value !== void 0 ? value : context.defaultValue;
 }
-var import_dom10, import_signal7, import_signal8, _warnedEagerProvider;
-var init_context = __esm({
-  "src/lib/context/context.ts"() {
-    "use strict";
-    import_dom10 = require("@fluixi/dom");
-    import_signal7 = require("@fluixi/reactive/signal");
-    import_signal8 = require("@fluixi/reactive/signal");
-    _warnedEagerProvider = false;
-  }
-});
-
-// src/lib/server/hydration.ts
-function isHydrating() {
-  return hydrating;
-}
-function setHydrating(state) {
-  hydrating = state;
-}
-function setHydrationData(key, data) {
-  hydrationDataMap.set(key, data);
-}
-function getHydrationData(key) {
-  return hydrationDataMap.get(key);
-}
-function clearHydrationData() {
-  hydrationDataMap.clear();
-}
-function deserializeHydrationData() {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  const script = document.getElementById("__FLUIXI_HYDRATION__");
-  if (!script || script.getAttribute("type") !== "application/json") {
-    return false;
-  }
-  try {
-    const json = script.textContent || "{}";
-    const data = JSON.parse(json);
-    for (const [key, value] of Object.entries(data)) {
-      hydrationDataMap.set(key, value);
+function createProvider(context, value, props) {
+  const resolved = typeof value === "function" ? value() : value;
+  return context.Provider({
+    value: resolved,
+    get children() {
+      return props.children;
     }
-    return true;
-  } catch (error) {
-    console.error("Failed to deserialize hydration data:", error);
-    return false;
-  }
+  });
 }
-function cleanupHydration() {
-  if (typeof window === "undefined") {
-    return;
-  }
-  const script = document.getElementById("__FLUIXI_HYDRATION__");
-  if (script) {
-    script.remove();
-  }
-  const walker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_COMMENT,
-    null
+function composeProviders(providers, props) {
+  const outermost = providers.reduceRight(
+    (inner, [context, value]) => ({
+      get children() {
+        return createProvider(context, value, inner);
+      }
+    }),
+    props
   );
-  const comments = [];
-  let node;
-  while (node = walker.nextNode()) {
-    const comment = node;
-    const text = comment.nodeValue || "";
-    if (text.startsWith("#") || text.startsWith("/")) {
-      comments.push(comment);
-    }
-  }
-  comments.forEach((comment) => comment.remove());
-  clearHydrationData();
+  return outermost.children;
 }
-function isServerEnvironment() {
-  return (0, import_dom15.isServer)();
+function requireContext(context, message) {
+  for (let owner = (0, import_signal7.getOwner)(); owner; owner = owner.parent) {
+    if (owner.contexts?.has(context.id)) return useContext3(context);
+  }
+  throw new Error(message ?? `[fluixi] No Provider for ${context.id.description ?? "this context"} above this component.`);
 }
-var import_dom15, hydrating, hydrationDataMap;
-var init_hydration = __esm({
-  "src/lib/server/hydration.ts"() {
+var import_dom10, import_signal7;
+var init_context = __esm({
+  "src/lib/context/context.ts"() {
     "use strict";
-    import_dom15 = require("@fluixi/dom");
-    hydrating = false;
-    hydrationDataMap = /* @__PURE__ */ new Map();
-    if (typeof window !== "undefined") {
-      window.addEventListener("load", () => {
-        setTimeout(cleanupHydration, 100);
-      });
-    }
+    import_dom10 = require("@fluixi/dom");
+    import_signal7 = require("@fluixi/reactive/signal");
   }
 });
 
@@ -299,75 +185,102 @@ var init_transition = __esm({
 });
 
 // src/lib/router/data.ts
-function cache(fn, name) {
-  return async (...args) => {
+function onRevalidate(listener) {
+  revalidationListeners.add(listener);
+  return () => void revalidationListeners.delete(listener);
+}
+function cache(fn, name, options = {}) {
+  const { ttl = Infinity, staleWhileRevalidate = true } = options;
+  return (...args) => {
+    const store = options.cache ?? (0, import_signal13.currentResourceCache)();
     const key = name + ":" + JSON.stringify(args);
-    if (isHydrating() || typeof window !== "undefined") {
-      const hydrated = getHydrationData(key);
-      if (hydrated !== void 0) {
-        return hydrated;
-      }
-    }
-    if (globalCache.has(key)) {
-      return globalCache.get(key);
-    }
-    if (inflightRequests.has(key)) {
-      return inflightRequests.get(key);
-    }
-    const promise = Promise.resolve(fn(...args)).then(
-      (val) => {
-        globalCache.set(key, val);
-        inflightRequests.delete(key);
-        if (isServerEnvironment()) {
-          setHydrationData(key, val);
+    const fetchFresh = () => {
+      const running = store.inflight.get(key);
+      if (running) return running;
+      const promise = Promise.resolve(fn(...args)).then(
+        (value) => {
+          store.set(key, { value, timestamp: Date.now() });
+          store.inflight.delete(key);
+          return value;
+        },
+        (error) => {
+          store.inflight.delete(key);
+          throw error;
         }
-        return val;
-      },
-      (err) => {
-        inflightRequests.delete(key);
-        throw err;
-      }
-    );
-    inflightRequests.set(key, promise);
-    return promise;
+      );
+      store.inflight.set(key, promise);
+      return promise;
+    };
+    const hit = store.get(key);
+    if (hit && (ttl === Infinity || Date.now() - hit.timestamp <= ttl)) return Promise.resolve(hit.value);
+    if (hit && staleWhileRevalidate) {
+      fetchFresh().then(reloadMounted, () => void 0);
+      return Promise.resolve(hit.value);
+    }
+    return fetchFresh();
   };
 }
-function revalidate(key) {
-  const predicate = typeof key === "string" ? (k) => k.startsWith(key) : key;
-  for (const k of globalCache.keys()) {
-    if (predicate(k)) {
-      globalCache.delete(k);
-      revalidationKeys.add(k);
-    }
+function revalidate(key, store) {
+  const names = typeof key === "string" ? [key] : Array.isArray(key) ? key : null;
+  drop(names ?? key, store ?? (0, import_signal13.currentResourceCache)());
+  if (names && !store) tellOtherTabs(names);
+}
+function drop(what, store) {
+  const matches = Array.isArray(what) ? (k) => what.some((n) => k === n || k.startsWith(n + ":")) : what;
+  for (const k of [...store.keys()]) if (matches(k)) store.delete(k);
+  reloadMounted();
+}
+function tellOtherTabs(names) {
+  try {
+    localStorage.setItem(TABS_KEY, JSON.stringify({ names, at: Date.now() + Math.random() }));
+  } catch {
   }
-  setRevalidationVersion((v) => v + 1);
 }
 function createAsync(fetcher, source) {
-  const [data] = (0, import_signal13.createResource)(source || (() => true), fetcher);
+  const [data] = (0, import_signal12.createResource)(source || (() => true), fetcher);
   return data;
 }
 function getSubmissionSignal(url) {
   if (!submissionState.has(url)) {
     submissionState.set(
       url,
-      (0, import_signal13.createSignal)(void 0)
+      (0, import_signal12.createSignal)(void 0)
     );
   }
   return submissionState.get(url);
 }
-function action(fn, name) {
+function getSubmissionsSignal(url) {
+  if (!submissionsState.has(url)) submissionsState.set(url, (0, import_signal12.createSignal)([]));
+  return submissionsState.get(url);
+}
+function action(fn, name, options = {}) {
   const actionUrl = name || fn.name || "action";
   const submit = async (input) => {
     const [, setSubmission] = getSubmissionSignal(actionUrl);
-    const clear = () => setSubmission(void 0);
-    const retry = () => submit(input);
-    setSubmission({
+    const [, setSubmissions] = getSubmissionsSignal(actionUrl);
+    let entry;
+    const drop2 = () => setSubmissions((list) => list.filter((s) => s !== entry));
+    const settle = (next) => {
+      setSubmissions((list) => list.map((s) => s === entry ? next : s));
+      entry = next;
+    };
+    const clear = () => {
+      setSubmission(void 0);
+      drop2();
+    };
+    const retry = () => {
+      drop2();
+      return submit(input);
+    };
+    entry = {
       input,
       // Approximate type for tracking
       pending: true,
       clear,
       retry
-    });
+    };
+    setSubmission(entry);
+    setSubmissions((list) => [...list, entry]);
     try {
       const result = await fn(input);
       setSubmission({
@@ -377,41 +290,63 @@ function action(fn, name) {
         clear,
         retry
       });
+      drop2();
+      const stale = typeof options.invalidates === "function" ? options.invalidates(result) : options.invalidates;
+      for (const key of stale ?? []) revalidate(key);
       return result;
     } catch (error) {
-      setSubmission({
+      const failed = {
         input,
         error,
         pending: false,
         clear,
         retry
-      });
+      };
+      setSubmission(failed);
+      settle(failed);
       throw error;
     }
   };
   submit.url = actionUrl;
-  submit.with = (args) => action((...a) => fn(args, ...a), name);
+  submit.with = (args) => action((...a) => fn(args, ...a), name, options);
   return submit;
 }
 function useSubmission(actionFn) {
   const [submission] = getSubmissionSignal(actionFn.url);
   return submission;
 }
+function useSubmissions(actionFn) {
+  const [submissions] = getSubmissionsSignal(actionFn.url);
+  return submissions;
+}
 function useAction(actionFn) {
   return actionFn;
 }
-var import_signal13, globalCache, inflightRequests, revalidationVersion, setRevalidationVersion, revalidationKeys, submissionState, RouteDataContext, RouteDataProvider;
+var import_signal12, import_signal13, revalidationListeners, reloadMounted, TABS_KEY, submissionState, submissionsState, RouteDataContext, RouteDataProvider;
 var init_data = __esm({
   "src/lib/router/data.ts"() {
     "use strict";
+    import_signal12 = require("@fluixi/reactive/signal");
     import_signal13 = require("@fluixi/reactive/signal");
-    init_hydration();
     init_context();
-    globalCache = /* @__PURE__ */ new Map();
-    inflightRequests = /* @__PURE__ */ new Map();
-    [revalidationVersion, setRevalidationVersion] = (0, import_signal13.createSignal)(0);
-    revalidationKeys = /* @__PURE__ */ new Set();
+    revalidationListeners = /* @__PURE__ */ new Set();
+    reloadMounted = () => {
+      for (const listener of [...revalidationListeners]) listener();
+    };
+    TABS_KEY = "fluixi:revalidate";
+    if (typeof window !== "undefined") {
+      window.addEventListener("storage", (event) => {
+        if (event.key !== TABS_KEY || !event.newValue) return;
+        try {
+          const names = JSON.parse(event.newValue).names;
+          if (Array.isArray(names) && names.every((n) => typeof n === "string")) drop(names, (0, import_signal13.currentResourceCache)());
+        } catch {
+        }
+      });
+    }
+    globalThis[/* @__PURE__ */ Symbol.for("fluixi.revalidate")] = (names) => revalidate(names);
     submissionState = /* @__PURE__ */ new Map();
+    submissionsState = /* @__PURE__ */ new Map();
     RouteDataContext = createContext3(void 0, "route-data");
     RouteDataProvider = RouteDataContext.Provider;
   }
@@ -441,6 +376,7 @@ __export(router_exports, {
   select: () => select,
   supportsViewTransitions: () => supportsViewTransitions,
   useAction: () => useAction,
+  useIsRouting: () => useIsRouting,
   useLevelParams: () => useLevelParams,
   useLinkNavigation: () => useLinkNavigation,
   useLocation: () => useLocation,
@@ -452,7 +388,8 @@ __export(router_exports, {
   useRouteData: () => useRouteData,
   useRouter: () => useRouter,
   useSearchParams: () => useSearchParams,
-  useSubmission: () => useSubmission
+  useSubmission: () => useSubmission,
+  useSubmissions: () => useSubmissions
 });
 function renderLayer(m, depth, base) {
   let data;
@@ -463,10 +400,32 @@ function renderLayer(m, depth, base) {
       cancelled = true;
     });
     const owner = (0, import_signal14.getOwner)();
-    const [resource] = (0, import_signal14.createResource)(
-      () => loader({ params: base.params, location: base.location }, owner, () => cancelled)
-    );
-    data = resource;
+    const router = (0, import_signal15.useContext)(RouterContext);
+    let watching = false;
+    const trackDeps = (deps) => {
+      if (watching || cancelled) return;
+      watching = true;
+      (0, import_signal14.runWithOwner)(owner, () => {
+        let first = true;
+        (0, import_signal14.createEffect)(() => {
+          deps();
+          if (first) first = false;
+          else (0, import_signal14.untrack)(() => void refetch());
+        });
+      });
+    };
+    const [resource, { refetch }] = (0, import_signal14.createResource)(() => {
+      const result = loader({ params: base.params, location: base.location }, owner, () => cancelled, trackDeps);
+      return router ? router.trackLoad(result) : result;
+    });
+    (0, import_signal14.onCleanup)(onRevalidate(() => void refetch()));
+    data = () => {
+      const error = resource.error;
+      if (error !== void 0 && error !== null) throw error;
+      return resource();
+    };
+    Object.defineProperty(data, "loading", { get: () => resource.loading });
+    Object.defineProperty(data, "state", { get: () => resource.state });
   }
   const buildPage = () => RouteDataContext2.Provider({
     value: data,
@@ -484,12 +443,15 @@ function renderLayer(m, depth, base) {
       });
     }
   });
-  if (!data) return buildPage();
+  if (!data) return { view: buildPage(), ready: () => true };
   const res = data;
-  const isLoading = () => res.loading;
+  const isLoading = () => {
+    const state = res.state;
+    return state === void 0 ? res.loading : state === "pending" || state === "unresolved";
+  };
   const [ready, setReady] = (0, import_signal14.createSignal)((0, import_signal14.untrack)(() => !isLoading()));
   (0, import_signal14.createEffect)(() => setReady(!isLoading()));
-  return (0, import_signal14.createMemo)(() => ready() ? buildPage() : null);
+  return { view: (0, import_signal14.createMemo)(() => ready() ? buildPage() : null), ready };
 }
 function renderChild(ctx) {
   const childIdx = ctx.depth + 1;
@@ -500,17 +462,43 @@ function renderChild(ctx) {
     const c = ctx.matched()[childIdx]?.component;
     if ((0, import_signal14.untrack)(childComp) !== c) setChildComp(() => c);
   });
-  return (0, import_signal14.createMemo)(() => {
+  const owner = (0, import_signal14.getOwner)();
+  let shown = null;
+  let pending = null;
+  const drop2 = (layer) => layer?.dispose();
+  (0, import_signal14.onCleanup)(() => {
+    drop2(shown);
+    drop2(pending);
+    shown = pending = null;
+  });
+  const incoming = (0, import_signal14.createMemo)(() => {
     const component = childComp();
-    if (!component) {
+    if (!component) return null;
+    const m = (0, import_signal14.untrack)(() => ctx.matched())[childIdx];
+    return (0, import_signal14.runWithOwner)(
+      owner,
+      () => (0, import_signal14.createRoot)((dispose) => ({
+        ...renderLayer(m, childIdx, { matched: ctx.matched, params: ctx.params, location: ctx.location }),
+        dispose
+      }))
+    );
+  });
+  return (0, import_signal14.createMemo)(() => {
+    const next = incoming();
+    if (!next) {
+      drop2(shown);
+      drop2(pending);
+      shown = pending = null;
       return ctx.notFound ? ctx.notFound() : null;
     }
-    const m = (0, import_signal14.untrack)(() => ctx.matched())[childIdx];
-    return renderLayer(m, childIdx, {
-      matched: ctx.matched,
-      params: ctx.params,
-      location: ctx.location
-    });
+    if (next === shown) return shown.view;
+    if (pending && pending !== next) drop2(pending);
+    pending = next;
+    if (shown && !next.ready()) return shown.view;
+    drop2(shown);
+    shown = next;
+    pending = null;
+    return shown.view;
   });
 }
 function renderNotFound(notFound) {
@@ -544,6 +532,8 @@ function Router(props) {
     history
   });
   const [state, setState] = (0, import_signal14.createSignal)(router.state());
+  const [navigating, setNavigating] = (0, import_signal14.createSignal)(false);
+  const [loads, setLoads] = (0, import_signal14.createSignal)(0);
   let navigationId = 0;
   const takeMode = () => {
     const mode = pendingTransitionMode ?? (props.transition ?? "auto");
@@ -553,12 +543,15 @@ function Router(props) {
   const unsub = router.subscribe((next) => {
     const id = ++navigationId;
     const mode = takeMode();
+    setNavigating(true);
     const prepared = prepareComponents(
       (next.match?.matched ?? []).map((m) => m.component).filter(Boolean)
     );
     const commit = () => {
       setState(next);
-      return (0, import_signal14.flush)();
+      const flushed = (0, import_signal14.flush)();
+      if (id === navigationId) setNavigating(false);
+      return flushed;
     };
     if (!prepared) {
       void runTransition(mode, commit);
@@ -580,7 +573,18 @@ function Router(props) {
   const ctx = {
     router,
     location: (0, import_signal14.createMemo)(() => state().location),
-    params: (0, import_signal14.createMemo)(() => state().match?.params ?? {})
+    params: (0, import_signal14.createMemo)(() => state().match?.params ?? {}),
+    isRouting: () => navigating() || loads() > 0,
+    // Counted by the promise, not by an owner: a load a newer navigation superseded still
+    // settles and uncounts itself, and a resource seeded from the server never calls it.
+    trackLoad(result) {
+      if (result && typeof result.finally === "function") {
+        setLoads((n) => n + 1);
+        void result.finally(() => setLoads((n) => n - 1)).catch(() => {
+        });
+      }
+      return result;
+    }
   };
   const root = {
     depth: -1,
@@ -603,6 +607,21 @@ function Outlet() {
   if (!ctx) return null;
   return renderChild(ctx);
 }
+function useIsRouting(options = {}) {
+  const routing = (0, import_signal15.useContext)(RouterContext)?.isRouting ?? (() => false);
+  const delay = options.delay ?? 0;
+  if (delay <= 0) return routing;
+  const [late, setLate] = (0, import_signal14.createSignal)(false);
+  (0, import_signal14.createEffect)(() => {
+    if (!routing()) {
+      setLate(false);
+      return;
+    }
+    const timer = setTimeout(() => setLate(true), delay);
+    (0, import_signal14.onCleanup)(() => clearTimeout(timer));
+  });
+  return () => routing() && late();
+}
 function Redirect(props) {
   const ctx = (0, import_signal15.useContext)(RouterContext);
   if (ctx && typeof window !== "undefined") {
@@ -716,18 +735,31 @@ function useRouteData() {
 }
 function Link(props) {
   const ctx = (0, import_signal15.useContext)(RouterContext);
-  const navigate = () => ctx?.router.navigate(read(props.href) ?? "", { replace: read(props.replace) });
+  const navigate = () => ctx.router.navigate(read(props.href) ?? "", { replace: read(props.replace) });
   const a = (0, import_dom16.createNativeElement)("a");
   (0, import_dom16.setAttribute)(a, "href", read(props.href) ?? "");
   if (props.slot) (0, import_dom16.setAttribute)(a, "slot", read(props.slot));
   for (const k of Object.keys(props)) {
     if (LINK_OWN_PROPS.has(k)) continue;
     const v = props[k];
-    if (v != null && typeof v !== "function") (0, import_dom16.setAttribute)(a, k, String(v));
+    if (typeof v === "function") {
+      if (/^on[A-Z]/.test(k)) continue;
+      const read2 = v;
+      const apply = () => {
+        const value = read2();
+        if (value == null || value === false) a.removeAttribute?.(k);
+        else (0, import_dom16.setAttribute)(a, k, String(value));
+      };
+      if (typeof a.addEventListener === "function") (0, import_signal14.createEffect)(apply);
+      else apply();
+      continue;
+    }
+    if (v != null) (0, import_dom16.setAttribute)(a, k, String(v));
   }
   if (typeof a.addEventListener === "function") {
     a.addEventListener("click", (e) => {
       if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      if (!ctx) return;
       e.preventDefault();
       navigate();
     });
@@ -798,6 +830,7 @@ var init_router = __esm({
     import_object = require("@fluixi/utils/object");
     import_compare = require("@fluixi/utils/compare");
     import_router = require("@fluixi/router");
+    init_data();
     import_router2 = require("@fluixi/router");
     init_data();
     init_lazy();
@@ -811,7 +844,9 @@ var init_router = __esm({
       router: { navigate: () => {
       } },
       location: () => ({ pathname: "", search: "", hash: "", query: {} }),
-      params: () => ({})
+      params: () => ({}),
+      isRouting: () => false,
+      trackLoad: (result) => result
     };
     read = (v) => typeof v === "function" ? v() : v;
     LINK_OWN_PROPS = /* @__PURE__ */ new Set([
@@ -854,33 +889,31 @@ __export(core_exports, {
   Switch: () => import_dom12.Switch,
   VERSION: () => VERSION2,
   addClass: () => import_dom14.addClass,
-  batch: () => import_signal10.batch,
+  batch: () => import_signal9.batch,
   classMap: () => import_dom13.classMap,
   cleanupDelegation: () => cleanupDelegation,
   composeProviders: () => composeProviders,
   createBrowserHistory: () => import_router2.createBrowserHistory,
   createComponent: () => createComponent,
-  createComputed: () => import_signal10.createComputed,
-  createConsumer: () => createConsumer,
+  createComputed: () => import_signal9.createComputed,
   createContext: () => createContext3,
-  createContextWithProvider: () => createContextWithProvider,
-  createDebounce: () => import_signal11.createDebounce,
-  createDeferred: () => import_signal10.createDeferred,
-  createEffect: () => import_signal10.createEffect,
+  createDebounce: () => import_signal10.createDebounce,
+  createDeferred: () => import_signal9.createDeferred,
+  createEffect: () => import_signal9.createEffect,
   createIsomorphicState: () => createIsomorphicState,
-  createMemo: () => import_signal10.createMemo,
+  createMemo: () => import_signal9.createMemo,
   createMemoryHistory: () => import_router2.createMemoryHistory,
   createProvider: () => createProvider,
-  createRenderEffect: () => import_signal10.createRenderEffect,
-  createResource: () => import_signal10.createResource,
-  createRoot: () => import_signal10.createRoot,
-  createSelector: () => import_signal11.createSelector,
-  createSignal: () => import_signal10.createSignal,
+  createRenderEffect: () => import_signal9.createRenderEffect,
+  createResource: () => import_signal9.createResource,
+  createRoot: () => import_signal9.createRoot,
+  createSelector: () => import_signal10.createSelector,
+  createSignal: () => import_signal9.createSignal,
   createStore: () => import_store.createStore,
   delegateEvents: () => import_dom14.delegateEvents,
   devOnly: () => devOnly,
   getFrameworkInfo: () => getFrameworkInfo,
-  getOwner: () => import_signal10.getOwner,
+  getOwner: () => import_signal9.getOwner,
   getSharedConfig: () => getSharedConfig,
   hydrate: () => import_dom14.hydrate,
   initDelegation: () => initDelegation,
@@ -893,7 +926,7 @@ __export(core_exports, {
   jsxs: () => jsx_runtime_exports.jsxs,
   lazy: () => lazy,
   mount: () => mount,
-  onCleanup: () => import_signal10.onCleanup,
+  onCleanup: () => import_signal9.onCleanup,
   onMount: () => onMount,
   onUnmount: () => onUnmount,
   portal: () => portal,
@@ -901,15 +934,16 @@ __export(core_exports, {
   reduce: () => import_operators.reduceSignal,
   removeClass: () => import_dom14.removeClass,
   render: () => render,
-  runWithOwner: () => import_signal10.runWithOwner,
+  requireContext: () => requireContext,
+  runWithOwner: () => import_signal9.runWithOwner,
   setAttribute: () => import_dom14.setAttribute,
-  setOwner: () => import_signal10.setOwner,
+  setOwner: () => import_signal9.setOwner,
   setProperty: () => import_dom14.setProperty,
   spread: () => import_dom14.spread,
   startClient: () => startClient,
   styleMap: () => import_dom13.styleMap,
   toggleClass: () => import_dom14.toggleClass,
-  untrack: () => import_signal10.untrack,
+  untrack: () => import_signal9.untrack,
   untrackStore: () => import_store.untrackStore,
   useCallback: () => useCallback,
   useContext: () => useContext3,
@@ -921,7 +955,6 @@ __export(core_exports, {
   useNavigate: () => useNavigate,
   useParam: () => useParam,
   useParams: () => useParams,
-  useProvide: () => useProvide,
   useReducer: () => useReducer,
   useRef: () => useRef,
   useRouter: () => useRouter,
@@ -930,8 +963,8 @@ __export(core_exports, {
 module.exports = __toCommonJS(core_exports);
 
 // src/lib/index.ts
+var import_signal9 = require("@fluixi/reactive/signal");
 var import_signal10 = require("@fluixi/reactive/signal");
-var import_signal11 = require("@fluixi/reactive/signal");
 var import_operators = require("@fluixi/reactive/operators");
 var import_store = require("@fluixi/reactive/store");
 
@@ -943,7 +976,7 @@ var import_signal6 = require("@fluixi/reactive/signal");
 var import_dom = require("@fluixi/dom");
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.92";
+var VERSION = "1.0.0-alpha.94";
 
 // src/lib/render/versions.ts
 var import_dom2 = require("@fluixi/dom");
@@ -1246,8 +1279,10 @@ function cleanupDelegation() {
 init_context();
 
 // src/lib/isomorphic.ts
-var import_signal9 = require("@fluixi/reactive/signal");
+var import_signal8 = require("@fluixi/reactive/signal");
 var import_dom11 = require("@fluixi/dom");
+var import_storage = require("@fluixi/storage");
+var import_browser = require("@fluixi/storage/browser");
 var REGISTRY_KEY = "__fluixi_iso_states__";
 var SEED_PREFIX = "__iso:";
 function registry() {
@@ -1261,7 +1296,7 @@ function readSeed(key) {
 function createIsomorphicState(key, options) {
   const seed = readSeed(key);
   const initial = seed !== void 0 ? seed : typeof window !== "undefined" && options.client ? options.client() : options.fallback;
-  const [value, set] = (0, import_signal9.createSignal)(initial);
+  const [value, set] = (0, import_signal8.createSignal)(initial, { name: key });
   registry().set(key, { server: options.server, set });
   return { value, set, key };
 }
@@ -1280,7 +1315,7 @@ var jsx_runtime_exports = {};
 __reExport(jsx_runtime_exports, require("@fluixi/jsx/jsx-runtime"));
 
 // src/lib/index.ts
-var import_signal12 = require("@fluixi/reactive/signal");
+var import_signal11 = require("@fluixi/reactive/signal");
 var VERSION2 = "0.0.1";
 var FRAMEWORK_NAME = "Fluixi";
 function getFrameworkInfo() {
@@ -1303,7 +1338,69 @@ function getFrameworkInfo() {
 
 // src/lib/client/index.ts
 var import_dom17 = require("@fluixi/dom");
-init_hydration();
+
+// src/lib/server/hydration.ts
+var import_dom15 = require("@fluixi/dom");
+var hydrating = false;
+var hydrationDataMap = /* @__PURE__ */ new Map();
+function setHydrating(state) {
+  hydrating = state;
+}
+function clearHydrationData() {
+  hydrationDataMap.clear();
+}
+function deserializeHydrationData() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const script = document.getElementById("__FLUIXI_HYDRATION__");
+  if (!script || script.getAttribute("type") !== "application/json") {
+    return false;
+  }
+  try {
+    const json = script.textContent || "{}";
+    const data = JSON.parse(json);
+    for (const [key, value] of Object.entries(data)) {
+      hydrationDataMap.set(key, value);
+    }
+    return true;
+  } catch (error) {
+    console.error("Failed to deserialize hydration data:", error);
+    return false;
+  }
+}
+function cleanupHydration() {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const script = document.getElementById("__FLUIXI_HYDRATION__");
+  if (script) {
+    script.remove();
+  }
+  const walker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_COMMENT,
+    null
+  );
+  const comments = [];
+  let node;
+  while (node = walker.nextNode()) {
+    const comment = node;
+    const text = comment.nodeValue || "";
+    if (text.startsWith("#") || text.startsWith("/")) {
+      comments.push(comment);
+    }
+  }
+  comments.forEach((comment) => comment.remove());
+  clearHydrationData();
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("load", () => {
+    setTimeout(cleanupHydration, 100);
+  });
+}
+
+// src/lib/client/index.ts
 var import_signal17 = require("@fluixi/reactive/signal");
 var import_head = require("@fluixi/head");
 var import_dom18 = require("@fluixi/dom");
@@ -1327,16 +1424,26 @@ async function startClient(App, options = {}) {
   (0, import_head.setActiveHead)(head);
   (0, import_head.stripHeadMarker)(container);
   if (shouldHydrate) {
-    if (options.routes && options.routes.length) {
-      const { preloadRoutes: preloadRoutes2 } = await Promise.resolve().then(() => (init_router(), router_exports));
-      await preloadRoutes2(options.routes, window.location.pathname);
+    (0, import_dom17.beginAppHydration)();
+    try {
+      if (options.routes && options.routes.length) {
+        const { preloadRoutes: preloadRoutes2 } = await Promise.resolve().then(() => (init_router(), router_exports));
+        await preloadRoutes2(options.routes, window.location.pathname);
+      }
+      deserializeHydrationData();
+      setHydrating(true);
+      (0, import_dom17.hydrate)(rootOf(App), container);
+      replayEvents();
+    } finally {
+      (0, import_dom17.endAppHydration)();
     }
-    deserializeHydrationData();
-    setHydrating(true);
-    (0, import_dom17.hydrate)(rootOf(App), container);
-    replayEvents();
     setTimeout(() => {
       setHydrating(false);
+      const removed = (0, import_dom17.removeUnclaimedKeyed)(container);
+      if (removed && typeof process !== "undefined" && false) {
+        console.warn(`[fluixi] hydration: removed ${removed} server element(s) the client did not render. Check for markup that depends on client-only state.`);
+      }
+      (0, import_dom17.clearHydrationKeys)();
       cleanupHydration();
     }, 100);
   } else {