@tanstack/router-devtools 1.112.18 → 1.114.1

package/dist/cjs/utils.cjs

@@ -1,84 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const isServer = typeof window === "undefined";
-function getStatusColor(match) {
-  const colorMap = {
-    pending: "yellow",
-    success: "green",
-    error: "red",
-    notFound: "purple",
-    redirected: "gray"
-  };
-  return match.isFetching && match.status === "success" ? match.isFetching === "beforeLoad" ? "purple" : "blue" : colorMap[match.status];
-}
-function getRouteStatusColor(matches, route) {
-  const found = matches.find((d) => d.routeId === route.id);
-  if (!found) return "gray";
-  return getStatusColor(found);
-}
-function useIsMounted() {
-  const [isMounted, setIsMounted] = React.useState(false);
-  React[isServer ? "useEffect" : "useLayoutEffect"](() => {
-    setIsMounted(true);
-  }, []);
-  return isMounted;
-}
-const displayValue = (value) => {
-  const name = Object.getOwnPropertyNames(Object(value));
-  const newValue = typeof value === "bigint" ? `${value.toString()}n` : value;
-  try {
-    return JSON.stringify(newValue, name);
-  } catch (e) {
-    return `unable to stringify`;
-  }
-};
-function useSafeState(initialState) {
-  const isMounted = useIsMounted();
-  const [state, setState] = React.useState(initialState);
-  const safeSetState = React.useCallback(
-    (value) => {
-      scheduleMicrotask(() => {
-        if (isMounted) {
-          setState(value);
-        }
-      });
-    },
-    [isMounted]
-  );
-  return [state, safeSetState];
-}
-function scheduleMicrotask(callback) {
-  Promise.resolve().then(callback).catch(
-    (error) => setTimeout(() => {
-      throw error;
-    })
-  );
-}
-function multiSortBy(arr, accessors = [(d) => d]) {
-  return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => {
-    for (const accessor of accessors) {
-      const ao = accessor(a);
-      const bo = accessor(b);
-      if (typeof ao === "undefined") {
-        if (typeof bo === "undefined") {
-          continue;
-        }
-        return 1;
-      }
-      if (ao === bo) {
-        continue;
-      }
-      return ao > bo ? 1 : -1;
-    }
-    return ai - bi;
-  }).map(([d]) => d);
-}
-exports.displayValue = displayValue;
-exports.getRouteStatusColor = getRouteStatusColor;
-exports.getStatusColor = getStatusColor;
-exports.isServer = isServer;
-exports.multiSortBy = multiSortBy;
-exports.useIsMounted = useIsMounted;
-exports.useSafeState = useSafeState;
-//# sourceMappingURL=utils.cjs.map

