@tanstack/router-devtools - npm Package Compare versions

Comparing version 0.0.1-beta.99 to 0.0.1-beta.100

build/cjs/devtools.js

@@ -271,2 +271,53 @@ /**
 }
+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) {
@@ -284,2 +335,3 @@ const {
   router.useStore(router$1.__store);
+  const [showMatches, setShowMatches] = useLocalStorage["default"]('tanstackRouterDevtoolsShowMatches', true);
   const [activeRouteId, setActiveRouteId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveRouteId', '');
@@ -292,2 +344,3 @@ const [activeMatchId, setActiveMatchId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveMatchId', '');
   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, {
@@ -415,5 +468,30 @@ theme: theme.defaultTheme
       top: 0,
-      zIndex: 1
+      zIndex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
     }
-  }, "Active Matches"), router$1.state.currentMatches.map((match, i) => {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    onClick: () => {
+      setShowMatches(false);
+    },
+    disabled: !showMatches,
+    style: {
+      opacity: showMatches ? 0.5 : 1
+    }
+  }, "Routes"), "/", /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    onClick: () => {
+      setShowMatches(true);
+    },
+    disabled: showMatches,
+    style: {
+      opacity: !showMatches ? 0.5 : 1
+    }
+  }, "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", {
@@ -488,3 +566,3 @@ key: match.route.id || i,
     }, `${match.id}`));
-  })) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null)), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -523,21 +601,2 @@ padding: '.5em',
     }
-  }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '0.5em'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => activeMatch.load(),
-    style: {
-      background: theme.defaultTheme.gray
-    }
-  }, "Reload")), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      background: theme.defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1
-    }
   }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -551,3 +610,3 @@ style: {
     defaultExpanded: {}
-  }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }))) : null, hasSearch ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -575,3 +634,3 @@ flex: '1 1 500px',
     }
-  }, Object.keys(router.last(router$1.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
+  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
     value: router.last(router$1.state.currentMatches)?.state.search || {},
@@ -582,7 +641,3 @@ defaultExpanded: Object.keys(router.last(router$1.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
     }, {})
-  }) : /*#__PURE__*/React__default["default"].createElement("em", {
-    style: {
-      opacity: 0.5
-    }
-  }, '{ }')))));
+  }))) : null));
 });
@@ -589,0 +644,0 @@

build/cjs/utils.js

