@tanstack/react-router 0.0.1-beta.83 → 1.0.0

package/build/umd/index.development.js

@@ -1,5 +1,5 @@
 /**
- * react-router
+ * @tanstack/react-router/src/index.tsx
  *
  * Copyright (c) TanStack
  *
@@ -9,13 +9,12 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim/with-selector')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.React, global.withSelector));
-})(this, (function (exports, React, withSelector) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactRouter = {}, global.React, global.require$$1));
+})(this, (function (exports, React, require$$1) { 'use strict';
 
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+  function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
       Object.keys(e).forEach(function (k) {
@@ -28,147 +27,14 @@
         }
       });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
   }
 
-  var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  var prefix = 'Invariant failed';
-  function invariant(condition, message) {
-      if (condition) {
-          return;
-      }
-      var provided = typeof message === 'function' ? message() : message;
-      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-      throw new Error(value);
-  }
-
-  function warning(condition, message) {
-    {
-      if (condition) {
-        return;
-      }
-
-      var text = "Warning: " + message;
-
-      if (typeof console !== 'undefined') {
-        console.warn(text);
-      }
-
-      try {
-        throw Error(text);
-      } catch (x) {}
-    }
-  }
-
-  /**
-   * store
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
-  class Store {
-    listeners = new Set();
-    batching = false;
-    queue = [];
-    constructor(initialState, options) {
-      this.state = initialState;
-      this.options = options;
-    }
-    subscribe = listener => {
-      this.listeners.add(listener);
-      const unsub = this.options?.onSubscribe?.(listener, this);
-      return () => {
-        this.listeners.delete(listener);
-        unsub?.();
-      };
-    };
-    setState = updater => {
-      const previous = this.state;
-      this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
-      if (this.state === previous) return;
-      this.options?.onUpdate?.(this.state, previous);
-      this.queue.push(() => {
-        this.listeners.forEach(listener => listener(this.state, previous));
-      });
-      this.#flush();
-    };
-    #flush = () => {
-      if (this.batching) return;
-      this.queue.forEach(cb => cb());
-      this.queue = [];
-    };
-    batch = cb => {
-      this.batching = true;
-      cb();
-      this.batching = false;
-      this.#flush();
-    };
-  }
-  function shallow(objA, objB) {
-    if (Object.is(objA, objB)) {
-      return true;
-    }
-    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-      return false;
-    }
-
-    // if (objA instanceof Map && objB instanceof Map) {
-    //   if (objA.size !== objB.size) return false
-
-    //   for (const [key, value] of objA) {
-    //     if (!Object.is(value, objB.get(key))) {
-    //       return false
-    //     }
-    //   }
-    //   return true
-    // }
-
-    // if (objA instanceof Set && objB instanceof Set) {
-    //   if (objA.size !== objB.size) return false
-
-    //   for (const value of objA) {
-    //     if (!objB.has(value)) {
-    //       return false
-    //     }
-    //   }
-    //   return true
-    // }
-
-    const keysA = Object.keys(objA);
-    if (keysA.length !== Object.keys(objB).length) {
-      return false;
-    }
-    for (let i = 0; i < keysA.length; i++) {
-      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-        return false;
-      }
-    }
-    return true;
-  }
+  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
   /**
-   * router
+   * @tanstack/history/src/index.ts
    *
    * Copyright (c) TanStack
    *
@@ -177,11 +43,11 @@
    *
    * @license MIT
    */
-
   // While the public API was clearly inspired by the "history" npm package,
   // This implementation attempts to be more lightweight by
   // making assumptions about the way TanStack Router works
 
