@tanstack/router-devtools-core 1.132.51 → 1.133.1

package/dist/{BaseTanStackRouterDevtoolsPanel-CaAQWNvS.js → BaseTanStackRouterDevtoolsPanel-Cbvcs84k.js}

@@ -2,8 +2,8 @@ import { template, insert, memo, createComponent, effect, className, setAttribut
 import { clsx } from "clsx";
 import invariant from "tiny-invariant";
 import { rootRouteId, trimPath, interpolatePath } from "@tanstack/router-core";
-import { createSignal, createEffect, createRenderEffect, useContext, createMemo, Show, onCleanup } from "solid-js";
-import { S as ShadowDomTargetContext, u as useDevtoolsOnClose } from "./index-BiZF0hsR.js";
+import { createSignal, createEffect, createRenderEffect, useContext, createMemo, untrack, Switch, Match, For, Show, onCleanup } from "solid-js";
+import { S as ShadowDomTargetContext, u as useDevtoolsOnClose } from "./index-Bz4rofgr.js";
 import * as goober from "goober";
 const isServer = typeof window === "undefined";
 function getStatusColor(match) {
@@ -645,6 +645,16 @@ const stylesFactory$1 = (shadowDOMTarget) => {
       overflow-y: auto;
       max-height: 50%;
     `,
+    historyContainer: css`
+      display: flex;
+      flex: 1 1 auto;
+      overflow-y: auto;
+      max-height: 50%;
+    `,
+    historyOverflowContainer: css`
+      padding: ${size[1]} ${size[2]};
+      font-size: ${tokens.font.size.xs};
+    `,
     maskedBadgeContainer: css`
       flex: 1;
       justify-content: flex-end;
@@ -1215,7 +1225,8 @@ function NavigateButton({
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$ = /* @__PURE__ */ template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ template(`<div><div>`), _tmpl$3 = /* @__PURE__ */ template(`<code> `), _tmpl$4 = /* @__PURE__ */ template(`<code>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div role=button><div>`), _tmpl$6 = /* @__PURE__ */ template(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<div><button><svg xmlns=http://www.w3.org/2000/svg width=10 height=6 fill=none viewBox="0 0 10 6"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.667 d="M1 1l4 4 4-4"></path></svg></button><div><div></div><div><div></div></div></div><div><div><div><span>Pathname</span></div><div><code></code></div><div><div><button type=button>Routes</button><button type=button>Matches</button></div><div><div>age / staleTime / gcTime</div></div></div><div>`), _tmpl$8 = /* @__PURE__ */ template(`<div><span>masked`), _tmpl$9 = /* @__PURE__ */ template(`<div role=button><div>`), _tmpl$0 = /* @__PURE__ */ template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$1 = /* @__PURE__ */ template(`<div><div>Match Details</div><div><div><div><div></div></div><div><div>ID:</div><div><code></code></div></div><div><div>State:</div><div></div></div><div><div>Last Updated:</div><div></div></div></div></div><div>Explorer</div><div>`), _tmpl$10 = /* @__PURE__ */ template(`<div>Loader Data`), _tmpl$11 = /* @__PURE__ */ template(`<div><div><span>Search Params</span></div><div>`), _tmpl$12 = /* @__PURE__ */ template(`<span style=margin-left:0.5rem;>`), _tmpl$13 = /* @__PURE__ */ template(`<button type=button style=cursor:pointer; aria-label="Copy value to clipboard">`);
+var _tmpl$ = /* @__PURE__ */ template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ template(`<div><div>`), _tmpl$3 = /* @__PURE__ */ template(`<code> `), _tmpl$4 = /* @__PURE__ */ template(`<code>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div role=button><div>`), _tmpl$6 = /* @__PURE__ */ template(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<div><ul>`), _tmpl$8 = /* @__PURE__ */ template(`<div><button><svg xmlns=http://www.w3.org/2000/svg width=10 height=6 fill=none viewBox="0 0 10 6"><path stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.667 d="M1 1l4 4 4-4"></path></svg></button><div><div></div><div><div></div></div></div><div><div><div><span>Pathname</span></div><div><code></code></div><div><div><button type=button>Routes</button><button type=button>Matches</button><button type=button>History</button></div><div><div>age / staleTime / gcTime</div></div></div><div>`), _tmpl$9 = /* @__PURE__ */ template(`<div><span>masked`), _tmpl$0 = /* @__PURE__ */ template(`<div role=button><div>`), _tmpl$1 = /* @__PURE__ */ template(`<li><div>`), _tmpl$10 = /* @__PURE__ */ template(`<li>This panel displays the most recent 15 navigations.`), _tmpl$11 = /* @__PURE__ */ template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$12 = /* @__PURE__ */ template(`<div><div>Match Details</div><div><div><div><div></div></div><div><div>ID:</div><div><code></code></div></div><div><div>State:</div><div></div></div><div><div>Last Updated:</div><div></div></div></div></div><div>Explorer</div><div>`), _tmpl$13 = /* @__PURE__ */ template(`<div>Loader Data`), _tmpl$14 = /* @__PURE__ */ template(`<div><div><span>Search Params</span></div><div>`), _tmpl$15 = /* @__PURE__ */ template(`<span style=margin-left:0.5rem;>`), _tmpl$16 = /* @__PURE__ */ template(`<button type=button style=cursor:pointer; aria-label="Copy value to clipboard">`);
+const HISTORY_LIMIT = 15;
 function Logo(props) {
   const {
     className: className$1,
@@ -1396,8 +1407,30 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
     ...otherPanelProps
   } = panelProps;
   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 [showMatches, setShowMatches] = useLocalStorage("tanstackRouterDevtoolsShowMatches", true);
+  const [currentTab, setCurrentTab] = useLocalStorage("tanstackRouterDevtoolsActiveTab", "routes");
   const [activeId, setActiveId] = useLocalStorage("tanstackRouterDevtoolsActiveRouteId", "");
+  const [history, setHistory] = createSignal([]);
+  const [hasHistoryOverflowed, setHasHistoryOverflowed] = createSignal(false);
+  createEffect(() => {
+    const matches = routerState().matches;
+    const currentMatch = matches[matches.length - 1];
+    if (!currentMatch) {
+      return;
+    }
+    const historyUntracked = untrack(() => history());
+    const lastMatch = historyUntracked[0];
+    const sameLocation = lastMatch && lastMatch.pathname === currentMatch.pathname && JSON.stringify(lastMatch.search ?? {}) === JSON.stringify(currentMatch.search ?? {});
+    if (!lastMatch || !sameLocation) {
+      if (historyUntracked.length >= HISTORY_LIMIT) {
+        setHasHistoryOverflowed(true);
+      }
+      setHistory((prev) => {
+        const newHistory = [currentMatch, ...prev];
+        newHistory.splice(HISTORY_LIMIT);
+        return newHistory;
+      });
+    }
+  });
   const activeMatch = createMemo(() => {
     const matches = [...routerState().pendingMatches ?? [], ...routerState().matches, ...routerState().cachedMatches];
     return matches.find((d) => d.routeId === activeId() || d.id === activeId());
@@ -1414,9 +1447,9 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
   const activeMatchValue = createMemo(() => activeMatch());
   const locationSearchValue = createMemo(() => routerState().location.search);
   return (() => {
-    var _el$11 = _tmpl$7(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$14.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild;
+    var _el$11 = _tmpl$8(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$14.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild;
     _el$20.firstChild;
-    var _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$25.nextSibling, _el$29 = _el$24.nextSibling;
+    var _el$22 = _el$20.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$25.nextSibling, _el$30 = _el$24.nextSibling;
     spread(_el$11, mergeProps({
       get ["class"]() {
         return clsx(styles().devtoolsPanel, "TanStackRouterDevtoolsPanel", className$1 ? className$1() : "");
@@ -1426,10 +1459,10 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
       }
     }, otherPanelProps), false, true);
     insert(_el$11, handleDragStart ? (() => {
-      var _el$30 = _tmpl$6();
-      addEventListener(_el$30, "mousedown", handleDragStart, true);
-      effect(() => className(_el$30, styles().dragHandle));
-      return _el$30;
+      var _el$34 = _tmpl$6();
+      addEventListener(_el$34, "mousedown", handleDragStart, true);
+      effect(() => className(_el$34, styles().dragHandle));
+      return _el$34;
     })() : null, _el$12);
     _el$12.$$click = (e) => {
       if (setIsOpen) {
@@ -1461,106 +1494,184 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
     insert(_el$20, (() => {
       var _c$2 = memo(() => !!routerState().location.maskedLocation);
       return () => _c$2() ? (() => {
-        var _el$31 = _tmpl$8(), _el$32 = _el$31.firstChild;
+        var _el$35 = _tmpl$9(), _el$36 = _el$35.firstChild;
         effect((_p$) => {
-          var _v$22 = styles().maskedBadgeContainer, _v$23 = styles().maskedBadge;
-          _v$22 !== _p$.e && className(_el$31, _p$.e = _v$22);
-          _v$23 !== _p$.t && className(_el$32, _p$.t = _v$23);
+          var _v$24 = styles().maskedBadgeContainer, _v$25 = styles().maskedBadge;
+          _v$24 !== _p$.e && className(_el$35, _p$.e = _v$24);
+          _v$25 !== _p$.t && className(_el$36, _p$.t = _v$25);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$31;
+        return _el$35;
       })() : null;
     })(), null);
     insert(_el$23, () => routerState().location.pathname);
     insert(_el$22, (() => {
       var _c$3 = memo(() => !!routerState().location.maskedLocation);
       return () => _c$3() ? (() => {
-        var _el$33 = _tmpl$4();
-        insert(_el$33, () => routerState().location.maskedLocation?.pathname);
-        effect(() => className(_el$33, styles().maskedLocation));
-        return _el$33;
+        var _el$37 = _tmpl$4();
+        insert(_el$37, () => routerState().location.maskedLocation?.pathname);
+        effect(() => className(_el$37, styles().maskedLocation));
+        return _el$37;
       })() : null;
     })(), null);
     _el$26.$$click = () => {
-      setShowMatches(false);
+      setCurrentTab("routes");
     };
     _el$27.$$click = () => {
-      setShowMatches(true);
+      setCurrentTab("matches");
     };
-    insert(_el$29, (() => {
-      var _c$4 = memo(() => !!!showMatches());
-      return () => _c$4() ? createComponent(RouteComp, {
-        routerState,
-        router,
-        get route() {
-          return router().routeTree;
-        },
-        isRoot: true,
-        activeId,
-        setActiveId
-      }) : (() => {
-        var _el$34 = _tmpl$6();
-        insert(_el$34, () => (routerState().pendingMatches?.length ? routerState().pendingMatches : routerState().matches)?.map((match, _i) => {
-          return (() => {
-            var _el$35 = _tmpl$9(), _el$36 = _el$35.firstChild;
-            _el$35.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
-            insert(_el$35, createComponent(NavigateLink, {
-              get left() {
-                return createComponent(NavigateButton, {
-                  get to() {
-                    return match.pathname;
-                  },
-                  get params() {
-                    return match.params;
+    _el$28.$$click = () => {
+      setCurrentTab("history");
+    };
+    insert(_el$30, createComponent(Switch, {
+      get children() {
+        return [createComponent(Match, {
+          get when() {
+            return currentTab() === "routes";
+          },
+          get children() {
+            return createComponent(RouteComp, {
+              routerState,
+              router,
+              get route() {
+                return router().routeTree;
+              },
+              isRoot: true,
+              activeId,
+              setActiveId
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return currentTab() === "matches";
+          },
+          get children() {
+            var _el$31 = _tmpl$6();
+            insert(_el$31, () => (routerState().pendingMatches?.length ? routerState().pendingMatches : routerState().matches)?.map((match, _i) => {
+              return (() => {
+                var _el$38 = _tmpl$0(), _el$39 = _el$38.firstChild;
+                _el$38.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
+                insert(_el$38, createComponent(NavigateLink, {
+                  get left() {
+                    return createComponent(NavigateButton, {
+                      get to() {
+                        return match.pathname;
+                      },
+                      get params() {
+                        return match.params;
+                      },
+                      get search() {
+                        return match.search;
+                      },
+                      router
+                    });
                   },
-                  get search() {
-                    return match.search;
+                  get right() {
+                    return createComponent(AgeTicker, {
+                      match,
+                      router
+                    });
                   },
-                  router
+                  get children() {
+                    var _el$40 = _tmpl$4();
+                    insert(_el$40, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`);
+                    effect(() => className(_el$40, styles().matchID));
+                    return _el$40;
+                  }
+                }), null);
+                effect((_p$) => {
+                  var _v$26 = `Open match details for ${match.id}`, _v$27 = clsx(styles().matchRow(match === activeMatch())), _v$28 = clsx(styles().matchIndicator(getStatusColor(match)));
+                  _v$26 !== _p$.e && setAttribute(_el$38, "aria-label", _p$.e = _v$26);
+                  _v$27 !== _p$.t && className(_el$38, _p$.t = _v$27);
+                  _v$28 !== _p$.a && className(_el$39, _p$.a = _v$28);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0
                 });
+                return _el$38;
+              })();
+            }));
+            return _el$31;
+          }
+        }), createComponent(Match, {
+          get when() {
+            return currentTab() === "history";
+          },
+          get children() {
+            var _el$32 = _tmpl$7(), _el$33 = _el$32.firstChild;
+            insert(_el$33, createComponent(For, {
+              get each() {
+                return history();
               },
-              get right() {
-                return createComponent(AgeTicker, {
-                  match,
-                  router
+              children: (match, index) => (() => {
+                var _el$41 = _tmpl$1(), _el$42 = _el$41.firstChild;
+                insert(_el$41, createComponent(NavigateLink, {
+                  get left() {
+                    return createComponent(NavigateButton, {
+                      get to() {
+                        return match.pathname;
+                      },
+                      get params() {
+                        return match.params;
+                      },
+                      get search() {
+                        return match.search;
+                      },
+                      router
+                    });
+                  },
+                  get right() {
+                    return createComponent(AgeTicker, {
+                      match,
+                      router
+                    });
+                  },
+                  get children() {
+                    var _el$43 = _tmpl$4();
+                    insert(_el$43, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`);
+                    effect(() => className(_el$43, styles().matchID));
+                    return _el$43;
+                  }
+                }), null);
+                effect((_p$) => {
+                  var _v$29 = clsx(styles().matchRow(match === activeMatch())), _v$30 = clsx(styles().matchIndicator(index() === 0 ? "green" : "gray"));
+                  _v$29 !== _p$.e && className(_el$41, _p$.e = _v$29);
+                  _v$30 !== _p$.t && className(_el$42, _p$.t = _v$30);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0
                 });
-              },
-              get children() {
-                var _el$37 = _tmpl$4();
-                insert(_el$37, () => `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`);
-                effect(() => className(_el$37, styles().matchID));
-                return _el$37;
-              }
+                return _el$41;
+              })()
             }), null);
-            effect((_p$) => {
-              var _v$24 = `Open match details for ${match.id}`, _v$25 = clsx(styles().matchRow(match === activeMatch())), _v$26 = clsx(styles().matchIndicator(getStatusColor(match)));
-              _v$24 !== _p$.e && setAttribute(_el$35, "aria-label", _p$.e = _v$24);
-              _v$25 !== _p$.t && className(_el$35, _p$.t = _v$25);
-              _v$26 !== _p$.a && className(_el$36, _p$.a = _v$26);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0
-            });
-            return _el$35;
-          })();
-        }));
-        return _el$34;
-      })();
-    })());
+            insert(_el$33, (() => {
+              var _c$4 = memo(() => !!hasHistoryOverflowed());
+              return () => _c$4() ? (() => {
+                var _el$44 = _tmpl$10();
+                effect(() => className(_el$44, styles().historyOverflowContainer));
+                return _el$44;
+              })() : null;
+            })(), null);
+            return _el$32;
+          }
+        })];
+      }
+    }));
     insert(_el$18, (() => {
       var _c$5 = memo(() => !!routerState().cachedMatches.length);
       return () => _c$5() ? (() => {
-        var _el$38 = _tmpl$0(), _el$39 = _el$38.firstChild, _el$40 = _el$39.firstChild, _el$41 = _el$40.nextSibling, _el$42 = _el$39.nextSibling;
-        insert(_el$42, () => routerState().cachedMatches.map((match) => {
+        var _el$45 = _tmpl$11(), _el$46 = _el$45.firstChild, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$49 = _el$46.nextSibling;
+        insert(_el$49, () => routerState().cachedMatches.map((match) => {
           return (() => {
-            var _el$43 = _tmpl$9(), _el$44 = _el$43.firstChild;
-            _el$43.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
-            insert(_el$43, createComponent(NavigateLink, {
+            var _el$50 = _tmpl$0(), _el$51 = _el$50.firstChild;
+            _el$50.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
+            insert(_el$50, createComponent(NavigateLink, {
               get left() {
                 return createComponent(NavigateButton, {
                   get to() {
@@ -1582,93 +1693,93 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
                 });
               },
               get children() {
-                var _el$45 = _tmpl$4();
-                insert(_el$45, () => `${match.id}`);
-                effect(() => className(_el$45, styles().matchID));
-                return _el$45;
+                var _el$52 = _tmpl$4();
+                insert(_el$52, () => `${match.id}`);
+                effect(() => className(_el$52, styles().matchID));
+                return _el$52;
               }
             }), null);
             effect((_p$) => {
-              var _v$30 = `Open match details for ${match.id}`, _v$31 = clsx(styles().matchRow(match === activeMatch())), _v$32 = clsx(styles().matchIndicator(getStatusColor(match)));
-              _v$30 !== _p$.e && setAttribute(_el$43, "aria-label", _p$.e = _v$30);
-              _v$31 !== _p$.t && className(_el$43, _p$.t = _v$31);
-              _v$32 !== _p$.a && className(_el$44, _p$.a = _v$32);
+              var _v$34 = `Open match details for ${match.id}`, _v$35 = clsx(styles().matchRow(match === activeMatch())), _v$36 = clsx(styles().matchIndicator(getStatusColor(match)));
+              _v$34 !== _p$.e && setAttribute(_el$50, "aria-label", _p$.e = _v$34);
+              _v$35 !== _p$.t && className(_el$50, _p$.t = _v$35);
+              _v$36 !== _p$.a && className(_el$51, _p$.a = _v$36);
               return _p$;
             }, {
               e: void 0,
               t: void 0,
               a: void 0
             });
-            return _el$43;
+            return _el$50;
           })();
         }));
         effect((_p$) => {
-          var _v$27 = styles().cachedMatchesContainer, _v$28 = styles().detailsHeader, _v$29 = styles().detailsHeaderInfo;
-          _v$27 !== _p$.e && className(_el$38, _p$.e = _v$27);
-          _v$28 !== _p$.t && className(_el$39, _p$.t = _v$28);
-          _v$29 !== _p$.a && className(_el$41, _p$.a = _v$29);
+          var _v$31 = styles().cachedMatchesContainer, _v$32 = styles().detailsHeader, _v$33 = styles().detailsHeaderInfo;
+          _v$31 !== _p$.e && className(_el$45, _p$.e = _v$31);
+          _v$32 !== _p$.t && className(_el$46, _p$.t = _v$32);
+          _v$33 !== _p$.a && className(_el$48, _p$.a = _v$33);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$38;
+        return _el$45;
       })() : null;
     })(), null);
     insert(_el$11, (() => {
       var _c$6 = memo(() => !!(activeMatch() && activeMatch()?.status));
       return () => _c$6() ? (() => {
-        var _el$46 = _tmpl$1(), _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$49 = _el$48.firstChild, _el$50 = _el$49.firstChild, _el$51 = _el$50.firstChild, _el$52 = _el$50.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling, _el$55 = _el$54.firstChild, _el$56 = _el$52.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$57.nextSibling, _el$59 = _el$56.nextSibling, _el$60 = _el$59.firstChild, _el$61 = _el$60.nextSibling, _el$62 = _el$48.nextSibling, _el$63 = _el$62.nextSibling;
-        insert(_el$51, (() => {
+        var _el$53 = _tmpl$12(), _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$55.firstChild, _el$57 = _el$56.firstChild, _el$58 = _el$57.firstChild, _el$59 = _el$57.nextSibling, _el$60 = _el$59.firstChild, _el$61 = _el$60.nextSibling, _el$62 = _el$61.firstChild, _el$63 = _el$59.nextSibling, _el$64 = _el$63.firstChild, _el$65 = _el$64.nextSibling, _el$66 = _el$63.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$67.nextSibling, _el$69 = _el$55.nextSibling, _el$70 = _el$69.nextSibling;
+        insert(_el$58, (() => {
           var _c$8 = memo(() => !!(activeMatch()?.status === "success" && activeMatch()?.isFetching));
           return () => _c$8() ? "fetching" : activeMatch()?.status;
         })());
-        insert(_el$55, () => activeMatch()?.id);
-        insert(_el$58, (() => {
+        insert(_el$62, () => activeMatch()?.id);
+        insert(_el$65, (() => {
           var _c$9 = memo(() => !!routerState().pendingMatches?.find((d) => d.id === activeMatch()?.id));
           return () => _c$9() ? "Pending" : routerState().matches.find((d) => d.id === activeMatch()?.id) ? "Active" : "Cached";
         })());
-        insert(_el$61, (() => {
+        insert(_el$68, (() => {
           var _c$0 = memo(() => !!activeMatch()?.updatedAt);
           return () => _c$0() ? new Date(activeMatch()?.updatedAt).toLocaleTimeString() : "N/A";
         })());
-        insert(_el$46, (() => {
+        insert(_el$53, (() => {
           var _c$1 = memo(() => !!activeMatchLoaderData());
           return () => _c$1() ? [(() => {
-            var _el$64 = _tmpl$10();
-            effect(() => className(_el$64, styles().detailsHeader));
-            return _el$64;
+            var _el$71 = _tmpl$13();
+            effect(() => className(_el$71, styles().detailsHeader));
+            return _el$71;
           })(), (() => {
-            var _el$65 = _tmpl$6();
-            insert(_el$65, createComponent(Explorer, {
+            var _el$72 = _tmpl$6();
+            insert(_el$72, createComponent(Explorer, {
               label: "loaderData",
               value: activeMatchLoaderData,
               defaultExpanded: {}
             }));
-            effect(() => className(_el$65, styles().detailsContent));
-            return _el$65;
+            effect(() => className(_el$72, styles().detailsContent));
+            return _el$72;
           })()] : null;
-        })(), _el$62);
-        insert(_el$63, createComponent(Explorer, {
+        })(), _el$69);
+        insert(_el$70, createComponent(Explorer, {
           label: "Match",
           value: activeMatchValue,
           defaultExpanded: {}
         }));
         effect((_p$) => {
-          var _v$33 = styles().thirdContainer, _v$34 = styles().detailsHeader, _v$35 = styles().matchDetails, _v$36 = styles().matchStatus(activeMatch()?.status, activeMatch()?.isFetching), _v$37 = styles().matchDetailsInfoLabel, _v$38 = styles().matchDetailsInfo, _v$39 = styles().matchDetailsInfoLabel, _v$40 = styles().matchDetailsInfo, _v$41 = styles().matchDetailsInfoLabel, _v$42 = styles().matchDetailsInfo, _v$43 = styles().detailsHeader, _v$44 = styles().detailsContent;
-          _v$33 !== _p$.e && className(_el$46, _p$.e = _v$33);
-          _v$34 !== _p$.t && className(_el$47, _p$.t = _v$34);
-          _v$35 !== _p$.a && className(_el$49, _p$.a = _v$35);
-          _v$36 !== _p$.o && className(_el$50, _p$.o = _v$36);
-          _v$37 !== _p$.i && className(_el$52, _p$.i = _v$37);
-          _v$38 !== _p$.n && className(_el$54, _p$.n = _v$38);
-          _v$39 !== _p$.s && className(_el$56, _p$.s = _v$39);
-          _v$40 !== _p$.h && className(_el$58, _p$.h = _v$40);
-          _v$41 !== _p$.r && className(_el$59, _p$.r = _v$41);
-          _v$42 !== _p$.d && className(_el$61, _p$.d = _v$42);
-          _v$43 !== _p$.l && className(_el$62, _p$.l = _v$43);
-          _v$44 !== _p$.u && className(_el$63, _p$.u = _v$44);
+          var _v$37 = styles().thirdContainer, _v$38 = styles().detailsHeader, _v$39 = styles().matchDetails, _v$40 = styles().matchStatus(activeMatch()?.status, activeMatch()?.isFetching), _v$41 = styles().matchDetailsInfoLabel, _v$42 = styles().matchDetailsInfo, _v$43 = styles().matchDetailsInfoLabel, _v$44 = styles().matchDetailsInfo, _v$45 = styles().matchDetailsInfoLabel, _v$46 = styles().matchDetailsInfo, _v$47 = styles().detailsHeader, _v$48 = styles().detailsContent;
+          _v$37 !== _p$.e && className(_el$53, _p$.e = _v$37);
+          _v$38 !== _p$.t && className(_el$54, _p$.t = _v$38);
+          _v$39 !== _p$.a && className(_el$56, _p$.a = _v$39);
+          _v$40 !== _p$.o && className(_el$57, _p$.o = _v$40);
+          _v$41 !== _p$.i && className(_el$59, _p$.i = _v$41);
+          _v$42 !== _p$.n && className(_el$61, _p$.n = _v$42);
+          _v$43 !== _p$.s && className(_el$63, _p$.s = _v$43);
+          _v$44 !== _p$.h && className(_el$65, _p$.h = _v$44);
+          _v$45 !== _p$.r && className(_el$66, _p$.r = _v$45);
+          _v$46 !== _p$.d && className(_el$68, _p$.d = _v$46);
+          _v$47 !== _p$.l && className(_el$69, _p$.l = _v$47);
+          _v$48 !== _p$.u && className(_el$70, _p$.u = _v$48);
           return _p$;
         }, {
           e: void 0,
@@ -1684,26 +1795,26 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
           l: void 0,
           u: void 0
         });
-        return _el$46;
+        return _el$53;
       })() : null;
     })(), null);
     insert(_el$11, (() => {
       var _c$7 = memo(() => !!hasSearch());
       return () => _c$7() ? (() => {
-        var _el$66 = _tmpl$11(), _el$67 = _el$66.firstChild;
-        _el$67.firstChild;
-        var _el$69 = _el$67.nextSibling;
-        insert(_el$67, typeof navigator !== "undefined" ? (() => {
-          var _el$70 = _tmpl$12();
-          insert(_el$70, createComponent(CopyButton, {
+        var _el$73 = _tmpl$14(), _el$74 = _el$73.firstChild;
+        _el$74.firstChild;
+        var _el$76 = _el$74.nextSibling;
+        insert(_el$74, typeof navigator !== "undefined" ? (() => {
+          var _el$77 = _tmpl$15();
+          insert(_el$77, createComponent(CopyButton, {
             getValue: () => {
               const search = routerState().location.search;
               return JSON.stringify(search);
             }
           }));
-          return _el$70;
+          return _el$77;
         })() : null, null);
-        insert(_el$69, createComponent(Explorer, {
+        insert(_el$76, createComponent(Explorer, {
           value: locationSearchValue,
           get defaultExpanded() {
             return Object.keys(routerState().location.search).reduce((obj, next) => {
@@ -1713,21 +1824,21 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
           }
         }));
         effect((_p$) => {
-          var _v$45 = styles().fourthContainer, _v$46 = styles().detailsHeader, _v$47 = styles().detailsContent;
-          _v$45 !== _p$.e && className(_el$66, _p$.e = _v$45);
-          _v$46 !== _p$.t && className(_el$67, _p$.t = _v$46);
-          _v$47 !== _p$.a && className(_el$69, _p$.a = _v$47);
+          var _v$49 = styles().fourthContainer, _v$50 = styles().detailsHeader, _v$51 = styles().detailsContent;
+          _v$49 !== _p$.e && className(_el$73, _p$.e = _v$49);
+          _v$50 !== _p$.t && className(_el$74, _p$.t = _v$50);
+          _v$51 !== _p$.a && className(_el$76, _p$.a = _v$51);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$66;
+        return _el$73;
       })() : null;
     })(), null);
     effect((_p$) => {
-      var _v$6 = styles().panelCloseBtn, _v$7 = styles().panelCloseBtnIcon, _v$8 = styles().firstContainer, _v$9 = styles().row, _v$0 = styles().routerExplorerContainer, _v$1 = styles().routerExplorer, _v$10 = styles().secondContainer, _v$11 = styles().matchesContainer, _v$12 = styles().detailsHeader, _v$13 = styles().detailsContent, _v$14 = styles().detailsHeader, _v$15 = styles().routeMatchesToggle, _v$16 = !showMatches(), _v$17 = clsx(styles().routeMatchesToggleBtn(!showMatches(), true)), _v$18 = showMatches(), _v$19 = clsx(styles().routeMatchesToggleBtn(!!showMatches(), false)), _v$20 = styles().detailsHeaderInfo, _v$21 = clsx(styles().routesContainer);
+      var _v$6 = styles().panelCloseBtn, _v$7 = styles().panelCloseBtnIcon, _v$8 = styles().firstContainer, _v$9 = styles().row, _v$0 = styles().routerExplorerContainer, _v$1 = styles().routerExplorer, _v$10 = styles().secondContainer, _v$11 = styles().matchesContainer, _v$12 = styles().detailsHeader, _v$13 = styles().detailsContent, _v$14 = styles().detailsHeader, _v$15 = styles().routeMatchesToggle, _v$16 = currentTab() === "routes", _v$17 = clsx(styles().routeMatchesToggleBtn(currentTab() === "routes", true)), _v$18 = currentTab() === "matches", _v$19 = clsx(styles().routeMatchesToggleBtn(currentTab() === "matches", true)), _v$20 = currentTab() === "history", _v$21 = clsx(styles().routeMatchesToggleBtn(currentTab() === "history", false)), _v$22 = styles().detailsHeaderInfo, _v$23 = clsx(styles().routesContainer);
       _v$6 !== _p$.e && className(_el$12, _p$.e = _v$6);
       _v$7 !== _p$.t && setAttribute(_el$13, "class", _p$.t = _v$7);
       _v$8 !== _p$.a && className(_el$14, _p$.a = _v$8);
@@ -1744,8 +1855,10 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
       _v$17 !== _p$.w && className(_el$26, _p$.w = _v$17);
       _v$18 !== _p$.m && (_el$27.disabled = _p$.m = _v$18);
       _v$19 !== _p$.f && className(_el$27, _p$.f = _v$19);
-      _v$20 !== _p$.y && className(_el$28, _p$.y = _v$20);
-      _v$21 !== _p$.g && className(_el$29, _p$.g = _v$21);
+      _v$20 !== _p$.y && (_el$28.disabled = _p$.y = _v$20);
+      _v$21 !== _p$.g && className(_el$28, _p$.g = _v$21);
+      _v$22 !== _p$.p && className(_el$29, _p$.p = _v$22);
+      _v$23 !== _p$.b && className(_el$30, _p$.b = _v$23);
       return _p$;
     }, {
       e: void 0,
@@ -1765,7 +1878,9 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
       m: void 0,
       f: void 0,
       y: void 0,
-      g: void 0
+      g: void 0,
+      p: void 0,
+      b: void 0
     });
     return _el$11;
   })();
@@ -1794,11 +1909,11 @@ function CopyButton({
     if (timeoutId) clearTimeout(timeoutId);
   });
   return (() => {
-    var _el$71 = _tmpl$13();
-    _el$71.$$click = handleCopy;
-    insert(_el$71, () => copied() ? "✅" : "📋");
-    effect(() => setAttribute(_el$71, "title", copied() ? "Copied!" : "Copy"));
-    return _el$71;
+    var _el$78 = _tmpl$16();
+    _el$78.$$click = handleCopy;
+    insert(_el$78, () => copied() ? "✅" : "📋");
+    effect(() => setAttribute(_el$78, "title", copied() ? "Copied!" : "Copy"));
+    return _el$78;
   })();
 }
 delegateEvents(["click", "mousedown"]);
@@ -1814,4 +1929,4 @@ export {
   BaseTanStackRouterDevtoolsPanel$1 as c,
   useLocalStorage as u
 };
-//# sourceMappingURL=BaseTanStackRouterDevtoolsPanel-CaAQWNvS.js.map
+//# sourceMappingURL=BaseTanStackRouterDevtoolsPanel-Cbvcs84k.js.map