@tanstack/router-devtools 0.0.1-alpha.0 → 0.0.1-beta.100

package/build/cjs/devtools.js

@@ -1,5 +1,5 @@
 /**
- * react-location-devtools
+ * router-devtools
  *
  * Copyright (c) TanStack
  *
@@ -14,97 +14,108 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var reactLocation = require('@tanstack/react-location');
+var router = require('@tanstack/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');
-var Logo = require('./Logo.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const _excluded = ["style"],
-      _excluded2 = ["style", "onClick"],
-      _excluded3 = ["style", "onClick"],
-      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "useRouter"],
-      _excluded5 = ["listeners", "buildLocation", "mount", "update", "buildNext", "navigate", "cancelMatches", "loadLocation", "cleanPreloadCache", "loadRoute", "matchRoutes", "resolveMatches", "loadMatches", "invalidateRoute", "getOutletElement", "resolvePath", "matchRoute", "loaderData", "getLoaderData", "buildLinkInfo", "__experimental__createSnapshot", "stringifySearch", "parseSearch", "destroy", "defaultPendingElement", "rootMatch"],
-      _excluded6 = ["abortController", "resolve", "ready", "cancel", "startPending", "cancelPending", "setParentMatch", "load", "router", "element", "errorElement", "pendingElement", "dataPromise", "onExit"];
 const isServer = typeof window === 'undefined';
-function ReactLocationDevtools(_ref) {
-  let {
-    initialIsOpen,
-    panelProps = {},
-    closeButtonProps = {},
-    toggleButtonProps = {},
-    position = 'bottom-left',
-    containerElement: Container = 'footer',
-    useRouter: useRouterImpl = reactLocation.useRouter
-  } = _ref;
+function Logo(props) {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, props, {
+    style: {
+      ...(props.style ?? {}),
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      fontSize: '0.8rem',
+      fontWeight: 'bolder',
+      lineHeight: '1'
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      letterSpacing: '-0.05rem'
+    }
+  }, "TANSTACK"), /*#__PURE__*/React__default["default"].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__default["default"].useRef(null);
   const panelRef = React__default["default"].useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage["default"]('reactLocationDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('reactLocationDevtoolsHeight', 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();
-
-  const _handleDragStart = (panelElement, startEvent) => {
-    var _panelElement$getBoun;
-
+  const handleDragStart = (panelElement, startEvent) => {
     if (startEvent.button !== 0) return; // Only allow left click for drag
 
     setIsResizing(true);
     const dragInfo = {
-      originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
+      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
       pageY: startEvent.pageY
     };
-
     const run = moveEvent => {
       const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = (dragInfo == null ? void 0 : dragInfo.originalHeight) + delta;
+      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__default["default"].useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
+    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(() => {
     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 () => {
@@ -112,128 +123,122 @@ function ReactLocationDevtools(_ref) {
         ref.removeEventListener('transitionend', handlePanelTransitionEnd);
       };
     }
+    return;
   }, [isResolvedOpen]);
   React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => {
     if (isResolvedOpen) {
-      var _rootRef$current, _rootRef$current$pare;
-
-      const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
-
+      const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
       const run = () => {
-        var _panelRef$current, _rootRef$current2;
-
-        const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
-
-        if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
-          rootRef.current.parentElement.style.paddingBottom = containerHeight + "px";
+        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 () => {
-          var _rootRef$current3;
-
           window.removeEventListener('resize', run);
-
-          if ((_rootRef$current3 = rootRef.current) != null && _rootRef$current3.parentElement && typeof previousValue === 'string') {
+          if (rootRef.current?.parentElement && typeof previousValue === 'string') {
             rootRef.current.parentElement.style.paddingBottom = previousValue;
           }
         };
       }
     }
+    return;
   }, [isResolvedOpen]);
-
   const {
-    style: panelStyle = {}
-  } = panelProps,
-        otherPanelProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(panelProps, _excluded);
-
+    style: panelStyle = {},
+    ...otherPanelProps
+  } = panelProps;
   const {
     style: closeButtonStyle = {},
-    onClick: onCloseClick
-  } = closeButtonProps,
-        otherCloseButtonProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
-
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
   const {
     style: toggleButtonStyle = {},
-    onClick: onToggleClick
-  } = toggleButtonProps,
-        otherToggleButtonProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(toggleButtonProps, _excluded3); // Do not render on the server
-
+    onClick: onToggleClick,
+    ...otherToggleButtonProps
+  } = toggleButtonProps;
 
+  // Do not render on the server
   if (!isMounted()) return null;
   return /*#__PURE__*/React__default["default"].createElement(Container, {
     ref: rootRef,
-    className: "ReactLocationDevtools"
+    className: "TanStackRouterDevtools"
   }, /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
     theme: theme.defaultTheme
-  }, /*#__PURE__*/React__default["default"].createElement(ReactLocationDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
     ref: panelRef
   }, otherPanelProps, {
-    useRouter: useRouterImpl,
-    style: _rollupPluginBabelHelpers["extends"]({
+    router: router,
+    style: {
       position: 'fixed',
       bottom: '0',
       right: '0',
       zIndex: 99999,
       width: '100%',
-      height: devtoolsHeight != null ? devtoolsHeight : 500,
+      height: devtoolsHeight ?? 500,
       maxHeight: '90%',
       boxShadow: '0 0 20px rgba(0,0,0,.3)',
-      borderTop: "1px solid " + theme.defaultTheme.gray,
+      borderTop: `1px solid ${theme.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)"
-    }),
+      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)
+    handleDragStart: e => handleDragStart(panelRef.current, e)
   })), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
     type: "button",
-    "aria-label": "Close TanStack Location Devtools"
+    "aria-label": "Close TanStack Router Devtools"
   }, otherCloseButtonProps, {
     onClick: e => {
       setIsOpen(false);
       onCloseClick && onCloseClick(e);
     },
-    style: _rollupPluginBabelHelpers["extends"]({
+    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)
+      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__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button"
   }, otherToggleButtonProps, {
-    "aria-label": "Open TanStack Location Devtools",
+    "aria-label": "Open TanStack Router Devtools",
     onClick: e => {
       setIsOpen(true);
       onToggleClick && onToggleClick(e);
     },
-    style: _rollupPluginBabelHelpers["extends"]({
+    style: {
+      appearance: 'none',
       background: 'none',
       border: 0,
       padding: 0,
@@ -243,45 +248,148 @@ function ReactLocationDevtools(_ref) {
       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__default["default"].createElement(Logo["default"], {
+      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__default["default"].createElement(Logo, {
     "aria-hidden": true
   })) : null);
 }
-const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function ReactLocationDevtoolsPanel(props, ref) {
-  var _router$state$current, _router$state$pending;
-
+function RouteComp({
+  route,
+  isRoot,
+  matches
+}) {
+  const isActive = matches.find(d => d.route === route);
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+    // role="button"
+    // aria-label={`Open match details for ${route.id}`}
+    // onClick={() =>
+    //   setActiveRouteId(activeRouteId === route.id ? '' : route.id)
+    // }
+    style: {
+      display: 'flex',
+      borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
+      cursor: 'pointer',
+      alignItems: 'center'
+      // background:
+      //   route === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
+    }
+  }, isRoot ? null : /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      flex: '0 0 auto',
+      width: '.7rem',
+      height: '.7rem',
+      margin: '.5rem .75rem',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontWeight: 'bold',
+      borderRadius: '100%',
+      transition: 'all .2s ease-out',
+      background: utils.getRouteStatusColor(matches, route, theme.defaultTheme),
+      opacity: isActive ? 1 : 0.3
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
+    style: {
+      padding: '.25rem 0',
+      paddingLeft: isRoot ? '.5rem' : 0,
+      opacity: isActive ? 1 : 0.7
+    }
+  }, `${route.id}`)), route.children?.length ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginLeft: isRoot ? 0 : '1rem',
+      borderLeft: isRoot ? '' : `solid 1px ${theme.defaultTheme.grayAlt}`
+    }
+  }, route.children.map(r => /*#__PURE__*/React__default["default"].createElement(RouteComp, {
+    key: r.id,
+    route: r,
+    matches: matches
+  }))) : null);
+}
+const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
   const {
     isOpen = true,
+    setIsOpen,
     handleDragStart,
-    useRouter
-  } = props,
-        panelProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(props, _excluded4);
-
-  const router = useRouter();
-  const [activeMatchId, setActiveRouteId] = useLocalStorage["default"]('reactLocationDevtoolsActiveRouteId', '');
-  const activeMatch = (_router$state$current = router.state.current.matches) == null ? void 0 : _router$state$current.find(d => d.id === activeMatchId);
+    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 [showMatches, setShowMatches] = useLocalStorage["default"]('tanstackRouterDevtoolsShowMatches', true);
+  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);
+  const hasSearch = Object.keys(router.last(router$1.state.currentMatches)?.state.search || {}).length;
   return /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
     theme: theme.defaultTheme
   }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
     ref: ref,
-    className: "ReactLocationDevtoolsPanel"
+    className: "TanStackRouterDevtoolsPanel"
   }, panelProps), /*#__PURE__*/React__default["default"].createElement("style", {
     dangerouslySetInnerHTML: {
-      __html: "\n\n            .ReactLocationDevtoolsPanel * {\n              scrollbar-color: " + theme.defaultTheme.backgroundAlt + " " + theme.defaultTheme.gray + ";\n            }\n\n            .ReactLocationDevtoolsPanel *::-webkit-scrollbar, .ReactLocationDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactLocationDevtoolsPanel *::-webkit-scrollbar-track, .ReactLocationDevtoolsPanel scrollbar-track {\n              background: " + theme.defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactLocationDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactLocationDevtoolsPanel scrollbar-thumb {\n              background: " + theme.defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + theme.defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactLocationDevtoolsPanel table {\n              width: 100%;\n            }\n\n            .ReactLocationDevtoolsPanel table tr {\n              border-bottom: 2px dotted rgba(255, 255, 255, .2);\n            }\n\n            .ReactLocationDevtoolsPanel table tr:last-child {\n              border-bottom: none\n            }\n\n            .ReactLocationDevtoolsPanel table td {\n              padding: .25rem .5rem;\n              border-right: 2px dotted rgba(255, 255, 255, .05);\n            }\n\n            .ReactLocationDevtoolsPanel table td:last-child {\n              border-right: none\n            }\n\n          "
+      __html: `
+
+            .TanStackRouterDevtoolsPanel * {
+              scrollbar-color: ${theme.defaultTheme.backgroundAlt} ${theme.defaultTheme.gray};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {
+              background: ${theme.defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {
+              background: ${theme.defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${theme.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__default["default"].createElement("div", {
     style: {
@@ -301,39 +409,31 @@ const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwar
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
+      borderRight: `1px solid ${theme.defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
       display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Logo["default"], {
-    "aria-hidden": true,
-    style: {
-      marginRight: '.5em'
+      justifyContent: 'start',
+      gap: '1rem',
+      padding: '1rem',
+      alignItems: 'center',
+      background: theme.defaultTheme.backgroundAlt
     }
+  }, /*#__PURE__*/React__default["default"].createElement(Logo, {
+    "aria-hidden": true
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      marginRight: 'auto',
       fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
       fontWeight: 'bold'
     }
-  }, "TanStack Location", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       fontWeight: 100
     }
-  }, "Devtools")), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "Devtools"))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       overflowY: 'auto',
       flex: '1'
@@ -344,11 +444,7 @@ const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwar
     }
   }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
     label: "Router",
-    value: (() => {
-      const rest = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(router, _excluded5);
-
-      return rest;
-    })(),
+    value: router$1,
     defaultExpanded: {}
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -356,7 +452,7 @@ const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwar
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
+      borderRight: `1px solid ${theme.defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -366,45 +462,42 @@ const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwar
       background: theme.defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
-      zIndex: 1
-    }
-  }, "Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em'
+      zIndex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
-    value: router.getLoaderData(),
-    defaultExpanded: Object.keys(router.getLoaderData()).reduce((obj, next) => {
-      obj[next] = {};
-      return obj;
-    }, {})
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    onClick: () => {
+      setShowMatches(false);
+    },
+    disabled: !showMatches,
     style: {
-      flex: '1 1 500px',
-      minHeight: '40%',
-      maxHeight: '100%',
-      overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
-      display: 'flex',
-      flexDirection: 'column'
+      opacity: showMatches ? 0.5 : 1
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "Routes"), "/", /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    onClick: () => {
+      setShowMatches(true);
+    },
+    disabled: showMatches,
     style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
+      opacity: !showMatches ? 0.5 : 1
     }
-  }, "Current Matches"), router.state.current.matches.map((match, i) => {
+  }, "Matches")), !showMatches ? /*#__PURE__*/React__default["default"].createElement(RouteComp, {
+    route: router$1.routeTree,
+    isRoot: true,
+    matches: allMatches
+  }) : /*#__PURE__*/React__default["default"].createElement("div", null, router$1.state.currentMatches.map((match, i) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: match.id || i,
+      key: match.route.id || i,
       role: "button",
-      "aria-label": "Open match details for " + match.id,
-      onClick: () => setActiveRouteId(activeMatchId === match.id ? '' : match.id),
+      "aria-label": `Open match details for ${match.route.id}`,
+      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
       style: {
         display: 'flex',
-        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
+        borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
         cursor: 'pointer',
         alignItems: 'center',
         background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
@@ -426,8 +519,8 @@ const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwar
       style: {
         padding: '.5em'
       }
-    }, "" + match.id));
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, `${match.id}`));
+  }), router$1.state.pendingMatches?.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginTop: '2rem',
       padding: '.5em',
@@ -436,15 +529,15 @@ const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwar
       top: 0,
       zIndex: 1
     }
-  }, "Pending Matches"), (_router$state$pending = router.state.pending) == null ? void 0 : _router$state$pending.matches.map((match, i) => {
+  }, "Pending Matches"), router$1.state.pendingMatches?.map((match, i) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: match.id || i,
+      key: match.route.id || i,
       role: "button",
-      "aria-label": "Open match details for " + match.id,
-      onClick: () => setActiveRouteId(activeMatchId === match.id ? '' : match.id),
+      "aria-label": `Open match details for ${match.route.id}`,
+      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
       style: {
         display: 'flex',
-        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
+        borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
         cursor: 'pointer',
         background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
       }
@@ -465,64 +558,14 @@ const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwar
       style: {
         padding: '.5em'
       }
-    }, "" + match.id));
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginTop: '2rem',
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Preloading Matches"), Object.keys(router.preloadCache).map((key, i) => {
-    const {
-      match,
-      expiresAt
-    } = router.preloadCache[key];
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: match.id || i,
-      role: "button",
-      "aria-label": "Open match details for " + match.id,
-      onClick: () => setActiveRouteId(activeMatchId === match.id ? '' : match.id),
-      style: {
-        display: 'flex',
-        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
-        cursor: 'pointer',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '.5rem',
-        gap: '.3rem'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        background: utils.getStatusColor(match, theme.defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, null, "" + match.id)), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, null, "Expires: ", new Date(expiresAt).toLocaleTimeString())));
-  })), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, `${match.id}`));
+  })) : null)), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       padding: '.5em',
       background: theme.defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
