@tanstack/react-router-devtools 0.0.1-beta.36 → 0.0.1-beta.41

package/build/esm/index.js

@@ -10,7 +10,7 @@
  */
 import * as React from 'react';
 import React__default from 'react';
-import { routerContext, invariant, last } from '@tanstack/react-router';
+import { routerContext, invariant, useRouterStore, last } from '@tanstack/react-router';
 import { formatDistanceStrict } from 'date-fns';
 
 function _extends() {
@@ -27,18 +27,6 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
 
 const getItem = key => {
   try {
@@ -47,7 +35,7 @@ const getItem = key => {
       return JSON.parse(itemValue);
     }
     return undefined;
-  } catch (_unused) {
+  } catch {
     return undefined;
   }
 };
@@ -69,14 +57,13 @@ function useLocalStorage(key, defaultValue) {
       }
       try {
         localStorage.setItem(key, JSON.stringify(newVal));
-      } catch (_unused2) {}
+      } catch {}
       return newVal;
     });
   }, [key]);
   return [value, setter];
 }
 
-const _excluded$3 = ["theme"];
 const defaultTheme = {
   background: '#0b1521',
   backgroundAlt: '#132337',
@@ -93,9 +80,9 @@ const defaultTheme = {
 const ThemeContext = /*#__PURE__*/React__default.createContext(defaultTheme);
 function ThemeProvider(_ref) {
   let {
-      theme
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    theme,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, _extends({
     value: theme
   }, rest));
@@ -143,10 +130,9 @@ function useMediaQuery(query) {
   return isMatch;
 }
 
-const _excluded$2 = ["style"];
 const isServer$1 = typeof window === 'undefined';
 function getStatusColor(match, theme) {
-  return match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
+  return match.store.isFetching ? theme.active : match.store.status === 'error' ? theme.danger : match.store.status === 'success' ? theme.success : theme.gray;
 }
 
 // export function getQueryStatusLabel(query: Query) {
@@ -165,19 +151,27 @@ function styled(type, newStyles, queries) {
   }
   return /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     let {
-        style
-      } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      style,
+      ...rest
+    } = _ref;
     const theme = useTheme();
     const mediaStyles = Object.entries(queries).reduce((current, _ref2) => {
       let [key, value] = _ref2;
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useMediaQuery(key) ? _extends({}, current, typeof value === 'function' ? value(rest, theme) : value) : current;
+      return useMediaQuery(key) ? {
+        ...current,
+        ...(typeof value === 'function' ? value(rest, theme) : value)
+      } : current;
     }, {});
-    return /*#__PURE__*/React__default.createElement(type, _extends({}, rest, {
-      style: _extends({}, typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles, style, mediaStyles),
+    return /*#__PURE__*/React__default.createElement(type, {
+      ...rest,
+      style: {
+        ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
+        ...style,
+        ...mediaStyles
+      },
       ref
-    }));
+    });
   });
 }
 function useIsMounted() {
@@ -198,7 +192,7 @@ function useIsMounted() {
  */
 const displayValue = value => {
   const name = Object.getOwnPropertyNames(Object(value));
-  const newValue = typeof value === 'bigint' ? value.toString() + "n" : value;
+  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value;
   return JSON.stringify(newValue, name);
 };
 
@@ -259,7 +253,7 @@ function multiSortBy(arr, accessors) {
 
 const Panel = styled('div', (_props, theme) => ({
   fontSize: 'clamp(12px, 1.5vw, 14px)',
-  fontFamily: "sans-serif",
+  fontFamily: `sans-serif`,
   display: 'flex',
   backgroundColor: theme.background,
   color: theme.foreground
@@ -281,7 +275,7 @@ const ActivePanel = styled('div', () => ({
   height: '100%'
 }), {
   '(max-width: 700px)': (_props, theme) => ({
-    borderTop: "2px solid " + theme.gray
+    borderTop: `2px solid ${theme.gray}`
   })
 });
 const Button = styled('button', (props, theme) => ({
@@ -320,26 +314,26 @@ styled('input', (_props, theme) => ({
   borderRadius: '.2em',
   color: theme.inputTextColor,
   fontSize: '.9em',
-  lineHeight: "1.3",
+  lineHeight: `1.3`,
   padding: '.3em .4em'
 }));
 styled('select', (_props, theme) => ({
-  display: "inline-block",
-  fontSize: ".9em",
-  fontFamily: "sans-serif",
+  display: `inline-block`,
+  fontSize: `.9em`,
+  fontFamily: `sans-serif`,
   fontWeight: 'normal',
-  lineHeight: "1.3",
-  padding: ".3em 1.5em .3em .5em",
+  lineHeight: `1.3`,
+  padding: `.3em 1.5em .3em .5em`,
   height: 'auto',
   border: 0,
-  borderRadius: ".2em",
-  appearance: "none",
+  borderRadius: `.2em`,
+  appearance: `none`,
   WebkitAppearance: 'none',
   backgroundColor: theme.inputBackgroundColor,
-  backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
-  backgroundRepeat: "no-repeat",
-  backgroundPosition: "right .55em center",
-  backgroundSize: ".65em auto, 100%",
+  backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
+  backgroundRepeat: `no-repeat`,
+  backgroundPosition: `right .55em center`,
+  backgroundSize: `.65em auto, 100%`,
   color: theme.inputTextColor
 }), {
   '(max-width: 500px)': {
@@ -347,7 +341,6 @@ styled('select', (_props, theme) => ({
   }
 });
 
-const _excluded$1 = ["value", "defaultExpanded", "renderer", "pageSize"];
 const Entry = styled('div', {
   fontFamily: 'Menlo, monospace',
   fontSize: '.7rem',
@@ -389,11 +382,12 @@ const Expander = _ref => {
     style = {}
   } = _ref;
   return /*#__PURE__*/React.createElement("span", {
-    style: _extends({
+    style: {
       display: 'inline-block',
       transition: 'all .1s ease',
-      transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || '')
-    }, style)
+      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
+      ...style
+    }
   }, "\u25B6");
 };
 /**
@@ -437,7 +431,7 @@ const DefaultRenderer = _ref2 => {
     onClick: () => toggleExpanded()
   }, /*#__PURE__*/React.createElement(Expander, {
     expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
+  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
     key: index
   }, /*#__PURE__*/React.createElement(Entry, null, /*#__PURE__*/React.createElement(LabelButton, {
     onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
@@ -462,12 +456,12 @@ function isIterable(x) {
 }
 function Explorer(_ref3) {
   let {
-      value,
-      defaultExpanded,
-      renderer = DefaultRenderer,
-      pageSize = 100
-    } = _ref3,
-    rest = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
+    value,
+    defaultExpanded,
+    renderer = DefaultRenderer,
+    pageSize = 100,
+    ...rest
+  } = _ref3;
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
   const toggleExpanded = React.useCallback(() => setExpanded(old => !old), []);
   let type = typeof value;
@@ -476,9 +470,10 @@ function Explorer(_ref3) {
     const subDefaultExpanded = defaultExpanded === true ? {
       [sub.label]: true
     } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-    return _extends({}, sub, {
+    return {
+      ...sub,
       defaultExpanded: subDefaultExpanded
-    });
+    };
   };
   if (Array.isArray(value)) {
     type = 'array';
@@ -503,7 +498,7 @@ function Explorer(_ref3) {
     });
   }
   const subEntryPages = chunkArray(subEntries, pageSize);
-  return renderer(_extends({
+  return renderer({
     handleEntry: entry => /*#__PURE__*/React.createElement(Explorer, _extends({
       key: entry.label,
       value: value,
@@ -515,26 +510,23 @@ function Explorer(_ref3) {
     value,
     expanded,
     toggleExpanded,
-    pageSize
-  }, rest));
+    pageSize,
+    ...rest
+  });
 }
 
-const _excluded = ["style"],
-  _excluded2 = ["style", "onClick"],
-  _excluded3 = ["style", "onClick"],
-  _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "router"];
 const isServer = typeof window === 'undefined';
 function Logo(props) {
-  var _props$style;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
-    style: _extends({}, (_props$style = props.style) != null ? _props$style : {}, {
+    style: {
+      ...(props.style ?? {}),
       display: 'flex',
       alignItems: 'center',
       flexDirection: 'column',
       fontSize: '0.8rem',
       fontWeight: 'bolder',
       lineHeight: '1'
-    })
+    }
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
       letterSpacing: '-0.05rem'
@@ -570,13 +562,12 @@ function TanStackRouterDevtools(_ref) {
   const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
   const [isResizing, setIsResizing] = useSafeState(false);
   const isMounted = 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 == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
       pageY: startEvent.pageY
     };
     const run = moveEvent => {
@@ -598,7 +589,7 @@ function TanStackRouterDevtools(_ref) {
     document.addEventListener('mouseup', unsub);
   };
   React__default.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
+    setIsResolvedOpen(isOpen ?? false);
   }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
   // Toggle panel visibility before/after transition (depending on direction).
@@ -633,7 +624,7 @@ function TanStackRouterDevtools(_ref) {
         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";
+          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
         }
       };
       run();
@@ -651,19 +642,19 @@ function TanStackRouterDevtools(_ref) {
     return;
   }, [isResolvedOpen]);
   const {
-      style: panelStyle = {}
-    } = panelProps,
-    otherPanelProps = _objectWithoutPropertiesLoose(panelProps, _excluded);
+    style: panelStyle = {},
+    ...otherPanelProps
+  } = panelProps;
   const {
-      style: closeButtonStyle = {},
-      onClick: onCloseClick
-    } = closeButtonProps,
-    otherCloseButtonProps = _objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
+    style: closeButtonStyle = {},
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
   const {
-      style: toggleButtonStyle = {},
-      onClick: onToggleClick
-    } = toggleButtonProps,
-    otherToggleButtonProps = _objectWithoutPropertiesLoose(toggleButtonProps, _excluded3);
+    style: toggleButtonStyle = {},
+    onClick: onToggleClick,
+    ...otherToggleButtonProps
+  } = toggleButtonProps;
 
   // Do not render on the server
   if (!isMounted()) return null;
@@ -676,35 +667,38 @@ function TanStackRouterDevtools(_ref) {
     ref: panelRef
   }, otherPanelProps, {
     router: router,
-    style: _extends({
+    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 " + defaultTheme.gray,
+      borderTop: `1px solid ${defaultTheme.gray}`,
       transformOrigin: 'top',
       // visibility will be toggled after transitions, but set initial state here
-      visibility: isOpen ? 'visible' : 'hidden'
-    }, panelStyle, isResizing ? {
-      transition: "none"
-    } : {
-      transition: "all .2s ease"
-    }, isResolvedOpen ? {
-      opacity: 1,
-      pointerEvents: 'all',
-      transform: "translateY(0) scale(1)"
-    } : {
-      opacity: 0,
-      pointerEvents: 'none',
-      transform: "translateY(15px) scale(1.02)"
-    }),
+      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.createElement(Button, _extends({
     type: "button",
     "aria-label": "Close TanStack Router Devtools"
@@ -713,20 +707,22 @@ function TanStackRouterDevtools(_ref) {
       setIsOpen(false);
       onCloseClick && onCloseClick(e);
     },
-    style: _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.createElement("button", _extends({
     type: "button"
   }, otherToggleButtonProps, {
@@ -735,7 +731,7 @@ function TanStackRouterDevtools(_ref) {
       setIsOpen(true);
       onToggleClick && onToggleClick(e);
     },
-    style: _extends({
+    style: {
       appearance: 'none',
       background: 'none',
       border: 0,
@@ -746,56 +742,49 @@ function TanStackRouterDevtools(_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)
+      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.createElement(Logo, {
     "aria-hidden": true
   })) : null);
 }
 const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-  var _Object$values$find$m, _Object$values, _Object$values$find, _router$state$current, _router$state$pending, _router$state$pending2, _last, _last2, _last3, _last4, _last5, _last6;
+  var _Object$values, _Object$values$find, _router$store$current, _router$store$pending, _router$store$pending2, _last, _last2, _last3, _last4, _last5, _last6;
   const {
-      isOpen = true,
-      handleDragStart,
-      router: userRouter
-    } = props,
-    panelProps = _objectWithoutPropertiesLoose(props, _excluded4);
+    isOpen = true,
+    setIsOpen,
+    handleDragStart,
+    router: userRouter,
+    ...panelProps
+  } = props;
   const routerContextValue = React__default.useContext(routerContext);
-  const router = userRouter != null ? userRouter : routerContextValue == null ? void 0 : routerContextValue.router;
+  const router = userRouter ?? (routerContextValue == null ? void 0 : routerContextValue.router);
   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.');
-  const rerender = React__default.useReducer(() => ({}), {})[1];
-  React__default.useEffect(() => {
-    let interval = setInterval(() => {
-      router.cleanMatchCache();
-      // router.notify()
-      rerender();
-    }, 250);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
+  useRouterStore();
   const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
   const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
   React__default.useEffect(() => {
     setActiveMatchId('');
   }, [activeRouteId]);
-  const activeMatch = (_Object$values$find$m = (_Object$values = Object.values(router.matchCache)) == null ? void 0 : (_Object$values$find = _Object$values.find(d => d.match.matchId === activeMatchId)) == null ? void 0 : _Object$values$find.match) != null ? _Object$values$find$m : (_router$state$current = router.state.currentMatches) == null ? void 0 : _router$state$current.find(d => d.routeId === activeRouteId);
-  const matchCacheValues = multiSortBy(Object.keys(router.matchCache).filter(key => {
-    const cacheEntry = router.matchCache[key];
+  const activeMatch = ((_Object$values = Object.values(router.store.matchCache)) == null ? void 0 : (_Object$values$find = _Object$values.find(d => d.match.matchId === activeMatchId)) == null ? void 0 : _Object$values$find.match) ?? ((_router$store$current = router.store.currentMatches) == null ? void 0 : _router$store$current.find(d => d.routeId === activeRouteId));
+  const matchCacheValues = multiSortBy(Object.keys(router.store.matchCache).filter(key => {
+    const cacheEntry = router.store.matchCache[key];
     return cacheEntry.gc > Date.now();
-  }).map(key => router.matchCache[key]), [d => d.match.isFetching ? -1 : 1, d => -d.match.updatedAt]);
+  }).map(key => router.store.matchCache[key]), [d => d.match.store.isFetching ? -1 : 1, d => -d.match.store.updatedAt]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: defaultTheme
   }, /*#__PURE__*/React__default.createElement(Panel, _extends({
@@ -803,7 +792,49 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     className: "TanStackRouterDevtoolsPanel"
   }, panelProps), /*#__PURE__*/React__default.createElement("style", {
     dangerouslySetInnerHTML: {
-      __html: "\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: " + defaultTheme.backgroundAlt + " " + defaultTheme.gray + ";\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n              background: " + defaultTheme.backgroundAlt + ";\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: " + defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + defaultTheme.backgroundAlt + ";\n            }\n\n            .TanStackRouterDevtoolsPanel table {\n              width: 100%;\n            }\n\n            .TanStackRouterDevtoolsPanel table tr {\n              border-bottom: 2px dotted rgba(255, 255, 255, .2);\n            }\n\n            .TanStackRouterDevtoolsPanel table tr:last-child {\n              border-bottom: none\n            }\n\n            .TanStackRouterDevtoolsPanel table td {\n              padding: .25rem .5rem;\n              border-right: 2px dotted rgba(255, 255, 255, .05);\n            }\n\n            .TanStackRouterDevtoolsPanel table td:last-child {\n              border-right: none\n            }\n\n          "
+      __html: `
+
+            .TanStackRouterDevtoolsPanel * {
+              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {
+              background: ${defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {
+              background: ${defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel table {
+              width: 100%;
+            }
+
+            .TanStackRouterDevtoolsPanel table tr {
+              border-bottom: 2px dotted rgba(255, 255, 255, .2);
+            }
+
+            .TanStackRouterDevtoolsPanel table tr:last-child {
+              border-bottom: none
+            }
+
+            .TanStackRouterDevtoolsPanel table td {
+              padding: .25rem .5rem;
+              border-right: 2px dotted rgba(255, 255, 255, .05);
+            }
+
+            .TanStackRouterDevtoolsPanel table td:last-child {
+              border-right: none
+            }
+
+          `
     }
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -823,7 +854,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -866,7 +897,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -878,15 +909,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       top: 0,
       zIndex: 1
     }
-  }, "Active Matches"), router.state.currentMatches.map((match, i) => {
+  }, "Active Matches"), router.store.currentMatches.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
       key: match.routeId || i,
       role: "button",
-      "aria-label": "Open match details for " + match.routeId,
+      "aria-label": `Open match details for ${match.routeId}`,
       onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
       style: {
         display: 'flex',
-        borderBottom: "solid 1px " + defaultTheme.grayAlt,
+        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
         cursor: 'pointer',
         alignItems: 'center',
         background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
@@ -908,8 +939,8 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         padding: '.5em'
       }
-    }, "" + match.matchId));
-  }), (_router$state$pending = router.state.pendingMatches) != null && _router$state$pending.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    }, `${match.matchId}`));
+  }), (_router$store$pending = router.store.pendingMatches) != null && _router$store$pending.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginTop: '2rem',
       padding: '.5em',
@@ -918,15 +949,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       top: 0,
       zIndex: 1
     }
-  }, "Pending Matches"), (_router$state$pending2 = router.state.pendingMatches) == null ? void 0 : _router$state$pending2.map((match, i) => {
+  }, "Pending Matches"), (_router$store$pending2 = router.store.pendingMatches) == null ? void 0 : _router$store$pending2.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
       key: match.routeId || i,
       role: "button",
-      "aria-label": "Open match details for " + match.routeId,
+      "aria-label": `Open match details for ${match.routeId}`,
       onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
       style: {
         display: 'flex',
-        borderBottom: "solid 1px " + defaultTheme.grayAlt,
+        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
         cursor: 'pointer',
         background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
       }
@@ -947,7 +978,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       style: {
         padding: '.5em'
       }
-    }, "" + match.matchId));
+    }, `${match.matchId}`));
   })) : null, matchCacheValues.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginTop: '2rem',
