@tanstack/react-router 0.0.1-beta.23 → 0.0.1-beta.230

package/build/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * react-router
+ * @tanstack/react-router/src/index.tsx
  *
  * Copyright (c) TanStack
  *
@@ -8,972 +8,290 @@
  *
  * @license MIT
  */
+import { createBrowserHistory } from '@tanstack/history';
+export * from '@tanstack/history';
+import invariant from 'tiny-invariant';
+export { default as invariant } from 'tiny-invariant';
+import warning from 'tiny-warning';
+export { default as warning } from 'tiny-warning';
 import * as React from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
-function _extends$2() {
-  _extends$2 = 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];
-        }
+function CatchBoundary(props) {
+  const errorComponent = props.errorComponent ?? ErrorComponent;
+  return /*#__PURE__*/React.createElement(CatchBoundaryImpl, {
+    resetKey: props.resetKey,
+    onCatch: props.onCatch,
+    children: ({
+      error
+    }) => {
+      if (error) {
+        return /*#__PURE__*/React.createElement(errorComponent, {
+          error
+        });
       }
+      return props.children;
     }
-
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
+  });
 }
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+class CatchBoundaryImpl extends React.Component {
+  state = {
+    error: null
+  };
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
   }
-
-  return target;
-}
-
-/**
- * router-core
- *
- * 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 _extends$1() {
-  _extends$1 = 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];
-        }
-      }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.error && prevProps.resetKey !== this.props.resetKey) {
+      this.setState({
+        error: null
+      });
     }
-
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-
-/**
- * Actions represent the type of change to a location value.
- *
- * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#action
- */
-var Action;
-
-(function (Action) {
-  /**
-   * A POP indicates a change to an arbitrary index in the history stack, such
-   * as a back or forward navigation. It does not describe the direction of the
-   * navigation, only that the current index changed.
-   *
-   * Note: This is the default action for newly created history objects.
-   */
-  Action["Pop"] = "POP";
-  /**
-   * A PUSH indicates a new entry being added to the history stack, such as when
-   * a link is clicked and a new page loads. When this happens, all subsequent
-   * entries in the stack are lost.
-   */
-
-  Action["Push"] = "PUSH";
-  /**
-   * A REPLACE indicates the entry at the current index in the history stack
-   * being replaced by a new one.
-   */
-
-  Action["Replace"] = "REPLACE";
-})(Action || (Action = {}));
-
-var readOnly = process.env.NODE_ENV !== "production" ? function (obj) {
-  return Object.freeze(obj);
-} : function (obj) {
-  return obj;
-};
-
-function warning$1(cond, message) {
-  if (!cond) {
-    // eslint-disable-next-line no-console
-    if (typeof console !== 'undefined') console.warn(message);
-
-    try {
-      // Welcome to debugging history!
-      //
-      // This error is thrown as a convenience so you can more easily
-      // find the source for a warning that appears in the console by
-      // enabling "pause on exceptions" in your JavaScript debugger.
-      throw new Error(message); // eslint-disable-next-line no-empty
-    } catch (e) {}
   }
-}
-
-var BeforeUnloadEventType = 'beforeunload';
-var HashChangeEventType = 'hashchange';
-var PopStateEventType = 'popstate';
-/**
- * Browser history stores the location in regular URLs. This is the standard for
- * most web apps, but it requires some configuration on the server to ensure you
- * serve the same app at multiple URLs.
- *
- * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory
- */
-
-function createBrowserHistory(options) {
-  if (options === void 0) {
-    options = {};
+  componentDidCatch(error) {
+    console.error(error);
+    this.props.onCatch?.(error);
   }
-
-  var _options = options,
-      _options$window = _options.window,
-      window = _options$window === void 0 ? document.defaultView : _options$window;
-  var globalHistory = window.history;
-
-  function getIndexAndLocation() {
-    var _window$location = window.location,
-        pathname = _window$location.pathname,
-        search = _window$location.search,
-        hash = _window$location.hash;
-    var state = globalHistory.state || {};
-    return [state.idx, readOnly({
-      pathname: pathname,
-      search: search,
-      hash: hash,
-      state: state.usr || null,
-      key: state.key || 'default'
-    })];
+  render() {
+    return this.props.children(this.state);
   }
-
-  var blockedPopTx = null;
-
-  function handlePop() {
-    if (blockedPopTx) {
-      blockers.call(blockedPopTx);
-      blockedPopTx = null;
-    } else {
-      var nextAction = Action.Pop;
-
-      var _getIndexAndLocation = getIndexAndLocation(),
-          nextIndex = _getIndexAndLocation[0],
-          nextLocation = _getIndexAndLocation[1];
-
-      if (blockers.length) {
-        if (nextIndex != null) {
-          var delta = index - nextIndex;
-
-          if (delta) {
-            // Revert the POP
-            blockedPopTx = {
-              action: nextAction,
-              location: nextLocation,
-              retry: function retry() {
-                go(delta * -1);
-              }
-            };
-            go(delta);
-          }
-        } else {
-          // Trying to POP to a location with no index. We did not create
-          // this location, so we can't effectively block the navigation.
-          process.env.NODE_ENV !== "production" ? warning$1(false, // TODO: Write up a doc that explains our blocking strategy in
-          // detail and link to it here so people can understand better what
-          // is going on and how to avoid it.
-          "You are trying to block a POP navigation to a location that was not " + "created by the history library. The block will fail silently in " + "production, but in general you should do all navigation with the " + "history library (instead of using window.history.pushState directly) " + "to avoid this situation.") : void 0;
-        }
-      } else {
-        applyTx(nextAction);
-      }
+}
+function ErrorComponent({
+  error
+}) {
+  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production');
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '.5rem',
+      maxWidth: '100%'
     }
-  }
-
-  window.addEventListener(PopStateEventType, handlePop);
-  var action = Action.Pop;
-
-  var _getIndexAndLocation2 = getIndexAndLocation(),
-      index = _getIndexAndLocation2[0],
-      location = _getIndexAndLocation2[1];
-
-  var listeners = createEvents();
-  var blockers = createEvents();
-
-  if (index == null) {
-    index = 0;
-    globalHistory.replaceState(_extends$1({}, globalHistory.state, {
-      idx: index
-    }), '');
-  }
-
-  function createHref(to) {
-    return typeof to === 'string' ? to : createPath(to);
-  } // state defaults to `null` because `window.history.state` does
-
-
-  function getNextLocation(to, state) {
-    if (state === void 0) {
-      state = null;
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
     }
-
-    return readOnly(_extends$1({
-      pathname: location.pathname,
-      hash: '',
-      search: ''
-    }, typeof to === 'string' ? parsePath(to) : to, {
-      state: state,
-      key: createKey()
-    }));
-  }
-
-  function getHistoryStateAndUrl(nextLocation, index) {
-    return [{
-      usr: nextLocation.state,
-      key: nextLocation.key,
-      idx: index
-    }, createHref(nextLocation)];
-  }
-
-  function allowTx(action, location, retry) {
-    return !blockers.length || (blockers.call({
-      action: action,
-      location: location,
-      retry: retry
-    }), false);
-  }
-
-  function applyTx(nextAction) {
-    action = nextAction;
-
-    var _getIndexAndLocation3 = getIndexAndLocation();
-
-    index = _getIndexAndLocation3[0];
-    location = _getIndexAndLocation3[1];
-    listeners.call({
-      action: action,
-      location: location
-    });
-  }
-
-  function push(to, state) {
-    var nextAction = Action.Push;
-    var nextLocation = getNextLocation(to, state);
-
-    function retry() {
-      push(to, state);
+  }, /*#__PURE__*/React.createElement("strong", {
+    style: {
+      fontSize: '1rem'
     }
-
-    if (allowTx(nextAction, nextLocation, retry)) {
-      var _getHistoryStateAndUr = getHistoryStateAndUrl(nextLocation, index + 1),
-          historyState = _getHistoryStateAndUr[0],
-          url = _getHistoryStateAndUr[1]; // TODO: Support forced reloading
-      // try...catch because iOS limits us to 100 pushState calls :/
-
-
-      try {
-        globalHistory.pushState(historyState, '', url);
-      } catch (error) {
-        // They are going to lose state here, but there is no real
-        // way to warn them about it since the page will refresh...
-        window.location.assign(url);
-      }
-
-      applyTx(nextAction);
+  }, "Something went wrong!"), /*#__PURE__*/React.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.createElement("div", {
+    style: {
+      height: '.25rem'
     }
-  }
-
-  function replace(to, state) {
-    var nextAction = Action.Replace;
-    var nextLocation = getNextLocation(to, state);
-
-    function retry() {
-      replace(to, state);
+  }), show ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", {
+    style: {
+      fontSize: '.7em',
+      border: '1px solid red',
+      borderRadius: '.25rem',
+      padding: '.3rem',
+      color: 'red',
+      overflow: 'auto'
     }
+  }, error.message ? /*#__PURE__*/React.createElement("code", null, error.message) : null)) : null);
+}
 
-    if (allowTx(nextAction, nextLocation, retry)) {
-      var _getHistoryStateAndUr2 = getHistoryStateAndUrl(nextLocation, index),
-          historyState = _getHistoryStateAndUr2[0],
-          url = _getHistoryStateAndUr2[1]; // TODO: Support forced reloading
+// 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]>>
 
+//
 
-      globalHistory.replaceState(historyState, '', url);
-      applyTx(nextAction);
-    }
+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;
+  }, {});
+}
 