+      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", {
@@ -537,57 +580,59 @@ const ReactLocationDevtoolsPanel = /*#__PURE__*/React__default["default"].forwar
     style: {
       opacity: '.5'
     }
-  }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, null, new Date(activeMatch.updatedAt).toLocaleTimeString()) : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].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", {
     style: {
       background: theme.defaultTheme.backgroundAlt,
       padding: '.5em',
       position: 'sticky',
       top: 0,
+      bottom: 0,
       zIndex: 1
     }
-  }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '0.5em'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => {
-      router.invalidateRoute(activeMatch);
-      router.notify();
-    },
+  }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      background: theme.defaultTheme.warning,
-      color: theme.defaultTheme.inputTextColor
+      padding: '.5em'
     }
-  }, "Invalidate"), ' ', /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => router.reload(),
+  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
+    label: "Match",
+    value: activeMatch,
+    defaultExpanded: {}
+  }))) : null, hasSearch ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      background: theme.defaultTheme.gray
+      flex: '1 1 500px',
+      minHeight: '40%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      borderRight: `1px solid ${theme.defaultTheme.grayAlt}`,
+      display: 'flex',
+      flexDirection: 'column'
     }
-  }, "Reload")), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      background: theme.defaultTheme.backgroundAlt,
       padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
+      bottom: 0,
       zIndex: 1
     }
-  }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       padding: '.5em'
     }
   }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
-    label: "Match",
-    value: (() => {
-      const rest = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(activeMatch, _excluded6);
-
-      return rest;
-    })(),
-    defaultExpanded: {}
+    value: router.last(router$1.state.currentMatches)?.state.search || {},
+    defaultExpanded: Object.keys(router.last(router$1.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
+      obj[next] = {};
+      return obj;
+    }, {})
   }))) : null));
 });
 
-exports.ReactLocationDevtools = ReactLocationDevtools;
-exports.ReactLocationDevtoolsPanel = ReactLocationDevtoolsPanel;
+exports.TanStackRouterDevtools = TanStackRouterDevtools;
+exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
 //# sourceMappingURL=devtools.js.map