@fluixi/core 1.0.0-alpha.91 → 1.0.0-alpha.93

package/dist/src/lib/core.mjs

@@ -1,21 +1,21 @@
 // src/lib/core.ts
 import {
-  signal,
+  signal as signal2,
   memo,
   effect,
   resource,
-  createEffect as createEffect4,
+  createEffect as createEffect5,
   createMemo as createMemo7,
-  createSignal as createSignal8,
+  createSignal as createSignal9,
   createResource as createResource6,
-  createRoot as createRoot3,
+  createRoot as createRoot4,
   createComputed as createComputed2,
   createRenderEffect as createRenderEffect3,
-  onCleanup as onCleanup3,
-  getOwner as getOwner3,
-  runWithOwner as runWithOwner3,
+  onCleanup as onCleanup5,
+  getOwner as getOwner6,
+  runWithOwner as runWithOwner4,
   batch as batch2,
-  untrack as untrack4,
+  untrack as untrack5,
   createDeferred as createDeferred2,
   setOwner
 } from "@fluixi/reactive/signal";
@@ -38,7 +38,7 @@ import { createRoot as createRoot2 } from "@fluixi/reactive/signal";
 import { registerCoreVersion } from "@fluixi/dom";
 
 // src/version.generated.ts
-var VERSION = "1.0.0-alpha.91";
+var VERSION = "1.0.0-alpha.93";
 
 // src/lib/render/versions.ts
 import { stampVersions, warnOnVersionSkew, versions } from "@fluixi/dom";
