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

package/build/cjs/devtools.js

@@ -1,5 +1,5 @@
 /**
- * router-devtools
+ * @tanstack/router-devtools/src/index.tsx
  *
  * Copyright (c) TanStack
  *
@@ -10,24 +10,18 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var router = require('@tanstack/router');
+var reactRouter = require('@tanstack/react-router');
 var useLocalStorage = require('./useLocalStorage.js');
 var utils = require('./utils.js');
 var styledComponents = require('./styledComponents.js');
 var theme = require('./theme.js');
 var Explorer = require('./Explorer.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const isServer = typeof window === 'undefined';
 function Logo(props) {
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, props, {
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, props, {
     style: {
       ...(props.style ?? {}),
       display: 'flex',
@@ -37,11 +31,11 @@ function Logo(props) {
       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
@@ -64,10 +58,10 @@ function TanStackRouterDevtools({
   containerElement: Container = 'footer',
   router
 }) {
-  const rootRef = React__default["default"].useRef(null);
-  const panelRef = React__default["default"].useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage["default"]('tanstackRouterDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('tanstackRouterDevtoolsHeight', null);
+  const rootRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const [isOpen, setIsOpen] = useLocalStorage.default('tanstackRouterDevtoolsOpen', initialIsOpen);
+  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage.default('tanstackRouterDevtoolsHeight', null);
   const [isResolvedOpen, setIsResolvedOpen] = utils.useSafeState(false);
   const [isResizing, setIsResizing] = utils.useSafeState(false);
   const isMounted = utils.useIsMounted();
@@ -97,13 +91,13 @@ function TanStackRouterDevtools({
     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 = () => {
@@ -125,7 +119,7 @@ function TanStackRouterDevtools({
     }
     return;
   }, [isResolvedOpen]);
-  React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
     if (isResolvedOpen) {
       const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
       const run = () => {
@@ -164,12 +158,12 @@ function TanStackRouterDevtools({
 
   // 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(theme.ThemeProvider, {
+  }, /*#__PURE__*/React.createElement(theme.ThemeProvider, {
     theme: theme.defaultTheme
-  }, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React.createElement(TanStackRouterDevtoolsPanel, _rollupPluginBabelHelpers.extends({
     ref: panelRef
   }, otherPanelProps, {
     router: router,
@@ -205,7 +199,7 @@ function TanStackRouterDevtools({
     isOpen: isResolvedOpen,
     setIsOpen: setIsOpen,
     handleDragStart: e => handleDragStart(panelRef.current, e)
-  })), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
+  })), isResolvedOpen ? /*#__PURE__*/React.createElement(styledComponents.Button, _rollupPluginBabelHelpers.extends({
     type: "button",
     "aria-label": "Close TanStack Router Devtools"
   }, otherCloseButtonProps, {
@@ -229,7 +223,7 @@ function TanStackRouterDevtools({
       }),
       ...closeButtonStyle
     }
-  }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+  }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button"
   }, otherToggleButtonProps, {
     "aria-label": "Open TanStack Router Devtools",
@@ -264,11 +258,86 @@ function TanStackRouterDevtools({
       }),
       ...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 = reactRouter.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 ${theme.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: utils.getRouteStatusColor(matches, route, theme.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(styledComponents.Code, null, route.path || reactRouter.trimPath(route.id), " "), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
+    }
+  }, match ? /*#__PURE__*/React.createElement(styledComponents.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 ${theme.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,
@@ -276,23 +345,27 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
     router: userRouter,
     ...panelProps
   } = props;
-  const routerContextValue = React__default["default"].useContext(router.routerContext);
-  const router$1 = userRouter ?? routerContextValue?.router;
-  router.invariant(router$1, '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.');
-  router.useStore(router$1.__store);
-  const [activeRouteId, setActiveRouteId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveRouteId', '');
-  const [activeMatchId, setActiveMatchId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveMatchId', '');
-  React__default["default"].useEffect(() => {
-    setActiveMatchId('');
-  }, [activeRouteId]);
-  const allMatches = React__default["default"].useMemo(() => [...Object.values(router$1.state.currentMatches), ...Object.values(router$1.state.pendingMatches ?? [])], [router$1.state.currentMatches, router$1.state.pendingMatches]);
-  const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
-  return /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
+  const router = reactRouter.useRouter();
+  const routerState = reactRouter.useRouterState();
+  const matches = [...(routerState.pendingMatches ?? []), ...routerState.matches, ...routerState.cachedMatches];
+  reactRouter.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.default('tanstackRouterDevtoolsShowMatches', true);
+  const [activeId, setActiveId] = useLocalStorage.default('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(theme.ThemeProvider, {
     theme: theme.defaultTheme
-  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React.createElement(styledComponents.Panel, _rollupPluginBabelHelpers.extends({
     ref: ref,
     className: "TanStackRouterDevtoolsPanel"
-  }, panelProps), /*#__PURE__*/React__default["default"].createElement("style", {
+  }, panelProps), /*#__PURE__*/React.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: `
 
@@ -338,7 +411,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
 
           `
     }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
       left: 0,
@@ -350,7 +423,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
       zIndex: 100000
     },
     onMouseDown: handleDragStart
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: '1 1 500px',
       minHeight: '40%',
@@ -360,7 +433,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
       display: 'flex',
       flexDirection: 'column'
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'start',
@@ -369,31 +442,38 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
       alignItems: 'center',
       background: theme.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["default"], {
+  }, /*#__PURE__*/React.createElement(Explorer.default, {
     label: "Router",
-    value: router$1,
-    defaultExpanded: {}
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    value: Object.fromEntries(utils.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%',
@@ -403,20 +483,110 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
       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: theme.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: theme.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: theme.defaultTheme.warning,
+      fontWeight: 'bold'
+    }
+  }, routerState.location.maskedLocation.pathname) : null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.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'
     }
-  }, "Active Matches"), router$1.state.currentMatches.map((match, i) => {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: match.route.id || i,
+  }, "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.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 ${theme.defaultTheme.grayAlt}`,
@@ -424,7 +594,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
         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',
@@ -437,51 +607,78 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
         borderRadius: '.25rem',
         transition: 'all .2s ease-out'
       }
-    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
+    }), /*#__PURE__*/React.createElement(styledComponents.Code, {
       style: {
-        padding: '.5em'
+        padding: '.5em',
+        fontSize: '0.7rem'
       }
-    }, `${match.id}`));
-  }), router$1.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: theme.defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
-      zIndex: 1
+      zIndex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '.5rem',
+      fontWeight: 'bold'
     }