@@ -27,2 +27,6 @@ /**
 }
+function getRouteStatusColor(matches, route, theme) {
+  const found = matches.find(d => d.route === route);
+  return found ? found.route.status === 'pending' ? theme.active : found.state.status === 'error' ? theme.danger : found.state.status === 'success' ? theme.success : theme.gray : theme.gray;
+}
 function styled(type, newStyles, queries = {}) {
@@ -103,2 +107,3 @@ return /*#__PURE__*/React__default["default"].forwardRef(({
 exports.displayValue = displayValue;
+exports.getRouteStatusColor = getRouteStatusColor;
 exports.getStatusColor = getStatusColor;
@@ -105,0 +110,0 @@ exports.isServer = isServer;

build/esm/index.js

@@ -132,2 +132,6 @@ /**
 }
+function getRouteStatusColor(matches, route, theme) {
+  const found = matches.find(d => d.route === route);
+  return found ? found.route.status === 'pending' ? theme.active : found.state.status === 'error' ? theme.danger : found.state.status === 'success' ? theme.success : theme.gray : theme.gray;
+}
 function styled(type, newStyles, queries = {}) {
@@ -674,2 +678,53 @@ return /*#__PURE__*/React__default.forwardRef(({
 }
+function RouteComp({
+  route,
+  isRoot,
+  matches
+}) {
+  const isActive = matches.find(d => d.route === route);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__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 ${defaultTheme.grayAlt}`,
+      cursor: 'pointer',
+      alignItems: 'center'
+      // background:
+      //   route === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
+    }
+  }, isRoot ? null : /*#__PURE__*/React__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: getRouteStatusColor(matches, route, defaultTheme),
+      opacity: isActive ? 1 : 0.3
+    }
+  }), /*#__PURE__*/React__default.createElement(Code, {
+    style: {
+      padding: '.25rem 0',
+      paddingLeft: isRoot ? '.5rem' : 0,
+      opacity: isActive ? 1 : 0.7
+    }
+  }, `${route.id}`)), route.children?.length ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginLeft: isRoot ? 0 : '1rem',
+      borderLeft: isRoot ? '' : `solid 1px ${defaultTheme.grayAlt}`
+    }
+  }, route.children.map(r => /*#__PURE__*/React__default.createElement(RouteComp, {
+    key: r.id,
+    route: r,
+    matches: matches
+  }))) : null);
+}
 const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
@@ -687,2 +742,3 @@ const {
   useStore(router.__store);
+  const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
   const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
@@ -695,2 +751,3 @@ const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
   const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
+  const hasSearch = Object.keys(last(router.state.currentMatches)?.state.search || {}).length;
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -818,5 +875,30 @@ theme: defaultTheme
       top: 0,
-      zIndex: 1
+      zIndex: 1,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '.5rem'
     }
-  }, "Active Matches"), router.state.currentMatches.map((match, i) => {
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: () => {
+      setShowMatches(false);
+    },
+    disabled: !showMatches,
+    style: {
+      opacity: showMatches ? 0.5 : 1
+    }
+  }, "Routes"), "/", /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: () => {
+      setShowMatches(true);
+    },
+    disabled: showMatches,
+    style: {
+      opacity: !showMatches ? 0.5 : 1
+    }
+  }, "Matches")), !showMatches ? /*#__PURE__*/React__default.createElement(RouteComp, {
+    route: router.routeTree,
+    isRoot: true,
+    matches: allMatches
+  }) : /*#__PURE__*/React__default.createElement("div", null, router.state.currentMatches.map((match, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -891,3 +973,3 @@ key: match.route.id || i,
     }, `${match.id}`));
-  })) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
+  })) : null)), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -926,21 +1008,2 @@ padding: '.5em',
     }
-  }, "Actions"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '0.5em'
-    }
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    type: "button",
-    onClick: () => activeMatch.load(),
-    style: {
-      background: defaultTheme.gray
-    }
-  }, "Reload")), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      background: defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1
-    }
   }, "Explorer"), /*#__PURE__*/React__default.createElement("div", {
@@ -954,3 +1017,3 @@ style: {
     defaultExpanded: {}
-  }))) : null, /*#__PURE__*/React__default.createElement("div", {
+  }))) : null, hasSearch ? /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -978,3 +1041,3 @@ flex: '1 1 500px',
     }
-  }, Object.keys(last(router.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
+  }, /*#__PURE__*/React__default.createElement(Explorer, {
     value: last(router.state.currentMatches)?.state.search || {},
@@ -985,7 +1048,3 @@ defaultExpanded: Object.keys(last(router.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
     }, {})
-  }) : /*#__PURE__*/React__default.createElement("em", {
-    style: {
-      opacity: 0.5
-    }
-  }, '{ }')))));
+  }))) : null));
 });
@@ -992,0 +1051,0 @@

build/stats-react.json

@@ -10,3 +10,3 @@ {
           {
-            "uid": "d812-187",
+            "uid": "6508-187",
             "name": "\u0000rollupPluginBabelHelpers.js"
@@ -16,3 +16,3 @@ },
             "name": "node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
-            "uid": "d812-189"
+            "uid": "6508-189"
           },
@@ -24,7 +24,7 @@ {
                 "name": "react-store/build/esm/index.js",
-                "uid": "d812-191"
+                "uid": "6508-191"
               },
               {
                 "name": "router/build/esm/index.js",
-                "uid": "d812-193"
+                "uid": "6508-193"
               },
@@ -35,31 +35,31 @@ {
                   {
-                    "uid": "d812-195",
+                    "uid": "6508-195",
                     "name": "useLocalStorage.ts"
                   },
                   {
-                    "uid": "d812-197",
+                    "uid": "6508-197",
                     "name": "theme.tsx"
                   },
                   {
-                    "uid": "d812-199",
+                    "uid": "6508-199",
                     "name": "useMediaQuery.ts"
                   },
                   {
-                    "uid": "d812-201",
+                    "uid": "6508-201",
                     "name": "utils.ts"
                   },
                   {
-                    "uid": "d812-203",
+                    "uid": "6508-203",
                     "name": "styledComponents.ts"
                   },
                   {
-                    "uid": "d812-205",
+                    "uid": "6508-205",
                     "name": "Explorer.tsx"
                   },
                   {
-                    "uid": "d812-207",
+                    "uid": "6508-207",
                     "name": "devtools.tsx"
                   },
                   {
-                    "uid": "d812-209",
+                    "uid": "6508-209",
                     "name": "index.tsx"
@@ -77,80 +77,80 @@ }
   "nodeParts": {
-    "d812-187": {
+    "6508-187": {
       "renderedLength": 429,
       "gzipLength": 238,
       "brotliLength": 0,
-      "mainUid": "d812-186"
+      "mainUid": "6508-186"
     },
-    "d812-189": {
+    "6508-189": {
       "renderedLength": 181,
       "gzipLength": 129,
       "brotliLength": 0,
-      "mainUid": "d812-188"
+      "mainUid": "6508-188"
     },
-    "d812-191": {
+    "6508-191": {
       "renderedLength": 978,
       "gzipLength": 456,
       "brotliLength": 0,
-      "mainUid": "d812-190"
+      "mainUid": "6508-190"
     },
-    "d812-193": {
+    "6508-193": {
       "renderedLength": 352,
       "gzipLength": 251,
       "brotliLength": 0,
-      "mainUid": "d812-192"
+      "mainUid": "6508-192"
     },
-    "d812-195": {
+    "6508-195": {
       "renderedLength": 1083,
       "gzipLength": 410,
       "brotliLength": 0,
-      "mainUid": "d812-194"
+      "mainUid": "6508-194"
     },
-    "d812-197": {
+    "6508-197": {
       "renderedLength": 686,
       "gzipLength": 344,
       "brotliLength": 0,
-      "mainUid": "d812-196"
+      "mainUid": "6508-196"
     },
-    "d812-199": {
+    "6508-199": {
       "renderedLength": 970,
       "gzipLength": 386,
       "brotliLength": 0,
-      "mainUid": "d812-198"
+      "mainUid": "6508-198"
     },
-    "d812-201": {
-      "renderedLength": 2694,
-      "gzipLength": 1056,
+    "6508-201": {
+      "renderedLength": 3003,
+      "gzipLength": 1113,
       "brotliLength": 0,
-      "mainUid": "d812-200"
+      "mainUid": "6508-200"
     },
-    "d812-203": {
+    "6508-203": {
       "renderedLength": 1378,
       "gzipLength": 576,
       "brotliLength": 0,
-      "mainUid": "d812-202"
+      "mainUid": "6508-202"
     },
-    "d812-205": {
+    "6508-205": {
       "renderedLength": 6098,
       "gzipLength": 1825,
       "brotliLength": 0,
-      "mainUid": "d812-204"
+      "mainUid": "6508-204"
     },
-    "d812-207": {
-      "renderedLength": 20179,
-      "gzipLength": 3773,
+    "6508-207": {
+      "renderedLength": 22252,
+      "gzipLength": 4164,
       "brotliLength": 0,
-      "mainUid": "d812-206"
+      "mainUid": "6508-206"
     },
-    "d812-209": {
+    "6508-209": {
       "renderedLength": 0,
       "gzipLength": 0,
       "brotliLength": 0,
-      "mainUid": "d812-208"
+      "mainUid": "6508-208"
     }
   },
   "nodeMetas": {
-    "d812-186": {
+    "6508-186": {
       "id": "\u0000rollupPluginBabelHelpers.js",
       "moduleParts": {
-        "index.production.js": "d812-187"
+        "index.production.js": "6508-187"
       },
@@ -160,16 +160,16 @@ "imported": [],
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         },
         {
-          "uid": "d812-196"
+          "uid": "6508-196"
         },
         {
-          "uid": "d812-204"
+          "uid": "6508-204"
         }
       ]
     },
-    "d812-188": {
+    "6508-188": {
       "id": "/node_modules/.pnpm/tiny-invariant@1.3.1/node_modules/tiny-invariant/dist/esm/tiny-invariant.js",
       "moduleParts": {
-        "index.production.js": "d812-189"
+        "index.production.js": "6508-189"
       },
@@ -179,17 +179,17 @@ "imported": [],
         {
-          "uid": "d812-192"
+          "uid": "6508-192"
         }
       ]
     },
-    "d812-190": {
+    "6508-190": {
       "id": "/packages/react-store/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "d812-191"
+        "index.production.js": "6508-191"
       },
       "imported": [
         {
-          "uid": "d812-212"
+          "uid": "6508-212"
         },
         {
-          "uid": "d812-213"
+          "uid": "6508-213"
         }
@@ -199,23 +199,23 @@ ],
         {
-          "uid": "d812-192"
+          "uid": "6508-192"
         }
       ]
     },
-    "d812-192": {
+    "6508-192": {
       "id": "/packages/router/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "d812-193"
+        "index.production.js": "6508-193"
       },
       "imported": [
         {
-          "uid": "d812-188"
+          "uid": "6508-188"
         },
         {
-          "uid": "d812-211"
+          "uid": "6508-211"
         },
         {
-          "uid": "d812-210"
+          "uid": "6508-210"
         },
         {
-          "uid": "d812-190"
+          "uid": "6508-190"
         }
@@ -225,14 +225,14 @@ ],
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         }
       ]
     },
-    "d812-194": {
+    "6508-194": {
       "id": "/packages/router-devtools/src/useLocalStorage.ts",
       "moduleParts": {
-        "index.production.js": "d812-195"
+        "index.production.js": "6508-195"
       },
       "imported": [
         {
-          "uid": "d812-210"
+          "uid": "6508-210"
         }
@@ -242,17 +242,17 @@ ],
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         }
       ]
     },
-    "d812-196": {
+    "6508-196": {
       "id": "/packages/router-devtools/src/theme.tsx",
       "moduleParts": {
-        "index.production.js": "d812-197"
+        "index.production.js": "6508-197"
       },
       "imported": [
         {
-          "uid": "d812-186"
+          "uid": "6508-186"
         },
         {
-          "uid": "d812-210"
+          "uid": "6508-210"
         }
@@ -262,17 +262,17 @@ ],
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         },
         {
-          "uid": "d812-200"
+          "uid": "6508-200"
         }
       ]
     },
-    "d812-198": {
+    "6508-198": {
       "id": "/packages/router-devtools/src/useMediaQuery.ts",
       "moduleParts": {
-        "index.production.js": "d812-199"
+        "index.production.js": "6508-199"
       },
       "imported": [
         {
-          "uid": "d812-210"
+          "uid": "6508-210"
         }
@@ -282,20 +282,20 @@ ],
         {
-          "uid": "d812-200"
+          "uid": "6508-200"
         }
       ]
     },
-    "d812-200": {
+    "6508-200": {
       "id": "/packages/router-devtools/src/utils.ts",
       "moduleParts": {
-        "index.production.js": "d812-201"
+        "index.production.js": "6508-201"
       },
       "imported": [
         {
-          "uid": "d812-210"
+          "uid": "6508-210"
         },
         {
-          "uid": "d812-196"
+          "uid": "6508-196"
         },
         {
-          "uid": "d812-198"
+          "uid": "6508-198"
         }
@@ -305,20 +305,20 @@ ],
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         },
         {
-          "uid": "d812-202"
+          "uid": "6508-202"
         },
         {
-          "uid": "d812-204"
+          "uid": "6508-204"
         }
       ]
     },
-    "d812-202": {
+    "6508-202": {
       "id": "/packages/router-devtools/src/styledComponents.ts",
       "moduleParts": {
-        "index.production.js": "d812-203"
+        "index.production.js": "6508-203"
       },
       "imported": [
         {
-          "uid": "d812-200"
+          "uid": "6508-200"
         }
@@ -328,20 +328,20 @@ ],
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         }
       ]
     },
-    "d812-204": {
+    "6508-204": {
       "id": "/packages/router-devtools/src/Explorer.tsx",
       "moduleParts": {
-        "index.production.js": "d812-205"
+        "index.production.js": "6508-205"
       },
       "imported": [
         {
-          "uid": "d812-186"
+          "uid": "6508-186"
         },
         {
-          "uid": "d812-210"
+          "uid": "6508-210"
         },
         {
-          "uid": "d812-200"
+          "uid": "6508-200"
         }
@@ -351,35 +351,35 @@ ],
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         }
       ]
     },
-    "d812-206": {
+    "6508-206": {
       "id": "/packages/router-devtools/src/devtools.tsx",
       "moduleParts": {
-        "index.production.js": "d812-207"
+        "index.production.js": "6508-207"
       },
       "imported": [
         {
-          "uid": "d812-186"
+          "uid": "6508-186"
         },
         {
-          "uid": "d812-210"
+          "uid": "6508-210"
         },
         {
-          "uid": "d812-192"
+          "uid": "6508-192"
         },
         {
-          "uid": "d812-194"
+          "uid": "6508-194"
         },
         {
-          "uid": "d812-200"
+          "uid": "6508-200"
         },
         {
-          "uid": "d812-202"
+          "uid": "6508-202"
         },
         {
-          "uid": "d812-196"
+          "uid": "6508-196"
         },
         {
-          "uid": "d812-204"
+          "uid": "6508-204"
         }
@@ -389,14 +389,14 @@ ],
         {
-          "uid": "d812-208"
+          "uid": "6508-208"
         }
       ]
     },
-    "d812-208": {
+    "6508-208": {
       "id": "/packages/router-devtools/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "d812-209"
+        "index.production.js": "6508-209"
       },
       "imported": [
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         }
@@ -407,3 +407,3 @@ ],
     },
-    "d812-210": {
+    "6508-210": {
       "id": "react",
@@ -414,21 +414,21 @@ "moduleParts": {},
         {
-          "uid": "d812-206"
+          "uid": "6508-206"
         },
         {
-          "uid": "d812-192"
+          "uid": "6508-192"
         },
         {
-          "uid": "d812-194"
+          "uid": "6508-194"
         },
         {
-          "uid": "d812-200"
+          "uid": "6508-200"
         },
         {
-          "uid": "d812-196"
+          "uid": "6508-196"
         },
         {
-          "uid": "d812-204"
+          "uid": "6508-204"
         },
         {
-          "uid": "d812-198"
+          "uid": "6508-198"
         }
@@ -438,3 +438,3 @@ ],
     },
-    "d812-211": {
+    "6508-211": {
       "id": "/node_modules/.pnpm/tiny-warning@1.0.3/node_modules/tiny-warning/dist/tiny-warning.esm.js",
@@ -445,7 +445,7 @@ "moduleParts": {},
         {
-          "uid": "d812-192"
+          "uid": "6508-192"
         }
       ]
     },
-    "d812-212": {
+    "6508-212": {
       "id": "use-sync-external-store/shim/with-selector",
@@ -456,3 +456,3 @@ "moduleParts": {},
         {
-          "uid": "d812-190"
+          "uid": "6508-190"
         }
@@ -462,3 +462,3 @@ ],
     },
-    "d812-213": {
+    "6508-213": {
       "id": "/packages/store/build/esm/index.js",
@@ -469,3 +469,3 @@ "moduleParts": {},
         {
-          "uid": "d812-190"
+          "uid": "6508-190"
         }
@@ -472,0 +472,0 @@ ]

build/types/utils.d.ts

 import React from 'react';
-import { AnyRouteMatch } from '@tanstack/router';
+import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/router';
 import { Theme } from './theme';
@@ -7,2 +7,3 @@ export declare const isServer: boolean;
 export declare function getStatusColor(match: AnyRouteMatch, theme: Theme): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff";
+export declare function getRouteStatusColor(matches: AnyRouteMatch[], route: AnyRoute | AnyRootRoute, theme: Theme): "#3f4e60" | "#00ab52" | "#ff0085" | "#006bff";
 type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties);
@@ -9,0 +10,0 @@ export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): React.ForwardRefExoticComponent<React.PropsWithoutRef<StyledComponent<T>> & React.RefAttributes<HTMLElementTagNameMap[T]>>;

build/umd/index.development.js

@@ -217,2 +217,6 @@ /**
   }
+  function getRouteStatusColor(matches, route, theme) {
+    const found = matches.find(d => d.route === route);
+    return found ? found.route.status === 'pending' ? theme.active : found.state.status === 'error' ? theme.danger : found.state.status === 'success' ? theme.success : theme.gray : theme.gray;
+  }
   function styled(type, newStyles, queries = {}) {
@@ -759,2 +763,53 @@ return /*#__PURE__*/React__default["default"].forwardRef(({
   }
+  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 ${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: getRouteStatusColor(matches, route, defaultTheme),
+        opacity: isActive ? 1 : 0.3
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(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 ${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) {
@@ -772,2 +827,3 @@ const {
     useStore(router.__store);
+    const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
     const [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
@@ -780,2 +836,3 @@ const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
     const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
+    const hasSearch = Object.keys(last(router.state.currentMatches)?.state.search || {}).length;
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
@@ -903,5 +960,30 @@ theme: defaultTheme
         top: 0,
-        zIndex: 1
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '.5rem'
       }
-    }, "Active Matches"), router.state.currentMatches.map((match, i) => {
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
+      type: "button",
+      onClick: () => {
+        setShowMatches(false);
+      },
+      disabled: !showMatches,
+      style: {
+        opacity: showMatches ? 0.5 : 1
+      }
+    }, "Routes"), "/", /*#__PURE__*/React__default["default"].createElement("button", {
+      type: "button",
+      onClick: () => {
+        setShowMatches(true);
+      },
+      disabled: showMatches,
+      style: {
+        opacity: !showMatches ? 0.5 : 1
+      }
+    }, "Matches")), !showMatches ? /*#__PURE__*/React__default["default"].createElement(RouteComp, {
+      route: router.routeTree,
+      isRoot: true,
+      matches: allMatches
+    }) : /*#__PURE__*/React__default["default"].createElement("div", null, router.state.currentMatches.map((match, i) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -976,3 +1058,3 @@ key: match.route.id || i,
       }, `${match.id}`));
-    })) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    })) : null)), activeMatch ? /*#__PURE__*/React__default["default"].createElement(ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -1011,21 +1093,2 @@ padding: '.5em',
       }
-    }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        padding: '0.5em'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(Button, {
-      type: "button",
-      onClick: () => activeMatch.load(),
-      style: {
-        background: defaultTheme.gray
-      }
-    }, "Reload")), /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        background: defaultTheme.backgroundAlt,
-        padding: '.5em',
-        position: 'sticky',
-        top: 0,
-        bottom: 0,
-        zIndex: 1
-      }
     }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1039,3 +1102,3 @@ style: {
       defaultExpanded: {}
-    }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }))) : null, hasSearch ? /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -1063,3 +1126,3 @@ flex: '1 1 500px',
       }
-    }, Object.keys(last(router.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer, {
+    }, /*#__PURE__*/React__default["default"].createElement(Explorer, {
       value: last(router.state.currentMatches)?.state.search || {},
@@ -1070,7 +1133,3 @@ defaultExpanded: Object.keys(last(router.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
       }, {})
-    }) : /*#__PURE__*/React__default["default"].createElement("em", {
-      style: {
-        opacity: 0.5
-      }
-    }, '{ }')))));
+    }))) : null));
   });
@@ -1077,0 +1136,0 @@

build/umd/index.production.js

@@ -21,3 +21,3 @@ /**
    * @license MIT
-   */function u(e){return e[e.length-1]}const c=l.createContext(null);function s(e,t){const[n,r]=o.default.useState();o.default.useEffect((()=>{const n=(e=>{try{const t=localStorage.getItem(e);return"string"==typeof t?JSON.parse(t):void 0}catch{return}})(e);r(null==n?"function"==typeof t?t():t:n)}),[t,e]);return[n,o.default.useCallback((t=>{r((n=>{let r=t;"function"==typeof t&&(r=t(n));try{localStorage.setItem(e,JSON.stringify(r))}catch{}return r}))}),[e])]}const f={background:"#0b1521",backgroundAlt:"#132337",foreground:"white",gray:"#3f4e60",grayAlt:"#222e3e",inputBackgroundColor:"#fff",inputTextColor:"#000",success:"#00ab52",danger:"#ff0085",active:"#006bff",warning:"#ffb200"},m=o.default.createContext(f);function p({theme:e,...t}){return o.default.createElement(m.Provider,i({value:e},t))}const g="undefined"==typeof window;function b(e,t){return"pending"===e.state.status?t.active:"error"===e.state.status?t.danger:"success"===e.state.status?t.success:t.gray}function y(e,t,n={}){return o.default.forwardRef((({style:r,...a},l)=>{const i=o.default.useContext(m),d=Object.entries(n).reduce(((e,[t,n])=>function(e){const[t,n]=o.default.useState((()=>{if("undefined"!=typeof window)return window.matchMedia&&window.matchMedia(e).matches}));return o.default.useEffect((()=>{if("undefined"!=typeof window){if(!window.matchMedia)return;const t=window.matchMedia(e),r=({matches:e})=>n(e);return t.addListener(r),()=>{t.removeListener(r)}}}),[t,e,n]),t}(t)?{...e,..."function"==typeof n?n(a,i):n}:e),{});return o.default.createElement(e,{...a,style:{..."function"==typeof t?t(a,i):t,...r,...d},ref:l})}))}function h(){const e=o.default.useRef(!1),t=o.default.useCallback((()=>e.current),[]);return o.default[g?"useEffect":"useLayoutEffect"]((()=>(e.current=!0,()=>{e.current=!1})),[]),t}function E(e){const t=h(),[n,r]=o.default.useState(e);return[n,o.default.useCallback((e=>{var n;n=()=>{t()&&r(e)},Promise.resolve().then(n).catch((e=>setTimeout((()=>{throw e}))))}),[t])]}const v=y("div",((e,t)=>({fontSize:"clamp(12px, 1.5vw, 14px)",fontFamily:"sans-serif",display:"flex",backgroundColor:t.background,color:t.foreground})),{"(max-width: 700px)":{flexDirection:"column"},"(max-width: 600px)":{fontSize:".9em"}}),k=y("div",(()=>({flex:"1 1 500px",display:"flex",flexDirection:"column",overflow:"auto",height:"100%"})),{"(max-width: 700px)":(e,t)=>({borderTop:`2px solid ${t.gray}`})}),x=y("button",((e,t)=>({appearance:"none",fontSize:".9em",fontWeight:"bold",background:t.gray,border:"0",borderRadius:".3em",color:"white",padding:".5em",opacity:e.disabled?".5":void 0,cursor:"pointer"}))),w=y("code",{fontSize:".9em"}),S=y("div",{fontFamily:"Menlo, monospace",fontSize:".7rem",lineHeight:"1.7",outline:"none",wordBreak:"break-word"}),R=y("span",{color:"white"}),O=y("button",{cursor:"pointer",color:"white"}),D=y("button",{cursor:"pointer",color:"inherit",font:"inherit",outline:"inherit",background:"transparent",border:"none",padding:0}),j=y("span",((e,t)=>({color:t.danger}))),C=y("div",{marginLeft:".1em",paddingLeft:"1em",borderLeft:"2px solid rgba(0,0,0,.15)"}),T=y("span",{color:"grey",fontSize:".7em"}),A=({expanded:e,style:t={}})=>l.createElement("span",{style:{display:"inline-block",transition:"all .1s ease",transform:`rotate(${e?90:0}deg) ${t.transform||""}`,...t}},"▶");const P=({handleEntry:e,label:t,value:n,subEntries:r=[],subEntryPages:a=[],type:o,expanded:i=!1,toggleExpanded:d,pageSize:u,renderer:c})=>{const[s,f]=l.useState([]),[m,p]=l.useState(void 0);return l.createElement(S,null,a.length?l.createElement(l.Fragment,null,l.createElement(D,{onClick:()=>d()},l.createElement(A,{expanded:i})," ",t," ",l.createElement(T,null,"iterable"===String(o).toLowerCase()?"(Iterable) ":"",r.length," ",r.length>1?"items":"item")),i?1===a.length?l.createElement(C,null,r.map(((t,n)=>e(t)))):l.createElement(C,null,a.map(((t,n)=>l.createElement("div",{key:n},l.createElement(S,null,l.createElement(O,{onClick:()=>f((e=>e.includes(n)?e.filter((e=>e!==n)):[...e,n]))},l.createElement(A,{expanded:i})," [",n*u," ..."," ",n*u+u-1,"]"),s.includes(n)?l.createElement(C,null,t.map((t=>e(t)))):null))))):null):"function"===o?l.createElement(l.Fragment,null,l.createElement(I,{renderer:c,label:l.createElement("button",{onClick:()=>{p(n())},style:{appearance:"none",border:"0",background:"transparent"}},l.createElement(R,null,t)," 🔄"," "),value:m,defaultExpanded:{}})):l.createElement(l.Fragment,null,l.createElement(R,null,t,":")," ",l.createElement(j,null,(e=>{const t=Object.getOwnPropertyNames(Object(e)),n="bigint"==typeof e?`${e.toString()}n`:e;return JSON.stringify(n,t)})(n))))};function I({value:e,defaultExpanded:t,renderer:n=P,pageSize:r=100,...a}){const[o,d]=l.useState(Boolean(t)),u=l.useCallback((()=>d((e=>!e))),[]);let c=typeof e,s=[];const f=e=>{const n=!0===t?{[e.label]:!0}:t?.[e.label];return{...e,defaultExpanded:n}};var m;Array.isArray(e)?(c="array",s=e.map(((e,t)=>f({label:t.toString(),value:e})))):null!==e&&"object"==typeof e&&(m=e,Symbol.iterator in m)&&"function"==typeof e[Symbol.iterator]?(c="Iterable",s=Array.from(e,((e,t)=>f({label:t.toString(),value:e})))):"object"==typeof e&&null!==e&&(c="object",s=Object.entries(e).map((([e,t])=>f({label:e,value:t}))));const p=function(e,t){if(t<1)return[];let n=0;const r=[];for(;n<e.length;)r.push(e.slice(n,n+t)),n+=t;return r}(s,r);return n({handleEntry:t=>l.createElement(I,i({key:t.label,value:e,renderer:n},a,t)),type:c,subEntries:s,subEntryPages:p,value:e,expanded:o,toggleExpanded:u,pageSize:r,...a})}const z="undefined"==typeof window;function M(e){return o.default.createElement("div",i({},e,{style:{...e.style??{},display:"flex",alignItems:"center",flexDirection:"column",fontSize:"0.8rem",fontWeight:"bolder",lineHeight:"1"}}),o.default.createElement("div",{style:{letterSpacing:"-0.05rem"}},"TANSTACK"),o.default.createElement("div",{style:{backgroundImage:"linear-gradient(to right, var(--tw-gradient-stops))","--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"))}const L=o.default.forwardRef((function(e,t){const{isOpen:r=!0,setIsOpen:a,handleDragStart:l,router:m,...g}=e,y=o.default.useContext(c),h=m??y?.router;!function(e,t){if(!e)throw new Error("Invariant failed")}
+   */function u(e){return e[e.length-1]}const s=l.createContext(null);function c(e,t){const[n,r]=o.default.useState();o.default.useEffect((()=>{const n=(e=>{try{const t=localStorage.getItem(e);return"string"==typeof t?JSON.parse(t):void 0}catch{return}})(e);r(null==n?"function"==typeof t?t():t:n)}),[t,e]);return[n,o.default.useCallback((t=>{r((n=>{let r=t;"function"==typeof t&&(r=t(n));try{localStorage.setItem(e,JSON.stringify(r))}catch{}return r}))}),[e])]}const f={background:"#0b1521",backgroundAlt:"#132337",foreground:"white",gray:"#3f4e60",grayAlt:"#222e3e",inputBackgroundColor:"#fff",inputTextColor:"#000",success:"#00ab52",danger:"#ff0085",active:"#006bff",warning:"#ffb200"},m=o.default.createContext(f);function p({theme:e,...t}){return o.default.createElement(m.Provider,i({value:e},t))}const g="undefined"==typeof window;function b(e,t){return"pending"===e.state.status?t.active:"error"===e.state.status?t.danger:"success"===e.state.status?t.success:t.gray}function y(e,t,n){const r=e.find((e=>e.route===t));return r?"pending"===r.route.status?n.active:"error"===r.state.status?n.danger:"success"===r.state.status?n.success:n.gray:n.gray}function h(e,t,n={}){return o.default.forwardRef((({style:r,...a},l)=>{const i=o.default.useContext(m),d=Object.entries(n).reduce(((e,[t,n])=>function(e){const[t,n]=o.default.useState((()=>{if("undefined"!=typeof window)return window.matchMedia&&window.matchMedia(e).matches}));return o.default.useEffect((()=>{if("undefined"!=typeof window){if(!window.matchMedia)return;const t=window.matchMedia(e),r=({matches:e})=>n(e);return t.addListener(r),()=>{t.removeListener(r)}}}),[t,e,n]),t}(t)?{...e,..."function"==typeof n?n(a,i):n}:e),{});return o.default.createElement(e,{...a,style:{..."function"==typeof t?t(a,i):t,...r,...d},ref:l})}))}function E(){const e=o.default.useRef(!1),t=o.default.useCallback((()=>e.current),[]);return o.default[g?"useEffect":"useLayoutEffect"]((()=>(e.current=!0,()=>{e.current=!1})),[]),t}function v(e){const t=E(),[n,r]=o.default.useState(e);return[n,o.default.useCallback((e=>{var n;n=()=>{t()&&r(e)},Promise.resolve().then(n).catch((e=>setTimeout((()=>{throw e}))))}),[t])]}const x=h("div",((e,t)=>({fontSize:"clamp(12px, 1.5vw, 14px)",fontFamily:"sans-serif",display:"flex",backgroundColor:t.background,color:t.foreground})),{"(max-width: 700px)":{flexDirection:"column"},"(max-width: 600px)":{fontSize:".9em"}}),k=h("div",(()=>({flex:"1 1 500px",display:"flex",flexDirection:"column",overflow:"auto",height:"100%"})),{"(max-width: 700px)":(e,t)=>({borderTop:`2px solid ${t.gray}`})}),w=h("button",((e,t)=>({appearance:"none",fontSize:".9em",fontWeight:"bold",background:t.gray,border:"0",borderRadius:".3em",color:"white",padding:".5em",opacity:e.disabled?".5":void 0,cursor:"pointer"}))),S=h("code",{fontSize:".9em"}),R=h("div",{fontFamily:"Menlo, monospace",fontSize:".7rem",lineHeight:"1.7",outline:"none",wordBreak:"break-word"}),O=h("span",{color:"white"}),D=h("button",{cursor:"pointer",color:"white"}),j=h("button",{cursor:"pointer",color:"inherit",font:"inherit",outline:"inherit",background:"transparent",border:"none",padding:0}),C=h("span",((e,t)=>({color:t.danger}))),T=h("div",{marginLeft:".1em",paddingLeft:"1em",borderLeft:"2px solid rgba(0,0,0,.15)"}),I=h("span",{color:"grey",fontSize:".7em"}),P=({expanded:e,style:t={}})=>l.createElement("span",{style:{display:"inline-block",transition:"all .1s ease",transform:`rotate(${e?90:0}deg) ${t.transform||""}`,...t}},"▶");const A=({handleEntry:e,label:t,value:n,subEntries:r=[],subEntryPages:a=[],type:o,expanded:i=!1,toggleExpanded:d,pageSize:u,renderer:s})=>{const[c,f]=l.useState([]),[m,p]=l.useState(void 0);return l.createElement(R,null,a.length?l.createElement(l.Fragment,null,l.createElement(j,{onClick:()=>d()},l.createElement(P,{expanded:i})," ",t," ",l.createElement(I,null,"iterable"===String(o).toLowerCase()?"(Iterable) ":"",r.length," ",r.length>1?"items":"item")),i?1===a.length?l.createElement(T,null,r.map(((t,n)=>e(t)))):l.createElement(T,null,a.map(((t,n)=>l.createElement("div",{key:n},l.createElement(R,null,l.createElement(D,{onClick:()=>f((e=>e.includes(n)?e.filter((e=>e!==n)):[...e,n]))},l.createElement(P,{expanded:i})," [",n*u," ..."," ",n*u+u-1,"]"),c.includes(n)?l.createElement(T,null,t.map((t=>e(t)))):null))))):null):"function"===o?l.createElement(l.Fragment,null,l.createElement(L,{renderer:s,label:l.createElement("button",{onClick:()=>{p(n())},style:{appearance:"none",border:"0",background:"transparent"}},l.createElement(O,null,t)," 🔄"," "),value:m,defaultExpanded:{}})):l.createElement(l.Fragment,null,l.createElement(O,null,t,":")," ",l.createElement(C,null,(e=>{const t=Object.getOwnPropertyNames(Object(e)),n="bigint"==typeof e?`${e.toString()}n`:e;return JSON.stringify(n,t)})(n))))};function L({value:e,defaultExpanded:t,renderer:n=A,pageSize:r=100,...a}){const[o,d]=l.useState(Boolean(t)),u=l.useCallback((()=>d((e=>!e))),[]);let s=typeof e,c=[];const f=e=>{const n=!0===t?{[e.label]:!0}:t?.[e.label];return{...e,defaultExpanded:n}};var m;Array.isArray(e)?(s="array",c=e.map(((e,t)=>f({label:t.toString(),value:e})))):null!==e&&"object"==typeof e&&(m=e,Symbol.iterator in m)&&"function"==typeof e[Symbol.iterator]?(s="Iterable",c=Array.from(e,((e,t)=>f({label:t.toString(),value:e})))):"object"==typeof e&&null!==e&&(s="object",c=Object.entries(e).map((([e,t])=>f({label:e,value:t}))));const p=function(e,t){if(t<1)return[];let n=0;const r=[];for(;n<e.length;)r.push(e.slice(n,n+t)),n+=t;return r}(c,r);return n({handleEntry:t=>l.createElement(L,i({key:t.label,value:e,renderer:n},a,t)),type:s,subEntries:c,subEntryPages:p,value:e,expanded:o,toggleExpanded:u,pageSize:r,...a})}const M="undefined"==typeof window;function z(e){return o.default.createElement("div",i({},e,{style:{...e.style??{},display:"flex",alignItems:"center",flexDirection:"column",fontSize:"0.8rem",fontWeight:"bolder",lineHeight:"1"}}),o.default.createElement("div",{style:{letterSpacing:"-0.05rem"}},"TANSTACK"),o.default.createElement("div",{style:{backgroundImage:"linear-gradient(to right, var(--tw-gradient-stops))","--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 $({route:e,isRoot:t,matches:n}){const r=n.find((t=>t.route===e));return o.default.createElement("div",null,o.default.createElement("div",{style:{display:"flex",borderBottom:`solid 1px ${f.grayAlt}`,cursor:"pointer",alignItems:"center"}},t?null:o.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:y(n,e,f),opacity:r?1:.3}}),o.default.createElement(S,{style:{padding:".25rem 0",paddingLeft:t?".5rem":0,opacity:r?1:.7}},`${e.id}`)),e.children?.length?o.default.createElement("div",{style:{marginLeft:t?0:"1rem",borderLeft:t?"":`solid 1px ${f.grayAlt}`}},e.children.map((e=>o.default.createElement($,{key:e.id,route:e,matches:n})))):null)}const B=o.default.forwardRef((function(e,t){const{isOpen:r=!0,setIsOpen:a,handleDragStart:l,router:m,...g}=e,y=o.default.useContext(s),h=m??y?.router;!function(e,t){if(!e)throw new Error("Invariant failed")}
 /**
@@ -32,3 +32,3 @@ * react-store
    * @license MIT
-   */(h),function(e,t=(e=>e)){n.useSyncExternalStoreWithSelector(e.subscribe,(()=>e.state),(()=>e.state),t,d)}(h.__store);const[E,S]=s("tanstackRouterDevtoolsActiveRouteId",""),[R,O]=s("tanstackRouterDevtoolsActiveMatchId","");o.default.useEffect((()=>{O("")}),[E]);const D=o.default.useMemo((()=>[...Object.values(h.state.currentMatches),...Object.values(h.state.pendingMatches??[])]),[h.state.currentMatches,h.state.pendingMatches]),j=D?.find((e=>e.id===R))||D?.find((e=>e.route.id===E));return o.default.createElement(p,{theme:f},o.default.createElement(v,i({ref:t,className:"TanStackRouterDevtoolsPanel"},g),o.default.createElement("style",{dangerouslySetInnerHTML:{__html:`\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: ${f.backgroundAlt} ${f.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: ${f.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: ${f.gray};\n              border-radius: .5em;\n              border: 3px solid ${f.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          `}}),o.default.createElement("div",{style:{position:"absolute",left:0,top:0,width:"100%",height:"4px",marginBottom:"-4px",cursor:"row-resize",zIndex:1e5},onMouseDown:l}),o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${f.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{display:"flex",justifyContent:"start",gap:"1rem",padding:"1rem",alignItems:"center",background:f.backgroundAlt}},o.default.createElement(M,{"aria-hidden":!0}),o.default.createElement("div",{style:{fontSize:"clamp(.8rem, 2vw, 1.3rem)",fontWeight:"bold"}},o.default.createElement("span",{style:{fontWeight:100}},"Devtools"))),o.default.createElement("div",{style:{overflowY:"auto",flex:"1"}},o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(I,{label:"Router",value:h,defaultExpanded:{}})))),o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${f.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{padding:".5em",background:f.backgroundAlt,position:"sticky",top:0,zIndex:1}},"Active Matches"),h.state.currentMatches.map(((e,t)=>o.default.createElement("div",{key:e.route.id||t,role:"button","aria-label":`Open match details for ${e.route.id}`,onClick:()=>S(E===e.route.id?"":e.route.id),style:{display:"flex",borderBottom:`solid 1px ${f.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===j?"rgba(255,255,255,.1)":void 0}},o.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:b(e,f),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),o.default.createElement(w,{style:{padding:".5em"}},`${e.id}`)))),h.state.pendingMatches?.length?o.default.createElement(o.default.Fragment,null,o.default.createElement("div",{style:{marginTop:"2rem",padding:".5em",background:f.backgroundAlt,position:"sticky",top:0,zIndex:1}},"Pending Matches"),h.state.pendingMatches?.map(((e,t)=>o.default.createElement("div",{key:e.route.id||t,role:"button","aria-label":`Open match details for ${e.route.id}`,onClick:()=>S(E===e.route.id?"":e.route.id),style:{display:"flex",borderBottom:`solid 1px ${f.grayAlt}`,cursor:"pointer",background:e===j?"rgba(255,255,255,.1)":void 0}},o.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:b(e,f),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),o.default.createElement(w,{style:{padding:".5em"}},`${e.id}`))))):null),j?o.default.createElement(k,null,o.default.createElement("div",{style:{padding:".5em",background:f.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Match Details"),o.default.createElement("div",null,o.default.createElement("table",null,o.default.createElement("tbody",null,o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"ID"),o.default.createElement("td",null,o.default.createElement(w,{style:{lineHeight:"1.8em"}},JSON.stringify(j.id,null,2)))),o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"Status"),o.default.createElement("td",null,j.state.status)),o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"Last Updated"),o.default.createElement("td",null,j.state.updatedAt?new Date(j.state.updatedAt).toLocaleTimeString():"N/A"))))),o.default.createElement("div",{style:{background:f.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Actions"),o.default.createElement("div",{style:{padding:"0.5em"}},o.default.createElement(x,{type:"button",onClick:()=>j.load(),style:{background:f.gray}},"Reload")),o.default.createElement("div",{style:{background:f.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Explorer"),o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(I,{label:"Match",value:j,defaultExpanded:{}}))):null,o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${f.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{padding:".5em",background:f.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Search Params"),o.default.createElement("div",{style:{padding:".5em"}},Object.keys(u(h.state.currentMatches)?.state.search||{}).length?o.default.createElement(I,{value:u(h.state.currentMatches)?.state.search||{},defaultExpanded:Object.keys(u(h.state.currentMatches)?.state.search||{}).reduce(((e,t)=>(e[t]={},e)),{})}):o.default.createElement("em",{style:{opacity:.5}},"{ }")))))}));e.TanStackRouterDevtools=function({initialIsOpen:e,panelProps:t={},closeButtonProps:n={},toggleButtonProps:r={},position:a="bottom-left",containerElement:l="footer",router:d}){const u=o.default.useRef(null),c=o.default.useRef(null),[m,g]=s("tanstackRouterDevtoolsOpen",e),[b,y]=s("tanstackRouterDevtoolsHeight",null),[v,k]=E(!1),[w,S]=E(!1),R=h();o.default.useEffect((()=>{k(m??!1)}),[m,v,k]),o.default.useEffect((()=>{const e=c.current;if(e){const t=()=>{e&&v&&(e.style.visibility="visible")},n=()=>{e&&!v&&(e.style.visibility="hidden")};return e.addEventListener("transitionstart",t),e.addEventListener("transitionend",n),()=>{e.removeEventListener("transitionstart",t),e.removeEventListener("transitionend",n)}}}),[v]),o.default[z?"useEffect":"useLayoutEffect"]((()=>{if(v){const e=u.current?.parentElement?.style.paddingBottom,t=()=>{const e=c.current?.getBoundingClientRect().height;u.current?.parentElement&&(u.current.parentElement.style.paddingBottom=`${e}px`)};if(t(),"undefined"!=typeof window)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),u.current?.parentElement&&"string"==typeof e&&(u.current.parentElement.style.paddingBottom=e)}}}),[v]);const{style:O={},...D}=t,{style:j={},onClick:C,...T}=n,{style:A={},onClick:P,...I}=r;return R()?o.default.createElement(l,{ref:u,className:"TanStackRouterDevtools"},o.default.createElement(p,{theme:f},o.default.createElement(L,i({ref:c},D,{router:d,style:{position:"fixed",bottom:"0",right:"0",zIndex:99999,width:"100%",height:b??500,maxHeight:"90%",boxShadow:"0 0 20px rgba(0,0,0,.3)",borderTop:`1px solid ${f.gray}`,transformOrigin:"top",visibility:m?"visible":"hidden",...O,...w?{transition:"none"}:{transition:"all .2s ease"},...v?{opacity:1,pointerEvents:"all",transform:"translateY(0) scale(1)"}:{opacity:0,pointerEvents:"none",transform:"translateY(15px) scale(1.02)"}},isOpen:v,setIsOpen:g,handleDragStart:e=>((e,t)=>{if(0!==t.button)return;S(!0);const n=e?.getBoundingClientRect().height??0,r=t.pageY,a=e=>{const t=r-e.pageY,a=n+t;y(a),g(!(a<70))},l=()=>{S(!1),document.removeEventListener("mousemove",a),document.removeEventListener("mouseUp",l)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",l)})(c.current,e)})),v?o.default.createElement(x,i({type:"button","aria-label":"Close TanStack Router Devtools"},T,{onClick:e=>{g(!1),C&&C(e)},style:{position:"fixed",zIndex:99999,margin:".5em",bottom:0,..."top-right"===a?{right:"0"}:"top-left"===a?{left:"0"}:"bottom-right"===a?{right:"0"}:{left:"0"},...j}}),"Close"):null),v?null:o.default.createElement("button",i({type:"button"},I,{"aria-label":"Open TanStack Router Devtools",onClick:e=>{g(!0),P&&P(e)},style:{appearance:"none",background:"none",border:0,padding:0,position:"fixed",zIndex:99999,display:"inline-flex",fontSize:"1.5em",margin:".5em",cursor:"pointer",width:"fit-content",..."top-right"===a?{top:"0",right:"0"}:"top-left"===a?{top:"0",left:"0"}:"bottom-right"===a?{bottom:"0",right:"0"}:{bottom:"0",left:"0"},...A}}),o.default.createElement(M,{"aria-hidden":!0}))):null},e.TanStackRouterDevtoolsPanel=L,Object.defineProperty(e,"__esModule",{value:!0})}));
+   */(h),function(e,t=(e=>e)){n.useSyncExternalStoreWithSelector(e.subscribe,(()=>e.state),(()=>e.state),t,d)}(h.__store);const[E,v]=c("tanstackRouterDevtoolsShowMatches",!0),[w,R]=c("tanstackRouterDevtoolsActiveRouteId",""),[O,D]=c("tanstackRouterDevtoolsActiveMatchId","");o.default.useEffect((()=>{D("")}),[w]);const j=o.default.useMemo((()=>[...Object.values(h.state.currentMatches),...Object.values(h.state.pendingMatches??[])]),[h.state.currentMatches,h.state.pendingMatches]),C=j?.find((e=>e.id===O))||j?.find((e=>e.route.id===w)),T=Object.keys(u(h.state.currentMatches)?.state.search||{}).length;return o.default.createElement(p,{theme:f},o.default.createElement(x,i({ref:t,className:"TanStackRouterDevtoolsPanel"},g),o.default.createElement("style",{dangerouslySetInnerHTML:{__html:`\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: ${f.backgroundAlt} ${f.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: ${f.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: ${f.gray};\n              border-radius: .5em;\n              border: 3px solid ${f.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          `}}),o.default.createElement("div",{style:{position:"absolute",left:0,top:0,width:"100%",height:"4px",marginBottom:"-4px",cursor:"row-resize",zIndex:1e5},onMouseDown:l}),o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${f.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{display:"flex",justifyContent:"start",gap:"1rem",padding:"1rem",alignItems:"center",background:f.backgroundAlt}},o.default.createElement(z,{"aria-hidden":!0}),o.default.createElement("div",{style:{fontSize:"clamp(.8rem, 2vw, 1.3rem)",fontWeight:"bold"}},o.default.createElement("span",{style:{fontWeight:100}},"Devtools"))),o.default.createElement("div",{style:{overflowY:"auto",flex:"1"}},o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(L,{label:"Router",value:h,defaultExpanded:{}})))),o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${f.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{padding:".5em",background:f.backgroundAlt,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",gap:".5rem"}},o.default.createElement("button",{type:"button",onClick:()=>{v(!1)},disabled:!E,style:{opacity:E?.5:1}},"Routes"),"/",o.default.createElement("button",{type:"button",onClick:()=>{v(!0)},disabled:E,style:{opacity:E?1:.5}},"Matches")),E?o.default.createElement("div",null,h.state.currentMatches.map(((e,t)=>o.default.createElement("div",{key:e.route.id||t,role:"button","aria-label":`Open match details for ${e.route.id}`,onClick:()=>R(w===e.route.id?"":e.route.id),style:{display:"flex",borderBottom:`solid 1px ${f.grayAlt}`,cursor:"pointer",alignItems:"center",background:e===C?"rgba(255,255,255,.1)":void 0}},o.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:b(e,f),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),o.default.createElement(S,{style:{padding:".5em"}},`${e.id}`)))),h.state.pendingMatches?.length?o.default.createElement(o.default.Fragment,null,o.default.createElement("div",{style:{marginTop:"2rem",padding:".5em",background:f.backgroundAlt,position:"sticky",top:0,zIndex:1}},"Pending Matches"),h.state.pendingMatches?.map(((e,t)=>o.default.createElement("div",{key:e.route.id||t,role:"button","aria-label":`Open match details for ${e.route.id}`,onClick:()=>R(w===e.route.id?"":e.route.id),style:{display:"flex",borderBottom:`solid 1px ${f.grayAlt}`,cursor:"pointer",background:e===C?"rgba(255,255,255,.1)":void 0}},o.default.createElement("div",{style:{flex:"0 0 auto",width:"1.3rem",height:"1.3rem",marginLeft:".25rem",background:b(e,f),alignItems:"center",justifyContent:"center",fontWeight:"bold",borderRadius:".25rem",transition:"all .2s ease-out"}}),o.default.createElement(S,{style:{padding:".5em"}},`${e.id}`))))):null):o.default.createElement($,{route:h.routeTree,isRoot:!0,matches:j})),C?o.default.createElement(k,null,o.default.createElement("div",{style:{padding:".5em",background:f.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Match Details"),o.default.createElement("div",null,o.default.createElement("table",null,o.default.createElement("tbody",null,o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"ID"),o.default.createElement("td",null,o.default.createElement(S,{style:{lineHeight:"1.8em"}},JSON.stringify(C.id,null,2)))),o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"Status"),o.default.createElement("td",null,C.state.status)),o.default.createElement("tr",null,o.default.createElement("td",{style:{opacity:".5"}},"Last Updated"),o.default.createElement("td",null,C.state.updatedAt?new Date(C.state.updatedAt).toLocaleTimeString():"N/A"))))),o.default.createElement("div",{style:{background:f.backgroundAlt,padding:".5em",position:"sticky",top:0,bottom:0,zIndex:1}},"Explorer"),o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(L,{label:"Match",value:C,defaultExpanded:{}}))):null,T?o.default.createElement("div",{style:{flex:"1 1 500px",minHeight:"40%",maxHeight:"100%",overflow:"auto",borderRight:`1px solid ${f.grayAlt}`,display:"flex",flexDirection:"column"}},o.default.createElement("div",{style:{padding:".5em",background:f.backgroundAlt,position:"sticky",top:0,bottom:0,zIndex:1}},"Search Params"),o.default.createElement("div",{style:{padding:".5em"}},o.default.createElement(L,{value:u(h.state.currentMatches)?.state.search||{},defaultExpanded:Object.keys(u(h.state.currentMatches)?.state.search||{}).reduce(((e,t)=>(e[t]={},e)),{})}))):null))}));e.TanStackRouterDevtools=function({initialIsOpen:e,panelProps:t={},closeButtonProps:n={},toggleButtonProps:r={},position:a="bottom-left",containerElement:l="footer",router:d}){const u=o.default.useRef(null),s=o.default.useRef(null),[m,g]=c("tanstackRouterDevtoolsOpen",e),[b,y]=c("tanstackRouterDevtoolsHeight",null),[h,x]=v(!1),[k,S]=v(!1),R=E();o.default.useEffect((()=>{x(m??!1)}),[m,h,x]),o.default.useEffect((()=>{const e=s.current;if(e){const t=()=>{e&&h&&(e.style.visibility="visible")},n=()=>{e&&!h&&(e.style.visibility="hidden")};return e.addEventListener("transitionstart",t),e.addEventListener("transitionend",n),()=>{e.removeEventListener("transitionstart",t),e.removeEventListener("transitionend",n)}}}),[h]),o.default[M?"useEffect":"useLayoutEffect"]((()=>{if(h){const e=u.current?.parentElement?.style.paddingBottom,t=()=>{const e=s.current?.getBoundingClientRect().height;u.current?.parentElement&&(u.current.parentElement.style.paddingBottom=`${e}px`)};if(t(),"undefined"!=typeof window)return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t),u.current?.parentElement&&"string"==typeof e&&(u.current.parentElement.style.paddingBottom=e)}}}),[h]);const{style:O={},...D}=t,{style:j={},onClick:C,...T}=n,{style:I={},onClick:P,...A}=r;return R()?o.default.createElement(l,{ref:u,className:"TanStackRouterDevtools"},o.default.createElement(p,{theme:f},o.default.createElement(B,i({ref:s},D,{router:d,style:{position:"fixed",bottom:"0",right:"0",zIndex:99999,width:"100%",height:b??500,maxHeight:"90%",boxShadow:"0 0 20px rgba(0,0,0,.3)",borderTop:`1px solid ${f.gray}`,transformOrigin:"top",visibility:m?"visible":"hidden",...O,...k?{transition:"none"}:{transition:"all .2s ease"},...h?{opacity:1,pointerEvents:"all",transform:"translateY(0) scale(1)"}:{opacity:0,pointerEvents:"none",transform:"translateY(15px) scale(1.02)"}},isOpen:h,setIsOpen:g,handleDragStart:e=>((e,t)=>{if(0!==t.button)return;S(!0);const n=e?.getBoundingClientRect().height??0,r=t.pageY,a=e=>{const t=r-e.pageY,a=n+t;y(a),g(!(a<70))},l=()=>{S(!1),document.removeEventListener("mousemove",a),document.removeEventListener("mouseUp",l)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",l)})(s.current,e)})),h?o.default.createElement(w,i({type:"button","aria-label":"Close TanStack Router Devtools"},T,{onClick:e=>{g(!1),C&&C(e)},style:{position:"fixed",zIndex:99999,margin:".5em",bottom:0,..."top-right"===a?{right:"0"}:"top-left"===a?{left:"0"}:"bottom-right"===a?{right:"0"}:{left:"0"},...j}}),"Close"):null),h?null:o.default.createElement("button",i({type:"button"},A,{"aria-label":"Open TanStack Router Devtools",onClick:e=>{g(!0),P&&P(e)},style:{appearance:"none",background:"none",border:0,padding:0,position:"fixed",zIndex:99999,display:"inline-flex",fontSize:"1.5em",margin:".5em",cursor:"pointer",width:"fit-content",..."top-right"===a?{top:"0",right:"0"}:"top-left"===a?{top:"0",left:"0"}:"bottom-right"===a?{bottom:"0",right:"0"}:{bottom:"0",left:"0"},...I}}),o.default.createElement(z,{"aria-hidden":!0}))):null},e.TanStackRouterDevtoolsPanel=B,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.production.js.map

package.json

 {
   "name": "@tanstack/router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.99",
+  "version": "0.0.1-beta.100",
   "license": "MIT",
@@ -45,3 +45,3 @@ "repository": "tanstack/router",
     "date-fns": "^2.29.1",
-    "@tanstack/router": "0.0.1-beta.99"
+    "@tanstack/router": "0.0.1-beta.100"
   },
@@ -48,0 +48,0 @@ "scripts": {

src/utils.ts

 import React from 'react'
-import { AnyRouteMatch, RouteMatch } from '@tanstack/router'
+import {
+  AnyRootRoute,
+  AnyRoute,
+  AnyRouteMatch,
+  RouteMatch,
+} from '@tanstack/router'
 
@@ -38,2 +43,20 @@ import { Theme, useTheme } from './theme'
 
+export function getRouteStatusColor(
+  matches: AnyRouteMatch[],
+  route: AnyRoute | AnyRootRoute,
+  theme: Theme,
+) {
+  const found = matches.find((d) => d.route === route)
+
+  return found
+    ? found.route.status === 'pending'
+      ? theme.active
+      : found.state.status === 'error'
+      ? theme.danger
+      : found.state.status === 'success'
+      ? theme.success
+      : theme.gray
+    : theme.gray
+}
+
 type Styles =
@@ -40,0 +63,0 @@ | React.CSSProperties

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

808032

increased by1.83%

Lines of code

5583

increased by3.41%

Dependency changes

• + Added@tanstack/router@0.0.1-beta.100(transitive)

• - Removed@tanstack/router@0.0.1-beta.99(transitive)

• Updated@tanstack/router@0.0.1-beta.100