@solidjs/router 1.0.0-next.9 → 1.0.0

package/dist/index.js

@@ -1,6 +1,87 @@
-import { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, flush, createComponent, createRoot, sharedConfig, getObserver, $TRACK, action as action$1 } from 'solid-js';
-import { registerElementClaim, delegateEvents, isServer, getRequestEvent, createComponent as createComponent$1, memo, isResponseEnvelope } from '@solidjs/web';
-import { isServerFunction, getServerFunctionMetadata, GET, decodeResponse, subscribeFlightData, createServerReference } from '@solidjs/web/server-functions';
+import { isServer, getRequestEvent, createComponent as createComponent$1, memo, delegateEvents, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, batch, createComponent, children, mergeProps, Show, createRoot, sharedConfig, getListener, $TRACK, createEffect, splitProps, createResource, catchError } from 'solid-js';
+import { createStore, reconcile, unwrap } from 'solid-js/store';
+
+function createBeforeLeave() {
+  let listeners = new Set();
+  function subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  }
+  let ignore = false;
+  function confirm(to, options) {
+    if (ignore) return !(ignore = false);
+    const e = {
+      to,
+      options,
+      defaultPrevented: false,
+      preventDefault: () => e.defaultPrevented = true
+    };
+    for (const l of listeners) l.listener({
+      to,
+      options,
+      // delegate to the shared event so later listeners' preventDefault
+      // calls are observable from earlier listeners
+      get defaultPrevented() {
+        return e.defaultPrevented;
+      },
+      preventDefault: e.preventDefault,
+      from: l.location,
+      retry: force => {
+        force && (ignore = true);
+        l.navigate(to, {
+          ...options,
+          resolve: false
+        });
+      }
+    });
+    return !e.defaultPrevented;
+  }
+  return {
+    subscribe,
+    confirm
+  };
+}
+
+// The following supports browser initiated blocking (eg back/forward)
+
+let depth;
+function saveCurrentDepth() {
+  if (!window.history.state || window.history.state._depth == null) {
+    window.history.replaceState({
+      ...window.history.state,
+      _depth: window.history.length - 1
+    }, "");
+  }
+  depth = window.history.state._depth;
+}
+if (!isServer) {
+  saveCurrentDepth();
+}
+function keepDepth(state) {
+  return {
+    ...state,
+    _depth: window.history.state && window.history.state._depth
+  };
+}
+function notifyIfNotBlocked(notify, block) {
+  let ignore = false;
+  return () => {
+    const prevDepth = depth;
+    saveCurrentDepth();
+    const delta = prevDepth == null ? null : depth - prevDepth;
+    if (ignore) {
+      ignore = false;
+      return;
+    }
+    if (delta && block(delta)) {
+      ignore = true;
+      window.history.go(-delta);
+    } else {
+      notify();
+    }
+  };
+}
 
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|(\/)\/+$/g;
@@ -9,9 +90,6 @@ function normalizePath(path, omitSlash = false) {
   const s = path.replace(trimPathRegex, "$1");
   return s ? omitSlash || /^[?#]/.test(s) ? s : "/" + s : "";
 }
-
-/** Pathname stripped of search/hash and trailing slash, lowercased — the form link matching compares. */
-const comparablePath = path => normalizePath(path.split(/[?#]/, 1)[0]).toLowerCase().replace(/\/$/, "");
 function resolvePath(base, path, from) {
   if (hasSchemeRegex.test(path)) {
     return undefined;
@@ -180,369 +258,13 @@ function setFunctionName(obj, value) {
   return obj;
 }
 
-/**
- * The compiler claims every `a[href]` (and `form[action]`, which this handler
- * ignores) at creation, and the runtime re-claims on `href` writes. This
- * consumer gives each router-managed anchor the link-state vocabulary without
- * a wrapper component:
- *
- * - `aria-current="page"` — the location matches the link exactly
- * - `data-active` — exact or prefix match
- * - `data-pending` — the link is the target of an in-flight navigation
- *
- * Elements are claimed at creation, so late mounts (`<Show>`, `<For>`,
- * portals) are correct immediately. One render effect (owned by the router)
- * subscribes to the location and sweeps a registry of claimed anchors —
- * anchors themselves carry no reactive machinery, just a registry entry
- * removed by their creating owner's cleanup. State is applied once at claim
- * so it is correct before the next navigation; re-claims (an `href` write)
- * are the same one-shot untracked refresh, reading the element's current
- * `href` from the DOM.
- */
-function setupLinkClaims(router, explicitLinks) {
-  const basePath = router.base.path();
-  // per-element record; `current` remembers whether we set `aria-current`,
-  // so user-authored values (steppers, breadcrumbs) are never stripped
-  const claimed = new WeakMap();
-  const registry = new Set();
-  function isSvg(el) {
-    return el.namespaceURI === "http://www.w3.org/2000/svg";
-  }
-
-  /** The comparable pathname when the router manages this anchor, else `undefined`. */
-  function managedPath(a) {
-    if (explicitLinks && !a.hasAttribute("link")) return;
-    const svg = isSvg(a);
-    // claims fire at creation while the element is still in the template's
-    // inert fragment, where the `href` property is not resolved — resolve the
-    // raw attribute against the live document instead
-    const href = svg ? a.href.baseVal : a.getAttribute("href");
-    const target = svg ? a.target.baseVal : a.target;
-    if (target || !href) return;
-    const rel = (a.getAttribute("rel") || "").split(/\s+/);
-    if (a.hasAttribute("download") || rel.includes("external")) return;
-    let url;
-    try {
-      url = new URL(href, document.baseURI);
-    } catch {
-      return;
-    }
-    if (url.origin !== window.location.origin || basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
-    return comparablePath(url.pathname);
-  }
-  function linkState(a) {
-    // read reactive sources unconditionally so the owning effect stays
-    // subscribed even while the anchor is not router-managed
-    const loc = decodeURI(comparablePath(router.location.pathname));
-    const routing = router.isRouting();
-    const path = managedPath(a);
-    // the root path is a prefix of everything, so it only matches exactly —
-    // there is no per-anchor `end` opt-out like useLinkState has
-    const matches = target => path !== undefined && (target === path || path !== "" && target.startsWith(path + "/"));
-    // effects observe the committed location during a transition, so the
-    // in-flight target comes from pendingTarget — readable here because the
-    // isRouting write flushes after the target is assigned
-    const pending = routing && !!router.pendingTarget && matches(decodeURI(comparablePath(router.pendingTarget.value)));
-    return {
-      active: matches(loc),
-      pending,
-      exact: path !== undefined && loc === path
-    };
-  }
-  function apply(a, rec, {
-    active,
-    pending,
-    exact
-  }) {
-    active ? a.setAttribute("data-active", "") : a.removeAttribute("data-active");
-    pending ? a.setAttribute("data-pending", "") : a.removeAttribute("data-pending");
-    if (exact !== rec.current) {
-      exact ? a.setAttribute("aria-current", "page") : a.removeAttribute("aria-current");
-      rec.current = exact;
-    }
-  }
-  const refresh = (a, rec) => untrack(() => apply(a, rec, linkState(a)));
-
-  // The one subscription for every anchor: compute tracks the sources
-  // linkState derives from (the in-flight pendingTarget is readable in the
-  // effect phase because the isRouting write flushes after the target is
-  // assigned), the effect phase sweeps the registry untracked.
-  //
-  // `transparent` keeps the effect invisible to the hydration id scheme.
-  // This setup is client-only, so an id-consuming node here has no server
-  // counterpart and every subsequent hydration id would shift by one child
-  // slot — lazy-route lookups miss and hydration leaves server nodes
-  // unclaimed. (The option is honored by the runtime but missing from the
-  // published EffectOptions type, hence the cast.)
-  createRenderEffect(() => (router.location.pathname, router.isRouting()), () => registry.forEach(a => refresh(a, claimed.get(a))), {
-    transparent: true
-  });
-  onCleanup(registerElementClaim(node => {
-    if (node.nodeName.toUpperCase() !== "A") return;
-    const a = node;
-    // re-claim (href changed): the claiming write runs inside another
-    // effect, so refresh without leaking subscriptions into it
-    const existing = claimed.get(a);
-    if (existing) return refresh(a, existing);
-    const rec = {
-      current: false
-    };
-    claimed.set(a, rec);
-    // claims fire during component setup, so an owner is present in
-    // practice to bound the registry entry's lifetime; without one, state
-    // is still applied once at creation
-    if (getOwner()) {
-      registry.add(a);
-      onCleanup(() => registry.delete(a));
-    }
-    refresh(a, rec);
-  }));
-}
-
-/**
- * The submit delegation consults this slot instead of importing the action
- * module: the action side installs its handler on first action creation
- * (see data/action.ts), so an app that never creates an action never pulls
- * the data layer into its bundle through the router's event wiring.
- */
-
-let formHandler;
-function setRouterFormHandler(handler) {
-  formHandler = handler;
-}
-function setupNativeEvents({
-  preload = true,
-  explicitLinks = false,
-  actionBase = "/_server",
-  transformUrl
-} = {}) {
-  return router => {
-    const basePath = router.base.path();
-    const navigateFromRoute = router.navigatorFactory(router.base);
-    let preloadTimeout;
-    let lastElement;
-    function isSvg(el) {
-      return el.namespaceURI === "http://www.w3.org/2000/svg";
-    }
-    function handleAnchor(evt) {
-      if (evt.defaultPrevented || evt.button !== 0 || evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey) return;
-      const a = evt.composedPath().find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
-      if (!a || explicitLinks && !a.hasAttribute("link")) return;
-      const svg = isSvg(a);
-      const href = svg ? a.href.baseVal : a.href;
-      const target = svg ? a.target.baseVal : a.target;
-      if (target || !href && !a.hasAttribute("state")) return;
-      const rel = (a.getAttribute("rel") || "").split(/\s+/);
-      if (a.hasAttribute("download") || rel && rel.includes("external")) return;
-      const url = svg ? new URL(href, document.baseURI) : new URL(href);
-      if (url.origin !== window.location.origin || basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
-      return [a, url];
-    }
-    function handleAnchorClick(evt) {
-      const res = handleAnchor(evt);
-      if (!res) return;
-      const [a, url] = res;
-      const to = router.parsePath(url.pathname + url.search + url.hash);
-      const state = a.getAttribute("state");
-      evt.preventDefault();
-      navigateFromRoute(to, {
-        resolve: false,
-        replace: a.hasAttribute("replace"),
-        scroll: !a.hasAttribute("noscroll"),
-        state: state ? JSON.parse(state) : undefined
-      });
-    }
-    function handleAnchorPreload(evt) {
-      const res = handleAnchor(evt);
-      if (!res) return;
-      const [a, url] = res;
-      transformUrl && (url.pathname = transformUrl(url.pathname));
-      router.preloadRoute(url, a.getAttribute("preload") !== "false");
-    }
-    function handleAnchorMove(evt) {
-      clearTimeout(preloadTimeout);
-      const res = handleAnchor(evt);
-      if (!res) return lastElement = null;
-      const [a, url] = res;
-      if (lastElement === a) return;
-      transformUrl && (url.pathname = transformUrl(url.pathname));
-      preloadTimeout = setTimeout(() => {
-        router.preloadRoute(url, a.getAttribute("preload") !== "false");
-        lastElement = a;
-      }, 20);
-    }
-    function handleFormSubmit(evt) {
-      if (formHandler) return formHandler(evt, router, actionBase);
-      // No form handler means no action module in the client graph at all
-      // (e.g. server components binding forms straight to server functions).
-      // A POST to a url under actionBase is self-describing, so delegation
-      // is still sufficient: intercept synchronously — the no-JS treatment
-      // is reserved for clients with no JS — capture the FormData, and load
-      // the handler lazily. Apps that never submit one never load it.
-      if (evt.defaultPrevented) return;
-      const form = evt.target;
-      const ref = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.getAttribute("formaction") : form.getAttribute("action");
-      if (!ref || ref.startsWith("https://action/")) return;
-      const url = new URL(ref, document.baseURI);
-      const path = router.parsePath(url.pathname + url.search);
-      if (!path.startsWith(actionBase) || form.method.toUpperCase() !== "POST") return;
-      evt.preventDefault();
-      const data = new FormData(form, evt.submitter);
-      Promise.resolve().then(function () { return serverForms; }).then(m => m.submitServerForm(router, path, form, data));
-    }
-
-    // ensure delegated event run first
-    delegateEvents(["click", "submit"]);
-    document.addEventListener("click", handleAnchorClick);
-    if (preload) {
-      document.addEventListener("mousemove", handleAnchorMove, {
-        passive: true
-      });
-      document.addEventListener("focusin", handleAnchorPreload, {
-        passive: true
-      });
-      document.addEventListener("touchstart", handleAnchorPreload, {
-        passive: true
-      });
-    }
-    document.addEventListener("submit", handleFormSubmit);
-    onCleanup(() => {
-      document.removeEventListener("click", handleAnchorClick);
-      if (preload) {
-        document.removeEventListener("mousemove", handleAnchorMove);
-        document.removeEventListener("focusin", handleAnchorPreload);
-        document.removeEventListener("touchstart", handleAnchorPreload);
-      }
-      document.removeEventListener("submit", handleFormSubmit);
-    });
-  };
-}
-
-/*
- * The typed path proxy. Property access descends into static segments, calls
- * bind params, and a zero-arg or search-object call terminates to a plain
- * string. The runtime is tree-agnostic — it just builds strings — while the
- * `RoutePaths<R>` type derived from the route config constrains which
- * accesses and calls exist. Every node also coerces via `toString`, so nodes
- * drop straight into `href`, `navigate()`, and `redirect()`.
- */
-
-// ---------------------------------------------------------------------------
-// Typed match filters
-// ---------------------------------------------------------------------------
-
-/**
- * A match filter that also declares the TypeScript type accepted for the
- * param at `paths` callsites (the runtime param remains a string).
- */
-
-/** Matches integer segments; types the param as `number` in the path proxy. */
-const int = s => /^-?\d+$/.test(s);
-
-// ---------------------------------------------------------------------------
-// RoutePaths<R> — the proxy's type, derived from the route tree
-// ---------------------------------------------------------------------------
-
-/** Collects a maximal run of required params (and a trailing splat) into one call's argument tuple. */
-
-/** The search param types a route end carries: input builds URLs, output is what parsing returns. */
-
-/** Terminating calls available on every route end: zero-arg, or search object plus optional hash. */
-
-/**
- * Sees through a lazy `children` thunk: the routes the import's promise
- * resolves to (its `default` or `routes` export, matching the runtime) type
- * exactly like inline children. Only tables genuinely built at runtime —
- * where the thunk's return type is a plain `RouteDefinition[]` — degrade to
- * untyped, definitionally.
- */
-
-/**
- * The type of a router instance's `paths` proxy for a given route tree.
- * Requires the tree to be a literal tuple (`as const` or a `const` type
- * param); non-literal trees fall back to an untyped proxy.
- */
-
-/** Extracts the params record a paths node binds, as runtime (string-valued) params. */
-
-// ---------------------------------------------------------------------------
-// Runtime
-// ---------------------------------------------------------------------------
-
-const encodeParam = value => String(value).split("/").map(encodeURIComponent).join("/");
-
-/**
- * Creates the runtime path proxy. It is instance-scoped: `renderPath` comes
- * from the router's history adapter (eg. hash routing prefixes `#`), and
- * `base` is baked into every produced path.
- */
-function createPathsProxy(renderPath = p => p, base = "") {
-  const toHref = (pathname, suffix = "") => renderPath(pathname || "/") + suffix;
-  function node(pathname) {
-    const build = (...args) => {
-      let path = pathname;
-      for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
-        if (typeof arg === "object" && arg !== null) {
-          // a search object terminates; an optional hash string may follow
-          const hash = typeof args[i + 1] === "string" ? `#${args[i + 1]}` : "";
-          return toHref(path, mergeSearchString("", arg) + hash);
-        }
-        path += `/${encodeParam(arg)}`;
-      }
-      // zero-arg calls terminate; param-only calls stay chainable
-      return args.length ? node(path) : toHref(path);
-    };
-    return new Proxy(build, {
-      get(_, prop) {
-        if (prop === "toString") return () => toHref(pathname);
-        if (typeof prop === "symbol") return prop === Symbol.toPrimitive ? () => toHref(pathname) : undefined;
-        return node(`${pathname}/${prop}`);
-      }
-    });
-  }
-  return node(normalizePath(base));
-}
-
-// The flash cookie's name and one-shot clearing — split from the codec in
-// flash.ts so the router core can consume the cookie eagerly (the clear must
-// be appended before streaming flushes the response headers, and an unread
-// outcome must not haunt a later request) without carrying the encode/decode
-// machinery into client bundles that never load the action layer.
-
-const FLASH_COOKIE = "flash";
-const FLASH_MATCHER = new RegExp(`(?:^|;\\s*)${FLASH_COOKIE}=([^;]+)`);
-
-/** Whether a Cookie header carries a flash cookie (readable or not). */
-function hasFlashCookie(cookieHeader) {
-  return !!cookieHeader && FLASH_MATCHER.test(cookieHeader);
-}
-
-/** The raw encoded flash payload out of a Cookie header, if present. */
-function matchFlashCookie(cookieHeader) {
-  const match = cookieHeader && cookieHeader.match(FLASH_MATCHER);
-  return match ? match[1] : undefined;
-}
-
-/** The Set-Cookie value clearing the flash cookie after it has been read. */
-function clearFlashCookie() {
-  return `${FLASH_COOKIE}=; Max-Age=0; Path=/`;
-}
-
 const MAX_REDIRECTS = 100;
 
 /** Consider this API opaque and internal. It is likely to change in the future. */
 const RouterContextObj = createContext();
 const RouteContextObj = createContext();
-function useOptionalContext(context) {
-  try {
-    return useContext(context);
-  } catch {
-    return undefined;
-  }
-}
 const useRouter = () => invariant(useContext(RouterContextObj), "<A> and 'use' router primitives can be only used inside a Route.");
-const useRoute = () => useOptionalContext(RouteContextObj) || useRouter().base;
+const useRoute = () => useContext(RouteContextObj) || useRouter().base;
 const useResolvedPath = path => {
   const route = useRoute();
   return createMemo(() => route.resolvePath(path()));
@@ -589,8 +311,8 @@ const useNavigate = () => useRouter().navigatorFactory();
 const useLocation = () => useRouter().location;
 
 /**
- * Retrieves a signal that indicates whether the router is currently processing a navigation.
- * Useful for showing pending navigation state while the next route and its data settle.
+ * Retrieves signal that indicates whether the route is currently in a *Transition*.
+ * Useful for showing stale/pending state when the route resolution is *Suspended* during concurrent rendering.
  * 
  * @example
  * ```js
@@ -605,6 +327,22 @@ const useLocation = () => useRouter().location;
  */
 const useIsRouting = () => useRouter().isRouting;
 
+/**
+ * usePreloadRoute returns a function that can be used to preload a route manual.
+ * This is what happens automatically with link hovering and similar focus based behavior, but it is available here as an API.
+ * 
+ * @example
+ * ```js
+ * const preload = usePreloadRoute();
+ * 
+ * preload(`/users/settings`, { preloadData: true });
+ * ```
+ */
+const usePreloadRoute = () => {
+  const pre = useRouter().preloadRoute;
+  return (url, options = {}) => pre(url instanceof URL ? url : new URL(url, mockBase), options.preloadData);
+};
+
 /**
  * `useMatch` takes an accessor that returns the path and creates a `Memo` that returns match information if the current path matches the provided path.
  * Useful for determining if a given path matches the current route.
@@ -628,42 +366,22 @@ const useMatch = (path, matchFilters) => {
 };
 
 /**
- * `useRouteMatches` returns an accessor of the router's resolved matches for
- * the current location — the chain of route definitions producing the current
- * render, outermost first. Useful for reading `info` metadata off the matched
- * chain. Unlike `useMatch`, which tests a path pattern you supply against the
- * location, this reflects the route tree itself.
- *
+ * `useCurrentMatches` returns all the matches for the current matched route.
+ * Useful for getting all the route information.
+ * 
  * @example
  * ```js
- * const matches = useRouteMatches();
- *
- * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb));
+ * const matches = useCurrentMatches();
+ * 
+ * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
  * ```
  */
-const useRouteMatches = () => {
+const useCurrentMatches = () => {
   const router = useRouter();
   // return a copy so user mutations (eg. `.reverse()`) can't corrupt router state
   return () => router.matches().slice();
 };
 
-/**
- * `usePreloadRoute` returns a function for warming a route by hand — the same
- * work link hover/focus intent triggers automatically: the matched routes'
- * lazy components load, and with `preloadData` their `preload` functions run.
- *
- * @example
- * ```js
- * const preload = usePreloadRoute();
- *
- * preload(paths.users(2).settings, { preloadData: true });
- * ```
- */
-const usePreloadRoute = () => {
-  const pre = useRouter().preloadRoute;
-  return (url, options = {}) => pre(url instanceof URL ? url : new URL(String(url), mockBase), options.preloadData);
-};
-
 /**
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
  * 
@@ -672,13 +390,10 @@ const usePreloadRoute = () => {
  * const params = useParams();
  * 
  * // fetch user based on the id path parameter
- * const getUser = query(() => fetchUser(params.id), "user");
+ * const [user] = createResource(() => params.id, fetchUser);
  * ```
  */
-
-function useParams(_path) {
-  return useRoute().params;
-}
+const useParams = () => useRouter().params;
 
 /**
  * Retrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them.
@@ -707,8 +422,7 @@ function useParams(_path) {
  * );
  * ```
  */
-
-function useSearchParams(path) {
+const useSearchParams = () => {
   const router = useRouter();
   const location = router.location;
   const navigate = useNavigate();
@@ -728,73 +442,43 @@ function useSearchParams(path) {
       ...options
     });
   };
-  // Passing a paths node opts into schema parsing. The node itself is a
-  // type-level reference; the schemas that run come from the currently
-  // matched routes (root→leaf), whose outputs merge over the raw query.
-  // A schema that reports issues is skipped, leaving raw values — search
-  // strings are user input, so defaults belong in the schema itself.
-  const query = path ? createMemoObject(createMemo(() => {
-    const raw = {
-      ...location.query
-    };
-    let result;
-    for (const match of router.matches()) {
-      const schema = match.route.key.search;
-      if (!schema) continue;
-      const outcome = schema["~standard"].validate(raw);
-      if (outcome instanceof Promise) throw new Error("Async Standard Schema validation is not supported for search params");
-      if (!outcome.issues) result = Object.assign(result || {
-        ...raw
-      }, outcome.value);
-    }
-    return result || raw;
-  })) : location.query;
-  return [query, setSearchParams];
-}
+  return [location.query, setSearchParams];
+};
+
 /**
- * Reactive link state for custom link components — the programmatic
- * counterpart of the attribute vocabulary plain anchors receive
- * (`aria-current`, `data-active`, `data-pending`).
- *
+ * useBeforeLeave takes a function that will be called prior to leaving a route.
+ * The function will be called with:
+ * 
+ * - from (*Location*): current location (before change).
+ * - to (*string | number*): path passed to `navigate`.
+ * - options (*NavigateOptions*): options passed to navigate.
+ * - preventDefault (*function*): call to block the route change.
+ * - defaultPrevented (*readonly boolean*): `true` if any previously called leave handlers called `preventDefault`.
+ * - retry (*function*, force?: boolean ): call to retry the same navigation, perhaps after confirming with the user. Pass `true` to skip running the leave handlers again (i.e. force navigate without confirming).
+ * 
  * @example
- * ```tsx
- * function TabLink(props: { href: string; children: JSX.Element }) {
- *   const link = useLinkState(() => props.href);
- *   return (
- *     <a href={props.href} class="tab" data-selected={link.active() || undefined}>
- *       {props.children}
- *     </a>
- *   );
- * }
+ * ```js
+ * useBeforeLeave((e: BeforeLeaveEventArgs) => {
+ *   if (form.isDirty && !e.defaultPrevented) {
+ *     // preventDefault to block immediately and prompt user async
+ *     e.preventDefault();
+ *     setTimeout(() => {
+ *       if (window.confirm("Discard unsaved changes - are you sure?")) {
+ *         // user wants to proceed anyway so retry with force=true
+ *         e.retry(true);
+ *       }
+ *     }, 100);
+ *   }
+ * });
  * ```
  */
-const useLinkState = (href, options = {}) => {
-  const router = useRouter();
-  const location = router.location;
-  const to = useResolvedPath(() => String(href()));
-  // trailing slashes are ignored so `/route` and `/route/` share state
-  const path = createMemo(() => {
-    const to_ = to();
-    return to_ === undefined ? undefined : comparablePath(to_);
+const useBeforeLeave = listener => {
+  const s = useRouter().beforeLeave.subscribe({
+    listener,
+    location: useLocation(),
+    navigate: useNavigate()
   });
-  const matches = loc => {
-    const path_ = path();
-    if (path_ === undefined) return [false, false];
-    const exact = loc === path_;
-    return [exact || !options.end && loc.startsWith(path_ + "/"), exact];
-  };
-  const state = createMemo(() => matches(decodeURI(comparablePath(location.pathname))));
-  return {
-    active: () => state()[0],
-    current: () => state()[1],
-    // match the in-flight target explicitly (rather than active-while-routing)
-    // so the answer is the same from pure reads and from effects, which
-    // observe the committed location during a transition
-    pending: createMemo(() => {
-      state(); // location dependency: mid-flight target swaps recompute
-      return router.isRouting() && !!router.pendingTarget && matches(decodeURI(comparablePath(router.pendingTarget.value)))[0];
-    })
-  };
+  onCleanup(s);
 };
 
 // Encodes a static path segment like `encodeURIComponent`, but leaves RFC 3986
@@ -802,86 +486,11 @@ const useLinkState = (href, options = {}) => {
 // report them in `location.pathname`. Non-ASCII characters (eg. CJK paths) are
 // still percent-encoded exactly as before, since browsers encode those too.
 const encodeSegment = s => encodeURIComponent(s).replace(/%(2B|40|3A|24|26|2C|3B|3D)/g, m => decodeURIComponent(m));
-
-// ---------------------------------------------------------------------------
-// Lazy route subtrees
-// ---------------------------------------------------------------------------
-//
-// A `children` thunk (`() => import("./feature/routes")`) is a *boundary*:
-// until it resolves, the compiled tree carries a param-less catch-all
-// placeholder branch under the boundary's pattern (splat-scored, so static
-// siblings still win). Resolution is append-only and cached per thunk, then a
-// module-level version signal bumps and every `branches()` consumer
-// recompiles — matches, params, and route states all react. The placeholder's
-// component reads a memo of the resolution promise, which keeps the enclosing
-// navigation transition pending exactly like a `lazy()` route component; its
-// `preload` *is* the resolver, so hover-intent preloading kicks the table
-// load through the existing component-preload path.
-
-const lazyBoundaries = new WeakMap();
-// Module scope: boundary resolution is global, deterministic state (same
-// thunk -> same routes), shared by every factory instance and the server's
-// flight collector.
-const [lazyTreeVersion, setLazyTreeVersion] = createSignal(0);
-
-/** Reactive read of the lazy-subtree version — recompile compiled branches when it changes. */
-function trackLazySubtrees() {
-  return lazyTreeVersion();
-}
-function getLazyBoundary(thunk) {
-  let record = lazyBoundaries.get(thunk);
-  if (!record) lazyBoundaries.set(thunk, record = {
-    thunk
-  });
-  return record;
-}
-
-/**
- * Kicks (or joins) a boundary's resolution. Returns the resolved routes
- * synchronously once available, the in-flight promise otherwise. Commit is
- * always async — even for thunks returning arrays — so the version bump
- * never writes a signal from inside a render computation.
- */
-function resolveLazySubtree(record) {
-  if (record.resolved) return record.resolved;
-  return record.promise ||= Promise.resolve(record.thunk()).then(m => {
-    const routes = Array.isArray(m) ? m : m.default || m.routes || [];
-    record.resolved = routes;
-    setLazyTreeVersion(v => v + 1);
-    return record.resolved;
-  });
-}
-
-/**
- * The unresolved boundaries in a match chain. Rendering gates on these (the
- * route-states memo suspends until they land — see routers/components.tsx)
- * and the server's flight collector awaits them before its preload pass.
- */
-function unresolvedLazyMatches(matches) {
-  const pending = [];
-  for (const match of matches) if (match.route.lazy && !match.route.lazy.resolved) pending.push(match.route.lazy);
-  return pending;
-}
-function createLazyPlaceholder(pattern, record) {
-  // The placeholder never renders and needs no component — `matches` parks
-  // on unresolved boundaries before route contexts are created (kicking the
-  // resolver as it does), preloadRoute kicks it directly, and the version
-  // bump swaps in the real routes. `path + "/*"` with no splat name matches
-  // the boundary itself and everything beneath it without recording a param
-  // (createMatcher skips empty splat names).
-  const placeholderPattern = pattern + "/*";
-  return {
-    key: record,
-    originalPath: "*",
-    pattern: placeholderPattern,
-    matcher: createMatcher(placeholderPattern),
-    lazy: record
-  };
-}
 function createRoutes(routeDef, base = "") {
   const {
     component,
     preload,
+    load,
     children,
     info
   } = routeDef;
@@ -889,7 +498,7 @@ function createRoutes(routeDef, base = "") {
   const shared = {
     key: routeDef,
     component,
-    preload,
+    preload: preload || load,
     info
   };
   return asArray(routeDef.path).reduce((acc, originalPath) => {
@@ -942,23 +551,9 @@ function createBranches(routeDef, base = "", stack = [], branches = []) {
       const routes = createRoutes(def, base);
       for (const route of routes) {
         stack.push(route);
-        let children = def.children;
-        if (typeof children === "function") {
-          const record = getLazyBoundary(children);
-          if (record.resolved) {
-            children = record.resolved;
-          } else {
-            // unresolved boundary: a catch-all placeholder holds its ground
-            stack.push(createLazyPlaceholder(route.pattern, record));
-            branches.push(createBranch([...stack], branches.length));
-            stack.pop();
-            stack.pop();
-            continue;
-          }
-        }
-        const isEmptyArray = Array.isArray(children) && children.length === 0;
-        if (children && !isEmptyArray) {
-          createBranches(children, route.pattern, stack, branches);
+        const isEmptyArray = Array.isArray(def.children) && def.children.length === 0;
+        if (def.children && !isEmptyArray) {
+          createBranches(def.children, route.pattern, stack, branches);
         } else {
           const branch = createBranch([...stack], branches.length);
           branches.push(branch);
@@ -980,16 +575,9 @@ function getRouteMatches(branches, location) {
   }
   return [];
 }
-function mergeParams(matches) {
-  const params = {};
-  for (let i = 0; i < matches.length; i++) {
-    Object.assign(params, matches[i].params);
-  }
-  return params;
-}
 function createLocation(path, state, queryWrapper) {
   const origin = new URL(mockBase);
-  const url = createMemo((prev = origin) => {
+  const url = createMemo(prev => {
     const path_ = path();
     try {
       // anchor rooted paths against the origin explicitly - a path with
@@ -999,14 +587,14 @@ function createLocation(path, state, queryWrapper) {
       console.error(`Invalid path ${path_}`);
       return prev;
     }
-  }, {
+  }, origin, {
     equals: (a, b) => a.href === b.href
   });
   const pathname = createMemo(() => url().pathname);
-  const search = createMemo(() => url().search);
+  const search = createMemo(() => url().search, true);
   const hash = createMemo(() => url().hash);
   const key = () => "";
-  const queryFn = createMemo(() => extractSearchParams(url()));
+  const queryFn = on(search, () => extractSearchParams(url()));
   return {
     get pathname() {
       return pathname();
@@ -1026,49 +614,6 @@ function createLocation(path, state, queryWrapper) {
     query: queryWrapper ? queryWrapper(queryFn) : createMemoObject(queryFn)
   };
 }
-
-/**
- * Rendezvous between the router and the data layer's single-flight consumer.
- * The Router registers itself at mount (unless `singleFlight={false}`); the
- * action side provides the consumer factory when the first action is created
- * (see data/action.ts). Whichever side arrives first waits for the other, so
- * an action module loaded lazily (a code-split route) still attaches to the
- * already-mounted router — and a router-only app, where no action ever
- * loads, never subscribes to the transport, so the server is never asked to
- * collect.
- */
-let flightConsumerFactory;
-const flightRouters = new Map();
-function registerFlightRouter(router) {
-  flightRouters.set(router, flightConsumerFactory && flightConsumerFactory(router));
-  return () => {
-    const unsubscribe = flightRouters.get(router);
-    flightRouters.delete(router);
-    unsubscribe && unsubscribe();
-  };
-}
-function provideFlightConsumer(factory) {
-  if (flightConsumerFactory) return;
-  flightConsumerFactory = factory;
-  for (const [router, unsubscribe] of flightRouters) {
-    if (!unsubscribe) flightRouters.set(router, factory(router));
-  }
-}
-
-/**
- * The flash-cookie codec, provided by the action side (data/action.ts) so
- * the router core never carries it: the core consumes the cookie eagerly
- * per request (detection + one-shot clear via the tiny flashCookie.ts half)
- * but defers decoding to this slot, read when the submissions signal
- * initializes. Actions are created at module scope, so on the server the
- * decoder is always installed before useSubmission can read — and a
- * router-only app, where it never installs, has no actions that could have
- * produced a flash cookie in the first place.
- */
-let flashDecoder;
-function provideFlashDecoder(decoder) {
-  flashDecoder || (flashDecoder = decoder);
-}
 let intent;
 function getIntent() {
   return intent;
@@ -1087,86 +632,83 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   } = integration;
   const parsePath = utils.parsePath || (p => p);
   const renderPath = utils.renderPath || (p => p);
-  // An empty slot until `useBeforeLeave` installs the guard on first use.
-  const beforeLeave = utils.beforeLeave || {};
+  const beforeLeave = utils.beforeLeave || createBeforeLeave();
   const basePath = resolvePath("", options.base || "");
-  const initialSource = untrack(source);
   if (basePath === undefined) {
     throw new Error(`${basePath} is not a valid base path`);
-  } else if (basePath && !initialSource.value) {
+  } else if (basePath && !source().value) {
     setSource({
       value: basePath,
       replace: true,
       scroll: false
     });
   }
-  const [isRouting, setIsRouting] = createSignal(false, {
-    ownedWrite: true
-  });
-
-  // Navigate override written from event handlers.
-  const [navigateTarget, setNavigateTarget] = createSignal(undefined, {
-    ownedWrite: true
-  });
+  const [isRouting, setIsRouting] = createSignal(false);
 
-  // Keep track of last target, so that last call to navigate wins
+  // Keep track of last target, so that last call to transition wins
   let lastTransitionTarget;
 
-  // source() remains canonical for native history changes; navigateTarget()
-  // temporarily overrides it for in-flight programmatic navigation.
-  const effective = createMemo(() => navigateTarget() ?? source());
-  const location = createLocation(() => effective().value, () => effective().state, utils.queryWrapper);
+  // Transition the location to a new value
+  const transition = (newIntent, newTarget) => {
+    if (newTarget.value === reference() && newTarget.state === state()) return;
+    if (lastTransitionTarget === undefined) setIsRouting(true);
+    intent = newIntent;
+    lastTransitionTarget = newTarget;
+    startTransition(() => {
+      if (lastTransitionTarget !== newTarget) return;
+      setReference(lastTransitionTarget.value);
+      setState(lastTransitionTarget.state);
+      resetErrorBoundaries();
+      if (!isServer) submissions[1](subs => subs.filter(s => s.pending));
+    }).finally(() => {
+      if (lastTransitionTarget !== newTarget) return;
+
+      // Batch, in order for isRouting and final source update to happen together
+      batch(() => {
+        intent = undefined;
+        if (newIntent === "navigate") navigateEnd(lastTransitionTarget);
+        setIsRouting(false);
+        lastTransitionTarget = undefined;
+      });
+    });
+  };
+  const [reference, setReference] = createSignal(source().value);
+  const [state, setState] = createSignal(source().state);
+  const location = createLocation(reference, state, utils.queryWrapper);
   const referrers = [];
-  // The flash cookie is consumed eagerly: its one-shot clear (Set-Cookie)
-  // must be appended before streaming flushes the response headers, and an
-  // unread outcome must not haunt a later request's render. Only detection
-  // and clearing happen here (the tiny flashCookie.ts half); the raw header
-  // is stashed and decoding waits for the action-provided codec, read when
-  // the lazily allocated submissions signal below first initializes.
-  let flashCookieHeader;
-  if (isServer) {
-    const e = getRequestEvent();
-    if (e && !(e.router && e.router.submission)) {
-      const cookieHeader = e.request.headers.get("cookie");
-      if (hasFlashCookie(cookieHeader)) {
-        flashCookieHeader = cookieHeader;
-        // one-shot: clear it even when unreadable so it can't haunt later renders
-        if (e.response && e.response.headers) e.response.headers.append("Set-Cookie", clearFlashCookie());
-      }
-    }
-  }
-  let submissions;
+  const submissions = createSignal(isServer ? initFromFlash() : []);
   const matches = createMemo(() => {
-    const pathname = typeof options.transformUrl === "function" ? options.transformUrl(location.pathname) : location.pathname;
-    const m = getRouteMatches(branches(), pathname);
-    // An unresolved lazy subtree parks readers on not-ready semantics — the
-    // navigation transition (or the SSR stream) holds until the table lands.
-    // NotReadyError (not a returned promise) because a match chain is full
-    // of component functions the hydration serializer must never see. The
-    // recompute comes from the version-signal dependency on the client and
-    // from the carried promise's retry on the server; a boundary nested
-    // inside a boundary just parks the recomputed chain again.
-    const pending = unresolvedLazyMatches(m);
-    if (pending.length) throw new NotReadyError(Promise.all(pending.map(resolveLazySubtree)));
-    return m;
+    if (typeof options.transformUrl === "function") {
+      return getRouteMatches(branches(), options.transformUrl(location.pathname));
+    }
+    return getRouteMatches(branches(), location.pathname);
   });
-  const buildParams = () => mergeParams(matches());
-  const wrapParams = utils.paramsWrapper ? getParams => utils.paramsWrapper(getParams, branches) : getParams => createMemoObject(getParams);
-  const params = wrapParams(buildParams);
+  const buildParams = () => {
+    const m = matches();
+    const params = {};
+    for (let i = 0; i < m.length; i++) {
+      Object.assign(params, m[i].params);
+    }
+    return params;
+  };
+  const params = utils.paramsWrapper ? utils.paramsWrapper(buildParams, branches) : createMemoObject(buildParams);
   const baseRoute = {
     pattern: basePath,
-    params,
     path: () => basePath,
     outlet: () => null,
     resolvePath(to) {
       return resolvePath(basePath, to);
     }
   };
+
+  // Create a native transition, when source updates
+  createRenderEffect(on(source, source => transition("native", source), {
+    defer: true
+  }));
   return {
     base: baseRoute,
     location,
     params,
-    wrapParams,
     isRouting,
     get pendingTarget() {
       return lastTransitionTarget;
@@ -1178,11 +720,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     beforeLeave,
     preloadRoute,
     singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
-    get submissions() {
-      return submissions ||= createSignal(isServer ? initSubmissions() : [], {
-        ownedWrite: true
-      });
-    }
+    submissions
   };
   function navigateFromRoute(route, to, options) {
     // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
@@ -1195,8 +733,6 @@ function createRouterContext(integration, branches, getContext, options = {}) {
         }
         return;
       }
-      // typed path proxy nodes coerce to their href
-      if (typeof to !== "string") to = to.toString();
       const queryOnly = !to || to[0] === "?";
       const {
         replace,
@@ -1215,8 +751,8 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       } else if (referrers.length >= MAX_REDIRECTS) {
         throw new Error("Too many redirects");
       }
-      const current = effective();
-      if (resolvedTo !== current.value || nextState !== current.state) {
+      const current = reference();
+      if (resolvedTo !== current || nextState !== state()) {
         if (isServer) {
           const e = getRequestEvent();
           e && (e.response = {
@@ -1231,46 +767,24 @@ function createRouterContext(integration, branches, getContext, options = {}) {
             scroll,
             state: nextState
           });
-        } else if (!beforeLeave.current || beforeLeave.current.confirm(resolvedTo, options)) {
+        } else if (beforeLeave.confirm(resolvedTo, options)) {
           referrers.push({
-            value: current.value,
+            value: current,
             replace,
             scroll,
-            state: current.state
+            state: state()
           });
-          const newTarget = {
+          transition("navigate", {
             value: resolvedTo,
             state: nextState
-          };
-          const firstNavigation = lastTransitionTarget === undefined;
-          intent = "navigate";
-          // assign the target before flushing so effects that run for the
-          // isRouting flip (e.g. pending link state) can read it
-          lastTransitionTarget = newTarget;
-          if (firstNavigation) {
-            setIsRouting(true);
-            flush();
-          }
-          if (lastTransitionTarget === newTarget) {
-            setNavigateTarget({
-              ...lastTransitionTarget
-            });
-            queueMicrotask(() => {
-              if (lastTransitionTarget !== newTarget) return;
-              intent = undefined;
-              navigateEnd(lastTransitionTarget);
-              setNavigateTarget(undefined);
-              setIsRouting(false);
-              lastTransitionTarget = undefined;
-            });
-          }
+          });
         }
       }
     });
   }
   function navigatorFactory(route) {
     // Workaround for vite issue (https://github.com/vitejs/vite/issues/3803)
-    route = route || useOptionalContext(RouteContextObj) || baseRoute;
+    route = route || useContext(RouteContextObj) || baseRoute;
     return (to, options) => navigateFromRoute(route, to, options);
   }
   function navigateEnd(next) {
@@ -1286,11 +800,6 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   }
   function preloadRoute(url, preloadData) {
     const matches = getRouteMatches(branches(), url.pathname);
-    // An unresolved lazy subtree in the chain: the placeholder's
-    // component.preload (below) kicks the table load; once it lands,
-    // preload again so the real inner routes warm too.
-    const boundary = matches.find(m => m.route.lazy && !m.route.lazy.resolved);
-    boundary && resolveLazySubtree(boundary.route.lazy).then(() => preloadRoute(url, preloadData));
     const prevIntent = intent;
     intent = "preload";
     for (let match in matches) {
@@ -1319,29 +828,16 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }
     intent = prevIntent;
   }
-
-  // Seeds the initial submission from a no-JS form post: the server
-  // function handler redirected back with the outcome in a one-shot flash
-  // cookie (see src/server.ts's handleNoJS), consumed eagerly above and
-  // decoded here — so the post-redirect SSR renders useSubmission() state
-  // exactly as a scripted submission would. An explicitly pre-seeded
-  // `event.router.submission` (framework integrations) takes precedence.
-  function initSubmissions() {
+  function initFromFlash() {
     const e = getRequestEvent();
-    const submission = e && e.router && e.router.submission || (flashDecoder && flashCookieHeader !== undefined ? flashDecoder(flashCookieHeader) : undefined);
-    if (!submission) return [];
-    return [{
-      ...submission,
-      clear() {},
-      retry() {}
-    }];
+    return e && e.router && e.router.submission ? [e.router.submission] : [];
   }
 }
-function createRouteContext(router, parent, outlet, match, matches = () => [match()]) {
+function createRouteContext(router, parent, outlet, match) {
   const {
     base,
     location,
-    wrapParams
+    params
   } = router;
   const {
     pattern,
@@ -1349,10 +845,6 @@ function createRouteContext(router, parent, outlet, match, matches = () => [matc
     preload
   } = match().route;
   const path = createMemo(() => match().path);
-  // Params scoped to this route's lifetime. `matches` is expected to retain
-  // its last valid value while this route is being torn down, so outgoing
-  // components and preloads never observe another route's params.
-  const params = wrapParams(() => mergeParams(matches()));
   component && component.preload && component.preload();
   inPreloadFn = true;
   const data = preload ? preload({
@@ -1364,7 +856,6 @@ function createRouteContext(router, parent, outlet, match, matches = () => [matc
   const route = {
     parent,
     pattern,
-    params,
     path,
     outlet: () => component ? createComponent(component, {
       params,
@@ -1381,24 +872,63 @@ function createRouteContext(router, parent, outlet, match, matches = () => [matc
   return route;
 }
 
+const createRouterComponent = router => props => {
+  const {
+    base
+  } = props;
+  const routeDefs = children(() => props.children);
+  const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
+  let context;
+  const routerState = createRouterContext(router, branches, () => context, {
+    base,
+    singleFlight: props.singleFlight,
+    transformUrl: props.transformUrl
+  });
+  router.create && router.create(routerState);
+  return createComponent$1(RouterContextObj.Provider, {
+    value: routerState,
+    get children() {
+      return createComponent$1(Root, {
+        routerState: routerState,
+        get root() {
+          return props.root;
+        },
+        get preload() {
+          return props.rootPreload || props.rootLoad;
+        },
+        get children() {
+          return [memo(() => (context = getOwner()) && null), createComponent$1(Routes, {
+            routerState: routerState,
+            get branches() {
+              return branches();
+            }
+          })];
+        }
+      });
+    }
+  });
+};
 function Root(props) {
   const location = props.routerState.location;
   const params = props.routerState.params;
   const data = createMemo(() => props.preload && untrack(() => {
     setInPreloadFn(true);
-    try {
-      return props.preload({
-        params,
-        location,
-        intent: getIntent() || "initial"
-      });
-    } finally {
-      setInPreloadFn(false);
-    }
+    props.preload({
+      params,
+      location,
+      intent: getIntent() || "initial"
+    });
+    setInPreloadFn(false);
   }));
-  const RootComp = props.root;
-  if (RootComp) {
-    return createComponent$1(RootComp, {
+  return createComponent$1(Show, {
+    get when() {
+      return props.root;
+    },
+    keyed: true,
+    get fallback() {
+      return props.children;
+    },
+    children: Root => createComponent$1(Root, {
       params: params,
       location: location,
       get data() {
@@ -1407,58 +937,38 @@ function Root(props) {
       get children() {
         return props.children;
       }
-    });
-  }
-  return props.children;
+    })
+  });
 }
 function Routes(props) {
   if (isServer) {
     const e = getRequestEvent();
     if (e && e.router && e.router.dataOnly) {
-      dataOnly(e, props.routerState, props.branches());
+      dataOnly(e, props.routerState, props.branches);
       return;
     }
-    if (e && !(e.router && e.router.matches)) {
-      // A lazy getter rather than a snapshot: unresolved lazy subtrees mean
-      // the match chain can still improve while the render streams, and
-      // frameworks read this after the render settles.
-      Object.defineProperty(e.router || (e.router = {}), "matches", {
-        configurable: true,
-        enumerable: true,
-        get: () => props.routerState.matches().map(({
-          route,
-          path,
-          params
-        }) => ({
-          path: route.originalPath,
-          pattern: route.pattern,
-          match: path,
-          params,
-          info: route.info
-        }))
-      });
-    }
+    e && ((e.router || (e.router = {})).matches || (e.router.matches = props.routerState.matches().map(({
+      route,
+      path,
+      params
+    }) => ({
+      path: route.originalPath,
+      pattern: route.pattern,
+      match: path,
+      params,
+      info: route.info
+    }))));
   }
   const disposers = [];
   let root;
-  let prevMatches;
   // dispose the detached per-route roots when this component unmounts, otherwise
   // they stay subscribed to `matches` and crash on a later navigation (#451)
   onCleanup(() => disposers.forEach(dispose => dispose()));
-  // Route roots must outlive re-runs of the `routeStates` memo below, so they
-  // are created under the owner of this component rather than the memo's
-  // computation (which disposes its children every time it re-runs).
-  const owner = getOwner();
-  const routeStates = createMemo(prev => {
-    // While a lazy subtree resolves, `matches()` is not ready and this
-    // computation parks with it — no route contexts are created against
-    // placeholder matches.
-    const nextMatches = props.routerState.matches();
-    const previousMatches = prevMatches;
-    let equal = previousMatches && nextMatches.length === previousMatches.length;
+  const routeStates = createMemo(on(props.routerState.matches, (nextMatches, prevMatches, prev) => {
+    let equal = prevMatches && nextMatches.length === prevMatches.length;
     const next = [];
     for (let i = 0, len = nextMatches.length; i < len; i++) {
-      const prevMatch = previousMatches && previousMatches[i];
+      const prevMatch = prevMatches && prevMatches[i];
       const nextMatch = nextMatches[i];
       if (prev && prevMatch && nextMatch.route.key === prevMatch.route.key) {
         next[i] = prev[i];
@@ -1467,46 +977,45 @@ function Routes(props) {
         if (disposers[i]) {
           disposers[i]();
         }
-        runWithOwner(owner, () => createRoot(dispose => {
+        createRoot(dispose => {
           disposers[i] = dispose;
-          const routeKey = nextMatch.route.key;
-          // Retain the last matches in which this route participated so
-          // that its components and preloads never observe another
-          // route's params/path while this route is being torn down.
-          const matchesAtLevel = createMemo(prev => {
+          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => {
             const routeMatches = props.routerState.matches();
-            const m = routeMatches[i];
-            return m && m.route.key === routeKey ? routeMatches : prev || nextMatches;
+            return routeMatches[i] ?? routeMatches[0];
           });
-          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => matchesAtLevel()[i], matchesAtLevel);
-        }));
+        });
       }
     }
     disposers.splice(nextMatches.length).forEach(dispose => dispose());
     if (prev && equal) {
-      prevMatches = nextMatches;
       return prev;
     }
     root = next[0];
-    prevMatches = nextMatches;
     return next;
-  });
-  const outlet = createOutlet(() => routeStates() && root);
-  return memo(outlet);
+  }));
+  return createOutlet(() => routeStates() && root)();
 }
 const createOutlet = child => {
-  return () => {
-    const c = child();
-    if (c) {
-      return createComponent$1(RouteContextObj, {
-        value: c,
-        get children() {
-          return c.outlet();
-        }
-      });
+  return () => createComponent$1(Show, {
+    get when() {
+      return child();
+    },
+    keyed: true,
+    children: child => createComponent$1(RouteContextObj.Provider, {
+      value: child,
+      get children() {
+        return child.outlet();
+      }
+    })
+  });
+};
+const Route = props => {
+  const childRoutes = children(() => props.children);
+  return mergeProps(props, {
+    get children() {
+      return childRoutes();
     }
-    return undefined;
-  };
+  });
 };
 
 // for data only mode with single flight mutations
@@ -1514,10 +1023,6 @@ function dataOnly(event, routerState, branches) {
   const url = new URL(event.request.url);
   const prevMatches = getRouteMatches(branches, new URL(event.router.previousUrl || event.request.url).pathname);
   const matches = getRouteMatches(branches, url.pathname);
-  // This pass is synchronous — an unresolved lazy subtree can only be
-  // kicked, not awaited (the flight collector's own runner awaits; see
-  // src/server.ts). Best effort so a subsequent pass sees the table.
-  unresolvedLazyMatches([...prevMatches, ...matches]).forEach(resolveLazySubtree);
   for (let match = 0; match < matches.length; match++) {
     if (!prevMatches[match] || matches[match].route !== prevMatches[match].route) event.router.dataOnly = true;
     const {
@@ -1532,50 +1037,36 @@ function dataOnly(event, routerState, branches) {
   }
 }
 
+function intercept([value, setValue], get, set) {
+  return [value, set ? v => setValue(set(v)) : setValue];
+}
+function createRouter(config) {
+  let ignore = false;
+  const wrap = value => typeof value === "string" ? {
+    value
+  } : value;
+  const signal = intercept(createSignal(wrap(config.get()), {
+    equals: (a, b) => a.value === b.value && a.state === b.state
+  }), undefined, next => {
+    !ignore && config.set(next);
+    if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = true;
+    return next;
+  });
+  config.init && onCleanup(config.init((value = config.get()) => {
+    ignore = true;
+    signal[1](wrap(value));
+    ignore = false;
+  }));
+  return createRouterComponent({
+    signal,
+    create: config.create,
+    utils: config.utils
+  });
+}
 function bindEvent(target, type, handler) {
   target.addEventListener(type, handler);
   return () => target.removeEventListener(type, handler);
 }
-
-// Depth stamping supports blocking browser-initiated navigation (back/forward)
-// for `useBeforeLeave`. It stays always-on — a couple of history.state writes —
-// so blocking stays exact no matter when the first guard subscribes, while the
-// guard machinery itself lives behind the lazy `beforeLeave` slot.
-
-let depth;
-function saveCurrentDepth() {
-  if (!window.history.state || window.history.state._depth == null) {
-    window.history.replaceState({
-      ...window.history.state,
-      _depth: window.history.length - 1
-    }, "");
-  }
-  depth = window.history.state._depth;
-}
-function keepDepth(state) {
-  return {
-    ...state,
-    _depth: window.history.state && window.history.state._depth
-  };
-}
-function notifyIfNotBlocked(notify, block) {
-  let ignore = false;
-  return () => {
-    const prevDepth = depth;
-    saveCurrentDepth();
-    const delta = prevDepth == null ? null : depth - prevDepth;
-    if (ignore) {
-      ignore = false;
-      return;
-    }
-    if (delta && block(delta)) {
-      ignore = true;
-      window.history.go(-delta);
-    } else {
-      notify();
-    }
-  };
-}
 function scrollToHash(hash, fallbackTop) {
   const el = hash && document.getElementById(hash);
   if (el) {
@@ -1585,428 +1076,18 @@ function scrollToHash(hash, fallbackTop) {
   }
 }
 
-/**
- * A history adapter: the source of truth for the current URL and how
- * navigations write back to it. Adapters are plain imported values so
- * unused ones never enter the bundle — `createRouter` defaults to browser
- * history on the client and the request URL on the server.
- */
-
-function browserHistory() {
-  const getSource = () => {
-    const url = window.location.pathname + window.location.search;
-    const state = window.history.state && window.history.state._depth && Object.keys(window.history.state).length === 1 ? undefined : window.history.state;
-    return {
-      value: url + window.location.hash,
-      state
-    };
-  };
-  const beforeLeave = {};
-  if (!isServer) saveCurrentDepth();
-  return {
-    get: getSource,
-    set({
-      value,
-      replace,
-      scroll,
-      state
-    }) {
-      if (replace) {
-        window.history.replaceState(keepDepth(state), "", value);
-      } else {
-        window.history.pushState(state, "", value);
-      }
-      scrollToHash(decodeURIComponent(window.location.hash.slice(1)), scroll);
-      saveCurrentDepth();
-    },
-    init: notify => bindEvent(window, "popstate", notifyIfNotBlocked(notify, delta => {
-      const guard = beforeLeave.current;
-      if (!guard) return false;
-      if (delta) {
-        return !guard.confirm(delta);
-      } else {
-        const s = getSource();
-        return !guard.confirm(s.value, {
-          state: s.state
-        });
-      }
-    })),
-    utils: {
-      go: delta => window.history.go(delta),
-      beforeLeave
-    }
+function getPath(url) {
+  const u = new URL(url);
+  return u.pathname + u.search;
+}
+function StaticRouter(props) {
+  let e;
+  const obj = {
+    value: props.url || (e = getRequestEvent()) && getPath(e.request.url) || ""
   };
-}
-function hashParser(str) {
-  const to = str.replace(/^.*?#/, "");
-  // Hash-only hrefs like `#foo` from plain anchors will come in as `/#foo` whereas a link to
-  // `/foo` will be `/#/foo`. Check if the to starts with a `/` and if not append it as a hash
-  // to the current path so we can handle these in-page anchors correctly.
-  if (!to.startsWith("/")) {
-    const [, path = "/"] = window.location.hash.split("#", 2);
-    return `${path}#${to}`;
-  }
-  return to;
-}
-function hashHistory() {
-  const getSource = () => window.location.hash.slice(1);
-  const beforeLeave = {};
-  if (!isServer) saveCurrentDepth();
-  return {
-    get: getSource,
-    set({
-      value,
-      replace,
-      scroll,
-      state
-    }) {
-      if (replace) {
-        window.history.replaceState(keepDepth(state), "", "#" + value);
-      } else {
-        window.history.pushState(state, "", "#" + value);
-      }
-      const hashIndex = value.indexOf("#");
-      const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
-      scrollToHash(hash, scroll);
-      saveCurrentDepth();
-    },
-    init: notify => bindEvent(window, "hashchange", notifyIfNotBlocked(notify, delta => {
-      const guard = beforeLeave.current;
-      return !!guard && !guard.confirm(delta && delta < 0 ? delta : getSource());
-    })),
-    utils: {
-      go: delta => window.history.go(delta),
-      renderPath: path => `#${path}`,
-      parsePath: hashParser,
-      beforeLeave
-    }
-  };
-}
-function memoryHistory(initial = "/") {
-  const entries = [initial];
-  let index = 0;
-  const listeners = [];
-  const go = n => {
-    // https://github.com/remix-run/react-router/blob/682810ca929d0e3c64a76f8d6e465196b7a2ac58/packages/router/history.ts#L245
-    index = Math.max(0, Math.min(index + n, entries.length - 1));
-    const value = entries[index];
-    listeners.forEach(listener => listener(value));
-  };
-  const listen = listener => {
-    listeners.push(listener);
-    return () => {
-      const i = listeners.indexOf(listener);
-      listeners.splice(i, 1);
-    };
-  };
-  return {
-    get: () => entries[index],
-    set: ({
-      value,
-      scroll,
-      replace
-    }) => {
-      if (replace) {
-        entries[index] = value;
-      } else {
-        entries.splice(index + 1, entries.length - index, value);
-        index++;
-      }
-      listeners.forEach(listener => listener(value));
-      setTimeout(() => {
-        if (scroll) {
-          scrollToHash(value.split("#")[1] || "", true);
-        }
-      }, 0);
-    },
-    back: () => go(-1),
-    forward: () => go(1),
-    go,
-    listen,
-    init: listen,
-    utils: {
-      go
-    }
-  };
-}
-
-/**
- * Identity helper that preserves literal types when the route tree is
- * declared as a separate variable. `createRouter` infers literally from
- * inline arrays, but an extracted `const routes = [...]` widens paths to
- * `string` and silently degrades `paths` and the typed hooks unless it is
- * declared `as const` — `defineRoutes` makes that impossible to forget.
- */
-function defineRoutes(routes) {
-  return routes;
-}
-/** Wraps a history adapter in the integration signal the router core consumes. Must run under a reactive owner. */
-function createIntegration(history) {
-  let ignore = false;
-  const wrap = value => typeof value === "string" ? {
-    value
-  } : value;
-  const [read, write] = createSignal(wrap(history.get()), {
-    equals: (a, b) => a.value === b.value && a.state === b.state,
-    ownedWrite: true
-  });
-  const signal = [read, next => {
-    !ignore && history.set(next);
-    if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = true;
-    write(next);
-  }];
-  history.init && onCleanup(history.init((value = history.get()) => {
-    ignore = true;
-    signal[1](wrap(value));
-    ignore = false;
-  }));
-  return {
-    signal,
-    utils: history.utils
-  };
-}
-
-/**
- * Server default: a static view of the request URL — no signal machinery, a
- * server render never navigates. Without a request event (SSG scripts,
- * server-side tests) the configured history adapter provides the location,
- * so e.g. `memoryHistory("/page")` works isomorphically.
- */
-function staticIntegration(history) {
-  const e = getRequestEvent();
-  let value = "";
-  if (e) {
-    const url = new URL(e.request.url);
-    value = url.pathname + url.search;
-  } else if (history) {
-    value = history.get();
-  }
-  const obj = typeof value === "string" ? {
-    value
-  } : {
-    ...value
-  };
-  return {
-    signal: [() => obj, next => Object.assign(obj, next)],
-    utils: history && history.utils
-  };
-}
-function createRouter(config) {
-  const basePath = config.base || "";
-  // Routes are immutable per instance, so compilation is shared by every
-  // mount, request, and `match()` call — recompiled only when a lazy subtree
-  // resolves (append-only: resolution, not mutation). Reading the version
-  // inside a computation subscribes it; plain calls just see current state.
-  let compiled;
-  let compiledVersion = -1;
-  const branches = () => {
-    const version = trackLazySubtrees();
-    if (!compiled || compiledVersion !== version) {
-      compiled = createBranches(config.routes, basePath);
-      compiledVersion = version;
-    }
-    return compiled;
-  };
-  const renderPath = config.history && config.history.utils && config.history.utils.renderPath || undefined;
-  function RouterComponent(props) {
-    // One router per app: the session (location, history, delegation, link
-    // claims, preloading) has a single owner, and a second instance would
-    // fight it — stale content on click navigations, conflicting link
-    // attributes. Compose route trees instead; lazy subtrees are the planned
-    // answer for definitions unknown at build time.
-    if (useOptionalContext(RouterContextObj)) {
-      console.warn("Mounting a router inside another router is not supported. " + "Compose route trees in one createRouter config instead.");
-    }
-    const root = untrack(() => props.children);
-    const integration = isServer ? staticIntegration(config.history) : createIntegration(config.history || browserHistory());
-    let context;
-    const routerState = createRouterContext(integration, branches, () => context, {
-      base: basePath,
-      singleFlight: config.singleFlight,
-      transformUrl: config.transformUrl
-    });
-    if (!isServer) {
-      setupNativeEvents({
-        preload: config.preloadLinks,
-        explicitLinks: config.explicitLinks,
-        actionBase: config.actionBase,
-        transformUrl: config.transformUrl
-      })(routerState);
-      setupLinkClaims(routerState, config.explicitLinks);
-      if (routerState.singleFlight) onCleanup(registerFlightRouter(routerState));
-    }
-    return createComponent$1(RouterContextObj, {
-      value: routerState,
-      get children() {
-        return createComponent$1(Root, {
-          routerState: routerState,
-          root: root,
-          get preload() {
-            return config.preload;
-          },
-          get children() {
-            return [memo(() => (context = getOwner()) && null), createComponent$1(Routes, {
-              routerState: routerState,
-              branches: branches
-            })];
-          }
-        });
-      }
-    });
-  }
-  const instance = Object.assign(RouterComponent, {
-    routes: config.routes,
-    config,
-    match(url) {
-      const u = new URL(url, mockBase);
-      const pathname = config.transformUrl ? config.transformUrl(u.pathname) : u.pathname;
-      return getRouteMatches(branches(), pathname).map(({
-        route,
-        path,
-        params
-      }) => ({
-        path: route.originalPath,
-        pattern: route.pattern,
-        match: path,
-        params,
-        info: route.info
-      }));
-    }
-  });
-  // Built on first access (a getter via Object.assign would run during the
-  // copy) so runtimes without Proxy — some older TVs — can still route as
-  // long as they never touch typed paths.
-  let paths;
-  Object.defineProperty(instance, "paths", {
-    get: () => paths || (paths = createPathsProxy(renderPath, basePath))
-  });
-  return instance;
-}
-
-function createBeforeLeave() {
-  let listeners = new Set();
-  function subscribe(listener) {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  }
-  let ignore = false;
-  function confirm(to, options) {
-    if (ignore) return !(ignore = false);
-    const e = {
-      to,
-      options,
-      defaultPrevented: false,
-      preventDefault: () => e.defaultPrevented = true
-    };
-    for (const l of listeners) l.listener({
-      to,
-      options,
-      // delegate to the shared event so later listeners' preventDefault
-      // calls are observable from earlier listeners
-      get defaultPrevented() {
-        return e.defaultPrevented;
-      },
-      preventDefault: e.preventDefault,
-      from: l.location,
-      retry: force => {
-        force && (ignore = true);
-        l.navigate(to, {
-          ...options,
-          resolve: false
-        });
-      }
-    });
-    return !e.defaultPrevented;
-  }
-  return {
-    subscribe,
-    confirm
-  };
-}
-
-/**
- * useBeforeLeave takes a function that will be called prior to leaving a route.
- * The function will be called with:
- *
- * - from (*Location*): current location (before change).
- * - to (*string | number*): path passed to `navigate`.
- * - options (*NavigateOptions*): options passed to navigate.
- * - preventDefault (*function*): call to block the route change.
- * - defaultPrevented (*readonly boolean*): `true` if any previously called leave handlers called `preventDefault`.
- * - retry (*function*, force?: boolean ): call to retry the same navigation, perhaps after confirming with the user. Pass `true` to skip running the leave handlers again (i.e. force navigate without confirming).
- *
- * @example
- * ```js
- * useBeforeLeave((e: BeforeLeaveEventArgs) => {
- *   if (form.isDirty && !e.defaultPrevented) {
- *     // preventDefault to block immediately and prompt user async
- *     e.preventDefault();
- *     setTimeout(() => {
- *       if (window.confirm("Discard unsaved changes - are you sure?")) {
- *         // user wants to proceed anyway so retry with force=true
- *         e.retry(true);
- *       }
- *     }, 100);
- *   }
- * });
- * ```
- */
-const useBeforeLeave = listener => {
-  // Installing the guard here (instead of eagerly in the router/history) keeps
-  // all of createBeforeLeave tree-shakeable for apps that never block leaves.
-  const slot = useRouter().beforeLeave;
-  const s = (slot.current || (slot.current = createBeforeLeave())).subscribe({
-    listener,
-    location: useLocation(),
-    navigate: useNavigate()
-  });
-  onCleanup(s);
-};
-
-// The no-JS form convention's cookie codec. When a form posts to a server
-// function without the client runtime (no instance header), the server
-// handler redirects back carrying the outcome in a one-shot "flash" cookie;
-// the next SSR pass reads it and seeds the router's submission state so
-// useSubmission() renders the result exactly as a scripted submission would.
-// Both codec halves live in this module so the write (src/server.ts, the
-// handler's handleNoJS) and the read (provided to the router core by
-// data/action.ts) can never drift apart. The cookie's name/clearing live in
-// flashCookie.ts — the only piece the router core itself consumes — so this
-// codec stays out of bundles that never load the action layer.
-
-function decodeInputValue(value) {
-  if (value && typeof value === "object") {
-    if (Array.isArray(value.$f)) {
-      const form = new FormData();
-      for (const [k, v] of value.$f) form.append(k, v);
-      return form;
-    }
-    if (Array.isArray(value.$u)) return new URLSearchParams(value.$u);
-  }
-  return value;
-}
-
-/**
- * Decodes the flash cookie out of a request's Cookie header. Returns
- * undefined when absent or unreadable (a malformed cookie must never take
- * down SSR — it is cleared either way).
- */
-function decodeFlashCookie(cookieHeader) {
-  const match = matchFlashCookie(cookieHeader);
-  if (!match) return;
-  try {
-    const payload = JSON.parse(decodeURIComponent(match));
-    if (!payload || !payload.result) return;
-    const result = payload.error ? new Error(payload.result) : payload.result;
-    return {
-      input: Array.isArray(payload.input) ? payload.input.map(decodeInputValue) : [],
-      url: payload.url,
-      result: payload.thrown ? undefined : result,
-      error: payload.thrown ? result : undefined
-    };
-  } catch (error) {
-    console.error(error);
-  }
+  return createRouterComponent({
+    signal: [() => obj, next => Object.assign(obj, next)]
+  })(props);
 }
 
 const LocationHeader = "Location";
@@ -2037,9 +1118,11 @@ function getCache() {
  */
 function revalidate(key, force = true) {
   const now = Date.now();
-  cacheKeyOp(key, entry => {
-    force && (entry[0] = 0); //force cache miss
-    entry[4][1](now); // retrigger live signals
+  // force the cache miss synchronously so a `refetch` in the same tick sees it —
+  // startTransition defers its callback to a microtask (#497)
+  force && cacheKeyOp(key, entry => entry[0] = 0);
+  return startTransition(() => {
+    cacheKeyOp(key, entry => entry[4][1](now)); // retrigger live signals
   });
 }
 function cacheKeyOp(key, fn) {
@@ -2049,16 +1132,8 @@ function cacheKeyOp(key, fn) {
   }
 }
 function query(fn, name) {
-  // query implies GET: the router primitive is the declaration site, so a
-  // server function handed to query() is wrapped with core `GET(fn)` here,
-  // at query-creation (module scope) — the server half records the method
-  // declaration for dispatch, the client half swaps in the GET transport.
-  // An explicit `GET(fn)` already carries the declaration on the metadata
-  // channel (`getServerFunctionMetadata(fn)?.method === "GET"`) and passes
-  // through; non-server functions are untouched.
-  if (isServerFunction(fn) && !getServerFunctionMetadata(fn)?.method) {
-    fn = GET(fn);
-  }
+  // prioritize GET for server functions
+  if (fn.GET) fn = fn.GET;
   const cachedFn = (...args) => {
     const cache = getCache();
     const intent = getIntent();
@@ -2083,7 +1158,7 @@ function query(fn, name) {
         }
       }
     }
-    if (getObserver() && !isServer) {
+    if (getListener() && !isServer) {
       tracking = true;
       onCleanup(() => cached[4].count--);
     }
@@ -2098,7 +1173,7 @@ function query(fn, name) {
       let res = cached[1];
       if (intent !== "preload") {
         res = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
-        !isServer && intent === "navigate" && cached[4][1](cached[0]); // update version
+        !isServer && intent === "navigate" && startTransition(() => cached[4][1](cached[0])); // update version
       }
       inPreloadFn && "then" in res && res.catch(() => {});
       return res;
@@ -2113,11 +1188,9 @@ function query(fn, name) {
       cached[0] = now;
       cached[1] = res;
       cached[3] = intent;
-      !isServer && intent === "navigate" && cached[4][1](cached[0]); // update version
+      !isServer && intent === "navigate" && startTransition(() => cached[4][1](cached[0])); // update version
     } else {
-      cache.set(key, cached = [now, res,, intent, createSignal(now, {
-        ownedWrite: true
-      })]);
+      cache.set(key, cached = [now, res,, intent, createSignal(now)]);
       cached[4].count = 0;
     }
     if (tracking) {
@@ -2140,14 +1213,6 @@ function query(fn, name) {
     return res;
     function handleResponse(error) {
       return async v => {
-        let enveloped;
-        let hasEnveloped = false;
-        if (isResponseEnvelope(v)) {
-          // respond(): the value rides in memory beside the metadata
-          enveloped = v.value;
-          hasEnveloped = true;
-          v = v.response;
-        }
         if (v instanceof Response) {
           const e = getRequestEvent();
           if (e) {
@@ -2158,17 +1223,14 @@ function query(fn, name) {
           const url = v.headers.get(LocationHeader);
           if (url !== null) {
             // client + server relative redirect
-            if (navigate && url.startsWith("/")) navigate(url, {
-              replace: true
+            if (navigate && url.startsWith("/")) startTransition(() => {
+              navigate(url, {
+                replace: true
+              });
             });else if (!isServer) window.location.href = url;else if (e) e.response.status = 302;
             return;
           }
-          if (hasEnveloped) v = enveloped;else if (v.body) {
-            // responses the transport hands over whole (revalidation) carry a
-            // codec-encoded body; anything else (a raw user Response) stays whole
-            const decoded = await decodeResponse(v);
-            if (decoded !== undefined) v = decoded;
-          }
+          if (v.customBody) v = await v.customBody();
         }
         if (error) throw v;
         cached[2] = v;
@@ -2194,14 +1256,15 @@ query.set = (key, value) => {
     cached[2] = value;
     cached[3] = "preload";
   } else {
-    cache.set(key, cached = [now, Promise.resolve(value), value, "preload", createSignal(now, {
-      ownedWrite: true
-    })]);
+    cache.set(key, cached = [now, Promise.resolve(value), value, "preload", createSignal(now)]);
     cached[4].count = 0;
   }
 };
 query.delete = key => getCache().delete(key);
 query.clear = () => getCache().clear();
+
+/** @deprecated use query instead */
+const cache = query;
 function matchKey(key, keys) {
   for (let k of keys) {
     if (k && key.startsWith(k)) return true;
@@ -2222,122 +1285,14 @@ function isPlainObject(obj) {
   return obj != null && typeof obj === "object" && (!(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype);
 }
 
-const submitHooksSymbol = Symbol("routerActionSubmitHooks");
-const settledHooksSymbol = Symbol("routerActionSettledHooks");
-const invokeSymbol = Symbol("routerActionInvoke");
-
-// Forms submitted through delegation are marked `aria-busy` while their
-// action is in flight — the form half of the attribute vocabulary links get
-// (`data-active`/`data-pending`). Style with `form[aria-busy] button { ... }`.
-// A counter (not a boolean) keeps the attribute through overlapping
-// submissions from the same form.
-const busyForms = /* #__PURE__ */new WeakMap();
-function setFormBusy(form, delta) {
-  const count = (busyForms.get(form) || 0) + delta;
-  busyForms.set(form, count);
-  count > 0 ? form.setAttribute("aria-busy", "true") : form.removeAttribute("aria-busy");
-}
 const actions = /* #__PURE__ */new Map();
-
-/**
- * The document-delegation submit handler for router actions. Lives here —
- * not in events.ts — so the router's event wiring holds no static reference
- * to the action module; `installRouterIntegrations` slots it in when the
- * first action is created on the client.
- */
-function handleFormAction(evt, router, actionBase) {
-  if (evt.defaultPrevented) return;
-  let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.getAttribute("formaction") : evt.target.getAttribute("action");
-  if (!actionRef) return;
-  const serverAction = !actionRef.startsWith("https://action/");
-  if (serverAction) {
-    // normalize server actions
-    const url = new URL(actionRef, mockBase);
-    actionRef = router.parsePath(url.pathname + url.search);
-    if (!actionRef.startsWith(actionBase)) return;
-  }
-  if (evt.target.method.toUpperCase() !== "POST") throw new Error("Only POST forms are supported for Actions");
-  // A registry miss on a server-action url is a direct bind whose module
-  // never loaded client-side (server components): the url is self-describing
-  // (`?id`, bound `?args`), so a generic invocation is synthesized from it —
-  // delegation alone is sufficient, the no-JS path stays a no-JS fallback.
-  // Client-only actions (`https://action/`) are their module's JS by
-  // definition, so a miss there falls through to native submission.
-  const handler = actions.get(actionRef) || serverAction && createServerFormAction(actionRef);
-  if (handler) {
-    evt.preventDefault();
-    const data = new FormData(evt.target, evt.submitter);
-    handler.call({
-      r: router,
-      f: evt.target
-    }, evt.target.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
-  }
-}
-
-/**
- * Synthesizes a router action for a server-rendered action url. The url
- * carries everything an invocation needs — the function id and any bound
- * `.with()` arguments (plain JSON in `?args`, which the server prepends for
- * natural-encoding bodies exactly as it does for no-JS posts) — so the
- * FormData is posted to it verbatim through the server-function transport:
- * submissions, `aria-busy`, redirects, revalidation, and single-flight all
- * flow through the normal action machinery. Registered under the url, so
- * repeat submits reuse it (and a later real registration overrides it).
- */
-function createServerFormAction(url) {
-  const id = new URL(url, mockBase).searchParams.get("id");
-  if (!id) return undefined;
-  // typecheck resolves the server half of the dual module; this path only
-  // runs in the browser, where the client transport's signature applies
-  const stub = createServerReference(id, undefined, url);
-  const caller = Object.assign(form => stub(form), {
-    url
-  });
-  return actionImpl(caller);
-}
-
-/**
- * Entry point for delegation's lazy fallback (data/events.ts): when no form
- * handler was ever installed — no action module in the client graph at all —
- * the router intercepts posts to server-action urls synchronously and loads
- * this module to run them. The FormData was captured at submit time; only
- * the enctype conversion and the generic invocation happen here.
- */
-function submitServerForm(router, url, form, data) {
-  const handler = actions.get(url) || createServerFormAction(url);
-  // no `?id` — not the server function convention; nothing can run it,
-  // resubmit natively (submit() bypasses the delegated handler)
-  if (!handler) return form.submit();
-  handler.call({
-    r: router,
-    f: form
-  }, form.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
-}
-
-// Wires the action layer into the router's slots exactly once, triggered by
-// the first action creation. Not an import side effect — with
-// `sideEffects: false`, module evaluation only happens when action() is
-// actually used, which is precisely when the wiring is wanted: no action in
-// the graph means no form interception, no single-flight subscription (the
-// server is never asked to collect), and no flash cookies to decode. On the
-// server, actions are created at module scope, so the flash decoder is
-// always installed before useSubmission can read the submissions signal.
-let integrationsInstalled = false;
-function installRouterIntegrations() {
-  if (integrationsInstalled) return;
-  integrationsInstalled = true;
-  provideFlashDecoder(decodeFlashCookie);
-  if (!isServer) {
-    setRouterFormHandler(handleFormAction);
-    provideFlightConsumer(setupFlightDataConsumer);
-  }
-}
 function useSubmissions(fn, filter) {
   const router = useRouter();
   const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.base && (!filter || filter(s.input))));
   return new Proxy([], {
     get(_, property) {
       if (property === $TRACK) return subs();
+      if (property === "pending") return subs().some(sub => !sub.result);
       return subs()[property];
     },
     has(_, property) {
@@ -2345,125 +1300,99 @@ function useSubmissions(fn, filter) {
     }
   });
 }
+function useSubmission(fn, filter) {
+  const submissions = useSubmissions(fn, filter);
+  return new Proxy({}, {
+    get(_, property) {
+      if (submissions.length === 0 && (property === "clear" || property === "retry")) return () => {};
+      return submissions[submissions.length - 1]?.[property];
+    }
+  });
+}
 function useAction(action) {
   const r = useRouter();
   return (...args) => action.apply({
     r
   }, args);
 }
-function actionImpl(fn, options = {}) {
-  async function invoke(variables, current) {
+function action(fn, options = {}) {
+  function mutate(...variables) {
     const router = this.r;
     const form = this.f;
-    const submitHooks = current[submitHooksSymbol];
-    const settledHooks = current[settledHooksSymbol];
-    // Single-flight opt-in is no longer per call: the router's registered
-    // flight-data consumer (see setupFlightDataConsumer) makes the transport
-    // send the request header itself, so the mutation is just called.
-    const runMutation = () => fn(...variables);
-    const run = action$1(async function* (context) {
-      context.optimistic?.();
-      try {
-        const value = await context.call();
-        yield;
-        return {
-          error: false,
-          value
-        };
-      } catch (error) {
-        yield;
-        return {
-          error: true,
-          value: error
-        };
+    const p = (router.singleFlight && fn.withOptions ? fn.withOptions({
+      headers: {
+        "X-Single-Flight": "true"
       }
-    });
-    form && setFormBusy(form, 1);
-    let settled;
-    let response;
-    // The transport consumer is awaited before a single-flight mutation
-    // resolves, so a counter delta over the call tells whether this action's
-    // metadata was already applied. Overlapping mutations can cross-attribute
-    // a run (skipping one default revalidation another pass just covered) —
-    // a far smaller window than predicting from the function's identity,
-    // which misses every response the server returned without flight data.
-    const flightApplicationsBefore = flightApplications;
-    try {
-      settled = await settleActionResult(run({
-        call: runMutation,
-        optimistic: submitHooks.size ? () => {
-          for (const hook of submitHooks.values()) hook(...variables);
-        } : undefined
-      }));
-      response = await handleResponse(settled.value, settled.error, router.navigatorFactory(), flightApplications !== flightApplicationsBefore);
-    } finally {
-      form && setFormBusy(form, -1);
-    }
-    if (!response) return undefined;
+    }) : fn)(...variables);
+    const [result, setResult] = createSignal();
     let submission;
-    submission = {
+    function handler(error) {
+      return async res => {
+        const result = await handleResponse(res, error, router.navigatorFactory());
+        let retry = null;
+        o.onComplete?.({
+          ...submission,
+          result: result?.data,
+          error: result?.error,
+          pending: false,
+          retry() {
+            return retry = submission.retry();
+          }
+        });
+        if (retry) return retry;
+        if (!result) return submission.clear();
+        setResult(result);
+        if (result.error && !form) throw result.error;
+        return result.data;
+      };
+    }
+    router.submissions[1](s => [...s, submission = {
       input: variables,
       url,
-      result: response.data,
-      error: response.error,
+      get result() {
+        return result()?.data;
+      },
+      get error() {
+        return result()?.error;
+      },
+      get pending() {
+        return !result();
+      },
       clear() {
-        router.submissions[1](entries => entries.filter(entry => entry !== submission));
+        router.submissions[1](v => v.filter(i => i !== submission));
       },
       retry() {
-        submission.clear();
-        return current[invokeSymbol].call({
-          r: router,
-          f: form
-        }, variables, current);
+        setResult(undefined);
+        const p = fn(...variables);
+        return p.then(handler(), handler(true));
       }
-    };
-    router.submissions[1](entries => [...entries, submission]);
-    for (const hook of settledHooks.values()) hook(submission);
-    if (response.error && !form) throw response.error;
-    return response.data;
+    }]);
+    return p.then(handler(), handler(true));
   }
   const o = typeof options === "string" ? {
     name: options
   } : options;
   const name = o.name || (!isServer ? String(hashString(fn.toString())) : undefined);
   const url = fn.url || name && `https://action/${name}` || "";
-  const wrapped = toAction(invoke, url);
-  if (name) setFunctionName(wrapped, name);
-  return wrapped;
-}
-const action = actionImpl;
-function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map(), settledHooks = new Map()) {
-  const fn = function (...args) {
-    return invoke.call(this, [...boundArgs, ...args], fn);
-  };
+  mutate.base = url;
+  if (name) setFunctionName(mutate, name);
+  return toAction(mutate, url);
+}
+function toAction(fn, url) {
   fn.toString = () => {
     if (!url) throw new Error("Client Actions need explicit names if server rendered");
     return url;
   };
   fn.with = function (...args) {
+    const newFn = function (...passedArgs) {
+      return fn.call(this, ...args, ...passedArgs);
+    };
+    newFn.base = fn.base;
     const uri = new URL(url, mockBase);
     uri.searchParams.set("args", hashKey(args));
-    const next = toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, [...boundArgs, ...args], base, submitHooks, settledHooks);
-    return next;
-  };
-  fn.onSubmit = function (hook) {
-    const id = Symbol("actionOnSubmitHook");
-    submitHooks.set(id, hook);
-    getOwner() && onCleanup(() => submitHooks.delete(id));
-    return this;
-  };
-  fn.onSettled = function (hook) {
-    const id = Symbol("actionOnSettledHook");
-    settledHooks.set(id, hook);
-    getOwner() && onCleanup(() => settledHooks.delete(id));
-    return this;
+    return toAction(newFn, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search);
   };
   fn.url = url;
-  fn.base = base;
-  fn[submitHooksSymbol] = submitHooks;
-  fn[settledHooksSymbol] = settledHooks;
-  fn[invokeSymbol] = invoke;
-  installRouterIntegrations();
   if (!isServer) {
     actions.set(url, fn);
     // Only remove the registration if it still belongs to this instance —
@@ -2474,118 +1403,616 @@ function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map
   return fn;
 }
 const hashString = s => s.split("").reduce((a, b) => (a << 5) - a + b.charCodeAt(0) | 0, 0);
-async function settleActionResult(result) {
-  const value = result;
-  if (value && typeof value.then === "function") {
-    return result.then(value => value);
-  }
-  if (value && typeof value.next === "function") {
-    const iterator = value;
-    let next = await iterator.next();
-    while (!next.done) {
-      next = await iterator.next();
-    }
-    return next.value;
-  }
-  return result;
-}
-
-// Invocation count of the flight-data consumer. An action compares it across
-// its mutation call to learn whether the transport already applied this
-// response's metadata (and so the default revalidation pass must not run
-// again and wipe the freshly seeded cache).
-let flightApplications = 0;
-
-/**
- * Registers the router as the single-flight consumer of the server function
- * transport. Subscribing is the opt-in: while registered, the transport
- * sends the `X-Single-Flight` request header on mutations and delivers the
- * folded payload here — fresh route data is seeded into the `query` cache
- * and the envelope metadata (redirect `Location`, `X-Revalidate` keys) is
- * applied, all before the action sees its plain return value. Called by the
- * Router component on the client unless `singleFlight={false}`, which now
- * simply means "never subscribe" — no consumer, no request header, no
- * collection work on the server. Returns the unsubscribe function.
- */
-function setupFlightDataConsumer(router) {
-  return subscribeFlightData((data, {
-    response
-  }) => {
-    flightApplications++;
-    return applyResponseMetadata(response, router.navigatorFactory(), data);
-  });
-}
-
-/**
- * Applies a server function response's integration metadata: `X-Revalidate`
- * keys invalidate, `Location` navigates (hard for absolute urls), flight
- * data seeds the query cache, and matching entries revalidate. Shared by
- * the flight-data consumer and the action response path (which still sees
- * metadata-bearing responses when no flight data was collected).
- */
-async function applyResponseMetadata(metadata, navigate, flightData) {
+async function handleResponse(response, error, navigate) {
+  let data;
+  let custom;
   let keys;
-  if (metadata) {
-    if (metadata.headers.has("X-Revalidate")) keys = metadata.headers.get("X-Revalidate").split(",");
-    if (metadata.headers.has("Location")) {
-      const locationUrl = metadata.headers.get("Location") || "/";
+  let flightKeys;
+  if (response instanceof Response) {
+    if (response.headers.has("X-Revalidate")) keys = response.headers.get("X-Revalidate").split(",");
+    if (response.customBody) {
+      data = custom = await response.customBody();
+      if (response.headers.has("X-Single-Flight")) {
+        data = data._$value;
+        delete custom._$value;
+        flightKeys = Object.keys(custom);
+      }
+    }
+    if (response.headers.has("Location")) {
+      const locationUrl = response.headers.get("Location") || "/";
       if (locationUrl.startsWith("http")) {
         window.location.href = locationUrl;
       } else {
         navigate(locationUrl);
       }
     }
-  }
+  } else if (error) return {
+    error: response
+  };else data = response;
   // invalidate
   cacheKeyOp(keys, entry => entry[0] = 0);
   // set cache
-  flightData && Object.keys(flightData).forEach(k => query.set(k, flightData[k]));
+  flightKeys && flightKeys.forEach(k => query.set(k, custom[k]));
   // trigger revalidation
   await revalidate(keys, false);
-}
-async function handleResponse(response, error, navigate, metadataHandled) {
-  let data;
-  let flightData;
-  let metadata;
-  if (isResponseEnvelope(response)) {
-    // client-only respond(): the value rides in memory beside the metadata
-    data = response.value;
-    metadata = response.response;
-  } else if (response instanceof Response) {
-    metadata = response;
-    // responses the transport hands over whole (redirects, revalidation)
-    // carry a codec-encoded body the router decodes itself. With the
-    // flight-data consumer registered single-flight payloads never reach
-    // this path, but a manually opted-in call (no consumer) still can —
-    // unwrap the standardized { value, data } shape for it too.
-    if (response.body) {
-      data = await decodeResponse(response);
-      if (response.headers.has("X-Single-Flight")) {
-        const payload = data;
-        data = payload.value;
-        flightData = payload.data;
-      }
-    }
-  } else if (error) return {
-    error: response
-  };else data = response;
-  // The transport consumer applies metadata before returning a server
-  // function's unwrapped value. Do not treat that value as a second plain
-  // action response and invalidate the freshly seeded query cache again.
-  if (!metadataHandled || metadata || flightData) await applyResponseMetadata(metadata, navigate, flightData);
   return data != null ? {
     data
   } : undefined;
 }
 
-// The delegation fallback's lazy entry (see data/events.ts). Nothing imports
-// this module statically — it exists so the dynamic import has a target that
-// bundlers can keep as a split point: router-only apps never load the action
-// machinery unless a server-action form actually submits.
+function setupNativeEvents({
+  preload = true,
+  explicitLinks = false,
+  actionBase = "/_server",
+  transformUrl
+} = {}) {
+  return router => {
+    const basePath = router.base.path();
+    const navigateFromRoute = router.navigatorFactory(router.base);
+    let preloadTimeout;
+    let lastElement;
+    function isSvg(el) {
+      return el.namespaceURI === "http://www.w3.org/2000/svg";
+    }
+    function handleAnchor(evt) {
+      if (evt.defaultPrevented || evt.button !== 0 || evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey) return;
+      const a = evt.composedPath().find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
+      if (!a || explicitLinks && !a.hasAttribute("link")) return;
+      const svg = isSvg(a);
+      const href = svg ? a.href.baseVal : a.href;
+      const target = svg ? a.target.baseVal : a.target;
+      if (target || !href && !a.hasAttribute("state")) return;
+      const rel = (a.getAttribute("rel") || "").split(/\s+/);
+      if (a.hasAttribute("download") || rel && rel.includes("external")) return;
+      const url = svg ? new URL(href, document.baseURI) : new URL(href);
+      if (url.origin !== window.location.origin || basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
+      return [a, url];
+    }
+    function handleAnchorClick(evt) {
+      const res = handleAnchor(evt);
+      if (!res) return;
+      const [a, url] = res;
+      const to = router.parsePath(url.pathname + url.search + url.hash);
+      const state = a.getAttribute("state");
+      evt.preventDefault();
+      navigateFromRoute(to, {
+        resolve: false,
+        replace: a.hasAttribute("replace"),
+        scroll: !a.hasAttribute("noscroll"),
+        state: state ? JSON.parse(state) : undefined
+      });
+    }
+    function handleAnchorPreload(evt) {
+      const res = handleAnchor(evt);
+      if (!res) return;
+      const [a, url] = res;
+      transformUrl && (url.pathname = transformUrl(url.pathname));
+      router.preloadRoute(url, a.getAttribute("preload") !== "false");
+    }
+    function handleAnchorMove(evt) {
+      clearTimeout(preloadTimeout);
+      const res = handleAnchor(evt);
+      if (!res) return lastElement = null;
+      const [a, url] = res;
+      if (lastElement === a) return;
+      transformUrl && (url.pathname = transformUrl(url.pathname));
+      preloadTimeout = setTimeout(() => {
+        router.preloadRoute(url, a.getAttribute("preload") !== "false");
+        lastElement = a;
+      }, 20);
+    }
+    function handleFormSubmit(evt) {
+      if (evt.defaultPrevented) return;
+      let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.getAttribute("formaction") : evt.target.getAttribute("action");
+      if (!actionRef) return;
+      if (!actionRef.startsWith("https://action/")) {
+        // normalize server actions
+        const url = new URL(actionRef, mockBase);
+        actionRef = router.parsePath(url.pathname + url.search);
+        if (!actionRef.startsWith(actionBase)) return;
+      }
+      if (evt.target.method.toUpperCase() !== "POST") throw new Error("Only POST forms are supported for Actions");
+      const handler = actions.get(actionRef);
+      if (handler) {
+        evt.preventDefault();
+        const data = new FormData(evt.target, evt.submitter);
+        handler.call({
+          r: router,
+          f: evt.target
+        }, evt.target.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
+      }
+    }
+
+    // ensure delegated event run first
+    delegateEvents(["click", "submit"]);
+    document.addEventListener("click", handleAnchorClick);
+    if (preload) {
+      document.addEventListener("mousemove", handleAnchorMove, {
+        passive: true
+      });
+      document.addEventListener("focusin", handleAnchorPreload, {
+        passive: true
+      });
+      document.addEventListener("touchstart", handleAnchorPreload, {
+        passive: true
+      });
+    }
+    document.addEventListener("submit", handleFormSubmit);
+    onCleanup(() => {
+      document.removeEventListener("click", handleAnchorClick);
+      if (preload) {
+        document.removeEventListener("mousemove", handleAnchorMove);
+        document.removeEventListener("focusin", handleAnchorPreload);
+        document.removeEventListener("touchstart", handleAnchorPreload);
+      }
+      document.removeEventListener("submit", handleFormSubmit);
+    });
+  };
+}
+
+const STORAGE_KEY = "solid-router:scroll";
+
+/**
+ * Explicit scroll restoration for back/forward navigation. The browser's
+ * native same-document heuristic is unreliable for suspense-driven rendering:
+ * if the destination route forces a layout while the document is still short,
+ * the saved offset for the previous entry is clamped and lost (#577).
+ *
+ * Positions are captured continuously from the scroll event, keyed by the
+ * `_depth` the router already stamps on every history entry — capturing at
+ * scroll time (rather than at exit) stays correct through `useBeforeLeave`
+ * blocked/reverted traversals. The map persists to sessionStorage on pagehide
+ * so restoration survives reloads, which `scrollRestoration = "manual"`
+ * otherwise disables.
+ *
+ * Restoration is a single scroll once routing settles — the same strategy
+ * SvelteKit, TanStack Router and React Router use. Settling after the
+ * transition commits is what makes the offset reachable; chasing a still-
+ * growing document afterwards (a ResizeObserver re-asserting the offset as
+ * content arrives) was tried and removed: no peer router does it, an
+ * unbounded observer re-clamps the viewport to the bottom when the target is
+ * never reachable (a list that is genuinely shorter now), and scroll-induced
+ * layout changes can feed it back into itself. Content that commits after the
+ * transition settles — an image without reserved space, a boundary below the
+ * fold — keeps whatever offset the document can hold.
+ */
+function createScrollRestoration() {
+  window.history.scrollRestoration = "manual";
+  // the current entry needs its depth stamp for captures to have a key, even
+  // if something replaced history.state after the lifecycle module loaded
+  saveCurrentDepth();
+  let positions = {};
+  try {
+    positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY)) || {};
+  } catch {}
+  const depth = () => window.history.state && window.history.state._depth;
+  let programmatic = false;
+  let pending;
+  const unbind = [bindEvent(window, "scroll", () => {
+    const d = depth();
+    if (d != null) positions[d] = window.scrollY;
+    // the user took over — a pending restore would yank them
+    if (!programmatic) pending = undefined;
+  }), bindEvent(window, "pagehide", () => {
+    try {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(positions));
+    } catch {}
+  })];
+  const restore = () => {
+    if (pending == null) return;
+    const y = positions[pending];
+    pending = undefined;
+    if (y == null) return;
+    // flagged so the resulting scroll event is not mistaken for the user
+    // taking over (which cancels a pending restore)
+    programmatic = true;
+    window.scrollTo(0, y);
+    programmatic = false;
+  };
+  return {
+    /** Before the router reacts to a popstate: mark the traversal target. */
+    onPop() {
+      pending = depth();
+    },
+    /** After a push: forward entries died, and this depth may be reused. */
+    onPush() {
+      const d = depth();
+      if (d != null) for (const k in positions) +k >= d && delete positions[k];
+    },
+    create(router) {
+      createEffect(on(router.isRouting, routing => routing || restore(), {
+        defer: true
+      }));
+      onCleanup(() => unbind.forEach(u => u()));
+      // reload/back_forward document loads land on an existing entry; a fresh
+      // navigation starts a new one and belongs at the top
+      const [nav] = performance.getEntriesByType && performance.getEntriesByType("navigation");
+      if (nav && nav.type !== "navigate") {
+        pending = depth();
+        restore();
+      }
+    }
+  };
+}
+
+function Router(props) {
+  if (isServer) return StaticRouter(props);
+  const restoration = props.scrollRestoration ? createScrollRestoration() : undefined;
+  const getSource = () => {
+    const url = window.location.pathname + window.location.search;
+    const state = window.history.state && window.history.state._depth && Object.keys(window.history.state).length === 1 ? undefined : window.history.state;
+    return {
+      value: url + window.location.hash,
+      state
+    };
+  };
+  const beforeLeave = createBeforeLeave();
+  return createRouter({
+    get: getSource,
+    set({
+      value,
+      replace,
+      scroll,
+      state
+    }) {
+      if (replace) {
+        window.history.replaceState(keepDepth(state), "", value);
+      } else {
+        window.history.pushState(state, "", value);
+      }
+      scrollToHash(decodeURIComponent(window.location.hash.slice(1)), scroll);
+      saveCurrentDepth();
+      restoration && !replace && restoration.onPush();
+    },
+    init: notify => {
+      const handler = notifyIfNotBlocked(notify, delta => {
+        if (delta) {
+          return !beforeLeave.confirm(delta);
+        } else {
+          const s = getSource();
+          return !beforeLeave.confirm(s.value, {
+            state: s.state
+          });
+        }
+      });
+      return bindEvent(window, "popstate", restoration ? () => {
+        restoration.onPop();
+        handler();
+      } : handler);
+    },
+    create: router => {
+      setupNativeEvents({
+        preload: props.preload,
+        explicitLinks: props.explicitLinks,
+        actionBase: props.actionBase,
+        transformUrl: props.transformUrl
+      })(router);
+      restoration && restoration.create(router);
+    },
+    utils: {
+      go: delta => window.history.go(delta),
+      beforeLeave
+    }
+  })(props);
+}
+
+function hashParser(str) {
+  const to = str.replace(/^.*?#/, "");
+  // Hash-only hrefs like `#foo` from plain anchors will come in as `/#foo` whereas a link to
+  // `/foo` will be `/#/foo`. Check if the to starts with a `/` and if not append it as a hash
+  // to the current path so we can handle these in-page anchors correctly.
+  if (!to.startsWith("/")) {
+    const [, path = "/"] = window.location.hash.split("#", 2);
+    return `${path}#${to}`;
+  }
+  return to;
+}
+function HashRouter(props) {
+  const getSource = () => window.location.hash.slice(1);
+  const beforeLeave = createBeforeLeave();
+  return createRouter({
+    get: getSource,
+    set({
+      value,
+      replace,
+      scroll,
+      state
+    }) {
+      if (replace) {
+        window.history.replaceState(keepDepth(state), "", "#" + value);
+      } else {
+        window.history.pushState(state, "", "#" + value);
+      }
+      const hashIndex = value.indexOf("#");
+      const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
+      scrollToHash(hash, scroll);
+      saveCurrentDepth();
+    },
+    init: notify => bindEvent(window, "hashchange", notifyIfNotBlocked(notify, delta => !beforeLeave.confirm(delta && delta < 0 ? delta : getSource()))),
+    create: setupNativeEvents({
+      preload: props.preload,
+      explicitLinks: props.explicitLinks,
+      actionBase: props.actionBase
+    }),
+    utils: {
+      go: delta => window.history.go(delta),
+      renderPath: path => `#${path}`,
+      parsePath: hashParser,
+      beforeLeave
+    }
+  })(props);
+}
 
-var serverForms = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  submitServerForm: submitServerForm
-});
+function createMemoryHistory() {
+  const entries = ["/"];
+  let index = 0;
+  const listeners = [];
+  const go = n => {
+    // https://github.com/remix-run/react-router/blob/682810ca929d0e3c64a76f8d6e465196b7a2ac58/packages/router/history.ts#L245
+    index = Math.max(0, Math.min(index + n, entries.length - 1));
+    const value = entries[index];
+    listeners.forEach(listener => listener(value));
+  };
+  return {
+    get: () => entries[index],
+    set: ({
+      value,
+      scroll,
+      replace
+    }) => {
+      if (replace) {
+        entries[index] = value;
+      } else {
+        entries.splice(index + 1, entries.length - index, value);
+        index++;
+      }
+      listeners.forEach(listener => listener(value));
+      setTimeout(() => {
+        if (scroll) {
+          scrollToHash(value.split("#")[1] || "", true);
+        }
+      }, 0);
+    },
+    back: () => {
+      go(-1);
+    },
+    forward: () => {
+      go(1);
+    },
+    go,
+    listen: listener => {
+      listeners.push(listener);
+      return () => {
+        const index = listeners.indexOf(listener);
+        listeners.splice(index, 1);
+      };
+    }
+  };
+}
+function MemoryRouter(props) {
+  const memoryHistory = props.history || createMemoryHistory();
+  return createRouter({
+    get: memoryHistory.get,
+    set: memoryHistory.set,
+    init: memoryHistory.listen,
+    create: setupNativeEvents({
+      preload: props.preload,
+      explicitLinks: props.explicitLinks,
+      actionBase: props.actionBase
+    }),
+    utils: {
+      go: memoryHistory.go
+    }
+  })(props);
+}
+
+var _tmpl$ = /*#__PURE__*/template(`<a>`);
+function A(props) {
+  props = mergeProps({
+    inactiveClass: "inactive",
+    activeClass: "active"
+  }, props);
+  const [, rest] = splitProps(props, ["href", "state", "class", "activeClass", "inactiveClass", "end"]);
+  const to = useResolvedPath(() => props.href);
+  const href = useHref(to);
+  const location = useLocation();
+  const isActive = createMemo(() => {
+    const to_ = to();
+    if (to_ === undefined) return [false, false];
+    // trailing slashes are ignored so `/route` and `/route/` share active state
+    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase().replace(/\/$/, "");
+    const loc = decodeURI(normalizePath(location.pathname).toLowerCase().replace(/\/$/, ""));
+    return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(rest, {
+      get href() {
+        return href() || props.href;
+      },
+      get state() {
+        return JSON.stringify(props.state);
+      },
+      get classList() {
+        return {
+          ...(props.class && {
+            [props.class]: true
+          }),
+          [props.inactiveClass]: !isActive()[0],
+          [props.activeClass]: isActive()[0],
+          ...rest.classList
+        };
+      },
+      "link": "",
+      get ["aria-current"]() {
+        return isActive()[1] ? "page" : undefined;
+      }
+    }), false, false);
+    return _el$;
+  })();
+}
+function Navigate(props) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const {
+    href,
+    state
+  } = props;
+  const path = typeof href === "function" ? href({
+    navigate,
+    location
+  }) : href;
+  navigate(path, {
+    replace: true,
+    state
+  });
+  return null;
+}
+
+/**
+ * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
+ */
+
+/**
+ * As `createAsync` and `createAsyncStore` are wrappers for `createResource`,
+ * this type allows to support `latest` field for these primitives.
+ * It will be removed in the future.
+ */
+
+function createAsync(fn, options) {
+  let resource;
+  let prev = () => !resource || resource.state === "unresolved" ? undefined : resource.latest;
+  [resource] = createResource(() => subFetch(fn, catchError(() => untrack(prev), () => undefined)), v => v, options);
+  const resultAccessor = () => resource();
+  if (options?.name) setFunctionName(resultAccessor, options.name);
+  Object.defineProperty(resultAccessor, "latest", {
+    get() {
+      return resource.latest;
+    }
+  });
+  return resultAccessor;
+}
+function createAsyncStore(fn, options = {}) {
+  let resource;
+  let prev = () => !resource || resource.state === "unresolved" ? undefined : unwrap(resource.latest);
+  [resource] = createResource(() => subFetch(fn, catchError(() => untrack(prev), () => undefined)), v => v, {
+    ...options,
+    storage: init => createDeepSignal(init, options.reconcile)
+  });
+  const resultAccessor = () => resource();
+  Object.defineProperty(resultAccessor, "latest", {
+    get() {
+      return resource.latest;
+    }
+  });
+  return resultAccessor;
+}
+function createDeepSignal(value, options) {
+  const [store, setStore] = createStore({
+    value: structuredClone(value)
+  });
+  return [() => store.value, v => {
+    typeof v === "function" && (v = v());
+    setStore("value", reconcile(structuredClone(v), options));
+    return store.value;
+  }];
+}
+
+// mock promise while hydrating to prevent fetching
+class MockPromise {
+  static all() {
+    return new MockPromise();
+  }
+  static allSettled() {
+    return new MockPromise();
+  }
+  static any() {
+    return new MockPromise();
+  }
+  static race() {
+    return new MockPromise();
+  }
+  static reject() {
+    return new MockPromise();
+  }
+  static resolve() {
+    return new MockPromise();
+  }
+  catch() {
+    return new MockPromise();
+  }
+  then() {
+    return new MockPromise();
+  }
+  finally() {
+    return new MockPromise();
+  }
+}
+function subFetch(fn, prev) {
+  if (isServer || !sharedConfig.context) return fn(prev);
+  const ogFetch = fetch;
+  const ogPromise = Promise;
+  try {
+    window.fetch = () => new MockPromise();
+    Promise = MockPromise;
+    return fn(prev);
+  } finally {
+    window.fetch = ogFetch;
+    Promise = ogPromise;
+  }
+}
+
+function redirect(url, init = 302) {
+  let responseInit;
+  let revalidate;
+  if (typeof init === "number") {
+    responseInit = {
+      status: init
+    };
+  } else {
+    ({
+      revalidate,
+      ...responseInit
+    } = init);
+    if (typeof responseInit.status === "undefined") {
+      responseInit.status = 302;
+    }
+  }
+  const headers = new Headers(responseInit.headers);
+  headers.set("Location", url);
+  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
+  const response = new Response(null, {
+    ...responseInit,
+    headers: headers
+  });
+  return response;
+}
+function reload(init = {}) {
+  const {
+    revalidate,
+    ...responseInit
+  } = init;
+  const headers = new Headers(responseInit.headers);
+  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
+  return new Response(null, {
+    ...responseInit,
+    headers
+  });
+}
+function json(data, init = {}) {
+  const {
+    revalidate,
+    ...responseInit
+  } = init;
+  const headers = new Headers(responseInit.headers);
+  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
+  headers.set("Content-Type", "application/json");
+  const response = new Response(JSON.stringify(data), {
+    ...responseInit,
+    headers
+  });
+  response.customBody = () => data;
+  return response;
+}
 
-export { RouterContextObj as RouterContext, mergeSearchString as _mergeSearchString, action, browserHistory, createBeforeLeave, createRouter, defineRoutes, hashHistory, int, memoryHistory, query, revalidate, useAction, useBeforeLeave, useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useRouteMatches, useSearchParams, useSubmissions };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, RouterContextObj as RouterContext, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createAsyncStore, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, query, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useSearchParams, useSubmission, useSubmissions };