@@ -571,84 +571,25 @@ function cleanupDelegation() {
 
 // src/lib/context/context.ts
 import { asProvider } from "@fluixi/dom";
-import { createContext as createReactiveContext, useContext as useReactiveContext } from "@fluixi/reactive/signal";
 import {
-  readChildren as readChildren2
+  createContext as createReactiveContext,
+  getOwner as getOwner2,
+  useContext as useReactiveContext
 } from "@fluixi/reactive/signal";
-var _warnedEagerProvider = false;
-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 readChildren2(() => 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 = createReactiveContext(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: asProvider(Provider),
@@ -659,10 +600,38 @@ function useContext3(context) {
   const value = useReactiveContext(context);
   return value !== void 0 ? value : context.defaultValue;
 }
+function createProvider(context, value, props) {
+  const resolved = typeof value === "function" ? value() : value;
+  return context.Provider({
+    value: resolved,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function composeProviders(providers, props) {
+  const outermost = providers.reduceRight(
+    (inner, [context, value]) => ({
+      get children() {
+        return createProvider(context, value, inner);
+      }
+    }),
+    props
+  );
+  return outermost.children;
+}
+function requireContext(context, message) {
+  for (let owner = getOwner2(); 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.`);
+}
 
 // src/lib/isomorphic.ts
 import { createSignal as createSignal4, createMemo as createMemo5 } from "@fluixi/reactive/signal";
 import { getServerData } from "@fluixi/dom";
+import { createSyncStorage } from "@fluixi/storage";
+import { localStorageAdapter } from "@fluixi/storage/browser";
 var REGISTRY_KEY = "__fluixi_iso_states__";
 var SEED_PREFIX = "__iso:";
 function registry() {
@@ -676,7 +645,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] = createSignal4(initial);
+  const [value, set] = createSignal4(initial, { name: key });
   registry().set(key, { server: options.server, set });
   return { value, set, key };
 }
@@ -688,9 +657,12 @@ function createIsomorphicStore(key, options) {
   });
   const value = () => base.value() ?? options.fallback;
   const persistWrite = (v) => {
-    if (!options.persist || typeof localStorage === "undefined") return;
+    const target = options.persist;
+    if (!target) return;
+    if (typeof target === "string" && typeof window === "undefined") return;
     try {
-      localStorage.setItem(options.persist, JSON.stringify(v));
+      const { storage, key: key2 } = typeof target === "string" ? { storage: createSyncStorage({ adapter: localStorageAdapter() }), key: target } : target;
+      storage.set(key2, v);
     } catch {
     }
   };
@@ -703,7 +675,7 @@ function createIsomorphicStore(key, options) {
   };
   const fields = {};
   for (const k of Object.keys(options.fallback)) {
-    fields[k] = createMemo5(() => value()[k]);
+    fields[k] = createMemo5(() => value()[k], void 0, { name: `${key}.${String(k)}` });
   }
   let initPromise = null;
   const ensureInit = () => {
@@ -727,20 +699,6 @@ import { isServer as onServer } from "@fluixi/dom";
 function isClient() {
   return !onServer();
 }
-function createMemoryStorage() {
-  const mem = /* @__PURE__ */ new Map();
-  return {
-    getItem: (k) => mem.has(k) ? mem.get(k) : null,
-    setItem: (k, v) => void mem.set(k, String(v)),
-    removeItem: (k) => void mem.delete(k),
-    clear: () => mem.clear(),
-    key: (i) => Array.from(mem.keys())[i] ?? null,
-    get length() {
-      return mem.size;
-    }
-  };
-}
-var storage = typeof localStorage !== "undefined" ? localStorage : createMemoryStorage();
 var env = {
   get window() {
     return typeof window !== "undefined" ? window : void 0;
@@ -754,36 +712,210 @@ function clientOnly(fn, fallback) {
 }
 
 // src/lib/theme/index.ts
+import { getActiveHead, useHead } from "@fluixi/head";
 import { createSignal as createSignal5 } from "@fluixi/reactive/signal";
+import { StorageUnavailableError as StorageUnavailableError2 } from "@fluixi/storage";
+
+// src/lib/storage/persisted.ts
+import { getOwner as getOwner3, onCleanup as onCleanup2, signal, untrack as untrack3 } from "@fluixi/reactive/signal";
+var isAsync = (storage) => "encryption" in storage;
+function persisted(storage, key, options = {}) {
+  const fallback = options.fallback ?? null;
+  const name = options.name ?? `storage:${storage.keyPrefix}${key}`;
+  const state = signal(isAsync(storage) ? fallback : storage.get(key) ?? fallback, { name });
+  const put = (value) => state.set(() => value);
+  const resolve = (next) => typeof next === "function" ? next(untrack3(state)) : next;
+  const writeOptions = (extra) => ({
+    ...options.ttl !== void 0 ? { ttl: options.ttl } : {},
+    ...options.encrypt ? { encrypt: true } : {},
+    ...extra
+  });
+  if (!isAsync(storage)) {
+    const off2 = storage.subscribe(key, (event) => {
+      if (event.type !== "set") return put(fallback);
+      if (event.value !== void 0) put(event.value);
+    });
+    if (getOwner3()) onCleanup2(off2);
+    return Object.assign(() => state(), {
+      set(next, extra) {
+        const value = resolve(next);
+        storage.set(key, value, writeOptions(extra));
+        put(value);
+      },
+      remove() {
+        storage.remove(key);
+        put(fallback);
+      }
+    });
+  }
+  let written = false;
+  const reread = () => storage.get(key).then(
+    (value) => put(value ?? fallback),
+    () => void 0
+  );
+  const off = storage.subscribe(key, (event) => {
+    if (event.type !== "set") return put(fallback);
+    if (event.value !== void 0) put(event.value);
+    else void reread();
+  });
+  if (getOwner3()) onCleanup2(off);
+  const ready = storage.get(key).then((value) => {
+    if (!written) put(value ?? fallback);
+  });
+  return Object.assign(() => state(), {
+    ready,
+    async set(next, extra) {
+      const previous = untrack3(state);
+      const value = resolve(next);
+      written = true;
+      put(value);
+      try {
+        await storage.set(key, value, writeOptions(extra));
+      } catch (error) {
+        put(previous);
+        throw error;
+      }
+    },
+    async remove() {
+      written = true;
+      await storage.remove(key);
+      put(fallback);
+    }
+  });
+}
+
+// src/lib/storage/index.ts
+import { appendResponseHeader, getRequestContext, getServerData as getServerData2 } from "@fluixi/dom";
+import { createContext as createContext4, useContext as useContext4 } from "@fluixi/reactive/signal";
+import {
+  createAsyncStorage,
+  createSyncStorage as createSyncStorage2,
+  memoryStorage,
+  StorageUnavailableError
+} from "@fluixi/storage";
+import { documentCookieAdapter, localStorageAdapter as localStorageAdapter2, sessionStorageAdapter } from "@fluixi/storage/browser";
+import { cookieStorage, requestStorage, toStorageRequest } from "@fluixi/storage/server";
+var StorageContext = createContext4(void 0, "storage");
+var AsyncStorageContext = createContext4(void 0, "asyncStorage");
+var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
+var perRequest = /* @__PURE__ */ new WeakMap();
+var perPage = /* @__PURE__ */ new Map();
+function cached(scope, id, make) {
+  let adapter = scope.get(id);
+  if (!adapter) scope.set(id, adapter = make());
+  return adapter;
+}
+function requestRequired(scope) {
+  throw new StorageUnavailableError(
+    `useStorage({ scope: '${scope}' }) on the server needs a request: call it during a render, a loader or a server function, or provide a storage with <StorageProvider>.`
+  );
+}
+function adapterFor(scope, cookie = {}) {
+  const ctx = getRequestContext();
+  const options = { httpOnly: false, ...cookie };
+  switch (scope) {
+    case "local":
+      return localStorageAdapter2();
+    case "session":
+      return sessionStorageAdapter();
+    case "request":
+      if (isBrowser()) return cached(perPage, "request", memoryStorage);
+      if (!ctx) requestRequired(scope);
+      return cached(perRequest.get(ctx) ?? perRequest.set(ctx, /* @__PURE__ */ new Map()).get(ctx), "request", requestStorage);
+    case "cookie": {
+      const id = `cookie:${JSON.stringify(options)}`;
+      if (isBrowser()) {
+        const { httpOnly: _ignored, ...browser } = options;
+        return cached(perPage, id, () => documentCookieAdapter(browser));
+      }
+      if (!ctx) requestRequired(scope);
+      const raw = ctx.event.request;
+      const target = raw && typeof raw === "object" ? raw : void 0;
+      return cached(
+        perRequest.get(ctx) ?? perRequest.set(ctx, /* @__PURE__ */ new Map()).get(ctx),
+        id,
+        () => cookieStorage({
+          ...options,
+          request: raw && typeof raw === "object" && ("headers" in raw || "getHeader" in raw) ? toStorageRequest(raw) : void 0,
+          response: {
+            appendHeader(name, value) {
+              if (!appendResponseHeader(name, value, target)) {
+                throw new StorageUnavailableError("The response headers were already sent, so this cookie cannot reach the browser. Write it before the page head goes out: in middleware, a loader, a server function or the render before its first chunk.");
+              }
+            }
+          }
+        })
+      );
+    }
+  }
+}
+function useStorage(options = {}) {
+  const { scope = "auto", cookie, ...storageOptions } = options;
+  if (scope === "auto") {
+    const provided = useContext4(StorageContext);
+    if (provided) return options.namespace ? provided.namespace(options.namespace) : provided;
+  }
+  return createSyncStorage2({ ...storageOptions, adapter: resolveAdapter(scope, cookie) });
+}
+function resolveAdapter(scope, cookie) {
+  if (scope !== "auto") return adapterFor(scope, cookie);
+  if (isBrowser()) return adapterFor("local");
+  if (!getRequestContext()) requestRequired(scope);
+  return adapterFor("request");
+}
+
+// src/lib/theme/index.ts
 function systemMap(system) {
   if (!system) return null;
   if (system === true) return { dark: "dark", light: "light" };
   return system;
 }
+var YEAR = 60 * 60 * 24 * 365;
+function defaultStorage() {
+  try {
+    return useStorage({ scope: "cookie", cookie: { maxAge: YEAR, sameSite: "lax" } });
+  } catch (error) {
+    if (error instanceof StorageUnavailableError2) return null;
+    throw error;
+  }
+}
+function storedLookup(storage, key) {
+  if (!storage) return null;
+  const full = storage.keyPrefix + key;
+  if (storage.scope === "cookie") {
+    return { from: "cookie", name: encodeURIComponent(full).replace(/[()]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`) };
+  }
+  if (storage.scope === "local") return { from: "local", name: full };
+  return null;
+}
 function createTheme(options) {
   const storageKey = options.storageKey ?? "theme";
   const attribute = options.attribute ?? "data-theme";
   const sys = systemMap(options.system);
-  const detectInitial = () => {
-    const stored = storage.getItem(storageKey);
-    if (stored && options.themes.includes(stored)) return stored;
-    if (sys && env.window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches) return sys.dark;
-    if (sys) return sys.light;
-    return options.default;
+  const storage = options.storage === void 0 ? defaultStorage() : options.storage;
+  const valid = (t) => typeof t === "string" && options.themes.includes(t);
+  const fallback = sys && env.window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? sys.dark : sys ? sys.light : options.default;
+  const stored = storage ? persisted(storage, storageKey) : null;
+  const [unsaved, setUnsaved] = createSignal5(null);
+  const value = () => {
+    const local = unsaved();
+    if (local !== null) return local;
+    const saved = stored?.();
+    return valid(saved) ? saved : fallback;
   };
-  const [value, setValue] = createSignal5(detectInitial());
   const [isLoading, setLoading] = createSignal5(false);
   const apply = (t) => {
     env.document?.documentElement.setAttribute(attribute, t);
-    try {
-      storage.setItem(storageKey, t);
-    } catch {
-    }
   };
   const set = (t) => {
     if (!options.themes.includes(t)) return;
     const prev = value();
-    setValue(() => t);
+    try {
+      stored?.set(t);
+      setUnsaved(stored ? null : t);
+    } catch {
+      setUnsaved(() => t);
+    }
     apply(t);
     options.onChange?.(t, prev);
     if (options.load) {
@@ -800,27 +932,139 @@ function createTheme(options) {
     set(options.themes[(i + 1) % options.themes.length]);
   };
   const init = () => apply(value());
-  const headScript = () => {
-    const cfg = JSON.stringify({
-      k: storageKey,
-      a: attribute,
-      d: options.default,
-      sys
-    });
-    return `<script>(function(){try{var c=${cfg},t=localStorage.getItem(c.k);if(!t&&c.sys)t=matchMedia('(prefers-color-scheme: dark)').matches?c.sys.dark:c.sys.light;if(!t)t=c.d;document.documentElement.setAttribute(c.a,t);}catch(e){}})();<\/script>`;
+  const scriptBody = () => {
+    const cfg = JSON.stringify({ s: storedLookup(storage, storageKey), a: attribute, d: options.default, sys, ts: options.themes }).replace(/</g, "\\u003c");
+    return `(function(){try{var c=${cfg},t=null,s=c.s,r=null;if(s&&s.from==='local')r=localStorage.getItem(s.name);if(s&&s.from==='cookie')document.cookie.split('; ').forEach(function(p){var i=p.indexOf('=');if(p.slice(0,i)===s.name)r=decodeURIComponent(p.slice(i+1));});if(r){var e=JSON.parse(r);t=e&&e.v===1?e.value:e;}if(c.ts.indexOf(t)<0)t=null;if(!t&&c.sys)t=matchMedia('(prefers-color-scheme: dark)').matches?c.sys.dark:c.sys.light;if(!t)t=c.d;document.documentElement.setAttribute(c.a,t);}catch(e){}})();`;
   };
+  const headScript = () => `<script>${scriptBody()}<\/script>`;
+  if (getActiveHead()) {
+    useHead({
+      htmlAttrs: { [attribute]: () => value() },
+      ...options.script === false ? {} : { script: [{ children: scriptBody() }] }
+    });
+  }
   return { value, isLoading, set, toggle, init, headScript };
 }
 
+// src/lib/theme/color-scheme.ts
+import { getActiveHead as getActiveHead2, useHead as useHead2 } from "@fluixi/head";
+import { createEffect as createEffect3, createSignal as createSignal6, getOwner as getOwner4, onCleanup as onCleanup3 } from "@fluixi/reactive/signal";
+var CHOICES = ["system", "light", "dark"];
+var DARK = "(prefers-color-scheme: dark)";
+function createColorScheme(options = {}) {
+  const storageKey = options.storageKey ?? "color-scheme";
+  const attribute = options.attribute ?? "data-theme";
+  const systemAs = options.systemAs ?? "resolved";
+  const storage = options.storage === void 0 ? defaultStorage() : options.storage;
+  const saved = storage ? persisted(storage, storageKey) : null;
+  const [unsaved, setUnsaved] = createSignal6(null);
+  const value = () => {
+    const local = unsaved();
+    if (local) return local;
+    const stored = saved?.();
+    return CHOICES.includes(stored) ? stored : "system";
+  };
+  const media = env.window?.matchMedia?.(DARK);
+  const [osDark, setOsDark] = createSignal6(media?.matches ?? false);
+  if (media) {
+    const onChange = () => setOsDark(media.matches);
+    media.addEventListener?.("change", onChange);
+    if (getOwner4()) onCleanup3(() => media.removeEventListener?.("change", onChange));
+  }
+  const resolved = () => {
+    const choice = value();
+    return choice === "system" ? osDark() ? "dark" : "light" : choice;
+  };
+  const shown = () => systemAs === "system" && value() === "system" ? "system" : resolved();
+  const apply = () => {
+    env.document?.documentElement.setAttribute(attribute, shown());
+  };
+  const set = (choice) => {
+    if (!CHOICES.includes(choice)) return;
+    if (!saved) setUnsaved(choice);
+    else {
+      try {
+        saved.set(choice);
+        setUnsaved(null);
+      } catch {
+        setUnsaved(choice);
+      }
+    }
+    apply();
+    options.onChange?.(choice);
+  };
+  const scriptBody = () => {
+    const cfg = JSON.stringify({ s: storedLookup(storage, storageKey), a: attribute, sys: systemAs === "system", tc: options.themeColor ?? null, cs: options.colorSchemeMeta !== false }).replace(/</g, "\\u003c");
+    return `(function(){try{var c=${cfg},t=null,s=c.s,r=null;if(s&&s.from==='local')r=localStorage.getItem(s.name);if(s&&s.from==='cookie')document.cookie.split('; ').forEach(function(p){var i=p.indexOf('=');if(p.slice(0,i)===s.name)r=decodeURIComponent(p.slice(i+1));});if(r){var e=JSON.parse(r);t=e&&e.v===1?e.value:e;}var chosen=t==='light'||t==='dark'?t:null;if(!chosen)t=c.sys?'system':(matchMedia('${DARK}').matches?'dark':'light');document.documentElement.setAttribute(c.a,t);if(chosen&&c.tc)document.querySelectorAll('meta[name="theme-color"]').forEach(function(m){m.setAttribute('content',c.tc[chosen]);m.removeAttribute('media');});if(chosen&&c.cs){var m=document.querySelector('meta[name="color-scheme"]');if(m)m.setAttribute('content',chosen);}}catch(e){}})();`;
+  };
+  if (getActiveHead2()) {
+    const colors = options.themeColor;
+    useHead2({
+      htmlAttrs: { [attribute]: shown },
+      ...colors ? {
+        themeColor: () => value() === "system" ? [
+          { color: colors.light, media: "(prefers-color-scheme: light)" },
+          { color: colors.dark, media: DARK }
+        ] : colors[resolved()]
+      } : {},
+      ...options.colorSchemeMeta === false ? {} : { colorScheme: () => value() === "system" ? "light dark" : resolved() },
+      ...options.script === false ? {} : { script: [{ children: scriptBody() }] }
+    });
+  }
+  if (env.document && getOwner4()) createEffect3(apply);
+  return {
+    value,
+    resolved,
+    set,
+    toggle: () => set(resolved() === "dark" ? "light" : "dark"),
+    init: apply,
+    headScript: () => `<script>${scriptBody()}<\/script>`
+  };
+}
+
+// src/lib/theme/provider.ts
+var ThemesContext = createContext3(void 0, "themes");
+function ThemeProvider(props) {
+  const outer = useContext3(ThemesContext);
+  return ThemesContext.Provider({
+    // A nested provider adds to the axes above it rather than hiding them.
+    value: outer ? { ...outer, ...props.themes } : props.themes,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useTheme(name) {
+  const themes = useContext3(ThemesContext);
+  if (!themes || !(name in themes)) {
+    throw new Error(`[fluixi] No theme named "${name}" above this component: provide it with <ThemeProvider> or <ColorSchemeProvider>.`);
+  }
+  return themes[name];
+}
+function ColorSchemeProvider(props) {
+  const scheme = createColorScheme(props);
+  return ThemeProvider({
+    themes: { scheme },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useColorScheme() {
+  return useTheme("scheme");
+}
+
 // src/lib/router/index.ts
 import {
-  createSignal as createSignal7,
+  createSignal as createSignal8,
   createMemo as createMemo6,
   createResource as createResource5,
-  createEffect as createEffect3,
-  getOwner as getOwner2,
-  onCleanup as onCleanup2,
-  untrack as untrack3,
+  createEffect as createEffect4,
+  createRoot as createRoot3,
+  getOwner as getOwner5,
+  onCleanup as onCleanup4,
+  runWithOwner as runWithOwner2,
+  untrack as untrack4,
   flush
 } from "@fluixi/reactive/signal";
 
@@ -879,7 +1123,7 @@ import {
   createNativeElement,
   setAttribute
 } from "@fluixi/dom";
-import { createContext as createContext4, useContext as useContext4 } from "@fluixi/reactive/signal";
+import { createContext as createContext5, useContext as useContext5 } from "@fluixi/reactive/signal";
 import { get } from "@fluixi/utils/object";
 import { deepEqual } from "@fluixi/utils/compare";
 import {
@@ -888,80 +1132,99 @@ import {
   matchRoutes,
   matchPath
 } from "@fluixi/router";
-import {
-  createMemoryHistory,
-  createBrowserHistory as createBrowserHistory2,
-  matchRoutes as matchRoutes2,
-  matchPath as matchPath2
-} from "@fluixi/router";
 
 // src/lib/router/data.ts
 import {
   createResource as createResource4,
-  createSignal as createSignal6
+  createSignal as createSignal7
 } from "@fluixi/reactive/signal";
-
-// src/lib/server/hydration.ts
-import { isServer as domIsServer } from "@fluixi/dom";
-var hydrationDataMap = /* @__PURE__ */ new Map();
-function clearHydrationData() {
-  hydrationDataMap.clear();
-}
-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);
-    }
+import { currentResourceCache } from "@fluixi/reactive/signal";
+var revalidationListeners = /* @__PURE__ */ new Set();
+function onRevalidate(listener) {
+  revalidationListeners.add(listener);
+  return () => void revalidationListeners.delete(listener);
+}
+var reloadMounted = () => {
+  for (const listener of [...revalidationListeners]) listener();
+};
+function revalidate(key, store) {
+  const names = typeof key === "string" ? [key] : Array.isArray(key) ? key : null;
+  drop(names ?? key, store ?? 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();
+}
+var TABS_KEY = "fluixi:revalidate";
+function tellOtherTabs(names) {
+  try {
+    localStorage.setItem(TABS_KEY, JSON.stringify({ names, at: Date.now() + Math.random() }));
+  } catch {
   }
-  comments.forEach((comment) => comment.remove());
-  clearHydrationData();
 }
 if (typeof window !== "undefined") {
-  window.addEventListener("load", () => {
-    setTimeout(cleanupHydration, 100);
+  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, currentResourceCache());
+    } catch {
+    }
   });
 }
-
-// src/lib/router/data.ts
-var [revalidationVersion, setRevalidationVersion] = createSignal6(0);
+globalThis[/* @__PURE__ */ Symbol.for("fluixi.revalidate")] = (names) => revalidate(names);
 var RouteDataContext = createContext3(void 0, "route-data");
 var RouteDataProvider = RouteDataContext.Provider;
 
 // src/lib/router/index.ts
-import { runWithOwner as runWithOwner2 } from "@fluixi/reactive/signal";
-var RouterContext = createContext4(void 0, "router");
-var OutletContext = createContext4(void 0, "outlet");
-var LevelParamsContext = createContext4(void 0, "route-params");
-var RouteDataContext2 = createContext4(void 0, "route-data");
+import {
+  createMemoryHistory,
+  createBrowserHistory as createBrowserHistory2,
+  matchRoutes as matchRoutes2,
+  matchPath as matchPath2
+} from "@fluixi/router";
+import { runWithOwner as runWithOwner3 } from "@fluixi/reactive/signal";
+var RouterContext = createContext5(void 0, "router");
+var OutletContext = createContext5(void 0, "outlet");
+var LevelParamsContext = createContext5(void 0, "route-params");
+var RouteDataContext2 = createContext5(void 0, "route-data");
 function renderLayer(m, depth, base) {
   let data;
   const loader = m.route.data;
   if (typeof loader === "function") {
     let cancelled = false;
-    onCleanup2(() => {
+    onCleanup4(() => {
       cancelled = true;
     });
-    const owner = getOwner2();
-    const [resource2] = createResource5(
-      () => loader({ params: base.params, location: base.location }, owner, () => cancelled)
-    );
-    data = resource2;
+    const owner = getOwner5();
+    const router = useContext5(RouterContext);
+    let watching = false;
+    const trackDeps = (deps) => {
+      if (watching || cancelled) return;
+      watching = true;
+      runWithOwner2(owner, () => {
+        let first = true;
+        createEffect4(() => {
+          deps();
+          if (first) first = false;
+          else untrack4(() => void refetch());
+        });
+      });
+    };
+    const [resource2, { refetch }] = createResource5(() => {
+      const result = loader({ params: base.params, location: base.location }, owner, () => cancelled, trackDeps);
+      return router ? router.trackLoad(result) : result;
+    });
+    onCleanup4(onRevalidate(() => void refetch()));
+    data = () => {
+      const error = resource2.error;
+      if (error !== void 0 && error !== null) throw error;
+      return resource2();
+    };
+    Object.defineProperty(data, "loading", { get: () => resource2.loading });
+    Object.defineProperty(data, "state", { get: () => resource2.state });
   }
   const buildPage = () => RouteDataContext2.Provider({
     value: data,
@@ -979,33 +1242,62 @@ function renderLayer(m, depth, base) {
       });
     }
   });
-  if (!data) return buildPage();
+  if (!data) return { view: buildPage(), ready: () => true };
   const res = data;
-  const isLoading = () => res.loading;
-  const [ready, setReady] = createSignal7(untrack3(() => !isLoading()));
-  createEffect3(() => setReady(!isLoading()));
-  return createMemo6(() => ready() ? buildPage() : null);
+  const isLoading = () => {
+    const state = res.state;
+    return state === void 0 ? res.loading : state === "pending" || state === "unresolved";
+  };
+  const [ready, setReady] = createSignal8(untrack4(() => !isLoading()));
+  createEffect4(() => setReady(!isLoading()));
+  return { view: createMemo6(() => ready() ? buildPage() : null), ready };
 }
 function renderChild(ctx) {
   const childIdx = ctx.depth + 1;
-  const [childComp, setChildComp] = createSignal7(
-    untrack3(() => ctx.matched()[childIdx]?.component)
+  const [childComp, setChildComp] = createSignal8(
+    untrack4(() => ctx.matched()[childIdx]?.component)
   );
-  createEffect3(() => {
+  createEffect4(() => {
     const c = ctx.matched()[childIdx]?.component;
-    if (untrack3(childComp) !== c) setChildComp(() => c);
+    if (untrack4(childComp) !== c) setChildComp(() => c);
   });
-  return createMemo6(() => {
+  const owner = getOwner5();
+  let shown = null;
+  let pending = null;
+  const drop2 = (layer) => layer?.dispose();
+  onCleanup4(() => {
+    drop2(shown);
+    drop2(pending);
+    shown = pending = null;
+  });
+  const incoming = createMemo6(() => {
     const component = childComp();
-    if (!component) {
+    if (!component) return null;
+    const m = untrack4(() => ctx.matched())[childIdx];
+    return runWithOwner2(
+      owner,
+      () => createRoot3((dispose) => ({
+        ...renderLayer(m, childIdx, { matched: ctx.matched, params: ctx.params, location: ctx.location }),
+        dispose
+      }))
+    );
+  });
+  return createMemo6(() => {
+    const next = incoming();
+    if (!next) {
+      drop2(shown);
+      drop2(pending);
+      shown = pending = null;
       return ctx.notFound ? ctx.notFound() : null;
     }
-    const m = untrack3(() => 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) {
@@ -1039,7 +1331,9 @@ function Router(props) {
     base: props.base,
     history
   });
-  const [state, setState] = createSignal7(router.state());
+  const [state, setState] = createSignal8(router.state());
+  const [navigating, setNavigating] = createSignal8(false);
+  const [loads, setLoads] = createSignal8(0);
   let navigationId = 0;
   const takeMode = () => {
     const mode = pendingTransitionMode ?? (props.transition ?? "auto");
@@ -1049,12 +1343,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 flush();
+      const flushed = flush();
+      if (id === navigationId) setNavigating(false);
+      return flushed;
     };
     if (!prepared) {
       void runTransition(mode, commit);
@@ -1065,7 +1362,7 @@ function Router(props) {
       return runTransition(mode, commit);
     });
   });
-  onCleanup2(() => {
+  onCleanup4(() => {
     unsub();
     router.destroy();
     navigationId++;
@@ -1076,7 +1373,18 @@ function Router(props) {
   const ctx = {
     router,
     location: createMemo6(() => state().location),
-    params: createMemo6(() => state().match?.params ?? {})
+    params: createMemo6(() => 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,
@@ -1098,10 +1406,12 @@ var _ssrRouterStub = {
   router: { navigate: () => {
   } },
   location: () => ({ pathname: "", search: "", hash: "", query: {} }),
-  params: () => ({})
+  params: () => ({}),
+  isRouting: () => false,
+  trackLoad: (result) => result
 };
 function useRouter() {
-  const ctx = useContext4(RouterContext);
+  const ctx = useContext5(RouterContext);
   if (ctx) return ctx;
   if (typeof window === "undefined") return _ssrRouterStub;
   throw new Error("[router] useRouter must be used within <Router>");
@@ -1140,19 +1450,32 @@ var LINK_OWN_PROPS = /* @__PURE__ */ new Set([
   "children"
 ]);
 function Link(props) {
-  const ctx = useContext4(RouterContext);
-  const navigate = () => ctx?.router.navigate(read(props.href) ?? "", { replace: read(props.replace) });
+  const ctx = useContext5(RouterContext);
+  const navigate = () => ctx.router.navigate(read(props.href) ?? "", { replace: read(props.replace) });
   const a = createNativeElement("a");
   setAttribute(a, "href", read(props.href) ?? "");
   if (props.slot) 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") setAttribute(a, k, String(v));
+    if (typeof v === "function") {
+      if (/^on[A-Z]/.test(k)) continue;
+      const read3 = v;
+      const apply = () => {
+        const value = read3();
+        if (value == null || value === false) a.removeAttribute?.(k);
+        else setAttribute(a, k, String(value));
+      };
+      if (typeof a.addEventListener === "function") createEffect4(apply);
+      else apply();
+      continue;
+    }
+    if (v != null) 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();
     });
@@ -1161,7 +1484,7 @@ function Link(props) {
     if (base) setAttribute(a, "class", base);
   }
   if (typeof a.addEventListener === "function") {
-    createEffect3(() => {
+    createEffect4(() => {
       const href = read(props.href) ?? "";
       a.setAttribute("href", href);
       const base = read(props.className ?? props.class) ?? "";
@@ -1234,20 +1557,20 @@ var core_default = {
   // render,
   onMount,
   onUnmount,
-  createEffect: createEffect4,
+  createEffect: createEffect5,
   createMemo: createMemo7,
-  createSignal: createSignal8,
+  createSignal: createSignal9,
   createContext: createContext3,
-  createRoot: createRoot3,
+  createRoot: createRoot4,
   createDeferred: createDeferred2,
   createComputed: createComputed2,
   createRenderEffect: createRenderEffect3,
   createSelector,
-  onCleanup: onCleanup3,
-  getOwner: getOwner3,
-  runWithOwner: runWithOwner3,
+  onCleanup: onCleanup5,
+  getOwner: getOwner6,
+  runWithOwner: runWithOwner4,
   batch: batch2,
-  untrack: untrack4,
+  untrack: untrack5,
   useContext: useContext3,
   setOwner,
   // Control Flow
@@ -1277,6 +1600,7 @@ export {
   $component,
   Await,
   ClientOnly,
+  ColorSchemeProvider,
   Dynamic,
   ErrorBoundary,
   FRAMEWORK_NAME,
@@ -1293,6 +1617,7 @@ export {
   Suspense,
   SuspenseList,
   Switch,
+  ThemeProvider,
   VERSION2 as VERSION,
   addClass,
   appendChildren,
@@ -1302,26 +1627,24 @@ export {
   clientOnly,
   closest,
   composeProviders,
+  createColorScheme,
   createComponent,
   createComputed2 as createComputed,
-  createConsumer,
   createContext3 as createContext,
-  createContextWithProvider,
   createDebounce,
   createDebouncedResource,
   createDebouncedSignal,
   createDeferred2 as createDeferred,
-  createEffect4 as createEffect,
+  createEffect5 as createEffect,
   createIsomorphicState,
   createIsomorphicStore,
   createMemo7 as createMemo,
-  createMemoryStorage,
   createProvider,
   createRenderEffect3 as createRenderEffect,
   createResource6 as createResource,
-  createRoot3 as createRoot,
+  createRoot4 as createRoot,
   createSelector,
-  createSignal8 as createSignal,
+  createSignal9 as createSignal,
   createStore,
   createTheme,
   core_default as default,
@@ -1332,7 +1655,7 @@ export {
   env,
   getAttribute,
   getOffset,
-  getOwner3 as getOwner,
+  getOwner6 as getOwner,
   getStyle,
   hasClass,
   html,
@@ -1350,7 +1673,7 @@ export {
   mergeProps,
   observeIntersection2 as observeIntersection,
   observeResize,
-  onCleanup3 as onCleanup,
+  onCleanup5 as onCleanup,
   onMount,
   onUnmount,
   portal,
@@ -1362,22 +1685,23 @@ export {
   removeChildren,
   removeClass,
   render,
+  requireContext,
   resource,
-  runWithOwner3 as runWithOwner,
+  runWithOwner4 as runWithOwner,
   scrollIntoView,
   setAttribute2 as setAttribute,
   setOwner,
   setStyles,
-  signal,
+  signal2 as signal,
   splitProps,
-  storage,
   styleMap,
   svg,
   toggleClass,
-  untrack4 as untrack,
+  untrack5 as untrack,
   untrackStore,
   unwrap,
   useCallback,
+  useColorScheme,
   useContext3 as useContext,
   useEffect,
   useEventListener,
@@ -1385,9 +1709,9 @@ export {
   useMemo,
   useNavigate,
   useParams,
-  useProvide,
   useReducer,
   useRef,
   useRouter,
+  useTheme,
   waitForElement
 };