@tanstack/router-devtools-core 1.121.0-alpha.22 → 1.121.0-alpha.28

package/dist/cjs/AgeTicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AgeTicker.cjs","sources":["../../src/AgeTicker.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\nimport { useStyles } from './useStyles'\nimport type { AnyRouteMatch, AnyRouter } from '@tanstack/router-core'\nimport type { Accessor } from 'solid-js'\n\nfunction formatTime(ms: number) {\n  const units = ['s', 'min', 'h', 'd']\n  const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]\n\n  let chosenUnitIndex = 0\n  for (let i = 1; i < values.length; i++) {\n    if (values[i]! < 1) break\n    chosenUnitIndex = i\n  }\n\n  const formatter = new Intl.NumberFormat(navigator.language, {\n    compactDisplay: 'short',\n    notation: 'compact',\n    maximumFractionDigits: 0,\n  })\n\n  return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]\n}\n\nexport function AgeTicker({\n  match,\n  router,\n}: {\n  match?: AnyRouteMatch\n  router: Accessor<AnyRouter>\n}) {\n  const styles = useStyles()\n\n  if (!match) {\n    return null\n  }\n\n  const route = router().looseRoutesById[match.routeId]!\n\n  if (!route.options.loader) {\n    return null\n  }\n\n  const age = Date.now() - match.updatedAt\n  const staleTime =\n    route.options.staleTime ?? router().options.defaultStaleTime ?? 0\n  const gcTime =\n    route.options.gcTime ?? router().options.defaultGcTime ?? 30 * 60 * 1000\n\n  return (\n    <div class={cx(styles().ageTicker(age > staleTime))}>\n      <div>{formatTime(age)}</div>\n      <div>/</div>\n      <div>{formatTime(staleTime)}</div>\n      <div>/</div>\n      <div>{formatTime(gcTime)}</div>\n    </div>\n  )\n}\n"],"names":["formatTime","ms","units","values","chosenUnitIndex","i","length","formatter","Intl","NumberFormat","navigator","language","compactDisplay","notation","maximumFractionDigits","format","AgeTicker","match","router","styles","useStyles","route","looseRoutesById","routeId","options","loader","age","Date","now","updatedAt","staleTime","defaultStaleTime","gcTime","defaultGcTime","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_$insert","_$className","cx","ageTicker"],"mappings":";;;;;;AAKA,SAASA,WAAWC,IAAY;AAC9B,QAAMC,QAAQ,CAAC,KAAK,OAAO,KAAK,GAAG;AAC7BC,QAAAA,SAAS,CAACF,KAAK,KAAMA,KAAK,KAAOA,KAAK,MAASA,KAAK,KAAQ;AAElE,MAAIG,kBAAkB;AACtB,WAASC,IAAI,GAAGA,IAAIF,OAAOG,QAAQD,KAAK;AAClCF,QAAAA,OAAOE,CAAC,IAAK,EAAG;AACFA,sBAAAA;AAAAA,EAAAA;AAGpB,QAAME,YAAY,IAAIC,KAAKC,aAAaC,UAAUC,UAAU;AAAA,IAC1DC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IACVC,uBAAuB;AAAA,EAAA,CACxB;AAED,SAAOP,UAAUQ,OAAOZ,OAAOC,eAAe,CAAE,IAAIF,MAAME,eAAe;AAC3E;AAEO,SAASY,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAIF,GAAG;AACD,QAAMC,SAASC,UAAAA,UAAU;AAEzB,MAAI,CAACH,OAAO;AACH,WAAA;AAAA,EAAA;AAGT,QAAMI,QAAQH,OAAAA,EAASI,gBAAgBL,MAAMM,OAAO;AAEhD,MAAA,CAACF,MAAMG,QAAQC,QAAQ;AAClB,WAAA;AAAA,EAAA;AAGT,QAAMC,MAAMC,KAAKC,IAAI,IAAIX,MAAMY;AAC/B,QAAMC,YACJT,MAAMG,QAAQM,aAAaZ,SAASM,QAAQO,oBAAoB;AAC5DC,QAAAA,SACJX,MAAMG,QAAQQ,UAAUd,SAASM,QAAQS,iBAAiB,KAAK,KAAK;AAEtE,UAAA,MAAA;AAAA,QAAAC,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC,aAAAE,QAAAD,MAAAD,aAAAG,QAAAD,MAAAF;AAAAI,QAAAA,OAAAP,OAAA,MAEUpC,WAAW0B,GAAG,CAAC;AAAAiB,QAAAA,OAAAH,OAAA,MAEfxC,WAAW8B,SAAS,CAAC;AAAAa,QAAAA,OAAAD,OAAA,MAErB1C,WAAWgC,MAAM,CAAC;qBAAAY,IAAAA,UAAAV,MALdW,UAAG1B,SAAS2B,UAAUpB,MAAMI,SAAS,CAAC,CAAC,CAAA;AAAAI,WAAAA;AAAAA,EAAAA,GAAA;AAQvD;;"}
+{"version":3,"file":"AgeTicker.cjs","sources":["../../src/AgeTicker.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\nimport { useStyles } from './useStyles'\nimport type { AnyRouteMatch, AnyRouter } from '@tanstack/router-core'\nimport type { Accessor } from 'solid-js'\n\nfunction formatTime(ms: number) {\n  const units = ['s', 'min', 'h', 'd']\n  const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]\n\n  let chosenUnitIndex = 0\n  for (let i = 1; i < values.length; i++) {\n    if (values[i]! < 1) break\n    chosenUnitIndex = i\n  }\n\n  const formatter = new Intl.NumberFormat(navigator.language, {\n    compactDisplay: 'short',\n    notation: 'compact',\n    maximumFractionDigits: 0,\n  })\n\n  return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]\n}\n\nexport function AgeTicker({\n  match,\n  router,\n}: {\n  match?: AnyRouteMatch\n  router: Accessor<AnyRouter>\n}) {\n  const styles = useStyles()\n\n  if (!match) {\n    return null\n  }\n\n  const route = router().looseRoutesById[match.routeId]!\n\n  if (!route.options.loader) {\n    return null\n  }\n\n  const age = Date.now() - match.updatedAt\n  const staleTime =\n    route.options.staleTime ?? router().options.defaultStaleTime ?? 0\n  const gcTime =\n    route.options.gcTime ?? router().options.defaultGcTime ?? 30 * 60 * 1000\n\n  return (\n    <div class={cx(styles().ageTicker(age > staleTime))}>\n      <div>{formatTime(age)}</div>\n      <div>/</div>\n      <div>{formatTime(staleTime)}</div>\n      <div>/</div>\n      <div>{formatTime(gcTime)}</div>\n    </div>\n  )\n}\n"],"names":["formatTime","ms","units","values","chosenUnitIndex","i","length","formatter","Intl","NumberFormat","navigator","language","compactDisplay","notation","maximumFractionDigits","format","AgeTicker","match","router","styles","useStyles","route","looseRoutesById","routeId","options","loader","age","Date","now","updatedAt","staleTime","defaultStaleTime","gcTime","defaultGcTime","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_$insert","_$effect","_$className","cx","ageTicker"],"mappings":";;;;;;AAKA,SAASA,WAAWC,IAAY;AAC9B,QAAMC,QAAQ,CAAC,KAAK,OAAO,KAAK,GAAG;AACnC,QAAMC,SAAS,CAACF,KAAK,KAAMA,KAAK,KAAOA,KAAK,MAASA,KAAK,KAAQ;AAElE,MAAIG,kBAAkB;AACtB,WAASC,IAAI,GAAGA,IAAIF,OAAOG,QAAQD,KAAK;AACtC,QAAIF,OAAOE,CAAC,IAAK,EAAG;AACpBD,sBAAkBC;AAAAA,EACpB;AAEA,QAAME,YAAY,IAAIC,KAAKC,aAAaC,UAAUC,UAAU;AAAA,IAC1DC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IACVC,uBAAuB;AAAA,EAAA,CACxB;AAED,SAAOP,UAAUQ,OAAOZ,OAAOC,eAAe,CAAE,IAAIF,MAAME,eAAe;AAC3E;AAEO,SAASY,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAIF,GAAG;AACD,QAAMC,SAASC,UAAAA,UAAAA;AAEf,MAAI,CAACH,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAMI,QAAQH,OAAAA,EAASI,gBAAgBL,MAAMM,OAAO;AAEpD,MAAI,CAACF,MAAMG,QAAQC,QAAQ;AACzB,WAAO;AAAA,EACT;AAEA,QAAMC,MAAMC,KAAKC,IAAAA,IAAQX,MAAMY;AAC/B,QAAMC,YACJT,MAAMG,QAAQM,aAAaZ,SAASM,QAAQO,oBAAoB;AAClE,QAAMC,SACJX,MAAMG,QAAQQ,UAAUd,SAASM,QAAQS,iBAAiB,KAAK,KAAK;AAEtE,UAAA,MAAA;AAAA,QAAAC,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC,aAAAE,QAAAD,MAAAD,aAAAG,QAAAD,MAAAF;AAAAI,QAAAA,OAAAP,OAAA,MAEUpC,WAAW0B,GAAG,CAAC;AAAAiB,QAAAA,OAAAH,OAAA,MAEfxC,WAAW8B,SAAS,CAAC;AAAAa,QAAAA,OAAAD,OAAA,MAErB1C,WAAWgC,MAAM,CAAC;AAAAY,QAAAA,aAAAC,IAAAA,UAAAX,MALdY,UAAG3B,SAAS4B,UAAUrB,MAAMI,SAAS,CAAC,CAAC,CAAA;AAAA,WAAAI;AAAAA,EAAA,GAAA;AAQvD;;"}