-  function go(delta) {
-    globalHistory.go(delta);
+/**
+ * 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;
   }
-
-  var history = {
-    get action() {
-      return action;
-    },
-
-    get location() {
-      return location;
-    },
-
-    createHref: createHref,
-    push: push,
-    replace: replace,
-    go: go,
-    back: function back() {
-      go(-1);
-    },
-    forward: function forward() {
-      go(1);
-    },
-    listen: function listen(listener) {
-      return listeners.push(listener);
-    },
-    block: function block(blocker) {
-      var unblock = blockers.push(blocker);
-
-      if (blockers.length === 1) {
-        window.addEventListener(BeforeUnloadEventType, promptBeforeUnload);
+  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 function () {
-        unblock(); // Remove the beforeunload listener so the document may
-        // still be salvageable in the pagehide event.
-        // See https://html.spec.whatwg.org/#unloading-documents
-
-        if (!blockers.length) {
-          window.removeEventListener(BeforeUnloadEventType, promptBeforeUnload);
-        }
-      };
     }
-  };
-  return history;
-}
-/**
- * Hash history stores the location in window.location.hash. This makes it ideal
- * for situations where you don't want to send the location to the server for
- * some reason, either because you do cannot configure it or the URL space is
- * reserved for something else.
- *
- * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory
- */
-
-function createHashHistory(options) {
-  if (options === void 0) {
-    options = {};
+    return prevSize === nextSize && equalItems === prevSize ? prev : copy;
   }
+  return next;
+}
 
-  var _options2 = options,
-      _options2$window = _options2.window,
-      window = _options2$window === void 0 ? document.defaultView : _options2$window;
-  var globalHistory = window.history;
-
-  function getIndexAndLocation() {
-    var _parsePath = parsePath(window.location.hash.substr(1)),
-        _parsePath$pathname = _parsePath.pathname,
-        pathname = _parsePath$pathname === void 0 ? '/' : _parsePath$pathname,
-        _parsePath$search = _parsePath.search,
-        search = _parsePath$search === void 0 ? '' : _parsePath$search,
-        _parsePath$hash = _parsePath.hash,
-        hash = _parsePath$hash === void 0 ? '' : _parsePath$hash;
-
-    var state = globalHistory.state || {};
-    return [state.idx, readOnly({
-      pathname: pathname,
-      search: search,
-      hash: hash,
-      state: state.usr || null,
-      key: state.key || 'default'
-    })];
+// Copied from: https://github.com/jonschlinkert/is-plain-object
+function isPlainObject(o) {
+  if (!hasObjectPrototype(o)) {
+    return false;
   }
 
-  var blockedPopTx = null;
-
-  function handlePop() {
-    if (blockedPopTx) {
-      blockers.call(blockedPopTx);
-      blockedPopTx = null;
-    } else {
-      var nextAction = Action.Pop;
-
-      var _getIndexAndLocation4 = getIndexAndLocation(),
-          nextIndex = _getIndexAndLocation4[0],
-          nextLocation = _getIndexAndLocation4[1];
-
-      if (blockers.length) {
-        if (nextIndex != null) {
-          var delta = index - nextIndex;
-
-          if (delta) {
-            // Revert the POP
-            blockedPopTx = {
-              action: nextAction,
-              location: nextLocation,
-              retry: function retry() {
-                go(delta * -1);
-              }
-            };
-            go(delta);
-          }
-        } else {
-          // Trying to POP to a location with no index. We did not create
-          // this location, so we can't effectively block the navigation.
-          process.env.NODE_ENV !== "production" ? warning$1(false, // TODO: Write up a doc that explains our blocking strategy in
-          // detail and link to it here so people can understand better
-          // what is going on and how to avoid it.
-          "You are trying to block a POP navigation to a location that was not " + "created by the history library. The block will fail silently in " + "production, but in general you should do all navigation with the " + "history library (instead of using window.history.pushState directly) " + "to avoid this situation.") : void 0;
-        }
-      } else {
-        applyTx(nextAction);
-      }
-    }
+  // If has modified constructor
+  const ctor = o.constructor;
+  if (typeof ctor === 'undefined') {
+    return true;
   }
 
-  window.addEventListener(PopStateEventType, handlePop); // popstate does not fire on hashchange in IE 11 and old (trident) Edge
-  // https://developer.mozilla.org/de/docs/Web/API/Window/popstate_event
-
-  window.addEventListener(HashChangeEventType, function () {
-    var _getIndexAndLocation5 = getIndexAndLocation(),
-        nextLocation = _getIndexAndLocation5[1]; // Ignore extraneous hashchange events.
-
-
-    if (createPath(nextLocation) !== createPath(location)) {
-      handlePop();
-    }
-  });
-  var action = Action.Pop;
-
-  var _getIndexAndLocation6 = getIndexAndLocation(),
-      index = _getIndexAndLocation6[0],
-      location = _getIndexAndLocation6[1];
-
-  var listeners = createEvents();
-  var blockers = createEvents();
-
-  if (index == null) {
-    index = 0;
-    globalHistory.replaceState(_extends$1({}, globalHistory.state, {
-      idx: index
-    }), '');
+  // If has modified prototype
+  const prot = ctor.prototype;
+  if (!hasObjectPrototype(prot)) {
+    return false;
   }
 
-  function getBaseHref() {
-    var base = document.querySelector('base');
-    var href = '';
-
-    if (base && base.getAttribute('href')) {
-      var url = window.location.href;
-      var hashIndex = url.indexOf('#');
-      href = hashIndex === -1 ? url : url.slice(0, hashIndex);
-    }
-
-    return href;
+  // If constructor does not have an Object-specific method
+  if (!prot.hasOwnProperty('isPrototypeOf')) {
+    return false;
   }
 
-  function createHref(to) {
-    return getBaseHref() + '#' + (typeof to === 'string' ? to : createPath(to));
+  // Most likely a plain Object
+  return true;
+}
+function hasObjectPrototype(o) {
+  return Object.prototype.toString.call(o) === '[object Object]';
+}
+function deepEqual(a, b, partial = false) {
+  if (a === b) {
+    return true;
   }
-
-  function getNextLocation(to, state) {
-    if (state === void 0) {
-      state = null;
+  if (typeof a !== typeof b) {
+    return false;
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (!partial && aKeys.length !== bKeys.length) {
+      return false;
     }
-
-    return readOnly(_extends$1({
-      pathname: location.pathname,
-      hash: '',
-      search: ''
-    }, typeof to === 'string' ? parsePath(to) : to, {
-      state: state,
-      key: createKey()
-    }));
+    return !bKeys.some(key => !(key in a) || !deepEqual(a[key], b[key], partial));
   }
-
-  function getHistoryStateAndUrl(nextLocation, index) {
-    return [{
-      usr: nextLocation.state,
-      key: nextLocation.key,
-      idx: index
-    }, createHref(nextLocation)];
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return !a.some((item, index) => !deepEqual(item, b[index], partial));
   }
-
-  function allowTx(action, location, retry) {
-    return !blockers.length || (blockers.call({
-      action: action,
-      location: location,
-      retry: retry
-    }), false);
+  return false;
+}
+function useStableCallback(fn) {
+  const fnRef = React.useRef(fn);
+  fnRef.current = fn;
+  const ref = React.useRef((...args) => fnRef.current(...args));
+  return ref.current;
+}
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
   }
-
-  function applyTx(nextAction) {
-    action = nextAction;
-
-    var _getIndexAndLocation7 = getIndexAndLocation();
-
-    index = _getIndexAndLocation7[0];
-    location = _getIndexAndLocation7[1];
-    listeners.call({
-      action: action,
-      location: location
-    });
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
   }
-
-  function push(to, state) {
-    var nextAction = Action.Push;
-    var nextLocation = getNextLocation(to, state);
-
-    function retry() {
-      push(to, state);
-    }
-
-    process.env.NODE_ENV !== "production" ? warning$1(nextLocation.pathname.charAt(0) === '/', "Relative pathnames are not supported in hash history.push(" + JSON.stringify(to) + ")") : void 0;
-
-    if (allowTx(nextAction, nextLocation, retry)) {
-      var _getHistoryStateAndUr3 = getHistoryStateAndUrl(nextLocation, index + 1),
-          historyState = _getHistoryStateAndUr3[0],
-          url = _getHistoryStateAndUr3[1]; // TODO: Support forced reloading
-      // try...catch because iOS limits us to 100 pushState calls :/
-
-
-      try {
-        globalHistory.pushState(historyState, '', url);
-      } catch (error) {
-        // They are going to lose state here, but there is no real
-        // way to warn them about it since the page will refresh...
-        window.location.assign(url);
-      }
-
-      applyTx(nextAction);
-    }
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
   }
-
-  function replace(to, state) {
-    var nextAction = Action.Replace;
-    var nextLocation = getNextLocation(to, state);
-
-    function retry() {
-      replace(to, state);
-    }
-
-    process.env.NODE_ENV !== "production" ? warning$1(nextLocation.pathname.charAt(0) === '/', "Relative pathnames are not supported in hash history.replace(" + JSON.stringify(to) + ")") : void 0;
-
-    if (allowTx(nextAction, nextLocation, retry)) {
-      var _getHistoryStateAndUr4 = getHistoryStateAndUrl(nextLocation, index),
-          historyState = _getHistoryStateAndUr4[0],
-          url = _getHistoryStateAndUr4[1]; // TODO: Support forced reloading
-
-
-      globalHistory.replaceState(historyState, '', url);
-      applyTx(nextAction);
+  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;
     }
   }
-
-  function go(delta) {
-    globalHistory.go(delta);
-  }
-
-  var history = {
-    get action() {
-      return action;
-    },
-
-    get location() {
-      return location;
-    },
-
-    createHref: createHref,
-    push: push,
-    replace: replace,
-    go: go,
-    back: function back() {
-      go(-1);
-    },
-    forward: function forward() {
-      go(1);
-    },
-    listen: function listen(listener) {
-      return listeners.push(listener);
-    },
-    block: function block(blocker) {
-      var unblock = blockers.push(blocker);
-
-      if (blockers.length === 1) {
-        window.addEventListener(BeforeUnloadEventType, promptBeforeUnload);
-      }
-
-      return function () {
-        unblock(); // Remove the beforeunload listener so the document may
-        // still be salvageable in the pagehide event.
-        // See https://html.spec.whatwg.org/#unloading-documents
-
-        if (!blockers.length) {
-          window.removeEventListener(BeforeUnloadEventType, promptBeforeUnload);
-        }
-      };
-    }
-  };
-  return history;
+  return true;
 }
-/**
- * Memory history stores the current location in memory. It is designed for use
- * in stateful non-browser environments like tests and React Native.
- *
- * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#creatememoryhistory
- */
-
-function createMemoryHistory(options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var _options3 = options,
-      _options3$initialEntr = _options3.initialEntries,
-      initialEntries = _options3$initialEntr === void 0 ? ['/'] : _options3$initialEntr,
-      initialIndex = _options3.initialIndex;
-  var entries = initialEntries.map(function (entry) {
-    var location = readOnly(_extends$1({
-      pathname: '/',
-      search: '',
-      hash: '',
-      state: null,
-      key: createKey()
-    }, typeof entry === 'string' ? parsePath(entry) : entry));
-    process.env.NODE_ENV !== "production" ? warning$1(location.pathname.charAt(0) === '/', "Relative pathnames are not supported in createMemoryHistory({ initialEntries }) (invalid entry: " + JSON.stringify(entry) + ")") : void 0;
-    return location;
+function useRouteContext(opts) {
+  return useMatch({
+    ...opts,
+    select: match => opts?.select ? opts.select(match.context) : match.context
   });
-  var index = clamp(initialIndex == null ? entries.length - 1 : initialIndex, 0, entries.length - 1);
-  var action = Action.Pop;
-  var location = entries[index];
-  var listeners = createEvents();
-  var blockers = createEvents();
-
-  function createHref(to) {
-    return typeof to === 'string' ? to : createPath(to);
-  }
-
-  function getNextLocation(to, state) {
-    if (state === void 0) {
-      state = null;
-    }
-
-    return readOnly(_extends$1({
-      pathname: location.pathname,
-      search: '',
-      hash: ''
-    }, typeof to === 'string' ? parsePath(to) : to, {
-      state: state,
-      key: createKey()
-    }));
-  }
-
-  function allowTx(action, location, retry) {
-    return !blockers.length || (blockers.call({
-      action: action,
-      location: location,
-      retry: retry
-    }), false);
-  }
-
-  function applyTx(nextAction, nextLocation) {
-    action = nextAction;
-    location = nextLocation;
-    listeners.call({
-      action: action,
-      location: location
-    });
-  }
-
-  function push(to, state) {
-    var nextAction = Action.Push;
-    var nextLocation = getNextLocation(to, state);
-
-    function retry() {
-      push(to, state);
-    }
-
-    process.env.NODE_ENV !== "production" ? warning$1(location.pathname.charAt(0) === '/', "Relative pathnames are not supported in memory history.push(" + JSON.stringify(to) + ")") : void 0;
-
-    if (allowTx(nextAction, nextLocation, retry)) {
-      index += 1;
-      entries.splice(index, entries.length, nextLocation);
-      applyTx(nextAction, nextLocation);
-    }
-  }
-
-  function replace(to, state) {
-    var nextAction = Action.Replace;
-    var nextLocation = getNextLocation(to, state);
-
-    function retry() {
-      replace(to, state);
-    }
-
-    process.env.NODE_ENV !== "production" ? warning$1(location.pathname.charAt(0) === '/', "Relative pathnames are not supported in memory history.replace(" + JSON.stringify(to) + ")") : void 0;
-
-    if (allowTx(nextAction, nextLocation, retry)) {
-      entries[index] = nextLocation;
-      applyTx(nextAction, nextLocation);
-    }
-  }
-
-  function go(delta) {
-    var nextIndex = clamp(index + delta, 0, entries.length - 1);
-    var nextAction = Action.Pop;
-    var nextLocation = entries[nextIndex];
-
-    function retry() {
-      go(delta);
-    }
-
-    if (allowTx(nextAction, nextLocation, retry)) {
-      index = nextIndex;
-      applyTx(nextAction, nextLocation);
-    }
-  }
-
-  var history = {
-    get index() {
-      return index;
-    },
-
-    get action() {
-      return action;
-    },
-
-    get location() {
-      return location;
-    },
-
-    createHref: createHref,
-    push: push,
-    replace: replace,
-    go: go,
-    back: function back() {
-      go(-1);
-    },
-    forward: function forward() {
-      go(1);
-    },
-    listen: function listen(listener) {
-      return listeners.push(listener);
-    },
-    block: function block(blocker) {
-      return blockers.push(blocker);
-    }
-  };
-  return history;
-} ////////////////////////////////////////////////////////////////////////////////
-// UTILS
-////////////////////////////////////////////////////////////////////////////////
-
-function clamp(n, lowerBound, upperBound) {
-  return Math.min(Math.max(n, lowerBound), upperBound);
-}
-
-function promptBeforeUnload(event) {
-  // Cancel the event.
-  event.preventDefault(); // Chrome (and legacy IE) requires returnValue to be set.
-
-  event.returnValue = '';
-}
-
-function createEvents() {
-  var handlers = [];
-  return {
-    get length() {
-      return handlers.length;
-    },
-
-    push: function push(fn) {
-      handlers.push(fn);
-      return function () {
-        handlers = handlers.filter(function (handler) {
-          return handler !== fn;
-        });
-      };
-    },
-    call: function call(arg) {
-      handlers.forEach(function (fn) {
-        return fn && fn(arg);
-      });
-    }
-  };
-}
-
-function createKey() {
-  return Math.random().toString(36).substr(2, 8);
-}
-/**
- * Creates a string URL path from the given pathname, search, and hash components.
- *
- * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createpath
- */
-
-
-function createPath(_ref) {
-  var _ref$pathname = _ref.pathname,
-      pathname = _ref$pathname === void 0 ? '/' : _ref$pathname,
-      _ref$search = _ref.search,
-      search = _ref$search === void 0 ? '' : _ref$search,
-      _ref$hash = _ref.hash,
-      hash = _ref$hash === void 0 ? '' : _ref$hash;
-  if (search && search !== '?') pathname += search.charAt(0) === '?' ? search : '?' + search;
-  if (hash && hash !== '#') pathname += hash.charAt(0) === '#' ? hash : '#' + hash;
-  return pathname;
-}
-/**
- * Parses a string URL path into its separate pathname, search, and hash components.
- *
- * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#parsepath
- */
-
-function parsePath(path) {
-  var parsedPath = {};
-
-  if (path) {
-    var hashIndex = path.indexOf('#');
-
-    if (hashIndex >= 0) {
-      parsedPath.hash = path.substr(hashIndex);
-      path = path.substr(0, hashIndex);
-    }
-
-    var searchIndex = path.indexOf('?');
-
-    if (searchIndex >= 0) {
-      parsedPath.search = path.substr(searchIndex);
-      path = path.substr(0, searchIndex);
-    }
-
-    if (path) {
-      parsedPath.pathname = path;
-    }
-  }
-
-  return parsedPath;
-}
-
-var isProduction = process.env.NODE_ENV === 'production';
-var prefix = 'Invariant failed';
-function invariant(condition, message) {
-    if (condition) {
-        return;
-    }
-    if (isProduction) {
-        throw new Error(prefix);
-    }
-    var provided = typeof message === 'function' ? message() : message;
-    var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-    throw new Error(value);
-}
-
-/**
- * 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 JSON values for example.
- */
-function replaceEqualDeep(prev, next) {
-  if (prev === next) {
-    return prev;
-  }
-
-  const array = Array.isArray(prev) && Array.isArray(next);
-
-  if (array || isPlainObject(prev) && isPlainObject(next)) {
-    const aSize = array ? prev.length : Object.keys(prev).length;
-    const bItems = array ? next : Object.keys(next);
-    const bSize = bItems.length;
-    const copy = array ? [] : {};
-    let equalItems = 0;
-
-    for (let i = 0; i < bSize; i++) {
-      const key = array ? i : bItems[i];
-      copy[key] = replaceEqualDeep(prev[key], next[key]);
-
-      if (copy[key] === prev[key]) {
-        equalItems++;
-      }
-    }
-
-    return aSize === bSize && equalItems === aSize ? 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 last(arr) {
-  return arr[arr.length - 1];
-}
-function warning(cond, message) {
-  if (cond) {
-    if (typeof console !== 'undefined') console.warn(message);
-
-    try {
-      throw new Error(message);
-    } catch (_unused) {}
-  }
-
-  return true;
-}
-
-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;
-  }, {});
+const useLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+function escapeJSON(jsonString) {
+  return jsonString.replace(/\\/g, '\\\\') // Escape backslashes
+  .replace(/'/g, "\\'") // Escape single quotes
+  .replace(/"/g, '\\"'); // Escape double quotes
 }
 
 function joinPaths(paths) {
@@ -993,8 +311,8 @@ function trimPath(path) {
   return trimPathRight(trimPathLeft(path));
 }
 function resolvePath(basepath, base, to) {
-  base = base.replace(new RegExp("^" + basepath), '/');
-  to = to.replace(new RegExp("^" + basepath), '/');
+  base = base.replace(new RegExp(`^${basepath}`), '/');
+  to = to.replace(new RegExp(`^${basepath}`), '/');
   let baseSegments = parsePathname(base);
   const toSegments = parsePathname(to);
   toSegments.forEach((toSegment, index) => {
@@ -1007,13 +325,10 @@ function resolvePath(basepath, base, to) {
         baseSegments.push(toSegment);
       } else ;
     } else if (toSegment.value === '..') {
-      var _last;
-
       // Extra trailing slash? pop it off
-      if (baseSegments.length > 1 && ((_last = last(baseSegments)) == null ? void 0 : _last.value) === '/') {
+      if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
         baseSegments.pop();
       }
-
       baseSegments.pop();
     } else if (toSegment.value === '.') {
       return;
@@ -1028,10 +343,8 @@ function parsePathname(pathname) {
   if (!pathname) {
     return [];
   }
-
   pathname = cleanPath(pathname);
   const segments = [];
-
   if (pathname.slice(0, 1) === '/') {
     pathname = pathname.substring(1);
     segments.push({
@@ -1039,34 +352,30 @@ function parsePathname(pathname) {
       value: '/'
     });
   }
-
   if (!pathname) {
     return segments;
-  } // Remove empty segments and '.' segments
-
+  }
 
+  // Remove empty segments and '.' segments
   const split = pathname.split('/').filter(Boolean);
   segments.push(...split.map(part => {
-    if (part.startsWith('*')) {
+    if (part === '$' || part === '*') {
       return {
         type: 'wildcard',
         value: part
       };
     }
-
-    if (part.charAt(0) === ':') {
+    if (part.charAt(0) === '$') {
       return {
         type: 'param',
         value: part
       };
     }
-
     return {
       type: 'pathname',
       value: part
     };
   }));
-
   if (pathname.slice(-1) === '/') {
     pathname = pathname.substring(1);
     segments.push({
@@ -1074,63 +383,70 @@ function parsePathname(pathname) {
       value: '/'
     });
   }
-
   return segments;
 }
-function interpolatePath(path, params, leaveWildcard) {
+function interpolatePath(path, params, leaveWildcards = false) {
   const interpolatedPathSegments = parsePathname(path);
   return joinPaths(interpolatedPathSegments.map(segment => {
-    if (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') {
-      var _segment$value$substr;
-
-      return (_segment$value$substr = params[segment.value.substring(1)]) != null ? _segment$value$substr : '';
+      return params[segment.value.substring(1)] ?? '';
     }
-
     return segment.value;
   }));
 }
-function matchPathname(currentPathname, matchLocation) {
-  const pathParams = matchByPath(currentPathname, matchLocation); // const searchMatched = matchBySearch(currentLocation.search, matchLocation)
+function matchPathname(basepath, currentPathname, matchLocation) {
+  const pathParams = matchByPath(basepath, currentPathname, matchLocation);
+  // const searchMatched = matchBySearch(location.search, matchLocation)
 
   if (matchLocation.to && !pathParams) {
     return;
   }
-
-  return pathParams != null ? pathParams : {};
+  return pathParams ?? {};
 }
-function matchByPath(from, matchLocation) {
-  var _matchLocation$to;
-
+function matchByPath(basepath, from, matchLocation) {
+  // Remove the base path from the pathname
+  from = basepath != '/' ? from.substring(basepath.length) : from;
+  // Default to to $ (wildcard)
+  const to = `${matchLocation.to ?? '$'}`;
+  // Parse the from and to
   const baseSegments = parsePathname(from);
-  const routeSegments = parsePathname("" + ((_matchLocation$to = matchLocation.to) != null ? _matchLocation$to : '*'));
+  const routeSegments = parsePathname(to);
+  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 != null && baseSegment.value) {
+          if (baseSegment?.value) {
             params['*'] = joinPaths(baseSegments.slice(i).map(d => d.value));
             return true;
           }
-
           return false;
         }
-
         if (routeSegment.type === 'pathname') {
-          if (routeSegment.value === '/' && !(baseSegment != null && baseSegment.value)) {
+          if (routeSegment.value === '/' && !baseSegment?.value) {
             return true;
           }
-
           if (baseSegment) {
             if (matchLocation.caseSensitive) {
               if (routeSegment.value !== baseSegment.value) {
@@ -1141,1773 +457,2046 @@ function matchByPath(from, matchLocation) {
             }
           }
         }
-
         if (!baseSegment) {
           return false;
         }
-
         if (routeSegment.type === 'param') {
-          if ((baseSegment == null ? void 0 : baseSegment.value) === '/') {
+          if (baseSegment?.value === '/') {
             return false;
           }
-
-          if (!baseSegment.value.startsWith(':')) {
+          if (baseSegment.value.charAt(0) !== '$') {
             params[routeSegment.value.substring(1)] = baseSegment.value;
           }
         }
       }
-
-      if (isLastRouteSegment && !isLastBaseSegment) {
+      if (!isLastBaseSegment && isLastRouteSegment) {
         return !!matchLocation.fuzzy;
       }
     }
-
     return true;
   })();
-
   return isMatch ? params : undefined;
 }
 
-// @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.
-function encode(obj, pfx) {
-  var k,
-      i,
-      tmp,
-      str = '';
-
-  for (k in obj) {
-    if ((tmp = obj[k]) !== void 0) {
-      if (Array.isArray(tmp)) {
-        for (i = 0; i < tmp.length; i++) {
-          str && (str += '&');
-          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
-        }
-      } else {
-        str && (str += '&');
-        str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
-      }
+function useParams(opts) {
+  return useRouterState({
+    select: state => {
+      const params = last(state.matches)?.params;
+      return opts?.select ? opts.select(params) : params;
     }
-  }
-
-  return (pfx || '') + str;
+  });
 }
 
-function toValue(mix) {
-  if (!mix) return '';
-  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;
+function useSearch(opts) {
+  return useMatch({
+    ...opts,
+    select: match => {
+      return opts?.select ? opts.select(match.search) : match.search;
+    }
+  });
 }
 
-function decode(str) {
-  var tmp,
-      k,
-      out = {},
-      arr = str.split('&');
+const rootRouteId = '__root__';
 
-  while (tmp = arr.shift()) {
-    tmp = tmp.split('=');
-    k = tmp.shift();
+// The parse type here allows a zod schema to be passed directly to the validator
 
-    if (out[k] !== void 0) {
-      out[k] = [].concat(out[k], toValue(tmp.shift()));
-    } else {
-      out[k] = toValue(tmp.shift());
-    }
-  }
+class Route {
+  // Set up in this.init()
 
-  return out;
-}
+  // customId!: TCustomId
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+  // Optional
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  constructor(options) {
+    this.options = options || {};
+    this.isRoot = !options?.getParentRoute;
+    Route.__onInit(this);
+    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;
 
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function createRoute(routeConfig, options, parent, router) {
-  const {
-    id,
-    routeId,
-    path: routePath,
-    fullPath
-  } = routeConfig;
-
-  const action = router.state.actions[id] || (() => {
-    router.state.actions[id] = {
-      submissions: [],
-      submit: async (submission, actionOpts) => {
-        var _actionOpts$invalidat;
-
-        if (!route) {
-          return;
-        }
-
-        const invalidate = (_actionOpts$invalidat = actionOpts == null ? void 0 : actionOpts.invalidate) != null ? _actionOpts$invalidat : true;
-
-        if (!(actionOpts != null && actionOpts.multi)) {
-          action.submissions = action.submissions.filter(d => d.isMulti);
-        }
+    // If the path is anything other than an index path, trim it up
+    if (path && path !== '/') {
+      path = trimPath(path);
+    }
+    const customId = options?.id || path;
 
-        const actionState = {
-          submittedAt: Date.now(),
-          status: 'pending',
-          submission,
-          isMulti: !!(actionOpts != null && actionOpts.multi)
-        };
-        action.current = actionState;
-        action.latest = actionState;
-        action.submissions.push(actionState);
-        router.notify();
-
-        try {
-          const res = await (route.options.action == null ? void 0 : route.options.action(submission));
-          actionState.data = res;
-
-          if (invalidate) {
-            router.invalidateRoute({
-              to: '.',
-              fromCurrent: true
-            });
-            await router.reload();
-          }
-
-          actionState.status = 'success';
-          return res;
-        } catch (err) {
-          console.error(err);
-          actionState.error = err;
-          actionState.status = 'error';
-        } finally {
-          router.notify();
-        }
-      }
-    };
-    return router.state.actions[id];
-  })();
-
-  const loader = router.state.loaders[id] || (() => {
-    router.state.loaders[id] = {
-      pending: [],
-      fetch: async loaderContext => {
-        if (!route) {
-          return;
-        }
-
-        const loaderState = {
-          loadedAt: Date.now(),
-          loaderContext
-        };
-        loader.current = loaderState;
-        loader.latest = loaderState;
-        loader.pending.push(loaderState); // router.state = {
-        //   ...router.state,
-        //   currentAction: loaderState,
-        //   latestAction: loaderState,
-        // }
-
-        router.notify();
-
-        try {
-          return await (route.options.loader == null ? void 0 : route.options.loader(loaderContext));
-        } finally {
-          loader.pending = loader.pending.filter(d => d !== loaderState); // router.removeActionQueue.push({ loader, loaderState })
+    // 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;
+  };
+  static __onInit = route => {
+    // This is a dummy static method that should get
+    // replaced by a framework specific implementation if necessary
+  };
+  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
+    });
+  };
+  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;
+}
 
-          router.notify();
-        }
-      }
-    };
-    return router.state.loaders[id];
-  })();
+//
 
-  let route = {
-    routeId: id,
-    routeRouteId: routeId,
-    routePath,
-    fullPath,
+function Matches() {
+  const {
+    routesById,
+    state
+  } = useRouter();
+  const {
+    matches
+  } = state;
+  const locationKey = useRouterState().location.state.key;
+  const route = routesById[rootRouteId];
+  const errorComponent = React.useCallback(props => {
+    return /*#__PURE__*/React.createElement(ErrorComponent, {
+      ...props,
+      useMatch: route.useMatch,
+      useRouteContext: route.useRouteContext,
+      useSearch: route.useSearch,
+      useParams: route.useParams
+    });
+  }, [route]);
+  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
+    value: matches
+  }, /*#__PURE__*/React.createElement(CatchBoundary, {
+    resetKey: locationKey,
+    errorComponent: errorComponent,
+    onCatch: () => {
+      warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
+    }
+  }, matches.length ? /*#__PURE__*/React.createElement(Match, {
+    matches: matches
+  }) : null));
+}
+function SafeFragment(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+}
+function Match({
+  matches
+}) {
+  const {
     options,
-    router,
-    childRoutes: undefined,
-    parentRoute: parent,
-    action,
-    loader: loader,
-    buildLink: options => {
-      return router.buildLink(_extends({}, options, {
-        from: fullPath
-      }));
-    },
-    navigate: options => {
-      return router.navigate(_extends({}, options, {
-        from: fullPath
-      }));
-    },
-    matchRoute: (matchLocation, opts) => {
-      return router.matchRoute(_extends({}, matchLocation, {
-        from: fullPath
-      }), opts);
+    routesById
+  } = useRouter();
+  const match = matches[0];
+  const routeId = match?.routeId;
+  const route = routesById[routeId];
+  const locationKey = useRouterState().location.state?.key;
+  const PendingComponent = route.options.pendingComponent ?? options.defaultPendingComponent;
+  const pendingElement = PendingComponent ? /*#__PURE__*/React.createElement(PendingComponent, {
+    useMatch: route.useMatch,
+    useRouteContext: route.useRouteContext,
+    useSearch: route.useSearch,
+    useParams: route.useParams
+  }) : undefined;
+  const routeErrorComponent = route.options.errorComponent ?? options.defaultErrorComponent ?? ErrorComponent;
+  const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? pendingElement ? React.Suspense : SafeFragment;
+  const errorComponent = routeErrorComponent ? React.useCallback(props => {
+    return /*#__PURE__*/React.createElement(routeErrorComponent, {
+      ...props,
+      useMatch: route.useMatch,
+      useRouteContext: route.useRouteContext,
+      useSearch: route.useSearch,
+      useParams: route.useParams
+    });
+  }, [route]) : undefined;
+  const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
+  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
+    value: matches
+  }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
+    fallback: pendingElement
+  }, /*#__PURE__*/React.createElement(ResolvedCatchBoundary, {
+    resetKey: locationKey,
+    errorComponent: errorComponent,
+    onCatch: () => {
+      warning(false, `Error in route match: ${match.id}`);
     }
-  };
-  router.options.createRoute == null ? void 0 : router.options.createRoute({
-    router,
-    route
-  });
-  return route;
+  }, /*#__PURE__*/React.createElement(MatchInner, {
+    match: match,
+    pendingElement: pendingElement
+  }))));
 }
-
-const rootRouteId = '__root__';
-const createRouteConfig = function createRouteConfig(options, children, isRoot, parentId, parentPath) {
-  if (options === void 0) {
-    options = {};
+function MatchInner({
+  match,
+  pendingElement
+}) {
+  const {
+    options,
+    routesById
+  } = useRouter();
+  const route = routesById[match.routeId];
+  if (match.status === 'error') {
+    throw match.error;
   }
-
-  if (isRoot === void 0) {
-    isRoot = true;
+  if (match.status === 'pending') {
+    if (match.showPending) {
+      return pendingElement || null;
+    }
+    throw match.loadPromise;
   }
-
-  if (isRoot) {
-    options.path = rootRouteId;
-  } // Strip the root from parentIds
-
-
-  if (parentId === rootRouteId) {
-    parentId = '';
+  if (match.status === 'success') {
+    let comp = route.options.component ?? options.defaultComponent;
+    if (comp) {
+      return /*#__PURE__*/React.createElement(comp, {
+        useMatch: route.useMatch,
+        useRouteContext: route.useRouteContext,
+        useSearch: route.useSearch,
+        useParams: route.useParams,
+        useLoaderData: route.useLoaderData
+      });
+    }
+    return /*#__PURE__*/React.createElement(Outlet, null);
   }
-
-  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);
+  invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+}
+function Outlet() {
+  const matches = React.useContext(matchesContext).slice(1);
+  if (!matches[0]) {
+    return null;
   }
-
-  const routeId = path || options.id;
-  let id = joinPaths([parentId, routeId]);
-
-  if (path === rootRouteId) {
-    path = '/';
+  return /*#__PURE__*/React.createElement(Match, {
+    matches: matches
+  });
+}
+function useMatchRoute() {
+  const {
+    matchRoute
+  } = useRouter();
+  return React.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);
   }
-
-  if (id !== rootRouteId) {
-    id = joinPaths(['/', id]);
+  return !!params ? props.children : null;
+}
+function useMatch(opts) {
+  const nearestMatch = React.useContext(matchesContext)[0];
+  const nearestMatchRouteId = nearestMatch?.routeId;
+  const matchRouteId = useRouterState({
+    select: state => {
+      const match = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+      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 = opts?.from ? state.matches.find(d => d.routeId === opts?.from) : state.matches.find(d => d.id === nearestMatch.id);
+      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;
+}
+const matchesContext = /*#__PURE__*/React.createContext(null);
+function useMatches(opts) {
+  const contextMatches = React.useContext(matchesContext);
+  return useRouterState({
+    select: state => {
+      const matches = state.matches.slice(state.matches.findIndex(d => d.id === contextMatches[0]?.id));
+      return opts?.select ? opts.select(matches) : matches;
+    }
+  });
+}
+function useLoaderData(opts) {
+  const match = useMatch({
+    ...opts,
+    select: undefined
+  });
+  return typeof opts.select === 'function' ? opts.select(match?.loaderData) : match?.loaderData;
+}
 
-  const fullPath = id === rootRouteId ? '/' : trimPathRight(joinPaths([parentPath, path]));
+const routerContext = /*#__PURE__*/React.createContext(null);
+if (typeof document !== 'undefined') {
+  window.__TSR_ROUTER_CONTEXT__ = routerContext;
+}
+class SearchParamError extends Error {}
+class PathParamError extends Error {}
+function getInitialRouterState(location) {
   return {
-    id: id,
-    routeId: routeId,
-    path: path,
-    fullPath: fullPath,
-    options: options,
-    children,
-    createChildren: cb => createRouteConfig(options, cb(childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath)), false, parentId, parentPath),
-    addChildren: children => createRouteConfig(options, children, false, parentId, parentPath),
-    createRoute: childOptions => createRouteConfig(childOptions, undefined, false, id, fullPath)
-  };
-};
-
-const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
-function createRouteMatch(router, route, opts) {
-  const routeMatch = _extends({}, route, opts, {
-    router,
-    routeSearch: {},
-    search: {},
-    childMatches: [],
     status: 'idle',
-    routeLoaderData: {},
-    loaderData: {},
-    isFetching: false,
-    isInvalid: false,
-    invalidAt: Infinity,
-    // pendingActions: [],
-    getIsInvalid: () => {
-      const now = Date.now();
-      return routeMatch.isInvalid || routeMatch.invalidAt < now;
-    },
-    __: {
-      abortController: new AbortController(),
-      latestId: '',
-      resolve: () => {},
-      notify: () => {
-        routeMatch.__.resolve();
-
-        routeMatch.router.notify();
-      },
-      validate: () => {
-        var _routeMatch$parentMat, _routeMatch$parentMat2;
-
-        // Validate the search params and stabilize them
-        const parentSearch = (_routeMatch$parentMat = (_routeMatch$parentMat2 = routeMatch.parentMatch) == null ? void 0 : _routeMatch$parentMat2.search) != null ? _routeMatch$parentMat : router.location.search;
-
-        try {
-          var _validator;
-
-          const prevSearch = routeMatch.routeSearch;
-          const validator = typeof routeMatch.options.validateSearch === 'object' ? routeMatch.options.validateSearch.parse : routeMatch.options.validateSearch;
-          let nextSearch = replaceEqualDeep(prevSearch, (_validator = validator == null ? void 0 : validator(parentSearch)) != null ? _validator : {}); // Invalidate route matches when search param stability changes
-
-          if (prevSearch !== nextSearch) {
-            routeMatch.isInvalid = true;
-          }
-
-          routeMatch.routeSearch = nextSearch;
-          routeMatch.search = replaceEqualDeep(parentSearch, _extends({}, parentSearch, nextSearch));
-          componentTypes.map(async type => {
-            const component = routeMatch.options[type];
-
-            if (typeof routeMatch.__[type] !== 'function') {
-              routeMatch.__[type] = component;
-            }
-          });
-        } catch (err) {
-          console.error(err);
-          const error = new Error('Invalid search params found', {
-            cause: err
-          });
-          error.code = 'INVALID_SEARCH_PARAMS';
-          routeMatch.status = 'error';
-          routeMatch.error = error; // Do not proceed with loading the route
-
-          return;
-        }
-      }
-    },
-    cancel: () => {
-      var _routeMatch$__$abortC;
-
-      (_routeMatch$__$abortC = routeMatch.__.abortController) == null ? void 0 : _routeMatch$__$abortC.abort();
-    },
-    invalidate: () => {
-      routeMatch.isInvalid = true;
-    },
-    hasLoaders: () => {
-      return !!(route.options.loader || componentTypes.some(d => {
-        var _route$options$d;
-
-        return (_route$options$d = route.options[d]) == null ? void 0 : _route$options$d.preload;
-      }));
-    },
-    load: async loaderOpts => {
-      const now = Date.now();
-      const minMaxAge = loaderOpts != null && loaderOpts.preload ? Math.max(loaderOpts == null ? void 0 : loaderOpts.maxAge, loaderOpts == null ? void 0 : loaderOpts.gcMaxAge) : 0; // If this is a preload, add it to the preload cache
-
-      if (loaderOpts != null && loaderOpts.preload && minMaxAge > 0) {
-        // If the match is currently active, don't preload it
-        if (router.state.matches.find(d => d.matchId === routeMatch.matchId)) {
-          return;
-        }
-
-        router.matchCache[routeMatch.matchId] = {
-          gc: now + loaderOpts.gcMaxAge,
-          match: routeMatch
-        };
-      } // If the match is invalid, errored or idle, trigger it to load
-
-
-      if (routeMatch.status === 'success' && routeMatch.getIsInvalid() || routeMatch.status === 'error' || routeMatch.status === 'idle') {
-        const maxAge = loaderOpts != null && loaderOpts.preload ? loaderOpts == null ? void 0 : loaderOpts.maxAge : undefined;
-        await routeMatch.fetch({
-          maxAge
-        });
-      }
-    },
-    fetch: async opts => {
-      const loadId = '' + Date.now() + Math.random();
-      routeMatch.__.latestId = loadId;
-
-      const checkLatest = async () => {
-        if (loadId !== routeMatch.__.latestId) {
-          // warning(true, 'Data loader is out of date!')
-          return new Promise(() => {});
-        }
-      }; // If the match was in an error state, set it
-      // to a loading state again. Otherwise, keep it
-      // as loading or resolved
-
-
-      if (routeMatch.status === 'idle') {
-        routeMatch.status = 'loading';
-      } // We started loading the route, so it's no longer invalid
-
-
-      routeMatch.isInvalid = false;
-      routeMatch.__.loadPromise = new Promise(async resolve => {
-        // We are now fetching, even if it's in the background of a
-        // resolved state
-        routeMatch.isFetching = true;
-        routeMatch.__.resolve = resolve;
-
-        routeMatch.__.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 => {
-            var _routeMatch$__$type;
-
-            const component = routeMatch.options[type];
-
-            if ((_routeMatch$__$type = routeMatch.__[type]) != null && _routeMatch$__$type.preload) {
-              routeMatch.__[type] = await router.options.loadComponent(component);
-            }
-          }));
-        })();
-
-        routeMatch.__.dataPromise = Promise.resolve().then(async () => {
+    resolvedLocation: location,
+    location,
+    matches: [],
+    pendingMatches: [],
+    lastUpdated: Date.now()
+  };
+}
+function RouterProvider({
+  router,
+  ...rest
+}) {
+  // Allow the router to update options on the router instance
+  router.updateOptions({
+    ...router.options,
+    ...rest,
+    context: {
+      ...router.options.context,
+      ...rest?.context
+    }
+  });
+  const [preState, setState] = React.useState(() => router.state);
+  const [isTransitioning, startReactTransition] = React.useTransition();
+  const state = React.useMemo(() => ({
+    ...preState,
+    status: isTransitioning ? 'pending' : 'idle',
+    location: isTransitioning ? router.latestLocation : preState.location,
+    pendingMatches: router.pendingMatches
+  }), [preState, isTransitioning]);
+  router.setState = setState;
+  router.state = state;
+  router.startReactTransition = startReactTransition;
+  React.useLayoutEffect(() => {
+    const unsub = router.history.subscribe(() => {
+      router.latestLocation = router.parseLocation(router.latestLocation);
+      if (state.location !== router.latestLocation) {
+        startReactTransition(() => {
           try {
-            var _ref, _ref2, _opts$maxAge;
-
-            if (routeMatch.options.loader) {
-              const data = await router.loadMatchData(routeMatch);
-              await checkLatest();
-              routeMatch.routeLoaderData = replaceEqualDeep(routeMatch.routeLoaderData, data);
-            }
-
-            routeMatch.error = undefined;
-            routeMatch.status = 'success';
-            routeMatch.updatedAt = Date.now();
-            routeMatch.invalidAt = routeMatch.updatedAt + ((_ref = (_ref2 = (_opts$maxAge = opts == null ? void 0 : opts.maxAge) != null ? _opts$maxAge : routeMatch.options.loaderMaxAge) != null ? _ref2 : router.options.defaultLoaderMaxAge) != null ? _ref : 0);
-            return routeMatch.routeLoaderData;
+            router.load();
           } catch (err) {
-            await checkLatest();
-
-            if (process.env.NODE_ENV !== 'production') {
-              console.error(err);
-            }
-
-            routeMatch.error = err;
-            routeMatch.status = 'error';
-            routeMatch.updatedAt = Date.now();
-            throw err;
+            console.error(err);
           }
         });
-
-        const after = async () => {
-          await checkLatest();
-          routeMatch.isFetching = false;
-          delete routeMatch.__.loadPromise;
-
-          routeMatch.__.notify();
-        };
-
-        try {
-          await Promise.all([routeMatch.__.componentsPromise, routeMatch.__.dataPromise.catch(() => {})]);
-          after();
-        } catch (_unused) {
-          after();
-        }
+      }
+    });
+    const nextLocation = router.buildLocation({
+      search: true,
+      params: true,
+      hash: true,
+      state: true
+    });
+    if (state.location.href !== nextLocation.href) {
+      router.commitLocation({
+        ...nextLocation,
+        replace: true
+      });
+    }
+    return () => {
+      unsub();
+    };
+  }, [router.history]);
+  React.useLayoutEffect(() => {
+    if (!isTransitioning && state.resolvedLocation !== state.location) {
+      router.emit({
+        type: 'onResolved',
+        fromLocation: state.resolvedLocation,
+        toLocation: state.location,
+        pathChanged: state.location.href !== state.resolvedLocation?.href
       });
-      await routeMatch.__.loadPromise;
-      await checkLatest();
+      router.pendingMatches = [];
+      setState(s => ({
+        ...s,
+        resolvedLocation: s.location
+      }));
     }
   });
+  React.useLayoutEffect(() => {
+    startReactTransition(() => {
+      try {
+        router.load();
+      } catch (err) {
+        console.error(err);
+      }
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(routerContext.Provider, {
+    value: router
+  }, /*#__PURE__*/React.createElement(Matches, null));
+}
+function getRouteMatch(state, id) {
+  return [...state.pendingMatches, ...state.matches].find(d => d.id === id);
+}
+function useRouterState(opts) {
+  const {
+    state
+  } = useRouter();
+  // return useStore(router.__store, opts?.select as any)
+  return opts?.select ? opts.select(state) : state;
+}
+function useRouter() {
+  const resolvedContext = window.__TSR_ROUTER_CONTEXT__ || routerContext;
+  const value = React.useContext(resolvedContext);
+  warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+  return value;
+}
 
-  if (!routeMatch.hasLoaders()) {
-    routeMatch.status = 'success';
+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 routeMatch;
+  return promise;
+}
+function isDehydratedDeferred(obj) {
+  return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
 }
 
-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
+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 promise;
+  }
+  if (state.status === 'error') {
+    throw state.error;
+  }
+  router.dehydrateData(key, state);
+  return [state.data];
+}
+function Await(props) {
+  const awaited = useAwaited(props);
+  return props.children(...awaited);
+}
 
-    for (let key in query) {
-      const value = query[key];
+class FileRoute {
+  constructor(path) {
+    this.path = path;
+  }
+  createRoute = options => {
+    const route = new Route(options);
+    route.isRoot = false;
+    return route;
+  };
+}
 
-      if (typeof value === 'string') {
-        try {
-          query[key] = parser(value);
-        } catch (err) {//
-        }
-      }
+function lazyRouteComponent(importer, exportName) {
+  let loadPromise;
+  const load = () => {
+    if (!loadPromise) {
+      loadPromise = importer();
     }
-
-    return query;
+    return loadPromise;
   };
+  const lazyComp = /*#__PURE__*/React.lazy(async () => {
+    const moduleExports = await load();
+    const comp = moduleExports[exportName ?? 'default'];
+    return {
+      default: comp
+    };
+  });
+  lazyComp.preload = load;
+  return lazyComp;
 }
-function stringifySearchWith(stringify) {
-  return search => {
-    search = _extends({}, 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
-          }
+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];
         }
-      });
+      }
     }
-
-    const searchStr = encode(search).toString();
-    return searchStr ? "?" + searchStr : '';
+    return target;
   };
+  return _extends.apply(this, arguments);
 }
 
-var _window$document;
-// Detect if we're in the DOM
-const isServer = typeof window === 'undefined' || !((_window$document = window.document) != null && _window$document.createElement); // This is the default history object if none is defined
+function useLinkProps(options) {
+  const {
+    buildLink
+  } = useRouter();
+  const match = useMatch({
+    strict: false
+  });
+  const {
+    // custom props
+    type,
+    children,
+    target,
+    activeProps = () => ({
+      className: 'active'
+    }),
+    inactiveProps = () => ({}),
+    activeOptions,
+    disabled,
+    hash,
+    search,
+    params,
+    to,
+    state,
+    mask,
+    preload,
+    preloadDelay,
+    replace,
+    startTransition,
+    resetScroll,
+    // element props
+    style,
+    className,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    ...rest
+  } = options;
+  const linkInfo = buildLink({
+    from: options.to ? match.pathname : undefined,
+    ...options
+  });
+  if (linkInfo.type === 'external') {
+    const {
+      href
+    } = linkInfo;
+    return {
+      href
+    };
+  }
+  const {
+    handleClick,
+    handleFocus,
+    handleEnter,
+    handleLeave,
+    handleTouchStart,
+    isActive,
+    next
+  } = linkInfo;
+  const composeHandlers = handlers => e => {
+    if (e.persist) e.persist();
+    handlers.filter(Boolean).forEach(handler => {
+      if (e.defaultPrevented) return;
+      handler(e);
+    });
+  };
 
-const createDefaultHistory = () => isServer ? createMemoryHistory() : createBrowserHistory();
+  // Get the active props
+  const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
 
-function getInitialRouterState() {
+  // Get the inactive props
+  const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
   return {
-    status: 'idle',
-    location: null,
-    matches: [],
-    actions: {},
-    loaders: {},
-    lastUpdated: Date.now(),
-    isFetching: false,
-    isPreloading: false
+    ...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.forwardRef((props, ref) => {
+  const linkProps = useLinkProps(props);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    ref: ref
+  }, linkProps, {
+    children: typeof props.children === 'function' ? props.children({
+      isActive: linkProps['data-status'] === 'active'
+    }) : props.children
+  }));
+});
 
-function createRouter(userOptions) {
-  var _userOptions$stringif, _userOptions$parseSea;
-
-  const history = (userOptions == null ? void 0 : userOptions.history) || createDefaultHistory();
-
-  const originalOptions = _extends({
-    defaultLoaderGcMaxAge: 5 * 60 * 1000,
-    defaultLoaderMaxAge: 0,
-    defaultPreloadMaxAge: 2000,
-    defaultPreloadDelay: 50
-  }, userOptions, {
-    stringifySearch: (_userOptions$stringif = userOptions == null ? void 0 : userOptions.stringifySearch) != null ? _userOptions$stringif : defaultStringifySearch,
-    parseSearch: (_userOptions$parseSea = userOptions == null ? void 0 : userOptions.parseSearch) != null ? _userOptions$parseSea : defaultParseSearch
-  });
-
-  let router = {
-    types: undefined,
-    // public api
-    history,
-    options: originalOptions,
-    listeners: [],
-    // Resolved after construction
-    context: {},
-    basepath: '',
-    routeTree: undefined,
-    routesById: {},
-    location: undefined,
-    //
-    navigationPromise: Promise.resolve(),
-    resolveNavigation: () => {},
-    matchCache: {},
-    state: getInitialRouterState(),
-    reset: () => {
-      router.state = getInitialRouterState();
-      router.notify();
-    },
-    startedLoadingAt: Date.now(),
-    subscribe: listener => {
-      router.listeners.push(listener);
-      return () => {
-        router.listeners = router.listeners.filter(x => x !== listener);
-      };
-    },
-    getRoute: id => {
-      return router.routesById[id];
-    },
-    notify: () => {
-      const isFetching = router.state.status === 'loading' || router.state.matches.some(d => d.isFetching);
-      const isPreloading = Object.values(router.matchCache).some(d => d.match.isFetching && !router.state.matches.find(dd => dd.matchId === d.match.matchId));
-
-      if (router.state.isFetching !== isFetching || router.state.isPreloading !== isPreloading) {
-        router.state = _extends({}, router.state, {
-          isFetching,
-          isPreloading
-        });
-      }
-
-      cascadeLoaderData(router.state.matches);
-      router.listeners.forEach(listener => listener(router));
-    },
-    dehydrateState: () => {
-      return _extends({}, pick(router.state, ['status', 'location', 'lastUpdated']), {
-        matches: router.state.matches.map(match => pick(match, ['matchId', 'status', 'routeLoaderData', 'loaderData', 'isInvalid', 'invalidAt']))
-      });
-    },
-    hydrateState: dehydratedState => {
-      // Match the routes
-      const matches = router.matchRoutes(router.location.pathname, {
-        strictParseParams: true
-      });
-      matches.forEach((match, index) => {
-        const dehydratedMatch = dehydratedState.matches[index];
-        invariant(dehydratedMatch, 'Oh no! Dehydrated route matches did not match the active state of the router 😬');
-        Object.assign(match, dehydratedMatch);
-      });
-      matches.forEach(match => match.__.validate());
-      router.state = _extends({}, router.state, dehydratedState, {
-        matches
-      });
-    },
-    mount: () => {
-      const next = router.__.buildLocation({
-        to: '.',
-        search: true,
-        hash: true
-      }); // If the current location isn't updated, trigger a navigation
-      // to the current location. Otherwise, load the current location.
-
-
-      if (next.href !== router.location.href) {
-        router.__.commitLocation(next, true);
-      }
-
-      if (!router.state.matches.length) {
-        router.load();
-      }
-
-      const unsub = router.history.listen(event => {
-        router.load(router.__.parseLocation(event.location, router.location));
-      }); // addEventListener does not exist in React Native, but window does
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-
-      if (!isServer && window.addEventListener) {
-        // Listen to visibillitychange and focus
-        window.addEventListener('visibilitychange', router.onFocus, false);
-        window.addEventListener('focus', router.onFocus, false);
-      }
-
-      return () => {
-        unsub();
+// @ts-nocheck
 
-        if (!isServer && window.removeEventListener) {
-          // Be sure to unsubscribe if a new handler is set
-          window.removeEventListener('visibilitychange', router.onFocus);
-          window.removeEventListener('focus', router.onFocus);
-        }
-      };
-    },
-    onFocus: () => {
-      router.load();
-    },
-    update: opts => {
-      const newHistory = (opts == null ? void 0 : opts.history) !== router.history;
+// 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.
 
-      if (!router.location || newHistory) {
-        if (opts != null && opts.history) {
-          router.history = opts.history;
+function encode(obj, pfx) {
+  var k,
+    i,
+    tmp,
+    str = '';
+  for (k in obj) {
+    if ((tmp = obj[k]) !== void 0) {
+      if (Array.isArray(tmp)) {
+        for (i = 0; i < tmp.length; i++) {
+          str && (str += '&');
+          str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp[i]);
         }
-
-        router.location = router.__.parseLocation(router.history.location);
-        router.state.location = router.location;
-      }
-
-      Object.assign(router.options, opts);
-      const {
-        basepath,
-        routeConfig
-      } = router.options;
-      router.basepath = cleanPath("/" + (basepath != null ? basepath : ''));
-
-      if (routeConfig) {
-        router.routesById = {};
-        router.routeTree = router.__.buildRouteTree(routeConfig);
+      } else {
+        str && (str += '&');
+        str += encodeURIComponent(k) + '=' + encodeURIComponent(tmp);
       }
+    }
+  }
+  return (pfx || '') + str;
+}
+function toValue(mix) {
+  if (!mix) return '';
+  var str = decodeURIComponent(mix);
+  if (str === 'false') return false;
+  if (str === 'true') return true;
+  return +str * 0 === 0 && +str + '' === str ? +str : str;
+}
+function decode(str) {
+  var tmp,
+    k,
+    out = {},
+    arr = str.split('&');
+  while (tmp = arr.shift()) {
+    tmp = tmp.split('=');
+    k = tmp.shift();
+    if (out[k] !== void 0) {
+      out[k] = [].concat(out[k], toValue(tmp.shift()));
+    } else {
+      out[k] = toValue(tmp.shift());
+    }
+  }
+  return out;
+}
 
-      return router;
-    },
-    cancelMatches: () => {
-      var _router$state$pending, _router$state$pending2;
-      [...router.state.matches, ...((_router$state$pending = (_router$state$pending2 = router.state.pending) == null ? void 0 : _router$state$pending2.matches) != null ? _router$state$pending : [])].forEach(match => {
-        match.cancel();
-      });
-    },
-    load: async next => {
-      const id = Math.random();
-      router.startedLoadingAt = id;
-
-      if (next) {
-        // Ingest the new location
-        router.location = next;
-      } // Cancel any pending matches
-
+// Detect if we're in the DOM
 
-      router.cancelMatches(); // Match the routes
+function redirect(opts) {
+  opts.isRedirect = true;
+  return opts;
+}
+function isRedirect(obj) {
+  return !!obj?.isRedirect;
+}
 
-      const matches = router.matchRoutes(router.location.pathname, {
-        strictParseParams: true
-      }); // Check if each match middleware to see if the route can be accessed
+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);
 
-      try {
-        await Promise.all(matches.map(match => match.options.beforeLoad == null ? void 0 : match.options.beforeLoad({
-          context: router.context
-        })));
-      } catch (err) {
-        if (err != null && err.then) {
-          await new Promise(() => {});
+    // 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) {
+          //
         }
-
-        throw err;
       }
-
-      if (typeof document !== 'undefined') {
-        router.state = _extends({}, router.state, {
-          pending: {
-            matches: matches,
-            location: router.location
-          },
-          status: 'loading'
-        });
-      } else {
-        router.state = _extends({}, router.state, {
-          matches: matches,
-          location: router.location,
-          status: 'loading'
-        });
+    }
+    return query;
+  };
+}
+function stringifySearchWith(stringify, parser) {
+  function stringifyValue(val) {
+    if (typeof val === 'object' && val !== null) {
+      try {
+        return stringify(val);
+      } catch (err) {
+        // silent
       }
-
-      router.notify(); // Load the matches
-
-      await router.loadMatches(matches);
-
-      if (router.startedLoadingAt !== id) {
-        // Ignore side-effects of match loading
-        return router.navigationPromise;
+    } 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
       }
-
-      const previousMatches = router.state.matches;
-      const exiting = [],
-            staying = [];
-      previousMatches.forEach(d => {
-        if (matches.find(dd => dd.matchId === d.matchId)) {
-          staying.push(d);
+    }
+    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 {
-          exiting.push(d);
+          search[key] = stringifyValue(val);
         }
       });
-      const entering = matches.filter(d => {
-        return !previousMatches.find(dd => dd.matchId === d.matchId);
-      });
-      const now = Date.now();
-      exiting.forEach(d => {
-        var _ref, _d$options$loaderGcMa, _ref2, _d$options$loaderMaxA;
-
-        d.__.onExit == null ? void 0 : d.__.onExit({
-          params: d.params,
-          search: d.routeSearch
-        }); // Clear idle error states when match leaves
-
-        if (d.status === 'error' && !d.isFetching) {
-          d.status = 'idle';
-          d.error = undefined;
-        }
+    }
+    const searchStr = encode(search).toString();
+    return searchStr ? `?${searchStr}` : '';
+  };
+}
 
-        const gc = Math.max((_ref = (_d$options$loaderGcMa = d.options.loaderGcMaxAge) != null ? _d$options$loaderGcMa : router.options.defaultLoaderGcMaxAge) != null ? _ref : 0, (_ref2 = (_d$options$loaderMaxA = d.options.loaderMaxAge) != null ? _d$options$loaderMaxA : router.options.defaultLoaderMaxAge) != null ? _ref2 : 0);
+//
 
-        if (gc > 0) {
-          router.matchCache[d.matchId] = {
-            gc: gc == Infinity ? Number.MAX_SAFE_INTEGER : now + gc,
-            match: d
-          };
-        }
-      });
-      staying.forEach(d => {
-        d.options.onTransition == null ? void 0 : d.options.onTransition({
-          params: d.params,
-          search: d.routeSearch
-        });
-      });
-      entering.forEach(d => {
-        d.__.onExit = d.options.onLoaded == null ? void 0 : d.options.onLoaded({
-          params: d.params,
-          search: d.search
+const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+const preloadWarning = 'Error preloading route! ☝️';
+class Router {
+  // Option-independent properties
+  tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+  resetNextScroll = true;
+  navigateTimeout = null;
+  latestLoadPromise = Promise.resolve();
+  subscribers = new Set();
+  pendingMatches = [];
+  injectedHtml = [];
+
+  // Must build in constructor
+
+  constructor(options) {
+    this.updateOptions({
+      defaultPreloadDelay: 50,
+      defaultPendingMs: 1000,
+      defaultPendingMinMs: 500,
+      context: undefined,
+      ...options,
+      stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+      parseSearch: options?.parseSearch ?? defaultParseSearch
+    });
+  }
+  startReactTransition = () => {
+    warning(false, 'startReactTransition implementation is missing. If you see this, please file an issue.');
+  };
+  setState = () => {
+    warning(false, 'setState implementation is missing. If you see this, please file an issue.');
+  };
+  updateOptions = newOptions => {
+    this.options = {
+      ...this.options,
+      ...newOptions
+    };
+    this.basepath = `/${trimPath(newOptions.basepath ?? '') ?? ''}`;
+    if (!this.history || this.options.history && this.options.history !== this.history) {
+      this.history = this.options.history ?? createBrowserHistory();
+      this.latestLocation = this.parseLocation();
+    }
+    if (this.options.routeTree !== this.routeTree) {
+      this.routeTree = this.options.routeTree;
+      this.buildRouteTree();
+    }
+    if (!this.state) {
+      this.state = getInitialRouterState(this.latestLocation);
+    }
+  };
+  buildRouteTree = () => {
+    this.routesById = {};
+    this.routesByPath = {};
+    const recurseRoutes = childRoutes => {
+      childRoutes.forEach((childRoute, i) => {
+        // if (typeof childRoute === 'function') {
+        //   childRoute = (childRoute as any)()
+        // }
+        childRoute.init({
+          originalIndex: i
         });
-        delete router.matchCache[d.matchId];
+        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);
+        }
       });
-
-      if (router.startedLoadingAt !== id) {
-        // Ignore side-effects of match loading
-        return;
+    };
+    recurseRoutes([this.routeTree]);
+    this.flatRoutes = Object.values(this.routesByPath).map((d, i) => {
+      const trimmed = trimPath(d.fullPath);
+      const parsed = parsePathname(trimmed);
+      while (parsed.length > 1 && parsed[0]?.value === '/') {
+        parsed.shift();
       }
-
-      matches.forEach(match => {
-        // Clear actions
-        if (match.action) {
-          match.action.current = undefined;
-          match.action.submissions = [];
+      const score = parsed.map(d => {
+        if (d.type === 'param') {
+          return 0.5;
         }
+        if (d.type === 'wildcard') {
+          return 0.25;
+        }
+        return 1;
       });
-      router.state = _extends({}, router.state, {
-        location: router.location,
-        matches,
-        pending: undefined,
-        status: 'idle'
-      });
-      router.notify();
-      router.resolveNavigation();
-    },
-    cleanMatchCache: () => {
-      const now = Date.now();
-      Object.keys(router.matchCache).forEach(matchId => {
-        const entry = router.matchCache[matchId]; // Don't remove loading matches
-
-        if (entry.match.status === 'loading') {
-          return;
-        } // Do not remove successful matches that are still valid
-
-
-        if (entry.gc > 0 && entry.gc > now) {
-          return;
-        } // Everything else gets removed
-
+      return {
+        child: d,
+        trimmed,
+        parsed,
+        index: i,
+        score
+      };
+    }).sort((a, b) => {
+      let isIndex = a.trimmed === '/' ? 1 : b.trimmed === '/' ? -1 : 0;
+      if (isIndex !== 0) return isIndex;
+      const length = Math.min(a.score.length, b.score.length);
+
+      // Sort by length of score
+      if (a.score.length !== b.score.length) {
+        return b.score.length - a.score.length;
+      }
 
-        delete router.matchCache[matchId];
-      });
-    },
-    loadRoute: async function loadRoute(navigateOpts) {
-      if (navigateOpts === void 0) {
-        navigateOpts = router.location;
+      // Sort by min available score
+      for (let i = 0; i < length; i++) {
+        if (a.score[i] !== b.score[i]) {
+          return b.score[i] - a.score[i];
+        }
       }
 
-      const next = router.buildNext(navigateOpts);
-      const matches = router.matchRoutes(next.pathname, {
-        strictParseParams: true
-      });
-      await router.loadMatches(matches);
-      return matches;
-    },
-    preloadRoute: async function preloadRoute(navigateOpts, loaderOpts) {
-      var _ref3, _ref4, _loaderOpts$maxAge, _ref5, _ref6, _loaderOpts$gcMaxAge;
+      // Sort by min available parsed value
+      for (let i = 0; i < length; i++) {
+        if (a.parsed[i].value !== b.parsed[i].value) {
+          return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
+        }
+      }
 
-      if (navigateOpts === void 0) {
-        navigateOpts = router.location;
+      // Sort by length of trimmed full path
+      if (a.trimmed !== b.trimmed) {
+        return a.trimmed > b.trimmed ? 1 : -1;
       }
 
-      const next = router.buildNext(navigateOpts);
-      const matches = router.matchRoutes(next.pathname, {
-        strictParseParams: true
-      });
-      await router.loadMatches(matches, {
-        preload: true,
-        maxAge: (_ref3 = (_ref4 = (_loaderOpts$maxAge = loaderOpts.maxAge) != null ? _loaderOpts$maxAge : router.options.defaultPreloadMaxAge) != null ? _ref4 : router.options.defaultLoaderMaxAge) != null ? _ref3 : 0,
-        gcMaxAge: (_ref5 = (_ref6 = (_loaderOpts$gcMaxAge = loaderOpts.gcMaxAge) != null ? _loaderOpts$gcMaxAge : router.options.defaultPreloadGcMaxAge) != null ? _ref6 : router.options.defaultLoaderGcMaxAge) != null ? _ref5 : 0
+      // 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
+    };
+    this.subscribers.add(listener);
+    return () => {
+      this.subscribers.delete(listener);
+    };
+  };
+  emit = routerEvent => {
+    this.subscribers.forEach(listener => {
+      if (listener.eventType === routerEvent.type) {
+        listener.fn(routerEvent);
+      }
+    });
+  };
+  checkLatest = promise => {
+    return this.latestLoadPromise !== promise ? this.latestLoadPromise : undefined;
+  };
+  parseLocation = previousLocation => {
+    const parse = ({
+      pathname,
+      search,
+      hash,
+      state
+    }) => {
+      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)
+      };
+    };
+    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
+      };
+    }
+    return location;
+  };
+  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: false
       });
-      return matches;
-    },
-    matchRoutes: (pathname, opts) => {
-      var _router$state$pending3, _router$state$pending4;
-
-      router.cleanMatchCache();
-      const matches = [];
-
-      if (!router.routeTree) {
-        return matches;
+      if (matchedParams) {
+        routeParams = matchedParams;
+        return true;
       }
+      return false;
+    });
+    let routeCursor = foundRoute || this.routesById['__root__'];
+    let matchedRoutes = [routeCursor];
+    // let includingLayouts = true
+    while (routeCursor?.parentRoute) {
+      routeCursor = routeCursor.parentRoute;
+      if (routeCursor) matchedRoutes.unshift(routeCursor);
+    }
 
-      const existingMatches = [...router.state.matches, ...((_router$state$pending3 = (_router$state$pending4 = router.state.pending) == null ? void 0 : _router$state$pending4.matches) != null ? _router$state$pending3 : [])];
-
-      const recurse = async routes => {
-        var _parentMatch$params, _router$options$filte, _foundRoute$childRout;
-
-        const parentMatch = last(matches);
-        let params = (_parentMatch$params = parentMatch == null ? void 0 : parentMatch.params) != null ? _parentMatch$params : {};
-        const filteredRoutes = (_router$options$filte = router.options.filterRoutes == null ? void 0 : router.options.filterRoutes(routes)) != null ? _router$options$filte : routes;
-        let foundRoutes = [];
-
-        const findMatchInRoutes = (parentRoutes, routes) => {
-          routes.some(route => {
-            var _route$childRoutes, _route$childRoutes2, _route$options$caseSe;
-
-            if (!route.routePath && (_route$childRoutes = route.childRoutes) != null && _route$childRoutes.length) {
-              return findMatchInRoutes([...foundRoutes, route], route.childRoutes);
-            }
-
-            const fuzzy = !!(route.routePath !== '/' || (_route$childRoutes2 = route.childRoutes) != null && _route$childRoutes2.length);
-            const matchParams = matchPathname(pathname, {
-              to: route.fullPath,
-              fuzzy,
-              caseSensitive: (_route$options$caseSe = route.options.caseSensitive) != null ? _route$options$caseSe : router.options.caseSensitive
-            });
-
-            if (matchParams) {
-              let parsedParams;
-
-              try {
-                var _route$options$parseP;
-
-                parsedParams = (_route$options$parseP = route.options.parseParams == null ? void 0 : route.options.parseParams(matchParams)) != null ? _route$options$parseP : matchParams;
-              } catch (err) {
-                if (opts != null && opts.strictParseParams) {
-                  throw err;
-                }
-              }
-
-              params = _extends({}, params, parsedParams);
-            }
-
-            if (!!matchParams) {
-              foundRoutes = [...parentRoutes, route];
-            }
+    // Existing matches are matches that are already loaded along with
+    // pending matches that are still loading
 
-            return !!foundRoutes.length;
+    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
           });
-          return !!foundRoutes.length;
-        };
-
-        findMatchInRoutes([], filteredRoutes);
-
-        if (!foundRoutes.length) {
-          return;
+          if (opts?.throwOnError) {
+            throw parsedParamsError;
+          }
+          return parsedParamsError;
         }
-
-        foundRoutes.forEach(foundRoute => {
-          var _router$matchCache$ma;
-
-          const interpolatedPath = interpolatePath(foundRoute.routePath, params);
-          const matchId = interpolatePath(foundRoute.routeId, params, true);
-          const match = existingMatches.find(d => d.matchId === matchId) || ((_router$matchCache$ma = router.matchCache[matchId]) == null ? void 0 : _router$matchCache$ma.match) || createRouteMatch(router, foundRoute, {
-            parentMatch,
-            matchId,
-            params,
-            pathname: joinPaths([pathname, interpolatedPath])
+      }
+      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
           });
-          matches.push(match);
-        });
-        const foundRoute = last(foundRoutes);
-
-        if ((_foundRoute$childRout = foundRoute.childRoutes) != null && _foundRoute$childRout.length) {
-          recurse(foundRoute.childRoutes);
+          if (opts?.throwOnError) {
+            throw searchError;
+          }
+          return [parentSearch, searchError];
         }
+      })();
+      const interpolatedPath = interpolatePath(route.path, routeParams);
+      const matchId = interpolatePath(route.id, routeParams, true) + (route.options.key?.({
+        search: preMatchSearch,
+        location: this.state.location
+      }) ?? '');
+
+      // 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: {},
+        searchError: undefined,
+        status: hasLoaders ? 'pending' : 'success',
+        showPending: false,
+        isFetching: false,
+        invalid: false,
+        error: undefined,
+        paramsError: parseErrors[index],
+        loadPromise: Promise.resolve(),
+        context: undefined,
+        abortController: new AbortController(),
+        shouldReloadDeps: undefined,
+        fetchedAt: 0,
+        cause
       };
 
-      recurse([router.routeTree]);
-      cascadeLoaderData(matches);
-      return matches;
-    },
-    loadMatches: async (resolvedMatches, loaderOpts) => {
-      const matchPromises = resolvedMatches.map(async match => {
-        // Validate the match (loads search params etc)
-        match.__.validate();
-
-        match.load(loaderOpts);
-        const search = match.search;
-
-        if (search.__data && search.__data.matchId !== match.matchId) {
-          return;
-        }
-
-        if (match.__.loadPromise) {
-          // Wait for the first sign of activity from the match
-          await match.__.loadPromise;
-        }
-      });
-      router.notify();
-      await Promise.all(matchPromises);
-    },
-    loadMatchData: async routeMatch => {
-      if (isServer || !router.options.useServerData) {
-        var _await$routeMatch$opt;
-
-        return (_await$routeMatch$opt = await (routeMatch.options.loader == null ? void 0 : routeMatch.options.loader({
-          // parentLoaderPromise: routeMatch.parentMatch?.__.dataPromise,
-          params: routeMatch.params,
-          search: routeMatch.routeSearch,
-          signal: routeMatch.__.abortController.signal
-        }))) != null ? _await$routeMatch$opt : {};
-      } else {
-        const next = router.buildNext({
-          to: '.',
-          search: d => _extends({}, d != null ? d : {}, {
-            __data: {
-              matchId: routeMatch.matchId
-            }
-          })
-        });
-        const res = await fetch(next.href, {
-          method: 'GET' // signal: routeMatch.__.abortController.signal,
-
+      // 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);
+    });
+    return matches;
+  };
+  cancelMatch = id => {
+    getRouteMatch(this.state, id)?.abortController?.abort();
+  };
+  cancelMatches = () => {
+    this.state.matches.forEach(match => {
+      this.cancelMatch(match.id);
+    });
+  };
+  buildLocation = opts => {
+    const build = (dest = {}, matches) => {
+      const from = this.latestLocation;
+      const fromPathname = dest.from ?? from.pathname;
+      let pathname = this.resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
+      const fromMatches = this.matchRoutes(fromPathname, from.search);
+      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)
+          };
         });
-
-        if (res.ok) {
-          return res.json();
-        }
-
-        throw new Error('Failed to fetch match data');
       }
-    },
-    invalidateRoute: opts => {
-      var _router$state$pending5, _router$state$pending6;
-
-      const next = router.buildNext(opts);
-      const unloadedMatchIds = router.matchRoutes(next.pathname).map(d => d.matchId);
-      [...router.state.matches, ...((_router$state$pending5 = (_router$state$pending6 = router.state.pending) == null ? void 0 : _router$state$pending6.matches) != null ? _router$state$pending5 : [])].forEach(match => {
-        if (unloadedMatchIds.includes(match.matchId)) {
-          match.invalidate();
-        }
-      });
-    },
-    reload: () => router.__.navigate({
-      fromCurrent: true,
-      replace: true,
-      search: true
-    }),
-    resolvePath: (from, path) => {
-      return resolvePath(router.basepath, from, cleanPath(path));
-    },
-    matchRoute: (location, opts) => {
-      var _location$from;
-
-      // const location = router.buildNext(opts)
-      location = _extends({}, location, {
-        to: location.to ? router.resolvePath((_location$from = location.from) != null ? _location$from : '', location.to) : undefined
-      });
-      const next = router.buildNext(location);
-
-      if (opts != null && opts.pending) {
-        var _router$state$pending7;
-
-        if (!((_router$state$pending7 = router.state.pending) != null && _router$state$pending7.location)) {
+      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), from.search) : from.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(from.search, 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 {
+        pathname,
+        search,
+        searchStr,
+        state: nextState,
+        hash,
+        href: this.history.createHref(`${pathname}${searchStr}${hashStr}`),
+        unmaskOnReload: dest.unmaskOnReload
+      };
+    };
+    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);
         }
-
-        return !!matchPathname(router.state.pending.location.pathname, _extends({}, opts, {
-          to: next.pathname
-        }));
       }
-
-      return !!matchPathname(router.state.location.pathname, _extends({}, opts, {
-        to: next.pathname
-      }));
-    },
-    navigate: async _ref7 => {
-      let {
-        from,
-        to = '.',
-        search,
-        hash,
-        replace,
-        params
-      } = _ref7;
-      // 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 = String(from);
-      let isExternal;
-
-      try {
-        new URL("" + toString);
-        isExternal = true;
-      } catch (e) {}
-
-      invariant(!isExternal, 'Attempting to navigate to external url with router.navigate!');
-      return router.__.navigate({
-        from: fromString,
-        to: toString,
-        search,
-        hash,
-        replace,
-        params
+      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;
+      }
+      return final;
+    };
+    if (opts.mask) {
+      return buildWithMatches(opts, {
+        ...pick(opts, ['from']),
+        ...opts.mask
       });
-    },
-    buildLink: _ref8 => {
-      var _preload, _ref9;
-
+    }
+    return buildWithMatches(opts);
+  };
+  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 {
-        from,
-        to = '.',
-        search,
-        params,
-        hash,
-        target,
-        replace,
-        activeOptions,
-        preload,
-        preloadMaxAge: userPreloadMaxAge,
-        preloadGcMaxAge: userPreloadGcMaxAge,
-        preloadDelay: userPreloadDelay,
-        disabled
-      } = _ref8;
-
-      // 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
+        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
+              }
+            }
+          }
         };
-      } catch (e) {}
-
-      const nextOpts = {
-        from,
-        to,
-        search,
-        params,
-        hash,
-        replace
-      };
-      const next = router.buildNext(nextOpts);
-      preload = (_preload = preload) != null ? _preload : router.options.defaultPreload;
-      const preloadDelay = (_ref9 = userPreloadDelay != null ? userPreloadDelay : router.options.defaultPreloadDelay) != null ? _ref9 : 0; // Compare path/hash for matches
-
-      const pathIsEqual = router.state.location.pathname === next.pathname;
-      const currentPathSplit = router.state.location.pathname.split('/');
-      const nextPathSplit = next.pathname.split('/');
-      const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
-      const hashIsEqual = router.state.location.hash === next.hash; // Combine the matches based on user options
-
-      const pathTest = activeOptions != null && activeOptions.exact ? pathIsEqual : pathIsFuzzyEqual;
-      const hashTest = activeOptions != null && activeOptions.includeHash ? hashIsEqual : true; // The final "active" test
-
-      const isActive = pathTest && hashTest; // The click handler
-
-      const handleClick = e => {
-        if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
-          e.preventDefault();
-
-          if (pathIsEqual && !search && !hash) {
-            router.invalidateRoute(nextOpts);
-          } // All is well? Navigate!)
-
-
-          router.__.navigate(nextOpts);
-        }
-      }; // The click handler
-
-
-      const handleFocus = e => {
-        if (preload) {
-          router.preloadRoute(nextOpts, {
-            maxAge: userPreloadMaxAge,
-            gcMaxAge: userPreloadGcMaxAge
-          });
+        if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+          nextHistory.state.__tempKey = this.tempLocationKey;
         }
+      }
+      const apply = () => {
+        this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
       };
-
-      const handleEnter = e => {
-        const target = e.target || {};
-
-        if (preload) {
-          if (target.preloadTimeout) {
-            return;
+      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
+    });
+  };
+  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 {
+      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,
+    invalidate
+  }) => {
+    let latestPromise;
+    let firstBadMatchIndex;
+
+    // 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 handleError = (err, code) => {
+          err.routerCode = code;
+          firstBadMatchIndex = firstBadMatchIndex ?? index;
+          if (isRedirect(err)) {
+            throw err;
           }
-
-          target.preloadTimeout = setTimeout(() => {
-            target.preloadTimeout = null;
-            router.preloadRoute(nextOpts, {
-              maxAge: userPreloadMaxAge,
-              gcMaxAge: userPreloadGcMaxAge
-            });
-          }, preloadDelay);
-        }
-      };
-
-      const handleLeave = e => {
-        const target = e.target || {};
-
-        if (target.preloadTimeout) {
-          clearTimeout(target.preloadTimeout);
-          target.preloadTimeout = null;
-        }
-      };
-
-      return {
-        type: 'internal',
-        next,
-        handleFocus,
-        handleClick,
-        handleEnter,
-        handleLeave,
-        isActive,
-        disabled
-      };
-    },
-    buildNext: opts => {
-      const next = router.__.buildLocation(opts);
-
-      const matches = router.matchRoutes(next.pathname);
-
-      const __preSearchFilters = matches.map(match => {
-        var _match$options$preSea;
-
-        return (_match$options$preSea = match.options.preSearchFilters) != null ? _match$options$preSea : [];
-      }).flat().filter(Boolean);
-
-      const __postSearchFilters = matches.map(match => {
-        var _match$options$postSe;
-
-        return (_match$options$postSe = match.options.postSearchFilters) != null ? _match$options$postSe : [];
-      }).flat().filter(Boolean);
-
-      return router.__.buildLocation(_extends({}, opts, {
-        __preSearchFilters,
-        __postSearchFilters
-      }));
-    },
-    __: {
-      buildRouteTree: rootRouteConfig => {
-        const recurseRoutes = (routeConfigs, parent) => {
-          return routeConfigs.map(routeConfig => {
-            const routeOptions = routeConfig.options;
-            const route = createRoute(routeConfig, routeOptions, parent, router);
-            const existingRoute = router.routesById[route.routeId];
-
-            if (existingRoute) {
-              if (process.env.NODE_ENV !== 'production') {
-                console.warn("Duplicate routes found with id: " + String(route.routeId), router.routesById, route);
-              }
-
-              throw new Error();
+          try {
+            route.options.onError?.(err);
+          } catch (errorHandlerErr) {
+            err = errorHandlerErr;
+            if (isRedirect(errorHandlerErr)) {
+              throw errorHandlerErr;
             }
-            router.routesById[route.routeId] = route;
-            const children = routeConfig.children;
-            route.childRoutes = children != null && children.length ? recurseRoutes(children, route) : undefined;
-            return route;
-          });
+          }
+          matches[index] = match = {
+            ...match,
+            error: err,
+            status: 'error',
+            updatedAt: Date.now()
+          };
         };
-
-        const routes = recurseRoutes([rootRouteConfig]);
-        return routes[0];
-      },
-      parseLocation: (location, previousLocation) => {
-        var _location$hash$split$;
-
-        const parsedSearch = router.options.parseSearch(location.search);
-        return {
-          pathname: location.pathname,
-          searchStr: location.search,
-          search: replaceEqualDeep(previousLocation == null ? void 0 : previousLocation.search, parsedSearch),
-          hash: (_location$hash$split$ = location.hash.split('#').reverse()[0]) != null ? _location$hash$split$ : '',
-          href: "" + location.pathname + location.search + location.hash,
-          state: location.state,
-          key: location.key
+        try {
+          if (match.paramsError) {
+            handleError(match.paramsError, 'PARSE_PARAMS');
+          }
+          if (match.searchError) {
+            handleError(match.searchError, 'VALIDATE_SEARCH');
+          }
+          const parentContext = parentMatch?.context ?? this.options.context ?? {};
+          const beforeLoadContext = (await route.options.beforeLoad?.({
+            search: match.search,
+            abortController: match.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: match.cause
+          })) ?? {};
+          const context = {
+            ...parentContext,
+            ...beforeLoadContext
+          };
+          matches[index] = match = {
+            ...match,
+            context: replaceEqualDeep(match.context, context)
+          };
+        } catch (err) {
+          handleError(err, 'BEFORE_LOAD');
+          break;
+        }
+      }
+    } catch (err) {
+      if (isRedirect(err)) {
+        if (!preload) this.navigate(err);
+        return matches;
+      }
+      throw err;
+    }
+    const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
+    const matchPromises = [];
+    validResolvedMatches.forEach((match, index) => {
+      matchPromises.push((async () => {
+        const parentMatchPromise = matchPromises[index - 1];
+        const route = this.looseRoutesById[match.routeId];
+        const handleIfRedirect = err => {
+          if (isRedirect(err)) {
+            if (!preload) {
+              this.navigate(err);
+            }
+            return true;
+          }
+          return false;
         };
-      },
-      navigate: location => {
-        const next = router.buildNext(location);
-        return router.__.commitLocation(next, location.replace);
-      },
-      buildLocation: function buildLocation(dest) {
-        var _dest$from, _router$basepath, _dest$to, _last, _dest$params, _dest$__preSearchFilt, _functionalUpdate, _dest$__preSearchFilt2, _dest$__postSearchFil;
-
-        if (dest === void 0) {
-          dest = {};
+        let loadPromise;
+        matches[index] = match = {
+          ...match,
+          fetchedAt: Date.now(),
+          invalid: false,
+          showPending: false
+        };
+        const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+        let pendingPromise;
+        if (!preload && pendingMs && (route.options.pendingComponent ?? this.options.defaultPendingComponent)) {
+          pendingPromise = new Promise(r => setTimeout(r, pendingMs));
         }
+        if (match.isFetching) {
+          loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
+        } else {
+          const loaderContext = {
+            params: match.params,
+            search: match.search,
+            preload: !!preload,
+            parentMatchPromise,
+            abortController: match.abortController,
+            context: match.context,
+            location: this.state.location,
+            navigate: opts => this.navigate({
+              ...opts,
+              from: match.pathname
+            }),
+            cause: match.cause
+          };
 
-        // const resolvedFrom: Location = {
-        //   ...router.location,
-        const fromPathname = dest.fromCurrent ? router.location.pathname : (_dest$from = dest.from) != null ? _dest$from : router.location.pathname;
-
-        let pathname = resolvePath((_router$basepath = router.basepath) != null ? _router$basepath : '/', fromPathname, "" + ((_dest$to = dest.to) != null ? _dest$to : '.'));
-
-        const fromMatches = router.matchRoutes(router.location.pathname, {
-          strictParseParams: true
-        });
-        const toMatches = router.matchRoutes(pathname);
-
-        const prevParams = _extends({}, (_last = last(fromMatches)) == null ? void 0 : _last.params);
+          // Default to reloading the route all the time
+          let shouldReload = true;
+          let shouldReloadDeps = typeof route.options.shouldReload === 'function' ? route.options.shouldReload?.(loaderContext) : !!(route.options.shouldReload ?? true);
+          if (match.cause === 'enter' || invalidate) {
+            match.shouldReloadDeps = shouldReloadDeps;
+          } else if (match.cause === 'stay') {
+            if (typeof shouldReloadDeps === 'object') {
+              // compare the deps to see if they've changed
+              shouldReload = !deepEqual(shouldReloadDeps, match.shouldReloadDeps);
+              match.shouldReloadDeps = shouldReloadDeps;
+            } else {
+              shouldReload = !!shouldReloadDeps;
+            }
+          }
 
-        let nextParams = ((_dest$params = dest.params) != null ? _dest$params : true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+          // If the user doesn't want the route to reload, just
+          // resolve with the existing loader data
 
-        if (nextParams) {
-          toMatches.map(d => d.options.stringifyParams).filter(Boolean).forEach(fn => {
-            Object.assign({}, nextParams, fn(nextParams));
-          });
+          if (!shouldReload) {
+            loadPromise = Promise.resolve(match.loaderData);
+          } else {
+            // Otherwise, load the route
+            matches[index] = match = {
+              ...match,
+              isFetching: true
+            };
+            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]);
+          }
         }
-
-        pathname = interpolatePath(pathname, nextParams != null ? nextParams : {}); // Pre filters first
-
-        const preFilteredSearch = (_dest$__preSearchFilt = dest.__preSearchFilters) != null && _dest$__preSearchFilt.length ? dest.__preSearchFilters.reduce((prev, next) => next(prev), router.location.search) : router.location.search; // Then the link/navigate function
-
-        const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
-        : dest.search ? (_functionalUpdate = functionalUpdate(dest.search, preFilteredSearch)) != null ? _functionalUpdate : {} // Updater
-        : (_dest$__preSearchFilt2 = dest.__preSearchFilters) != null && _dest$__preSearchFilt2.length ? preFilteredSearch // Preserve resolvedFrom filters
-        : {}; // Then post filters
-
-        const postFilteredSearch = (_dest$__postSearchFil = dest.__postSearchFilters) != null && _dest$__postSearchFil.length ? dest.__postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
-        const search = replaceEqualDeep(router.location.search, postFilteredSearch);
-        const searchStr = router.options.stringifySearch(search);
-        let hash = dest.hash === true ? router.location.hash : functionalUpdate(dest.hash, router.location.hash);
-        hash = hash ? "#" + hash : '';
-        return {
-          pathname,
-          search,
-          searchStr,
-          state: router.location.state,
-          hash,
-          href: "" + pathname + searchStr + hash,
-          key: dest.key
+        matches[index] = match = {
+          ...match,
+          loadPromise
         };
-      },
-      commitLocation: (next, replace) => {
-        const id = '' + Date.now() + Math.random();
-        if (router.navigateTimeout) clearTimeout(router.navigateTimeout);
-        let nextAction = 'replace';
-
-        if (!replace) {
-          nextAction = 'push';
-        }
-
-        const isSameUrl = router.__.parseLocation(history.location).href === next.href;
-
-        if (isSameUrl && !next.key) {
-          nextAction = 'replace';
-        }
-
-        if (nextAction === 'replace') {
-          history.replace({
-            pathname: next.pathname,
-            hash: next.hash,
-            search: next.searchStr
-          }, _extends({
-            id
-          }, next.state));
-        } else {
-          history.push({
-            pathname: next.pathname,
-            hash: next.hash,
-            search: next.searchStr
-          }, {
-            id
-          });
+        if (!preload) {
+          this.setState(s => ({
+            ...s,
+            matches: s.matches.map(d => d.id === match.id ? match : d)
+          }));
         }
-
-        router.navigationPromise = new Promise(resolve => {
-          const previousNavigationResolve = router.resolveNavigation;
-
-          router.resolveNavigation = () => {
-            previousNavigationResolve();
-            resolve();
-          };
+        let didShowPending = false;
+        await new Promise(async resolve => {
+          // If the route has a pending component and a pendingMs option,
+          // forcefully show the pending component
+          if (pendingPromise) {
+            pendingPromise.then(() => {
+              didShowPending = true;
+              matches[index] = match = {
+                ...match,
+                showPending: true
+              };
+              this.setState(s => ({
+                ...s,
+                matches: s.matches.map(d => d.id === match.id ? match : d)
+              }));
+              resolve();
+            });
+          }
+          try {
+            const loaderData = await loadPromise;
+            if (latestPromise = checkLatest()) return await latestPromise;
+            const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
+            if (didShowPending && pendingMinMs) {
+              await new Promise(r => setTimeout(r, pendingMinMs));
+            }
+            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 (handleIfRedirect(error)) return;
+            try {
+              route.options.onError?.(error);
+            } catch (onErrorError) {
+              error = onErrorError;
+              if (handleIfRedirect(onErrorError)) return;
+            }
+            matches[index] = match = {
+              ...match,
+              error,
+              status: 'error',
+              isFetching: false,
+              updatedAt: Date.now()
+            };
+          }
+          if (!preload) {
+            this.setState(s => ({
+              ...s,
+              matches: s.matches.map(d => d.id === match.id ? match : d)
+            }));
+          }
+          resolve();
         });
-        return router.navigationPromise;
-      }
-    }
+      })());
+    });
+    await Promise.all(matchPromises);
+    return matches;
   };
-  router.update(userOptions); // Allow frameworks to hook into the router creation
-
-  router.options.createRouter == null ? void 0 : router.options.createRouter(router);
-  return router;
-}
-
-function isCtrlEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
-}
-
-function cascadeLoaderData(matches) {
-  matches.forEach((match, index) => {
-    const parent = matches[index - 1];
-
-    if (parent) {
-      match.loaderData = replaceEqualDeep(match.loaderData, _extends({}, parent.loaderData, match.routeLoaderData));
-    }
-  });
-}
-
-const _excluded = ["type", "children", "target", "activeProps", "inactiveProps", "activeOptions", "disabled", "hash", "search", "params", "to", "preload", "preloadDelay", "preloadMaxAge", "replace", "style", "className", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd"],
-      _excluded2 = ["pending", "caseSensitive", "children"],
-      _excluded3 = ["children", "router"];
-function lazy(importer) {
-  const lazyComp = /*#__PURE__*/React.lazy(importer);
-  let promise;
-  let resolvedComp;
-  const forwardedComp = /*#__PURE__*/React.forwardRef((props, ref) => {
-    const resolvedCompRef = React.useRef(resolvedComp || lazyComp);
-    return /*#__PURE__*/React.createElement(resolvedCompRef.current, _extends$2({}, ref ? {
-      ref
-    } : {}, props));
+  invalidate = () => this.load({
+    invalidate: true
   });
-  const finalComp = forwardedComp;
-
-  finalComp.preload = () => {
-    if (!promise) {
-      promise = importer().then(module => {
-        resolvedComp = module.default;
-        return resolvedComp;
+  load = async opts => {
+    const promise = new Promise(async (resolve, reject) => {
+      const next = this.latestLocation;
+      const prevLocation = this.state.resolvedLocation;
+      const pathDidChange = prevLocation.href !== next.href;
+      let latestPromise;
+
+      // Cancel any pending matches
+      this.cancelMatches();
+      this.emit({
+        type: 'onBeforeLoad',
+        fromLocation: prevLocation,
+        toLocation: next,
+        pathChanged: pathDidChange
       });
-    }
-
-    return promise;
-  };
-
-  return finalComp;
-}
-//
-function Link(props) {
-  const router = useRouter();
-  return /*#__PURE__*/React.createElement(router.Link, props);
-}
-const matchesContext = /*#__PURE__*/React.createContext(null);
-const routerContext = /*#__PURE__*/React.createContext(null);
-function MatchesProvider(props) {
-  return /*#__PURE__*/React.createElement(matchesContext.Provider, props);
-}
-
-const useRouterSubscription = router => {
-  useSyncExternalStore(cb => router.subscribe(() => cb()), () => router.state, () => router.state);
-};
 
-function createReactRouter(opts) {
-  const makeRouteExt = (route, router) => {
-    return {
-      useRoute: function useRoute(subRouteId) {
-        if (subRouteId === void 0) {
-          subRouteId = '.';
+      // Match the routes
+      let matches = this.matchRoutes(next.pathname, next.search, {
+        debug: true
+      });
+      this.pendingMatches = matches;
+      const previousMatches = this.state.matches;
+
+      // Ingest the new matches
+      this.setState(s => ({
+        ...s,
+        status: 'pending',
+        location: next,
+        matches
+      }));
+      try {
+        try {
+          // Load the matches
+          await this.loadMatches({
+            matches,
+            checkLatest: () => this.checkLatest(promise),
+            invalidate: opts?.invalidate
+          });
+        } catch (err) {
+          // swallow this error, since we'll display the
+          // errors on the route components
         }
 
-        const resolvedRouteId = router.resolvePath(route.routeId, subRouteId);
-        const resolvedRoute = router.getRoute(resolvedRouteId);
-        useRouterSubscription(router);
-        invariant(resolvedRoute, "Could not find a route for route \"" + resolvedRouteId + "\"! Did you forget to add it to your route config?");
-        return resolvedRoute;
-      },
-      linkProps: options => {
-        var _functionalUpdate, _functionalUpdate2;
-
-        const {
-          // custom props
-          target,
-          activeProps = () => ({
-            className: 'active'
-          }),
-          inactiveProps = () => ({}),
-          disabled,
-          // element props
-          style,
-          className,
-          onClick,
-          onFocus,
-          onMouseEnter,
-          onMouseLeave
-        } = options,
-              rest = _objectWithoutPropertiesLoose(options, _excluded);
-
-        const linkInfo = route.buildLink(options);
-
-        if (linkInfo.type === 'external') {
-          const {
-            href
-          } = linkInfo;
-          return {
-            href
-          };
+        // Only apply the latest transition
+        if (latestPromise = this.checkLatest(promise)) {
+          return latestPromise;
         }
-
-        const {
-          handleClick,
-          handleFocus,
-          handleEnter,
-          handleLeave,
-          isActive,
-          next
-        } = linkInfo;
-
-        const reactHandleClick = e => {
-          React.startTransition(() => {
-            handleClick(e);
-          });
-        };
-
-        const composeHandlers = handlers => e => {
-          e.persist();
-          handlers.forEach(handler => {
-            if (handler) handler(e);
+        const exitingMatchIds = previousMatches.filter(id => !this.pendingMatches.includes(id));
+        const enteringMatchIds = this.pendingMatches.filter(id => !previousMatches.includes(id));
+        const stayingMatchIds = previousMatches.filter(id => this.pendingMatches.includes(id))
+
+        // setState((s) => ({
+        //   ...s,
+        //   status: 'idle',
+        //   resolvedLocation: s.location,
+        // }))
+
+        //
+        ;
+        [[exitingMatchIds, 'onLeave'], [enteringMatchIds, 'onEnter'], [stayingMatchIds, 'onTransition']].forEach(([matches, hook]) => {
+          matches.forEach(match => {
+            this.looseRoutesById[match.routeId].options[hook]?.(match);
           });
-        }; // Get the active props
-
-
-        const resolvedActiveProps = isActive ? (_functionalUpdate = functionalUpdate(activeProps, {})) != null ? _functionalUpdate : {} : {}; // Get the inactive props
-
-        const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = functionalUpdate(inactiveProps, {})) != null ? _functionalUpdate2 : {};
-        return _extends$2({}, resolvedActiveProps, resolvedInactiveProps, rest, {
-          href: disabled ? undefined : next.href,
-          onClick: composeHandlers([reactHandleClick, onClick]),
-          onFocus: composeHandlers([handleFocus, onFocus]),
-          onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
-          onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
-          target,
-          style: _extends$2({}, 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
         });
-      },
-      Link: /*#__PURE__*/React.forwardRef((props, ref) => {
-        const linkProps = route.linkProps(props);
-        useRouterSubscription(router);
-        return /*#__PURE__*/React.createElement("a", _extends$2({
-          ref: ref
-        }, linkProps, {
-          children: typeof props.children === 'function' ? props.children({
-            isActive: linkProps['data-status'] === 'active'
-          }) : props.children
-        }));
-      }),
-      MatchRoute: opts => {
-        const {
-          pending,
-          caseSensitive
-        } = opts,
-              rest = _objectWithoutPropertiesLoose(opts, _excluded2);
-
-        const params = route.matchRoute(rest, {
-          pending,
-          caseSensitive
+        this.emit({
+          type: 'onLoad',
+          fromLocation: prevLocation,
+          toLocation: next,
+          pathChanged: pathDidChange
         });
-
-        if (!params) {
-          return null;
+        resolve();
+      } catch (err) {
+        // Only apply the latest transition
+        if (latestPromise = this.checkLatest(promise)) {
+          return latestPromise;
         }
-
-        return typeof opts.children === 'function' ? opts.children(params) : opts.children;
+        reject(err);
       }
-    };
+    });
+    this.latestLoadPromise = promise;
+    return this.latestLoadPromise;
   };
-
-  const coreRouter = createRouter(_extends$2({}, opts, {
-    createRouter: router => {
-      const routerExt = {
-        useState: () => {
-          useRouterSubscription(router);
-          return router.state;
-        },
-        useMatch: (routeId, opts) => {
-          var _useMatches, _opts$strict;
-
-          useRouterSubscription(router);
-          invariant(routeId !== rootRouteId, "\"" + rootRouteId + "\" cannot be used with useMatch! Did you mean to useRoute(\"" + rootRouteId + "\")?");
-          const runtimeMatch = (_useMatches = useMatches()) == null ? void 0 : _useMatches[0];
-          const match = router.state.matches.find(d => d.routeId === routeId);
-
-          if ((_opts$strict = opts == null ? void 0 : opts.strict) != null ? _opts$strict : true) {
-            invariant(match, "Could not find an active match for \"" + routeId + "\"!");
-            invariant(runtimeMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch(\"" + (match == null ? void 0 : match.routeId) + "\") is being called in a component that is meant to render the '" + runtimeMatch.routeId + "' route. Did you mean to 'useMatch(\"" + (match == null ? void 0 : match.routeId) + "\", { strict: false })' or 'useRoute(\"" + (match == null ? void 0 : match.routeId) + "\")' instead?");
-          }
-
-          return match;
-        }
+  preloadRoute = async (navigateOpts = this.state.location) => {
+    let next = this.buildLocation(navigateOpts);
+    let matches = this.matchRoutes(next.pathname, next.search, {
+      throwOnError: true
+    });
+    await this.loadMatches({
+      matches,
+      preload: true,
+      checkLatest: () => undefined
+    });
+    return [last(matches), matches];
+  };
+  buildLink = dest => {
+    // 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 {
+      to,
+      preload: userPreload,
+      preloadDelay: userPreloadDelay,
+      activeOptions,
+      disabled,
+      target,
+      replace,
+      resetScroll,
+      startTransition
+    } = dest;
+    try {
+      new URL(`${to}`);
+      return {
+        type: 'external',
+        href: to
       };
-      const routeExt = makeRouteExt(router.getRoute(rootRouteId), router);
-      Object.assign(router, routerExt, routeExt);
-    },
-    createRoute: _ref => {
-      let {
-        router,
-        route
-      } = _ref;
-      const routeExt = makeRouteExt(route, router);
-      Object.assign(route, routeExt);
-    },
-    loadComponent: async component => {
-      if (component.preload && typeof document !== 'undefined') {
-        component.preload(); // return await component.preload()
+    } catch (e) {}
+    const nextOpts = dest;
+    const next = this.buildLocation(nextOpts);
+    const preload = userPreload ?? this.options.defaultPreload;
+    const preloadDelay = userPreloadDelay ?? this.options.defaultPreloadDelay ?? 0;
+
+    // Compare path/hash for matches
+    const currentPathSplit = this.latestLocation.pathname.split('/');
+    const nextPathSplit = next.pathname.split('/');
+    const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
+    // Combine the matches based on user this.options
+    const pathTest = activeOptions?.exact ? this.latestLocation.pathname === next.pathname : pathIsFuzzyEqual;
+    const hashTest = activeOptions?.includeHash ? this.latestLocation.hash === next.hash : true;
+    const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(this.latestLocation.search, next.search, true) : 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({
+          ...next,
+          replace,
+          resetScroll,
+          startTransition
+        });
       }
+    };
 
-      return component;
+    // The click handler
+    const handleFocus = e => {
+      if (preload) {
+        this.preloadRoute(nextOpts).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
+        });
+      }
+    };
+    const handleTouchStart = e => {
+      this.preloadRoute(nextOpts).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;
+          this.preloadRoute(nextOpts).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;
+      }
+    };
+    return {
+      type: 'internal',
+      next,
+      handleFocus,
+      handleClick,
+      handleEnter,
+      handleLeave,
+      handleTouchStart,
+      isActive,
+      disabled
+    };
+  };
+  matchRoute = (location, opts) => {
+    location = {
+      ...location,
+      to: location.to ? this.resolvePathWithBase(location.from || '', location.to) : undefined
+    };
+    const next = this.buildLocation(location);
+    if (opts?.pending && this.state.status !== 'pending') {
+      return false;
     }
-  }));
-  return coreRouter;
-}
-function RouterProvider(_ref2) {
-  var _router$options$useCo;
+    const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
 
-  let {
-    children,
-    router
-  } = _ref2,
-      rest = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-
-  router.update(rest);
-  const defaultRouterContext = React.useRef({});
-  const userContext = (_router$options$useCo = router.options.useContext == null ? void 0 : router.options.useContext()) != null ? _router$options$useCo : defaultRouterContext.current;
-  router.context = userContext;
-  useRouterSubscription(router);
-  React.useEffect(() => {
-    return router.mount();
-  }, [router]);
-  return /*#__PURE__*/React.createElement(routerContext.Provider, {
-    value: {
-      router: router
+    // const baseLocation = state.resolvedLocation
+
+    if (!baseLocation) {
+      return false;
     }
-  }, /*#__PURE__*/React.createElement(MatchesProvider, {
-    value: router.state.matches
-  }, children != null ? children : /*#__PURE__*/React.createElement(Outlet, null)));
-}
-function useRouter() {
-  const value = React.useContext(routerContext);
-  warning(!value, 'useRouter must be used inside a <Router> component!');
-  useRouterSubscription(value.router);
-  return value.router;
-}
-function useMatches() {
-  return React.useContext(matchesContext);
-}
-function useMatch(routeId, opts) {
-  const router = useRouter();
-  return router.useMatch(routeId, opts);
-}
-function useNearestMatch() {
-  var _useMatches2;
+    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>`;
+      });
+      return () => this.hydrateData(key);
+    }
+    return () => undefined;
+  };
+  hydrateData = key => {
+    if (typeof document !== 'undefined') {
+      const strKey = typeof key === 'string' ? key : JSON.stringify(key);
+      return window[`__TSR_DEHYDRATED__${strKey}`];
+    }
+    return undefined;
+  };
 
-  const runtimeMatch = (_useMatches2 = useMatches()) == null ? void 0 : _useMatches2[0];
-  invariant(runtimeMatch, "Could not find a nearest match!");
-  return runtimeMatch;
-}
-function useRoute(routeId) {
-  const router = useRouter();
-  return router.useRoute(routeId);
+  // dehydrate = (): DehydratedRouter => {
+  //   return {
+  //     state: {
+  //       dehydratedMatches: this.state.matches.map((d) =>
+  //         pick(d, ['fetchedAt', 'invalid', 'id', 'status', 'updatedAt']),
+  //       ),
+  //     },
+  //   }
+  // }
+
+  // hydrate = async (__do_not_use_server_ctx?: HydrationCtx) => {
+  //   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 as any
+  //   this.options.hydrate?.(ctx.payload as any)
+  //   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.setState((s) => {
+  //     return {
+  //       ...s,
+  //       matches: dehydratedState.dehydratedMatches as any,
+  //     }
+  //   })
+  // }
+
+  // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+  //   state.matches
+  //     .find((d) => d.id === matchId)
+  //     ?.__promisesByKey[key]?.resolve(value)
+  // }
 }
-function useSearch(_routeId) {
-  return useRouter().state.location.search;
-}
-function linkProps(props) {
-  const router = useRouter();
-  return router.linkProps(props);
+
+// 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);
+  };
 }
-function MatchRoute(props) {
-  const router = useRouter();
-  return /*#__PURE__*/React.createElement(router.MatchRoute, props);
+function isCtrlEvent(e) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 }
-function Outlet() {
-  var _ref3, _match$__$pendingComp, _match$__$errorCompon;
 
+const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const windowKey = 'window';
+const delimiter = '___';
+let weakScrolledElements = new WeakSet();
+let cache;
+const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
+const defaultGetKey = location => location.state.key;
+function useScrollRestoration(options) {
   const router = useRouter();
-  const matches = useMatches().slice(1);
-  const match = matches[0];
-  const defaultPending = React.useCallback(() => null, []);
-
-  if (!match) {
-    return null;
-  }
-
-  const PendingComponent = (_ref3 = (_match$__$pendingComp = match.__.pendingComponent) != null ? _match$__$pendingComp : router.options.defaultPendingComponent) != null ? _ref3 : defaultPending;
-  const errorComponent = (_match$__$errorCompon = match.__.errorComponent) != null ? _match$__$errorCompon : router.options.defaultErrorComponent;
-  return /*#__PURE__*/React.createElement(MatchesProvider, {
-    value: matches
-  }, /*#__PURE__*/React.createElement(React.Suspense, {
-    fallback: /*#__PURE__*/React.createElement(PendingComponent, null)
-  }, /*#__PURE__*/React.createElement(CatchBoundary, {
-    errorComponent: errorComponent
-  }, (() => {
-    if (match.status === 'error') {
-      throw match.error;
+  useLayoutEffect(() => {
+    const getKey = options?.getKey || defaultGetKey;
+    if (sessionsStorage) {
+      if (!cache) {
+        cache = (() => {
+          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));
+            }
+          };
+        })();
+      }
     }
-
-    if (match.status === 'success') {
-      var _ref4, _ref5;
-
-      return /*#__PURE__*/React.createElement((_ref4 = (_ref5 = match.__.component) != null ? _ref5 : router.options.defaultComponent) != null ? _ref4 : Outlet);
+    const {
+      history
+    } = window;
+    if (history.scrollRestoration) {
+      history.scrollRestoration = 'manual';
     }
-
-    throw match.__.loadPromise;
-  })())));
-}
-
-class CatchBoundary extends React.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      error: false
+    const onScroll = event => {
+      if (weakScrolledElements.has(event.target)) return;
+      weakScrolledElements.add(event.target);
+      const elementSelector = event.target === document || event.target === window ? windowKey : getCssSelector(event.target);
+      if (!cache.state.next[elementSelector]) {
+        cache.set(c => ({
+          ...c,
+          next: {
+            ...c.next,
+            [elementSelector]: {
+              scrollX: NaN,
+              scrollY: NaN
+            }
+          }
+        }));
+      }
     };
-  }
-
-  componentDidCatch(error, info) {
-    console.error(error);
-    this.setState({
-      error,
-      info
-    });
-  }
-
-  render() {
-    var _this$props$errorComp;
-
-    const errorComponent = (_this$props$errorComp = this.props.errorComponent) != null ? _this$props$errorComp : DefaultErrorBoundary;
-
-    if (this.state.error) {
-      return /*#__PURE__*/React.createElement(errorComponent, this.state);
+    const getCssSelector = el => {
+      let path = [],
+        parent;
+      while (parent = el.parentNode) {
+        path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
+        el = parent;
+      }
+      return `${path.join(' > ')}`.toLowerCase();
+    };
+    if (typeof document !== 'undefined') {
+      document.addEventListener('scroll', onScroll, true);
     }
-
-    return this.props.children;
-  }
-
+    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
+              }
+            };
+          });
+        }
+      }
+    });
+    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 DefaultErrorBoundary(_ref6) {
-  let {
-    error
-  } = _ref6;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '.5rem',
-      maxWidth: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("strong", {
-    style: {
-      fontSize: '1.2rem'
-    }
-  }, "Something went wrong!"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '.5rem'
-    }
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", null, error.message ? /*#__PURE__*/React.createElement("code", {
-    style: {
-      fontSize: '.7em',
-      border: '1px solid red',
-      borderRadius: '.25rem',
-      padding: '.5rem',
-      color: 'red'
-    }
-  }, error.message) : null)));
+function ScrollRestoration(props) {
+  useScrollRestoration(props);
+  return null;
 }
-function usePrompt(message, when) {
-  const router = useRouter();
+
+function useBlocker(message, condition = true) {
+  const {
+    history
+  } = useRouter();
   React.useEffect(() => {
-    if (!when) return;
-    let unblock = router.history.block(transition => {
+    if (!condition) return;
+    let unblock = history.block((retry, cancel) => {
       if (window.confirm(message)) {
         unblock();
-        transition.retry();
-      } else {
-        router.location.pathname = window.location.pathname;
+        retry();
       }
     });
     return unblock;
-  }, [when, location, message]);
+  });
+}
+function Block({
+  message,
+  condition,
+  children
+}) {
+  useBlocker(message, condition);
+  return children ?? null;
+}
+
+function useNavigate(defaultOpts) {
+  const {
+    navigate
+  } = useRouter();
+  const match = useMatch({
+    strict: false
+  });
+  return React.useCallback(opts => {
+    return navigate({
+      from: opts?.to ? match.pathname : undefined,
+      ...defaultOpts,
+      ...opts
+    });
+  }, []);
 }
-function Prompt(_ref7) {
-  let {
-    message,
-    when,
-    children
-  } = _ref7;
-  usePrompt(message, when != null ? when : true);
-  return children != null ? children : null;
+function typedNavigate(navigate) {
+  return navigate;
+} //
+
+function Navigate(props) {
+  const {
+    navigate
+  } = useRouter();
+  const match = useMatch({
+    strict: false
+  });
+  useLayoutEffect$1(() => {
+    navigate({
+      from: props.to ? match.pathname : undefined,
+      ...props
+    });
+  }, []);
+  return null;
 }
 
-export { DefaultErrorBoundary, Link, MatchRoute, MatchesProvider, Outlet, Prompt, RouterProvider, cleanPath, createBrowserHistory, createHashHistory, createMemoryHistory, createReactRouter, createRoute, createRouteConfig, createRouteMatch, createRouter, decode, defaultParseSearch, defaultStringifySearch, encode, functionalUpdate, interpolatePath, invariant, joinPaths, last, lazy, linkProps, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, pick, replaceEqualDeep, resolvePath, rootRouteId, routerContext, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useMatch, useMatches, useNearestMatch, usePrompt, useRoute, useRouter, useSearch, warning };
+export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, Outlet, PathParamError, RootRoute, Route, Router, RouterProvider, ScrollRestoration, SearchParamError, cleanPath, componentTypes, createRouteMask, decode, deepEqual, defaultParseSearch, defaultStringifySearch, defer, encode, escapeJSON, functionalUpdate, getInitialRouterState, getRouteMatch, interpolatePath, isDehydratedDeferred, isPlainObject, isRedirect, isServer, joinPaths, last, lazyFn, lazyRouteComponent, matchByPath, matchPathname, matchesContext, parsePathname, parseSearchWith, pick, redirect, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, typedNavigate, useAwaited, useBlocker, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map