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

package/dist/src/lib/core.cjs

@@ -23,6 +23,7 @@ __export(core_exports, {
   $component: () => $component,
   Await: () => Await,
   ClientOnly: () => import_dom16.ClientOnly,
+  ColorSchemeProvider: () => ColorSchemeProvider,
   Dynamic: () => import_dom16.Dynamic,
   ErrorBoundary: () => import_dom16.ErrorBoundary,
   FRAMEWORK_NAME: () => FRAMEWORK_NAME,
@@ -39,46 +40,46 @@ __export(core_exports, {
   Suspense: () => Suspense,
   SuspenseList: () => SuspenseList,
   Switch: () => import_dom16.Switch,
+  ThemeProvider: () => ThemeProvider,
   VERSION: () => VERSION2,
   addClass: () => import_dom18.addClass,
   appendChildren: () => import_dom18.appendChildren,
-  batch: () => import_signal15.batch,
+  batch: () => import_signal18.batch,
   classMap: () => import_dom19.classMap,
   cleanupDelegation: () => cleanupDelegation,
   clientOnly: () => clientOnly,
   closest: () => import_dom18.closest,
   composeProviders: () => composeProviders,
+  createColorScheme: () => createColorScheme,
   createComponent: () => createComponent,
-  createComputed: () => import_signal15.createComputed,
-  createConsumer: () => createConsumer,
+  createComputed: () => import_signal18.createComputed,
   createContext: () => createContext3,
-  createContextWithProvider: () => createContextWithProvider,
-  createDebounce: () => import_signal16.createDebounce,
-  createDebouncedResource: () => import_signal16.createDebouncedResource,
-  createDebouncedSignal: () => import_signal16.createDebouncedSignal,
-  createDeferred: () => import_signal15.createDeferred,
-  createEffect: () => import_signal15.createEffect,
+  createDebounce: () => import_signal19.createDebounce,
+  createDebouncedResource: () => import_signal19.createDebouncedResource,
+  createDebouncedSignal: () => import_signal19.createDebouncedSignal,
+  createDeferred: () => import_signal18.createDeferred,
+  createEffect: () => import_signal18.createEffect,
   createIsomorphicState: () => createIsomorphicState,
   createIsomorphicStore: () => createIsomorphicStore,
-  createMemo: () => import_signal15.createMemo,
-  createMemoryStorage: () => createMemoryStorage,
+  createMemo: () => import_signal18.createMemo,
   createProvider: () => createProvider,
-  createRenderEffect: () => import_signal15.createRenderEffect,
-  createResource: () => import_signal15.createResource,
-  createRoot: () => import_signal15.createRoot,
-  createSelector: () => import_signal16.createSelector,
-  createSignal: () => import_signal15.createSignal,
+  createRenderEffect: () => import_signal18.createRenderEffect,
+  createResource: () => import_signal18.createResource,
+  createRoot: () => import_signal18.createRoot,
+  createSelector: () => import_signal19.createSelector,
+  createSignal: () => import_signal18.createSignal,
   createStore: () => import_store.createStore,
   createTheme: () => createTheme,
+  css: () => import_dom17.css,
   default: () => core_default,
   deferred: () => deferred,
   delegate: () => import_dom18.delegate,
   domCreateElement: () => import_dom18.createElement,
-  effect: () => import_signal15.effect,
+  effect: () => import_signal18.effect,
   env: () => env,
   getAttribute: () => import_dom18.getAttribute,
   getOffset: () => import_dom18.getOffset,
-  getOwner: () => import_signal15.getOwner,
+  getOwner: () => import_signal18.getOwner,
   getStyle: () => import_dom18.getStyle,
   hasClass: () => import_dom18.hasClass,
   html: () => import_dom17.html,
@@ -92,11 +93,11 @@ __export(core_exports, {
   isServer: () => import_dom12.isServer,
   isVisible: () => import_dom18.isVisible,
   lazy: () => lazy,
-  memo: () => import_signal15.memo,
+  memo: () => import_signal18.memo,
   mergeProps: () => import_dom19.mergeProps,
   observeIntersection: () => import_dom18.observeIntersection,
   observeResize: () => import_dom18.observeResize,
-  onCleanup: () => import_signal15.onCleanup,
+  onCleanup: () => import_signal18.onCleanup,
   onMount: () => onMount,
   onUnmount: () => onUnmount,
   portal: () => portal,
@@ -108,22 +109,23 @@ __export(core_exports, {
   removeChildren: () => import_dom18.removeChildren,
   removeClass: () => import_dom18.removeClass,
   render: () => render,
-  resource: () => import_signal15.resource,
-  runWithOwner: () => import_signal15.runWithOwner,
+  requireContext: () => requireContext,
+  resource: () => import_signal18.resource,
+  runWithOwner: () => import_signal18.runWithOwner,
   scrollIntoView: () => import_dom18.scrollIntoView,
   setAttribute: () => import_dom18.setAttribute,
-  setOwner: () => import_signal15.setOwner,
+  setOwner: () => import_signal18.setOwner,
   setStyles: () => import_dom18.setStyles,
-  signal: () => import_signal15.signal,
+  signal: () => import_signal18.signal,
   splitProps: () => import_dom19.splitProps,
-  storage: () => storage,
   styleMap: () => import_dom19.styleMap,
   svg: () => import_dom17.svg,
   toggleClass: () => import_dom18.toggleClass,
-  untrack: () => import_signal15.untrack,
+  untrack: () => import_signal18.untrack,
   untrackStore: () => import_store.untrackStore,
   unwrap: () => import_store.unwrap,
   useCallback: () => useCallback,
+  useColorScheme: () => useColorScheme,
   useContext: () => useContext3,
   useEffect: () => useEffect,
   useEventListener: () => useEventListener,
@@ -131,15 +133,15 @@ __export(core_exports, {
   useMemo: () => useMemo,
   useNavigate: () => useNavigate,
   useParams: () => useParams,
-  useProvide: () => useProvide,
   useReducer: () => useReducer,
   useRef: () => useRef,
   useRouter: () => useRouter,
+  useTheme: () => useTheme,
   waitForElement: () => import_dom18.waitForElement
 });
 module.exports = __toCommonJS(core_exports);
-var import_signal15 = require("@fluixi/reactive/signal");
-var import_signal16 = require("@fluixi/reactive/signal");
+var import_signal18 = require("@fluixi/reactive/signal");
+var import_signal19 = require("@fluixi/reactive/signal");
 var import_operators = require("@fluixi/reactive/operators");
 
 // src/lib/render/index.ts
@@ -150,7 +152,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");
@@ -646,81 +648,20 @@ function cleanupDelegation() {
 // src/lib/context/context.ts
 var import_dom10 = require("@fluixi/dom");
 var import_signal7 = require("@fluixi/reactive/signal");
-var import_signal8 = require("@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 (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),
@@ -731,10 +672,38 @@ function useContext3(context) {
   const value = (0, import_signal7.useContext)(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 = (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.`);
+}
 
 // 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() {
@@ -748,7 +717,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 };
 }
@@ -760,9 +729,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: (0, import_storage.createSyncStorage)({ adapter: (0, import_browser.localStorageAdapter)() }), key: target } : target;
+      storage.set(key2, v);
     } catch {
     }
   };
@@ -775,7 +747,7 @@ function createIsomorphicStore(key, options) {
   };
   const fields = {};
   for (const k of Object.keys(options.fallback)) {
-    fields[k] = (0, import_signal9.createMemo)(() => value()[k]);
+    fields[k] = (0, import_signal8.createMemo)(() => value()[k], void 0, { name: `${key}.${String(k)}` });
   }
   let initPromise = null;
   const ensureInit = () => {
@@ -799,20 +771,6 @@ var import_dom13 = require("@fluixi/dom");
 function isClient() {
   return !(0, import_dom13.isServer)();
 }
-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;
@@ -826,36 +784,205 @@ function clientOnly(fn, fallback) {
 }
 
 // src/lib/theme/index.ts
+var import_head = require("@fluixi/head");
+var import_signal11 = require("@fluixi/reactive/signal");
+var import_storage3 = require("@fluixi/storage");
+
+// src/lib/storage/persisted.ts
+var import_signal9 = require("@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 = (0, import_signal9.signal)(isAsync(storage) ? fallback : storage.get(key) ?? fallback, { name });
+  const put = (value) => state.set(() => value);
+  const resolve = (next) => typeof next === "function" ? next((0, import_signal9.untrack)(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 ((0, import_signal9.getOwner)()) (0, import_signal9.onCleanup)(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 ((0, import_signal9.getOwner)()) (0, import_signal9.onCleanup)(off);
+  const ready = storage.get(key).then((value) => {
+    if (!written) put(value ?? fallback);
+  });
+  return Object.assign(() => state(), {
+    ready,
+    async set(next, extra) {
+      const previous = (0, import_signal9.untrack)(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
+var import_dom14 = require("@fluixi/dom");
 var import_signal10 = require("@fluixi/reactive/signal");
+var import_storage2 = require("@fluixi/storage");
+var import_browser2 = require("@fluixi/storage/browser");
+var import_server = require("@fluixi/storage/server");
+var StorageContext = (0, import_signal10.createContext)(void 0, "storage");
+var AsyncStorageContext = (0, import_signal10.createContext)(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 import_storage2.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 = (0, import_dom14.getRequestContext)();
+  const options = { httpOnly: false, ...cookie };
+  switch (scope) {
+    case "local":
+      return (0, import_browser2.localStorageAdapter)();
+    case "session":
+      return (0, import_browser2.sessionStorageAdapter)();
+    case "request":
+      if (isBrowser()) return cached(perPage, "request", import_storage2.memoryStorage);
+      if (!ctx) requestRequired(scope);
+      return cached(perRequest.get(ctx) ?? perRequest.set(ctx, /* @__PURE__ */ new Map()).get(ctx), "request", import_server.requestStorage);
+    case "cookie": {
+      const id = `cookie:${JSON.stringify(options)}`;
+      if (isBrowser()) {
+        const { httpOnly: _ignored, ...browser } = options;
+        return cached(perPage, id, () => (0, import_browser2.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,
+        () => (0, import_server.cookieStorage)({
+          ...options,
+          request: raw && typeof raw === "object" && ("headers" in raw || "getHeader" in raw) ? (0, import_server.toStorageRequest)(raw) : void 0,
+          response: {
+            appendHeader(name, value) {
+              if (!(0, import_dom14.appendResponseHeader)(name, value, target)) {
+                throw new import_storage2.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 = (0, import_signal10.useContext)(StorageContext);
+    if (provided) return options.namespace ? provided.namespace(options.namespace) : provided;
+  }
+  return (0, import_storage2.createSyncStorage)({ ...storageOptions, adapter: resolveAdapter(scope, cookie) });
+}
+function resolveAdapter(scope, cookie) {
+  if (scope !== "auto") return adapterFor(scope, cookie);
+  if (isBrowser()) return adapterFor("local");
+  if (!(0, import_dom14.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 import_storage3.StorageUnavailableError) 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] = (0, import_signal11.createSignal)(null);
+  const value = () => {
+    const local = unsaved();
+    if (local !== null) return local;
+    const saved = stored?.();
+    return valid(saved) ? saved : fallback;
   };
-  const [value, setValue] = (0, import_signal10.createSignal)(detectInitial());
-  const [isLoading, setLoading] = (0, import_signal10.createSignal)(false);
+  const [isLoading, setLoading] = (0, import_signal11.createSignal)(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) {
@@ -872,20 +999,130 @@ 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 ((0, import_head.getActiveHead)()) {
+    (0, import_head.useHead)({
+      htmlAttrs: { [attribute]: () => value() },
+      ...options.script === false ? {} : { script: [{ children: scriptBody() }] }
+    });
+  }
   return { value, isLoading, set, toggle, init, headScript };
 }
 
-// src/lib/router/index.ts
+// src/lib/theme/color-scheme.ts
+var import_head2 = require("@fluixi/head");
 var import_signal12 = require("@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] = (0, import_signal12.createSignal)(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] = (0, import_signal12.createSignal)(media?.matches ?? false);
+  if (media) {
+    const onChange = () => setOsDark(media.matches);
+    media.addEventListener?.("change", onChange);
+    if ((0, import_signal12.getOwner)()) (0, import_signal12.onCleanup)(() => 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 ((0, import_head2.getActiveHead)()) {
+    const colors = options.themeColor;
+    (0, import_head2.useHead)({
+      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 && (0, import_signal12.getOwner)()) (0, import_signal12.createEffect)(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
+var import_signal15 = require("@fluixi/reactive/signal");
 
 // src/lib/router/transition.ts
 function supportsViewTransitions() {
@@ -937,76 +1174,95 @@ function runTransition(mode, commit) {
 
 // src/lib/router/index.ts
 var import_dom15 = require("@fluixi/dom");
-var import_signal13 = require("@fluixi/reactive/signal");
+var import_signal16 = require("@fluixi/reactive/signal");
 var import_object = require("@fluixi/utils/object");
 var import_compare = require("@fluixi/utils/compare");
 var import_router = require("@fluixi/router");
-var import_router2 = require("@fluixi/router");
 
 // src/lib/router/data.ts
-var import_signal11 = require("@fluixi/reactive/signal");
-
-// src/lib/server/hydration.ts
-var import_dom14 = require("@fluixi/dom");
-var hydrationDataMap = /* @__PURE__ */ new Map();
-function clearHydrationData() {
-  hydrationDataMap.clear();
+var import_signal13 = require("@fluixi/reactive/signal");
+var import_signal14 = require("@fluixi/reactive/signal");
+var revalidationListeners = /* @__PURE__ */ new Set();
+function onRevalidate(listener) {
+  revalidationListeners.add(listener);
+  return () => void revalidationListeners.delete(listener);
 }
-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);
-    }
+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 ?? (0, import_signal14.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, (0, import_signal14.currentResourceCache)());
+    } catch {
+    }
   });
 }
-
-// src/lib/router/data.ts
-var [revalidationVersion, setRevalidationVersion] = (0, import_signal11.createSignal)(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
-var import_signal14 = require("@fluixi/reactive/signal");
-var RouterContext = (0, import_signal13.createContext)(void 0, "router");
-var OutletContext = (0, import_signal13.createContext)(void 0, "outlet");
-var LevelParamsContext = (0, import_signal13.createContext)(void 0, "route-params");
-var RouteDataContext2 = (0, import_signal13.createContext)(void 0, "route-data");
+var import_router2 = require("@fluixi/router");
+var import_signal17 = require("@fluixi/reactive/signal");
+var RouterContext = (0, import_signal16.createContext)(void 0, "router");
+var OutletContext = (0, import_signal16.createContext)(void 0, "outlet");
+var LevelParamsContext = (0, import_signal16.createContext)(void 0, "route-params");
+var RouteDataContext2 = (0, import_signal16.createContext)(void 0, "route-data");
 function renderLayer(m, depth, base) {
   let data;
   const loader = m.route.data;
   if (typeof loader === "function") {
     let cancelled = false;
-    (0, import_signal12.onCleanup)(() => {
+    (0, import_signal15.onCleanup)(() => {
       cancelled = true;
     });
-    const owner = (0, import_signal12.getOwner)();
-    const [resource2] = (0, import_signal12.createResource)(
-      () => loader({ params: base.params, location: base.location }, owner, () => cancelled)
-    );
-    data = resource2;
+    const owner = (0, import_signal15.getOwner)();
+    const router = (0, import_signal16.useContext)(RouterContext);
+    let watching = false;
+    const trackDeps = (deps) => {
+      if (watching || cancelled) return;
+      watching = true;
+      (0, import_signal15.runWithOwner)(owner, () => {
+        let first = true;
+        (0, import_signal15.createEffect)(() => {
+          deps();
+          if (first) first = false;
+          else (0, import_signal15.untrack)(() => void refetch());
+        });
+      });
+    };
+    const [resource2, { refetch }] = (0, import_signal15.createResource)(() => {
+      const result = loader({ params: base.params, location: base.location }, owner, () => cancelled, trackDeps);
+      return router ? router.trackLoad(result) : result;
+    });
+    (0, import_signal15.onCleanup)(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,
@@ -1024,33 +1280,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] = (0, import_signal12.createSignal)((0, import_signal12.untrack)(() => !isLoading()));
-  (0, import_signal12.createEffect)(() => setReady(!isLoading()));
-  return (0, import_signal12.createMemo)(() => ready() ? buildPage() : null);
+  const isLoading = () => {
+    const state = res.state;
+    return state === void 0 ? res.loading : state === "pending" || state === "unresolved";
+  };
+  const [ready, setReady] = (0, import_signal15.createSignal)((0, import_signal15.untrack)(() => !isLoading()));
+  (0, import_signal15.createEffect)(() => setReady(!isLoading()));
+  return { view: (0, import_signal15.createMemo)(() => ready() ? buildPage() : null), ready };
 }
 function renderChild(ctx) {
   const childIdx = ctx.depth + 1;
-  const [childComp, setChildComp] = (0, import_signal12.createSignal)(
-    (0, import_signal12.untrack)(() => ctx.matched()[childIdx]?.component)
+  const [childComp, setChildComp] = (0, import_signal15.createSignal)(
+    (0, import_signal15.untrack)(() => ctx.matched()[childIdx]?.component)
   );
-  (0, import_signal12.createEffect)(() => {
+  (0, import_signal15.createEffect)(() => {
     const c = ctx.matched()[childIdx]?.component;
-    if ((0, import_signal12.untrack)(childComp) !== c) setChildComp(() => c);
+    if ((0, import_signal15.untrack)(childComp) !== c) setChildComp(() => c);
   });
-  return (0, import_signal12.createMemo)(() => {
+  const owner = (0, import_signal15.getOwner)();
+  let shown = null;
+  let pending = null;
+  const drop2 = (layer) => layer?.dispose();
+  (0, import_signal15.onCleanup)(() => {
+    drop2(shown);
+    drop2(pending);
+    shown = pending = null;
+  });
+  const incoming = (0, import_signal15.createMemo)(() => {
     const component = childComp();
-    if (!component) {
+    if (!component) return null;
+    const m = (0, import_signal15.untrack)(() => ctx.matched())[childIdx];
+    return (0, import_signal15.runWithOwner)(
+      owner,
+      () => (0, import_signal15.createRoot)((dispose) => ({
+        ...renderLayer(m, childIdx, { matched: ctx.matched, params: ctx.params, location: ctx.location }),
+        dispose
+      }))
+    );
+  });
+  return (0, import_signal15.createMemo)(() => {
+    const next = incoming();
+    if (!next) {
+      drop2(shown);
+      drop2(pending);
+      shown = pending = null;
       return ctx.notFound ? ctx.notFound() : null;
     }
-    const m = (0, import_signal12.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) {
@@ -1084,7 +1369,9 @@ function Router(props) {
     base: props.base,
     history
   });
-  const [state, setState] = (0, import_signal12.createSignal)(router.state());
+  const [state, setState] = (0, import_signal15.createSignal)(router.state());
+  const [navigating, setNavigating] = (0, import_signal15.createSignal)(false);
+  const [loads, setLoads] = (0, import_signal15.createSignal)(0);
   let navigationId = 0;
   const takeMode = () => {
     const mode = pendingTransitionMode ?? (props.transition ?? "auto");
@@ -1094,12 +1381,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_signal12.flush)();
+      const flushed = (0, import_signal15.flush)();
+      if (id === navigationId) setNavigating(false);
+      return flushed;
     };
     if (!prepared) {
       void runTransition(mode, commit);
@@ -1110,18 +1400,29 @@ function Router(props) {
       return runTransition(mode, commit);
     });
   });
-  (0, import_signal12.onCleanup)(() => {
+  (0, import_signal15.onCleanup)(() => {
     unsub();
     router.destroy();
     navigationId++;
   });
-  const matched = (0, import_signal12.createMemo)(
+  const matched = (0, import_signal15.createMemo)(
     () => (state().match?.matched ?? []).filter((m) => m.component)
   );
   const ctx = {
     router,
-    location: (0, import_signal12.createMemo)(() => state().location),
-    params: (0, import_signal12.createMemo)(() => state().match?.params ?? {})
+    location: (0, import_signal15.createMemo)(() => state().location),
+    params: (0, import_signal15.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,
@@ -1143,17 +1444,19 @@ var _ssrRouterStub = {
   router: { navigate: () => {
   } },
   location: () => ({ pathname: "", search: "", hash: "", query: {} }),
-  params: () => ({})
+  params: () => ({}),
+  isRouting: () => false,
+  trackLoad: (result) => result
 };
 function useRouter() {
-  const ctx = (0, import_signal13.useContext)(RouterContext);
+  const ctx = (0, import_signal16.useContext)(RouterContext);
   if (ctx) return ctx;
   if (typeof window === "undefined") return _ssrRouterStub;
   throw new Error("[router] useRouter must be used within <Router>");
 }
 function useParams() {
   const params = useRouter().params;
-  return (0, import_signal12.createMemo)(() => params(), {}, {
+  return (0, import_signal15.createMemo)(() => params(), {}, {
     equals: (a, b) => JSON.stringify(a) === JSON.stringify(b)
   });
 }
@@ -1185,19 +1488,32 @@ var LINK_OWN_PROPS = /* @__PURE__ */ new Set([
   "children"
 ]);
 function Link(props) {
-  const ctx = (0, import_signal13.useContext)(RouterContext);
-  const navigate = () => ctx?.router.navigate(read(props.href) ?? "", { replace: read(props.replace) });
+  const ctx = (0, import_signal16.useContext)(RouterContext);
+  const navigate = () => ctx.router.navigate(read(props.href) ?? "", { replace: read(props.replace) });
   const a = (0, import_dom15.createNativeElement)("a");
   (0, import_dom15.setAttribute)(a, "href", read(props.href) ?? "");
   if (props.slot) (0, import_dom15.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_dom15.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 (0, import_dom15.setAttribute)(a, k, String(value));
+      };
+      if (typeof a.addEventListener === "function") (0, import_signal15.createEffect)(apply);
+      else apply();
+      continue;
+    }
+    if (v != null) (0, import_dom15.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();
     });
@@ -1206,7 +1522,7 @@ function Link(props) {
     if (base) (0, import_dom15.setAttribute)(a, "class", base);
   }
   if (typeof a.addEventListener === "function") {
-    (0, import_signal12.createEffect)(() => {
+    (0, import_signal15.createEffect)(() => {
       const href = read(props.href) ?? "";
       a.setAttribute("href", href);
       const base = read(props.className ?? props.class) ?? "";
@@ -1238,22 +1554,22 @@ var core_default = {
   // render,
   onMount,
   onUnmount,
-  createEffect: import_signal15.createEffect,
-  createMemo: import_signal15.createMemo,
-  createSignal: import_signal15.createSignal,
+  createEffect: import_signal18.createEffect,
+  createMemo: import_signal18.createMemo,
+  createSignal: import_signal18.createSignal,
   createContext: createContext3,
-  createRoot: import_signal15.createRoot,
-  createDeferred: import_signal15.createDeferred,
-  createComputed: import_signal15.createComputed,
-  createRenderEffect: import_signal15.createRenderEffect,
-  createSelector: import_signal16.createSelector,
-  onCleanup: import_signal15.onCleanup,
-  getOwner: import_signal15.getOwner,
-  runWithOwner: import_signal15.runWithOwner,
-  batch: import_signal15.batch,
-  untrack: import_signal15.untrack,
+  createRoot: import_signal18.createRoot,
+  createDeferred: import_signal18.createDeferred,
+  createComputed: import_signal18.createComputed,
+  createRenderEffect: import_signal18.createRenderEffect,
+  createSelector: import_signal19.createSelector,
+  onCleanup: import_signal18.onCleanup,
+  getOwner: import_signal18.getOwner,
+  runWithOwner: import_signal18.runWithOwner,
+  batch: import_signal18.batch,
+  untrack: import_signal18.untrack,
   useContext: useContext3,
-  setOwner: import_signal15.setOwner,
+  setOwner: import_signal18.setOwner,
   // Control Flow
   // Show,
   // For,