package/dist/cjs/utils.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\nimport type {\n  AnyRootRoute,\n  AnyRoute,\n  AnyRouteMatch,\n} from '@tanstack/react-router'\n\nimport type { Theme } from './theme'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n  ? React.DetailedHTMLProps<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >\n  : T extends 'input'\n    ? React.DetailedHTMLProps<\n        React.InputHTMLAttributes<HTMLInputElement>,\n        HTMLInputElement\n      >\n    : T extends 'select'\n      ? React.DetailedHTMLProps<\n          React.SelectHTMLAttributes<HTMLSelectElement>,\n          HTMLSelectElement\n        >\n      : T extends keyof HTMLElementTagNameMap\n        ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n        : never\n\nexport function getStatusColor(match: AnyRouteMatch) {\n  const colorMap = {\n    pending: 'yellow',\n    success: 'green',\n    error: 'red',\n    notFound: 'purple',\n    redirected: 'gray',\n  } as const\n\n  return match.isFetching && match.status === 'success'\n    ? match.isFetching === 'beforeLoad'\n      ? 'purple'\n      : 'blue'\n    : colorMap[match.status]\n}\n\nexport function getRouteStatusColor(\n  matches: Array<AnyRouteMatch>,\n  route: AnyRoute | AnyRootRoute,\n) {\n  const found = matches.find((d) => d.routeId === route.id)\n  if (!found) return 'gray'\n  return getStatusColor(found)\n}\n\ntype Styles =\n  | React.CSSProperties\n  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n  type: T,\n  newStyles: Styles,\n  queries: Record<string, Styles> = {},\n) {\n  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n    ({ style, ...rest }, ref) => {\n      const theme = useTheme()\n\n      const mediaStyles = Object.entries(queries).reduce(\n        (current, [key, value]) => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          return useMediaQuery(key)\n            ? {\n                ...current,\n                ...(typeof value === 'function' ? value(rest, theme) : value),\n              }\n            : current\n        },\n        {},\n      )\n\n      return React.createElement(type, {\n        ...rest,\n        style: {\n          ...(typeof newStyles === 'function'\n            ? newStyles(rest, theme)\n            : newStyles),\n          ...style,\n          ...mediaStyles,\n        },\n        ref,\n      })\n    },\n  )\n}\n\nexport function useIsMounted() {\n  const [isMounted, setIsMounted] = React.useState(false)\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    setIsMounted(true)\n  }, [])\n\n  return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n  const name = Object.getOwnPropertyNames(Object(value))\n  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n  try {\n    return JSON.stringify(newValue, name)\n  } catch (e) {\n    return `unable to stringify`\n  }\n}\n\n/**\n * This hook is a safe useState version which schedules state updates in microtasks\n * to prevent updating a component state while React is rendering different components\n * or when the component is not mounted anymore.\n */\nexport function useSafeState<T>(initialState: T): [T, (value: T) => void] {\n  const isMounted = useIsMounted()\n  const [state, setState] = React.useState(initialState)\n\n  const safeSetState = React.useCallback(\n    (value: T) => {\n      scheduleMicrotask(() => {\n        if (isMounted) {\n          setState(value)\n        }\n      })\n    },\n    [isMounted],\n  )\n\n  return [state, safeSetState]\n}\n\n/**\n * Schedules a microtask.\n * This can be useful to schedule state updates after rendering.\n */\nfunction scheduleMicrotask(callback: () => void) {\n  Promise.resolve()\n    .then(callback)\n    .catch((error) =>\n      setTimeout(() => {\n        throw error\n      }),\n    )\n}\n\nexport function multiSortBy<T>(\n  arr: Array<T>,\n  accessors: Array<(item: T) => any> = [(d) => d],\n): Array<T> {\n  return arr\n    .map((d, i) => [d, i] as const)\n    .sort(([a, ai], [b, bi]) => {\n      for (const accessor of accessors) {\n        const ao = accessor(a)\n        const bo = accessor(b)\n\n        if (typeof ao === 'undefined') {\n          if (typeof bo === 'undefined') {\n            continue\n          }\n          return 1\n        }\n\n        if (ao === bo) {\n          continue\n        }\n\n        return ao > bo ? 1 : -1\n      }\n\n      return ai - bi\n    })\n    .map(([d]) => d)\n}\n"],"names":[],"mappings":";;;AAWa,MAAA,WAAW,OAAO,WAAW;AAqBnC,SAAS,eAAe,OAAsB;AACnD,QAAM,WAAW;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAEA,SAAO,MAAM,cAAc,MAAM,WAAW,YACxC,MAAM,eAAe,eACnB,WACA,SACF,SAAS,MAAM,MAAM;AAC3B;AAEgB,SAAA,oBACd,SACA,OACA;AACM,QAAA,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,MAAM,EAAE;AACpD,MAAA,CAAC,MAAc,QAAA;AACnB,SAAO,eAAe,KAAK;AAC7B;AA2CO,SAAS,eAAe;AAC7B,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AAEtD,QAAM,WAAW,cAAc,iBAAiB,EAAE,MAAM;AACtD,iBAAa,IAAI;AAAA,EACnB,GAAG,EAAE;AAEE,SAAA;AACT;AAMa,MAAA,eAAe,CAAC,UAAmB;AAC9C,QAAM,OAAO,OAAO,oBAAoB,OAAO,KAAK,CAAC;AAC/C,QAAA,WAAW,OAAO,UAAU,WAAW,GAAG,MAAM,SAAA,CAAU,MAAM;AAClE,MAAA;AACK,WAAA,KAAK,UAAU,UAAU,IAAI;AAAA,WAC7B,GAAG;AACH,WAAA;AAAA,EAAA;AAEX;AAOO,SAAS,aAAgB,cAA0C;AACxE,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,YAAY;AAErD,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,UAAa;AACZ,wBAAkB,MAAM;AACtB,YAAI,WAAW;AACb,mBAAS,KAAK;AAAA,QAAA;AAAA,MAChB,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEO,SAAA,CAAC,OAAO,YAAY;AAC7B;AAMA,SAAS,kBAAkB,UAAsB;AAC/C,UAAQ,QAAQ,EACb,KAAK,QAAQ,EACb;AAAA,IAAM,CAAC,UACN,WAAW,MAAM;AACT,YAAA;AAAA,IACP,CAAA;AAAA,EACH;AACJ;AAEO,SAAS,YACd,KACA,YAAqC,CAAC,CAAC,MAAM,CAAC,GACpC;AACV,SAAO,IACJ,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAU,EAC7B,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,MAAM;AAC1B,eAAW,YAAY,WAAW;AAC1B,YAAA,KAAK,SAAS,CAAC;AACf,YAAA,KAAK,SAAS,CAAC;AAEjB,UAAA,OAAO,OAAO,aAAa;AACzB,YAAA,OAAO,OAAO,aAAa;AAC7B;AAAA,QAAA;AAEK,eAAA;AAAA,MAAA;AAGT,UAAI,OAAO,IAAI;AACb;AAAA,MAAA;AAGK,aAAA,KAAK,KAAK,IAAI;AAAA,IAAA;AAGvB,WAAO,KAAK;AAAA,EACb,CAAA,EACA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACnB;;;;;;;;"}

