@tanstack/router-devtools 1.7.1 → 1.8.1

package/build/umd/index.development.js

@@ -1,1598 +0,0 @@
-/**
- * @tanstack/router-devtools/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TanStackRouterDevtools = {}, global.React, global.require$$1));
-})(this, (function (exports, React, require$$1) { 'use strict';
-
-  function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-      Object.keys(e).forEach(function (k) {
-        if (k !== 'default') {
-          var d = Object.getOwnPropertyDescriptor(e, k);
-          Object.defineProperty(n, k, d.get ? d : {
-            enumerable: true,
-            get: function () { return e[k]; }
-          });
-        }
-      });
-    }
-    n.default = e;
-    return Object.freeze(n);
-  }
-
-  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  var isProduction = "development" === 'production';
-  var prefix = 'Invariant failed';
-  function invariant(condition, message) {
-      if (condition) {
-          return;
-      }
-      if (isProduction) {
-          throw new Error(prefix);
-      }
-      var provided = typeof message === 'function' ? message() : message;
-      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-      throw new Error(value);
-  }
-
-  function warning(condition, message) {
-    {
-      if (condition) {
-        return;
-      }
-
-      var text = "Warning: " + message;
-
-      if (typeof console !== 'undefined') {
-        console.warn(text);
-      }
-
-      try {
-        throw Error(text);
-      } catch (x) {}
-    }
-  }
-
-  var withSelector = {exports: {}};
-
-  var withSelector_development = {};
-
-  /**
-   * @license React
-   * use-sync-external-store-shim/with-selector.development.js
-   *
-   * Copyright (c) Facebook, Inc. and its affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var hasRequiredWithSelector_development;
-
-  function requireWithSelector_development () {
-  	if (hasRequiredWithSelector_development) return withSelector_development;
-  	hasRequiredWithSelector_development = 1;
-
-  	{
-  	  (function() {
-
-  	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-  	if (
-  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-  	    'function'
-  	) {
-  	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-  	}
-  	          var React$1 = React;
-  	var shim = require$$1;
-
-  	/**
-  	 * inlined Object.is polyfill to avoid requiring consumers ship their own
-  	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-  	 */
-  	function is(x, y) {
-  	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-  	  ;
-  	}
-
-  	var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-  	var useSyncExternalStore = shim.useSyncExternalStore;
-
-  	// for CommonJS interop.
-
-  	var useRef = React$1.useRef,
-  	    useEffect = React$1.useEffect,
-  	    useMemo = React$1.useMemo,
-  	    useDebugValue = React$1.useDebugValue; // Same as useSyncExternalStore, but supports selector and isEqual arguments.
-
-  	function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-  	  // Use this to track the rendered snapshot.
-  	  var instRef = useRef(null);
-  	  var inst;
-
-  	  if (instRef.current === null) {
-  	    inst = {
-  	      hasValue: false,
-  	      value: null
-  	    };
-  	    instRef.current = inst;
-  	  } else {
-  	    inst = instRef.current;
-  	  }
-
-  	  var _useMemo = useMemo(function () {
-  	    // Track the memoized state using closure variables that are local to this
-  	    // memoized instance of a getSnapshot function. Intentionally not using a
-  	    // useRef hook, because that state would be shared across all concurrent
-  	    // copies of the hook/component.
-  	    var hasMemo = false;
-  	    var memoizedSnapshot;
-  	    var memoizedSelection;
-
-  	    var memoizedSelector = function (nextSnapshot) {
-  	      if (!hasMemo) {
-  	        // The first time the hook is called, there is no memoized result.
-  	        hasMemo = true;
-  	        memoizedSnapshot = nextSnapshot;
-
-  	        var _nextSelection = selector(nextSnapshot);
-
-  	        if (isEqual !== undefined) {
-  	          // Even if the selector has changed, the currently rendered selection
-  	          // may be equal to the new selection. We should attempt to reuse the
-  	          // current value if possible, to preserve downstream memoizations.
-  	          if (inst.hasValue) {
-  	            var currentSelection = inst.value;
-
-  	            if (isEqual(currentSelection, _nextSelection)) {
-  	              memoizedSelection = currentSelection;
-  	              return currentSelection;
-  	            }
-  	          }
-  	        }
-
-  	        memoizedSelection = _nextSelection;
-  	        return _nextSelection;
-  	      } // We may be able to reuse the previous invocation's result.
-
-
-  	      // We may be able to reuse the previous invocation's result.
-  	      var prevSnapshot = memoizedSnapshot;
-  	      var prevSelection = memoizedSelection;
-
-  	      if (objectIs(prevSnapshot, nextSnapshot)) {
-  	        // The snapshot is the same as last time. Reuse the previous selection.
-  	        return prevSelection;
-  	      } // The snapshot has changed, so we need to compute a new selection.
-
-
-  	      // The snapshot has changed, so we need to compute a new selection.
-  	      var nextSelection = selector(nextSnapshot); // If a custom isEqual function is provided, use that to check if the data
-  	      // has changed. If it hasn't, return the previous selection. That signals
-  	      // to React that the selections are conceptually equal, and we can bail
-  	      // out of rendering.
-
-  	      // If a custom isEqual function is provided, use that to check if the data
-  	      // has changed. If it hasn't, return the previous selection. That signals
-  	      // to React that the selections are conceptually equal, and we can bail
-  	      // out of rendering.
-  	      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {
-  	        return prevSelection;
-  	      }
-
-  	      memoizedSnapshot = nextSnapshot;
-  	      memoizedSelection = nextSelection;
-  	      return nextSelection;
-  	    }; // Assigning this to a constant so that Flow knows it can't change.
-
-
-  	    // Assigning this to a constant so that Flow knows it can't change.
-  	    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
-
-  	    var getSnapshotWithSelector = function () {
-  	      return memoizedSelector(getSnapshot());
-  	    };
-
-  	    var getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? undefined : function () {
-  	      return memoizedSelector(maybeGetServerSnapshot());
-  	    };
-  	    return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-  	  }, [getSnapshot, getServerSnapshot, selector, isEqual]),
-  	      getSelection = _useMemo[0],
-  	      getServerSelection = _useMemo[1];
-
-  	  var value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
-  	  useEffect(function () {
-  	    inst.hasValue = true;
-  	    inst.value = value;
-  	  }, [value]);
-  	  useDebugValue(value);
-  	  return value;
-  	}
-
-  	withSelector_development.useSyncExternalStoreWithSelector = useSyncExternalStoreWithSelector;
-  	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-  	if (
-  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-  	    'function'
-  	) {
-  	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-  	}
-  	        
-  	  })();
-  	}
-  	return withSelector_development;
-  }
-
-  {
-    withSelector.exports = requireWithSelector_development();
-  }
-
-  var withSelectorExports = withSelector.exports;
-
-  // src/index.ts
-  function useStore(store, selector = (d) => d) {
-    const slice = withSelectorExports.useSyncExternalStoreWithSelector(
-      store.subscribe,
-      () => store.state,
-      () => store.state,
-      selector,
-      shallow
-    );
-    return slice;
-  }
-  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;
-  }
-
-  /**
-   * @tanstack/react-router/src/index.tsx
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
-
-  let routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  if (typeof document !== 'undefined') {
-    if (window.__TSR_ROUTER_CONTEXT__) {
-      routerContext = window.__TSR_ROUTER_CONTEXT__;
-    } else {
-      window.__TSR_ROUTER_CONTEXT__ = routerContext;
-    }
-  }
-
-  function useRouter(opts) {
-    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || routerContext : routerContext;
-    const value = React__namespace.useContext(resolvedContext);
-    warning(!((opts?.warn ?? true) && !value), 'useRouter must be used inside a <RouterProvider> component!');
-    return value;
-  }
-
-  function useRouterState(opts) {
-    const contextRouter = useRouter({
-      warn: opts?.router === undefined
-    });
-    return useStore((opts?.router || contextRouter).__store, opts?.select);
-  }
-  function isFunction(d) {
-    return typeof d === 'function';
-  }
-  function functionalUpdate(updater, previous) {
-    if (isFunction(updater)) {
-      return updater(previous);
-    }
-    return updater;
-  }
-  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));
-  }
-  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 getItem = key => {
-    try {
-      const itemValue = localStorage.getItem(key);
-      if (typeof itemValue === 'string') {
-        return JSON.parse(itemValue);
-      }
-      return undefined;
-    } catch {
-      return undefined;
-    }
-  };
-  function useLocalStorage(key, defaultValue) {
-    const [value, setValue] = React.useState();
-    React.useEffect(() => {
-      const initialValue = getItem(key);
-      if (typeof initialValue === 'undefined' || initialValue === null) {
-        setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
-      } else {
-        setValue(initialValue);
-      }
-    }, [defaultValue, key]);
-    const setter = React.useCallback(updater => {
-      setValue(old => {
-        let newVal = updater;
-        if (typeof updater == 'function') {
-          newVal = updater(old);
-        }
-        try {
-          localStorage.setItem(key, JSON.stringify(newVal));
-        } catch {}
-        return newVal;
-      });
-    }, [key]);
-    return [value, setter];
-  }
-
-  const defaultTheme = {
-    background: '#222222',
-    backgroundAlt: '#292929',
-    foreground: 'white',
-    gray: '#444',
-    grayAlt: '#444',
-    inputBackgroundColor: '#fff',
-    inputTextColor: '#000',
-    success: '#80cb00',
-    danger: '#ff0085',
-    active: '#0099ff',
-    warning: '#ffb200'
-  };
-  const ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
-  function ThemeProvider({
-    theme,
-    ...rest
-  }) {
-    return /*#__PURE__*/React.createElement(ThemeContext.Provider, _extends({
-      value: theme
-    }, rest));
-  }
-  function useTheme() {
-    return React.useContext(ThemeContext);
-  }
-
-  function useMediaQuery(query) {
-    // Keep track of the preference in state, start with the current match
-    const [isMatch, setIsMatch] = React.useState(() => {
-      if (typeof window !== 'undefined') {
-        return window.matchMedia && window.matchMedia(query).matches;
-      }
-      return;
-    });
-
-    // Watch for changes
-    React.useEffect(() => {
-      if (typeof window !== 'undefined') {
-        if (!window.matchMedia) {
-          return;
-        }
-
-        // Create a matcher
-        const matcher = window.matchMedia(query);
-
-        // Create our handler
-        const onChange = ({
-          matches
-        }) => setIsMatch(matches);
-
-        // Listen for changes
-        matcher.addListener(onChange);
-        return () => {
-          // Stop listening for changes
-          matcher.removeListener(onChange);
-        };
-      }
-      return;
-    }, [isMatch, query, setIsMatch]);
-    return isMatch;
-  }
-
-  const isServer$1 = typeof window === 'undefined';
-  function getStatusColor(match, theme) {
-    return match.status === 'pending' || match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
-  }
-  function getRouteStatusColor(matches, route, theme) {
-    const found = matches.find(d => d.routeId === route.id);
-    if (!found) return theme.gray;
-    return getStatusColor(found, theme);
-  }
-  function styled(type, newStyles, queries = {}) {
-    return /*#__PURE__*/React.forwardRef(({
-      style,
-      ...rest
-    }, ref) => {
-      const theme = useTheme();
-      const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useMediaQuery(key) ? {
-          ...current,
-          ...(typeof value === 'function' ? value(rest, theme) : value)
-        } : current;
-      }, {});
-      return /*#__PURE__*/React.createElement(type, {
-        ...rest,
-        style: {
-          ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
-          ...style,
-          ...mediaStyles
-        },
-        ref
-      });
-    });
-  }
-  function useIsMounted() {
-    const mountedRef = React.useRef(false);
-    const isMounted = React.useCallback(() => mountedRef.current, []);
-    React[isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => {
-      mountedRef.current = true;
-      return () => {
-        mountedRef.current = false;
-      };
-    }, []);
-    return isMounted;
-  }
-
-  /**
-   * Displays a string regardless the type of the data
-   * @param {unknown} value Value to be stringified
-   */
-  const displayValue = value => {
-    const name = Object.getOwnPropertyNames(Object(value));
-    const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value;
-    try {
-      return JSON.stringify(newValue, name);
-    } catch (e) {
-      return `unable to stringify`;
-    }
-  };
-
-  /**
-   * This hook is a safe useState version which schedules state updates in microtasks
-   * to prevent updating a component state while React is rendering different components
-   * or when the component is not mounted anymore.
-   */
-  function useSafeState(initialState) {
-    const isMounted = useIsMounted();
-    const [state, setState] = React.useState(initialState);
-    const safeSetState = React.useCallback(value => {
-      scheduleMicrotask(() => {
-        if (isMounted()) {
-          setState(value);
-        }
-      });
-    }, [isMounted]);
-    return [state, safeSetState];
-  }
-
-  /**
-   * Schedules a microtask.
-   * This can be useful to schedule state updates after rendering.
-   */
-  function scheduleMicrotask(callback) {
-    Promise.resolve().then(callback).catch(error => setTimeout(() => {
-      throw error;
-    }));
-  }
-  function multiSortBy(arr, accessors = [d => d]) {
-    return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => {
-      for (const accessor of accessors) {
-        const ao = accessor(a);
-        const bo = accessor(b);
-        if (typeof ao === 'undefined') {
-          if (typeof bo === 'undefined') {
-            continue;
-          }
-          return 1;
-        }
-        if (ao === bo) {
-          continue;
-        }
-        return ao > bo ? 1 : -1;
-      }
-      return ai - bi;
-    }).map(([d]) => d);
-  }
-
-  const Panel = styled('div', (_props, theme) => ({
-    fontSize: 'clamp(12px, 1.5vw, 14px)',
-    fontFamily: `sans-serif`,
-    display: 'flex',
-    backgroundColor: theme.background,
-    color: theme.foreground
-  }), {
-    '(max-width: 700px)': {
-      flexDirection: 'column'
-    },
-    '(max-width: 600px)': {
-      fontSize: '.9em'
-      // flexDirection: 'column',
-    }
-  });
-  const ActivePanel = styled('div', () => ({
-    flex: '1 1 500px',
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'auto',
-    height: '100%'
-  }), {
-    '(max-width: 700px)': (_props, theme) => ({
-      borderTop: `2px solid ${theme.gray}`
-    })
-  });
-  const Button = styled('button', (props, theme) => ({
-    appearance: 'none',
-    fontSize: '.9em',
-    fontWeight: 'bold',
-    background: theme.gray,
-    border: '0',
-    borderRadius: '.3em',
-    color: 'white',
-    padding: '.5em',
-    opacity: props.disabled ? '.5' : undefined,
-    cursor: 'pointer'
-  }));
-
-  // export const QueryKeys = styled('span', {
-  //   display: 'inline-block',
-  //   fontSize: '0.9em',
-  // })
-
-  // export const QueryKey = styled('span', {
-  //   display: 'inline-flex',
-  //   alignItems: 'center',
-  //   padding: '.2em .4em',
-  //   fontWeight: 'bold',
-  //   textShadow: '0 0 10px black',
-  //   borderRadius: '.2em',
-  // })
-
-  const Code = styled('code', {
-    fontSize: '.9em'
-  });
-
-  const Entry = styled('div', {
-    fontFamily: 'Menlo, monospace',
-    fontSize: '.7rem',
-    lineHeight: '1.7',
-    outline: 'none',
-    wordBreak: 'break-word'
-  });
-  const Label = styled('span', {
-    color: 'white'
-  });
-  const LabelButton = styled('button', {
-    cursor: 'pointer',
-    color: 'white'
-  });
-  const ExpandButton = styled('button', {
-    cursor: 'pointer',
-    color: 'inherit',
-    font: 'inherit',
-    outline: 'inherit',
-    background: 'transparent',
-    border: 'none',
-    padding: 0
-  });
-  const Value = styled('span', (_props, theme) => ({
-    color: theme.danger
-  }));
-  const SubEntries = styled('div', {
-    marginLeft: '.1em',
-    paddingLeft: '1em',
-    borderLeft: '2px solid rgba(0,0,0,.15)'
-  });
-  const Info = styled('span', {
-    color: 'grey',
-    fontSize: '.7em'
-  });
-  const Expander = ({
-    expanded,
-    style = {}
-  }) => /*#__PURE__*/React__namespace.createElement("span", {
-    style: {
-      display: 'inline-block',
-      transition: 'all .1s ease',
-      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
-      ...style
-    }
-  }, "\u25B6");
-  /**
-   * Chunk elements in the array by size
-   *
-   * when the array cannot be chunked evenly by size, the last chunk will be
-   * filled with the remaining elements
-   *
-   * @example
-   * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
-   */
-  function chunkArray(array, size) {
-    if (size < 1) return [];
-    let i = 0;
-    const result = [];
-    while (i < array.length) {
-      result.push(array.slice(i, i + size));
-      i = i + size;
-    }
-    return result;
-  }
-  const DefaultRenderer = ({
-    handleEntry,
-    label,
-    value,
-    subEntries = [],
-    subEntryPages = [],
-    type,
-    expanded = false,
-    toggleExpanded,
-    pageSize,
-    renderer
-  }) => {
-    const [expandedPages, setExpandedPages] = React__namespace.useState([]);
-    const [valueSnapshot, setValueSnapshot] = React__namespace.useState(undefined);
-    const refreshValueSnapshot = () => {
-      setValueSnapshot(value());
-    };
-    return /*#__PURE__*/React__namespace.createElement(Entry, null, subEntryPages.length ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ExpandButton, {
-      onClick: () => toggleExpanded()
-    }, /*#__PURE__*/React__namespace.createElement(Expander, {
-      expanded: expanded
-    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
-      key: index
-    }, /*#__PURE__*/React__namespace.createElement(Entry, null, /*#__PURE__*/React__namespace.createElement(LabelButton, {
-      onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
-    }, /*#__PURE__*/React__namespace.createElement(Expander, {
-      expanded: expanded
-    }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, entries.map(entry => handleEntry(entry))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Explorer, {
-      renderer: renderer,
-      label: /*#__PURE__*/React__namespace.createElement("button", {
-        onClick: refreshValueSnapshot,
-        style: {
-          appearance: 'none',
-          border: '0',
-          background: 'transparent'
-        }
-      }, /*#__PURE__*/React__namespace.createElement(Label, null, label), " \uD83D\uDD04", ' '),
-      value: valueSnapshot,
-      defaultExpanded: {}
-    })) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React__namespace.createElement(Value, null, displayValue(value))));
-  };
-  function isIterable(x) {
-    return Symbol.iterator in x;
-  }
-  function Explorer({
-    value,
-    defaultExpanded,
-    renderer = DefaultRenderer,
-    pageSize = 100,
-    filterSubEntries,
-    ...rest
-  }) {
-    const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
-    const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
-    let type = typeof value;
-    let subEntries = [];
-    const makeProperty = sub => {
-      const subDefaultExpanded = defaultExpanded === true ? {
-        [sub.label]: true
-      } : defaultExpanded?.[sub.label];
-      return {
-        ...sub,
-        defaultExpanded: subDefaultExpanded
-      };
-    };
-    if (Array.isArray(value)) {
-      type = 'array';
-      subEntries = value.map((d, i) => makeProperty({
-        label: i.toString(),
-        value: d
-      }));
-    } else if (value !== null && typeof value === 'object' && isIterable(value) && typeof value[Symbol.iterator] === 'function') {
-      type = 'Iterable';
-      subEntries = Array.from(value, (val, i) => makeProperty({
-        label: i.toString(),
-        value: val
-      }));
-    } else if (typeof value === 'object' && value !== null) {
-      type = 'object';
-      subEntries = Object.entries(value).map(([key, val]) => makeProperty({
-        label: key,
-        value: val
-      }));
-    }
-    subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries;
-    const subEntryPages = chunkArray(subEntries, pageSize);
-    return renderer({
-      handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
-        key: entry.label,
-        value: value,
-        renderer: renderer,
-        filterSubEntries: filterSubEntries
-      }, rest, entry)),
-      type,
-      subEntries,
-      subEntryPages,
-      value,
-      expanded,
-      toggleExpanded,
-      pageSize,
-      ...rest
-    });
-  }
-
-  const isServer = typeof window === 'undefined';
-  function Logo(props) {
-    return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-      style: {
-        ...(props.style ?? {}),
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-        fontSize: '0.8rem',
-        fontWeight: 'bolder',
-        lineHeight: '1'
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        letterSpacing: '-0.05rem'
-      }
-    }, "TANSTACK"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
-        // @ts-ignore
-        '--tw-gradient-from': '#84cc16',
-        '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
-        '--tw-gradient-to': '#10b981',
-        WebkitBackgroundClip: 'text',
-        color: 'transparent',
-        letterSpacing: '0.1rem',
-        marginRight: '-0.2rem'
-      }
-    }, "ROUTER"));
-  }
-  function TanStackRouterDevtools({
-    initialIsOpen,
-    panelProps = {},
-    closeButtonProps = {},
-    toggleButtonProps = {},
-    position = 'bottom-left',
-    containerElement: Container = 'footer',
-    router
-  }) {
-    const rootRef = React.useRef(null);
-    const panelRef = React.useRef(null);
-    const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen);
-    const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage('tanstackRouterDevtoolsHeight', null);
-    const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
-    const [isResizing, setIsResizing] = useSafeState(false);
-    const isMounted = useIsMounted();
-    const handleDragStart = (panelElement, startEvent) => {
-      if (startEvent.button !== 0) return; // Only allow left click for drag
-
-      setIsResizing(true);
-      const dragInfo = {
-        originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
-        pageY: startEvent.pageY
-      };
-      const run = moveEvent => {
-        const delta = dragInfo.pageY - moveEvent.pageY;
-        const newHeight = dragInfo?.originalHeight + delta;
-        setDevtoolsHeight(newHeight);
-        if (newHeight < 70) {
-          setIsOpen(false);
-        } else {
-          setIsOpen(true);
-        }
-      };
-      const unsub = () => {
-        setIsResizing(false);
-        document.removeEventListener('mousemove', run);
-        document.removeEventListener('mouseUp', unsub);
-      };
-      document.addEventListener('mousemove', run);
-      document.addEventListener('mouseup', unsub);
-    };
-    React.useEffect(() => {
-      setIsResolvedOpen(isOpen ?? false);
-    }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
-
-    // Toggle panel visibility before/after transition (depending on direction).
-    // Prevents focusing in a closed panel.
-    React.useEffect(() => {
-      const ref = panelRef.current;
-      if (ref) {
-        const handlePanelTransitionStart = () => {
-          if (ref && isResolvedOpen) {
-            ref.style.visibility = 'visible';
-          }
-        };
-        const handlePanelTransitionEnd = () => {
-          if (ref && !isResolvedOpen) {
-            ref.style.visibility = 'hidden';
-          }
-        };
-        ref.addEventListener('transitionstart', handlePanelTransitionStart);
-        ref.addEventListener('transitionend', handlePanelTransitionEnd);
-        return () => {
-          ref.removeEventListener('transitionstart', handlePanelTransitionStart);
-          ref.removeEventListener('transitionend', handlePanelTransitionEnd);
-        };
-      }
-      return;
-    }, [isResolvedOpen]);
-    React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
-      if (isResolvedOpen) {
-        const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
-        const run = () => {
-          const containerHeight = panelRef.current?.getBoundingClientRect().height;
-          if (rootRef.current?.parentElement) {
-            rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
-          }
-        };
-        run();
-        if (typeof window !== 'undefined') {
-          window.addEventListener('resize', run);
-          return () => {
-            window.removeEventListener('resize', run);
-            if (rootRef.current?.parentElement && typeof previousValue === 'string') {
-              rootRef.current.parentElement.style.paddingBottom = previousValue;
-            }
-          };
-        }
-      }
-      return;
-    }, [isResolvedOpen]);
-    const {
-      style: panelStyle = {},
-      ...otherPanelProps
-    } = panelProps;
-    const {
-      style: closeButtonStyle = {},
-      onClick: onCloseClick,
-      ...otherCloseButtonProps
-    } = closeButtonProps;
-    const {
-      style: toggleButtonStyle = {},
-      onClick: onToggleClick,
-      ...otherToggleButtonProps
-    } = toggleButtonProps;
-
-    // Do not render on the server
-    if (!isMounted()) return null;
-    return /*#__PURE__*/React.createElement(Container, {
-      ref: rootRef,
-      className: "TanStackRouterDevtools"
-    }, /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: defaultTheme
-    }, /*#__PURE__*/React.createElement(TanStackRouterDevtoolsPanel, _extends({
-      ref: panelRef
-    }, otherPanelProps, {
-      router: router,
-      style: {
-        position: 'fixed',
-        bottom: '0',
-        right: '0',
-        zIndex: 99999,
-        width: '100%',
-        height: devtoolsHeight ?? 500,
-        maxHeight: '90%',
-        boxShadow: '0 0 20px rgba(0,0,0,.3)',
-        borderTop: `1px solid ${defaultTheme.gray}`,
-        transformOrigin: 'top',
-        // visibility will be toggled after transitions, but set initial state here
-        visibility: isOpen ? 'visible' : 'hidden',
-        ...panelStyle,
-        ...(isResizing ? {
-          transition: `none`
-        } : {
-          transition: `all .2s ease`
-        }),
-        ...(isResolvedOpen ? {
-          opacity: 1,
-          pointerEvents: 'all',
-          transform: `translateY(0) scale(1)`
-        } : {
-          opacity: 0,
-          pointerEvents: 'none',
-          transform: `translateY(15px) scale(1.02)`
-        })
-      },
-      isOpen: isResolvedOpen,
-      setIsOpen: setIsOpen,
-      handleDragStart: e => handleDragStart(panelRef.current, e)
-    })), isResolvedOpen ? /*#__PURE__*/React.createElement(Button, _extends({
-      type: "button",
-      "aria-label": "Close TanStack Router Devtools"
-    }, otherCloseButtonProps, {
-      onClick: e => {
-        setIsOpen(false);
-        onCloseClick && onCloseClick(e);
-      },
-      style: {
-        position: 'fixed',
-        zIndex: 99999,
-        margin: '.5em',
-        bottom: 0,
-        ...(position === 'top-right' ? {
-          right: '0'
-        } : position === 'top-left' ? {
-          left: '0'
-        } : position === 'bottom-right' ? {
-          right: '0'
-        } : {
-          left: '0'
-        }),
-        ...closeButtonStyle
-      }
-    }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({
-      type: "button"
-    }, otherToggleButtonProps, {
-      "aria-label": "Open TanStack Router Devtools",
-      onClick: e => {
-        setIsOpen(true);
-        onToggleClick && onToggleClick(e);
-      },
-      style: {
-        appearance: 'none',
-        background: 'none',
-        border: 0,
-        padding: 0,
-        position: 'fixed',
-        zIndex: 99999,
-        display: 'inline-flex',
-        fontSize: '1.5em',
-        margin: '.5em',
-        cursor: 'pointer',
-        width: 'fit-content',
-        ...(position === 'top-right' ? {
-          top: '0',
-          right: '0'
-        } : position === 'top-left' ? {
-          top: '0',
-          left: '0'
-        } : position === 'bottom-right' ? {
-          bottom: '0',
-          right: '0'
-        } : {
-          bottom: '0',
-          left: '0'
-        }),
-        ...toggleButtonStyle
-      }
-    }), /*#__PURE__*/React.createElement(Logo, {
-      "aria-hidden": true
-    })) : null);
-  }
-  function RouteComp({
-    route,
-    isRoot,
-    activeId,
-    setActiveId
-  }) {
-    const routerState = useRouterState();
-    const matches = routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches;
-    const match = routerState.matches.find(d => d.routeId === route.id);
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      role: "button",
-      "aria-label": `Open match details for ${route.id}`,
-      onClick: () => {
-        if (match) {
-          setActiveId(activeId === route.id ? '' : route.id);
-        }
-      },
-      style: {
-        display: 'flex',
-        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-        cursor: match ? 'pointer' : 'default',
-        alignItems: 'center',
-        background: route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,
-        padding: '.25rem .5rem',
-        gap: '.5rem'
-      }
-    }, isRoot ? null : /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '.7rem',
-        height: '.7rem',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '100%',
-        transition: 'all .2s ease-out',
-        background: getRouteStatusColor(matches, route, defaultTheme),
-        opacity: match ? 1 : 0.3
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: '1 0 auto',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: isRoot ? '0 .25rem' : 0,
-        opacity: match ? 1 : 0.7,
-        fontSize: '0.7rem'
-      }
-    }, /*#__PURE__*/React.createElement(Code, null, route.path || trimPath(route.id), " "), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, match ? /*#__PURE__*/React.createElement(Code, {
-      style: {
-        opacity: 0.3
-      }
-    }, match.id) : null, /*#__PURE__*/React.createElement(AgeTicker, {
-      match: match
-    })))), route.children?.length ? /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginLeft: isRoot ? 0 : '1rem',
-        borderLeft: isRoot ? '' : `solid 1px ${defaultTheme.grayAlt}`
-      }
-    }, [...route.children].sort((a, b) => {
-      return a.rank - b.rank;
-    }).map(r => /*#__PURE__*/React.createElement(RouteComp, {
-      key: r.id,
-      route: r,
-      activeId: activeId,
-      setActiveId: setActiveId
-    }))) : null);
-  }
-  const TanStackRouterDevtoolsPanel = /*#__PURE__*/React.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-    const {
-      isOpen = true,
-      setIsOpen,
-      handleDragStart,
-      router: userRouter,
-      ...panelProps
-    } = props;
-    const router = useRouter();
-    const routerState = useRouterState();
-    const matches = [...(routerState.pendingMatches ?? []), ...routerState.matches, ...routerState.cachedMatches];
-    invariant(router, 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.');
-
-    // useStore(router.__store)
-
-    const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
-    const [activeId, setActiveId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-    const activeMatch = React.useMemo(() => matches.find(d => d.routeId === activeId || d.id === activeId), [matches, activeId]);
-    const hasSearch = Object.keys(routerState.location.search || {}).length;
-    const explorerState = {
-      ...router,
-      state: router.state
-    };
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: defaultTheme
-    }, /*#__PURE__*/React.createElement(Panel, _extends({
-      ref: ref,
-      className: "TanStackRouterDevtoolsPanel"
-    }, panelProps), /*#__PURE__*/React.createElement("style", {
-      dangerouslySetInnerHTML: {
-        __html: `
-
-            .TanStackRouterDevtoolsPanel * {
-              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
-            }
-
-            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {
-              width: 1em;
-              height: 1em;
-            }
-
-            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {
-              background: ${defaultTheme.backgroundAlt};
-            }
-
-            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {
-              background: ${defaultTheme.gray};
-              border-radius: .5em;
-              border: 3px solid ${defaultTheme.backgroundAlt};
-            }
-
-            .TanStackRouterDevtoolsPanel table {
-              width: 100%;
-            }
-
-            .TanStackRouterDevtoolsPanel table tr {
-              border-bottom: 2px dotted rgba(255, 255, 255, .2);
-            }
-
-            .TanStackRouterDevtoolsPanel table tr:last-child {
-              border-bottom: none
-            }
-
-            .TanStackRouterDevtoolsPanel table td {
-              padding: .25rem .5rem;
-              border-right: 2px dotted rgba(255, 255, 255, .05);
-            }
-
-            .TanStackRouterDevtoolsPanel table td:last-child {
-              border-right: none
-            }
-
-          `
-      }
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        width: '100%',
-        height: '4px',
-        marginBottom: '-4px',
-        cursor: 'row-resize',
-        zIndex: 100000
-      },
-      onMouseDown: handleDragStart
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: '1 1 500px',
-        minHeight: '40%',
-        maxHeight: '100%',
-        overflow: 'auto',
-        borderRight: `1px solid ${defaultTheme.grayAlt}`,
-        display: 'flex',
-        flexDirection: 'column'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'start',
-        gap: '1rem',
-        padding: '1rem',
-        alignItems: 'center',
-        background: defaultTheme.backgroundAlt
-      }
-    }, /*#__PURE__*/React.createElement(Logo, {
-      "aria-hidden": true
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
-        fontWeight: 'bold'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontWeight: 100
-      }
-    }, "Devtools"))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        overflowY: 'auto',
-        flex: '1'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em'
-      }
-    }, /*#__PURE__*/React.createElement(Explorer, {
-      label: "Router",
-      value: Object.fromEntries(multiSortBy(Object.keys(explorerState), ['state', 'routesById', 'routesByPath', 'flatRoutes', 'options'].map(d => dd => dd !== d)).map(key => [key, explorerState[key]]).filter(d => typeof d[1] !== 'function' && !['__store', 'basepath', 'injectedHtml', 'subscribers', 'latestLoadPromise', 'navigateTimeout', 'resetNextScroll', 'tempLocationKey', 'latestLocation', 'routeTree', 'history'].includes(d[0]))),
-      defaultExpanded: {
-        state: {},
-        context: {},
-        options: {}
-      },
-      filterSubEntries: subEntries => {
-        return subEntries.filter(d => typeof d.value !== 'function');
-      }
-    })))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: '1 1 500px',
-        minHeight: '40%',
-        maxHeight: '100%',
-        overflow: 'auto',
-        borderRight: `1px solid ${defaultTheme.grayAlt}`,
-        display: 'flex',
-        flexDirection: 'column'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: '1 1 auto',
-        overflowY: 'auto'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em',
-        background: defaultTheme.backgroundAlt,
-        position: 'sticky',
-        top: 0,
-        zIndex: 1,
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem',
-        fontWeight: 'bold'
-      }
-    }, "Pathname", ' ', routerState.location.maskedLocation ? /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.1rem .5rem',
-        background: defaultTheme.warning,
-        color: 'black',
-        borderRadius: '.5rem'
-      }
-    }, "Masked") : null), /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5rem',
-        display: 'flex',
-        gap: '.5rem',
-        alignItems: 'center'
-      }
-    }, /*#__PURE__*/React.createElement("code", {
-      style: {
-        opacity: 0.6
-      }
-    }, routerState.location.pathname), routerState.location.maskedLocation ? /*#__PURE__*/React.createElement("code", {
-      style: {
-        color: defaultTheme.warning,
-        fontWeight: 'bold'
-      }
-    }, routerState.location.maskedLocation.pathname) : null), /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em',
-        background: defaultTheme.backgroundAlt,
-        position: 'sticky',
-        top: 0,
-        zIndex: 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: '.5rem',
-        fontWeight: 'bold'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: () => {
-        setShowMatches(false);
-      },
-      disabled: !showMatches,
-      style: {
-        appearance: 'none',
-        opacity: showMatches ? 0.5 : 1,
-        border: 0,
-        background: 'transparent',
-        color: 'inherit',
-        cursor: 'pointer'
-      }
-    }, "Routes"), "/", /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      onClick: () => {
-        setShowMatches(true);
-      },
-      disabled: showMatches,
-      style: {
-        appearance: 'none',
-        opacity: !showMatches ? 0.5 : 1,
-        border: 0,
-        background: 'transparent',
-        color: 'inherit',
-        cursor: 'pointer'
-      }
-    }, "Matches")), /*#__PURE__*/React.createElement("div", {
-      style: {
-        opacity: 0.3,
-        fontSize: '0.7rem',
-        fontWeight: 'normal'
-      }
-    }, "age / staleTime / gcTime")), !showMatches ? /*#__PURE__*/React.createElement(RouteComp, {
-      route: router.routeTree,
-      isRoot: true,
-      activeId: activeId,
-      setActiveId: setActiveId
-    }) : /*#__PURE__*/React.createElement("div", null, (routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches).map((match, i) => {
-      return /*#__PURE__*/React.createElement("div", {
-        key: match.id || i,
-        role: "button",
-        "aria-label": `Open match details for ${match.id}`,
-        onClick: () => setActiveId(activeId === match.id ? '' : match.id),
-        style: {
-          display: 'flex',
-          borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-          cursor: 'pointer',
-          alignItems: 'center',
-          background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          flex: '0 0 auto',
-          width: '1.3rem',
-          height: '1.3rem',
-          marginLeft: '.25rem',
-          background: getStatusColor(match, defaultTheme),
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontWeight: 'bold',
-          borderRadius: '.25rem',
-          transition: 'all .2s ease-out'
-        }
-      }), /*#__PURE__*/React.createElement(Code, {
-        style: {
-          padding: '.5em',
-          fontSize: '0.7rem'
-        }
-      }, `${match.id}`), /*#__PURE__*/React.createElement(AgeTicker, {
-        match: match
-      }));
-    }))), routerState.cachedMatches?.length ? /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: '1 1 auto',
-        overflowY: 'auto',
-        maxHeight: '50%'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em',
-        background: defaultTheme.backgroundAlt,
-        position: 'sticky',
-        top: 0,
-        zIndex: 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: '.5rem',
-        fontWeight: 'bold'
-      }
-    }, /*#__PURE__*/React.createElement("div", null, "Cached Matches"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        opacity: 0.3,
-        fontSize: '0.7rem',
-        fontWeight: 'normal'
-      }
-    }, "age / staleTime / gcTime")), /*#__PURE__*/React.createElement("div", null, routerState.cachedMatches.map(match => {
-      return /*#__PURE__*/React.createElement("div", {
-        key: match.id,
-        role: "button",
-        "aria-label": `Open match details for ${match.id}`,
-        onClick: () => setActiveId(activeId === match.id ? '' : match.id),
-        style: {
-          display: 'flex',
-          borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-          cursor: 'pointer',
-          alignItems: 'center',
-          background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
-          fontSize: '0.7rem'
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          flex: '0 0 auto',
-          width: '.75rem',
-          height: '.75rem',
-          marginLeft: '.25rem',
-          background: getStatusColor(match, defaultTheme),
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontWeight: 'bold',
-          borderRadius: '100%',
-          transition: 'all 1s ease-out'
-        }
-      }), /*#__PURE__*/React.createElement(Code, {
-        style: {
-          padding: '.5em'
-        }
-      }, `${match.id}`), /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginLeft: 'auto'
-        }
-      }, /*#__PURE__*/React.createElement(AgeTicker, {
-        match: match
-      })));
-    }))) : null), activeMatch ? /*#__PURE__*/React.createElement(ActivePanel, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em',
-        background: defaultTheme.backgroundAlt,
-        position: 'sticky',
-        top: 0,
-        bottom: 0,
-        zIndex: 1
-      }
-    }, "Match Details"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", {
-      style: {
-        fontSize: '0.8rem'
-      }
-    }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      style: {
-        opacity: '.5'
-      }
-    }, "ID"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Code, {
-      style: {
-        lineHeight: '1.8em'
-      }
-    }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      style: {
-        opacity: '.5'
-      }
-    }, "Status"), /*#__PURE__*/React.createElement("td", null, routerState.pendingMatches?.find(d => d.id === activeMatch.id) ? 'Pending' : routerState.matches?.find(d => d.id === activeMatch.id) ? 'Active' : 'Cached', ' ', "- ", activeMatch.status)), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-      style: {
-        opacity: '.5'
-      }
-    }, "Last Updated"), /*#__PURE__*/React.createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: defaultTheme.backgroundAlt,
-        padding: '.5em',
-        position: 'sticky',
-        top: 0,
-        bottom: 0,
-        zIndex: 1
-      }
-    }, "Loader Data"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em'
-      }
-    }, /*#__PURE__*/React.createElement(Explorer, {
-      label: "loaderData",
-      value: activeMatch.loaderData,
-      defaultExpanded: {}
-    }))) : null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: defaultTheme.backgroundAlt,
-        padding: '.5em',
-        position: 'sticky',
-        top: 0,
-        bottom: 0,
-        zIndex: 1
-      }
-    }, "Explorer"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em'
-      }
-    }, /*#__PURE__*/React.createElement(Explorer, {
-      label: "Match",
-      value: activeMatch,
-      defaultExpanded: {}
-    }))) : null, hasSearch ? /*#__PURE__*/React.createElement("div", {
-      style: {
-        flex: '1 1 500px',
-        minHeight: '40%',
-        maxHeight: '100%',
-        overflow: 'auto',
-        borderRight: `1px solid ${defaultTheme.grayAlt}`,
-        display: 'flex',
-        flexDirection: 'column'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em',
-        background: defaultTheme.backgroundAlt,
-        position: 'sticky',
-        top: 0,
-        bottom: 0,
-        zIndex: 1,
-        fontWeight: 'bold'
-      }
-    }, "Search Params"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '.5em'
-      }
-    }, /*#__PURE__*/React.createElement(Explorer, {
-      value: routerState.location.search || {},
-      defaultExpanded: Object.keys(routerState.location.search || {}).reduce((obj, next) => {
-        obj[next] = {};
-        return obj;
-      }, {})
-    }))) : null));
-  });
-  function AgeTicker({
-    match
-  }) {
-    const router = useRouter();
-    const rerender = React.useReducer(() => ({}), () => ({}))[1];
-    React.useEffect(() => {
-      const interval = setInterval(() => {
-        rerender();
-      }, 1000);
-      return () => {
-        clearInterval(interval);
-      };
-    }, []);
-    if (!match) {
-      return null;
-    }
-    const route = router.looseRoutesById[match?.routeId];
-    if (!route.options.loader) {
-      return null;
-    }
-    const age = Date.now() - match?.updatedAt;
-    const staleTime = route.options.staleTime ?? router.options.defaultStaleTime ?? 0;
-    const gcTime = route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1000;
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '.25rem',
-        color: age > staleTime ? defaultTheme.warning : undefined
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {}
-    }, formatTime(age)), /*#__PURE__*/React.createElement("div", null, "/"), /*#__PURE__*/React.createElement("div", null, formatTime(staleTime)), /*#__PURE__*/React.createElement("div", null, "/"), /*#__PURE__*/React.createElement("div", null, formatTime(gcTime)));
-  }
-  function formatTime(ms) {
-    const units = ['s', 'min', 'h', 'd'];
-    const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000];
-    let chosenUnitIndex = 0;
-    for (let i = 1; i < values.length; i++) {
-      if (values[i] < 1) break;
-      chosenUnitIndex = i;
-    }
-    const formatter = new Intl.NumberFormat(navigator.language, {
-      compactDisplay: 'short',
-      notation: 'compact',
-      maximumFractionDigits: 0
-    });
-    return formatter.format(values[chosenUnitIndex]) + units[chosenUnitIndex];
-  }
-
-  exports.TanStackRouterDevtools = TanStackRouterDevtools;
-  exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
-
-}));
-//# sourceMappingURL=index.development.js.map