@tanstack/router-devtools 0.0.1-beta.99 → 1.0.0

package/build/umd/index.development.js

@@ -1,5 +1,5 @@
 /**
- * router-devtools
+ * @tanstack/router-devtools/src/index.tsx
  *
  * Copyright (c) TanStack
  *
@@ -9,15 +9,12 @@
  * @license MIT
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim/with-selector')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TanStackRouterDevtools = {}, global.React, global.withSelector));
-})(this, (function (exports, React, withSelector) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TanStackRouterDevtools = {}, global.React, global.require$$1));
+})(this, (function (exports, React, require$$1) { 'use strict';
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+  function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
       Object.keys(e).forEach(function (k) {
@@ -30,12 +27,11 @@
         }
       });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
   }
 
-  var React__namespace = /*#__PURE__*/_interopNamespace(React);
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -52,36 +48,235 @@
     return _extends.apply(this, arguments);
   }
 
+  var isProduction$1 = "development" === 'production';
   var prefix = 'Invariant failed';
   function invariant(condition, message) {
       if (condition) {
           return;
       }
+      if (isProduction$1) {
+          throw new Error(prefix);
+      }
       var provided = typeof message === 'function' ? message() : message;
       var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
       throw new Error(value);
   }
 
+  var isProduction = "development" === 'production';
+  function warning(condition, message) {
+    if (!isProduction) {
+      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 = {};
+
   /**
-   * react-store
+   * @license React
+   * use-sync-external-store-shim/with-selector.development.js
    *
-   * Copyright (c) TanStack
+   * Copyright (c) Facebook, Inc. and its affiliates.
    *
    * 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
+   * LICENSE file in the root directory of this source tree.
    */
 
-  function useStore(store, selector = d => d) {
-    const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
+  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) {
+    if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
       return false;
     }
     const keysA = Object.keys(objA);
@@ -97,7 +292,7 @@
   }
 
   /**
-   * router
+   * @tanstack/react-router/src/index.tsx
    *
    * Copyright (c) TanStack
    *
@@ -106,11 +301,58 @@
    *
    * @license MIT
    */
+  function isFunction(d) {
+    return typeof d === 'function';
+  }
+  function functionalUpdate(updater, previous) {
+    if (isFunction(updater)) {
+      return updater(previous);
+    }
+    return updater;
+  }
 
-  function last(arr) {
-    return arr[arr.length - 1];
+  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 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__namespace.useContext(resolvedContext);
+    warning(value, 'useRouter must be used inside a <RouterProvider> component!');
+    return value;
+  }
+  function trimPathLeft(path) {
+    return path === '/' ? path : path.replace(/^\/{1,}/, '');
+  }
+  function trimPathRight(path) {
+    return path === '/' ? path : path.replace(/\/{1,}$/, '');
   }
-  const routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  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 {
@@ -124,8 +366,8 @@
     }
   };
   function useLocalStorage(key, defaultValue) {
-    const [value, setValue] = React__default["default"].useState();
-    React__default["default"].useEffect(() => {
+    const [value, setValue] = React.useState();
+    React.useEffect(() => {
       const initialValue = getItem(key);
       if (typeof initialValue === 'undefined' || initialValue === null) {
         setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
@@ -133,7 +375,7 @@
         setValue(initialValue);
       }
     }, [defaultValue, key]);
-    const setter = React__default["default"].useCallback(updater => {
+    const setter = React.useCallback(updater => {
       setValue(old => {
         let newVal = updater;
         if (typeof updater == 'function') {
@@ -149,34 +391,34 @@
   }
 
   const defaultTheme = {
-    background: '#0b1521',
-    backgroundAlt: '#132337',
+    background: '#222222',
+    backgroundAlt: '#292929',
     foreground: 'white',
-    gray: '#3f4e60',
-    grayAlt: '#222e3e',
+    gray: '#444',
+    grayAlt: '#444',
     inputBackgroundColor: '#fff',
     inputTextColor: '#000',
-    success: '#00ab52',
+    success: '#80cb00',
     danger: '#ff0085',
-    active: '#006bff',
+    active: '#0099ff',
     warning: '#ffb200'
   };
-  const ThemeContext = /*#__PURE__*/React__default["default"].createContext(defaultTheme);
+  const ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
   function ThemeProvider({
     theme,
     ...rest
   }) {
-    return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, _extends({
+    return /*#__PURE__*/React.createElement(ThemeContext.Provider, _extends({
       value: theme
     }, rest));
   }
   function useTheme() {
-    return React__default["default"].useContext(ThemeContext);
+    return React.useContext(ThemeContext);
   }
 
   function useMediaQuery(query) {
     // Keep track of the preference in state, start with the current match
-    const [isMatch, setIsMatch] = React__default["default"].useState(() => {
+    const [isMatch, setIsMatch] = React.useState(() => {
       if (typeof window !== 'undefined') {
         return window.matchMedia && window.matchMedia(query).matches;
       }
@@ -184,7 +426,7 @@
     });
 
     // Watch for changes
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
       if (typeof window !== 'undefined') {
         if (!window.matchMedia) {
           return;
@@ -212,10 +454,15 @@
 
   const isServer$1 = typeof window === 'undefined';
   function getStatusColor(match, theme) {
-    return match.state.status === 'pending' ? theme.active : match.state.status === 'error' ? theme.danger : match.state.status === 'success' ? theme.success : theme.gray;
+    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__default["default"].forwardRef(({
+    return /*#__PURE__*/React.forwardRef(({
       style,
       ...rest
     }, ref) => {
@@ -227,7 +474,7 @@
           ...(typeof value === 'function' ? value(rest, theme) : value)
         } : current;
       }, {});
-      return /*#__PURE__*/React__default["default"].createElement(type, {
+      return /*#__PURE__*/React.createElement(type, {
         ...rest,
         style: {
           ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
@@ -239,9 +486,9 @@
     });
   }
   function useIsMounted() {
-    const mountedRef = React__default["default"].useRef(false);
-    const isMounted = React__default["default"].useCallback(() => mountedRef.current, []);
-    React__default["default"][isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => {
+    const mountedRef = React.useRef(false);
+    const isMounted = React.useCallback(() => mountedRef.current, []);
+    React[isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => {
       mountedRef.current = true;
       return () => {
         mountedRef.current = false;
@@ -267,8 +514,8 @@
    */
   function useSafeState(initialState) {
     const isMounted = useIsMounted();
-    const [state, setState] = React__default["default"].useState(initialState);
-    const safeSetState = React__default["default"].useCallback(value => {
+    const [state, setState] = React.useState(initialState);
+    const safeSetState = React.useCallback(value => {
       scheduleMicrotask(() => {
         if (isMounted()) {
           setState(value);
@@ -287,6 +534,25 @@
       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)',
@@ -303,7 +569,6 @@
       // flexDirection: 'column',
     }
   });
-
   const ActivePanel = styled('div', () => ({
     flex: '1 1 500px',
     display: 'flex',
@@ -460,6 +725,7 @@
     defaultExpanded,
     renderer = DefaultRenderer,
     pageSize = 100,
+    filterSubEntries,
     ...rest
   }) {
     const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
@@ -494,12 +760,14 @@
         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
+        renderer: renderer,
+        filterSubEntries: filterSubEntries
       }, rest, entry)),
       type,
       subEntries,
@@ -514,7 +782,7 @@
 
   const isServer = typeof window === 'undefined';
   function Logo(props) {
-    return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
+    return /*#__PURE__*/React.createElement("div", _extends({}, props, {
       style: {
         ...(props.style ?? {}),
         display: 'flex',
@@ -524,11 +792,11 @@
         fontWeight: 'bolder',
         lineHeight: '1'
       }
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       style: {
         letterSpacing: '-0.05rem'
       }
-    }, "TANSTACK"), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "TANSTACK"), /*#__PURE__*/React.createElement("div", {
       style: {
         backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
         // @ts-ignore
@@ -551,8 +819,8 @@
     containerElement: Container = 'footer',
     router
   }) {
-    const rootRef = React__default["default"].useRef(null);
-    const panelRef = React__default["default"].useRef(null);
+    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);
@@ -584,13 +852,13 @@
       document.addEventListener('mousemove', run);
       document.addEventListener('mouseup', unsub);
     };
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
       setIsResolvedOpen(isOpen ?? false);
     }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
     // Toggle panel visibility before/after transition (depending on direction).
     // Prevents focusing in a closed panel.
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
       const ref = panelRef.current;
       if (ref) {
         const handlePanelTransitionStart = () => {
@@ -612,7 +880,7 @@
       }
       return;
     }, [isResolvedOpen]);
-    React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+    React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
       if (isResolvedOpen) {
         const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
         const run = () => {
@@ -651,12 +919,12 @@
 
     // Do not render on the server
     if (!isMounted()) return null;
-    return /*#__PURE__*/React__default["default"].createElement(Container, {
+    return /*#__PURE__*/React.createElement(Container, {
       ref: rootRef,
       className: "TanStackRouterDevtools"
-    }, /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
+    }, /*#__PURE__*/React.createElement(ThemeProvider, {
       theme: defaultTheme
-    }, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _extends({
+    }, /*#__PURE__*/React.createElement(TanStackRouterDevtoolsPanel, _extends({
       ref: panelRef
     }, otherPanelProps, {
       router: router,
@@ -692,7 +960,7 @@
       isOpen: isResolvedOpen,
       setIsOpen: setIsOpen,
       handleDragStart: e => handleDragStart(panelRef.current, e)
-    })), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(Button, _extends({
+    })), isResolvedOpen ? /*#__PURE__*/React.createElement(Button, _extends({
       type: "button",
       "aria-label": "Close TanStack Router Devtools"
     }, otherCloseButtonProps, {
@@ -716,7 +984,7 @@
         }),
         ...closeButtonStyle
       }
-    }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement("button", _extends({
+    }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({
       type: "button"
     }, otherToggleButtonProps, {
       "aria-label": "Open TanStack Router Devtools",
@@ -751,11 +1019,86 @@
         }),
         ...toggleButtonStyle
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Logo, {
+    }), /*#__PURE__*/React.createElement(Logo, {
       "aria-hidden": true
     })) : null);
   }
-  const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
+  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,
@@ -763,23 +1106,27 @@
       router: userRouter,
       ...panelProps
     } = props;
-    const routerContextValue = React__default["default"].useContext(routerContext);
-    const router = userRouter ?? routerContextValue?.router;
+    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 [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-    const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
-    React__default["default"].useEffect(() => {
-      setActiveMatchId('');
-    }, [activeRouteId]);
-    const allMatches = React__default["default"].useMemo(() => [...Object.values(router.state.currentMatches), ...Object.values(router.state.pendingMatches ?? [])], [router.state.currentMatches, router.state.pendingMatches]);
-    const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
-    return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
+
+    // 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__default["default"].createElement(Panel, _extends({
+    }, /*#__PURE__*/React.createElement(Panel, _extends({
       ref: ref,
       className: "TanStackRouterDevtoolsPanel"
-    }, panelProps), /*#__PURE__*/React__default["default"].createElement("style", {
+    }, panelProps), /*#__PURE__*/React.createElement("style", {
       dangerouslySetInnerHTML: {
         __html: `
 
@@ -825,7 +1172,7 @@
 
           `
       }
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'absolute',
         left: 0,
@@ -837,7 +1184,7 @@
         zIndex: 100000
       },
       onMouseDown: handleDragStart
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       style: {
         flex: '1 1 500px',
         minHeight: '40%',
@@ -847,7 +1194,7 @@
         display: 'flex',
         flexDirection: 'column'
       }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
         display: 'flex',
         justifyContent: 'start',
@@ -856,31 +1203,38 @@
         alignItems: 'center',
         background: defaultTheme.backgroundAlt
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Logo, {
+    }, /*#__PURE__*/React.createElement(Logo, {
       "aria-hidden": true
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       style: {
         fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
         fontWeight: 'bold'
       }
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       style: {
         fontWeight: 100
       }
-    }, "Devtools"))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "Devtools"))), /*#__PURE__*/React.createElement("div", {
       style: {
         overflowY: 'auto',
         flex: '1'
       }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
         padding: '.5em'
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
+    }, /*#__PURE__*/React.createElement(Explorer, {
       label: "Router",
-      value: router,
-      defaultExpanded: {}
-    })))), /*#__PURE__*/React__default["default"].createElement("div", {
+      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%',
@@ -890,20 +1244,110 @@
         display: 'flex',
         flexDirection: 'column'
       }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__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
+        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'
       }
-    }, "Active Matches"), router.state.currentMatches.map((match, i) => {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: match.route.id || i,
+    }, "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.route.id}`,
-        onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
+        "aria-label": `Open match details for ${match.id}`,
+        onClick: () => setActiveId(activeId === match.id ? '' : match.id),
         style: {
           display: 'flex',
           borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
@@ -911,7 +1355,7 @@
           alignItems: 'center',
           background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
         }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         style: {
           flex: '0 0 auto',
           width: '1.3rem',
@@ -924,51 +1368,78 @@
           borderRadius: '.25rem',
           transition: 'all .2s ease-out'
         }
-      }), /*#__PURE__*/React__default["default"].createElement(Code, {
+      }), /*#__PURE__*/React.createElement(Code, {
         style: {
-          padding: '.5em'
+          padding: '.5em',
+          fontSize: '0.7rem'
         }
-      }, `${match.id}`));
-    }), router.state.pendingMatches?.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, `${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: {
-        marginTop: '2rem',
         padding: '.5em',
         background: defaultTheme.backgroundAlt,
         position: 'sticky',
         top: 0,
-        zIndex: 1
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '.5rem',
+        fontWeight: 'bold'
       }
-    }, "Pending Matches"), router.state.pendingMatches?.map((match, i) => {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: match.route.id || i,
+    }, /*#__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.route.id}`,
-        onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
+        "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',
-          background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
+          alignItems: 'center',
+          background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
+          fontSize: '0.7rem'
         }
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         style: {
           flex: '0 0 auto',
-          width: '1.3rem',
-          height: '1.3rem',
+          width: '.75rem',
+          height: '.75rem',
           marginLeft: '.25rem',
           background: getStatusColor(match, defaultTheme),
           alignItems: 'center',
           justifyContent: 'center',
           fontWeight: 'bold',
-          borderRadius: '.25rem',
-          transition: 'all .2s ease-out'
+          borderRadius: '100%',
+          transition: 'all 1s ease-out'
         }
-      }), /*#__PURE__*/React__default["default"].createElement(Code, {
+      }), /*#__PURE__*/React.createElement(Code, {
         style: {
           padding: '.5em'
         }
-      }, `${match.id}`));
-    })) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, `${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,
@@ -977,23 +1448,27 @@
         bottom: 0,
         zIndex: 1
       }
-    }, "Match Details"), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, "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__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(Code, {
+    }, "ID"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Code, {
       style: {
         lineHeight: '1.8em'
       }
-    }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
       style: {
         opacity: '.5'
       }
-    }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    }, "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__default["default"].createElement("td", null, activeMatch.state.updatedAt ? new Date(activeMatch.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "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',
@@ -1002,17 +1477,15 @@
         bottom: 0,
         zIndex: 1
       }
-    }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        padding: '0.5em'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "button",
-      onClick: () => activeMatch.load(),
+    }, "Loader Data"), /*#__PURE__*/React.createElement("div", {
       style: {
-        background: defaultTheme.gray
+        padding: '.5em'
       }
-    }, "Reload")), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement(Explorer, {
+      label: "loaderData",
+      value: activeMatch.loaderData,
+      defaultExpanded: {}
+    }))) : null, /*#__PURE__*/React.createElement("div", {
       style: {
         background: defaultTheme.backgroundAlt,
         padding: '.5em',
@@ -1021,15 +1494,15 @@
         bottom: 0,
         zIndex: 1
       }
-    }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "Explorer"), /*#__PURE__*/React.createElement("div", {
       style: {
         padding: '.5em'
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
+    }, /*#__PURE__*/React.createElement(Explorer, {
       label: "Match",
       value: activeMatch,
       defaultExpanded: {}
-    }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }))) : null, hasSearch ? /*#__PURE__*/React.createElement("div", {
       style: {
         flex: '1 1 500px',
         minHeight: '40%',
@@ -1039,36 +1512,80 @@
         display: 'flex',
         flexDirection: 'column'
       }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
         padding: '.5em',
         background: defaultTheme.backgroundAlt,
         position: 'sticky',
         top: 0,
         bottom: 0,
-        zIndex: 1
+        zIndex: 1,
+        fontWeight: 'bold'
       }
-    }, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, "Search Params"), /*#__PURE__*/React.createElement("div", {
       style: {
         padding: '.5em'
       }
-    }, Object.keys(last(router.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
-      value: last(router.state.currentMatches)?.state.search || {},
-      defaultExpanded: Object.keys(last(router.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
+    }, /*#__PURE__*/React.createElement(Explorer, {
+      value: routerState.location.search || {},
+      defaultExpanded: Object.keys(routerState.location.search || {}).reduce((obj, next) => {
         obj[next] = {};
         return obj;
       }, {})
-    }) : /*#__PURE__*/React__default["default"].createElement("em", {
+    }))) : 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: {
-        opacity: 0.5
+        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;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=index.development.js.map