package/dist/cjs/utils.d.cts

@@ -1,23 +0,0 @@
-import { default as React } from 'react';
-import { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router';
-import { Theme } from './theme.cjs';
-export declare const isServer: boolean;
-type StyledComponent<T> = T extends 'button' ? React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> : T extends 'input' ? React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : T extends 'select' ? React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? React.HTMLAttributes<HTMLElementTagNameMap[T]> : never;
-export declare function getStatusColor(match: AnyRouteMatch): "yellow" | "green" | "red" | "purple" | "gray" | "blue";
-export declare function getRouteStatusColor(matches: Array<AnyRouteMatch>, route: AnyRoute | AnyRootRoute): "yellow" | "green" | "red" | "purple" | "gray" | "blue";
-type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties);
-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]>>;
-export declare function useIsMounted(): boolean;
-/**
- * Displays a string regardless the type of the data
- * @param {unknown} value Value to be stringified
- */
-export declare const displayValue: (value: unknown) => string;
-/**
- * This hook is a safe useState version which schedules state updates in microtasks
- * to prevent updating a component state while React is rendering different components
- * or when the component is not mounted anymore.
- */
-export declare function useSafeState<T>(initialState: T): [T, (value: T) => void];
-export declare function multiSortBy<T>(arr: Array<T>, accessors?: Array<(item: T) => any>): Array<T>;
-export {};

package/dist/esm/AgeTicker.d.ts

@@ -1,5 +0,0 @@
-import { AnyRouteMatch, AnyRouter } from '@tanstack/react-router';
-export declare function AgeTicker({ match, router, }: {
-    match?: AnyRouteMatch;
-    router: AnyRouter;
-}): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/AgeTicker.js