package/dist/cjs/BaseTanStackRouterDevtoolsPanel.cjs

@@ -12,7 +12,7 @@ const Explorer = require("./Explorer.cjs");
 const utils = require("./utils.cjs");
 const AgeTicker = require("./AgeTicker.cjs");
 const NavigateButton = require("./NavigateButton.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ web.template(`<div><div>`), _tmpl$3 = /* @__PURE__ */ web.template(`<code> `), _tmpl$4 = /* @__PURE__ */ web.template(`<code>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div><div role=button><div>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div>`), _tmpl$7 = /* @__PURE__ */ web.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__ */ web.template(`<div><span>masked`), _tmpl$9 = /* @__PURE__ */ web.template(`<div role=button><div>`), _tmpl$10 = /* @__PURE__ */ web.template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$11 = /* @__PURE__ */ web.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$12 = /* @__PURE__ */ web.template(`<div>Loader Data`), _tmpl$13 = /* @__PURE__ */ web.template(`<div><div>Search Params</div><div>`);
+var _tmpl$ = /* @__PURE__ */ web.template(`<button><div>TANSTACK</div><div>TanStack Router v1`), _tmpl$2 = /* @__PURE__ */ web.template(`<div><div>`), _tmpl$3 = /* @__PURE__ */ web.template(`<code> `), _tmpl$4 = /* @__PURE__ */ web.template(`<code>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div><div role=button><div>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div>`), _tmpl$7 = /* @__PURE__ */ web.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__ */ web.template(`<div><span>masked`), _tmpl$9 = /* @__PURE__ */ web.template(`<div role=button><div>`), _tmpl$0 = /* @__PURE__ */ web.template(`<div><div><div>Cached Matches</div><div>age / staleTime / gcTime</div></div><div>`), _tmpl$1 = /* @__PURE__ */ web.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__ */ web.template(`<div>Loader Data`), _tmpl$11 = /* @__PURE__ */ web.template(`<div><div>Search Params</div><div>`);
 function Logo(props) {
   const {
     className,
@@ -65,10 +65,9 @@ function RouteComp({
   const matches = solidJs.createMemo(() => routerState().pendingMatches || routerState().matches);
   const match = solidJs.createMemo(() => routerState().matches.find((d) => d.routeId === route.id));
   const param = solidJs.createMemo(() => {
-    var _a, _b;
     try {
-      if ((_a = match()) == null ? void 0 : _a.params) {
-        const p = (_b = match()) == null ? void 0 : _b.params;
+      if (match()?.params) {
+        const p = match()?.params;
         const r = route.path || routerCore.trimPath(route.id);
         if (r.startsWith("$")) {
           const trimmed = r.slice(1);
@@ -129,26 +128,23 @@ function RouteComp({
       },
       get children() {
         return [(() => {
-          var _el$9 = _tmpl$3(), _el$10 = _el$9.firstChild;
-          web.insert(_el$9, () => isRoot ? routerCore.rootRouteId : route.path || routerCore.trimPath(route.id), _el$10);
+          var _el$9 = _tmpl$3(), _el$0 = _el$9.firstChild;
+          web.insert(_el$9, () => isRoot ? routerCore.rootRouteId : route.path || routerCore.trimPath(route.id), _el$0);
           web.effect(() => web.className(_el$9, styles().code));
           return _el$9;
         })(), (() => {
-          var _el$11 = _tmpl$4();
-          web.insert(_el$11, param);
-          web.effect(() => web.className(_el$11, styles().routeParamInfo));
-          return _el$11;
+          var _el$1 = _tmpl$4();
+          web.insert(_el$1, param);
+          web.effect(() => web.className(_el$1, styles().routeParamInfo));
+          return _el$1;
         })()];
       }
     }), null);
     web.insert(_el$6, (() => {
-      var _c$ = web.memo(() => {
-        var _a;
-        return !!((_a = route.children) == null ? void 0 : _a.length);
-      });
+      var _c$ = web.memo(() => !!route.children?.length);
       return () => _c$() ? (() => {
-        var _el$12 = _tmpl$6();
-        web.insert(_el$12, () => [...route.children].sort((a, b) => {
+        var _el$10 = _tmpl$6();
+        web.insert(_el$10, () => [...route.children].sort((a, b) => {
           return a.rank - b.rank;
         }).map((r) => web.createComponent(RouteComp, {
           routerState,
@@ -157,8 +153,8 @@ function RouteComp({
           activeId,
           setActiveId
         })));
-        web.effect(() => web.className(_el$12, styles().nestedRouteRow(!!isRoot)));
-        return _el$12;
+        web.effect(() => web.className(_el$10, styles().nestedRouteRow(!!isRoot)));
+        return _el$10;
       })() : null;
     })(), null);
     web.effect((_p$) => {
@@ -211,17 +207,14 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
     };
   });
   const routerExplorerValue = solidJs.createMemo(() => Object.fromEntries(utils.multiSortBy(Object.keys(explorerState()), ["state", "routesById", "routesByPath", "flatRoutes", "options", "manifest"].map((d) => (dd) => dd !== d)).map((key) => [key, explorerState()[key]]).filter((d) => typeof d[1] !== "function" && !["__store", "basepath", "injectedHtml", "subscribers", "latestLoadPromise", "navigateTimeout", "resetNextScroll", "tempLocationKey", "latestLocation", "routeTree", "history"].includes(d[0]))));
-  const activeMatchLoaderData = solidJs.createMemo(() => {
-    var _a;
-    return (_a = activeMatch()) == null ? void 0 : _a.loaderData;
-  });
+  const activeMatchLoaderData = solidJs.createMemo(() => activeMatch()?.loaderData);
   const activeMatchValue = solidJs.createMemo(() => activeMatch());
   const locationSearchValue = solidJs.createMemo(() => routerState().location.search);
   return (() => {
-    var _el$13 = _tmpl$7(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$16.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild;
-    _el$22.firstChild;
-    var _el$24 = _el$22.nextSibling, _el$25 = _el$24.firstChild, _el$26 = _el$24.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling, _el$30 = _el$27.nextSibling, _el$31 = _el$26.nextSibling;
-    web.spread(_el$13, web.mergeProps({
+    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;
+    _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;
+    web.spread(_el$11, web.mergeProps({
       get ["class"]() {
         return clsx.clsx(styles().devtoolsPanel, "TanStackRouterDevtoolsPanel", className ? className() : "");
       },
@@ -229,19 +222,19 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
         return style ? style() : "";
       }
     }, otherPanelProps), false, true);
-    web.insert(_el$13, handleDragStart ? (() => {
-      var _el$32 = _tmpl$6();
-      web.addEventListener(_el$32, "mousedown", handleDragStart, true);
-      web.effect(() => web.className(_el$32, styles().dragHandle));
-      return _el$32;
-    })() : null, _el$14);
-    _el$14.$$click = (e) => {
+    web.insert(_el$11, handleDragStart ? (() => {
+      var _el$30 = _tmpl$6();
+      web.addEventListener(_el$30, "mousedown", handleDragStart, true);
+      web.effect(() => web.className(_el$30, styles().dragHandle));
+      return _el$30;
+    })() : null, _el$12);
+    _el$12.$$click = (e) => {
       if (setIsOpen) {
         setIsOpen(false);
       }
       onCloseClick(e);
     };
-    web.insert(_el$17, web.createComponent(Logo, {
+    web.insert(_el$15, web.createComponent(Logo, {
       "aria-hidden": true,
       onClick: (e) => {
         if (setIsOpen) {
@@ -250,7 +243,7 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
         onCloseClick(e);
       }
     }));
-    web.insert(_el$19, web.createComponent(Explorer.Explorer, {
+    web.insert(_el$17, web.createComponent(Explorer.Explorer, {
       label: "Router",
       value: routerExplorerValue,
       defaultExpanded: {
@@ -262,42 +255,39 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
         return subEntries.filter((d) => typeof d.value() !== "function");
       }
     }));
-    web.insert(_el$22, (() => {
+    web.insert(_el$20, (() => {
       var _c$2 = web.memo(() => !!routerState().location.maskedLocation);
       return () => _c$2() ? (() => {
-        var _el$33 = _tmpl$8(), _el$34 = _el$33.firstChild;
+        var _el$31 = _tmpl$8(), _el$32 = _el$31.firstChild;
         web.effect((_p$) => {
-          var _v$24 = styles().maskedBadgeContainer, _v$25 = styles().maskedBadge;
-          _v$24 !== _p$.e && web.className(_el$33, _p$.e = _v$24);
-          _v$25 !== _p$.t && web.className(_el$34, _p$.t = _v$25);
+          var _v$22 = styles().maskedBadgeContainer, _v$23 = styles().maskedBadge;
+          _v$22 !== _p$.e && web.className(_el$31, _p$.e = _v$22);
+          _v$23 !== _p$.t && web.className(_el$32, _p$.t = _v$23);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$33;
+        return _el$31;
       })() : null;
     })(), null);
-    web.insert(_el$25, () => routerState().location.pathname);
-    web.insert(_el$24, (() => {
+    web.insert(_el$23, () => routerState().location.pathname);
+    web.insert(_el$22, (() => {
       var _c$3 = web.memo(() => !!routerState().location.maskedLocation);
       return () => _c$3() ? (() => {
-        var _el$35 = _tmpl$4();
-        web.insert(_el$35, () => {
-          var _a;
-          return (_a = routerState().location.maskedLocation) == null ? void 0 : _a.pathname;
-        });
-        web.effect(() => web.className(_el$35, styles().maskedLocation));
-        return _el$35;
+        var _el$33 = _tmpl$4();
+        web.insert(_el$33, () => routerState().location.maskedLocation?.pathname);
+        web.effect(() => web.className(_el$33, styles().maskedLocation));
+        return _el$33;
       })() : null;
     })(), null);
-    _el$28.$$click = () => {
+    _el$26.$$click = () => {
       setShowMatches(false);
     };
-    _el$29.$$click = () => {
+    _el$27.$$click = () => {
       setShowMatches(true);
     };
-    web.insert(_el$31, (() => {
+    web.insert(_el$29, (() => {
       var _c$4 = web.memo(() => !!!showMatches());
       return () => _c$4() ? web.createComponent(RouteComp, {
         routerState,
@@ -309,68 +299,65 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
         activeId,
         setActiveId
       }) : (() => {
-        var _el$36 = _tmpl$6();
-        web.insert(_el$36, () => {
-          var _a, _b;
-          return (_b = ((_a = routerState().pendingMatches) == null ? void 0 : _a.length) ? routerState().pendingMatches : routerState().matches) == null ? void 0 : _b.map((match, _i) => {
-            return (() => {
-              var _el$37 = _tmpl$9(), _el$38 = _el$37.firstChild;
-              _el$37.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
-              web.insert(_el$37, web.createComponent(NavigateLink, {
-                get left() {
-                  return web.createComponent(NavigateButton.NavigateButton, {
-                    get to() {
-                      return match.pathname;
-                    },
-                    get params() {
-                      return match.params;
-                    },
-                    get search() {
-                      return match.search;
-                    },
-                    router
-                  });
-                },
-                get right() {
-                  return web.createComponent(AgeTicker.AgeTicker, {
-                    match,
-                    router
-                  });
-                },
-                get children() {
-                  var _el$39 = _tmpl$4();
-                  web.insert(_el$39, () => `${match.routeId === routerCore.rootRouteId ? routerCore.rootRouteId : match.pathname}`);
-                  web.effect(() => web.className(_el$39, styles().matchID));
-                  return _el$39;
-                }
-              }), null);
-              web.effect((_p$) => {
-                var _v$26 = `Open match details for ${match.id}`, _v$27 = clsx.clsx(styles().matchRow(match === activeMatch())), _v$28 = clsx.clsx(styles().matchIndicator(utils.getStatusColor(match)));
-                _v$26 !== _p$.e && web.setAttribute(_el$37, "aria-label", _p$.e = _v$26);
-                _v$27 !== _p$.t && web.className(_el$37, _p$.t = _v$27);
-                _v$28 !== _p$.a && web.className(_el$38, _p$.a = _v$28);
-                return _p$;
-              }, {
-                e: void 0,
-                t: void 0,
-                a: void 0
-              });
-              return _el$37;
-            })();
-          });
-        });
-        return _el$36;
+        var _el$34 = _tmpl$6();
+        web.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);
+            web.insert(_el$35, web.createComponent(NavigateLink, {
+              get left() {
+                return web.createComponent(NavigateButton.NavigateButton, {
+                  get to() {
+                    return match.pathname;
+                  },
+                  get params() {
+                    return match.params;
+                  },
+                  get search() {
+                    return match.search;
+                  },
+                  router
+                });
+              },
+              get right() {
+                return web.createComponent(AgeTicker.AgeTicker, {
+                  match,
+                  router
+                });
+              },
+              get children() {
+                var _el$37 = _tmpl$4();
+                web.insert(_el$37, () => `${match.routeId === routerCore.rootRouteId ? routerCore.rootRouteId : match.pathname}`);
+                web.effect(() => web.className(_el$37, styles().matchID));
+                return _el$37;
+              }
+            }), null);
+            web.effect((_p$) => {
+              var _v$24 = `Open match details for ${match.id}`, _v$25 = clsx.clsx(styles().matchRow(match === activeMatch())), _v$26 = clsx.clsx(styles().matchIndicator(utils.getStatusColor(match)));
+              _v$24 !== _p$.e && web.setAttribute(_el$35, "aria-label", _p$.e = _v$24);
+              _v$25 !== _p$.t && web.className(_el$35, _p$.t = _v$25);
+              _v$26 !== _p$.a && web.className(_el$36, _p$.a = _v$26);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            });
+            return _el$35;
+          })();
+        }));
+        return _el$34;
       })();
     })());
-    web.insert(_el$20, (() => {
+    web.insert(_el$18, (() => {
       var _c$5 = web.memo(() => !!routerState().cachedMatches.length);
       return () => _c$5() ? (() => {
-        var _el$40 = _tmpl$10(), _el$41 = _el$40.firstChild, _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling, _el$44 = _el$41.nextSibling;
-        web.insert(_el$44, () => routerState().cachedMatches.map((match) => {
+        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;
+        web.insert(_el$42, () => routerState().cachedMatches.map((match) => {
           return (() => {
-            var _el$45 = _tmpl$9(), _el$46 = _el$45.firstChild;
-            _el$45.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
-            web.insert(_el$45, web.createComponent(NavigateLink, {
+            var _el$43 = _tmpl$9(), _el$44 = _el$43.firstChild;
+            _el$43.$$click = () => setActiveId(activeId() === match.id ? "" : match.id);
+            web.insert(_el$43, web.createComponent(NavigateLink, {
               get left() {
                 return web.createComponent(NavigateButton.NavigateButton, {
                   get to() {
@@ -392,121 +379,93 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
                 });
               },
               get children() {
-                var _el$47 = _tmpl$4();
-                web.insert(_el$47, () => `${match.id}`);
-                web.effect(() => web.className(_el$47, styles().matchID));
-                return _el$47;
+                var _el$45 = _tmpl$4();
+                web.insert(_el$45, () => `${match.id}`);
+                web.effect(() => web.className(_el$45, styles().matchID));
+                return _el$45;
               }
             }), null);
             web.effect((_p$) => {
-              var _v$32 = `Open match details for ${match.id}`, _v$33 = clsx.clsx(styles().matchRow(match === activeMatch())), _v$34 = clsx.clsx(styles().matchIndicator(utils.getStatusColor(match)));
-              _v$32 !== _p$.e && web.setAttribute(_el$45, "aria-label", _p$.e = _v$32);
-              _v$33 !== _p$.t && web.className(_el$45, _p$.t = _v$33);
-              _v$34 !== _p$.a && web.className(_el$46, _p$.a = _v$34);
+              var _v$30 = `Open match details for ${match.id}`, _v$31 = clsx.clsx(styles().matchRow(match === activeMatch())), _v$32 = clsx.clsx(styles().matchIndicator(utils.getStatusColor(match)));
+              _v$30 !== _p$.e && web.setAttribute(_el$43, "aria-label", _p$.e = _v$30);
+              _v$31 !== _p$.t && web.className(_el$43, _p$.t = _v$31);
+              _v$32 !== _p$.a && web.className(_el$44, _p$.a = _v$32);
               return _p$;
             }, {
               e: void 0,
               t: void 0,
               a: void 0
             });
-            return _el$45;
+            return _el$43;
           })();
         }));
         web.effect((_p$) => {
-          var _v$29 = styles().cachedMatchesContainer, _v$30 = styles().detailsHeader, _v$31 = styles().detailsHeaderInfo;
-          _v$29 !== _p$.e && web.className(_el$40, _p$.e = _v$29);
-          _v$30 !== _p$.t && web.className(_el$41, _p$.t = _v$30);
-          _v$31 !== _p$.a && web.className(_el$43, _p$.a = _v$31);
+          var _v$27 = styles().cachedMatchesContainer, _v$28 = styles().detailsHeader, _v$29 = styles().detailsHeaderInfo;
+          _v$27 !== _p$.e && web.className(_el$38, _p$.e = _v$27);
+          _v$28 !== _p$.t && web.className(_el$39, _p$.t = _v$28);
+          _v$29 !== _p$.a && web.className(_el$41, _p$.a = _v$29);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$40;
+        return _el$38;
       })() : null;
     })(), null);
-    web.insert(_el$13, (() => {
-      var _c$6 = web.memo(() => {
-        var _a;
-        return !!(activeMatch() && ((_a = activeMatch()) == null ? void 0 : _a.status));
-      });
+    web.insert(_el$11, (() => {
+      var _c$6 = web.memo(() => !!(activeMatch() && activeMatch()?.status));
       return () => _c$6() ? (() => {
-        var _el$48 = _tmpl$11(), _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling, _el$51 = _el$50.firstChild, _el$52 = _el$51.firstChild, _el$53 = _el$52.firstChild, _el$54 = _el$52.nextSibling, _el$55 = _el$54.firstChild, _el$56 = _el$55.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$54.nextSibling, _el$59 = _el$58.firstChild, _el$60 = _el$59.nextSibling, _el$61 = _el$58.nextSibling, _el$62 = _el$61.firstChild, _el$63 = _el$62.nextSibling, _el$64 = _el$50.nextSibling, _el$65 = _el$64.nextSibling;
-        web.insert(_el$53, (() => {
-          var _c$8 = web.memo(() => {
-            var _a, _b;
-            return !!(((_a = activeMatch()) == null ? void 0 : _a.status) === "success" && ((_b = activeMatch()) == null ? void 0 : _b.isFetching));
-          });
-          return () => {
-            var _a;
-            return _c$8() ? "fetching" : (_a = activeMatch()) == null ? void 0 : _a.status;
-          };
+        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;
+        web.insert(_el$51, (() => {
+          var _c$8 = web.memo(() => !!(activeMatch()?.status === "success" && activeMatch()?.isFetching));
+          return () => _c$8() ? "fetching" : activeMatch()?.status;
         })());
-        web.insert(_el$57, () => {
-          var _a;
-          return (_a = activeMatch()) == null ? void 0 : _a.id;
-        });
-        web.insert(_el$60, (() => {
-          var _c$9 = web.memo(() => {
-            var _a;
-            return !!((_a = routerState().pendingMatches) == null ? void 0 : _a.find((d) => {
-              var _a2;
-              return d.id === ((_a2 = activeMatch()) == null ? void 0 : _a2.id);
-            }));
-          });
-          return () => _c$9() ? "Pending" : routerState().matches.find((d) => {
-            var _a;
-            return d.id === ((_a = activeMatch()) == null ? void 0 : _a.id);
-          }) ? "Active" : "Cached";
+        web.insert(_el$55, () => activeMatch()?.id);
+        web.insert(_el$58, (() => {
+          var _c$9 = web.memo(() => !!routerState().pendingMatches?.find((d) => d.id === activeMatch()?.id));
+          return () => _c$9() ? "Pending" : routerState().matches.find((d) => d.id === activeMatch()?.id) ? "Active" : "Cached";
         })());
-        web.insert(_el$63, (() => {
-          var _c$10 = web.memo(() => {
-            var _a;
-            return !!((_a = activeMatch()) == null ? void 0 : _a.updatedAt);
-          });
-          return () => {
-            var _a;
-            return _c$10() ? new Date((_a = activeMatch()) == null ? void 0 : _a.updatedAt).toLocaleTimeString() : "N/A";
-          };
+        web.insert(_el$61, (() => {
+          var _c$0 = web.memo(() => !!activeMatch()?.updatedAt);
+          return () => _c$0() ? new Date(activeMatch()?.updatedAt).toLocaleTimeString() : "N/A";
         })());
-        web.insert(_el$48, (() => {
-          var _c$11 = web.memo(() => !!activeMatchLoaderData());
-          return () => _c$11() ? [(() => {
-            var _el$66 = _tmpl$12();
-            web.effect(() => web.className(_el$66, styles().detailsHeader));
-            return _el$66;
+        web.insert(_el$46, (() => {
+          var _c$1 = web.memo(() => !!activeMatchLoaderData());
+          return () => _c$1() ? [(() => {
+            var _el$64 = _tmpl$10();
+            web.effect(() => web.className(_el$64, styles().detailsHeader));
+            return _el$64;
           })(), (() => {
-            var _el$67 = _tmpl$6();
-            web.insert(_el$67, web.createComponent(Explorer.Explorer, {
+            var _el$65 = _tmpl$6();
+            web.insert(_el$65, web.createComponent(Explorer.Explorer, {
               label: "loaderData",
               value: activeMatchLoaderData,
               defaultExpanded: {}
             }));
-            web.effect(() => web.className(_el$67, styles().detailsContent));
-            return _el$67;
+            web.effect(() => web.className(_el$65, styles().detailsContent));
+            return _el$65;
           })()] : null;
-        })(), _el$64);
-        web.insert(_el$65, web.createComponent(Explorer.Explorer, {
+        })(), _el$62);
+        web.insert(_el$63, web.createComponent(Explorer.Explorer, {
           label: "Match",
           value: activeMatchValue,
           defaultExpanded: {}
         }));
         web.effect((_p$) => {
-          var _a, _b;
-          var _v$35 = styles().thirdContainer, _v$36 = styles().detailsHeader, _v$37 = styles().matchDetails, _v$38 = styles().matchStatus((_a = activeMatch()) == null ? void 0 : _a.status, (_b = activeMatch()) == null ? void 0 : _b.isFetching), _v$39 = styles().matchDetailsInfoLabel, _v$40 = styles().matchDetailsInfo, _v$41 = styles().matchDetailsInfoLabel, _v$42 = styles().matchDetailsInfo, _v$43 = styles().matchDetailsInfoLabel, _v$44 = styles().matchDetailsInfo, _v$45 = styles().detailsHeader, _v$46 = styles().detailsContent;
-          _v$35 !== _p$.e && web.className(_el$48, _p$.e = _v$35);
-          _v$36 !== _p$.t && web.className(_el$49, _p$.t = _v$36);
-          _v$37 !== _p$.a && web.className(_el$51, _p$.a = _v$37);
-          _v$38 !== _p$.o && web.className(_el$52, _p$.o = _v$38);
-          _v$39 !== _p$.i && web.className(_el$54, _p$.i = _v$39);
-          _v$40 !== _p$.n && web.className(_el$56, _p$.n = _v$40);
-          _v$41 !== _p$.s && web.className(_el$58, _p$.s = _v$41);
-          _v$42 !== _p$.h && web.className(_el$60, _p$.h = _v$42);
-          _v$43 !== _p$.r && web.className(_el$61, _p$.r = _v$43);
-          _v$44 !== _p$.d && web.className(_el$63, _p$.d = _v$44);
-          _v$45 !== _p$.l && web.className(_el$64, _p$.l = _v$45);
-          _v$46 !== _p$.u && web.className(_el$65, _p$.u = _v$46);
+          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 && web.className(_el$46, _p$.e = _v$33);
+          _v$34 !== _p$.t && web.className(_el$47, _p$.t = _v$34);
+          _v$35 !== _p$.a && web.className(_el$49, _p$.a = _v$35);
+          _v$36 !== _p$.o && web.className(_el$50, _p$.o = _v$36);
+          _v$37 !== _p$.i && web.className(_el$52, _p$.i = _v$37);
+          _v$38 !== _p$.n && web.className(_el$54, _p$.n = _v$38);
+          _v$39 !== _p$.s && web.className(_el$56, _p$.s = _v$39);
+          _v$40 !== _p$.h && web.className(_el$58, _p$.h = _v$40);
+          _v$41 !== _p$.r && web.className(_el$59, _p$.r = _v$41);
+          _v$42 !== _p$.d && web.className(_el$61, _p$.d = _v$42);
+          _v$43 !== _p$.l && web.className(_el$62, _p$.l = _v$43);
+          _v$44 !== _p$.u && web.className(_el$63, _p$.u = _v$44);
           return _p$;
         }, {
           e: void 0,
@@ -522,14 +481,14 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
           l: void 0,
           u: void 0
         });
-        return _el$48;
+        return _el$46;
       })() : null;
     })(), null);
-    web.insert(_el$13, (() => {
+    web.insert(_el$11, (() => {
       var _c$7 = web.memo(() => !!hasSearch());
       return () => _c$7() ? (() => {
-        var _el$68 = _tmpl$13(), _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling;
-        web.insert(_el$70, web.createComponent(Explorer.Explorer, {
+        var _el$66 = _tmpl$11(), _el$67 = _el$66.firstChild, _el$68 = _el$67.nextSibling;
+        web.insert(_el$68, web.createComponent(Explorer.Explorer, {
           value: locationSearchValue,
           get defaultExpanded() {
             return Object.keys(routerState().location.search).reduce((obj, next) => {
@@ -539,39 +498,39 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
           }
         }));
         web.effect((_p$) => {
-          var _v$47 = styles().fourthContainer, _v$48 = styles().detailsHeader, _v$49 = styles().detailsContent;
-          _v$47 !== _p$.e && web.className(_el$68, _p$.e = _v$47);
-          _v$48 !== _p$.t && web.className(_el$69, _p$.t = _v$48);
-          _v$49 !== _p$.a && web.className(_el$70, _p$.a = _v$49);
+          var _v$45 = styles().fourthContainer, _v$46 = styles().detailsHeader, _v$47 = styles().detailsContent;
+          _v$45 !== _p$.e && web.className(_el$66, _p$.e = _v$45);
+          _v$46 !== _p$.t && web.className(_el$67, _p$.t = _v$46);
+          _v$47 !== _p$.a && web.className(_el$68, _p$.a = _v$47);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$68;
+        return _el$66;
       })() : null;
     })(), null);
     web.effect((_p$) => {
-      var _v$6 = styles().panelCloseBtn, _v$7 = styles().panelCloseBtnIcon, _v$8 = styles().firstContainer, _v$9 = styles().row, _v$10 = styles().routerExplorerContainer, _v$11 = styles().routerExplorer, _v$12 = styles().secondContainer, _v$13 = styles().matchesContainer, _v$14 = styles().detailsHeader, _v$15 = styles().detailsContent, _v$16 = styles().detailsHeader, _v$17 = styles().routeMatchesToggle, _v$18 = !showMatches(), _v$19 = clsx.clsx(styles().routeMatchesToggleBtn(!showMatches(), true)), _v$20 = showMatches(), _v$21 = clsx.clsx(styles().routeMatchesToggleBtn(!!showMatches(), false)), _v$22 = styles().detailsHeaderInfo, _v$23 = clsx.clsx(styles().routesContainer);
-      _v$6 !== _p$.e && web.className(_el$14, _p$.e = _v$6);
-      _v$7 !== _p$.t && web.setAttribute(_el$15, "class", _p$.t = _v$7);
-      _v$8 !== _p$.a && web.className(_el$16, _p$.a = _v$8);
-      _v$9 !== _p$.o && web.className(_el$17, _p$.o = _v$9);
-      _v$10 !== _p$.i && web.className(_el$18, _p$.i = _v$10);
-      _v$11 !== _p$.n && web.className(_el$19, _p$.n = _v$11);
-      _v$12 !== _p$.s && web.className(_el$20, _p$.s = _v$12);
-      _v$13 !== _p$.h && web.className(_el$21, _p$.h = _v$13);
-      _v$14 !== _p$.r && web.className(_el$22, _p$.r = _v$14);
-      _v$15 !== _p$.d && web.className(_el$24, _p$.d = _v$15);
-      _v$16 !== _p$.l && web.className(_el$26, _p$.l = _v$16);
-      _v$17 !== _p$.u && web.className(_el$27, _p$.u = _v$17);
-      _v$18 !== _p$.c && (_el$28.disabled = _p$.c = _v$18);
-      _v$19 !== _p$.w && web.className(_el$28, _p$.w = _v$19);
-      _v$20 !== _p$.m && (_el$29.disabled = _p$.m = _v$20);
-      _v$21 !== _p$.f && web.className(_el$29, _p$.f = _v$21);
-      _v$22 !== _p$.y && web.className(_el$30, _p$.y = _v$22);
-      _v$23 !== _p$.g && web.className(_el$31, _p$.g = _v$23);
+      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.clsx(styles().routeMatchesToggleBtn(!showMatches(), true)), _v$18 = showMatches(), _v$19 = clsx.clsx(styles().routeMatchesToggleBtn(!!showMatches(), false)), _v$20 = styles().detailsHeaderInfo, _v$21 = clsx.clsx(styles().routesContainer);
+      _v$6 !== _p$.e && web.className(_el$12, _p$.e = _v$6);
+      _v$7 !== _p$.t && web.setAttribute(_el$13, "class", _p$.t = _v$7);
+      _v$8 !== _p$.a && web.className(_el$14, _p$.a = _v$8);
+      _v$9 !== _p$.o && web.className(_el$15, _p$.o = _v$9);
+      _v$0 !== _p$.i && web.className(_el$16, _p$.i = _v$0);
+      _v$1 !== _p$.n && web.className(_el$17, _p$.n = _v$1);
+      _v$10 !== _p$.s && web.className(_el$18, _p$.s = _v$10);
+      _v$11 !== _p$.h && web.className(_el$19, _p$.h = _v$11);
+      _v$12 !== _p$.r && web.className(_el$20, _p$.r = _v$12);
+      _v$13 !== _p$.d && web.className(_el$22, _p$.d = _v$13);
+      _v$14 !== _p$.l && web.className(_el$24, _p$.l = _v$14);
+      _v$15 !== _p$.u && web.className(_el$25, _p$.u = _v$15);
+      _v$16 !== _p$.c && (_el$26.disabled = _p$.c = _v$16);
+      _v$17 !== _p$.w && web.className(_el$26, _p$.w = _v$17);
+      _v$18 !== _p$.m && (_el$27.disabled = _p$.m = _v$18);
+      _v$19 !== _p$.f && web.className(_el$27, _p$.f = _v$19);
+      _v$20 !== _p$.y && web.className(_el$28, _p$.y = _v$20);
+      _v$21 !== _p$.g && web.className(_el$29, _p$.g = _v$21);
       return _p$;
     }, {
       e: void 0,
@@ -593,7 +552,7 @@ const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel
       y: void 0,
       g: void 0
     });
-    return _el$13;
+    return _el$11;
   })();
 };
 web.delegateEvents(["click", "mousedown"]);