-  }, "Pending Matches"), router$1.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 ${theme.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: utils.getStatusColor(match, theme.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(styledComponents.Code, {
+    }), /*#__PURE__*/React.createElement(styledComponents.Code, {
       style: {
         padding: '.5em'
       }
-    }, `${match.id}`));
-  })) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.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(styledComponents.ActivePanel, null, /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '.5em',
       background: theme.defaultTheme.backgroundAlt,
@@ -490,23 +687,27 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
       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(styledComponents.Code, {
+  }, "ID"), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(styledComponents.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: theme.defaultTheme.backgroundAlt,
       padding: '.5em',
@@ -515,17 +716,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
       bottom: 0,
       zIndex: 1
     }
-  }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "Loader Data"), /*#__PURE__*/React.createElement("div", {
     style: {
-      padding: '0.5em'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => activeMatch.load(),
-    style: {
-      background: theme.defaultTheme.gray
+      padding: '.5em'
     }
-  }, "Reload")), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement(Explorer.default, {
+    label: "loaderData",
+    value: activeMatch.loaderData,
+    defaultExpanded: {}
+  }))) : null, /*#__PURE__*/React.createElement("div", {
     style: {
       background: theme.defaultTheme.backgroundAlt,
       padding: '.5em',
@@ -534,15 +733,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
       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["default"], {
+  }, /*#__PURE__*/React.createElement(Explorer.default, {
     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%',
@@ -552,31 +751,77 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwa
       display: 'flex',
       flexDirection: 'column'
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '.5em',
       background: theme.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(router.last(router$1.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
-    value: router.last(router$1.state.currentMatches)?.state.search || {},
-    defaultExpanded: Object.keys(router.last(router$1.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
+  }, /*#__PURE__*/React.createElement(Explorer.default, {
+    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 = reactRouter.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 ? theme.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;