@@ -1,58 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import React__default from "react";
-import { useStyles } from "./useStyles.js";
-function formatTime(ms) {
-  const units = ["s", "min", "h", "d"];
-  const values = [ms / 1e3, ms / 6e4, ms / 36e5, ms / 864e5];
-  let chosenUnitIndex = 0;
-  for (let i = 1; i < values.length; i++) {
-    if (values[i] < 1) break;
-    chosenUnitIndex = i;
-  }
-  const formatter = new Intl.NumberFormat(navigator.language, {
-    compactDisplay: "short",
-    notation: "compact",
-    maximumFractionDigits: 0
-  });
-  return formatter.format(values[chosenUnitIndex]) + units[chosenUnitIndex];
-}
-function AgeTicker({
-  match,
-  router
-}) {
-  const styles = useStyles();
-  const rerender = React__default.useReducer(
-    () => ({}),
-    () => ({})
-  )[1];
-  React__default.useEffect(() => {
-    const interval = setInterval(() => {
-      rerender();
-    }, 1e3);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [rerender]);
-  if (!match) {
-    return null;
-  }
-  const route = router.looseRoutesById[match.routeId];
-  if (!route.options.loader) {
-    return null;
-  }
-  const age = Date.now() - match.updatedAt;
-  const staleTime = route.options.staleTime ?? router.options.defaultStaleTime ?? 0;
-  const gcTime = route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1e3;
-  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.ageTicker(age > staleTime)), children: [
-    /* @__PURE__ */ jsx("div", { children: formatTime(age) }),
-    /* @__PURE__ */ jsx("div", { children: "/" }),
-    /* @__PURE__ */ jsx("div", { children: formatTime(staleTime) }),
-    /* @__PURE__ */ jsx("div", { children: "/" }),
-    /* @__PURE__ */ jsx("div", { children: formatTime(gcTime) })
-  ] });
-}
-export {
-  AgeTicker
-};
-//# sourceMappingURL=AgeTicker.js.map