@@ -963,8 +994,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, /*#__PURE__*/React__default.createElement("div", null, "Match Cache"), /*#__PURE__*/React__default.createElement(Button, {
     onClick: () => {
-      router.matchCache = {};
-      router.notify();
+      router.setStore(s => s.matchCache = {});
     }
   }, "Clear")), matchCacheValues.map((d, i) => {
     const {
@@ -974,11 +1004,11 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     return /*#__PURE__*/React__default.createElement("div", {
       key: match.matchId || i,
       role: "button",
-      "aria-label": "Open match details for " + match.matchId,
+      "aria-label": `Open match details for ${match.matchId}`,
       onClick: () => setActiveMatchId(activeMatchId === match.matchId ? '' : match.matchId),
       style: {
         display: 'flex',
-        borderBottom: "solid 1px " + defaultTheme.grayAlt,
+        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
         cursor: 'pointer',
         background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
       }
@@ -1007,7 +1037,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
         borderRadius: '.25rem',
         transition: 'all .2s ease-out'
       }
-    }), /*#__PURE__*/React__default.createElement(Code, null, "" + match.matchId)), /*#__PURE__*/React__default.createElement("span", {
+    }), /*#__PURE__*/React__default.createElement(Code, null, `${match.matchId}`)), /*#__PURE__*/React__default.createElement("span", {
       style: {
         fontSize: '.7rem',
         opacity: '.5',
@@ -1037,15 +1067,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     style: {
       opacity: '.5'
     }
-  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.status)), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.status)), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     style: {
       opacity: '.5'
     }