+  const pushStateEvent = 'pushstate';
   const popStateEvent = 'popstate';
   const beforeUnloadEvent = 'beforeunload';
   const beforeUnloadListener = event => {
@@ -195,124 +61,226 @@
     });
   };
   function createHistory(opts) {
-    let currentLocation = opts.getLocation();
-    let unsub = () => {};
-    let listeners = new Set();
+    let location = opts.getLocation();
+    let subscribers = new Set();
     let blockers = [];
-    let queue = [];
-    const tryFlush = () => {
-      if (blockers.length) {
-        blockers[0]?.(tryFlush, () => {
-          blockers = [];
-          stopBlocking();
-        });
-        return;
-      }
-      while (queue.length) {
-        queue.shift()?.();
-      }
-      onUpdate();
-    };
-    const queueTask = task => {
-      queue.push(task);
-      tryFlush();
-    };
     const onUpdate = () => {
-      currentLocation = opts.getLocation();
-      listeners.forEach(listener => listener());
+      location = opts.getLocation();
+      subscribers.forEach(subscriber => subscriber());
+    };
+    const tryNavigation = async task => {
+      if (typeof document !== 'undefined' && blockers.length) {
+        for (let blocker of blockers) {
+          const allowed = await blocker();
+          if (!allowed) {
+            opts.onBlocked?.(onUpdate);
+            return;
+          }
+        }
+      }
+      task();
     };
     return {
       get location() {
-        return currentLocation;
+        return location;
       },
-      listen: cb => {
-        if (listeners.size === 0) {
-          unsub = opts.listener(onUpdate);
-        }
-        listeners.add(cb);
+      subscribe: cb => {
+        subscribers.add(cb);
         return () => {
-          listeners.delete(cb);
-          if (listeners.size === 0) {
-            unsub();
-          }
+          subscribers.delete(cb);
         };
       },
       push: (path, state) => {
-        queueTask(() => {
-          opts.pushState(path, state);
+        state = assignKey(state);
+        tryNavigation(() => {
+          opts.pushState(path, state, onUpdate);
         });
       },
       replace: (path, state) => {
-        queueTask(() => {
-          opts.replaceState(path, state);
+        state = assignKey(state);
+        tryNavigation(() => {
+          opts.replaceState(path, state, onUpdate);
         });
       },
       go: index => {
-        queueTask(() => {
+        tryNavigation(() => {
           opts.go(index);
         });
       },
       back: () => {
-        queueTask(() => {
+        tryNavigation(() => {
           opts.back();
         });
       },
       forward: () => {
-        queueTask(() => {
+        tryNavigation(() => {
           opts.forward();
         });
       },
       createHref: str => opts.createHref(str),
-      block: cb => {
-        blockers.push(cb);
+      block: blocker => {
+        blockers.push(blocker);
         if (blockers.length === 1) {
           addEventListener(beforeUnloadEvent, beforeUnloadListener, {
             capture: true
           });
         }
         return () => {
-          blockers = blockers.filter(b => b !== cb);
+          blockers = blockers.filter(b => b !== blocker);
           if (!blockers.length) {
             stopBlocking();
           }
         };
-      }
+      },
+      flush: () => opts.flush?.(),
+      destroy: () => opts.destroy?.(),
+      notify: onUpdate
+    };
+  }
+  function assignKey(state) {
+    if (!state) {
+      state = {};
+    }
+    return {
+      ...state,
+      key: createRandomKey()
     };
   }
+
+  /**
+   * Creates a history object that can be used to interact with the browser's
+   * navigation. This is a lightweight API wrapping the browser's native methods.
+   * It is designed to work with TanStack Router, but could be used as a standalone API as well.
+   * IMPORTANT: This API implements history throttling via a microtask to prevent
+   * excessive calls to the history API. In some browsers, calling history.pushState or
+   * history.replaceState in quick succession can cause the browser to ignore subsequent
+   * calls. This API smooths out those differences and ensures that your application
+   * state will *eventually* match the browser state. In most cases, this is not a problem,
+   * but if you need to ensure that the browser state is up to date, you can use the
+   * `history.flush` method to immediately flush all pending state changes to the browser URL.
+   * @param opts
+   * @param opts.getHref A function that returns the current href (path + search + hash)
+   * @param opts.createHref A function that takes a path and returns a href (path + search + hash)
+   * @returns A history instance
+   */
   function createBrowserHistory(opts) {
-    const getHref = opts?.getHref ?? (() => `${window.location.pathname}${window.location.hash}${window.location.search}`);
+    const win = opts?.window ?? (typeof document !== 'undefined' ? window : undefined);
     const createHref = opts?.createHref ?? (path => path);
-    const getLocation = () => parseLocation(getHref(), history.state);
-    return createHistory({
+    const parseLocation = opts?.parseLocation ?? (() => parseHref(`${win.location.pathname}${win.location.search}${win.location.hash}`, win.history.state));
+    let currentLocation = parseLocation();
+    let rollbackLocation;
+    const getLocation = () => currentLocation;
+    let next;
+
+    // Because we are proactively updating the location
+    // in memory before actually updating the browser history,
+    // we need to track when we are doing this so we don't
+    // notify subscribers twice on the last update.
+    let tracking = true;
+
+    // We need to track the current scheduled update to prevent
+    // multiple updates from being scheduled at the same time.
+    let scheduled;
+
+    // This function is a wrapper to prevent any of the callback's
+    // side effects from causing a subscriber notification
+    const untrack = fn => {
+      tracking = false;
+      fn();
+      tracking = true;
+    };
+
+    // This function flushes the next update to the browser history
+    const flush = () => {
+      // Do not notify subscribers about this push/replace call
+      untrack(() => {
+        if (!next) return;
+        win.history[next.isPush ? 'pushState' : 'replaceState'](next.state, '', next.href);
+        // Reset the nextIsPush flag and clear the scheduled update
+        next = undefined;
+        scheduled = undefined;
+        rollbackLocation = undefined;
+      });
+    };
+
+    // This function queues up a call to update the browser history
+    const queueHistoryAction = (type, destHref, state, onUpdate) => {
+      const href = createHref(destHref);
+      if (!scheduled) {
+        rollbackLocation = currentLocation;
+      }
+
+      // Update the location in memory
+      currentLocation = parseHref(destHref, state);
+
+      // Keep track of the next location we need to flush to the URL
+      next = {
+        href,
+        state,
+        isPush: next?.isPush || type === 'push'
+      };
+
+      // Notify subscribers
+      onUpdate();
+      if (!scheduled) {
+        // Schedule an update to the browser history
+        scheduled = Promise.resolve().then(() => flush());
+      }
+    };
+    const onPushPop = () => {
+      currentLocation = parseLocation();
+      history.notify();
+    };
+    var originalPushState = win.history.pushState;
+    var originalReplaceState = win.history.replaceState;
+    const history = createHistory({
       getLocation,
-      listener: onUpdate => {
-        window.addEventListener(popStateEvent, onUpdate);
-        return () => {
-          window.removeEventListener(popStateEvent, onUpdate);
-        };
-      },
-      pushState: (path, state) => {
-        window.history.pushState({
-          ...state,
-          key: createRandomKey()
-        }, '', createHref(path));
-      },
-      replaceState: (path, state) => {
-        window.history.replaceState({
-          ...state,
-          key: createRandomKey()
-        }, '', createHref(path));
+      pushState: (href, state, onUpdate) => queueHistoryAction('push', href, state, onUpdate),
+      replaceState: (href, state, onUpdate) => queueHistoryAction('replace', href, state, onUpdate),
+      back: () => win.history.back(),
+      forward: () => win.history.forward(),
+      go: n => win.history.go(n),
+      createHref: href => createHref(href),
+      flush,
+      destroy: () => {
+        win.history.pushState = originalPushState;
+        win.history.replaceState = originalReplaceState;
+        win.removeEventListener(pushStateEvent, onPushPop);
+        win.removeEventListener(popStateEvent, onPushPop);
       },
-      back: () => window.history.back(),
-      forward: () => window.history.forward(),
-      go: n => window.history.go(n),
-      createHref: path => createHref(path)
+      onBlocked: onUpdate => {
+        // If a navigation is blocked, we need to rollback the location
+        // that we optimistically updated in memory.
+        if (rollbackLocation && currentLocation !== rollbackLocation) {
+          currentLocation = rollbackLocation;
+          // Notify subscribers
+          onUpdate();
+        }
+      }
     });
+    win.addEventListener(pushStateEvent, onPushPop);
+    win.addEventListener(popStateEvent, onPushPop);
+    win.history.pushState = function () {
+      let res = originalPushState.apply(win.history, arguments);
+      if (tracking) history.notify();
+      return res;
+    };
+    win.history.replaceState = function () {
+      let res = originalReplaceState.apply(win.history, arguments);
+      if (tracking) history.notify();
+      return res;
+    };
+    return history;
   }
-  function createHashHistory() {
+  function createHashHistory(opts) {
+    const win = opts?.window ?? (typeof document !== 'undefined' ? window : undefined);
     return createBrowserHistory({
-      getHref: () => window.location.hash.substring(1),
-      createHref: path => `#${path}`
+      window: win,
+      parseLocation: () => {
+        const hashHref = win.location.hash.split('#').slice(1).join('#') ?? '/';
+        return parseHref(hashHref, win.history.state);
+      },
+      createHref: href => `${win.location.pathname}${win.location.search}#${href}`
     });
   }
   function createMemoryHistory(opts = {
@@ -320,26 +288,19 @@
   }) {
     const entries = opts.initialEntries;
     let index = opts.initialIndex ?? entries.length - 1;
-    let currentState = {};
-    const getLocation = () => parseLocation(entries[index], currentState);
+    let currentState = {
+      key: createRandomKey()
+    };
+    const getLocation = () => parseHref(entries[index], currentState);
     return createHistory({
       getLocation,
-      listener: () => {
-        return () => {};
-      },
       pushState: (path, state) => {
-        currentState = {
-          ...state,
-          key: createRandomKey()
-        };
+        currentState = state;
         entries.push(path);
         index++;
       },
       replaceState: (path, state) => {
-        currentState = {
-          ...state,
-          key: createRandomKey()
-        };
+        currentState = state;
         entries[index] = path;
       },
       back: () => {
@@ -348,19 +309,21 @@
       forward: () => {
         index = Math.min(index + 1, entries.length - 1);
       },
-      go: n => window.history.go(n),
+      go: n => {
+        index = Math.min(Math.max(index + n, 0), entries.length - 1);
+      },
       createHref: path => path
     });
   }
-  function parseLocation(href, state) {
+  function parseHref(href, state) {
     let hashIndex = href.indexOf('#');
     let searchIndex = href.indexOf('?');
     return {
       href,
       pathname: href.substring(0, hashIndex > 0 ? searchIndex > 0 ? Math.min(hashIndex, searchIndex) : hashIndex : searchIndex > 0 ? searchIndex : href.length),
-      hash: hashIndex > -1 ? href.substring(hashIndex, searchIndex) : '',
-      search: searchIndex > -1 ? href.substring(searchIndex) : '',
-      state
+      hash: hashIndex > -1 ? href.substring(hashIndex) : '',
+      search: searchIndex > -1 ? href.slice(searchIndex, hashIndex === -1 ? undefined : hashIndex) : '',
+      state: state || {}
     };
   }
 
@@ -369,98 +332,941 @@
     return (Math.random() + 1).toString(36).substring(7);
   }
 
-  function last(arr) {
-    return arr[arr.length - 1];
-  }
-  function isFunction(d) {
-    return typeof d === 'function';
+  var prefix = 'Invariant failed';
+  function invariant(condition, message) {
+      if (condition) {
+          return;
+      }
+      var provided = typeof message === 'function' ? message() : message;
+      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+      throw new Error(value);
   }
-  function functionalUpdate(updater, previous) {
-    if (isFunction(updater)) {
-      return updater(previous);
+
+  function warning(condition, message) {
+    {
+      if (condition) {
+        return;
+      }
+
+      var text = "Warning: " + message;
+
+      if (typeof console !== 'undefined') {
+        console.warn(text);
+      }
+
+      try {
+        throw Error(text);
+      } catch (x) {}
     }
-    return updater;
-  }
-  function pick(parent, keys) {
-    return keys.reduce((obj, key) => {
-      obj[key] = parent[key];
-      return obj;
-    }, {});
   }
 
+  var withSelector = {exports: {}};
+
+  var withSelector_development = {};
+
   /**
-   * This function returns `a` if `b` is deeply equal.
-   * If not, it will replace any deeply equal children of `b` with those of `a`.
-   * This can be used for structural sharing between immutable JSON values for example.
-   * Do not use this with signals
+   * @license React
+   * use-sync-external-store-shim/with-selector.development.js
+   *
+   * Copyright (c) Facebook, Inc. and its affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
    */
-  function replaceEqualDeep(prev, _next) {
-    if (prev === _next) {
-      return prev;
-    }
-    const next = _next;
-    const array = Array.isArray(prev) && Array.isArray(next);
-    if (array || isPlainObject(prev) && isPlainObject(next)) {
-      const prevSize = array ? prev.length : Object.keys(prev).length;
-      const nextItems = array ? next : Object.keys(next);
-      const nextSize = nextItems.length;
-      const copy = array ? [] : {};
-      let equalItems = 0;
-      for (let i = 0; i < nextSize; i++) {
-        const key = array ? i : nextItems[i];
-        copy[key] = replaceEqualDeep(prev[key], next[key]);
-        if (copy[key] === prev[key]) {
-          equalItems++;
-        }
-      }
-      return prevSize === nextSize && equalItems === prevSize ? prev : copy;
-    }
-    return next;
-  }
 
-  // Copied from: https://github.com/jonschlinkert/is-plain-object
-  function isPlainObject(o) {
-    if (!hasObjectPrototype(o)) {
-      return false;
+  var hasRequiredWithSelector_development;
+
+  function requireWithSelector_development () {
+  	if (hasRequiredWithSelector_development) return withSelector_development;
+  	hasRequiredWithSelector_development = 1;
+
+  	{
+  	  (function() {
+
+  	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  	if (
+  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+  	    'function'
+  	) {
+  	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+  	}
+  	          var React$1 = React;
+  	var shim = require$$1;
+
+  	/**
+  	 * inlined Object.is polyfill to avoid requiring consumers ship their own
+  	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+  	 */
+  	function is(x, y) {
+  	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+  	  ;
+  	}
+
+  	var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+  	var useSyncExternalStore = shim.useSyncExternalStore;
+
+  	// for CommonJS interop.
+
+  	var useRef = React$1.useRef,
+  	    useEffect = React$1.useEffect,
+  	    useMemo = React$1.useMemo,
+  	    useDebugValue = React$1.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
+
+  	function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+  	  // Use this to track the rendered snapshot.
+  	  var instRef = useRef(null);
+  	  var inst;
+
+  	  if (instRef.current === null) {
+  	    inst = {
+  	      hasValue: false,
+  	      value: null
+  	    };
+  	    instRef.current = inst;
+  	  } else {
+  	    inst = instRef.current;
+  	  }
+
+  	  var _useMemo = useMemo(function () {
+  	    // Track the memoized state using closure variables that are local to this
+  	    // memoized instance of a getSnapshot function. Intentionally not using a
+  	    // useRef hook, because that state would be shared across all concurrent
+  	    // copies of the hook/component.
+  	    var hasMemo = false;
+  	    var memoizedSnapshot;
+  	    var memoizedSelection;
+
+  	    var memoizedSelector = function (nextSnapshot) {
+  	      if (!hasMemo) {
+  	        // The first time the hook is called, there is no memoized result.
+  	        hasMemo = true;
+  	        memoizedSnapshot = nextSnapshot;
+
+  	        var _nextSelection = selector(nextSnapshot);
+
+  	        if (isEqual !== undefined) {
+  	          // Even if the selector has changed, the currently rendered selection
+  	          // may be equal to the new selection. We should attempt to reuse the
+  	          // current value if possible, to preserve downstream memoizations.
+  	          if (inst.hasValue) {
+  	            var currentSelection = inst.value;
+
+  	            if (isEqual(currentSelection, _nextSelection)) {
+  	              memoizedSelection = currentSelection;
+  	              return currentSelection;
+  	            }
+  	          }
+  	        }
+
+  	        memoizedSelection = _nextSelection;
+  	        return _nextSelection;
+  	      } // We may be able to reuse the previous invocation's result.
+
+
+  	      // We may be able to reuse the previous invocation's result.
+  	      var prevSnapshot = memoizedSnapshot;
+  	      var prevSelection = memoizedSelection;
+
+  	      if (objectIs(prevSnapshot, nextSnapshot)) {
+  	        // The snapshot is the same as last time. Reuse the previous selection.
+  	        return prevSelection;
+  	      } // The snapshot has changed, so we need to compute a new selection.
+
+
+  	      // The snapshot has changed, so we need to compute a new selection.
+  	      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
+  	      // has changed. If it hasn't, return the previous selection. That signals
+  	      // to React that the selections are conceptually equal, and we can bail
+  	      // out of rendering.
+
+  	      // If a custom isEqual function is provided, use that to check if the data
+  	      // has changed. If it hasn't, return the previous selection. That signals
+  	      // to React that the selections are conceptually equal, and we can bail
+  	      // out of rendering.
+  	      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
+  	        return prevSelection;
+  	      }
+
+  	      memoizedSnapshot = nextSnapshot;
+  	      memoizedSelection = nextSelection;
+  	      return nextSelection;
+  	    }; // Assigning this to a constant so that Flow knows it can't change.
+
+
+  	    // Assigning this to a constant so that Flow knows it can't change.
+  	    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+
+  	    var getSnapshotWithSelector = function () {
+  	      return memoizedSelector(getSnapshot());
+  	    };
+
+  	    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
+  	      return memoizedSelector(maybeGetServerSnapshot());
+  	    };
+  	    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
+  	  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
+  	      getSelection = _useMemo[0],
+  	      getServerSelection = _useMemo[1];
+
+  	  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
+  	  useEffect(function () {
+  	    inst.hasValue = true;
+  	    inst.value = value;
+  	  }, [value]);
+  	  useDebugValue(value);
+  	  return value;
+  	}
+
+  	withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
+  	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  	if (
+  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+  	    'function'
+  	) {
+  	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+  	}
+  	        
+  	  })();
+  	}
+  	return withSelector_development;
+  }
+
+  {
+    withSelector.exports = requireWithSelector_development();
+  }
+
+  var withSelectorExports = withSelector.exports;
+
+  // src/index.ts
+  var Store = class {
+    constructor(initialState, options) {
+      this.listeners = /* @__PURE__ */ new Set();
+      this._batching = false;
+      this._flushing = 0;
+      this._nextPriority = null;
+      this.subscribe = (listener) => {
+        this.listeners.add(listener);
+        const unsub = this.options?.onSubscribe?.(listener, this);
+        return () => {
+          this.listeners.delete(listener);
+          unsub?.();
+        };
+      };
+      this.setState = (updater, opts) => {
+        const previous = this.state;
+        this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
+        const priority = opts?.priority ?? this.options?.defaultPriority ?? "high";
+        if (this._nextPriority === null) {
+          this._nextPriority = priority;
+        } else if (this._nextPriority === "high") {
+          this._nextPriority = priority;
+        } else {
+          this._nextPriority = this.options?.defaultPriority ?? "high";
+        }
+        this.options?.onUpdate?.({
+          priority: this._nextPriority
+        });
+        this._flush();
+      };
+      this._flush = () => {
+        if (this._batching)
+          return;
+        const flushId = ++this._flushing;
+        this.listeners.forEach((listener) => {
+          if (this._flushing !== flushId)
+            return;
+          listener({
+            priority: this._nextPriority ?? "high"
+          });
+        });
+      };
+      this.batch = (cb) => {
+        if (this._batching)
+          return cb();
+        this._batching = true;
+        cb();
+        this._batching = false;
+        this._flush();
+      };
+      this.state = initialState;
+      this.options = options;
     }
+  };
 
-    // If has modified constructor
-    const ctor = o.constructor;
-    if (typeof ctor === 'undefined') {
+  // src/index.ts
+  function useStore(store, selector = (d) => d) {
+    const slice = withSelectorExports.useSyncExternalStoreWithSelector(
+      store.subscribe,
+      () => store.state,
+      () => store.state,
+      selector,
+      shallow$1
+    );
+    return slice;
+  }
+  function shallow$1(objA, objB) {
+    if (Object.is(objA, objB)) {
       return true;
     }
-
-    // If has modified prototype
-    const prot = ctor.prototype;
-    if (!hasObjectPrototype(prot)) {
+    if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
       return false;
     }
-
-    // If constructor does not have an Object-specific method
-    if (!prot.hasOwnProperty('isPrototypeOf')) {
+    const keysA = Object.keys(objA);
+    if (keysA.length !== Object.keys(objB).length) {
       return false;
     }
-
-    // Most likely a plain Object
-    return true;
-  }
+    for (let i = 0; i < keysA.length; i++) {
+      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function CatchBoundary(props) {
+    const errorComponent = props.errorComponent ?? ErrorComponent;
+    return /*#__PURE__*/React__namespace.createElement(CatchBoundaryImpl, {
+      getResetKey: props.getResetKey,
+      onCatch: props.onCatch,
+      children: ({
+        error
+      }) => {
+        if (error) {
+          return /*#__PURE__*/React__namespace.createElement(errorComponent, {
+            error
+          });
+        }
+        return props.children;
+      }
+    });
+  }
+  class CatchBoundaryImpl extends React__namespace.Component {
+    state = {
+      error: null
+    };
+    static getDerivedStateFromProps(props) {
+      return {
+        resetKey: props.getResetKey()
+      };
+    }
+    static getDerivedStateFromError(error) {
+      return {
+        error
+      };
+    }
+    componentDidUpdate(prevProps, prevState) {
+      if (prevState.error && prevState.resetKey !== this.state.resetKey) {
+        this.setState({
+          error: null
+        });
+      }
+    }
+    componentDidCatch(error) {
+      console.error(error);
+      this.props.onCatch?.(error);
+    }
+    render() {
+      return this.props.children(this.state);
+    }
+  }
+  function ErrorComponent({
+    error
+  }) {
+    const [show, setShow] = React__namespace.useState("development" !== 'production');
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        padding: '.5rem',
+        maxWidth: '100%'
+      }
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '.5rem'
+      }
+    }, /*#__PURE__*/React__namespace.createElement("strong", {
+      style: {
+        fontSize: '1rem'
+      }
+    }, "Something went wrong!"), /*#__PURE__*/React__namespace.createElement("button", {
+      style: {
+        appearance: 'none',
+        fontSize: '.6em',
+        border: '1px solid currentColor',
+        padding: '.1rem .2rem',
+        fontWeight: 'bold',
+        borderRadius: '.25rem'
+      },
+      onClick: () => setShow(d => !d)
+    }, show ? 'Hide Error' : 'Show Error')), /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        height: '.25rem'
+      }
+    }), show ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("pre", {
+      style: {
+        fontSize: '.7em',
+        border: '1px solid red',
+        borderRadius: '.25rem',
+        padding: '.3rem',
+        color: 'red',
+        overflow: 'auto'
+      }
+    }, error.message ? /*#__PURE__*/React__namespace.createElement("code", null, error.message) : null)) : null);
+  }
+
+  // export type Expand<T> = T
+
+  // type Compute<T> = { [K in keyof T]: T[K] } | never
+
+  // type AllKeys<T> = T extends any ? keyof T : never
+
+  // export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
+  //   {
+  //     [K in Keys]: T[Keys]
+  //   } & {
+  //     [K in AllKeys<T>]?: T extends any
+  //       ? K extends keyof T
+  //         ? T[K]
+  //         : never
+  //       : never
+  //   }
+  // >
+
+  // // Sample types to merge
+  // type TypeA = {
+  //   shared: string
+  //   onlyInA: string
+  //   nested: {
+  //     shared: string
+  //     aProp: string
+  //   }
+  //   array: string[]
+  // }
+
+  // type TypeB = {
+  //   shared: number
+  //   onlyInB: number
+  //   nested: {
+  //     shared: number
+  //     bProp: number
+  //   }
+  //   array: number[]
+  // }
+
+  // type TypeC = {
+  //   shared: boolean
+  //   onlyInC: boolean
+  //   nested: {
+  //     shared: boolean
+  //     cProp: boolean
+  //   }
+  //   array: boolean[]
+  // }
+
+  // type Test = Expand<Assign<TypeA, TypeB>>
+
+  // // Using DeepMerge to merge TypeA and TypeB
+  // type MergedType = Expand<AssignAll<[TypeA, TypeB, TypeC]>>
+
+  // from https://github.com/type-challenges/type-challenges/issues/737
+
+  //
+
+  const isServer = typeof document === 'undefined';
+  function last(arr) {
+    return arr[arr.length - 1];
+  }
+  function isFunction(d) {
+    return typeof d === 'function';
+  }
+  function functionalUpdate(updater, previous) {
+    if (isFunction(updater)) {
+      return updater(previous);
+    }
+    return updater;
+  }
+  function pick(parent, keys) {
+    return keys.reduce((obj, key) => {
+      obj[key] = parent[key];
+      return obj;
+    }, {});
+  }
+
+  /**
+   * This function returns `a` if `b` is deeply equal.
+   * If not, it will replace any deeply equal children of `b` with those of `a`.
+   * This can be used for structural sharing between immutable JSON values for example.
+   * Do not use this with signals
+   */
+  function replaceEqualDeep(prev, _next) {
+    if (prev === _next) {
+      return prev;
+    }
+    const next = _next;
+    const array = Array.isArray(prev) && Array.isArray(next);
+    if (array || isPlainObject(prev) && isPlainObject(next)) {
+      const prevSize = array ? prev.length : Object.keys(prev).length;
+      const nextItems = array ? next : Object.keys(next);
+      const nextSize = nextItems.length;
+      const copy = array ? [] : {};
+      let equalItems = 0;
+      for (let i = 0; i < nextSize; i++) {
+        const key = array ? i : nextItems[i];
+        copy[key] = replaceEqualDeep(prev[key], next[key]);
+        if (copy[key] === prev[key]) {
+          equalItems++;
+        }
+      }
+      return prevSize === nextSize && equalItems === prevSize ? prev : copy;
+    }
+    return next;
+  }
+
+  // Copied from: https://github.com/jonschlinkert/is-plain-object
+  function isPlainObject(o) {
+    if (!hasObjectPrototype(o)) {
+      return false;
+    }
+
+    // If has modified constructor
+    const ctor = o.constructor;
+    if (typeof ctor === 'undefined') {
+      return true;
+    }
+
+    // If has modified prototype
+    const prot = ctor.prototype;
+    if (!hasObjectPrototype(prot)) {
+      return false;
+    }
+
+    // If constructor does not have an Object-specific method
+    if (!prot.hasOwnProperty('isPrototypeOf')) {
+      return false;
+    }
+
+    // Most likely a plain Object
+    return true;
+  }
   function hasObjectPrototype(o) {
     return Object.prototype.toString.call(o) === '[object Object]';
   }
-  function partialDeepEqual(a, b) {
+  function deepEqual(a, b, partial = false) {
     if (a === b) {
       return true;
     }
     if (typeof a !== typeof b) {
       return false;
     }
-    if (isPlainObject(a) && isPlainObject(b)) {
-      return !Object.keys(b).some(key => !partialDeepEqual(a[key], b[key]));
+    if (isPlainObject(a) && isPlainObject(b)) {
+      const aKeys = Object.keys(a);
+      const bKeys = Object.keys(b);
+      if (!partial && aKeys.length !== bKeys.length) {
+        return false;
+      }
+      return !bKeys.some(key => !(key in a) || !deepEqual(a[key], b[key], partial));
+    }
+    if (Array.isArray(a) && Array.isArray(b)) {
+      return !a.some((item, index) => !deepEqual(item, b[index], partial));
+    }
+    return false;
+  }
+  function useStableCallback(fn) {
+    const fnRef = React__namespace.useRef(fn);
+    fnRef.current = fn;
+    const ref = React__namespace.useRef((...args) => fnRef.current(...args));
+    return ref.current;
+  }
+  function shallow(objA, objB) {
+    if (Object.is(objA, objB)) {
+      return true;
+    }
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+      return false;
+    }
+    const keysA = Object.keys(objA);
+    if (keysA.length !== Object.keys(objB).length) {
+      return false;
+    }
+    for (let i = 0; i < keysA.length; i++) {
+      if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function useRouteContext(opts) {
+    return useMatch({
+      ...opts,
+      select: match => opts?.select ? opts.select(match.context) : match.context
+    });
+  }
+  const useLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  function escapeJSON(jsonString) {
+    return jsonString.replace(/\\/g, '\\\\') // Escape backslashes
+    .replace(/'/g, "\\'") // Escape single quotes
+    .replace(/"/g, '\\"'); // Escape double quotes
+  }
+
+  const matchContext = /*#__PURE__*/React__namespace.createContext(undefined);
+  function Matches() {
+    const router = useRouter();
+    const matchId = useRouterState({
+      select: s => {
+        return getRenderedMatches(s)[0]?.id;
+      }
+    });
+    return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
+      value: matchId
+    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
+      getResetKey: () => router.state.resolvedLocation.state?.key,
+      errorComponent: ErrorComponent,
+      onCatch: () => {
+        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+      }
+    }, matchId ? /*#__PURE__*/React__namespace.createElement(Match, {
+      matchId: matchId
+    }) : null));
+  }
+  function SafeFragment(props) {
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
+  }
+  function Match({
+    matchId
+  }) {
+    const router = useRouter();
+    const routeId = useRouterState({
+      select: s => getRenderedMatches(s).find(d => d.id === matchId)?.routeId
+    });
+    invariant(routeId, `Could not find routeId for matchId "${matchId}". Please file an issue!`);
+    const route = router.routesById[routeId];
+    const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
+    const pendingElement = PendingComponent ? /*#__PURE__*/React__namespace.createElement(PendingComponent, null) : null;
+    const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
+    const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? PendingComponent ?? route.options.component?.preload ?? route.options.pendingComponent?.preload ?? route.options.errorComponent?.preload ? React__namespace.Suspense : SafeFragment;
+    const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
+    return /*#__PURE__*/React__namespace.createElement(matchContext.Provider, {
+      value: matchId
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
+      fallback: pendingElement
+    }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
+      getResetKey: () => router.state.resolvedLocation.state?.key,
+      errorComponent: routeErrorComponent,
+      onCatch: () => {
+        warning(false, `Error in route match: ${matchId}`);
+      }
+    }, /*#__PURE__*/React__namespace.createElement(MatchInner, {
+      matchId: matchId,
+      pendingElement: pendingElement
+    }))));
+  }
+  function MatchInner({
+    matchId,
+    pendingElement
+  }) {
+    const router = useRouter();
+    const routeId = useRouterState({
+      select: s => getRenderedMatches(s).find(d => d.id === matchId)?.routeId
+    });
+    const route = router.routesById[routeId];
+    const match = useRouterState({
+      select: s => pick(getRenderedMatches(s).find(d => d.id === matchId), ['status', 'error', 'showPending', 'loadPromise'])
+    });
+    if (match.status === 'error') {
+      throw match.error;
+    }
+    if (match.status === 'pending') {
+      if (match.showPending) {
+        return pendingElement;
+      }
+      throw match.loadPromise;
+    }
+    if (match.status === 'success') {
+      let Comp = route.options.component ?? router.options.defaultComponent;
+      if (Comp) {
+        return /*#__PURE__*/React__namespace.createElement(Comp, null);
+      }
+      return /*#__PURE__*/React__namespace.createElement(Outlet, null);
+    }
+    invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+  }
+  const Outlet = /*#__PURE__*/React__namespace.memo(function Outlet() {
+    const matchId = React__namespace.useContext(matchContext);
+    const childMatchId = useRouterState({
+      select: s => {
+        const matches = getRenderedMatches(s);
+        const index = matches.findIndex(d => d.id === matchId);
+        return matches[index + 1]?.id;
+      }
+    });
+    if (!childMatchId) {
+      return null;
+    }
+    return /*#__PURE__*/React__namespace.createElement(Match, {
+      matchId: childMatchId
+    });
+  });
+  function useMatchRoute() {
+    useRouterState({
+      select: s => [s.location, s.resolvedLocation]
+    });
+    const {
+      matchRoute
+    } = useRouter();
+    return React__namespace.useCallback(opts => {
+      const {
+        pending,
+        caseSensitive,
+        ...rest
+      } = opts;
+      return matchRoute(rest, {
+        pending,
+        caseSensitive
+      });
+    }, []);
+  }
+  function MatchRoute(props) {
+    const matchRoute = useMatchRoute();
+    const params = matchRoute(props);
+    if (typeof props.children === 'function') {
+      return props.children(params);
+    }
+    return !!params ? props.children : null;
+  }
+  function getRenderedMatches(state) {
+    return state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+  }
+  function useMatch(opts) {
+    const router = useRouter();
+    const nearestMatchId = React__namespace.useContext(matchContext);
+    const nearestMatchRouteId = getRenderedMatches(router.state).find(d => d.id === nearestMatchId)?.routeId;
+    const matchRouteId = (() => {
+      const matches = getRenderedMatches(router.state);
+      const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
+      return match.routeId;
+    })();
+    if (opts?.strict ?? true) {
+      invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
+    }
+    const matchSelection = useRouterState({
+      select: state => {
+        const match = getRenderedMatches(state).find(d => d.id === nearestMatchId);
+        invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+        return opts?.select ? opts.select(match) : match;
+      }
+    });
+    return matchSelection;
+  }
+  function useMatches(opts) {
+    return useRouterState({
+      select: state => {
+        let matches = getRenderedMatches(state);
+        return opts?.select ? opts.select(matches) : matches;
+      }
+    });
+  }
+  function useParentMatches(opts) {
+    const contextMatchId = React__namespace.useContext(matchContext);
+    return useMatches({
+      select: matches => {
+        matches = matches.slice(matches.findIndex(d => d.id === contextMatchId));
+        return opts?.select ? opts.select(matches) : matches;
+      }
+    });
+  }
+  function useLoaderDeps(opts) {
+    return useMatch({
+      ...opts,
+      select: s => {
+        return typeof opts.select === 'function' ? opts.select(s?.loaderDeps) : s?.loaderDeps;
+      }
+    });
+  }
+  function useLoaderData(opts) {
+    return useMatch({
+      ...opts,
+      select: s => {
+        return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
+      }
+    });
+  }
+
+  exports.routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  if (typeof document !== 'undefined') {
+    if (window.__TSR_ROUTER_CONTEXT__) {
+      exports.routerContext = window.__TSR_ROUTER_CONTEXT__;
+    } else {
+      window.__TSR_ROUTER_CONTEXT__ = exports.routerContext;
+    }
+  }
+  function RouterProvider({
+    router,
+    ...rest
+  }) {
+    // Allow the router to update options on the router instance
+    router.update({
+      ...router.options,
+      ...rest,
+      context: {
+        ...router.options.context,
+        ...rest?.context
+      }
+    });
+    const matches = router.options.InnerWrap ? /*#__PURE__*/React__namespace.createElement(router.options.InnerWrap, null, /*#__PURE__*/React__namespace.createElement(Matches, null)) : /*#__PURE__*/React__namespace.createElement(Matches, null);
+    const provider = /*#__PURE__*/React__namespace.createElement(exports.routerContext.Provider, {
+      value: router
+    }, matches, /*#__PURE__*/React__namespace.createElement(Transitioner, null));
+    if (router.options.Wrap) {
+      return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, provider);
+    }
+    return provider;
+  }
+  function Transitioner() {
+    const router = useRouter();
+    const routerState = useRouterState({
+      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+    });
+    const [isTransitioning, startReactTransition] = React__namespace.useTransition();
+    router.startReactTransition = startReactTransition;
+    React__namespace.useEffect(() => {
+      if (isTransitioning) {
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning
+        }));
+      }
+    }, [isTransitioning]);
+    const tryLoad = () => {
+      const apply = cb => {
+        if (!routerState.isTransitioning) {
+          startReactTransition(() => cb());
+        } else {
+          cb();
+        }
+      };
+      apply(() => {
+        try {
+          router.load();
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    };
+    useLayoutEffect$1(() => {
+      const unsub = router.history.subscribe(() => {
+        router.latestLocation = router.parseLocation(router.latestLocation);
+        if (routerState.location !== router.latestLocation) {
+          tryLoad();
+        }
+      });
+      const nextLocation = router.buildLocation({
+        search: true,
+        params: true,
+        hash: true,
+        state: true
+      });
+      if (routerState.location.href !== nextLocation.href) {
+        router.commitLocation({
+          ...nextLocation,
+          replace: true
+        });
+      }
+      return () => {
+        unsub();
+      };
+    }, [router.history]);
+    useLayoutEffect$1(() => {
+      if (routerState.isTransitioning && !isTransitioning && !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
+        router.emit({
+          type: 'onResolved',
+          fromLocation: routerState.resolvedLocation,
+          toLocation: routerState.location,
+          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
+        });
+        if (document.querySelector) {
+          if (routerState.location.hash !== '') {
+            const el = document.getElementById(routerState.location.hash);
+            if (el) {
+              el.scrollIntoView();
+            }
+          }
+        }
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning: false,
+          resolvedLocation: s.location
+        }));
+      }
+    }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
+    useLayoutEffect$1(() => {
+      if (!window.__TSR_DEHYDRATED__) {
+        tryLoad();
+      }
+    }, []);
+    return null;
+  }
+  function getRouteMatch(state, id) {
+    return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+  }
+  function useRouterState(opts) {
+    const router = useRouter();
+    return useStore(router.__store, opts?.select);
+  }
+  function useRouter() {
+    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || exports.routerContext : exports.routerContext;
+    const value = React__namespace.useContext(resolvedContext);
+    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+    return value;
+  }
+
+  function defer(_promise) {
+    const promise = _promise;
+    if (!promise.__deferredState) {
+      promise.__deferredState = {
+        uid: Math.random().toString(36).slice(2),
+        status: 'pending'
+      };
+      const state = promise.__deferredState;
+      promise.then(data => {
+        state.status = 'success';
+        state.data = data;
+      }).catch(error => {
+        state.status = 'error';
+        state.error = error;
+      });
+    }
+    return promise;
+  }
+  function isDehydratedDeferred(obj) {
+    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  }
+
+  function useAwaited({
+    promise
+  }) {
+    const router = useRouter();
+    let state = promise.__deferredState;
+    const key = `__TSR__DEFERRED__${state.uid}`;
+    if (isDehydratedDeferred(promise)) {
+      state = router.hydrateData(key);
+      promise = Promise.resolve(state.data);
+      promise.__deferredState = state;
+    }
+    if (state.status === 'pending') {
+      throw new Promise(r => setTimeout(r, 1)).then(() => promise);
     }
-    if (Array.isArray(a) && Array.isArray(b)) {
-      return a.length === b.length && a.every((item, index) => partialDeepEqual(item, b[index]));
+    if (state.status === 'error') {
+      throw state.error;
     }
-    return false;
+    router.dehydrateData(key, state);
+    return [state.data];
+  }
+  function Await(props) {
+    const awaited = useAwaited(props);
+    return props.children(...awaited);
   }
 
   function joinPaths(paths) {
@@ -554,45 +1360,59 @@
     }
     return segments;
   }
-  function interpolatePath(path, params, leaveWildcard) {
+  function interpolatePath(path, params, leaveWildcards = false) {
     const interpolatedPathSegments = parsePathname(path);
     return joinPaths(interpolatedPathSegments.map(segment => {
-      if (['$', '*'].includes(segment.value) && !leaveWildcard) {
-        return '';
+      if (segment.type === 'wildcard') {
+        const value = params[segment.value];
+        if (leaveWildcards) return `${segment.value}${value ?? ''}`;
+        return value;
       }
       if (segment.type === 'param') {
-        return params[segment.value.substring(1)] ?? '';
+        return params[segment.value.substring(1)] ?? 'undefined';
       }
       return segment.value;
     }));
   }
   function matchPathname(basepath, currentPathname, matchLocation) {
     const pathParams = matchByPath(basepath, currentPathname, matchLocation);
-    // const searchMatched = matchBySearch(currentLocation.search, matchLocation)
+    // const searchMatched = matchBySearch(location.search, matchLocation)
 
     if (matchLocation.to && !pathParams) {
       return;
     }
     return pathParams ?? {};
   }
+  function removeBasepath(basepath, pathname) {
+    return basepath != '/' ? pathname.substring(basepath.length) : pathname;
+  }
   function matchByPath(basepath, from, matchLocation) {
-    if (!from.startsWith(basepath)) {
-      return undefined;
-    }
-    from = basepath != '/' ? from.substring(basepath.length) : from;
-    const baseSegments = parsePathname(from);
+    // Remove the base path from the pathname
+    from = removeBasepath(basepath, from);
+    // Default to to $ (wildcard)
     const to = `${matchLocation.to ?? '$'}`;
+    // Parse the from and to
+    const baseSegments = parsePathname(from);
     const routeSegments = parsePathname(to);
-    if (last(baseSegments)?.value === '/') {
-      baseSegments.pop();
+    if (!from.startsWith('/')) {
+      baseSegments.unshift({
+        type: 'pathname',
+        value: '/'
+      });
+    }
+    if (!to.startsWith('/')) {
+      routeSegments.unshift({
+        type: 'pathname',
+        value: '/'
+      });
     }
     const params = {};
     let isMatch = (() => {
       for (let i = 0; i < Math.max(baseSegments.length, routeSegments.length); i++) {
         const baseSegment = baseSegments[i];
         const routeSegment = routeSegments[i];
-        const isLastRouteSegment = i === routeSegments.length - 1;
-        const isLastBaseSegment = i === baseSegments.length - 1;
+        const isLastBaseSegment = i >= baseSegments.length - 1;
+        const isLastRouteSegment = i >= routeSegments.length - 1;
         if (routeSegment) {
           if (routeSegment.type === 'wildcard') {
             if (baseSegment?.value) {
@@ -627,8 +1447,9 @@
             }
           }
         }
-        if (isLastRouteSegment && !isLastBaseSegment) {
-          return !!matchLocation.fuzzy;
+        if (!isLastBaseSegment && isLastRouteSegment) {
+          params['**'] = joinPaths(baseSegments.slice(i + 1).map(d => d.value));
+          return !!matchLocation.fuzzy && routeSegment?.value !== '/';
         }
       }
       return true;
@@ -636,6 +1457,417 @@
     return isMatch ? params : undefined;
   }
 
+  function useParams(opts) {
+    return useRouterState({
+      select: state => {
+        const params = last(state.matches)?.params;
+        return opts?.select ? opts.select(params) : params;
+      }
+    });
+  }
+
+  function useSearch(opts) {
+    return useMatch({
+      ...opts,
+      select: match => {
+        return opts?.select ? opts.select(match.search) : match.search;
+      }
+    });
+  }
+
+  const rootRouteId = '__root__';
+
+  // The parse type here allows a zod schema to be passed directly to the validator
+
+  class RouteApi {
+    constructor({
+      id
+    }) {
+      this.id = id;
+    }
+    useMatch = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useRouteContext = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id,
+        select: d => opts?.select ? opts.select(d.context) : d.context
+      });
+    };
+    useSearch = opts => {
+      return useSearch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useParams = opts => {
+      return useParams({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderDeps = opts => {
+      return useLoaderDeps({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderData = opts => {
+      return useLoaderData({
+        ...opts,
+        from: this.id
+      });
+    };
+  }
+  class Route {
+    // Set up in this.init()
+
+    // customId!: TCustomId
+
+    // Optional
+
+    constructor(options) {
+      this.options = options || {};
+      this.isRoot = !options?.getParentRoute;
+      invariant(!(options?.id && options?.path), `Route cannot have both an 'id' and a 'path' option.`);
+      this.$$typeof = Symbol.for('react.memo');
+    }
+    init = opts => {
+      this.originalIndex = opts.originalIndex;
+      const options = this.options;
+      const isRoot = !options?.path && !options?.id;
+      this.parentRoute = this.options?.getParentRoute?.();
+      if (isRoot) {
+        this.path = rootRouteId;
+      } else {
+        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
+      }
+      let path = isRoot ? rootRouteId : options.path;
+
+      // If the path is anything other than an index path, trim it up
+      if (path && path !== '/') {
+        path = trimPath(path);
+      }
+      const customId = options?.id || path;
+
+      // Strip the parentId prefix from the first level of children
+      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
+      if (path === rootRouteId) {
+        path = '/';
+      }
+      if (id !== rootRouteId) {
+        id = joinPaths(['/', id]);
+      }
+      const fullPath = id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path]);
+      this.path = path;
+      this.id = id;
+      // this.customId = customId as TCustomId
+      this.fullPath = fullPath;
+      this.to = fullPath;
+    };
+    addChildren = children => {
+      this.children = children;
+      return this;
+    };
+    update = options => {
+      Object.assign(this.options, options);
+      return this;
+    };
+    useMatch = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useRouteContext = opts => {
+      return useMatch({
+        ...opts,
+        from: this.id,
+        select: d => opts?.select ? opts.select(d.context) : d.context
+      });
+    };
+    useSearch = opts => {
+      return useSearch({
+        ...opts,
+        from: this.id
+      });
+    };
+    useParams = opts => {
+      return useParams({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderDeps = opts => {
+      return useLoaderDeps({
+        ...opts,
+        from: this.id
+      });
+    };
+    useLoaderData = opts => {
+      return useLoaderData({
+        ...opts,
+        from: this.id
+      });
+    };
+  }
+  function rootRouteWithContext() {
+    return options => {
+      return new RootRoute(options);
+    };
+  }
+  class RootRoute extends Route {
+    constructor(options) {
+      super(options);
+    }
+  }
+  function createRouteMask(opts) {
+    return opts;
+  }
+
+  //
+
+  class NotFoundRoute extends Route {
+    constructor(options) {
+      super({
+        ...options,
+        id: '404'
+      });
+    }
+  }
+
+  class FileRoute {
+    constructor(path) {
+      this.path = path;
+    }
+    createRoute = options => {
+      const route = new Route(options);
+      route.isRoot = false;
+      return route;
+    };
+  }
+
+  function lazyRouteComponent(importer, exportName) {
+    let loadPromise;
+    const load = () => {
+      if (!loadPromise) {
+        loadPromise = importer();
+      }
+      return loadPromise;
+    };
+    const lazyComp = /*#__PURE__*/React__namespace.lazy(async () => {
+      const moduleExports = await load();
+      const comp = moduleExports[exportName ?? 'default'];
+      return {
+        default: comp
+      };
+    });
+    lazyComp.preload = load;
+    return lazyComp;
+  }
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  const preloadWarning = 'Error preloading route! ☝️';
+  function useLinkProps(options) {
+    const router = useRouter();
+    const matchPathname = useMatch({
+      strict: false,
+      select: s => s.pathname
+    });
+    const {
+      // custom props
+      children,
+      target,
+      activeProps = () => ({
+        className: 'active'
+      }),
+      inactiveProps = () => ({}),
+      activeOptions,
+      disabled,
+      hash,
+      search,
+      params,
+      to,
+      state,
+      mask,
+      preload: userPreload,
+      preloadDelay: userPreloadDelay,
+      replace,
+      startTransition,
+      resetScroll,
+      // element props
+      style,
+      className,
+      onClick,
+      onFocus,
+      onMouseEnter,
+      onMouseLeave,
+      onTouchStart,
+      ...rest
+    } = options;
+
+    // If this link simply reloads the current route,
+    // make sure it has a new key so it will trigger a data refresh
+
+    // If this `to` is a valid external URL, return
+    // null for LinkUtils
+
+    const dest = {
+      from: options.to ? matchPathname : undefined,
+      ...options
+    };
+    let type = 'internal';
+    try {
+      new URL(`${to}`);
+      type = 'external';
+    } catch {}
+    if (type === 'external') {
+      return {
+        href: to
+      };
+    }
+    const next = router.buildLocation(dest);
+    const preload = userPreload ?? router.options.defaultPreload;
+    const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
+    const isActive = useRouterState({
+      select: s => {
+        // Compare path/hash for matches
+        const currentPathSplit = s.location.pathname.split('/');
+        const nextPathSplit = next.pathname.split('/');
+        const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
+        // Combine the matches based on user router.options
+        const pathTest = activeOptions?.exact ? s.location.pathname === next.pathname : pathIsFuzzyEqual;
+        const hashTest = activeOptions?.includeHash ? s.location.hash === next.hash : true;
+        const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(s.location.search, next.search, !activeOptions?.exact) : true;
+
+        // The final "active" test
+        return pathTest && hashTest && searchTest;
+      }
+    });
+
+    // The click handler
+    const handleClick = e => {
+      if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
+        e.preventDefault();
+
+        // All is well? Navigate!
+        router.commitLocation({
+          ...next,
+          replace,
+          resetScroll,
+          startTransition
+        });
+      }
+    };
+
+    // The click handler
+    const handleFocus = e => {
+      if (preload) {
+        router.preloadRoute(dest).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
+        });
+      }
+    };
+    const handleTouchStart = e => {
+      if (preload) {
+        router.preloadRoute(dest).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
+        });
+      }
+    };
+    const handleEnter = e => {
+      const target = e.target || {};
+      if (preload) {
+        if (target.preloadTimeout) {
+          return;
+        }
+        target.preloadTimeout = setTimeout(() => {
+          target.preloadTimeout = null;
+          router.preloadRoute(dest).catch(err => {
+            console.warn(err);
+            console.warn(preloadWarning);
+          });
+        }, preloadDelay);
+      }
+    };
+    const handleLeave = e => {
+      const target = e.target || {};
+      if (target.preloadTimeout) {
+        clearTimeout(target.preloadTimeout);
+        target.preloadTimeout = null;
+      }
+    };
+    const composeHandlers = handlers => e => {
+      if (e.persist) e.persist();
+      handlers.filter(Boolean).forEach(handler => {
+        if (e.defaultPrevented) return;
+        handler(e);
+      });
+    };
+
+    // Get the active props
+    const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
+
+    // Get the inactive props
+    const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
+    return {
+      ...resolvedActiveProps,
+      ...resolvedInactiveProps,
+      ...rest,
+      href: disabled ? undefined : next.maskedLocation ? next.maskedLocation.href : next.href,
+      onClick: composeHandlers([onClick, handleClick]),
+      onFocus: composeHandlers([onFocus, handleFocus]),
+      onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
+      onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+      onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+      target,
+      style: {
+        ...style,
+        ...resolvedActiveProps.style,
+        ...resolvedInactiveProps.style
+      },
+      className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
+      ...(disabled ? {
+        role: 'link',
+        'aria-disabled': true
+      } : undefined),
+      ['data-status']: isActive ? 'active' : undefined
+    };
+  }
+  const Link = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
+    const linkProps = useLinkProps(props);
+    return /*#__PURE__*/React__namespace.createElement("a", _extends({
+      ref: ref
+    }, linkProps, {
+      children: typeof props.children === 'function' ? props.children({
+        isActive: linkProps['data-status'] === 'active'
+      }) : props.children
+    }));
+  });
+  function isCtrlEvent(e) {
+    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+  }
+
   // @ts-nocheck
 
   // qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
@@ -665,8 +1897,7 @@
     var str = decodeURIComponent(mix);
     if (str === 'false') return false;
     if (str === 'true') return true;
-    if (str.charAt(0) === '0') return str;
-    return +str * 0 === 0 ? +str : str;
+    return +str * 0 === 0 && +str + '' === str ? +str : str;
   }
   function decode(str) {
     var tmp,
@@ -685,1650 +1916,1452 @@
     return out;
   }
 
-  const rootRouteId = '__root__';
-  class Route {
-    // Set up in this.init()
-
-    // customId!: TCustomId
-
-    // Optional
-
-    constructor(options) {
-      this.options = options || {};
-      this.isRoot = !options?.getParentRoute;
-    }
-    init = opts => {
-      this.originalIndex = opts.originalIndex;
-      this.router = opts.router;
-      const allOptions = this.options;
-      const isRoot = !allOptions?.path && !allOptions?.id;
-      this.parentRoute = this.options?.getParentRoute?.();
-      if (isRoot) {
-        this.path = rootRouteId;
-      } else {
-        invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
-      }
-      let path = isRoot ? rootRouteId : allOptions.path;
-
-      // If the path is anything other than an index path, trim it up
-      if (path && path !== '/') {
-        path = trimPath(path);
-      }
-      const customId = allOptions?.id || path;
-
-      // Strip the parentId prefix from the first level of children
-      let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
-      if (path === rootRouteId) {
-        path = '/';
-      }
-      if (id !== rootRouteId) {
-        id = joinPaths(['/', id]);
-      }
-      const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([this.parentRoute.fullPath, path]));
-      this.path = path;
-      this.id = id;
-      // this.customId = customId as TCustomId
-      this.fullPath = fullPath;
-    };
-    addChildren = children => {
-      this.children = children;
-      return this;
-    };
-
-    // generate = (
-    //   options: Omit<
-    //     RouteOptions<
-    //       TParentRoute,
-    //       TCustomId,
-    //       TPath,
-    //       InferFullSearchSchema<TParentRoute>,
-    //       TSearchSchema,
-    //       TFullSearchSchema,
-    //       TParentRoute['__types']['allParams'],
-    //       TParams,
-    //       TAllParams,
-    //       TParentContext,
-    //       TAllParentContext,
-    //       TRouteContext,
-    //       TContext
-    //     >,
-    //     'path'
-    //   >,
-    // ) => {
-    //   invariant(
-    //     false,
-    //     `route.generate() is used by TanStack Router's file-based routing code generation and should not actually be called during runtime. `,
-    //   )
-    // }
-  }
+  // Detect if we're in the DOM
 
-  class RootRoute extends Route {
-    constructor(options) {
-      super(options);
+  function redirect(opts) {
+    opts.isRedirect = true;
+    if (opts.throw) {
+      throw opts;
     }
-    static withRouterContext = () => {
-      return options => new RootRoute(options);
-    };
-  }
-
-  // const rootRoute = new RootRoute({
-  //   validateSearch: () => null as unknown as { root?: boolean },
-  // })
-
-  // const aRoute = new Route({
-  //   getParentRoute: () => rootRoute,
-  //   path: 'a',
-  //   validateSearch: () => null as unknown as { a?: string },
-  // })
-
-  // const bRoute = new Route({
-  //   getParentRoute: () => aRoute,
-  //   path: 'b',
-  // })
-
-  // const rootIsRoot = rootRoute.isRoot
-  // //    ^?
-  // const aIsRoot = aRoute.isRoot
-  // //    ^?
-
-  // const rId = rootRoute.id
-  // //    ^?
-  // const aId = aRoute.id
-  // //    ^?
-  // const bId = bRoute.id
-  // //    ^?
-
-  // const rPath = rootRoute.fullPath
-  // //    ^?
-  // const aPath = aRoute.fullPath
-  // //    ^?
-  // const bPath = bRoute.fullPath
-  // //    ^?
-
-  // const rSearch = rootRoute.__types.fullSearchSchema
-  // //    ^?
-  // const aSearch = aRoute.__types.fullSearchSchema
-  // //    ^?
-  // const bSearch = bRoute.__types.fullSearchSchema
-  // //    ^?
-
-  // const config = rootRoute.addChildren([aRoute.addChildren([bRoute])])
-  // //    ^?
-
-  const defaultParseSearch = parseSearchWith(JSON.parse);
-  const defaultStringifySearch = stringifySearchWith(JSON.stringify);
-  function parseSearchWith(parser) {
-    return searchStr => {
-      if (searchStr.substring(0, 1) === '?') {
-        searchStr = searchStr.substring(1);
-      }
-      let query = decode(searchStr);
-
-      // Try to parse any query params that might be json
-      for (let key in query) {
-        const value = query[key];
-        if (typeof value === 'string') {
-          try {
-            query[key] = parser(value);
-          } catch (err) {
-            //
-          }
-        }
-      }
-      return query;
-    };
+    return opts;
   }
-  function stringifySearchWith(stringify) {
-    return search => {
-      search = {
-        ...search
-      };
-      if (search) {
-        Object.keys(search).forEach(key => {
-          const val = search[key];
-          if (typeof val === 'undefined' || val === undefined) {
-            delete search[key];
-          } else if (val && typeof val === 'object' && val !== null) {
-            try {
-              search[key] = stringify(val);
-            } catch (err) {
-              // silent
-            }
-          }
-        });
-      }
-      const searchStr = encode(search).toString();
-      return searchStr ? `?${searchStr}` : '';
-    };
+  function isRedirect(obj) {
+    return !!obj?.isRedirect;
   }
 
-  const defaultFetchServerDataFn = async ({
-    router,
-    routeMatch
-  }) => {
-    const next = router.buildNext({
-      to: '.',
-      search: d => ({
-        ...(d ?? {}),
-        __data: {
-          matchId: routeMatch.id
-        }
-      })
-    });
-    const res = await fetch(next.href, {
-      method: 'GET',
-      signal: routeMatch.abortController.signal
-    });
-    if (res.ok) {
-      return res.json();
-    }
-    throw new Error('Failed to fetch match data');
-  };
-  class Router {
-    #unsubHistory;
-    startedLoadingAt = Date.now();
-    resolveNavigation = () => {};
-    constructor(options) {
-      this.options = {
-        defaultPreloadDelay: 50,
-        context: undefined,
-        ...options,
-        stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
-        parseSearch: options?.parseSearch ?? defaultParseSearch,
-        fetchServerDataFn: options?.fetchServerDataFn ?? defaultFetchServerDataFn
-      };
-      this.__store = new Store(getInitialRouterState(), {
-        onUpdate: state => {
-          this.state = state;
-        }
-      });
-      this.state = this.__store.state;
-      this.basepath = '';
-      this.update(options);
-
-      // Allow frameworks to hook into the router creation
-      this.options.Router?.(this);
-      const next = this.buildNext({
-        hash: true,
-        fromCurrent: true,
-        search: true,
-        state: true
-      });
-      if (this.state.latestLocation.href !== next.href) {
-        this.#commitLocation({
-          ...next,
-          replace: true
-        });
-      }
-    }
-    reset = () => {
-      this.__store.setState(s => Object.assign(s, getInitialRouterState()));
-    };
-    mount = () => {
-      // Mount only does anything on the client
-      if (!isServer) {
-        // If the router matches are empty, start loading the matches
-        if (!this.state.currentMatches.length) {
-          this.safeLoad();
-        }
-      }
-      return () => {};
-    };
-    update = opts => {
-      Object.assign(this.options, opts);
-      if (!this.history || this.options.history && this.options.history !== this.history) {
-        if (this.#unsubHistory) {
-          this.#unsubHistory();
-        }
-        this.history = this.options.history ?? (isServer ? createMemoryHistory() : createBrowserHistory());
-        const parsedLocation = this.#parseLocation();
-        this.__store.setState(s => ({
-          ...s,
-          latestLocation: parsedLocation,
-          currentLocation: parsedLocation
-        }));
-        this.#unsubHistory = this.history.listen(() => {
-          this.safeLoad({
-            next: this.#parseLocation(this.state.latestLocation)
-          });
-        });
-      }
-      const {
-        basepath,
-        routeTree
-      } = this.options;
-      this.basepath = `/${trimPath(basepath ?? '') ?? ''}`;
-      if (routeTree) {
-        this.routesById = {};
-        this.routeTree = this.#buildRouteTree(routeTree);
-      }
-      return this;
-    };
-    buildNext = opts => {
-      const next = this.#buildLocation(opts);
-      const __matches = this.matchRoutes(next.pathname);
-      return this.#buildLocation({
-        ...opts,
-        __matches
-      });
-    };
-    cancelMatches = () => {
-      [...this.state.currentMatches, ...(this.state.pendingMatches || [])].forEach(match => {
-        match.cancel();
-      });
-    };
-    safeLoad = opts => {
-      this.load(opts).catch(err => {
-        console.warn(err);
-        invariant(false, 'Encountered an error during router.load()! ☝️.');
-      });
-    };
-    load = async opts => {
-      let now = Date.now();
-      const startedAt = now;
-      this.startedLoadingAt = startedAt;
-
-      // Cancel any pending matches
-      this.cancelMatches();
-      let matches;
-      this.__store.batch(() => {
-        if (opts?.next) {
-          // Ingest the new location
-          this.__store.setState(s => ({
-            ...s,
-            latestLocation: opts.next
-          }));
-        }
-
-        // Match the routes
-        matches = this.matchRoutes(this.state.latestLocation.pathname, {
-          strictParseParams: true
-        });
-        this.__store.setState(s => ({
-          ...s,
-          status: 'pending',
-          pendingMatches: matches,
-          pendingLocation: this.state.latestLocation
-        }));
-      });
-
-      // Load the matches
-      await this.loadMatches(matches, this.state.pendingLocation
-      // opts
-      );
-
-      if (this.startedLoadingAt !== startedAt) {
-        // Ignore side-effects of outdated side-effects
-        return this.navigationPromise;
-      }
-      const previousMatches = this.state.currentMatches;
-      const exiting = [],
-        staying = [];
-      previousMatches.forEach(d => {
-        if (matches.find(dd => dd.id === d.id)) {
-          staying.push(d);
-        } else {
-          exiting.push(d);
-        }
-      });
-      const entering = matches.filter(d => {
-        return !previousMatches.find(dd => dd.id === d.id);
-      });
-      now = Date.now();
-      exiting.forEach(d => {
-        d.__onExit?.({
-          params: d.params,
-          search: d.state.routeSearch
-        });
-
-        // Clear non-loading error states when match leaves
-        if (d.state.status === 'error') {
-          this.__store.setState(s => ({
-            ...s,
-            status: 'idle',
-            error: undefined
-          }));
-        }
-      });
-      staying.forEach(d => {
-        d.route.options.onTransition?.({
-          params: d.params,
-          search: d.state.routeSearch
-        });
-      });
-      entering.forEach(d => {
-        d.__onExit = d.route.options.onLoaded?.({
-          params: d.params,
-          search: d.state.search
-        });
-      });
-      const prevLocation = this.state.currentLocation;
-      this.__store.setState(s => ({
-        ...s,
-        status: 'idle',
-        currentLocation: this.state.latestLocation,
-        currentMatches: matches,
-        pendingLocation: undefined,
-        pendingMatches: undefined
-      }));
-      matches.forEach(match => {
-        match.__commit();
-      });
-      if (prevLocation.href !== this.state.currentLocation.href) {
-        this.options.onRouteChange?.();
-      }
-      this.resolveNavigation();
-    };
-    getRoute = id => {
-      const route = this.routesById[id];
-      invariant(route, `Route with id "${id}" not found`);
-      return route;
-    };
-    loadRoute = async (navigateOpts = this.state.latestLocation) => {
-      const next = this.buildNext(navigateOpts);
-      const matches = this.matchRoutes(next.pathname, {
-        strictParseParams: true
-      });
-      await this.loadMatches(matches, next);
-      return matches;
-    };
-    preloadRoute = async (navigateOpts = this.state.latestLocation) => {
-      const next = this.buildNext(navigateOpts);
-      const matches = this.matchRoutes(next.pathname, {
-        strictParseParams: true
-      });
-      await this.loadMatches(matches, next, {
-        preload: true
-      });
-      return matches;
-    };
-    matchRoutes = (pathname, opts) => {
-      const matches = [];
-      if (!this.routeTree) {
-        return matches;
-      }
-      const existingMatches = [...this.state.currentMatches, ...(this.state.pendingMatches ?? [])];
-      const findInRouteTree = async routes => {
-        const parentMatch = last(matches);
-        let params = parentMatch?.params ?? {};
-        const filteredRoutes = this.options.filterRoutes?.(routes) ?? routes;
-        let matchingRoutes = [];
-        const findMatchInRoutes = (parentRoutes, routes) => {
-          routes.some(route => {
-            const children = route.children;
-            if (!route.path && children?.length) {
-              return findMatchInRoutes([...matchingRoutes, route], children);
-            }
-            const fuzzy = !!(route.path !== '/' || children?.length);
-            const matchParams = matchPathname(this.basepath, pathname, {
-              to: route.fullPath,
-              fuzzy,
-              caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive
-            });
-            if (matchParams) {
-              let parsedParams;
-              try {
-                parsedParams = route.options.parseParams?.(matchParams) ?? matchParams;
-              } catch (err) {
-                if (opts?.strictParseParams) {
-                  throw err;
-                }
-              }
-              params = {
-                ...params,
-                ...parsedParams
-              };
-            }
-            if (!!matchParams) {
-              matchingRoutes = [...parentRoutes, route];
-            }
-            return !!matchingRoutes.length;
-          });
-          return !!matchingRoutes.length;
-        };
-        findMatchInRoutes([], filteredRoutes);
-        if (!matchingRoutes.length) {
-          return;
-        }
-        matchingRoutes.forEach(foundRoute => {
-          const interpolatedPath = interpolatePath(foundRoute.path, params);
-          const matchId = interpolatePath(foundRoute.id, params, true);
-          const match = existingMatches.find(d => d.id === matchId) || new RouteMatch(this, foundRoute, {
-            id: matchId,
-            params,
-            pathname: joinPaths([this.basepath, interpolatedPath])
-          });
-          matches.push(match);
-        });
-        const foundRoute = last(matchingRoutes);
-        const foundChildren = foundRoute.children;
-        if (foundChildren?.length) {
-          findInRouteTree(foundChildren);
-        }
-      };
-      findInRouteTree([this.routeTree]);
-      return matches;
-    };
-    loadMatches = async (resolvedMatches, location, opts) => {
-      let firstBadMatchIndex;
-
-      // Check each match middleware to see if the route can be accessed
-      try {
-        await Promise.all(resolvedMatches.map(async (match, index) => {
-          try {
-            await match.route.options.beforeLoad?.({
-              router: this,
-              match
-            });
-          } catch (err) {
-            if (isRedirect(err)) {
-              throw err;
-            }
-            firstBadMatchIndex = firstBadMatchIndex ?? index;
-            const errorHandler = match.route.options.onBeforeLoadError ?? match.route.options.onError;
-            try {
-              errorHandler?.(err);
-            } catch (errorHandlerErr) {
-              if (isRedirect(errorHandlerErr)) {
-                throw errorHandlerErr;
-              }
-              match.__store.setState(s => ({
-                ...s,
-                error: errorHandlerErr,
-                status: 'error',
-                updatedAt: Date.now()
-              }));
-              return;
-            }
-            match.__store.setState(s => ({
-              ...s,
-              error: err,
-              status: 'error',
-              updatedAt: Date.now()
-            }));
-          }
-        }));
-      } catch (err) {
-        if (isRedirect(err)) {
-          if (!opts?.preload) {
-            this.navigate(err);
-          }
-          return;
-        }
-        throw err; // we should never end up here
+  const defaultParseSearch = parseSearchWith(JSON.parse);
+  const defaultStringifySearch = stringifySearchWith(JSON.stringify, JSON.parse);
+  function parseSearchWith(parser) {
+    return searchStr => {
+      if (searchStr.substring(0, 1) === '?') {
+        searchStr = searchStr.substring(1);
       }
+      let query = decode(searchStr);
 
-      const validResolvedMatches = resolvedMatches.slice(0, firstBadMatchIndex);
-      const matchPromises = validResolvedMatches.map(async (match, index) => {
-        const parentMatch = validResolvedMatches[index - 1];
-        match.__load({
-          preload: opts?.preload,
-          location,
-          parentMatch
-        });
-        await match.__loadPromise;
-        if (parentMatch) {
-          await parentMatch.__loadPromise;
+      // Try to parse any query params that might be json
+      for (let key in query) {
+        const value = query[key];
+        if (typeof value === 'string') {
+          try {
+            query[key] = parser(value);
+          } catch (err) {
+            //
+          }
         }
-      });
-      await Promise.all(matchPromises);
-    };
-    reload = () => {
-      this.navigate({
-        fromCurrent: true,
-        replace: true,
-        search: true
-      });
+      }
+      return query;
     };
-    resolvePath = (from, path) => {
-      return resolvePath(this.basepath, from, cleanPath(path));
+  }
+  function stringifySearchWith(stringify, parser) {
+    function stringifyValue(val) {
+      if (typeof val === 'object' && val !== null) {
+        try {
+          return stringify(val);
+        } catch (err) {
+          // silent
+        }
+      } else if (typeof val === 'string' && typeof parser === 'function') {
+        try {
+          // Check if it's a valid parseable string.
+          // If it is, then stringify it again.
+          parser(val);
+          return stringify(val);
+        } catch (err) {
+          // silent
+        }
+      }
+      return val;
+    }
+    return search => {
+      search = {
+        ...search
+      };
+      if (search) {
+        Object.keys(search).forEach(key => {
+          const val = search[key];
+          if (typeof val === 'undefined' || val === undefined) {
+            delete search[key];
+          } else {
+            search[key] = stringifyValue(val);
+          }
+        });
+      }
+      const searchStr = encode(search).toString();
+      return searchStr ? `?${searchStr}` : '';
     };
-    navigate = async ({
-      from,
-      to = '',
-      search,
-      hash,
-      replace,
-      params
-    }) => {
-      // If this link simply reloads the current route,
-      // make sure it has a new key so it will trigger a data refresh
+  }
 
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
-      const toString = String(to);
-      const fromString = typeof from === 'undefined' ? from : String(from);
-      let isExternal;
-      try {
-        new URL(`${toString}`);
-        isExternal = true;
-      } catch (e) {}
-      invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
-      return this.#commitLocation({
-        from: fromString,
-        to: toString,
-        search,
-        hash,
-        replace,
-        params
+  // import warning from 'tiny-warning'
+
+  //
+
+  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+  class Router {
+    // Option-independent properties
+    tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+    resetNextScroll = true;
+    navigateTimeout = null;
+    latestLoadPromise = Promise.resolve();
+    subscribers = new Set();
+    injectedHtml = [];
+
+    // Must build in constructor
+
+    constructor(options) {
+      this.update({
+        defaultPreloadDelay: 50,
+        defaultPendingMs: 1000,
+        defaultPendingMinMs: 500,
+        context: undefined,
+        ...options,
+        stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+        parseSearch: options?.parseSearch ?? defaultParseSearch
       });
-    };
-    matchRoute = (location, opts) => {
-      location = {
-        ...location,
-        to: location.to ? this.resolvePath(location.from ?? '', location.to) : undefined
+    }
+
+    // These are default implementations that can optionally be overridden
+    // by the router provider once rendered. We provide these so that the
+    // router can be used in a non-react environment if necessary
+    startReactTransition = fn => fn();
+    update = newOptions => {
+      this.options = {
+        ...this.options,
+        ...newOptions
       };
-      const next = this.buildNext(location);
-      const baseLocation = opts?.pending ? this.state.pendingLocation : this.state.currentLocation;
-      if (!baseLocation) {
-        return false;
+      this.basepath = `/${trimPath(newOptions.basepath ?? '') ?? ''}`;
+      if (!this.history || this.options.history && this.options.history !== this.history) {
+        this.history = this.options.history ?? (typeof document !== 'undefined' ? createBrowserHistory() : createMemoryHistory());
+        this.latestLocation = this.parseLocation();
       }
-      const match = matchPathname(this.basepath, baseLocation.pathname, {
-        ...opts,
-        to: next.pathname
-      });
-      if (!match) {
-        return false;
+      if (this.options.routeTree !== this.routeTree) {
+        this.routeTree = this.options.routeTree;
+        this.buildRouteTree();
       }
-      if (opts?.includeSearch ?? true) {
-        return partialDeepEqual(baseLocation.search, next.search) ? match : false;
+      if (!this.__store) {
+        this.__store = new Store(getInitialRouterState(this.latestLocation), {
+          onUpdate: () => {
+            this.__store.state = {
+              ...this.state,
+              status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
+            };
+          }
+        });
       }
-      return match;
     };
-    buildLink = ({
-      from,
-      to = '.',
-      search,
-      params,
-      hash,
-      target,
-      replace,
-      activeOptions,
-      preload,
-      preloadDelay: userPreloadDelay,
-      disabled
-    }) => {
-      // If this link simply reloads the current route,
-      // make sure it has a new key so it will trigger a data refresh
-
-      // If this `to` is a valid external URL, return
-      // null for LinkUtils
-
-      try {
-        new URL(`${to}`);
-        return {
-          type: 'external',
-          href: to
-        };
-      } catch (e) {}
-      const nextOpts = {
-        from,
-        to,
-        search,
-        params,
-        hash,
-        replace
+    get state() {
+      return this.__store.state;
+    }
+    buildRouteTree = () => {
+      this.routesById = {};
+      this.routesByPath = {};
+      const notFoundRoute = this.options.notFoundRoute;
+      if (notFoundRoute) {
+        notFoundRoute.init({
+          originalIndex: 99999999999
+        });
+        this.routesById[notFoundRoute.id] = notFoundRoute;
+      }
+      const recurseRoutes = childRoutes => {
+        childRoutes.forEach((childRoute, i) => {
+          childRoute.init({
+            originalIndex: i
+          });
+          const existingRoute = this.routesById[childRoute.id];
+          invariant(!existingRoute, `Duplicate routes found with id: ${String(childRoute.id)}`);
+          this.routesById[childRoute.id] = childRoute;
+          if (!childRoute.isRoot && childRoute.path) {
+            const trimmedFullPath = trimPathRight(childRoute.fullPath);
+            if (!this.routesByPath[trimmedFullPath] || childRoute.fullPath.endsWith('/')) {
+              this.routesByPath[trimmedFullPath] = childRoute;
+            }
+          }
+          const children = childRoute.children;
+          if (children?.length) {
+            recurseRoutes(children);
+          }
+        });
       };
-      const next = this.buildNext(nextOpts);
-      preload = preload ?? this.options.defaultPreload;
-      const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
-
-      // Compare path/hash for matches
-      const currentPathSplit = this.state.currentLocation.pathname.split('/');
-      const nextPathSplit = next.pathname.split('/');
-      const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-      // Combine the matches based on user options
-      const pathTest = activeOptions?.exact ? this.state.currentLocation.pathname === next.pathname : pathIsFuzzyEqual;
-      const hashTest = activeOptions?.includeHash ? this.state.currentLocation.hash === next.hash : true;
-      const searchTest = activeOptions?.includeSearch ?? true ? partialDeepEqual(this.state.currentLocation.search, next.search) : true;
-
-      // The final "active" test
-      const isActive = pathTest && hashTest && searchTest;
-
-      // The click handler
-      const handleClick = e => {
-        if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
-          e.preventDefault();
-
-          // All is well? Navigate!
-          this.#commitLocation(nextOpts);
+      recurseRoutes([this.routeTree]);
+      const scoredRoutes = [];
+      Object.values(this.routesById).forEach((d, i) => {
+        if (d.isRoot || !d.path) {
+          return;
         }
-      };
-
-      // The click handler
-      const handleFocus = e => {
-        if (preload) {
-          this.preloadRoute(nextOpts).catch(err => {
-            console.warn(err);
-            console.warn('Error preloading route! ☝️');
-          });
+        const trimmed = trimPathLeft(d.fullPath);
+        const parsed = parsePathname(trimmed);
+        while (parsed.length > 1 && parsed[0]?.value === '/') {
+          parsed.shift();
         }
-      };
-      const handleTouchStart = e => {
-        this.preloadRoute(nextOpts).catch(err => {
-          console.warn(err);
-          console.warn('Error preloading route! ☝️');
+        const scores = parsed.map(d => {
+          if (d.value === '/') {
+            return 0.75;
+          }
+          if (d.type === 'param') {
+            return 0.5;
+          }
+          if (d.type === 'wildcard') {
+            return 0.25;
+          }
+          return 1;
         });
-      };
-      const handleEnter = e => {
-        const target = e.target || {};
-        if (preload) {
-          if (target.preloadTimeout) {
-            return;
+        scoredRoutes.push({
+          child: d,
+          trimmed,
+          parsed,
+          index: i,
+          scores
+        });
+      });
+      this.flatRoutes = scoredRoutes.sort((a, b) => {
+        const minLength = Math.min(a.scores.length, b.scores.length);
+
+        // Sort by min available score
+        for (let i = 0; i < minLength; i++) {
+          if (a.scores[i] !== b.scores[i]) {
+            return b.scores[i] - a.scores[i];
           }
-          target.preloadTimeout = setTimeout(() => {
-            target.preloadTimeout = null;
-            this.preloadRoute(nextOpts).catch(err => {
-              console.warn(err);
-              console.warn('Error preloading route! ☝️');
-            });
-          }, preloadDelay);
         }
-      };
-      const handleLeave = e => {
-        const target = e.target || {};
-        if (target.preloadTimeout) {
-          clearTimeout(target.preloadTimeout);
-          target.preloadTimeout = null;
+
+        // Sort by length of score
+        if (a.scores.length !== b.scores.length) {
+          return b.scores.length - a.scores.length;
+        }
+
+        // Sort by min available parsed value
+        for (let i = 0; i < minLength; i++) {
+          if (a.parsed[i].value !== b.parsed[i].value) {
+            return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
+          }
         }
+
+        // Sort by original index
+        return a.index - b.index;
+      }).map((d, i) => {
+        d.child.rank = i;
+        return d.child;
+      });
+    };
+    subscribe = (eventType, fn) => {
+      const listener = {
+        eventType,
+        fn
       };
-      return {
-        type: 'internal',
-        next,
-        handleFocus,
-        handleClick,
-        handleEnter,
-        handleLeave,
-        handleTouchStart,
-        isActive,
-        disabled
+      this.subscribers.add(listener);
+      return () => {
+        this.subscribers.delete(listener);
       };
     };
-    dehydrate = () => {
-      return {
-        state: {
-          ...pick(this.state, ['latestLocation', 'currentLocation', 'status', 'lastUpdated']),
-          currentMatches: this.state.currentMatches.map(match => ({
-            id: match.id,
-            state: {
-              status: match.state.status
-            }
-          }))
+    emit = routerEvent => {
+      this.subscribers.forEach(listener => {
+        if (listener.eventType === routerEvent.type) {
+          listener.fn(routerEvent);
         }
-      };
-    };
-    hydrate = dehydratedRouter => {
-      this.__store.setState(s => {
-        // Match the routes
-        const currentMatches = this.matchRoutes(dehydratedRouter.state.latestLocation.pathname, {
-          strictParseParams: true
-        });
-        currentMatches.forEach((match, index) => {
-          const dehydratedMatch = dehydratedRouter.state.currentMatches[index];
-          invariant(dehydratedMatch && dehydratedMatch.id === match.id, 'Oh no! There was a hydration mismatch when attempting to hydrate the state of the router! 😬');
-          match.__store.setState(s => ({
-            ...s,
-            ...dehydratedMatch.state
-          }));
-        });
-        return {
-          ...s,
-          ...dehydratedRouter.state,
-          currentMatches
-        };
       });
     };
-    #buildRouteTree = routeTree => {
-      const recurseRoutes = (routes, parentRoute) => {
-        routes.forEach((route, i) => {
-          route.init({
-            originalIndex: i,
-            router: this
-          });
-          const existingRoute = this.routesById[route.id];
-          invariant(!existingRoute, `Duplicate routes found with id: ${String(route.id)}`);
-          this.routesById[route.id] = route;
-          const children = route.children;
-          if (children?.length) {
-            recurseRoutes(children);
-            route.children = children.map((d, i) => {
-              const parsed = parsePathname(trimPathLeft(cleanPath(d.path ?? '/')));
-              while (parsed.length > 1 && parsed[0]?.value === '/') {
-                parsed.shift();
-              }
-              let score = 0;
-              parsed.forEach((d, i) => {
-                let modifier = 1;
-                while (i--) {
-                  modifier *= 0.001;
-                }
-                if (d.type === 'pathname' && d.value !== '/') {
-                  score += 1 * modifier;
-                } else if (d.type === 'param') {
-                  score += 2 * modifier;
-                } else if (d.type === 'wildcard') {
-                  score += 3 * modifier;
-                }
-              });
-              return {
-                child: d,
-                parsed,
-                index: i,
-                score
-              };
-            }).sort((a, b) => {
-              if (a.score !== b.score) {
-                return a.score - b.score;
-              }
-              return a.index - b.index;
-            }).map(d => d.child);
-          }
-        });
-      };
-      recurseRoutes([routeTree]);
-      const recurceCheckRoutes = (routes, parentRoute) => {
-        routes.forEach(route => {
-          if (route.isRoot) {
-            invariant(!parentRoute, 'Root routes can only be used as the root of a route tree.');
-          } else {
-            invariant(parentRoute ? route.parentRoute === parentRoute : true, `Expected a route with path "${route.path}" to be passed to its parent route "${route.parentRoute?.id}" in an addChildren() call, but was instead passed as a child of the "${parentRoute?.id}" route.`);
-          }
-          if (route.children) {
-            recurceCheckRoutes(route.children, route);
-          }
-        });
-      };
-      recurceCheckRoutes([routeTree], undefined);
-      return routeTree;
+    checkLatest = promise => {
+      return this.latestLoadPromise !== promise ? this.latestLoadPromise : undefined;
     };
-    #parseLocation = previousLocation => {
-      let {
+    parseLocation = previousLocation => {
+      const parse = ({
         pathname,
         search,
         hash,
         state
-      } = this.history.location;
-      const parsedSearch = this.options.parseSearch(search);
-      return {
-        pathname: pathname,
-        searchStr: search,
-        search: replaceEqualDeep(previousLocation?.search, parsedSearch),
-        hash: hash.split('#').reverse()[0] ?? '',
-        href: `${pathname}${search}${hash}`,
-        state: state,
-        key: state?.key || '__init__'
-      };
-    };
-    #buildLocation = (dest = {}) => {
-      dest.fromCurrent = dest.fromCurrent ?? dest.to === '';
-      const fromPathname = dest.fromCurrent ? this.state.latestLocation.pathname : dest.from ?? this.state.latestLocation.pathname;
-      let pathname = resolvePath(this.basepath ?? '/', fromPathname, `${dest.to ?? ''}`);
-      const fromMatches = this.matchRoutes(this.state.latestLocation.pathname, {
-        strictParseParams: true
-      });
-      const prevParams = {
-        ...last(fromMatches)?.params
+      }) => {
+        const parsedSearch = this.options.parseSearch(search);
+        return {
+          pathname: pathname,
+          searchStr: search,
+          search: replaceEqualDeep(previousLocation?.search, parsedSearch),
+          hash: hash.split('#').reverse()[0] ?? '',
+          href: `${pathname}${search}${hash}`,
+          state: replaceEqualDeep(previousLocation?.state, state)
+        };
       };
-      let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
-      if (nextParams) {
-        dest.__matches?.map(d => d.route.options.stringifyParams).filter(Boolean).forEach(fn => {
-          nextParams = {
-            ...nextParams,
-            ...fn(nextParams)
-          };
-        });
+      const location = parse(this.history.location);
+      let {
+        __tempLocation,
+        __tempKey
+      } = location.state;
+      if (__tempLocation && (!__tempKey || __tempKey === this.tempLocationKey)) {
+        // Sync up the location keys
+        const parsedTempLocation = parse(__tempLocation);
+        parsedTempLocation.state.key = location.state.key;
+        delete parsedTempLocation.state.__tempLocation;
+        return {
+          ...parsedTempLocation,
+          maskedLocation: location
+        };
       }
-      pathname = interpolatePath(pathname, nextParams ?? {});
-      const preSearchFilters = dest.__matches?.map(match => match.route.options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
-      const postSearchFilters = dest.__matches?.map(match => match.route.options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
-
-      // Pre filters first
-      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), this.state.latestLocation.search) : this.state.latestLocation.search;
-
-      // Then the link/navigate function
-      const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-      : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
-      : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
-      : {};
-
-      // Then post filters
-      const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-      const search = replaceEqualDeep(this.state.latestLocation.search, postFilteredSearch);
-      const searchStr = this.options.stringifySearch(search);
-      let hash = dest.hash === true ? this.state.latestLocation.hash : functionalUpdate(dest.hash, this.state.latestLocation.hash);
-      hash = hash ? `#${hash}` : '';
-      const nextState = dest.state === true ? this.state.latestLocation.state : functionalUpdate(dest.state, this.state.latestLocation.state);
-      return {
-        pathname,
-        search,
-        searchStr,
-        state: nextState,
-        hash,
-        href: this.history.createHref(`${pathname}${searchStr}${hash}`),
-        key: dest.key
-      };
+      return location;
     };
-    #commitLocation = async location => {
-      const next = this.buildNext(location);
-      const id = '' + Date.now() + Math.random();
-      if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
-      let nextAction = 'replace';
-      if (!location.replace) {
-        nextAction = 'push';
-      }
-      const isSameUrl = this.state.latestLocation.href === next.href;
-      if (isSameUrl && !next.key) {
-        nextAction = 'replace';
-      }
-      const href = `${next.pathname}${next.searchStr}${next.hash ? `${next.hash}` : ''}`;
-      this.history[nextAction === 'push' ? 'push' : 'replace'](href, {
-        id,
-        ...next.state
-      });
-      return this.navigationPromise = new Promise(resolve => {
-        const previousNavigationResolve = this.resolveNavigation;
-        this.resolveNavigation = () => {
-          previousNavigationResolve();
-          resolve();
-        };
-      });
+    resolvePathWithBase = (from, path) => {
+      return resolvePath(this.basepath, from, cleanPath(path));
     };
-  }
+    get looseRoutesById() {
+      return this.routesById;
+    }
+    matchRoutes = (pathname, locationSearch, opts) => {
+      let routeParams = {};
+      let foundRoute = this.flatRoutes.find(route => {
+        const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
+          to: route.fullPath,
+          caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
+          fuzzy: true
+        });
+        if (matchedParams) {
+          routeParams = matchedParams;
+          return true;
+        }
+        return false;
+      });
+      let routeCursor = foundRoute || this.routesById['__root__'];
+      let matchedRoutes = [routeCursor];
+
+      // Check to see if the route needs a 404 entry
+      if (
+      // If we found a route, and it's not an index route and we have left over path
+      (foundRoute ? foundRoute.path !== '/' && routeParams['**'] :
+      // Or if we didn't find a route and we have left over path
+      trimPathRight(pathname)) &&
+      // And we have a 404 route configured
+      this.options.notFoundRoute) {
+        matchedRoutes.push(this.options.notFoundRoute);
+      }
+      while (routeCursor?.parentRoute) {
+        routeCursor = routeCursor.parentRoute;
+        if (routeCursor) matchedRoutes.unshift(routeCursor);
+      }
 
-  // Detect if we're in the DOM
-  const isServer = typeof window === 'undefined' || !window.document.createElement;
-  function getInitialRouterState() {
-    return {
-      status: 'idle',
-      latestLocation: null,
-      currentLocation: null,
-      currentMatches: [],
-      lastUpdated: Date.now()
-    };
-  }
-  function isCtrlEvent(e) {
-    return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-  }
-  function redirect(opts) {
-    opts.isRedirect = true;
-    return opts;
-  }
-  function isRedirect(obj) {
-    return !!obj?.isRedirect;
-  }
+      // Existing matches are matches that are already loaded along with
+      // pending matches that are still loading
 
-  const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-  class RouteMatch {
-    abortController = new AbortController();
-    constructor(router, route, opts) {
-      Object.assign(this, {
-        route,
-        router,
-        id: opts.id,
-        pathname: opts.pathname,
-        params: opts.params,
-        __store: new Store({
-          updatedAt: 0,
-          routeSearch: {},
+      const parseErrors = matchedRoutes.map(route => {
+        let parsedParamsError;
+        if (route.options.parseParams) {
+          try {
+            const parsedParams = route.options.parseParams(routeParams);
+            // Add the parsed params to the accumulated params bag
+            Object.assign(routeParams, parsedParams);
+          } catch (err) {
+            parsedParamsError = new PathParamError(err.message, {
+              cause: err
+            });
+            if (opts?.throwOnError) {
+              throw parsedParamsError;
+            }
+            return parsedParamsError;
+          }
+        }
+        return;
+      });
+      const matches = [];
+      matchedRoutes.forEach((route, index) => {
+        // Take each matched route and resolve + validate its search params
+        // This has to happen serially because each route's search params
+        // can depend on the parent route's search params
+        // It must also happen before we create the match so that we can
+        // pass the search params to the route's potential key function
+        // which is used to uniquely identify the route match in state
+
+        const parentMatch = matches[index - 1];
+        const [preMatchSearch, searchError] = (() => {
+          // Validate the search params and stabilize them
+          const parentSearch = parentMatch?.search ?? locationSearch;
+          try {
+            const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
+            let search = validator?.(parentSearch) ?? {};
+            return [{
+              ...parentSearch,
+              ...search
+            }, undefined];
+          } catch (err) {
+            const searchError = new SearchParamError(err.message, {
+              cause: err
+            });
+            if (opts?.throwOnError) {
+              throw searchError;
+            }
+            return [parentSearch, searchError];
+          }
+        })();
+
+        // This is where we need to call route.options.loaderDeps() to get any additional
+        // deps that the route's loader function might need to run. We need to do this
+        // before we create the match so that we can pass the deps to the route's
+        // potential key function which is used to uniquely identify the route match in state
+
+        const loaderDeps = route.options.loaderDeps?.({
+          search: preMatchSearch
+        }) ?? '';
+        const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : '';
+        const interpolatedPath = interpolatePath(route.fullPath, routeParams);
+        const matchId = interpolatePath(route.id, routeParams, true) + loaderDepsHash;
+
+        // Waste not, want not. If we already have a match for this route,
+        // reuse it. This is important for layout routes, which might stick
+        // around between navigation actions that only change leaf routes.
+        const existingMatch = getRouteMatch(this.state, matchId);
+        const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
+
+        // Create a fresh route match
+        const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
+        const match = existingMatch ? {
+          ...existingMatch,
+          cause
+        } : {
+          id: matchId,
+          routeId: route.id,
+          params: routeParams,
+          pathname: joinPaths([this.basepath, interpolatedPath]),
+          updatedAt: Date.now(),
           search: {},
-          status: 'idle'
-        }, {
-          onUpdate: next => {
-            this.state = next;
-          }
-        })
-      });
-      this.state = this.__store.state;
-      componentTypes.map(async type => {
-        const component = this.route.options[type];
-        if (typeof this[type] !== 'function') {
-          this[type] = component;
-        }
+          searchError: undefined,
+          status: hasLoaders ? 'pending' : 'success',
+          showPending: false,
+          isFetching: false,
+          error: undefined,
+          paramsError: parseErrors[index],
+          loadPromise: Promise.resolve(),
+          routeContext: undefined,
+          context: undefined,
+          abortController: new AbortController(),
+          fetchCount: 0,
+          cause,
+          loaderDeps,
+          invalid: false,
+          preload: false
+        };
+
+        // Regardless of whether we're reusing an existing match or creating
+        // a new one, we need to update the match's search params
+        match.search = replaceEqualDeep(match.search, preMatchSearch);
+        // And also update the searchError if there is one
+        match.searchError = searchError;
+        matches.push(match);
       });
-      if (this.state.status === 'idle' && !this.#hasLoaders()) {
-        this.__store.setState(s => ({
-          ...s,
-          status: 'success'
-        }));
-      }
-    }
-    #hasLoaders = () => {
-      return !!(this.route.options.onLoad || componentTypes.some(d => this.route.options[d]?.preload));
+      return matches;
     };
-    __commit = () => {
-      const {
-        routeSearch,
-        search,
-        context,
-        routeContext
-      } = this.#resolveInfo({
-        location: this.router.state.currentLocation
-      });
-      this.context = context;
-      this.routeContext = routeContext;
-      this.__store.setState(s => ({
-        ...s,
-        routeSearch: replaceEqualDeep(s.routeSearch, routeSearch),
-        search: replaceEqualDeep(s.search, search)
-      }));
+    cancelMatch = id => {
+      getRouteMatch(this.state, id)?.abortController?.abort();
     };
-    cancel = () => {
-      this.abortController?.abort();
+    cancelMatches = () => {
+      this.state.pendingMatches?.forEach(match => {
+        this.cancelMatch(match.id);
+      });
     };
-    #resolveSearchInfo = opts => {
-      // Validate the search params and stabilize them
-      const parentSearchInfo = this.parentMatch ? this.parentMatch.#resolveSearchInfo(opts) : {
-        search: opts.location.search,
-        routeSearch: opts.location.search
-      };
-      try {
-        const validator = typeof this.route.options.validateSearch === 'object' ? this.route.options.validateSearch.parse : this.route.options.validateSearch;
-        const routeSearch = validator?.(parentSearchInfo.search) ?? {};
-        const search = {
-          ...parentSearchInfo.search,
-          ...routeSearch
+    buildLocation = opts => {
+      const build = (dest = {}, matches) => {
+        const from = this.latestLocation;
+        const fromSearch = (this.state.pendingMatches || this.state.matches).at(-1)?.search || from.search;
+        const fromPathname = dest.from ?? from.pathname;
+        let pathname = this.resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
+        const fromMatches = this.matchRoutes(fromPathname, fromSearch);
+        const stayingMatches = matches?.filter(d => fromMatches?.find(e => e.routeId === d.routeId));
+        const prevParams = {
+          ...last(fromMatches)?.params
         };
+        let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+        if (nextParams) {
+          matches?.map(d => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
+            nextParams = {
+              ...nextParams,
+              ...fn(nextParams)
+            };
+          });
+        }
+        pathname = interpolatePath(pathname, nextParams ?? {});
+        const preSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+        const postSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
+
+        // Pre filters first
+        const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), fromSearch) : fromSearch;
+
+        // Then the link/navigate function
+        const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+        : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+        : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+        : {};
+
+        // Then post filters
+        const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+        const search = replaceEqualDeep(fromSearch, postFilteredSearch);
+        const searchStr = this.options.stringifySearch(search);
+        const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
+        const hashStr = hash ? `#${hash}` : '';
+        let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
+        nextState = replaceEqualDeep(from.state, nextState);
         return {
-          routeSearch,
-          search
+          pathname,
+          search,
+          searchStr,
+          state: nextState,
+          hash,
+          href: `${pathname}${searchStr}${hashStr}`,
+          unmaskOnReload: dest.unmaskOnReload
         };
-      } catch (err) {
-        if (isRedirect(err)) {
-          throw err;
+      };
+      const buildWithMatches = (dest = {}, maskedDest) => {
+        let next = build(dest);
+        let maskedNext = maskedDest ? build(maskedDest) : undefined;
+        if (!maskedNext) {
+          let params = {};
+          let foundMask = this.options.routeMasks?.find(d => {
+            const match = matchPathname(this.basepath, next.pathname, {
+              to: d.from,
+              caseSensitive: false,
+              fuzzy: false
+            });
+            if (match) {
+              params = match;
+              return true;
+            }
+            return false;
+          });
+          if (foundMask) {
+            foundMask = {
+              ...foundMask,
+              from: interpolatePath(foundMask.from, params)
+            };
+            maskedDest = foundMask;
+            maskedNext = build(maskedDest);
+          }
+        }
+        const nextMatches = this.matchRoutes(next.pathname, next.search);
+        const maskedMatches = maskedNext ? this.matchRoutes(maskedNext.pathname, maskedNext.search) : undefined;
+        const maskedFinal = maskedNext ? build(maskedDest, maskedMatches) : undefined;
+        const final = build(dest, nextMatches);
+        if (maskedFinal) {
+          final.maskedLocation = maskedFinal;
         }
-        const errorHandler = this.route.options.onValidateSearchError ?? this.route.options.onError;
-        errorHandler?.(err);
-        const error = new Error('Invalid search params found', {
-          cause: err
+        return final;
+      };
+      if (opts.mask) {
+        return buildWithMatches(opts, {
+          ...pick(opts, ['from']),
+          ...opts.mask
         });
-        error.code = 'INVALID_SEARCH_PARAMS';
-        throw error;
       }
+      return buildWithMatches(opts);
     };
-    #resolveInfo = opts => {
-      const {
-        search,
-        routeSearch
-      } = this.#resolveSearchInfo(opts);
-      try {
-        const routeContext = this.route.options.getContext?.({
-          parentContext: this.parentMatch?.routeContext ?? {},
-          context: this.parentMatch?.context ?? this.router?.options.context ?? {},
-          params: this.params,
-          search
-        }) || {};
-        const context = {
-          ...(this.parentMatch?.context ?? this.router?.options.context),
-          ...routeContext
-        };
-        return {
-          routeSearch,
-          search,
-          context,
-          routeContext
+    commitLocation = async ({
+      startTransition,
+      ...next
+    }) => {
+      if (this.navigateTimeout) clearTimeout(this.navigateTimeout);
+      const isSameUrl = this.latestLocation.href === next.href;
+
+      // If the next urls are the same and we're not replacing,
+      // do nothing
+      if (!isSameUrl || !next.replace) {
+        let {
+          maskedLocation,
+          ...nextHistory
+        } = next;
+        if (maskedLocation) {
+          nextHistory = {
+            ...maskedLocation,
+            state: {
+              ...maskedLocation.state,
+              __tempKey: undefined,
+              __tempLocation: {
+                ...nextHistory,
+                search: nextHistory.searchStr,
+                state: {
+                  ...nextHistory.state,
+                  __tempKey: undefined,
+                  __tempLocation: undefined,
+                  key: undefined
+                }
+              }
+            }
+          };
+          if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+            nextHistory.state.__tempKey = this.tempLocationKey;
+          }
+        }
+        const apply = () => {
+          this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
         };
-      } catch (err) {
-        this.route.options.onError?.(err);
-        throw err;
+        if (startTransition ?? true) {
+          this.startReactTransition(apply);
+        } else {
+          apply();
+        }
       }
+      this.resetNextScroll = next.resetScroll ?? true;
+      return this.latestLoadPromise;
+    };
+    buildAndCommitLocation = ({
+      replace,
+      resetScroll,
+      startTransition,
+      ...rest
+    } = {}) => {
+      const location = this.buildLocation(rest);
+      return this.commitLocation({
+        ...location,
+        startTransition,
+        replace,
+        resetScroll
+      });
     };
-    __load = async opts => {
-      this.parentMatch = opts.parentMatch;
-      let info;
+    navigate = ({
+      from,
+      to = '',
+      ...rest
+    }) => {
+      // If this link simply reloads the current route,
+      // make sure it has a new key so it will trigger a data refresh
+
+      // If this `to` is a valid external URL, return
+      // null for LinkUtils
+      const toString = String(to);
+      const fromString = typeof from === 'undefined' ? from : String(from);
+      let isExternal;
       try {
-        info = this.#resolveInfo(opts);
-      } catch (err) {
-        if (isRedirect(err)) {
-          if (!opts?.preload) {
-            this.router.navigate(err);
-          }
-          return;
-        }
+        new URL(`${toString}`);
+        isExternal = true;
+      } catch (e) {}
+      invariant(!isExternal, 'Attempting to navigate to external url with this.navigate!');
+      return this.buildAndCommitLocation({
+        ...rest,
+        from: fromString,
+        to: toString
+      });
+    };
+    loadMatches = async ({
+      checkLatest,
+      matches,
+      preload
+    }) => {
+      let latestPromise;
+      let firstBadMatchIndex;
+      const updateMatch = match => {
+        // const isPreload = this.state.cachedMatches.find((d) => d.id === match.id)
+        const isPending = this.state.pendingMatches?.find(d => d.id === match.id);
+        const isMatched = this.state.matches.find(d => d.id === match.id);
+        const matchesKey = isPending ? 'pendingMatches' : isMatched ? 'matches' : 'cachedMatches';
         this.__store.setState(s => ({
           ...s,
-          status: 'error',
-          error: err
+          [matchesKey]: s[matchesKey]?.map(d => d.id === match.id ? match : d)
         }));
+      };
 
-        // Do not proceed with loading the route
-        return;
+      // Check each match middleware to see if the route can be accessed
+      try {
+        for (let [index, match] of matches.entries()) {
+          const parentMatch = matches[index - 1];
+          const route = this.looseRoutesById[match.routeId];
+          const abortController = new AbortController();
+          const handleErrorAndRedirect = (err, code) => {
+            err.routerCode = code;
+            firstBadMatchIndex = firstBadMatchIndex ?? index;
+            if (isRedirect(err)) {
+              throw err;
+            }
+            try {
+              route.options.onError?.(err);
+            } catch (errorHandlerErr) {
+              err = errorHandlerErr;
+              if (isRedirect(errorHandlerErr)) {
+                throw errorHandlerErr;
+              }
+            }
+            matches[index] = match = {
+              ...match,
+              error: err,
+              status: 'error',
+              updatedAt: Date.now(),
+              abortController: new AbortController()
+            };
+          };
+          try {
+            if (match.paramsError) {
+              handleErrorAndRedirect(match.paramsError, 'PARSE_PARAMS');
+            }
+            if (match.searchError) {
+              handleErrorAndRedirect(match.searchError, 'VALIDATE_SEARCH');
+            }
+            const parentContext = parentMatch?.context ?? this.options.context ?? {};
+            const beforeLoadContext = (await route.options.beforeLoad?.({
+              search: match.search,
+              abortController,
+              params: match.params,
+              preload: !!preload,
+              context: parentContext,
+              location: this.state.location,
+              // TOOD: just expose state and router, etc
+              navigate: opts => this.navigate({
+                ...opts,
+                from: match.pathname
+              }),
+              buildLocation: this.buildLocation,
+              cause: preload ? 'preload' : match.cause
+            })) ?? {};
+            if (isRedirect(beforeLoadContext)) {
+              throw beforeLoadContext;
+            }
+            const context = {
+              ...parentContext,
+              ...beforeLoadContext
+            };
+            matches[index] = match = {
+              ...match,
+              routeContext: replaceEqualDeep(match.routeContext, beforeLoadContext),
+              context: replaceEqualDeep(match.context, context),
+              abortController
+            };
+          } catch (err) {
+            handleErrorAndRedirect(err, 'BEFORE_LOAD');
+            break;
+          }
+        }
+      } catch (err) {
+        if (isRedirect(err)) {
+          if (!preload) this.navigate(err);
+          return matches;
+        }
+        throw err;
       }
-      const {
-        routeSearch,
-        search,
-        context,
-        routeContext
-      } = info;
+      const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
+      const matchPromises = [];
+      validResolvedMatches.forEach((match, index) => {
+        matchPromises.push(new Promise(async resolve => {
+          const parentMatchPromise = matchPromises[index - 1];
+          const route = this.looseRoutesById[match.routeId];
+          const handleErrorAndRedirect = err => {
+            if (isRedirect(err)) {
+              if (!preload) {
+                this.navigate(err);
+              }
+              return true;
+            }
+            return false;
+          };
+          let loadPromise;
+          matches[index] = match = {
+            ...match,
+            showPending: false
+          };
+          let didShowPending = false;
+          const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+          const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
+          const shouldPending = !preload && pendingMs && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
+          const loaderContext = {
+            params: match.params,
+            deps: match.loaderDeps,
+            preload: !!preload,
+            parentMatchPromise,
+            abortController: match.abortController,
+            context: match.context,
+            location: this.state.location,
+            navigate: opts => this.navigate({
+              ...opts,
+              from: match.pathname
+            }),
+            cause: preload ? 'preload' : match.cause
+          };
+          const fetch = async () => {
+            if (match.isFetching) {
+              loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
+            } else {
+              // If the user doesn't want the route to reload, just
+              // resolve with the existing loader data
+
+              if (match.fetchCount && match.status === 'success') {
+                resolve();
+              }
 
-      // If the match is invalid, errored or idle, trigger it to load
-      if (this.state.status === 'pending') {
-        return;
-      }
+              // Otherwise, load the route
+              matches[index] = match = {
+                ...match,
+                isFetching: true,
+                fetchCount: match.fetchCount + 1
+              };
+              const componentsPromise = Promise.all(componentTypes.map(async type => {
+                const component = route.options[type];
+                if (component?.preload) {
+                  await component.preload();
+                }
+              }));
+              const loaderPromise = route.options.loader?.(loaderContext);
+              loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
+            }
+            matches[index] = match = {
+              ...match,
+              loadPromise
+            };
+            updateMatch(match);
+            try {
+              const loaderData = await loadPromise;
+              if (latestPromise = checkLatest()) return await latestPromise;
+              if (isRedirect(loaderData)) {
+                if (handleErrorAndRedirect(loaderData)) return;
+              }
+              if (didShowPending && pendingMinMs) {
+                await new Promise(r => setTimeout(r, pendingMinMs));
+              }
+              if (latestPromise = checkLatest()) return await latestPromise;
+              matches[index] = match = {
+                ...match,
+                error: undefined,
+                status: 'success',
+                isFetching: false,
+                updatedAt: Date.now(),
+                loaderData,
+                loadPromise: undefined
+              };
+            } catch (error) {
+              if (latestPromise = checkLatest()) return await latestPromise;
+              if (handleErrorAndRedirect(error)) return;
+              try {
+                route.options.onError?.(error);
+              } catch (onErrorError) {
+                error = onErrorError;
+                if (handleErrorAndRedirect(onErrorError)) return;
+              }
+              matches[index] = match = {
+                ...match,
+                error,
+                status: 'error',
+                isFetching: false
+              };
+            }
+            updateMatch(match);
+          };
 
-      // TODO: Should load promises be tracked based on location?
-      this.__loadPromise = Promise.resolve().then(async () => {
-        const loadId = '' + Date.now() + Math.random();
-        this.#latestId = loadId;
-        const checkLatest = () => {
-          return loadId !== this.#latestId ? this.__loadPromise : undefined;
-        };
+          // This is where all of the stale-while-revalidate magic happens
+          const age = Date.now() - match.updatedAt;
+          let staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 30_000 // 30 seconds for preloads by default
+          : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
+
+          // Default to reloading the route all the time
+          let shouldReload;
+          const shouldReloadOption = route.options.shouldReload;
+
+          // Allow shouldReload to get the last say,
+          // if provided.
+          shouldReload = typeof shouldReloadOption === 'function' ? shouldReloadOption(loaderContext) : shouldReloadOption;
+          matches[index] = match = {
+            ...match,
+            preload: !!preload && !this.state.matches.find(d => d.id === match.id)
+          };
+          if (match.status !== 'success') {
+            // If we need to potentially show the pending component,
+            // start a timer to show it after the pendingMs
+            if (shouldPending) {
+              new Promise(r => setTimeout(r, pendingMs)).then(async () => {
+                if (latestPromise = checkLatest()) return latestPromise;
+                didShowPending = true;
+                matches[index] = match = {
+                  ...match,
+                  showPending: true
+                };
+                updateMatch(match);
+                resolve();
+              });
+            }
+
+            // Critical Fetching, we need to await
+            await fetch();
+          } else if (match.invalid || (shouldReload ?? age > staleAge)) {
+            // Background Fetching, no need to wait
+            fetch();
+          }
+          resolve();
+        }));
+      });
+      await Promise.all(matchPromises);
+      return matches;
+    };
+    invalidate = () => {
+      const invalidate = d => ({
+        ...d,
+        invalid: true
+      });
+      this.__store.setState(s => ({
+        ...s,
+        matches: s.matches.map(invalidate),
+        cachedMatches: s.cachedMatches.map(invalidate),
+        pendingMatches: s.pendingMatches?.map(invalidate)
+      }));
+      this.load();
+    };
+    load = async () => {
+      const promise = new Promise(async (resolve, reject) => {
+        const next = this.latestLocation;
+        const prevLocation = this.state.resolvedLocation;
+        const pathDidChange = prevLocation.href !== next.href;
         let latestPromise;
 
-        // If the match was in an error state, set it
-        // to a loading state again. Otherwise, keep it
-        // as loading or resolved
-        if (this.state.status === 'idle') {
+        // Cancel any pending matches
+        this.cancelMatches();
+        this.emit({
+          type: 'onBeforeLoad',
+          fromLocation: prevLocation,
+          toLocation: next,
+          pathChanged: pathDidChange
+        });
+        let pendingMatches;
+        const previousMatches = this.state.matches;
+        this.__store.batch(() => {
+          this.cleanCache();
+
+          // Match the routes
+          pendingMatches = this.matchRoutes(next.pathname, next.search, {
+            debug: true
+          });
+
+          // Ingest the new matches
+          // If a cached moved to pendingMatches, remove it from cachedMatches
           this.__store.setState(s => ({
             ...s,
-            status: 'pending'
-          }));
-        }
-        const componentsPromise = (async () => {
-          // then run all component and data loaders in parallel
-          // For each component type, potentially load it asynchronously
-
-          await Promise.all(componentTypes.map(async type => {
-            const component = this.route.options[type];
-            if (this[type]?.preload) {
-              this[type] = await this.router.options.loadComponent(component);
-            }
+            isLoading: true,
+            location: next,
+            pendingMatches,
+            cachedMatches: s.cachedMatches.filter(d => {
+              return !pendingMatches.find(e => e.id === d.id);
+            })
           }));
-        })();
-        const dataPromise = Promise.resolve().then(() => {
-          if (this.route.options.onLoad) {
-            return this.route.options.onLoad({
-              params: this.params,
-              routeSearch,
-              search,
-              signal: this.abortController.signal,
-              preload: !!opts?.preload,
-              routeContext: routeContext,
-              context: context
-            });
-          }
-          return;
         });
         try {
-          await Promise.all([componentsPromise, dataPromise]);
-          if (latestPromise = checkLatest()) return await latestPromise;
-          this.__store.setState(s => ({
-            ...s,
-            error: undefined,
-            status: 'success',
-            updatedAt: Date.now()
-          }));
-        } catch (err) {
-          if (isRedirect(err)) {
-            if (!opts?.preload) {
-              this.router.navigate(err);
-            }
-            return;
-          }
-          const errorHandler = this.route.options.onLoadError ?? this.route.options.onError;
           try {
-            errorHandler?.(err);
-          } catch (errorHandlerErr) {
-            if (isRedirect(errorHandlerErr)) {
-              if (!opts?.preload) {
-                this.router.navigate(errorHandlerErr);
-              }
-              return;
-            }
+            // Load the matches
+            await this.loadMatches({
+              matches: pendingMatches,
+              checkLatest: () => this.checkLatest(promise)
+            });
+          } catch (err) {
+            // swallow this error, since we'll display the
+            // errors on the route components
+          }
+
+          // Only apply the latest transition
+          if (latestPromise = this.checkLatest(promise)) {
+            return latestPromise;
+          }
+          const exitingMatches = previousMatches.filter(match => !pendingMatches.find(d => d.id === match.id));
+          const enteringMatches = pendingMatches.filter(match => !previousMatches.find(d => d.id === match.id));
+          const stayingMatches = previousMatches.filter(match => pendingMatches.find(d => d.id === match.id));
+
+          // Commit the pending matches. If a previous match was
+          // removed, place it in the cachedMatches
+          this.__store.batch(() => {
             this.__store.setState(s => ({
               ...s,
-              error: errorHandlerErr,
-              status: 'error',
-              updatedAt: Date.now()
+              isLoading: false,
+              matches: s.pendingMatches,
+              pendingMatches: undefined,
+              cachedMatches: [...s.cachedMatches, ...exitingMatches.filter(d => d.status !== 'error')]
             }));
-            return;
+            this.cleanCache();
+          })
+
+          //
+          ;
+          [[exitingMatches, 'onLeave'], [enteringMatches, 'onEnter'], [stayingMatches, 'onStay']].forEach(([matches, hook]) => {
+            matches.forEach(match => {
+              this.looseRoutesById[match.routeId].options[hook]?.(match);
+            });
+          });
+          this.emit({
+            type: 'onLoad',
+            fromLocation: prevLocation,
+            toLocation: next,
+            pathChanged: pathDidChange
+          });
+          resolve();
+        } catch (err) {
+          // Only apply the latest transition
+          if (latestPromise = this.checkLatest(promise)) {
+            return latestPromise;
           }
-          this.__store.setState(s => ({
-            ...s,
-            error: err,
-            status: 'error',
-            updatedAt: Date.now()
-          }));
-        } finally {
-          delete this.__loadPromise;
+          reject(err);
         }
       });
-      return this.__loadPromise;
+      this.latestLoadPromise = promise;
+      return this.latestLoadPromise;
     };
-    #latestId = '';
-  }
-
-  /**
-   * react-store
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
-
-  function useStore(store, selector = d => d, compareShallow) {
-    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, compareShallow ? shallow : undefined);
-    return slice;
-  }
-
-  //
+    cleanCache = () => {
+      // This is where all of the garbage collection magic happens
+      this.__store.setState(s => {
+        return {
+          ...s,
+          cachedMatches: s.cachedMatches.filter(d => {
+            const route = this.looseRoutesById[d.routeId];
+            if (!route.options.loader) {
+              return false;
+            }
 
-  function lazy(importer) {
-    const lazyComp = /*#__PURE__*/React__namespace.lazy(importer);
-    const finalComp = lazyComp;
-    finalComp.preload = async () => {
-      {
-        await importer();
-      }
+            // If the route was preloaded, use the preloadGcTime
+            // otherwise, use the gcTime
+            const gcTime = (d.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 5 * 60 * 1000;
+            return d.status !== 'error' && Date.now() - d.updatedAt < gcTime;
+          })
+        };
+      });
     };
-    return finalComp;
-  }
-  //
-
-  function useLinkProps(options) {
-    const router = useRouterContext();
-    const {
-      // custom props
-      type,
-      children,
-      target,
-      activeProps = () => ({
-        className: 'active'
-      }),
-      inactiveProps = () => ({}),
-      activeOptions,
-      disabled,
-      // fromCurrent,
-      hash,
-      search,
-      params,
-      to = '.',
-      preload,
-      preloadDelay,
-      replace,
-      // element props
-      style,
-      className,
-      onClick,
-      onFocus,
-      onMouseEnter,
-      onMouseLeave,
-      onTouchStart,
-      ...rest
-    } = options;
-    const linkInfo = router.buildLink(options);
-    if (linkInfo.type === 'external') {
-      const {
-        href
-      } = linkInfo;
-      return {
-        href
+    preloadRoute = async (navigateOpts = this.state.location) => {
+      let next = this.buildLocation(navigateOpts);
+      let matches = this.matchRoutes(next.pathname, next.search, {
+        throwOnError: true
+      });
+      const loadedMatchIds = Object.fromEntries([...this.state.matches, ...(this.state.pendingMatches ?? []), ...this.state.cachedMatches]?.map(d => [d.id, true]));
+      this.__store.batch(() => {
+        matches.forEach(match => {
+          if (!loadedMatchIds[match.id]) {
+            this.__store.setState(s => ({
+              ...s,
+              cachedMatches: [...s.cachedMatches, match]
+            }));
+          }
+        });
+      });
+      matches = await this.loadMatches({
+        matches,
+        preload: true,
+        checkLatest: () => undefined
+      });
+      return matches;
+    };
+    matchRoute = (location, opts) => {
+      location = {
+        ...location,
+        to: location.to ? this.resolvePathWithBase(location.from || '', location.to) : undefined
       };
-    }
-    const {
-      handleClick,
-      handleFocus,
-      handleEnter,
-      handleLeave,
-      handleTouchStart,
-      isActive,
-      next
-    } = linkInfo;
-    const reactHandleClick = e => {
-      if (React__namespace.startTransition) {
-        // This is a hack for react < 18
-        React__namespace.startTransition(() => {
-          handleClick(e);
+      const next = this.buildLocation(location);
+      if (opts?.pending && this.state.status !== 'pending') {
+        return false;
+      }
+      const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
+      if (!baseLocation) {
+        return false;
+      }
+      const match = matchPathname(this.basepath, baseLocation.pathname, {
+        ...opts,
+        to: next.pathname
+      });
+      if (!match) {
+        return false;
+      }
+      if (match && (opts?.includeSearch ?? true)) {
+        return deepEqual(baseLocation.search, next.search, true) ? match : false;
+      }
+      return match;
+    };
+    injectHtml = async html => {
+      this.injectedHtml.push(html);
+    };
+    dehydrateData = (key, getData) => {
+      if (typeof document === 'undefined') {
+        const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+        this.injectHtml(async () => {
+          const id = `__TSR_DEHYDRATED__${strKey}`;
+          const data = typeof getData === 'function' ? await getData() : getData;
+          return `<script id='${id}' suppressHydrationWarning>window["__TSR_DEHYDRATED__${escapeJSON(strKey)}"] = ${JSON.stringify(data)}
+          ;(() => {
+            var el = document.getElementById('${id}')
+            el.parentElement.removeChild(el)
+          })()
+          </script>`;
         });
-      } else {
-        handleClick(e);
+        return () => this.hydrateData(key);
       }
+      return () => undefined;
     };
-    const composeHandlers = handlers => e => {
-      if (e.persist) e.persist();
-      handlers.filter(Boolean).forEach(handler => {
-        if (e.defaultPrevented) return;
-        handler(e);
+    hydrateData = key => {
+      if (typeof document !== 'undefined') {
+        const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+        return window[`__TSR_DEHYDRATED__${strKey}`];
+      }
+      return undefined;
+    };
+    dehydrate = () => {
+      return {
+        state: {
+          dehydratedMatches: this.state.matches.map(d => pick(d, ['id', 'status', 'updatedAt', 'loaderData']))
+        }
+      };
+    };
+    hydrate = async __do_not_use_server_ctx => {
+      let _ctx = __do_not_use_server_ctx;
+      // Client hydrates from window
+      if (typeof document !== 'undefined') {
+        _ctx = window.__TSR_DEHYDRATED__;
+      }
+      invariant(_ctx, 'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?');
+      const ctx = _ctx;
+      this.dehydratedData = ctx.payload;
+      this.options.hydrate?.(ctx.payload);
+      const dehydratedState = ctx.router.state;
+      let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
+        const dehydratedMatch = dehydratedState.dehydratedMatches.find(d => d.id === match.id);
+        invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
+        if (dehydratedMatch) {
+          return {
+            ...match,
+            ...dehydratedMatch
+          };
+        }
+        return match;
+      });
+      this.__store.setState(s => {
+        return {
+          ...s,
+          matches: matches
+        };
       });
     };
 
-    // Get the active props
-    const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
+    // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+    //   state.matches
+    //     .find((d) => d.id === matchId)
+    //     ?.__promisesByKey[key]?.resolve(value)
+    // }
+  }
 
-    // Get the inactive props
-    const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
+  // A function that takes an import() argument which is a function and returns a new function that will
+  // proxy arguments from the caller to the imported function, retaining all type
+  // information along the way
+  function lazyFn(fn, key) {
+    return async (...args) => {
+      const imported = await fn();
+      return imported[key || 'default'](...args);
+    };
+  }
+  class SearchParamError extends Error {}
+  class PathParamError extends Error {}
+  function getInitialRouterState(location) {
     return {
-      ...resolvedActiveProps,
-      ...resolvedInactiveProps,
-      ...rest,
-      href: disabled ? undefined : next.href,
-      onClick: composeHandlers([onClick, reactHandleClick]),
-      onFocus: composeHandlers([onFocus, handleFocus]),
-      onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
-      onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
-      onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
-      target,
-      style: {
-        ...style,
-        ...resolvedActiveProps.style,
-        ...resolvedInactiveProps.style
+      isLoading: false,
+      isTransitioning: false,
+      status: 'idle',
+      resolvedLocation: {
+        ...location
       },
-      className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
-      ...(disabled ? {
-        role: 'link',
-        'aria-disabled': true
-      } : undefined),
-      ['data-status']: isActive ? 'active' : undefined
+      location,
+      matches: [],
+      pendingMatches: [],
+      cachedMatches: [],
+      lastUpdated: Date.now()
     };
   }
-  const Link = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
-    const linkProps = useLinkProps(props);
-    return /*#__PURE__*/React__namespace.createElement("a", _extends({
-      ref: ref
-    }, linkProps, {
-      children: typeof props.children === 'function' ? props.children({
-        isActive: linkProps['data-status'] === 'active'
-      }) : props.children
-    }));
-  });
-  function Navigate(props) {
-    const router = useRouterContext();
-    React__namespace.useLayoutEffect(() => {
-      router.navigate(props);
-    }, []);
-    return null;
-  }
-  const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
-  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  class ReactRouter extends Router {
-    constructor(opts) {
-      super({
-        ...opts,
-        loadComponent: async component => {
-          if (component.preload) {
-            await component.preload();
+
+  const useLayoutEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+  const windowKey = 'window';
+  const delimiter = '___';
+  let weakScrolledElements = new WeakSet();
+  const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
+  let cache = sessionsStorage ? (() => {
+    const storageKey = 'tsr-scroll-restoration-v2';
+    const state = JSON.parse(window.sessionStorage.getItem(storageKey) || 'null') || {
+      cached: {},
+      next: {}
+    };
+    return {
+      state,
+      set: updater => {
+        cache.state = functionalUpdate(updater, cache.state);
+        window.sessionStorage.setItem(storageKey, JSON.stringify(cache.state));
+      }
+    };
+  })() : undefined;
+  const defaultGetKey = location => location.state.key;
+  function useScrollRestoration(options) {
+    const router = useRouter();
+    useLayoutEffect(() => {
+      const getKey = options?.getKey || defaultGetKey;
+      const {
+        history
+      } = window;
+      if (history.scrollRestoration) {
+        history.scrollRestoration = 'manual';
+      }
+      const onScroll = event => {
+        if (weakScrolledElements.has(event.target)) return;
+        weakScrolledElements.add(event.target);
+        let elementSelector = '';
+        if (event.target === document || event.target === window) {
+          elementSelector = windowKey;
+        } else {
+          const attrId = event.target.getAttribute('data-scroll-restoration-id');
+          if (attrId) {
+            elementSelector = `[data-scroll-restoration-id="${attrId}"]`;
+          } else {
+            elementSelector = getCssSelector(event.target);
           }
-          return component;
         }
-      });
-    }
-  }
-  function RouterProvider({
-    router,
-    ...rest
-  }) {
-    router.update(rest);
-    const currentMatches = useStore(router.__store, s => s.currentMatches);
-    React__namespace.useEffect(router.mount, [router]);
-    return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
-      value: {
-        router: router
-      }
-    }, /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
-      value: [undefined, ...currentMatches]
-    }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-      errorComponent: ErrorComponent,
-      onCatch: () => {
-        warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+        if (!cache.state.next[elementSelector]) {
+          cache.set(c => ({
+            ...c,
+            next: {
+              ...c.next,
+              [elementSelector]: {
+                scrollX: NaN,
+                scrollY: NaN
+              }
+            }
+          }));
+        }
+      };
+      if (typeof document !== 'undefined') {
+        document.addEventListener('scroll', onScroll, true);
       }
-    }, /*#__PURE__*/React__namespace.createElement(Outlet, null))));
-  }
-  function useRouterContext() {
-    const value = React__namespace.useContext(routerContext);
-    warning(value, 'useRouter must be used inside a <Router> component!');
-    useStore(value.router.__store);
-    return value.router;
-  }
-  function useRouter(track, shallow) {
-    const router = useRouterContext();
-    useStore(router.__store, track, shallow);
-    return router;
-  }
-  function useMatches() {
-    return React__namespace.useContext(matchesContext);
-  }
-  function useMatch(opts) {
-    const router = useRouterContext();
-    const nearestMatch = useMatches()[0];
-    const match = opts?.from ? router.state.currentMatches.find(d => d.route.id === opts?.from) : nearestMatch;
-    invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
-    if (opts?.strict ?? true) {
-      invariant(nearestMatch.route.id == match?.route.id, `useMatch("${match?.route.id}") is being called in a component that is meant to render the '${nearestMatch.route.id}' route. Did you mean to 'useMatch("${match?.route.id}", { strict: false })' or 'useRoute("${match?.route.id}")' instead?`);
-    }
-    useStore(match.__store, d => opts?.track?.(match) ?? match, opts?.shallow);
-    return match;
-  }
-  function useRoute(routeId) {
-    const router = useRouterContext();
-    const resolvedRoute = router.getRoute(routeId);
-    invariant(resolvedRoute, `Could not find a route for route "${routeId}"! Did you forget to add it to your route?`);
-    return resolvedRoute;
-  }
-  function useSearch(opts) {
-    const {
-      track,
-      ...matchOpts
-    } = opts;
-    const match = useMatch(matchOpts);
-    useStore(match.__store, d => opts?.track?.(d.search) ?? d.search, true);
-    return match.state.search;
-  }
-  function useParams(opts) {
-    const router = useRouterContext();
-    useStore(router.__store, d => {
-      const params = last(d.currentMatches)?.params;
-      return opts?.track?.(params) ?? params;
-    }, true);
-    return last(router.state.currentMatches)?.params;
-  }
-  function useNavigate(defaultOpts) {
-    const router = useRouterContext();
-    return React__namespace.useCallback(opts => {
-      return router.navigate({
-        ...defaultOpts,
-        ...opts
+      const unsubOnBeforeLoad = router.subscribe('onBeforeLoad', event => {
+        if (event.pathChanged) {
+          const restoreKey = getKey(event.fromLocation);
+          for (const elementSelector in cache.state.next) {
+            const entry = cache.state.next[elementSelector];
+            if (elementSelector === windowKey) {
+              entry.scrollX = window.scrollX || 0;
+              entry.scrollY = window.scrollY || 0;
+            } else if (elementSelector) {
+              const element = document.querySelector(elementSelector);
+              entry.scrollX = element?.scrollLeft || 0;
+              entry.scrollY = element?.scrollTop || 0;
+            }
+            cache.set(c => {
+              const next = {
+                ...c.next
+              };
+              delete next[elementSelector];
+              return {
+                ...c,
+                next,
+                cached: {
+                  ...c.cached,
+                  [[restoreKey, elementSelector].join(delimiter)]: entry
+                }
+              };
+            });
+          }
+        }
       });
-    }, []);
-  }
-  function useMatchRoute() {
-    const router = useRouterContext();
-    return React__namespace.useCallback(opts => {
-      const {
-        pending,
-        caseSensitive,
-        ...rest
-      } = opts;
-      return router.matchRoute(rest, {
-        pending,
-        caseSensitive
+      const unsubOnResolved = router.subscribe('onResolved', event => {
+        if (event.pathChanged) {
+          if (!router.resetNextScroll) {
+            return;
+          }
+          router.resetNextScroll = true;
+          const getKey = options?.getKey || defaultGetKey;
+          const restoreKey = getKey(event.toLocation);
+          let windowRestored = false;
+          for (const cacheKey in cache.state.cached) {
+            const entry = cache.state.cached[cacheKey];
+            const [key, elementSelector] = cacheKey.split(delimiter);
+            if (key === restoreKey) {
+              if (elementSelector === windowKey) {
+                windowRestored = true;
+                window.scrollTo(entry.scrollX, entry.scrollY);
+              } else if (elementSelector) {
+                const element = document.querySelector(elementSelector);
+                if (element) {
+                  element.scrollLeft = entry.scrollX;
+                  element.scrollTop = entry.scrollY;
+                }
+              }
+            }
+          }
+          if (!windowRestored) {
+            window.scrollTo(0, 0);
+          }
+          cache.set(c => ({
+            ...c,
+            next: {}
+          }));
+          weakScrolledElements = new WeakSet();
+        }
       });
+      return () => {
+        document.removeEventListener('scroll', onScroll);
+        unsubOnBeforeLoad();
+        unsubOnResolved();
+      };
     }, []);
   }
-  function MatchRoute(props) {
-    const matchRoute = useMatchRoute();
-    const params = matchRoute(props);
-    if (!params) {
-      return null;
-    }
-    if (typeof props.children === 'function') {
-      return props.children(params);
-    }
-    return params ? props.children : null;
-  }
-  function Outlet() {
-    const matches = useMatches().slice(1);
-    const match = matches[0];
-    if (!match) {
-      return null;
-    }
-    return /*#__PURE__*/React__namespace.createElement(SubOutlet, {
-      matches: matches,
-      match: match
-    });
+  function ScrollRestoration(props) {
+    useScrollRestoration(props);
+    return null;
   }
-  function SubOutlet({
-    matches,
-    match
-  }) {
-    const router = useRouterContext();
-    useStore(match.__store, store => [store.status, store.error], true);
-    const defaultPending = React__namespace.useCallback(() => null, []);
-    const PendingComponent = match.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
-    const errorComponent = match.errorComponent ?? router.options.defaultErrorComponent;
-    const ResolvedSuspenseBoundary = match.route.options.wrapInSuspense ?? true ? React__namespace.Suspense : SafeFragment;
-    const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
-    return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, {
-      value: matches
-    }, /*#__PURE__*/React__namespace.createElement(ResolvedSuspenseBoundary, {
-      fallback: /*#__PURE__*/React__namespace.createElement(PendingComponent, null)
-    }, /*#__PURE__*/React__namespace.createElement(ResolvedCatchBoundary, {
-      key: match.route.id,
-      errorComponent: errorComponent,
-      onCatch: () => {
-        warning(false, `Error in route match: ${match.id}`);
+  function useElementScrollRestoration(options) {
+    const router = useRouter();
+    const getKey = options?.getKey || defaultGetKey;
+    let elementSelector = '';
+    if (options.id) {
+      elementSelector = `[data-scroll-restoration-id="${options.id}"]`;
+    } else {
+      const element = options.getElement?.();
+      if (!element) {
+        return;
       }
-    }, /*#__PURE__*/React__namespace.createElement(Inner, {
-      match: match
-    }))));
-  }
-  function Inner(props) {
-    const router = useRouterContext();
-    if (props.match.state.status === 'error') {
-      throw props.match.state.error;
-    }
-    if (props.match.state.status === 'success') {
-      return /*#__PURE__*/React__namespace.createElement(props.match.component ?? router.options.defaultComponent ?? Outlet);
+      elementSelector = getCssSelector(element);
     }
-    if (props.match.state.status === 'pending') {
-      throw props.match.__loadPromise;
+    const restoreKey = getKey(router.latestLocation);
+    const cacheKey = [restoreKey, elementSelector].join(delimiter);
+    return cache.state.cached[cacheKey];
+  }
+  function getCssSelector(el) {
+    let path = [],
+      parent;
+    while (parent = el.parentNode) {
+      path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
+      el = parent;
     }
-    invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
-  }
-  function SafeFragment(props) {
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children);
+    return `${path.join(' > ')}`.toLowerCase();
   }
 
-  // This is the messiest thing ever... I'm either seriously tired (likely) or
-  // there has to be a better way to reset error boundaries when the
-  // router's location key changes.
-
-  class CatchBoundary extends React__namespace.Component {
-    state = {
-      error: false,
-      info: undefined
-    };
-    componentDidCatch(error, info) {
-      this.props.onCatch(error, info);
-      console.error(error);
-      this.setState({
-        error,
-        info
-      });
-    }
-    render() {
-      return /*#__PURE__*/React__namespace.createElement(CatchBoundaryInner, _extends({}, this.props, {
-        errorState: this.state,
-        reset: () => this.setState({})
-      }));
-    }
-  }
-  function CatchBoundaryInner(props) {
-    const [activeErrorState, setActiveErrorState] = React__namespace.useState(props.errorState);
-    const router = useRouterContext();
-    const errorComponent = props.errorComponent ?? ErrorComponent;
-    const prevKeyRef = React__namespace.useRef('');
-    React__namespace.useEffect(() => {
-      if (activeErrorState) {
-        if (router.state.currentLocation.key !== prevKeyRef.current) {
-          setActiveErrorState({});
-        }
-      }
-      prevKeyRef.current = router.state.currentLocation.key;
-    }, [activeErrorState, router.state.currentLocation.key]);
-    React__namespace.useEffect(() => {
-      if (props.errorState.error) {
-        setActiveErrorState(props.errorState);
-      }
-      // props.reset()
-    }, [props.errorState.error]);
-    if (props.errorState.error && activeErrorState.error) {
-      return /*#__PURE__*/React__namespace.createElement(errorComponent, activeErrorState);
-    }
-    return props.children;
-  }
-  function ErrorComponent({
-    error
-  }) {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        padding: '.5rem',
-        maxWidth: '100%'
-      }
-    }, /*#__PURE__*/React__namespace.createElement("strong", {
-      style: {
-        fontSize: '1.2rem'
-      }
-    }, "Something went wrong!"), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        height: '.5rem'
-      }
-    }), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("pre", {
-      style: {
-        fontSize: '.7em',
-        border: '1px solid red',
-        borderRadius: '.25rem',
-        padding: '.5rem',
-        color: 'red',
-        overflow: 'auto'
-      }
-    }, error.message ? /*#__PURE__*/React__namespace.createElement("code", null, error.message) : null)));
-  }
-  function useBlocker(message, condition = true) {
-    const router = useRouter();
+  function useBlocker(blockerFn, condition = true) {
+    const {
+      history
+    } = useRouter();
     React__namespace.useEffect(() => {
       if (!condition) return;
-      let unblock = router.history.block((retry, cancel) => {
-        if (window.confirm(message)) {
-          unblock();
-          retry();
-        } else {
-          cancel();
-        }
-      });
-      return unblock;
+      return history.block(blockerFn);
     });
   }
   function Block({
-    message,
+    blocker,
     condition,
     children
   }) {
-    useBlocker(message, condition);
+    useBlocker(blocker, condition);
     return children ?? null;
   }
 
+  function useNavigate(defaultOpts) {
+    const {
+      navigate
+    } = useRouter();
+    const matchPathname = useMatch({
+      strict: false,
+      select: s => s.pathname
+    });
+    return React__namespace.useCallback(opts => {
+      return navigate({
+        from: opts?.to ? matchPathname : undefined,
+        ...defaultOpts,
+        ...opts
+      });
+    }, []);
+  }
+
+  // NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it
+  // export function typedNavigate<
+  //   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+  //   TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+  // >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {
+  //   return navigate as <
+  //     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,
+  //     TTo extends string = '',
+  //     TMaskFrom extends RoutePaths<TRouteTree> = '/',
+  //     TMaskTo extends string = '',
+  //   >(
+  //     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+  //   ) => Promise<void>
+  // } //
+
+  function Navigate(props) {
+    const {
+      navigate
+    } = useRouter();
+    const match = useMatch({
+      strict: false
+    });
+    React__namespace.useEffect(() => {
+      navigate({
+        from: props.to ? match.pathname : undefined,
+        ...props
+      });
+    }, []);
+    return null;
+  }
+
+  exports.Await = Await;
   exports.Block = Block;
+  exports.CatchBoundary = CatchBoundary;
+  exports.CatchBoundaryImpl = CatchBoundaryImpl;
   exports.ErrorComponent = ErrorComponent;
+  exports.FileRoute = FileRoute;
   exports.Link = Link;
+  exports.Match = Match;
   exports.MatchRoute = MatchRoute;
+  exports.Matches = Matches;
   exports.Navigate = Navigate;
+  exports.NotFoundRoute = NotFoundRoute;
   exports.Outlet = Outlet;
-  exports.ReactRouter = ReactRouter;
+  exports.PathParamError = PathParamError;
   exports.RootRoute = RootRoute;
   exports.Route = Route;
-  exports.RouteMatch = RouteMatch;
+  exports.RouteApi = RouteApi;
   exports.Router = Router;
   exports.RouterProvider = RouterProvider;
+  exports.ScrollRestoration = ScrollRestoration;
+  exports.SearchParamError = SearchParamError;
   exports.cleanPath = cleanPath;
+  exports.componentTypes = componentTypes;
   exports.createBrowserHistory = createBrowserHistory;
   exports.createHashHistory = createHashHistory;
+  exports.createHistory = createHistory;
   exports.createMemoryHistory = createMemoryHistory;
+  exports.createRouteMask = createRouteMask;
   exports.decode = decode;
-  exports.defaultFetchServerDataFn = defaultFetchServerDataFn;
+  exports.deepEqual = deepEqual;
   exports.defaultParseSearch = defaultParseSearch;
   exports.defaultStringifySearch = defaultStringifySearch;
+  exports.defer = defer;
   exports.encode = encode;
+  exports.escapeJSON = escapeJSON;
   exports.functionalUpdate = functionalUpdate;
+  exports.getInitialRouterState = getInitialRouterState;
+  exports.getRouteMatch = getRouteMatch;
   exports.interpolatePath = interpolatePath;
   exports.invariant = invariant;
+  exports.isDehydratedDeferred = isDehydratedDeferred;
   exports.isPlainObject = isPlainObject;
   exports.isRedirect = isRedirect;
+  exports.isServer = isServer;
   exports.joinPaths = joinPaths;
   exports.last = last;
-  exports.lazy = lazy;
+  exports.lazyFn = lazyFn;
+  exports.lazyRouteComponent = lazyRouteComponent;
   exports.matchByPath = matchByPath;
+  exports.matchContext = matchContext;
   exports.matchPathname = matchPathname;
-  exports.matchesContext = matchesContext;
   exports.parsePathname = parsePathname;
   exports.parseSearchWith = parseSearchWith;
-  exports.partialDeepEqual = partialDeepEqual;
   exports.pick = pick;
   exports.redirect = redirect;
+  exports.removeBasepath = removeBasepath;
   exports.replaceEqualDeep = replaceEqualDeep;
   exports.resolvePath = resolvePath;
   exports.rootRouteId = rootRouteId;
-  exports.routerContext = routerContext;
+  exports.rootRouteWithContext = rootRouteWithContext;
+  exports.shallow = shallow;
   exports.stringifySearchWith = stringifySearchWith;
   exports.trimPath = trimPath;
   exports.trimPathLeft = trimPathLeft;
   exports.trimPathRight = trimPathRight;
+  exports.useAwaited = useAwaited;
   exports.useBlocker = useBlocker;
+  exports.useElementScrollRestoration = useElementScrollRestoration;
+  exports.useLayoutEffect = useLayoutEffect$1;
   exports.useLinkProps = useLinkProps;
+  exports.useLoaderData = useLoaderData;
+  exports.useLoaderDeps = useLoaderDeps;
   exports.useMatch = useMatch;
   exports.useMatchRoute = useMatchRoute;
   exports.useMatches = useMatches;
   exports.useNavigate = useNavigate;
   exports.useParams = useParams;
-  exports.useRoute = useRoute;
+  exports.useParentMatches = useParentMatches;
+  exports.useRouteContext = useRouteContext;
   exports.useRouter = useRouter;
-  exports.useRouterContext = useRouterContext;
+  exports.useRouterState = useRouterState;
+  exports.useScrollRestoration = useScrollRestoration;
   exports.useSearch = useSearch;
-  exports.useStore = useStore;
+  exports.useStableCallback = useStableCallback;
   exports.warning = warning;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=index.development.js.map