package/dist/esm/AgeTicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AgeTicker.js","sources":["../../src/AgeTicker.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\nimport React from 'react'\nimport { useStyles } from './useStyles'\nimport type { AnyRouteMatch, AnyRouter } from '@tanstack/react-router'\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: AnyRouter\n}) {\n  const styles = useStyles()\n  const rerender = React.useReducer(\n    () => ({}),\n    () => ({}),\n  )[1]\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      rerender()\n    }, 1000)\n\n    return () => {\n      clearInterval(interval)\n    }\n  }, [rerender])\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 className={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":["React","cx"],"mappings":";;;;AAKA,SAAS,WAAW,IAAY;AAC9B,QAAM,QAAQ,CAAC,KAAK,OAAO,KAAK,GAAG;AAC7B,QAAA,SAAS,CAAC,KAAK,KAAM,KAAK,KAAO,KAAK,MAAS,KAAK,KAAQ;AAElE,MAAI,kBAAkB;AACtB,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AAClC,QAAA,OAAO,CAAC,IAAK,EAAG;AACF,sBAAA;AAAA,EAAA;AAGpB,QAAM,YAAY,IAAI,KAAK,aAAa,UAAU,UAAU;AAAA,IAC1D,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,uBAAuB;AAAA,EAAA,CACxB;AAED,SAAO,UAAU,OAAO,OAAO,eAAe,CAAE,IAAI,MAAM,eAAe;AAC3E;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AACF,GAGG;AACD,QAAM,SAAS,UAAU;AACzB,QAAM,WAAWA,eAAM;AAAA,IACrB,OAAO;IACP,OAAO,CAAC;AAAA,IACR,CAAC;AAEHA,iBAAM,UAAU,MAAM;AACd,UAAA,WAAW,YAAY,MAAM;AACxB,eAAA;AAAA,OACR,GAAI;AAEP,WAAO,MAAM;AACX,oBAAc,QAAQ;AAAA,IACxB;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,MAAI,CAAC,OAAO;AACH,WAAA;AAAA,EAAA;AAGT,QAAM,QAAQ,OAAO,gBAAgB,MAAM,OAAO;AAE9C,MAAA,CAAC,MAAM,QAAQ,QAAQ;AAClB,WAAA;AAAA,EAAA;AAGT,QAAM,MAAM,KAAK,IAAI,IAAI,MAAM;AAC/B,QAAM,YACJ,MAAM,QAAQ,aAAa,OAAO,QAAQ,oBAAoB;AAC1D,QAAA,SACJ,MAAM,QAAQ,UAAU,OAAO,QAAQ,iBAAiB,KAAK,KAAK;AAGlE,SAAA,qBAAC,SAAI,WAAWC,KAAG,OAAO,UAAU,MAAM,SAAS,CAAC,GAClD,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAK,UAAW,WAAA,GAAG,EAAE,CAAA;AAAA,IACtB,oBAAC,SAAI,UAAC,IAAA,CAAA;AAAA,IACL,oBAAA,OAAA,EAAK,UAAW,WAAA,SAAS,EAAE,CAAA;AAAA,IAC5B,oBAAC,SAAI,UAAC,IAAA,CAAA;AAAA,IACL,oBAAA,OAAA,EAAK,UAAW,WAAA,MAAM,EAAE,CAAA;AAAA,EAAA,GAC3B;AAEJ;"}

package/dist/esm/BaseTanStackRouterDevtoolsPanel.d.ts

@@ -1,3 +0,0 @@
-import { default as React } from 'react';
-import { DevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel.js';
-export declare const BaseTanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/BaseTanStackRouterDevtoolsPanel.js

@@ -1,421 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React__default from "react";
-import { clsx } from "clsx";
-import { useRouter, useRouterState, invariant, rootRouteId, trimPath } from "@tanstack/react-router";
-import { useDevtoolsOnClose } from "./context.js";
-import { useStyles } from "./useStyles.js";
-import useLocalStorage from "./useLocalStorage.js";
-import Explorer from "./Explorer.js";
-import { multiSortBy, getStatusColor, getRouteStatusColor } from "./utils.js";
-import { AgeTicker } from "./AgeTicker.js";
-function Logo(props) {
-  const { className, ...rest } = props;
-  const styles = useStyles();
-  return /* @__PURE__ */ jsxs("button", { ...rest, className: clsx(styles.logo, className), children: [
-    /* @__PURE__ */ jsx("div", { className: styles.tanstackLogo, children: "TANSTACK" }),
-    /* @__PURE__ */ jsx("div", { className: styles.routerLogo, children: "React Router v1" })
-  ] });
-}
-function RouteComp({
-  router,
-  route,
-  isRoot,
-  activeId,
-  setActiveId
-}) {
-  var _a;
-  const routerState = useRouterState({
-    router
-  });
-  const styles = useStyles();
-  const matches = routerState.pendingMatches || routerState.matches;
-  const match = routerState.matches.find((d) => d.routeId === route.id);
-  const param = React__default.useMemo(() => {
-    try {
-      if (match == null ? void 0 : match.params) {
-        const p = match.params;
-        const r = route.path || trimPath(route.id);
-        if (r.startsWith("$")) {
-          const trimmed = r.slice(1);
-          if (p[trimmed]) {
-            return `(${p[trimmed]})`;
-          }
-        }
-      }
-      return "";
-    } catch (error) {
-      return "";
-    }
-  }, [match, route]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "button",
-        "aria-label": `Open match details for ${route.id}`,
-        onClick: () => {
-          if (match) {
-            setActiveId(activeId === route.id ? "" : route.id);
-          }
-        },
-        className: clsx(
-          styles.routesRowContainer(route.id === activeId, !!match)
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                styles.matchIndicator(getRouteStatusColor(matches, route))
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: clsx(styles.routesRow(!!match)), children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("code", { className: styles.code, children: [
-                isRoot ? rootRouteId : route.path || trimPath(route.id),
-                " "
-              ] }),
-              /* @__PURE__ */ jsx("code", { className: styles.routeParamInfo, children: param })
-            ] }),
-            /* @__PURE__ */ jsx(AgeTicker, { match, router })
-          ] })
-        ]
-      }
-    ),
-    ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx("div", { className: styles.nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
-      return a.rank - b.rank;
-    }).map((r) => /* @__PURE__ */ jsx(
-      RouteComp,
-      {
-        router,
-        route: r,
-        activeId,
-        setActiveId
-      },
-      r.id
-    )) }) : null
-  ] });
-}
-const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseTanStackRouterDevtoolsPanel2(props, ref) {
-  var _a, _b;
-  const {
-    isOpen = true,
-    setIsOpen,
-    handleDragStart,
-    router: userRouter,
-    shadowDOMTarget,
-    ...panelProps
-  } = props;
-  const { onCloseClick } = useDevtoolsOnClose();
-  const styles = useStyles();
-  const { className, ...otherPanelProps } = panelProps;
-  const contextRouter = useRouter({ warn: false });
-  const router = userRouter ?? contextRouter;
-  const routerState = useRouterState({
-    router
-  });
-  invariant(
-    router,
-    "No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually."
-  );
-  const [showMatches, setShowMatches] = useLocalStorage(
-    "tanstackRouterDevtoolsShowMatches",
-    true
-  );
-  const [activeId, setActiveId] = useLocalStorage(
-    "tanstackRouterDevtoolsActiveRouteId",
-    ""
-  );
-  const activeMatch = React__default.useMemo(() => {
-    const matches = [
-      ...routerState.pendingMatches ?? [],
-      ...routerState.matches,
-      ...routerState.cachedMatches
-    ];
-    return matches.find((d) => d.routeId === activeId || d.id === activeId);
-  }, [
-    activeId,
-    routerState.cachedMatches,
-    routerState.matches,
-    routerState.pendingMatches
-  ]);
-  const hasSearch = Object.keys(routerState.location.search).length;
-  const explorerState = {
-    ...router,
-    state: router.state
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: clsx(
-        styles.devtoolsPanel,
-        "TanStackRouterDevtoolsPanel",
-        className
-      ),
-      ...otherPanelProps,
-      children: [
-        handleDragStart ? /* @__PURE__ */ jsx("div", { className: styles.dragHandle, onMouseDown: handleDragStart }) : null,
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: styles.panelCloseBtn,
-            onClick: (e) => {
-              setIsOpen(false);
-              onCloseClick(e);
-            },
-            children: /* @__PURE__ */ jsx(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "10",
-                height: "6",
-                fill: "none",
-                viewBox: "0 0 10 6",
-                className: styles.panelCloseBtnIcon,
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    stroke: "currentColor",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "1.667",
-                    d: "M1 1l4 4 4-4"
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: styles.firstContainer, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.row, children: /* @__PURE__ */ jsx(
-            Logo,
-            {
-              "aria-hidden": true,
-              onClick: (e) => {
-                setIsOpen(false);
-                onCloseClick(e);
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: styles.routerExplorerContainer, children: /* @__PURE__ */ jsx("div", { className: styles.routerExplorer, children: /* @__PURE__ */ jsx(
-            Explorer,
-            {
-              label: "Router",
-              value: Object.fromEntries(
-                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])
-                )
-              ),
-              defaultExpanded: {
-                state: {},
-                context: {},
-                options: {}
-              },
-              filterSubEntries: (subEntries) => {
-                return subEntries.filter((d) => typeof d.value !== "function");
-              }
-            }
-          ) }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles.secondContainer, children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.matchesContainer, children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
-              /* @__PURE__ */ jsx("span", { children: "Pathname" }),
-              routerState.location.maskedLocation ? /* @__PURE__ */ jsx("div", { className: styles.maskedBadgeContainer, children: /* @__PURE__ */ jsx("span", { className: styles.maskedBadge, children: "masked" }) }) : null
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: styles.detailsContent, children: [
-              /* @__PURE__ */ jsx("code", { children: routerState.location.pathname }),
-              routerState.location.maskedLocation ? /* @__PURE__ */ jsx("code", { className: styles.maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.routeMatchesToggle, children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setShowMatches(false);
-                    },
-                    disabled: !showMatches,
-                    className: clsx(styles.routeMatchesToggleBtn(!showMatches, true)),
-                    children: "Routes"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setShowMatches(true);
-                    },
-                    disabled: showMatches,
-                    className: clsx(
-                      styles.routeMatchesToggleBtn(!!showMatches, false)
-                    ),
-                    children: "Matches"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: styles.detailsHeaderInfo, children: /* @__PURE__ */ jsx("div", { children: "age / staleTime / gcTime" }) })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: clsx(styles.routesContainer), children: !showMatches ? /* @__PURE__ */ jsx(
-              RouteComp,
-              {
-                router,
-                route: router.routeTree,
-                isRoot: true,
-                activeId,
-                setActiveId
-              }
-            ) : /* @__PURE__ */ jsx("div", { children: (((_a = routerState.pendingMatches) == null ? void 0 : _a.length) ? routerState.pendingMatches : routerState.matches).map((match, i) => {
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "button",
-                  "aria-label": `Open match details for ${match.id}`,
-                  onClick: () => setActiveId(activeId === match.id ? "" : match.id),
-                  className: clsx(styles.matchRow(match === activeMatch)),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: clsx(
-                          styles.matchIndicator(getStatusColor(match))
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "code",
-                      {
-                        className: styles.matchID,
-                        children: `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(AgeTicker, { match, router })
-                  ]
-                },
-                match.id || i
-              );
-            }) }) })
-          ] }),
-          routerState.cachedMatches.length ? /* @__PURE__ */ jsxs("div", { className: styles.cachedMatchesContainer, children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
-              /* @__PURE__ */ jsx("div", { children: "Cached Matches" }),
-              /* @__PURE__ */ jsx("div", { className: styles.detailsHeaderInfo, children: "age / staleTime / gcTime" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { children: routerState.cachedMatches.map((match) => {
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "button",
-                  "aria-label": `Open match details for ${match.id}`,
-                  onClick: () => setActiveId(activeId === match.id ? "" : match.id),
-                  className: clsx(styles.matchRow(match === activeMatch)),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: clsx(
-                          styles.matchIndicator(getStatusColor(match))
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("code", { className: styles.matchID, children: `${match.id}` }),
-                    /* @__PURE__ */ jsx(AgeTicker, { match, router })
-                  ]
-                },
-                match.id
-              );
-            }) })
-          ] }) : null
-        ] }),
-        activeMatch ? /* @__PURE__ */ jsxs("div", { className: styles.thirdContainer, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Match Details" }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.matchDetails, children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: styles.matchStatus(
-                  activeMatch.status,
-                  activeMatch.isFetching
-                ),
-                children: /* @__PURE__ */ jsx("div", { children: activeMatch.status === "success" && activeMatch.isFetching ? "fetching" : activeMatch.status })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
-              /* @__PURE__ */ jsx("div", { children: "ID:" }),
-              /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: /* @__PURE__ */ jsx("code", { children: activeMatch.id }) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
-              /* @__PURE__ */ jsx("div", { children: "State:" }),
-              /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: ((_b = routerState.pendingMatches) == null ? void 0 : _b.find(
-                (d) => d.id === activeMatch.id
-              )) ? "Pending" : routerState.matches.find((d) => d.id === activeMatch.id) ? "Active" : "Cached" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
-              /* @__PURE__ */ jsx("div", { children: "Last Updated:" }),
-              /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : "N/A" })
-            ] })
-          ] }) }),
-          activeMatch.loaderData ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Loader Data" }),
-            /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(
-              Explorer,
-              {
-                label: "loaderData",
-                value: activeMatch.loaderData,
-                defaultExpanded: {}
-              }
-            ) })
-          ] }) : null,
-          /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Explorer" }),
-          /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(Explorer, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
-        ] }) : null,
-        hasSearch ? /* @__PURE__ */ jsxs("div", { className: styles.fourthContainer, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Search Params" }),
-          /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(
-            Explorer,
-            {
-              value: routerState.location.search,
-              defaultExpanded: Object.keys(routerState.location.search).reduce(
-                (obj, next) => {
-                  obj[next] = {};
-                  return obj;
-                },
-                {}
-              )
-            }
-          ) })
-        ] }) : null
-      ]
-    }
-  );
-});
-export {
-  BaseTanStackRouterDevtoolsPanel
-};
-//# sourceMappingURL=BaseTanStackRouterDevtoolsPanel.js.map