-  }, "Invalid"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.isInvalid.toString())), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, "Invalid"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.isInvalid.toString())), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     style: {
       opacity: '.5'
     }
-  }, "Last Updated"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default.createElement("div", {
+  }, "Last Updated"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.store.updatedAt ? new Date(activeMatch.store.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       background: defaultTheme.backgroundAlt,
       padding: '.5em',
@@ -1062,7 +1092,6 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     type: "button",
     onClick: () => {
       activeMatch.invalidate();
-      router.notify();
     },
     style: {
       background: defaultTheme.warning,
@@ -1097,7 +1126,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -1114,9 +1143,9 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     style: {
       padding: '.5em'
     }
-  }, Object.keys(((_last = last(router.state.currentMatches)) == null ? void 0 : _last.loaderData) || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
-    value: ((_last2 = last(router.state.currentMatches)) == null ? void 0 : _last2.loaderData) || {},
-    defaultExpanded: Object.keys(((_last3 = last(router.state.currentMatches)) == null ? void 0 : _last3.loaderData) || {}).reduce((obj, next) => {
+  }, Object.keys(((_last = last(router.store.currentMatches)) == null ? void 0 : _last.store.loaderData) || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
+    value: ((_last2 = last(router.store.currentMatches)) == null ? void 0 : _last2.store.loaderData) || {},
+    defaultExpanded: Object.keys(((_last3 = last(router.store.currentMatches)) == null ? void 0 : _last3.store.loaderData) || {}).reduce((obj, next) => {
       obj[next] = {};
       return obj;
     }, {})
@@ -1137,9 +1166,9 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     style: {
       padding: '.5em'
     }
-  }, Object.keys(((_last4 = last(router.state.currentMatches)) == null ? void 0 : _last4.search) || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
-    value: ((_last5 = last(router.state.currentMatches)) == null ? void 0 : _last5.search) || {},
-    defaultExpanded: Object.keys(((_last6 = last(router.state.currentMatches)) == null ? void 0 : _last6.search) || {}).reduce((obj, next) => {
+  }, Object.keys(((_last4 = last(router.store.currentMatches)) == null ? void 0 : _last4.store.search) || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
+    value: ((_last5 = last(router.store.currentMatches)) == null ? void 0 : _last5.store.search) || {},
+    defaultExpanded: Object.keys(((_last6 = last(router.store.currentMatches)) == null ? void 0 : _last6.store.search) || {}).reduce((obj, next) => {
       obj[next] = {};
       return obj;
     }, {})