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

package/build/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * react-router
+ * @tanstack/react-router/src/index.tsx
  *
  * Copyright (c) TanStack
  *
@@ -8,255 +8,413 @@
  *
  * @license MIT
  */
+import { createBrowserHistory, createMemoryHistory } 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 { functionalUpdate, Router, warning, invariant, last } from '@tanstack/router';
-export * from '@tanstack/router';
 import { useStore } from '@tanstack/react-store';
-export { useStore } from '@tanstack/react-store';
+import { Store } from '@tanstack/store';
 
-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];
-        }
+function CatchBoundary(props) {
+  const errorComponent = props.errorComponent ?? ErrorComponent;
+  return /*#__PURE__*/React.createElement(CatchBoundaryImpl, {
+    getResetKey: props.getResetKey,
+    onCatch: props.onCatch,
+    children: ({
+      error
+    }) => {
+      if (error) {
+        return /*#__PURE__*/React.createElement(errorComponent, {
+          error
+        });
       }
+      return props.children;
     }
-    return target;
+  });
+}
+class CatchBoundaryImpl extends React.Component {
+  state = {
+    error: null
   };
-  return _extends.apply(this, arguments);
+  static getDerivedStateFromProps(props) {
+    return {
+      resetKey: props.getResetKey()
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.error && prevState.resetKey !== this.state.resetKey) {
+      this.setState({
+        error: null
+      });
+    }
+  }
+  componentDidCatch(error) {
+    console.error(error);
+    this.props.onCatch?.(error);
+  }
+  render() {
+    return this.props.children(this.state);
+  }
+}
+function ErrorComponent({
+  error
+}) {
+  const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production');
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '.5rem',
+      maxWidth: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
+    }
+  }, /*#__PURE__*/React.createElement("strong", {
+    style: {
+      fontSize: '1rem'
+    }
+  }, "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'
+    }
+  }), 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);
 }
 
+// export type Expand<T> = T
+
+// type Compute<T> = { [K in keyof T]: T[K] } | never
+
+// type AllKeys<T> = T extends any ? keyof T : never
+
+// export type MergeUnion<T, Keys extends keyof T = keyof T> = Compute<
+//   {
+//     [K in Keys]: T[Keys]
+//   } & {
+//     [K in AllKeys<T>]?: T extends any
+//       ? K extends keyof T
+//         ? T[K]
+//         : never
+//       : never
+//   }
+// >
+
+// // Sample types to merge
+// type TypeA = {
+//   shared: string
+//   onlyInA: string
+//   nested: {
+//     shared: string
+//     aProp: string
+//   }
+//   array: string[]
+// }
+
+// type TypeB = {
+//   shared: number
+//   onlyInB: number
+//   nested: {
+//     shared: number
+//     bProp: number
+//   }
+//   array: number[]
+// }
+
+// type TypeC = {
+//   shared: boolean
+//   onlyInC: boolean
+//   nested: {
+//     shared: boolean
+//     cProp: boolean
+//   }
+//   array: boolean[]
+// }
+
+// type Test = Expand<Assign<TypeA, TypeB>>
+
+// // Using DeepMerge to merge TypeA and TypeB
+// type MergedType = Expand<AssignAll<[TypeA, TypeB, TypeC]>>
+
+// from https://github.com/type-challenges/type-challenges/issues/737
+
 //
 
