@fluixi/core 1.0.0-alpha.100

package/dist/src/lib/client/index.cjs

@@ -0,0 +1,1210 @@
+/*! @fluixi/core v1.0.0-alpha.100 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/render/lazy.ts
+function fromChunk(value) {
+  if (value != null && (typeof value === "object" || typeof value === "function")) {
+    try {
+      value["$lazy"] = true;
+    } catch {
+    }
+  }
+  return value;
+}
+function lazy(loader, options) {
+  let resolved;
+  let promise;
+  let component;
+  function load() {
+    if (!promise) {
+      promise = loader().then((mod) => resolved = mod.default);
+    }
+    return promise;
+  }
+  if (options?.preload) load();
+  const LazyWrapper = ((props) => {
+    if (resolved) {
+      const C = resolved;
+      return fromChunk((0, import_signal3.untrack)(() => C(props)));
+    }
+    if (!component) {
+      const [resource] = (0, import_signal3.createResource)(() => load(), { transport: false });
+      component = resource;
+      if (resource.error) throw resource.error;
+    }
+    return (0, import_signal3.createMemo)(() => {
+      const C = component();
+      return C ? fromChunk((0, import_dom7.createComponent)(C, props)) : void 0;
+    });
+  });
+  LazyWrapper.preload = () => load().then(() => void 0);
+  LazyWrapper.$lazy = true;
+  LazyWrapper.loader = loader;
+  return LazyWrapper;
+}
+var import_dom7, import_signal3;
+var init_lazy = __esm({
+  "src/lib/render/lazy.ts"() {
+    "use strict";
+    import_dom7 = require("@fluixi/dom");
+    import_signal3 = require("@fluixi/reactive/signal");
+  }
+});
+
+// src/lib/router/transition.ts
+function supportsViewTransitions() {
+  return typeof document !== "undefined" && typeof document.startViewTransition === "function";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function shouldAnimate(mode) {
+  return mode !== "none" && supportsViewTransitions() && !prefersReducedMotion();
+}
+function prepareComponents(components) {
+  const pending = [];
+  for (const component of components) {
+    const preload = component?.preload;
+    if (typeof preload === "function") {
+      try {
+        const result = preload();
+        if (result && typeof result.then === "function") {
+          pending.push(result.catch(() => void 0));
+        }
+      } catch {
+      }
+    }
+  }
+  return pending.length ? Promise.all(pending).then(() => void 0) : null;
+}
+function runTransition(mode, commit) {
+  if (!shouldAnimate(mode)) {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+  const start = document.startViewTransition;
+  try {
+    const transition = start.call(document, () => commit());
+    transition.finished?.catch(() => void 0);
+    transition.ready?.catch(() => void 0);
+    return transition.updateCallbackDone.catch(() => void 0);
+  } catch {
+    return Promise.resolve(commit()).then(() => void 0);
+  }
+}
+var init_transition = __esm({
+  "src/lib/router/transition.ts"() {
+    "use strict";
+  }
+});
+
+// src/lib/router/scroll.ts
+function keepScroll(initial) {
+  const read2 = () => {
+    try {
+      return JSON.parse(sessionStorage.getItem(STORE) ?? "{}");
+    } catch {
+      return {};
+    }
+  };
+  const positions = read2();
+  const write = () => {
+    const keys = Object.keys(positions);
+    for (const key of keys.slice(0, Math.max(0, keys.length - KEEP))) delete positions[key];
+    try {
+      sessionStorage.setItem(STORE, JSON.stringify(positions));
+    } catch {
+    }
+  };
+  let current = initial.key;
+  const save = () => {
+    if (current === void 0) return;
+    delete positions[current];
+    positions[current] = window.scrollY;
+    write();
+  };
+  const restoration = history.scrollRestoration;
+  history.scrollRestoration = "manual";
+  window.addEventListener("pagehide", save);
+  const to = (top) => window.scrollTo({ top, left: 0, behavior: "instant" });
+  const toHash = (hash) => {
+    if (!hash || hash === "#") return false;
+    const target = document.getElementById(decodeURIComponent(hash.slice(1)));
+    target?.scrollIntoView({ behavior: "instant" });
+    return target !== null;
+  };
+  return {
+    leave: save,
+    arrive(location, from) {
+      current = location.key;
+      if (location.action === "pop" || from === void 0) {
+        const y = location.key === void 0 ? void 0 : positions[location.key];
+        if (y !== void 0) to(y);
+        return;
+      }
+      if (location.action === "replace" && location.pathname === from.pathname) return;
+      if (!toHash(location.hash)) to(0);
+    },
+    dispose() {
+      window.removeEventListener("pagehide", save);
+      history.scrollRestoration = restoration;
+    }
+  };
+}
+var STORE, KEEP;
+var init_scroll = __esm({
+  "src/lib/router/scroll.ts"() {
+    "use strict";
+    STORE = "fx:scroll";
+    KEEP = 100;
+  }
+});
+
+// src/lib/context/context.ts
+function createContext3(defaultValue, name) {
+  const context = (0, import_signal7.createContext)(defaultValue, name);
+  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
+    })
+  );
+  return {
+    id: context.id,
+    Provider: (0, import_dom11.asProvider)(Provider),
+    defaultValue
+  };
+}
+var import_dom11, import_signal7;
+var init_context = __esm({
+  "src/lib/context/context.ts"() {
+    "use strict";
+    import_dom11 = require("@fluixi/dom");
+    import_signal7 = require("@fluixi/reactive/signal");
+  }
+});
+
+// src/lib/router/data.ts
+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_signal9.currentResourceCache)();
+    const key = name + ":" + JSON.stringify(args);
+    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;
+        }
+      );
+      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, store) {
+  const names = typeof key === "string" ? [key] : Array.isArray(key) ? key : null;
+  drop(names ?? key, store ?? (0, import_signal9.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 {
+  }
+}
+function createAsync(fetcher, source) {
+  const [data] = (0, import_signal8.createResource)(source || (() => true), fetcher);
+  return data;
+}
+function getSubmissionSignal(url) {
+  if (!submissionState.has(url)) {
+    submissionState.set(
+      url,
+      (0, import_signal8.createSignal)(void 0)
+    );
+  }
+  return submissionState.get(url);
+}
+function getSubmissionsSignal(url) {
+  if (!submissionsState.has(url)) submissionsState.set(url, (0, import_signal8.createSignal)([]));
+  return submissionsState.get(url);
+}
+function action(fn, name, options = {}) {
+  const actionUrl = name || fn.name || "action";
+  const submit = async (...args) => {
+    const input = args.length > 1 ? args : args[0];
+    const [, setSubmission] = getSubmissionSignal(actionUrl);
+    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(...args);
+    };
+    entry = {
+      input,
+      pending: true,
+      clear,
+      retry
+    };
+    setSubmission(entry);
+    setSubmissions((list) => [...list, entry]);
+    try {
+      const result = await fn(...args);
+      setSubmission({
+        input,
+        result,
+        pending: false,
+        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) {
+      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, 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_signal8, import_signal9, revalidationListeners, reloadMounted, TABS_KEY, submissionState, submissionsState, RouteDataContext, RouteDataProvider;
+var init_data = __esm({
+  "src/lib/router/data.ts"() {
+    "use strict";
+    import_signal8 = require("@fluixi/reactive/signal");
+    import_signal9 = require("@fluixi/reactive/signal");
+    init_context();
+    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_signal9.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;
+  }
+});
+
+// src/lib/router/index.ts
+var router_exports = {};
+__export(router_exports, {
+  A: () => A,
+  ActionForm: () => ActionForm,
+  Link: () => Link,
+  Outlet: () => Outlet,
+  Redirect: () => Redirect,
+  Router: () => Router,
+  action: () => action,
+  cache: () => cache,
+  createAsync: () => createAsync,
+  createBrowserHistory: () => import_router2.createBrowserHistory,
+  createMemoryHistory: () => import_router2.createMemoryHistory,
+  lazy: () => lazy,
+  matchPath: () => import_router2.matchPath,
+  matchRoutes: () => import_router2.matchRoutes,
+  prefersReducedMotion: () => prefersReducedMotion,
+  preloadRoutes: () => preloadRoutes,
+  revalidate: () => revalidate,
+  runWithOwner: () => import_signal12.runWithOwner,
+  select: () => select,
+  supportsViewTransitions: () => supportsViewTransitions,
+  useAction: () => useAction,
+  useIsRouting: () => useIsRouting,
+  useLevelParams: () => useLevelParams,
+  useLinkNavigation: () => useLinkNavigation,
+  useLocation: () => useLocation,
+  useMatch: () => useMatch,
+  useNavigate: () => useNavigate,
+  useParam: () => useParam,
+  useParamSelector: () => useParamSelector,
+  useParams: () => useParams,
+  useRouteData: () => useRouteData,
+  useRouter: () => useRouter,
+  useSearchParams: () => useSearchParams,
+  useSubmission: () => useSubmission,
+  useSubmissions: () => useSubmissions
+});
+function renderLayer(m, depth, base) {
+  let data;
+  const loader = m.route.data;
+  if (typeof loader === "function") {
+    let cancelled = false;
+    (0, import_signal10.onCleanup)(() => {
+      cancelled = true;
+    });
+    const owner = (0, import_signal10.getOwner)();
+    const router = (0, import_signal11.useContext)(RouterContext);
+    let watching = false;
+    const trackDeps = (deps) => {
+      if (watching || cancelled) return;
+      watching = true;
+      (0, import_signal10.runWithOwner)(owner, () => {
+        let first = true;
+        (0, import_signal10.createEffect)(() => {
+          deps();
+          if (first) first = false;
+          else (0, import_signal10.untrack)(() => void refetch());
+        });
+      });
+    };
+    let readsLocation;
+    const [resource, { refetch }] = (0, import_signal10.createResource)(() => {
+      const params = (0, import_signal10.untrack)(base.params);
+      const location = (0, import_signal10.untrack)(base.location);
+      readsLocation = false;
+      const result = loader(
+        {
+          params: () => params,
+          location: () => {
+            readsLocation = true;
+            return location;
+          }
+        },
+        owner,
+        () => cancelled,
+        trackDeps
+      );
+      return router ? router.trackLoad(result) : result;
+    });
+    (0, import_signal10.onCleanup)(
+      onRevalidate(() => {
+        if ((0, import_signal10.untrack)(() => base.matched()[depth]?.route) !== m.route) return;
+        void refetch();
+      })
+    );
+    let loadedFor = (0, import_signal10.untrack)(() => JSON.stringify(base.matched()[depth]?.params ?? {}));
+    let searchedFor = (0, import_signal10.untrack)(() => base.location().search);
+    (0, import_signal10.createEffect)(() => {
+      const now = base.matched()[depth];
+      const search = base.location().search;
+      if (now?.route !== m.route) return;
+      const params = JSON.stringify(now.params ?? {});
+      const paramsMoved = params !== loadedFor;
+      const searchMoved = readsLocation !== false && search !== searchedFor;
+      loadedFor = params;
+      searchedFor = search;
+      if (paramsMoved || searchMoved) (0, import_signal10.untrack)(() => void refetch());
+    });
+    data = () => {
+      const error = resource.error;
+      if (error !== void 0 && error !== null) throw error;
+      const r = resource;
+      if (r.state === "refreshing") return r.latest;
+      return resource();
+    };
+    Object.defineProperty(data, "loading", { get: () => resource.loading });
+    Object.defineProperty(data, "state", { get: () => resource.state });
+  }
+  const buildPage = () => RouteDataContext2.Provider({
+    value: data,
+    get children() {
+      return LevelParamsContext.Provider({
+        value: m.params,
+        get children() {
+          return OutletContext.Provider({
+            value: { depth, ...base },
+            get children() {
+              return (0, import_dom12.createComponent)(m.component, {});
+            }
+          });
+        }
+      });
+    }
+  });
+  if (!data) return { view: buildPage(), ready: () => true };
+  const res = data;
+  const isLoading = () => {
+    const state = res.state;
+    return state === void 0 ? res.loading : state === "pending" || state === "unresolved";
+  };
+  const [ready, setReady] = (0, import_signal10.createSignal)((0, import_signal10.untrack)(() => !isLoading()));
+  (0, import_signal10.createEffect)(() => setReady(!isLoading()));
+  return { view: (0, import_signal10.createMemo)(() => ready() ? buildPage() : null), ready };
+}
+function renderChild(ctx) {
+  const childIdx = ctx.depth + 1;
+  const [childComp, setChildComp] = (0, import_signal10.createSignal)(
+    (0, import_signal10.untrack)(() => ctx.matched()[childIdx]?.component)
+  );
+  (0, import_signal10.createEffect)(() => {
+    const c = ctx.matched()[childIdx]?.component;
+    if ((0, import_signal10.untrack)(childComp) !== c) setChildComp(() => c);
+  });
+  const owner = (0, import_signal10.getOwner)();
+  let shown = null;
+  let pending = null;
+  const drop2 = (layer) => layer?.dispose();
+  (0, import_signal10.onCleanup)(() => {
+    drop2(shown);
+    drop2(pending);
+    shown = pending = null;
+  });
+  const incoming = (0, import_signal10.createMemo)(() => {
+    const component = childComp();
+    if (!component) return null;
+    const m = (0, import_signal10.untrack)(() => ctx.matched())[childIdx];
+    return (0, import_signal10.runWithOwner)(
+      owner,
+      () => (0, import_signal10.createRoot)((dispose) => ({
+        ...renderLayer(m, childIdx, { matched: ctx.matched, params: ctx.params, location: ctx.location }),
+        dispose
+      }))
+    );
+  });
+  return (0, import_signal10.createMemo)(() => {
+    const next = incoming();
+    if (!next) {
+      drop2(shown);
+      drop2(pending);
+      shown = pending = null;
+      return ctx.notFound ? ctx.notFound() : null;
+    }
+    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) {
+  if (notFound == null) return buildDefaultNotFound();
+  return typeof notFound === "function" ? (0, import_dom12.createComponent)(notFound, {}) : notFound;
+}
+function buildDefaultNotFound() {
+  const el = (0, import_dom12.createNativeElement)("div");
+  (0, import_dom12.setAttribute)(el, "class", "fx-not-found");
+  (0, import_dom12.setAttribute)(el, "role", "main");
+  (0, import_dom12.setAttribute)(
+    el,
+    "style",
+    "min-height:60vh;display:grid;place-content:center;gap:.25rem;text-align:center;font-family:system-ui,-apple-system,sans-serif"
+  );
+  const h1 = (0, import_dom12.createNativeElement)("h1");
+  (0, import_dom12.setAttribute)(h1, "style", "margin:0;font-size:2.5rem;font-weight:700");
+  (0, import_dom12.insert)(h1, "404");
+  const p = (0, import_dom12.createNativeElement)("p");
+  (0, import_dom12.setAttribute)(p, "style", "margin:0;opacity:.7");
+  (0, import_dom12.insert)(p, "This page could not be found.");
+  el.appendChild(h1);
+  el.appendChild(p);
+  return el;
+}
+function Router(props) {
+  const history2 = props.history ?? (0, import_router.createBrowserHistory)();
+  const router = (0, import_router.createRouter)({
+    routes: props.routes,
+    base: props.base,
+    history: history2
+  });
+  const [state, setState] = (0, import_signal10.createSignal)(router.state());
+  const [navigating, setNavigating] = (0, import_signal10.createSignal)(false);
+  const [loads, setLoads] = (0, import_signal10.createSignal)(0);
+  let navigationId = 0;
+  const scroll = history2.window ? keepScroll(router.state().location) : void 0;
+  let arriving = scroll ? { id: 0, location: router.state().location, from: void 0 } : null;
+  const [arrived, setArrived] = (0, import_signal10.createSignal)(0);
+  const takeMode = () => {
+    const mode = pendingTransitionMode ?? (props.transition ?? "auto");
+    pendingTransitionMode = void 0;
+    return mode;
+  };
+  const unsub = router.subscribe((next) => {
+    const id = ++navigationId;
+    const mode = takeMode();
+    setNavigating(true);
+    if (scroll) {
+      scroll.leave();
+      arriving = { id, location: next.location, from: (0, import_signal10.untrack)(state).location };
+    }
+    const prepared = prepareComponents(
+      (next.match?.matched ?? []).map((m) => m.component).filter(Boolean)
+    );
+    const commit = () => {
+      setState(next);
+      const flushed = (0, import_signal10.flush)();
+      if (id === navigationId) setNavigating(false);
+      if (scroll) setArrived(id);
+      return flushed;
+    };
+    if (!prepared) {
+      void runTransition(mode, commit);
+      return;
+    }
+    void prepared.then(() => {
+      if (id !== navigationId) return;
+      return runTransition(mode, commit);
+    });
+  });
+  (0, import_signal10.onCleanup)(() => {
+    unsub();
+    scroll?.dispose();
+    router.destroy();
+    navigationId++;
+  });
+  const matched = (0, import_signal10.createMemo)(
+    () => (state().match?.matched ?? []).filter((m) => m.component)
+  );
+  const ctx = {
+    router,
+    location: (0, import_signal10.createMemo)(() => state().location),
+    params: (0, import_signal10.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;
+    }
+  };
+  if (scroll) {
+    const nextFrame = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
+    (0, import_signal10.createEffect)(() => {
+      const id = arrived();
+      if (ctx.isRouting()) return;
+      const next = arriving;
+      if (!next || next.id !== id || id !== navigationId) return;
+      arriving = null;
+      nextFrame(() => {
+        if (id === navigationId) scroll.arrive(next.location, next.from);
+      });
+    });
+  }
+  const root = {
+    depth: -1,
+    matched,
+    params: ctx.params,
+    location: ctx.location,
+    // Only the root carries this: renderChild shows it when the URL matched nothing.
+    notFound: () => renderNotFound(props.notFound)
+  };
+  let rootView;
+  return RouterContext.Provider({
+    value: ctx,
+    get children() {
+      return rootView ??= renderChild(root);
+    }
+  });
+}
+function Outlet() {
+  const ctx = (0, import_signal11.useContext)(OutletContext);
+  if (!ctx) return null;
+  return renderChild(ctx);
+}
+function useIsRouting(options = {}) {
+  const routing = (0, import_signal11.useContext)(RouterContext)?.isRouting ?? (() => false);
+  const delay = options.delay ?? 0;
+  if (delay <= 0) return routing;
+  const [late, setLate] = (0, import_signal10.createSignal)(false);
+  (0, import_signal10.createEffect)(() => {
+    if (!routing()) {
+      setLate(false);
+      return;
+    }
+    const timer = setTimeout(() => setLate(true), delay);
+    (0, import_signal10.onCleanup)(() => clearTimeout(timer));
+  });
+  return () => routing() && late();
+}
+function Redirect(props) {
+  const ctx = (0, import_signal11.useContext)(RouterContext);
+  if (ctx && typeof window !== "undefined") {
+    let cancelled = false;
+    (0, import_signal10.onCleanup)(() => cancelled = true);
+    queueMicrotask(() => {
+      if (!cancelled) ctx.router.navigate(props.to, { replace: props.replace !== false });
+    });
+  }
+  return null;
+}
+function useRouter() {
+  const ctx = (0, import_signal11.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_signal10.createMemo)(() => params(), {}, {
+    equals: (a, b) => JSON.stringify(a) === JSON.stringify(b)
+  });
+}
+function useLevelParams() {
+  return (0, import_signal11.useContext)(LevelParamsContext) ?? {};
+}
+function useParam(key) {
+  const params = useParams();
+  return (0, import_signal10.createMemo)(() => params()[key]);
+}
+function useParamSelector(selector, equals) {
+  const params = useParams();
+  return (0, import_signal10.createMemo)(
+    () => selector(params()),
+    void 0,
+    equals ? { equals } : void 0
+  );
+}
+function useMatch(path) {
+  const location = useLocation();
+  return (0, import_signal10.createMemo)(
+    () => (0, import_router.matchPath)(typeof path === "function" ? path() : path, location.pathname)
+  );
+}
+function useSearchParams() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const params = (0, import_signal10.createMemo)(() => location.query);
+  const setParams = (next, options) => {
+    const current = new URLSearchParams(location.search);
+    for (const [k, v] of Object.entries(next)) {
+      if (v === null) current.delete(k);
+      else current.set(k, v);
+    }
+    const search = current.toString();
+    navigate(location.pathname + (search ? `?${search}` : ""), options);
+  };
+  return [params, setParams];
+}
+function select(source, key) {
+  const equals = (a, b) => (0, import_compare.deepEqual)(a, b);
+  if (key !== void 0) {
+    return (0, import_signal10.createMemo)(
+      () => (0, import_object.get)(source(), key),
+      void 0,
+      { equals }
+    );
+  }
+  return (0, import_signal10.createMemo)(source, void 0, { equals });
+}
+function useLocation() {
+  const { location } = useRouter();
+  return new Proxy({}, {
+    get: (_t, key) => location()[key],
+    has: (_t, key) => key in location(),
+    ownKeys: () => Reflect.ownKeys(location()),
+    getOwnPropertyDescriptor: (_t, key) => Object.getOwnPropertyDescriptor(location(), key)
+  });
+}
+function useLinkNavigation(options = {}) {
+  const ctx = (0, import_signal11.useContext)(RouterContext);
+  return (event) => {
+    if (!ctx || event.defaultPrevented || event.button !== 0) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const target = event.target;
+    const anchor = target?.closest?.("a");
+    if (!anchor || !anchor.getAttribute("href")) return;
+    if (anchor.target && anchor.target !== "_self") return;
+    if (anchor.hasAttribute("download")) return;
+    if (/(^|\s)external(\s|$)/.test(anchor.getAttribute("rel") ?? "")) return;
+    const url = new URL(anchor.href);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return;
+    if (url.origin !== window.location.origin) return;
+    if (url.hash && url.pathname === window.location.pathname && url.search === window.location.search) return;
+    if (options.shouldNavigate && !options.shouldNavigate(url, anchor)) return;
+    event.preventDefault();
+    pendingTransitionMode = options.transition;
+    ctx.router.navigate(url.pathname + url.search + url.hash, { replace: options.replace });
+  };
+}
+function useNavigate() {
+  const { router } = useRouter();
+  return (to, options) => {
+    pendingTransitionMode = options?.transition;
+    router.navigate(to, options);
+  };
+}
+function useRouteData() {
+  const acc = (0, import_signal11.useContext)(RouteDataContext2);
+  return acc ?? (() => void 0);
+}
+function Link(props) {
+  const ctx = (0, import_signal11.useContext)(RouterContext);
+  const navigate = () => ctx.router.navigate(read(props.href) ?? "", { replace: read(props.replace) });
+  const a = (0, import_dom12.createNativeElement)("a");
+  (0, import_dom12.setAttribute)(a, "href", read(props.href) ?? "");
+  if (props.slot) (0, import_dom12.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 (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_dom12.setAttribute)(a, k, String(value));
+      };
+      if (typeof a.addEventListener === "function") (0, import_signal10.createEffect)(apply);
+      else apply();
+      continue;
+    }
+    if (v != null) (0, import_dom12.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();
+    });
+  } else {
+    const base = read(props.className ?? props.class) ?? "";
+    if (base) (0, import_dom12.setAttribute)(a, "class", base);
+  }
+  if (typeof a.addEventListener === "function") {
+    (0, import_signal10.createEffect)(() => {
+      const href = read(props.href) ?? "";
+      a.setAttribute("href", href);
+      const base = read(props.className ?? props.class) ?? "";
+      const activeClass = read(props.activeClass) ?? "";
+      const active = read(props.active) ?? ctx?.location().pathname === href;
+      a.className = [base, active ? activeClass : ""].filter(Boolean).join(" ");
+    });
+  }
+  const linkChildren = props.children;
+  if (linkChildren != null) (0, import_dom12.insert)(a, linkChildren);
+  return a;
+}
+function ActionForm(props) {
+  const action2 = props.action;
+  const cls = props.className ?? props.class;
+  const url = action2.url ?? "";
+  const form = (0, import_dom12.createNativeElement)("form");
+  (0, import_dom12.setAttribute)(form, "method", "post");
+  if (url) (0, import_dom12.setAttribute)(form, "action", url);
+  if (cls) (0, import_dom12.setAttribute)(form, "class", cls);
+  for (const k of Object.keys(props)) {
+    if (k === "action" || k === "children" || k === "class" || k === "className") continue;
+    const v = props[k];
+    if (v != null && typeof v !== "function") (0, import_dom12.setAttribute)(form, k, String(v));
+  }
+  if (typeof form.addEventListener === "function") {
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const data = {};
+      new FormData(form).forEach((v, k) => {
+        data[k] = v;
+      });
+      Promise.resolve(action2(data)).catch(() => {
+      });
+    });
+  }
+  const children = props.children;
+  if (children != null) (0, import_dom12.insert)(form, children);
+  return form;
+}
+async function preloadRoutes(routes, pathname) {
+  const match = (0, import_router.matchRoutes)(routes, pathname);
+  if (!match) return;
+  const loads = [];
+  for (const m of match.matched) {
+    const c = m.component;
+    if (c && typeof c.preload === "function") loads.push(c.preload());
+  }
+  await Promise.all(loads);
+}
+var import_signal10, import_dom12, import_signal11, import_object, import_compare, import_router, import_router2, import_signal12, RouterContext, OutletContext, LevelParamsContext, RouteDataContext2, pendingTransitionMode, _ssrRouterStub, read, LINK_OWN_PROPS, A;
+var init_router = __esm({
+  "src/lib/router/index.ts"() {
+    "use strict";
+    import_signal10 = require("@fluixi/reactive/signal");
+    init_transition();
+    import_dom12 = require("@fluixi/dom");
+    import_signal11 = require("@fluixi/reactive/signal");
+    import_object = require("@fluixi/utils/object");
+    import_compare = require("@fluixi/utils/compare");
+    init_scroll();
+    import_router = require("@fluixi/router");
+    init_data();
+    import_router2 = require("@fluixi/router");
+    init_data();
+    init_lazy();
+    init_transition();
+    import_signal12 = require("@fluixi/reactive/signal");
+    RouterContext = (0, import_signal11.createContext)(void 0, "router");
+    OutletContext = (0, import_signal11.createContext)(void 0, "outlet");
+    LevelParamsContext = (0, import_signal11.createContext)(void 0, "route-params");
+    RouteDataContext2 = (0, import_signal11.createContext)(void 0, "route-data");
+    _ssrRouterStub = {
+      router: { navigate: () => {
+      } },
+      location: () => ({ pathname: "", search: "", hash: "", query: {} }),
+      params: () => ({}),
+      isRouting: () => false,
+      trackLoad: (result) => result
+    };
+    read = (v) => typeof v === "function" ? v() : v;
+    LINK_OWN_PROPS = /* @__PURE__ */ new Set([
+      "href",
+      "slot",
+      "class",
+      "className",
+      "active",
+      "activeClass",
+      "replace",
+      "children"
+    ]);
+    A = Link;
+  }
+});
+
+// src/lib/client/index.ts
+var index_exports = {};
+__export(index_exports, {
+  hydrate: () => import_dom14.hydrate,
+  mount: () => mount,
+  startClient: () => startClient
+});
+module.exports = __toCommonJS(index_exports);
+var import_dom13 = require("@fluixi/dom");
+
+// src/lib/render/versions.ts
+var import_dom = require("@fluixi/dom");
+
+// src/version.generated.ts
+var VERSION = "1.0.0-alpha.100";
+
+// src/lib/render/versions.ts
+var import_dom2 = require("@fluixi/dom");
+(0, import_dom.registerCoreVersion)(VERSION);
+
+// src/lib/server/hydration.ts
+var import_dom3 = 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/render/index.ts
+var import_dom9 = require("@fluixi/dom");
+var import_signal6 = require("@fluixi/reactive/signal");
+var import_dom10 = require("@fluixi/dom");
+
+// src/lib/render/component.ts
+var import_dom4 = require("@fluixi/dom");
+var import_dom5 = require("@fluixi/dom");
+var import_signal = require("@fluixi/reactive/signal");
+function createComponent(Comp, props) {
+  return (0, import_dom5.createComponent)(Comp, props);
+}
+
+// src/lib/render/suspense.ts
+var import_signal2 = require("@fluixi/reactive/signal");
+var import_dom6 = require("@fluixi/dom");
+function isPromise(value) {
+  return !!(value && typeof value === "object" && typeof value.then === "function" || value instanceof Promise);
+}
+var SuspenseListContext = (0, import_signal2.createContext)(void 0, "suspense-list");
+function Suspense(props) {
+  return (0, import_dom6.createComponent)(SuspenseImpl, props);
+}
+function SuspenseImpl(props) {
+  const boundary = (0, import_signal2.createSuspenseBoundary)();
+  const listCtx = (0, import_signal2.useContext)(SuspenseListContext);
+  const listState = listCtx ? listCtx.register(boundary.inFallback) : void 0;
+  function instantiateOnce(val) {
+    if (val == null || typeof val === "boolean") return null;
+    if (typeof val === "function" && (0, import_dom6.isComponent)(val) && !(0, import_signal2.isSignal)(val)) return val();
+    return val;
+  }
+  const fallback = (0, import_dom6.runWithoutHydration)(() => instantiateOnce(props.fallback ?? null));
+  const children = (0, import_signal2.provideSuspense)(boundary, () => (0, import_signal2.readChildren)(() => props.children));
+  const track = (value, depth) => {
+    if (depth > 8) return;
+    if (Array.isArray(value)) {
+      for (const x of value) track(x, depth + 1);
+    } else if (typeof value === "function" && (0, import_signal2.isSignal)(value)) {
+      track(value(), depth + 1);
+    }
+  };
+  (0, import_signal2.provideSuspense)(boundary, () => {
+    (0, import_signal2.createRenderEffect)(() => track(children, 0));
+  });
+  const [resolved, setResolved] = (0, import_signal2.createSignal)(void 0);
+  const childIsPromise = isPromise(children);
+  if (childIsPromise) {
+    boundary.increment();
+    children.then(
+      (v) => {
+        setResolved(() => v);
+        boundary.decrement();
+      },
+      () => boundary.decrement()
+    );
+  }
+  return (0, import_signal2.createMemo)(() => {
+    const showFallback = listState ? listState.showFallback() : boundary.inFallback();
+    if (showFallback) return fallback;
+    if (childIsPromise) return resolved();
+    return children;
+  });
+}
+(0, import_dom6.asSuspense)(Suspense);
+Object.defineProperty(Suspense, "__suspense", { value: true, enumerable: true });
+
+// src/lib/render/index.ts
+init_lazy();
+
+// src/lib/render/deferred.ts
+var import_dom8 = require("@fluixi/dom");
+var import_signal4 = require("@fluixi/reactive/signal");
+var import_utils = require("@fluixi/dom/utils");
+init_lazy();
+
+// src/lib/render/await.ts
+var import_signal5 = require("@fluixi/reactive/signal");
+
+// src/lib/render/index.ts
+function render(code, container, options = {}) {
+  (0, import_dom10.delegateEvents)(["click", "input", "change", "submit"]);
+  if ((0, import_dom9.isServer)()) {
+    throw new Error(
+      "render() is for client-side only. Use renderToString() on server."
+    );
+  }
+  if (!container) {
+    throw new Error("Container element is required");
+  }
+  let disposer;
+  (0, import_signal6.createRoot)((dispose) => {
+    disposer = dispose;
+    const result = typeof code === "function" ? code() : code;
+    container.textContent = "";
+    (0, import_dom2.stampVersions)(container);
+    (0, import_dom2.warnOnVersionSkew)();
+    (0, import_dom10.insert)(container, () => result);
+  });
+  return () => {
+    if (disposer) {
+      disposer();
+      disposer = void 0;
+    }
+  };
+}
+
+// src/lib/client/index.ts
+var import_signal13 = require("@fluixi/reactive/signal");
+var import_head = require("@fluixi/head");
+var import_dom14 = require("@fluixi/dom");
+function mount(App, container) {
+  if (!container) {
+    throw new Error("Container element not found for mount()");
+  }
+  (0, import_dom13.render)(() => App(), container);
+}
+var rootOf = (App) => (0, import_signal13.createMemo)(() => createComponent(App));
+async function startClient(App, options = {}) {
+  const container = typeof options.root === "string" ? document.querySelector(options.root) : options.root ?? document.querySelector("#app");
+  if (!container) {
+    throw new Error(
+      `[Fluixi] Mount container not found: ${options.root ?? "#app"}`
+    );
+  }
+  const hasServerDom = !!document.getElementById("__FLUIXI_HYDRATION__") || !!options.routes && container.firstElementChild != null;
+  const shouldHydrate = options.hydrate ?? hasServerDom;
+  const head = (0, import_head.createHead)();
+  (0, import_head.setActiveHead)(head);
+  (0, import_head.stripHeadMarker)(container);
+  if (shouldHydrate) {
+    (0, import_dom13.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_dom13.hydrate)(() => rootOf(App), container);
+      replayEvents();
+    } finally {
+      (0, import_dom13.endAppHydration)();
+    }
+    setTimeout(() => {
+      setHydrating(false);
+      const removed = (0, import_dom13.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_dom13.clearHydrationKeys)();
+      cleanupHydration();
+    }, 100);
+  } else {
+    render(rootOf(App), container);
+  }
+  (0, import_head.mountHead)(head);
+}
+function replayEvents() {
+  if (typeof window === "undefined") return;
+  const w = window;
+  if (typeof w.__FX_REPLAY_STOP__ === "function") w.__FX_REPLAY_STOP__();
+  const queue = w.__FX_REPLAY__;
+  w.__FX_REPLAY__ = void 0;
+  w.__FX_REPLAY_STOP__ = void 0;
+  if (!Array.isArray(queue) || queue.length === 0) return;
+  for (const rec of queue) {
+    const target = rec && rec.target;
+    if (!target || target.isConnected === false || typeof target.dispatchEvent !== "function") continue;
+    const type = rec.type;
+    const ev = type === "click" ? new MouseEvent(type, { bubbles: true, cancelable: true }) : new Event(type, { bubbles: true, cancelable: true });
+    target.dispatchEvent(ev);
+  }
+}