-function lazy(importer) {
-  const lazyComp = /*#__PURE__*/React.lazy(importer);
-  const finalComp = lazyComp;
-  finalComp.preload = async () => {
-    {
-      await importer();
-    }
-  };
-  return finalComp;
+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 useLinkProps(options) {
-  const router = useRouterContext();
-  const {
-    // custom props
-    type,
-    children,
-    target,
-    activeProps = () => ({
-      className: 'active'
-    }),
-    inactiveProps = () => ({}),
-    activeOptions,
-    disabled,
-    // fromCurrent,
-    hash,
-    search,
-    params,
-    to = '.',
-    preload,
-    preloadDelay,
-    replace,
-    // element props
-    style,
-    className,
-    onClick,
-    onFocus,
-    onMouseEnter,
-    onMouseLeave,
-    onTouchStart,
-    ...rest
-  } = options;
-  const linkInfo = router.buildLink(options);
-  if (linkInfo.type === 'external') {
-    const {
-      href
-    } = linkInfo;
-    return {
-      href
-    };
+/**
+ * This function returns `a` if `b` is deeply equal.
+ * If not, it will replace any deeply equal children of `b` with those of `a`.
+ * This can be used for structural sharing between immutable JSON values for example.
+ * Do not use this with signals
+ */
+function replaceEqualDeep(prev, _next) {
+  if (prev === _next) {
+    return prev;
   }
-  const {
-    handleClick,
-    handleFocus,
-    handleEnter,
-    handleLeave,
-    handleTouchStart,
-    isActive,
-    next
-  } = linkInfo;
-  const reactHandleClick = e => {
-    if (React.startTransition) {
-      // This is a hack for react < 18
-      React.startTransition(() => {
-        handleClick(e);
-      });
-    } else {
-      handleClick(e);
+  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++;
+      }
     }
-  };
-  const composeHandlers = handlers => e => {
-    if (e.persist) e.persist();
-    handlers.filter(Boolean).forEach(handler => {
-      if (e.defaultPrevented) return;
-      handler(e);
-    });
-  };
+    return prevSize === nextSize && equalItems === prevSize ? prev : copy;
+  }
+  return next;
+}
 
-  // Get the active props
-  const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
+// Copied from: https://github.com/jonschlinkert/is-plain-object
+function isPlainObject(o) {
+  if (!hasObjectPrototype(o)) {
+    return false;
+  }
 
-  // Get the inactive props
-  const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
-  return {
-    ...resolvedActiveProps,
-    ...resolvedInactiveProps,
-    ...rest,
-    href: disabled ? undefined : next.href,
-    onClick: composeHandlers([onClick, reactHandleClick]),
-    onFocus: composeHandlers([onFocus, handleFocus]),
-    onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
-    onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
-    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
-    target,
-    style: {
-      ...style,
-      ...resolvedActiveProps.style,
-      ...resolvedInactiveProps.style
-    },
-    className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
-    ...(disabled ? {
-      role: 'link',
-      'aria-disabled': true
-    } : undefined),
-    ['data-status']: isActive ? 'active' : undefined
-  };
+  // 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;
 }
-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 Navigate(props) {
-  const router = useRouterContext();
-  React.useLayoutEffect(() => {
-    router.navigate(props);
-  }, []);
-  return null;
+function hasObjectPrototype(o) {
+  return Object.prototype.toString.call(o) === '[object Object]';
 }
-const matchesContext = /*#__PURE__*/React.createContext(null);
-const routerContext = /*#__PURE__*/React.createContext(null);
-class ReactRouter extends Router {
-  constructor(opts) {
-    super({
-      ...opts,
-      loadComponent: async component => {
-        if (component.preload) {
-          await component.preload();
-        }
-        return component;
-      }
-    });
+function deepEqual(a, b, partial = false) {
+  if (a === b) {
+    return true;
+  }
+  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 !bKeys.some(key => !(key in a) || !deepEqual(a[key], b[key], partial));
+  }
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return !a.some((item, index) => !deepEqual(item, b[index], partial));
+  }
+  return false;
 }
-function RouterProvider({
-  router,
-  ...rest
-}) {
-  router.update(rest);
-  const currentMatches = useStore(router.__store, s => s.currentMatches);
-  React.useEffect(router.mount, [router]);
-  return /*#__PURE__*/React.createElement(routerContext.Provider, {
-    value: {
-      router: router
-    }
-  }, /*#__PURE__*/React.createElement(matchesContext.Provider, {
-    value: [undefined, ...currentMatches]
+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;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+function useRouteContext(opts) {
+  return useMatch({
+    ...opts,
+    select: match => opts?.select ? opts.select(match.context) : match.context
+  });
+}
+const useLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+function escapeJSON(jsonString) {
+  return jsonString.replace(/\\/g, '\\\\') // Escape backslashes
+  .replace(/'/g, "\\'") // Escape single quotes
+  .replace(/"/g, '\\"'); // Escape double quotes
+}
+
+const matchContext = /*#__PURE__*/React.createContext(undefined);
+function Matches() {
+  const router = useRouter();
+  const matchId = useRouterState({
+    select: s => {
+      return getRenderedMatches(s)[0]?.id;
+    }
+  });
+  return /*#__PURE__*/React.createElement(matchContext.Provider, {
+    value: matchId
   }, /*#__PURE__*/React.createElement(CatchBoundary, {
+    getResetKey: () => router.state.resolvedLocation.state?.key,
     errorComponent: ErrorComponent,
     onCatch: () => {
       warning(false, `Error in router! Consider setting an 'errorComponent' in your RootRoute! 👍`);
     }
-  }, /*#__PURE__*/React.createElement(Outlet, null))));
-}
-function useRouterContext() {
-  const value = React.useContext(routerContext);
-  warning(value, 'useRouter must be used inside a <Router> component!');
-  useStore(value.router.__store);
-  return value.router;
+  }, matchId ? /*#__PURE__*/React.createElement(Match, {
+    matchId: matchId
+  }) : null));
 }
-function useRouter(track, shallow) {
-  const router = useRouterContext();
-  useStore(router.__store, track, shallow);
-  return router;
+function SafeFragment(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
 }
-function useMatches() {
-  return React.useContext(matchesContext);
+function Match({
+  matchId
+}) {
+  const router = useRouter();
+  const routeId = useRouterState({
+    select: s => getRenderedMatches(s).find(d => d.id === matchId)?.routeId
+  });
+  invariant(routeId, `Could not find routeId for matchId "${matchId}". Please file an issue!`);
+  const route = router.routesById[routeId];
+  const PendingComponent = route.options.pendingComponent ?? router.options.defaultPendingComponent;
+  const pendingElement = PendingComponent ? /*#__PURE__*/React.createElement(PendingComponent, null) : null;
+  const routeErrorComponent = route.options.errorComponent ?? router.options.defaultErrorComponent ?? ErrorComponent;
+  const ResolvedSuspenseBoundary = route.options.wrapInSuspense ?? PendingComponent ?? route.options.component?.preload ?? route.options.pendingComponent?.preload ?? route.options.errorComponent?.preload ? React.Suspense : SafeFragment;
+  const ResolvedCatchBoundary = routeErrorComponent ? CatchBoundary : SafeFragment;
+  return /*#__PURE__*/React.createElement(matchContext.Provider, {
+    value: matchId
+  }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
+    fallback: pendingElement
+  }, /*#__PURE__*/React.createElement(ResolvedCatchBoundary, {
+    getResetKey: () => router.state.resolvedLocation.state?.key,
+    errorComponent: routeErrorComponent,
+    onCatch: () => {
+      warning(false, `Error in route match: ${matchId}`);
+    }
+  }, /*#__PURE__*/React.createElement(MatchInner, {
+    matchId: matchId,
+    pendingElement: pendingElement
+  }))));
 }
-function useMatch(opts) {
-  const router = useRouterContext();
-  const nearestMatch = useMatches()[0];
-  const match = opts?.from ? router.state.currentMatches.find(d => d.route.id === opts?.from) : nearestMatch;
-  invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
-  if (opts?.strict ?? true) {
-    invariant(nearestMatch.route.id == match?.route.id, `useMatch("${match?.route.id}") is being called in a component that is meant to render the '${nearestMatch.route.id}' route. Did you mean to 'useMatch("${match?.route.id}", { strict: false })' or 'useRoute("${match?.route.id}")' instead?`);
+function MatchInner({
+  matchId,
+  pendingElement
+}) {
+  const router = useRouter();
+  const routeId = useRouterState({
+    select: s => getRenderedMatches(s).find(d => d.id === matchId)?.routeId
+  });
+  const route = router.routesById[routeId];
+  const match = useRouterState({
+    select: s => pick(getRenderedMatches(s).find(d => d.id === matchId), ['status', 'error', 'showPending', 'loadPromise'])
+  });
+  if (match.status === 'error') {
+    throw match.error;
   }
-  useStore(match.__store, d => opts?.track?.(match) ?? match, opts?.shallow);
-  return match;
-}
-function useRoute(routeId) {
-  const router = useRouterContext();
-  const resolvedRoute = router.getRoute(routeId);
-  invariant(resolvedRoute, `Could not find a route for route "${routeId}"! Did you forget to add it to your route?`);
-  return resolvedRoute;
-}
-function useSearch(opts) {
-  const {
-    track,
-    ...matchOpts
-  } = opts;
-  const match = useMatch(matchOpts);
-  useStore(match.__store, d => opts?.track?.(d.search) ?? d.search, true);
-  return match.state.search;
-}
-function useParams(opts) {
-  const router = useRouterContext();
-  useStore(router.__store, d => {
-    const params = last(d.currentMatches)?.params;
-    return opts?.track?.(params) ?? params;
-  }, true);
-  return last(router.state.currentMatches)?.params;
-}
-function useNavigate(defaultOpts) {
-  const router = useRouterContext();
-  return React.useCallback(opts => {
-    return router.navigate({
-      ...defaultOpts,
-      ...opts
-    });
-  }, []);
+  if (match.status === 'pending') {
+    if (match.showPending) {
+      return pendingElement;
+    }
+    throw match.loadPromise;
+  }
+  if (match.status === 'success') {
+    let Comp = route.options.component ?? router.options.defaultComponent;
+    if (Comp) {
+      return /*#__PURE__*/React.createElement(Comp, null);
+    }
+    return /*#__PURE__*/React.createElement(Outlet, null);
+  }
+  invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
 }
+const Outlet = /*#__PURE__*/React.memo(function Outlet() {
+  const matchId = React.useContext(matchContext);
+  const childMatchId = useRouterState({
+    select: s => {
+      const matches = getRenderedMatches(s);
+      const index = matches.findIndex(d => d.id === matchId);
+      return matches[index + 1]?.id;
+    }
+  });
+  if (!childMatchId) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Match, {
+    matchId: childMatchId
+  });
+});
 function useMatchRoute() {
-  const router = useRouterContext();
+  useRouterState({
+    select: s => [s.location, s.resolvedLocation]
+  });
+  const {
+    matchRoute
+  } = useRouter();
   return React.useCallback(opts => {
     const {
       pending,
       caseSensitive,
       ...rest
     } = opts;
-    return router.matchRoute(rest, {
+    return matchRoute(rest, {
       pending,
       caseSensitive
     });
@@ -265,165 +423,2251 @@ function useMatchRoute() {
 function MatchRoute(props) {
   const matchRoute = useMatchRoute();
   const params = matchRoute(props);
-  if (!params) {
-    return null;
-  }
   if (typeof props.children === 'function') {
     return props.children(params);
   }
-  return params ? props.children : null;
+  return !!params ? props.children : null;
 }
-function Outlet() {
-  const matches = useMatches().slice(1);
-  const match = matches[0];
-  if (!match) {
-    return null;
+function getRenderedMatches(state) {
+  return state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
+}
+function useMatch(opts) {
+  const router = useRouter();
+  const nearestMatchId = React.useContext(matchContext);
+  const nearestMatchRouteId = getRenderedMatches(router.state).find(d => d.id === nearestMatchId)?.routeId;
+  const matchRouteId = (() => {
+    const matches = getRenderedMatches(router.state);
+    const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
+    return match.routeId;
+  })();
+  if (opts?.strict ?? true) {
+    invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
   }
-  return /*#__PURE__*/React.createElement(SubOutlet, {
-    matches: matches,
-    match: match
+  const matchSelection = useRouterState({
+    select: state => {
+      const match = getRenderedMatches(state).find(d => d.id === nearestMatchId);
+      invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+      return opts?.select ? opts.select(match) : match;
+    }
   });
+  return matchSelection;
 }
-function SubOutlet({
-  matches,
-  match
-}) {
-  const router = useRouterContext();
-  useStore(match.__store, store => [store.status, store.error], true);
-  const defaultPending = React.useCallback(() => null, []);
-  const PendingComponent = match.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
-  const errorComponent = match.errorComponent ?? router.options.defaultErrorComponent;
-  const ResolvedSuspenseBoundary = match.route.options.wrapInSuspense ?? true ? React.Suspense : SafeFragment;
-  const ResolvedCatchBoundary = errorComponent ? CatchBoundary : SafeFragment;
-  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
-    value: matches
-  }, /*#__PURE__*/React.createElement(ResolvedSuspenseBoundary, {
-    fallback: /*#__PURE__*/React.createElement(PendingComponent, null)
-  }, /*#__PURE__*/React.createElement(ResolvedCatchBoundary, {
-    key: match.route.id,
-    errorComponent: errorComponent,
-    onCatch: () => {
-      warning(false, `Error in route match: ${match.id}`);
+function useMatches(opts) {
+  return useRouterState({
+    select: state => {
+      let matches = getRenderedMatches(state);
+      return opts?.select ? opts.select(matches) : matches;
     }
-  }, /*#__PURE__*/React.createElement(Inner, {
-    match: match
-  }))));
+  });
 }
-function Inner(props) {
-  const router = useRouterContext();
-  if (props.match.state.status === 'error') {
-    throw props.match.state.error;
-  }
-  if (props.match.state.status === 'success') {
-    return /*#__PURE__*/React.createElement(props.match.component ?? router.options.defaultComponent ?? Outlet);
-  }
-  if (props.match.state.status === 'pending') {
-    throw props.match.__loadPromise;
-  }
-  invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+function useParentMatches(opts) {
+  const contextMatchId = React.useContext(matchContext);
+  return useMatches({
+    select: matches => {
+      matches = matches.slice(matches.findIndex(d => d.id === contextMatchId));
+      return opts?.select ? opts.select(matches) : matches;
+    }
+  });
 }
-function SafeFragment(props) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+function useLoaderDeps(opts) {
+  return useMatch({
+    ...opts,
+    select: s => {
+      return typeof opts.select === 'function' ? opts.select(s?.loaderDeps) : s?.loaderDeps;
+    }
+  });
+}
+function useLoaderData(opts) {
+  return useMatch({
+    ...opts,
+    select: s => {
+      return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
+    }
+  });
 }
 
-// This is the messiest thing ever... I'm either seriously tired (likely) or
-// there has to be a better way to reset error boundaries when the
-// router's location key changes.
-
-class CatchBoundary extends React.Component {
-  state = {
-    error: false,
-    info: undefined
+let routerContext = /*#__PURE__*/React.createContext(null);
+if (typeof document !== 'undefined') {
+  if (window.__TSR_ROUTER_CONTEXT__) {
+    routerContext = window.__TSR_ROUTER_CONTEXT__;
+  } else {
+    window.__TSR_ROUTER_CONTEXT__ = routerContext;
+  }
+}
+function RouterProvider({
+  router,
+  ...rest
+}) {
+  // Allow the router to update options on the router instance
+  router.update({
+    ...router.options,
+    ...rest,
+    context: {
+      ...router.options.context,
+      ...rest?.context
+    }
+  });
+  const matches = router.options.InnerWrap ? /*#__PURE__*/React.createElement(router.options.InnerWrap, null, /*#__PURE__*/React.createElement(Matches, null)) : /*#__PURE__*/React.createElement(Matches, null);
+  const provider = /*#__PURE__*/React.createElement(routerContext.Provider, {
+    value: router
+  }, matches, /*#__PURE__*/React.createElement(Transitioner, null));
+  if (router.options.Wrap) {
+    return /*#__PURE__*/React.createElement(router.options.Wrap, null, provider);
+  }
+  return provider;
+}
+function Transitioner() {
+  const router = useRouter();
+  const routerState = useRouterState({
+    select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+  });
+  const [isTransitioning, startReactTransition] = React.useTransition();
+  router.startReactTransition = startReactTransition;
+  React.useEffect(() => {
+    if (isTransitioning) {
+      router.__store.setState(s => ({
+        ...s,
+        isTransitioning
+      }));
+    }
+  }, [isTransitioning]);
+  const tryLoad = () => {
+    const apply = cb => {
+      if (!routerState.isTransitioning) {
+        startReactTransition(() => cb());
+      } else {
+        cb();
+      }
+    };
+    apply(() => {
+      try {
+        router.load();
+      } catch (err) {
+        console.error(err);
+      }
+    });
+  };
+  useLayoutEffect$1(() => {
+    const unsub = router.history.subscribe(() => {
+      router.latestLocation = router.parseLocation(router.latestLocation);
+      if (routerState.location !== router.latestLocation) {
+        tryLoad();
+      }
+    });
+    const nextLocation = router.buildLocation({
+      search: true,
+      params: true,
+      hash: true,
+      state: true
+    });
+    if (routerState.location.href !== nextLocation.href) {
+      router.commitLocation({
+        ...nextLocation,
+        replace: true
+      });
+    }
+    return () => {
+      unsub();
+    };
+  }, [router.history]);
+  useLayoutEffect$1(() => {
+    if (routerState.isTransitioning && !isTransitioning && !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
+      router.emit({
+        type: 'onResolved',
+        fromLocation: routerState.resolvedLocation,
+        toLocation: routerState.location,
+        pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
+      });
+      if (document.querySelector) {
+        if (routerState.location.hash !== '') {
+          const el = document.getElementById(routerState.location.hash);
+          if (el) {
+            el.scrollIntoView();
+          }
+        }
+      }
+      router.__store.setState(s => ({
+        ...s,
+        isTransitioning: false,
+        resolvedLocation: s.location
+      }));
+    }
+  }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
+  useLayoutEffect$1(() => {
+    if (!window.__TSR_DEHYDRATED__) {
+      tryLoad();
+    }
+  }, []);
+  return null;
+}
+function getRouteMatch(state, id) {
+  return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+}
+function useRouterState(opts) {
+  const router = useRouter();
+  return useStore(router.__store, opts?.select);
+}
+function useRouter() {
+  const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
+  const value = React.useContext(resolvedContext);
+  warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+  return value;
+}
+
+function defer(_promise) {
+  const promise = _promise;
+  if (!promise.__deferredState) {
+    promise.__deferredState = {
+      uid: Math.random().toString(36).slice(2),
+      status: 'pending'
+    };
+    const state = promise.__deferredState;
+    promise.then(data => {
+      state.status = 'success';
+      state.data = data;
+    }).catch(error => {
+      state.status = 'error';
+      state.error = error;
+    });
+  }
+  return promise;
+}
+function isDehydratedDeferred(obj) {
+  return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+}
+
+function useAwaited({
+  promise
+}) {
+  const router = useRouter();
+  let state = promise.__deferredState;
+  const key = `__TSR__DEFERRED__${state.uid}`;
+  if (isDehydratedDeferred(promise)) {
+    state = router.hydrateData(key);
+    promise = Promise.resolve(state.data);
+    promise.__deferredState = state;
+  }
+  if (state.status === 'pending') {
+    throw new Promise(r => setTimeout(r, 1)).then(() => promise);
+  }
+  if (state.status === 'error') {
+    throw state.error;
+  }
+  router.dehydrateData(key, state);
+  return [state.data];
+}
+function Await(props) {
+  const awaited = useAwaited(props);
+  return props.children(...awaited);
+}
+
+function joinPaths(paths) {
+  return cleanPath(paths.filter(Boolean).join('/'));
+}
+function cleanPath(path) {
+  // remove double slashes
+  return path.replace(/\/{2,}/g, '/');
+}
+function trimPathLeft(path) {
+  return path === '/' ? path : path.replace(/^\/{1,}/, '');
+}
+function trimPathRight(path) {
+  return path === '/' ? path : path.replace(/\/{1,}$/, '');
+}
+function trimPath(path) {
+  return trimPathRight(trimPathLeft(path));
+}
+function resolvePath(basepath, base, to) {
+  base = base.replace(new RegExp(`^${basepath}`), '/');
+  to = to.replace(new RegExp(`^${basepath}`), '/');
+  let baseSegments = parsePathname(base);
+  const toSegments = parsePathname(to);
+  toSegments.forEach((toSegment, index) => {
+    if (toSegment.value === '/') {
+      if (!index) {
+        // Leading slash
+        baseSegments = [toSegment];
+      } else if (index === toSegments.length - 1) {
+        // Trailing Slash
+        baseSegments.push(toSegment);
+      } else ;
+    } else if (toSegment.value === '..') {
+      // Extra trailing slash? pop it off
+      if (baseSegments.length > 1 && last(baseSegments)?.value === '/') {
+        baseSegments.pop();
+      }
+      baseSegments.pop();
+    } else if (toSegment.value === '.') {
+      return;
+    } else {
+      baseSegments.push(toSegment);
+    }
+  });
+  const joined = joinPaths([basepath, ...baseSegments.map(d => d.value)]);
+  return cleanPath(joined);
+}
+function parsePathname(pathname) {
+  if (!pathname) {
+    return [];
+  }
+  pathname = cleanPath(pathname);
+  const segments = [];
+  if (pathname.slice(0, 1) === '/') {
+    pathname = pathname.substring(1);
+    segments.push({
+      type: 'pathname',
+      value: '/'
+    });
+  }
+  if (!pathname) {
+    return segments;
+  }
+
+  // Remove empty segments and '.' segments
+  const split = pathname.split('/').filter(Boolean);
+  segments.push(...split.map(part => {
+    if (part === '$' || part === '*') {
+      return {
+        type: 'wildcard',
+        value: part
+      };
+    }
+    if (part.charAt(0) === '$') {
+      return {
+        type: 'param',
+        value: part
+      };
+    }
+    return {
+      type: 'pathname',
+      value: part
+    };
+  }));
+  if (pathname.slice(-1) === '/') {
+    pathname = pathname.substring(1);
+    segments.push({
+      type: 'pathname',
+      value: '/'
+    });
+  }
+  return segments;
+}
+function interpolatePath(path, params, leaveWildcards = false) {
+  const interpolatedPathSegments = parsePathname(path);
+  return joinPaths(interpolatedPathSegments.map(segment => {
+    if (segment.type === 'wildcard') {
+      const value = params[segment.value];
+      if (leaveWildcards) return `${segment.value}${value ?? ''}`;
+      return value;
+    }
+    if (segment.type === 'param') {
+      return params[segment.value.substring(1)] ?? 'undefined';
+    }
+    return segment.value;
+  }));
+}
+function matchPathname(basepath, currentPathname, matchLocation) {
+  const pathParams = matchByPath(basepath, currentPathname, matchLocation);
+  // const searchMatched = matchBySearch(location.search, matchLocation)
+
+  if (matchLocation.to && !pathParams) {
+    return;
+  }
+  return pathParams ?? {};
+}
+function removeBasepath(basepath, pathname) {
+  return basepath != '/' ? pathname.substring(basepath.length) : pathname;
+}
+function matchByPath(basepath, from, matchLocation) {
+  // Remove the base path from the pathname
+  from = removeBasepath(basepath, from);
+  // Default to to $ (wildcard)
+  const to = `${matchLocation.to ?? '$'}`;
+  // Parse the from and to
+  const baseSegments = parsePathname(from);
+  const routeSegments = parsePathname(to);
+  if (!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 isLastBaseSegment = i >= baseSegments.length - 1;
+      const isLastRouteSegment = i >= routeSegments.length - 1;
+      if (routeSegment) {
+        if (routeSegment.type === 'wildcard') {
+          if (baseSegment?.value) {
+            params['*'] = joinPaths(baseSegments.slice(i).map(d => d.value));
+            return true;
+          }
+          return false;
+        }
+        if (routeSegment.type === 'pathname') {
+          if (routeSegment.value === '/' && !baseSegment?.value) {
+            return true;
+          }
+          if (baseSegment) {
+            if (matchLocation.caseSensitive) {
+              if (routeSegment.value !== baseSegment.value) {
+                return false;
+              }
+            } else if (routeSegment.value.toLowerCase() !== baseSegment.value.toLowerCase()) {
+              return false;
+            }
+          }
+        }
+        if (!baseSegment) {
+          return false;
+        }
+        if (routeSegment.type === 'param') {
+          if (baseSegment?.value === '/') {
+            return false;
+          }
+          if (baseSegment.value.charAt(0) !== '$') {
+            params[routeSegment.value.substring(1)] = baseSegment.value;
+          }
+        }
+      }
+      if (!isLastBaseSegment && isLastRouteSegment) {
+        params['**'] = joinPaths(baseSegments.slice(i + 1).map(d => d.value));
+        return !!matchLocation.fuzzy && routeSegment?.value !== '/';
+      }
+    }
+    return true;
+  })();
+  return isMatch ? params : undefined;
+}
+
+function useParams(opts) {
+  return useRouterState({
+    select: state => {
+      const params = last(state.matches)?.params;
+      return opts?.select ? opts.select(params) : params;
+    }
+  });
+}
+
+function useSearch(opts) {
+  return useMatch({
+    ...opts,
+    select: match => {
+      return opts?.select ? opts.select(match.search) : match.search;
+    }
+  });
+}
+
+const rootRouteId = '__root__';
+
+// The parse type here allows a zod schema to be passed directly to the validator
+
+class RouteApi {
+  constructor({
+    id
+  }) {
+    this.id = id;
+  }
+  useMatch = opts => {
+    return useMatch({
+      ...opts,
+      from: this.id
+    });
+  };
+  useRouteContext = opts => {
+    return useMatch({
+      ...opts,
+      from: this.id,
+      select: d => opts?.select ? opts.select(d.context) : d.context
+    });
+  };
+  useSearch = opts => {
+    return useSearch({
+      ...opts,
+      from: this.id
+    });
+  };
+  useParams = opts => {
+    return useParams({
+      ...opts,
+      from: this.id
+    });
+  };
+  useLoaderDeps = opts => {
+    return useLoaderDeps({
+      ...opts,
+      from: this.id
+    });
+  };
+  useLoaderData = opts => {
+    return useLoaderData({
+      ...opts,
+      from: this.id
+    });
+  };
+}
+class Route {
+  // Set up in this.init()
+
+  // customId!: TCustomId
+
+  // Optional
+
+  constructor(options) {
+    this.options = options || {};
+    this.isRoot = !options?.getParentRoute;
+    invariant(!(options?.id && options?.path), `Route cannot have both an 'id' and a 'path' option.`);
+    this.$$typeof = Symbol.for('react.memo');
+  }
+  init = opts => {
+    this.originalIndex = opts.originalIndex;
+    const options = this.options;
+    const isRoot = !options?.path && !options?.id;
+    this.parentRoute = this.options?.getParentRoute?.();
+    if (isRoot) {
+      this.path = rootRouteId;
+    } else {
+      invariant(this.parentRoute, `Child Route instances must pass a 'getParentRoute: () => ParentRoute' option that returns a Route instance.`);
+    }
+    let path = isRoot ? rootRouteId : options.path;
+
+    // If the path is anything other than an index path, trim it up
+    if (path && path !== '/') {
+      path = trimPath(path);
+    }
+    const customId = options?.id || path;
+
+    // Strip the parentId prefix from the first level of children
+    let id = isRoot ? rootRouteId : joinPaths([this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id, customId]);
+    if (path === rootRouteId) {
+      path = '/';
+    }
+    if (id !== rootRouteId) {
+      id = joinPaths(['/', id]);
+    }
+    const fullPath = id === rootRouteId ? '/' : joinPaths([this.parentRoute.fullPath, path]);
+    this.path = path;
+    this.id = id;
+    // this.customId = customId as TCustomId
+    this.fullPath = fullPath;
+    this.to = fullPath;
+  };
+  addChildren = children => {
+    this.children = children;
+    return this;
+  };
+  update = options => {
+    Object.assign(this.options, options);
+    return this;
+  };
+  useMatch = opts => {
+    return useMatch({
+      ...opts,
+      from: this.id
+    });
+  };
+  useRouteContext = opts => {
+    return useMatch({
+      ...opts,
+      from: this.id,
+      select: d => opts?.select ? opts.select(d.context) : d.context
+    });
+  };
+  useSearch = opts => {
+    return useSearch({
+      ...opts,
+      from: this.id
+    });
+  };
+  useParams = opts => {
+    return useParams({
+      ...opts,
+      from: this.id
+    });
+  };
+  useLoaderDeps = opts => {
+    return useLoaderDeps({
+      ...opts,
+      from: this.id
+    });
+  };
+  useLoaderData = opts => {
+    return useLoaderData({
+      ...opts,
+      from: this.id
+    });
+  };
+}
+function rootRouteWithContext() {
+  return options => {
+    return new RootRoute(options);
+  };
+}
+class RootRoute extends Route {
+  constructor(options) {
+    super(options);
+  }
+}
+function createRouteMask(opts) {
+  return opts;
+}
+
+//
+
+class NotFoundRoute extends Route {
+  constructor(options) {
+    super({
+      ...options,
+      id: '404'
+    });
+  }
+}
+
+class FileRoute {
+  constructor(path) {
+    this.path = path;
+  }
+  createRoute = options => {
+    const route = new Route(options);
+    route.isRoot = false;
+    return route;
+  };
+}
+
+function lazyRouteComponent(importer, exportName) {
+  let loadPromise;
+  const load = () => {
+    if (!loadPromise) {
+      loadPromise = importer();
+    }
+    return loadPromise;
+  };
+  const lazyComp = /*#__PURE__*/React.lazy(async () => {
+    const moduleExports = await load();
+    const comp = moduleExports[exportName ?? 'default'];
+    return {
+      default: comp
+    };
+  });
+  lazyComp.preload = load;
+  return lazyComp;
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+const preloadWarning = 'Error preloading route! ☝️';
+function useLinkProps(options) {
+  const router = useRouter();
+  const matchPathname = useMatch({
+    strict: false,
+    select: s => s.pathname
+  });
+  const {
+    // custom props
+    children,
+    target,
+    activeProps = () => ({
+      className: 'active'
+    }),
+    inactiveProps = () => ({}),
+    activeOptions,
+    disabled,
+    hash,
+    search,
+    params,
+    to,
+    state,
+    mask,
+    preload: userPreload,
+    preloadDelay: userPreloadDelay,
+    replace,
+    startTransition,
+    resetScroll,
+    // element props
+    style,
+    className,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    ...rest
+  } = options;
+
+  // If this link simply reloads the current route,
+  // make sure it has a new key so it will trigger a data refresh
+
+  // If this `to` is a valid external URL, return
+  // null for LinkUtils
+
+  const dest = {
+    from: options.to ? matchPathname : undefined,
+    ...options
+  };
+  let type = 'internal';
+  try {
+    new URL(`${to}`);
+    type = 'external';
+  } catch {}
+  if (type === 'external') {
+    return {
+      href: to
+    };
+  }
+  const next = router.buildLocation(dest);
+  const preload = userPreload ?? router.options.defaultPreload;
+  const preloadDelay = userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0;
+  const isActive = useRouterState({
+    select: s => {
+      // Compare path/hash for matches
+      const currentPathSplit = s.location.pathname.split('/');
+      const nextPathSplit = next.pathname.split('/');
+      const pathIsFuzzyEqual = nextPathSplit.every((d, i) => d === currentPathSplit[i]);
+      // Combine the matches based on user router.options
+      const pathTest = activeOptions?.exact ? s.location.pathname === next.pathname : pathIsFuzzyEqual;
+      const hashTest = activeOptions?.includeHash ? s.location.hash === next.hash : true;
+      const searchTest = activeOptions?.includeSearch ?? true ? deepEqual(s.location.search, next.search, !activeOptions?.exact) : true;
+
+      // The final "active" test
+      return pathTest && hashTest && searchTest;
+    }
+  });
+
+  // The click handler
+  const handleClick = e => {
+    if (!disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!target || target === '_self') && e.button === 0) {
+      e.preventDefault();
+
+      // All is well? Navigate!
+      router.commitLocation({
+        ...next,
+        replace,
+        resetScroll,
+        startTransition
+      });
+    }
+  };
+
+  // The click handler
+  const handleFocus = e => {
+    if (preload) {
+      router.preloadRoute(dest).catch(err => {
+        console.warn(err);
+        console.warn(preloadWarning);
+      });
+    }
+  };
+  const handleTouchStart = e => {
+    if (preload) {
+      router.preloadRoute(dest).catch(err => {
+        console.warn(err);
+        console.warn(preloadWarning);
+      });
+    }
+  };
+  const handleEnter = e => {
+    const target = e.target || {};
+    if (preload) {
+      if (target.preloadTimeout) {
+        return;
+      }
+      target.preloadTimeout = setTimeout(() => {
+        target.preloadTimeout = null;
+        router.preloadRoute(dest).catch(err => {
+          console.warn(err);
+          console.warn(preloadWarning);
+        });
+      }, preloadDelay);
+    }
+  };
+  const handleLeave = e => {
+    const target = e.target || {};
+    if (target.preloadTimeout) {
+      clearTimeout(target.preloadTimeout);
+      target.preloadTimeout = null;
+    }
+  };
+  const composeHandlers = handlers => e => {
+    if (e.persist) e.persist();
+    handlers.filter(Boolean).forEach(handler => {
+      if (e.defaultPrevented) return;
+      handler(e);
+    });
+  };
+
+  // Get the active props
+  const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
+
+  // Get the inactive props
+  const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
+  return {
+    ...resolvedActiveProps,
+    ...resolvedInactiveProps,
+    ...rest,
+    href: disabled ? undefined : next.maskedLocation ? next.maskedLocation.href : next.href,
+    onClick: composeHandlers([onClick, handleClick]),
+    onFocus: composeHandlers([onFocus, handleFocus]),
+    onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
+    onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+    target,
+    style: {
+      ...style,
+      ...resolvedActiveProps.style,
+      ...resolvedInactiveProps.style
+    },
+    className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
+    ...(disabled ? {
+      role: 'link',
+      'aria-disabled': true
+    } : undefined),
+    ['data-status']: isActive ? 'active' : undefined
+  };
+}
+const Link = /*#__PURE__*/React.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 isCtrlEvent(e) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+}
+
+// @ts-nocheck
+
+// qss has been slightly modified and inlined here for our use cases (and compression's sake). We've included it as a hard dependency for MIT license attribution.
+
+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);
+      }
+    }
+  }
+  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;
+}
+
+// Detect if we're in the DOM
+
+function redirect(opts) {
+  opts.isRedirect = true;
+  if (opts.throw) {
+    throw opts;
+  }
+  return opts;
+}
+function isRedirect(obj) {
+  return !!obj?.isRedirect;
+}
+
+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 to parse any query params that might be json
+    for (let key in query) {
+      const value = query[key];
+      if (typeof value === 'string') {
+        try {
+          query[key] = parser(value);
+        } catch (err) {
+          //
+        }
+      }
+    }
+    return query;
+  };
+}
+function stringifySearchWith(stringify, parser) {
+  function stringifyValue(val) {
+    if (typeof val === 'object' && val !== null) {
+      try {
+        return stringify(val);
+      } catch (err) {
+        // silent
+      }
+    } else if (typeof val === 'string' && typeof parser === 'function') {
+      try {
+        // Check if it's a valid parseable string.
+        // If it is, then stringify it again.
+        parser(val);
+        return stringify(val);
+      } catch (err) {
+        // silent
+      }
+    }
+    return val;
+  }
+  return search => {
+    search = {
+      ...search
+    };
+    if (search) {
+      Object.keys(search).forEach(key => {
+        const val = search[key];
+        if (typeof val === 'undefined' || val === undefined) {
+          delete search[key];
+        } else {
+          search[key] = stringifyValue(val);
+        }
+      });
+    }
+    const searchStr = encode(search).toString();
+    return searchStr ? `?${searchStr}` : '';
   };
-  componentDidCatch(error, info) {
-    this.props.onCatch(error, info);
-    console.error(error);
-    this.setState({
-      error,
-      info
+}
+
+// import warning from 'tiny-warning'
+
+//
+
+const componentTypes = ['component', 'errorComponent', 'pendingComponent'];
+class Router {
+  // Option-independent properties
+  tempLocationKey = `${Math.round(Math.random() * 10000000)}`;
+  resetNextScroll = true;
+  navigateTimeout = null;
+  latestLoadPromise = Promise.resolve();
+  subscribers = new Set();
+  injectedHtml = [];
+
+  // Must build in constructor
+
+  constructor(options) {
+    this.update({
+      defaultPreloadDelay: 50,
+      defaultPendingMs: 1000,
+      defaultPendingMinMs: 500,
+      context: undefined,
+      ...options,
+      stringifySearch: options?.stringifySearch ?? defaultStringifySearch,
+      parseSearch: options?.parseSearch ?? defaultParseSearch
     });
   }
-  render() {
-    return /*#__PURE__*/React.createElement(CatchBoundaryInner, _extends({}, this.props, {
-      errorState: this.state,
-      reset: () => this.setState({})
-    }));
+
+  // These are default implementations that can optionally be overridden
+  // by the router provider once rendered. We provide these so that the
+  // router can be used in a non-react environment if necessary
+  startReactTransition = fn => fn();
+  update = newOptions => {
+    this.options = {
+      ...this.options,
+      ...newOptions
+    };
+    this.basepath = `/${trimPath(newOptions.basepath ?? '') ?? ''}`;
+    if (!this.history || this.options.history && this.options.history !== this.history) {
+      this.history = this.options.history ?? (typeof document !== 'undefined' ? createBrowserHistory() : createMemoryHistory());
+      this.latestLocation = this.parseLocation();
+    }
+    if (this.options.routeTree !== this.routeTree) {
+      this.routeTree = this.options.routeTree;
+      this.buildRouteTree();
+    }
+    if (!this.__store) {
+      this.__store = new Store(getInitialRouterState(this.latestLocation), {
+        onUpdate: () => {
+          this.__store.state = {
+            ...this.state,
+            status: this.state.isTransitioning || this.state.isLoading ? 'pending' : 'idle'
+          };
+        }
+      });
+    }
+  };
+  get state() {
+    return this.__store.state;
   }
-}
-function CatchBoundaryInner(props) {
-  const [activeErrorState, setActiveErrorState] = React.useState(props.errorState);
-  const router = useRouterContext();
-  const errorComponent = props.errorComponent ?? ErrorComponent;
-  const prevKeyRef = React.useRef('');
-  React.useEffect(() => {
-    if (activeErrorState) {
-      if (router.state.currentLocation.key !== prevKeyRef.current) {
-        setActiveErrorState({});
-      }
+  buildRouteTree = () => {
+    this.routesById = {};
+    this.routesByPath = {};
+    const notFoundRoute = this.options.notFoundRoute;
+    if (notFoundRoute) {
+      notFoundRoute.init({
+        originalIndex: 99999999999
+      });
+      this.routesById[notFoundRoute.id] = notFoundRoute;
     }
-    prevKeyRef.current = router.state.currentLocation.key;
-  }, [activeErrorState, router.state.currentLocation.key]);
-  React.useEffect(() => {
-    if (props.errorState.error) {
-      setActiveErrorState(props.errorState);
+    const recurseRoutes = childRoutes => {
+      childRoutes.forEach((childRoute, i) => {
+        childRoute.init({
+          originalIndex: i
+        });
+        const existingRoute = this.routesById[childRoute.id];
+        invariant(!existingRoute, `Duplicate routes found with id: ${String(childRoute.id)}`);
+        this.routesById[childRoute.id] = childRoute;
+        if (!childRoute.isRoot && childRoute.path) {
+          const trimmedFullPath = trimPathRight(childRoute.fullPath);
+          if (!this.routesByPath[trimmedFullPath] || childRoute.fullPath.endsWith('/')) {
+            this.routesByPath[trimmedFullPath] = childRoute;
+          }
+        }
+        const children = childRoute.children;
+        if (children?.length) {
+          recurseRoutes(children);
+        }
+      });
+    };
+    recurseRoutes([this.routeTree]);
+    const scoredRoutes = [];
+    Object.values(this.routesById).forEach((d, i) => {
+      if (d.isRoot || !d.path) {
+        return;
+      }
+      const trimmed = trimPathLeft(d.fullPath);
+      const parsed = parsePathname(trimmed);
+      while (parsed.length > 1 && parsed[0]?.value === '/') {
+        parsed.shift();
+      }
+      const scores = parsed.map(d => {
+        if (d.value === '/') {
+          return 0.75;
+        }
+        if (d.type === 'param') {
+          return 0.5;
+        }
+        if (d.type === 'wildcard') {
+          return 0.25;
+        }
+        return 1;
+      });
+      scoredRoutes.push({
+        child: d,
+        trimmed,
+        parsed,
+        index: i,
+        scores
+      });
+    });
+    this.flatRoutes = scoredRoutes.sort((a, b) => {
+      const minLength = Math.min(a.scores.length, b.scores.length);
+
+      // Sort by min available score
+      for (let i = 0; i < minLength; i++) {
+        if (a.scores[i] !== b.scores[i]) {
+          return b.scores[i] - a.scores[i];
+        }
+      }
+
+      // Sort by length of score
+      if (a.scores.length !== b.scores.length) {
+        return b.scores.length - a.scores.length;
+      }
+
+      // Sort by min available parsed value
+      for (let i = 0; i < minLength; i++) {
+        if (a.parsed[i].value !== b.parsed[i].value) {
+          return a.parsed[i].value > b.parsed[i].value ? 1 : -1;
+        }
+      }
+
+      // Sort by original index
+      return a.index - b.index;
+    }).map((d, i) => {
+      d.child.rank = i;
+      return d.child;
+    });
+  };
+  subscribe = (eventType, fn) => {
+    const listener = {
+      eventType,
+      fn
+    };
+    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
+      };
     }
-    // props.reset()
-  }, [props.errorState.error]);
-  if (props.errorState.error && activeErrorState.error) {
-    return /*#__PURE__*/React.createElement(errorComponent, activeErrorState);
+    return location;
+  };
+  resolvePathWithBase = (from, path) => {
+    return resolvePath(this.basepath, from, cleanPath(path));
+  };
+  get looseRoutesById() {
+    return this.routesById;
   }
-  return props.children;
-}
-function ErrorComponent({
-  error
-}) {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: '.5rem',
-      maxWidth: '100%'
+  matchRoutes = (pathname, locationSearch, opts) => {
+    let routeParams = {};
+    let foundRoute = this.flatRoutes.find(route => {
+      const matchedParams = matchPathname(this.basepath, trimPathRight(pathname), {
+        to: route.fullPath,
+        caseSensitive: route.options.caseSensitive ?? this.options.caseSensitive,
+        fuzzy: true
+      });
+      if (matchedParams) {
+        routeParams = matchedParams;
+        return true;
+      }
+      return false;
+    });
+    let routeCursor = foundRoute || this.routesById['__root__'];
+    let matchedRoutes = [routeCursor];
+
+    // Check to see if the route needs a 404 entry
+    if (
+    // If we found a route, and it's not an index route and we have left over path
+    (foundRoute ? foundRoute.path !== '/' && routeParams['**'] :
+    // Or if we didn't find a route and we have left over path
+    trimPathRight(pathname)) &&
+    // And we have a 404 route configured
+    this.options.notFoundRoute) {
+      matchedRoutes.push(this.options.notFoundRoute);
     }
-  }, /*#__PURE__*/React.createElement("strong", {
-    style: {
-      fontSize: '1.2rem'
+    while (routeCursor?.parentRoute) {
+      routeCursor = routeCursor.parentRoute;
+      if (routeCursor) matchedRoutes.unshift(routeCursor);
     }
-  }, "Something went wrong!"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '.5rem'
+
+    // Existing matches are matches that are already loaded along with
+    // pending matches that are still loading
+
+    const parseErrors = matchedRoutes.map(route => {
+      let parsedParamsError;
+      if (route.options.parseParams) {
+        try {
+          const parsedParams = route.options.parseParams(routeParams);
+          // Add the parsed params to the accumulated params bag
+          Object.assign(routeParams, parsedParams);
+        } catch (err) {
+          parsedParamsError = new PathParamError(err.message, {
+            cause: err
+          });
+          if (opts?.throwOnError) {
+            throw parsedParamsError;
+          }
+          return parsedParamsError;
+        }
+      }
+      return;
+    });
+    const matches = [];
+    matchedRoutes.forEach((route, index) => {
+      // Take each matched route and resolve + validate its search params
+      // This has to happen serially because each route's search params
+      // can depend on the parent route's search params
+      // It must also happen before we create the match so that we can
+      // pass the search params to the route's potential key function
+      // which is used to uniquely identify the route match in state
+
+      const parentMatch = matches[index - 1];
+      const [preMatchSearch, searchError] = (() => {
+        // Validate the search params and stabilize them
+        const parentSearch = parentMatch?.search ?? locationSearch;
+        try {
+          const validator = typeof route.options.validateSearch === 'object' ? route.options.validateSearch.parse : route.options.validateSearch;
+          let search = validator?.(parentSearch) ?? {};
+          return [{
+            ...parentSearch,
+            ...search
+          }, undefined];
+        } catch (err) {
+          const searchError = new SearchParamError(err.message, {
+            cause: err
+          });
+          if (opts?.throwOnError) {
+            throw searchError;
+          }
+          return [parentSearch, searchError];
+        }
+      })();
+
+      // This is where we need to call route.options.loaderDeps() to get any additional
+      // deps that the route's loader function might need to run. We need to do this
+      // before we create the match so that we can pass the deps to the route's
+      // potential key function which is used to uniquely identify the route match in state
+
+      const loaderDeps = route.options.loaderDeps?.({
+        search: preMatchSearch
+      }) ?? '';
+      const loaderDepsHash = loaderDeps ? JSON.stringify(loaderDeps) : '';
+      const interpolatedPath = interpolatePath(route.fullPath, routeParams);
+      const matchId = interpolatePath(route.id, routeParams, true) + loaderDepsHash;
+
+      // Waste not, want not. If we already have a match for this route,
+      // reuse it. This is important for layout routes, which might stick
+      // around between navigation actions that only change leaf routes.
+      const existingMatch = getRouteMatch(this.state, matchId);
+      const cause = this.state.matches.find(d => d.id === matchId) ? 'stay' : 'enter';
+
+      // Create a fresh route match
+      const hasLoaders = !!(route.options.loader || componentTypes.some(d => route.options[d]?.preload));
+      const match = existingMatch ? {
+        ...existingMatch,
+        cause
+      } : {
+        id: matchId,
+        routeId: route.id,
+        params: routeParams,
+        pathname: joinPaths([this.basepath, interpolatedPath]),
+        updatedAt: Date.now(),
+        search: {},
+        searchError: undefined,
+        status: hasLoaders ? 'pending' : 'success',
+        showPending: false,
+        isFetching: false,
+        error: undefined,
+        paramsError: parseErrors[index],
+        loadPromise: Promise.resolve(),
+        routeContext: undefined,
+        context: undefined,
+        abortController: new AbortController(),
+        fetchCount: 0,
+        cause,
+        loaderDeps,
+        invalid: false,
+        preload: false
+      };
+
+      // Regardless of whether we're reusing an existing match or creating
+      // a new one, we need to update the match's search params
+      match.search = replaceEqualDeep(match.search, preMatchSearch);
+      // And also update the searchError if there is one
+      match.searchError = searchError;
+      matches.push(match);
+    });
+    return matches;
+  };
+  cancelMatch = id => {
+    getRouteMatch(this.state, id)?.abortController?.abort();
+  };
+  cancelMatches = () => {
+    this.state.pendingMatches?.forEach(match => {
+      this.cancelMatch(match.id);
+    });
+  };
+  buildLocation = opts => {
+    const build = (dest = {}, matches) => {
+      const from = this.latestLocation;
+      const fromSearch = (this.state.pendingMatches || this.state.matches).at(-1)?.search || from.search;
+      const fromPathname = dest.from ?? from.pathname;
+      let pathname = this.resolvePathWithBase(fromPathname, `${dest.to ?? ''}`);
+      const fromMatches = this.matchRoutes(fromPathname, fromSearch);
+      const stayingMatches = matches?.filter(d => fromMatches?.find(e => e.routeId === d.routeId));
+      const prevParams = {
+        ...last(fromMatches)?.params
+      };
+      let nextParams = (dest.params ?? true) === true ? prevParams : functionalUpdate(dest.params, prevParams);
+      if (nextParams) {
+        matches?.map(d => this.looseRoutesById[d.routeId].options.stringifyParams).filter(Boolean).forEach(fn => {
+          nextParams = {
+            ...nextParams,
+            ...fn(nextParams)
+          };
+        });
+      }
+      pathname = interpolatePath(pathname, nextParams ?? {});
+      const preSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.preSearchFilters ?? []).flat().filter(Boolean) ?? [];
+      const postSearchFilters = stayingMatches?.map(match => this.looseRoutesById[match.routeId].options.postSearchFilters ?? []).flat().filter(Boolean) ?? [];
+
+      // Pre filters first
+      const preFilteredSearch = preSearchFilters?.length ? preSearchFilters?.reduce((prev, next) => next(prev), fromSearch) : fromSearch;
+
+      // Then the link/navigate function
+      const destSearch = dest.search === true ? preFilteredSearch // Preserve resolvedFrom true
+      : dest.search ? functionalUpdate(dest.search, preFilteredSearch) ?? {} // Updater
+      : preSearchFilters?.length ? preFilteredSearch // Preserve resolvedFrom filters
+      : {};
+
+      // Then post filters
+      const postFilteredSearch = postSearchFilters?.length ? postSearchFilters.reduce((prev, next) => next(prev), destSearch) : destSearch;
+      const search = replaceEqualDeep(fromSearch, postFilteredSearch);
+      const searchStr = this.options.stringifySearch(search);
+      const hash = dest.hash === true ? from.hash : dest.hash ? functionalUpdate(dest.hash, from.hash) : from.hash;
+      const hashStr = hash ? `#${hash}` : '';
+      let nextState = dest.state === true ? from.state : dest.state ? functionalUpdate(dest.state, from.state) : from.state;
+      nextState = replaceEqualDeep(from.state, nextState);
+      return {
+        pathname,
+        search,
+        searchStr,
+        state: nextState,
+        hash,
+        href: `${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);
+        }
+      }
+      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
+      });
     }
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("pre", {
-    style: {
-      fontSize: '.7em',
-      border: '1px solid red',
-      borderRadius: '.25rem',
-      padding: '.5rem',
-      color: 'red',
-      overflow: 'auto'
+    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 {
+        maskedLocation,
+        ...nextHistory
+      } = next;
+      if (maskedLocation) {
+        nextHistory = {
+          ...maskedLocation,
+          state: {
+            ...maskedLocation.state,
+            __tempKey: undefined,
+            __tempLocation: {
+              ...nextHistory,
+              search: nextHistory.searchStr,
+              state: {
+                ...nextHistory.state,
+                __tempKey: undefined,
+                __tempLocation: undefined,
+                key: undefined
+              }
+            }
+          }
+        };
+        if (nextHistory.unmaskOnReload ?? this.options.unmaskOnReload ?? false) {
+          nextHistory.state.__tempKey = this.tempLocationKey;
+        }
+      }
+      const apply = () => {
+        this.history[next.replace ? 'replace' : 'push'](nextHistory.href, nextHistory.state);
+      };
+      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
+  }) => {
+    let latestPromise;
+    let firstBadMatchIndex;
+    const updateMatch = match => {
+      // const isPreload = this.state.cachedMatches.find((d) => d.id === match.id)
+      const isPending = this.state.pendingMatches?.find(d => d.id === match.id);
+      const isMatched = this.state.matches.find(d => d.id === match.id);
+      const matchesKey = isPending ? 'pendingMatches' : isMatched ? 'matches' : 'cachedMatches';
+      this.__store.setState(s => ({
+        ...s,
+        [matchesKey]: s[matchesKey]?.map(d => d.id === match.id ? match : d)
+      }));
+    };
+
+    // Check each match middleware to see if the route can be accessed
+    try {
+      for (let [index, match] of matches.entries()) {
+        const parentMatch = matches[index - 1];
+        const route = this.looseRoutesById[match.routeId];
+        const abortController = new AbortController();
+        const handleErrorAndRedirect = (err, code) => {
+          err.routerCode = code;
+          firstBadMatchIndex = firstBadMatchIndex ?? index;
+          if (isRedirect(err)) {
+            throw err;
+          }
+          try {
+            route.options.onError?.(err);
+          } catch (errorHandlerErr) {
+            err = errorHandlerErr;
+            if (isRedirect(errorHandlerErr)) {
+              throw errorHandlerErr;
+            }
+          }
+          matches[index] = match = {
+            ...match,
+            error: err,
+            status: 'error',
+            updatedAt: Date.now(),
+            abortController: new AbortController()
+          };
+        };
+        try {
+          if (match.paramsError) {
+            handleErrorAndRedirect(match.paramsError, 'PARSE_PARAMS');
+          }
+          if (match.searchError) {
+            handleErrorAndRedirect(match.searchError, 'VALIDATE_SEARCH');
+          }
+          const parentContext = parentMatch?.context ?? this.options.context ?? {};
+          const beforeLoadContext = (await route.options.beforeLoad?.({
+            search: match.search,
+            abortController,
+            params: match.params,
+            preload: !!preload,
+            context: parentContext,
+            location: this.state.location,
+            // TOOD: just expose state and router, etc
+            navigate: opts => this.navigate({
+              ...opts,
+              from: match.pathname
+            }),
+            buildLocation: this.buildLocation,
+            cause: preload ? 'preload' : match.cause
+          })) ?? {};
+          if (isRedirect(beforeLoadContext)) {
+            throw beforeLoadContext;
+          }
+          const context = {
+            ...parentContext,
+            ...beforeLoadContext
+          };
+          matches[index] = match = {
+            ...match,
+            routeContext: replaceEqualDeep(match.routeContext, beforeLoadContext),
+            context: replaceEqualDeep(match.context, context),
+            abortController
+          };
+        } catch (err) {
+          handleErrorAndRedirect(err, 'BEFORE_LOAD');
+          break;
+        }
+      }
+    } catch (err) {
+      if (isRedirect(err)) {
+        if (!preload) this.navigate(err);
+        return matches;
+      }
+      throw err;
+    }
+    const validResolvedMatches = matches.slice(0, firstBadMatchIndex);
+    const matchPromises = [];
+    validResolvedMatches.forEach((match, index) => {
+      matchPromises.push(new Promise(async resolve => {
+        const parentMatchPromise = matchPromises[index - 1];
+        const route = this.looseRoutesById[match.routeId];
+        const handleErrorAndRedirect = err => {
+          if (isRedirect(err)) {
+            if (!preload) {
+              this.navigate(err);
+            }
+            return true;
+          }
+          return false;
+        };
+        let loadPromise;
+        matches[index] = match = {
+          ...match,
+          showPending: false
+        };
+        let didShowPending = false;
+        const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
+        const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
+        const shouldPending = !preload && pendingMs && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
+        const loaderContext = {
+          params: match.params,
+          deps: match.loaderDeps,
+          preload: !!preload,
+          parentMatchPromise,
+          abortController: match.abortController,
+          context: match.context,
+          location: this.state.location,
+          navigate: opts => this.navigate({
+            ...opts,
+            from: match.pathname
+          }),
+          cause: preload ? 'preload' : match.cause
+        };
+        const fetch = async () => {
+          if (match.isFetching) {
+            loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
+          } else {
+            // If the user doesn't want the route to reload, just
+            // resolve with the existing loader data
+
+            if (match.fetchCount && match.status === 'success') {
+              resolve();
+            }
+
+            // Otherwise, load the route
+            matches[index] = match = {
+              ...match,
+              isFetching: true,
+              fetchCount: match.fetchCount + 1
+            };
+            const componentsPromise = Promise.all(componentTypes.map(async type => {
+              const component = route.options[type];
+              if (component?.preload) {
+                await component.preload();
+              }
+            }));
+            const loaderPromise = route.options.loader?.(loaderContext);
+            loadPromise = Promise.all([componentsPromise, loaderPromise]).then(d => d[1]);
+          }
+          matches[index] = match = {
+            ...match,
+            loadPromise
+          };
+          updateMatch(match);
+          try {
+            const loaderData = await loadPromise;
+            if (latestPromise = checkLatest()) return await latestPromise;
+            if (isRedirect(loaderData)) {
+              if (handleErrorAndRedirect(loaderData)) return;
+            }
+            if (didShowPending && pendingMinMs) {
+              await new Promise(r => setTimeout(r, pendingMinMs));
+            }
+            if (latestPromise = checkLatest()) return await latestPromise;
+            matches[index] = match = {
+              ...match,
+              error: undefined,
+              status: 'success',
+              isFetching: false,
+              updatedAt: Date.now(),
+              loaderData,
+              loadPromise: undefined
+            };
+          } catch (error) {
+            if (latestPromise = checkLatest()) return await latestPromise;
+            if (handleErrorAndRedirect(error)) return;
+            try {
+              route.options.onError?.(error);
+            } catch (onErrorError) {
+              error = onErrorError;
+              if (handleErrorAndRedirect(onErrorError)) return;
+            }
+            matches[index] = match = {
+              ...match,
+              error,
+              status: 'error',
+              isFetching: false
+            };
+          }
+          updateMatch(match);
+        };
+
+        // This is where all of the stale-while-revalidate magic happens
+        const age = Date.now() - match.updatedAt;
+        let staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 30_000 // 30 seconds for preloads by default
+        : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
+
+        // Default to reloading the route all the time
+        let shouldReload;
+        const shouldReloadOption = route.options.shouldReload;
+
+        // Allow shouldReload to get the last say,
+        // if provided.
+        shouldReload = typeof shouldReloadOption === 'function' ? shouldReloadOption(loaderContext) : shouldReloadOption;
+        matches[index] = match = {
+          ...match,
+          preload: !!preload && !this.state.matches.find(d => d.id === match.id)
+        };
+        if (match.status !== 'success') {
+          // If we need to potentially show the pending component,
+          // start a timer to show it after the pendingMs
+          if (shouldPending) {
+            new Promise(r => setTimeout(r, pendingMs)).then(async () => {
+              if (latestPromise = checkLatest()) return latestPromise;
+              didShowPending = true;
+              matches[index] = match = {
+                ...match,
+                showPending: true
+              };
+              updateMatch(match);
+              resolve();
+            });
+          }
+
+          // Critical Fetching, we need to await
+          await fetch();
+        } else if (match.invalid || (shouldReload ?? age > staleAge)) {
+          // Background Fetching, no need to wait
+          fetch();
+        }
+        resolve();
+      }));
+    });
+    await Promise.all(matchPromises);
+    return matches;
+  };
+  invalidate = () => {
+    const invalidate = d => ({
+      ...d,
+      invalid: true
+    });
+    this.__store.setState(s => ({
+      ...s,
+      matches: s.matches.map(invalidate),
+      cachedMatches: s.cachedMatches.map(invalidate),
+      pendingMatches: s.pendingMatches?.map(invalidate)
+    }));
+    this.load();
+  };
+  load = async () => {
+    const promise = new Promise(async (resolve, reject) => {
+      const next = this.latestLocation;
+      const prevLocation = this.state.resolvedLocation;
+      const pathDidChange = prevLocation.href !== next.href;
+      let latestPromise;
+
+      // Cancel any pending matches
+      this.cancelMatches();
+      this.emit({
+        type: 'onBeforeLoad',
+        fromLocation: prevLocation,
+        toLocation: next,
+        pathChanged: pathDidChange
+      });
+      let pendingMatches;
+      const previousMatches = this.state.matches;
+      this.__store.batch(() => {
+        this.cleanCache();
+
+        // Match the routes
+        pendingMatches = this.matchRoutes(next.pathname, next.search, {
+          debug: true
+        });
+
+        // Ingest the new matches
+        // If a cached moved to pendingMatches, remove it from cachedMatches
+        this.__store.setState(s => ({
+          ...s,
+          isLoading: true,
+          location: next,
+          pendingMatches,
+          cachedMatches: s.cachedMatches.filter(d => {
+            return !pendingMatches.find(e => e.id === d.id);
+          })
+        }));
+      });
+      try {
+        try {
+          // Load the matches
+          await this.loadMatches({
+            matches: pendingMatches,
+            checkLatest: () => this.checkLatest(promise)
+          });
+        } catch (err) {
+          // swallow this error, since we'll display the
+          // errors on the route components
+        }
+
+        // Only apply the latest transition
+        if (latestPromise = this.checkLatest(promise)) {
+          return latestPromise;
+        }
+        const exitingMatches = previousMatches.filter(match => !pendingMatches.find(d => d.id === match.id));
+        const enteringMatches = pendingMatches.filter(match => !previousMatches.find(d => d.id === match.id));
+        const stayingMatches = previousMatches.filter(match => pendingMatches.find(d => d.id === match.id));
+
+        // Commit the pending matches. If a previous match was
+        // removed, place it in the cachedMatches
+        this.__store.batch(() => {
+          this.__store.setState(s => ({
+            ...s,
+            isLoading: false,
+            matches: s.pendingMatches,
+            pendingMatches: undefined,
+            cachedMatches: [...s.cachedMatches, ...exitingMatches.filter(d => d.status !== 'error')]
+          }));
+          this.cleanCache();
+        })
+
+        //
+        ;
+        [[exitingMatches, 'onLeave'], [enteringMatches, 'onEnter'], [stayingMatches, 'onStay']].forEach(([matches, hook]) => {
+          matches.forEach(match => {
+            this.looseRoutesById[match.routeId].options[hook]?.(match);
+          });
+        });
+        this.emit({
+          type: 'onLoad',
+          fromLocation: prevLocation,
+          toLocation: next,
+          pathChanged: pathDidChange
+        });
+        resolve();
+      } catch (err) {
+        // Only apply the latest transition
+        if (latestPromise = this.checkLatest(promise)) {
+          return latestPromise;
+        }
+        reject(err);
+      }
+    });
+    this.latestLoadPromise = promise;
+    return this.latestLoadPromise;
+  };
+  cleanCache = () => {
+    // This is where all of the garbage collection magic happens
+    this.__store.setState(s => {
+      return {
+        ...s,
+        cachedMatches: s.cachedMatches.filter(d => {
+          const route = this.looseRoutesById[d.routeId];
+          if (!route.options.loader) {
+            return false;
+          }
+
+          // If the route was preloaded, use the preloadGcTime
+          // otherwise, use the gcTime
+          const gcTime = (d.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 5 * 60 * 1000;
+          return d.status !== 'error' && Date.now() - d.updatedAt < gcTime;
+        })
+      };
+    });
+  };
+  preloadRoute = async (navigateOpts = this.state.location) => {
+    let next = this.buildLocation(navigateOpts);
+    let matches = this.matchRoutes(next.pathname, next.search, {
+      throwOnError: true
+    });
+    const loadedMatchIds = Object.fromEntries([...this.state.matches, ...(this.state.pendingMatches ?? []), ...this.state.cachedMatches]?.map(d => [d.id, true]));
+    this.__store.batch(() => {
+      matches.forEach(match => {
+        if (!loadedMatchIds[match.id]) {
+          this.__store.setState(s => ({
+            ...s,
+            cachedMatches: [...s.cachedMatches, match]
+          }));
+        }
+      });
+    });
+    matches = await this.loadMatches({
+      matches,
+      preload: true,
+      checkLatest: () => undefined
+    });
+    return matches;
+  };
+  matchRoute = (location, opts) => {
+    location = {
+      ...location,
+      to: location.to ? this.resolvePathWithBase(location.from || '', location.to) : undefined
+    };
+    const next = this.buildLocation(location);
+    if (opts?.pending && this.state.status !== 'pending') {
+      return false;
+    }
+    const baseLocation = opts?.pending ? this.latestLocation : this.state.resolvedLocation;
+    if (!baseLocation) {
+      return false;
+    }
+    const match = matchPathname(this.basepath, baseLocation.pathname, {
+      ...opts,
+      to: next.pathname
+    });
+    if (!match) {
+      return false;
     }
-  }, error.message ? /*#__PURE__*/React.createElement("code", null, error.message) : null)));
+    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;
+  };
+  dehydrate = () => {
+    return {
+      state: {
+        dehydratedMatches: this.state.matches.map(d => pick(d, ['id', 'status', 'updatedAt', 'loaderData']))
+      }
+    };
+  };
+  hydrate = async __do_not_use_server_ctx => {
+    let _ctx = __do_not_use_server_ctx;
+    // Client hydrates from window
+    if (typeof document !== 'undefined') {
+      _ctx = window.__TSR_DEHYDRATED__;
+    }
+    invariant(_ctx, 'Expected to find a __TSR_DEHYDRATED__ property on window... but we did not. Did you forget to render <DehydrateRouter /> in your app?');
+    const ctx = _ctx;
+    this.dehydratedData = ctx.payload;
+    this.options.hydrate?.(ctx.payload);
+    const dehydratedState = ctx.router.state;
+    let matches = this.matchRoutes(this.state.location.pathname, this.state.location.search).map(match => {
+      const dehydratedMatch = dehydratedState.dehydratedMatches.find(d => d.id === match.id);
+      invariant(dehydratedMatch, `Could not find a client-side match for dehydrated match with id: ${match.id}!`);
+      if (dehydratedMatch) {
+        return {
+          ...match,
+          ...dehydratedMatch
+        };
+      }
+      return match;
+    });
+    this.__store.setState(s => {
+      return {
+        ...s,
+        matches: matches
+      };
+    });
+  };
+
+  // resolveMatchPromise = (matchId: string, key: string, value: any) => {
+  //   state.matches
+  //     .find((d) => d.id === matchId)
+  //     ?.__promisesByKey[key]?.resolve(value)
+  // }
+}
+
+// A function that takes an import() argument which is a function and returns a new function that will
+// proxy arguments from the caller to the imported function, retaining all type
+// information along the way
+function lazyFn(fn, key) {
+  return async (...args) => {
+    const imported = await fn();
+    return imported[key || 'default'](...args);
+  };
+}
+class SearchParamError extends Error {}
+class PathParamError extends Error {}
+function getInitialRouterState(location) {
+  return {
+    isLoading: false,
+    isTransitioning: false,
+    status: 'idle',
+    resolvedLocation: {
+      ...location
+    },
+    location,
+    matches: [],
+    pendingMatches: [],
+    cachedMatches: [],
+    lastUpdated: Date.now()
+  };
 }
-function useBlocker(message, condition = true) {
+
+const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const windowKey = 'window';
+const delimiter = '___';
+let weakScrolledElements = new WeakSet();
+const sessionsStorage = typeof window !== 'undefined' && window.sessionStorage;
+let cache = sessionsStorage ? (() => {
+  const storageKey = 'tsr-scroll-restoration-v2';
+  const state = JSON.parse(window.sessionStorage.getItem(storageKey) || 'null') || {
+    cached: {},
+    next: {}
+  };
+  return {
+    state,
+    set: updater => {
+      cache.state = functionalUpdate(updater, cache.state);
+      window.sessionStorage.setItem(storageKey, JSON.stringify(cache.state));
+    }
+  };
+})() : undefined;
+const defaultGetKey = location => location.state.key;
+function useScrollRestoration(options) {
   const router = useRouter();
-  React.useEffect(() => {
-    if (!condition) return;
-    let unblock = router.history.block((retry, cancel) => {
-      if (window.confirm(message)) {
-        unblock();
-        retry();
+  useLayoutEffect(() => {
+    const getKey = options?.getKey || defaultGetKey;
+    const {
+      history
+    } = window;
+    if (history.scrollRestoration) {
+      history.scrollRestoration = 'manual';
+    }
+    const onScroll = event => {
+      if (weakScrolledElements.has(event.target)) return;
+      weakScrolledElements.add(event.target);
+      let elementSelector = '';
+      if (event.target === document || event.target === window) {
+        elementSelector = windowKey;
       } else {
-        cancel();
+        const attrId = event.target.getAttribute('data-scroll-restoration-id');
+        if (attrId) {
+          elementSelector = `[data-scroll-restoration-id="${attrId}"]`;
+        } else {
+          elementSelector = getCssSelector(event.target);
+        }
+      }
+      if (!cache.state.next[elementSelector]) {
+        cache.set(c => ({
+          ...c,
+          next: {
+            ...c.next,
+            [elementSelector]: {
+              scrollX: NaN,
+              scrollY: NaN
+            }
+          }
+        }));
+      }
+    };
+    if (typeof document !== 'undefined') {
+      document.addEventListener('scroll', onScroll, true);
+    }
+    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
+              }
+            };
+          });
+        }
       }
     });
-    return unblock;
+    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 ScrollRestoration(props) {
+  useScrollRestoration(props);
+  return null;
+}
+function useElementScrollRestoration(options) {
+  const router = useRouter();
+  const getKey = options?.getKey || defaultGetKey;
+  let elementSelector = '';
+  if (options.id) {
+    elementSelector = `[data-scroll-restoration-id="${options.id}"]`;
+  } else {
+    const element = options.getElement?.();
+    if (!element) {
+      return;
+    }
+    elementSelector = getCssSelector(element);
+  }
+  const restoreKey = getKey(router.latestLocation);
+  const cacheKey = [restoreKey, elementSelector].join(delimiter);
+  return cache.state.cached[cacheKey];
+}
+function getCssSelector(el) {
+  let path = [],
+    parent;
+  while (parent = el.parentNode) {
+    path.unshift(`${el.tagName}:nth-child(${[].indexOf.call(parent.children, el) + 1})`);
+    el = parent;
+  }
+  return `${path.join(' > ')}`.toLowerCase();
+}
+
+function useBlocker(blockerFn, condition = true) {
+  const {
+    history
+  } = useRouter();
+  React.useEffect(() => {
+    if (!condition) return;
+    return history.block(blockerFn);
   });
 }
 function Block({
-  message,
+  blocker,
   condition,
   children
 }) {
-  useBlocker(message, condition);
+  useBlocker(blocker, condition);
   return children ?? null;
 }
 
-export { Block, ErrorComponent, Link, MatchRoute, Navigate, Outlet, ReactRouter, RouterProvider, lazy, matchesContext, routerContext, useBlocker, useLinkProps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRoute, useRouter, useRouterContext, useSearch };
+function useNavigate(defaultOpts) {
+  const {
+    navigate
+  } = useRouter();
+  const matchPathname = useMatch({
+    strict: false,
+    select: s => s.pathname
+  });
+  return React.useCallback(opts => {
+    return navigate({
+      from: opts?.to ? matchPathname : undefined,
+      ...defaultOpts,
+      ...opts
+    });
+  }, []);
+}
+
+// NOTE: I don't know of anyone using this. It's undocumented, so let's wait until someone needs it
+// export function typedNavigate<
+//   TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
+//   TDefaultFrom extends RoutePaths<TRouteTree> = '/',
+// >(navigate: (opts: NavigateOptions<any>) => Promise<void>) {
+//   return navigate as <
+//     TFrom extends RoutePaths<TRouteTree> = TDefaultFrom,
+//     TTo extends string = '',
+//     TMaskFrom extends RoutePaths<TRouteTree> = '/',
+//     TMaskTo extends string = '',
+//   >(
+//     opts?: NavigateOptions<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>,
+//   ) => Promise<void>
+// } //
+
+function Navigate(props) {
+  const {
+    navigate
+  } = useRouter();
+  const match = useMatch({
+    strict: false
+  });
+  React.useEffect(() => {
+    navigate({
+      from: props.to ? match.pathname : undefined,
+      ...props
+    });
+  }, []);
+  return null;
+}
+
+export { Await, Block, CatchBoundary, CatchBoundaryImpl, ErrorComponent, FileRoute, Link, Match, MatchRoute, Matches, Navigate, NotFoundRoute, Outlet, PathParamError, RootRoute, Route, RouteApi, 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, matchContext, matchPathname, parsePathname, parseSearchWith, pick, redirect, removeBasepath, replaceEqualDeep, resolvePath, rootRouteId, rootRouteWithContext, routerContext, shallow, stringifySearchWith, trimPath, trimPathLeft, trimPathRight, useAwaited, useBlocker, useElementScrollRestoration, useLayoutEffect$1 as useLayoutEffect, useLinkProps, useLoaderData, useLoaderDeps, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useParentMatches, useRouteContext, useRouter, useRouterState, useScrollRestoration, useSearch, useStableCallback };
 //# sourceMappingURL=index.js.map