@tanstack/router-devtools 1.111.11 → 1.112.4

package/dist/esm/devtools.js

@@ -1,1195 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default from "react";
-import { useRouter, useRouterState, invariant, rootRouteId, trimPath } from "@tanstack/react-router";
-import * as goober from "goober";
-import { clsx } from "clsx";
-import useLocalStorage from "./useLocalStorage.js";
-import { useSafeState, useIsMounted, multiSortBy, getStatusColor, getRouteStatusColor } from "./utils.js";
-import Explorer from "./Explorer.js";
-import { tokens } from "./tokens.js";
-import { TanStackLogo } from "./logo.js";
-import { ShadowDomTargetContext, DevtoolsOnCloseContext, useDevtoolsOnClose } from "./context.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 TanStackRouterDevtools(props) {
-  const { shadowDOMTarget } = props;
-  return /* @__PURE__ */ jsx(ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsx(FloatingTanStackRouterDevtools, { ...props }) });
-}
-function FloatingTanStackRouterDevtools({
-  initialIsOpen,
-  panelProps = {},
-  closeButtonProps = {},
-  toggleButtonProps = {},
-  position = "bottom-left",
-  containerElement: Container = "footer",
-  router,
-  shadowDOMTarget
-}) {
-  const [rootEl, setRootEl] = React__default.useState();
-  const panelRef = React__default.useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage(
-    "tanstackRouterDevtoolsOpen",
-    initialIsOpen
-  );
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage(
-    "tanstackRouterDevtoolsHeight",
-    null
-  );
-  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
-  const [isResizing, setIsResizing] = useSafeState(false);
-  const isMounted = useIsMounted();
-  const styles = useStyles();
-  const handleDragStart = (panelElement, startEvent) => {
-    if (startEvent.button !== 0) return;
-    setIsResizing(true);
-    const dragInfo = {
-      originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
-      pageY: startEvent.pageY
-    };
-    const run = (moveEvent) => {
-      const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = dragInfo.originalHeight + delta;
-      setDevtoolsHeight(newHeight);
-      if (newHeight < 70) {
-        setIsOpen(false);
-      } else {
-        setIsOpen(true);
-      }
-    };
-    const unsub = () => {
-      setIsResizing(false);
-      document.removeEventListener("mousemove", run);
-      document.removeEventListener("mouseUp", unsub);
-    };
-    document.addEventListener("mousemove", run);
-    document.addEventListener("mouseup", unsub);
-  };
-  const isButtonClosed = isOpen ?? false;
-  React__default.useEffect(() => {
-    setIsResolvedOpen(isOpen ?? false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
-  React__default.useEffect(() => {
-    var _a;
-    if (isResolvedOpen) {
-      const previousValue = (_a = rootEl == null ? void 0 : rootEl.parentElement) == null ? void 0 : _a.style.paddingBottom;
-      const run = () => {
-        var _a2;
-        const containerHeight = (_a2 = panelRef.current) == null ? void 0 : _a2.getBoundingClientRect().height;
-        if (rootEl == null ? void 0 : rootEl.parentElement) {
-          rootEl.parentElement.style.paddingBottom = `${containerHeight}px`;
-        }
-      };
-      run();
-      if (typeof window !== "undefined") {
-        window.addEventListener("resize", run);
-        return () => {
-          window.removeEventListener("resize", run);
-          if ((rootEl == null ? void 0 : rootEl.parentElement) && typeof previousValue === "string") {
-            rootEl.parentElement.style.paddingBottom = previousValue;
-          }
-        };
-      }
-    }
-    return;
-  }, [isResolvedOpen, rootEl == null ? void 0 : rootEl.parentElement]);
-  React__default.useEffect(() => {
-    if (rootEl) {
-      const el = rootEl;
-      const fontSize = getComputedStyle(el).fontSize;
-      el.style.setProperty("--tsrd-font-size", fontSize);
-    }
-  }, [rootEl]);
-  const { style: panelStyle = {}, ...otherPanelProps } = panelProps;
-  const {
-    style: closeButtonStyle = {},
-    onClick: onCloseClick,
-    ...otherCloseButtonProps
-  } = closeButtonProps;
-  const {
-    onClick: onToggleClick,
-    className: toggleButtonClassName,
-    ...otherToggleButtonProps
-  } = toggleButtonProps;
-  if (!isMounted) return null;
-  const resolvedHeight = devtoolsHeight ?? 500;
-  return /* @__PURE__ */ jsxs(Container, { ref: setRootEl, className: "TanStackRouterDevtools", children: [
-    /* @__PURE__ */ jsx(
-      DevtoolsOnCloseContext.Provider,
-      {
-        value: {
-          onCloseClick: onCloseClick ?? (() => {
-          })
-        },
-        children: /* @__PURE__ */ jsx(
-          BaseTanStackRouterDevtoolsPanel,
-          {
-            ref: panelRef,
-            ...otherPanelProps,
-            router,
-            className: clsx(
-              styles.devtoolsPanelContainer,
-              styles.devtoolsPanelContainerVisibility(!!isOpen),
-              styles.devtoolsPanelContainerResizing(isResizing),
-              styles.devtoolsPanelContainerAnimation(
-                isResolvedOpen,
-                resolvedHeight + 16
-              )
-            ),
-            style: {
-              height: resolvedHeight,
-              ...panelStyle
-            },
-            isOpen: isResolvedOpen,
-            setIsOpen,
-            handleDragStart: (e) => handleDragStart(panelRef.current, e),
-            shadowDOMTarget
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        ...otherToggleButtonProps,
-        "aria-label": "Open TanStack Router Devtools",
-        onClick: (e) => {
-          setIsOpen(true);
-          onToggleClick && onToggleClick(e);
-        },
-        className: clsx(
-          styles.mainCloseBtn,
-          styles.mainCloseBtnPosition(position),
-          styles.mainCloseBtnAnimation(!isButtonClosed),
-          toggleButtonClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.mainCloseBtnIconContainer, children: [
-            /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnIconOuter, children: /* @__PURE__ */ jsx(TanStackLogo, {}) }),
-            /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnIconInner, children: /* @__PURE__ */ jsx(TanStackLogo, {}) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnDivider, children: "-" }),
-          /* @__PURE__ */ jsx("div", { className: styles.routerLogoCloseButton, children: "TanStack Router" })
-        ]
-      }
-    )
-  ] });
-}
-const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackRouterDevtoolsPanel2(props, ref) {
-  const { shadowDOMTarget } = props;
-  return /* @__PURE__ */ jsx(ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsx(
-    DevtoolsOnCloseContext.Provider,
-    {
-      value: {
-        onCloseClick: () => {
-        }
-      },
-      children: /* @__PURE__ */ jsx(BaseTanStackRouterDevtoolsPanel, { ref, ...props })
-    }
-  ) });
-});
-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
-      ]
-    }
-  );
-});
-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) })
-  ] });
-}
-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];
-}
-const stylesFactory = (shadowDOMTarget) => {
-  const { colors, font, size, alpha, border } = tokens;
-  const { fontFamily, lineHeight, size: fontSize } = font;
-  const css = shadowDOMTarget ? goober.css.bind({ target: shadowDOMTarget }) : goober.css;
-  return {
-    devtoolsPanelContainer: css`
-      direction: ltr;
-      position: fixed;
-      bottom: 0;
-      right: 0;
-      z-index: 99999;
-      width: 100%;
-      max-height: 90%;
-      border-top: 1px solid ${colors.gray[700]};
-      transform-origin: top;
-    `,
-    devtoolsPanelContainerVisibility: (isOpen) => {
-      return css`
-        visibility: ${isOpen ? "visible" : "hidden"};
-      `;
-    },
-    devtoolsPanelContainerResizing: (isResizing) => {
-      if (isResizing) {
-        return css`
-          transition: none;
-        `;
-      }
-      return css`
-        transition: all 0.4s ease;
-      `;
-    },
-    devtoolsPanelContainerAnimation: (isOpen, height) => {
-      if (isOpen) {
-        return css`
-          pointer-events: auto;
-          transform: translateY(0);
-        `;
-      }
-      return css`
-        pointer-events: none;
-        transform: translateY(${height}px);
-      `;
-    },
-    logo: css`
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      background-color: transparent;
-      border: none;
-      font-family: ${fontFamily.sans};
-      gap: ${tokens.size[0.5]};
-      padding: 0px;
-      &:hover {
-        opacity: 0.7;
-      }
-      &:focus-visible {
-        outline-offset: 4px;
-        border-radius: ${border.radius.xs};
-        outline: 2px solid ${colors.blue[800]};
-      }
-    `,
-    tanstackLogo: css`
-      font-size: ${font.size.md};
-      font-weight: ${font.weight.bold};
-      line-height: ${font.lineHeight.xs};
-      white-space: nowrap;
-      color: ${colors.gray[300]};
-    `,
-    routerLogo: css`
-      font-weight: ${font.weight.semibold};
-      font-size: ${font.size.xs};
-      background: linear-gradient(to right, #84cc16, #10b981);
-      background-clip: text;
-      -webkit-background-clip: text;
-      line-height: 1;
-      -webkit-text-fill-color: transparent;
-      white-space: nowrap;
-    `,
-    devtoolsPanel: css`
-      display: flex;
-      font-size: ${fontSize.sm};
-      font-family: ${fontFamily.sans};
-      background-color: ${colors.darkGray[700]};
-      color: ${colors.gray[300]};
-
-      @media (max-width: 700px) {
-        flex-direction: column;
-      }
-      @media (max-width: 600px) {
-        font-size: ${fontSize.xs};
-      }
-    `,
-    dragHandle: css`
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 4px;
-      cursor: row-resize;
-      z-index: 100000;
-      &:hover {
-        background-color: ${colors.purple[400]}${alpha[90]};
-      }
-    `,
-    firstContainer: css`
-      flex: 1 1 500px;
-      min-height: 40%;
-      max-height: 100%;
-      overflow: auto;
-      border-right: 1px solid ${colors.gray[700]};
-      display: flex;
-      flex-direction: column;
-    `,
-    routerExplorerContainer: css`
-      overflow-y: auto;
-      flex: 1;
-    `,
-    routerExplorer: css`
-      padding: ${tokens.size[2]};
-    `,
-    row: css`
-      display: flex;
-      align-items: center;
-      padding: ${tokens.size[2]} ${tokens.size[2.5]};
-      gap: ${tokens.size[2.5]};
-      border-bottom: ${colors.darkGray[500]} 1px solid;
-      align-items: center;
-    `,
-    detailsHeader: css`
-      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      background-color: ${colors.darkGray[600]};
-      padding: 0px ${tokens.size[2]};
-      font-weight: ${font.weight.medium};
-      font-size: ${font.size.xs};
-      min-height: ${tokens.size[8]};
-      line-height: ${font.lineHeight.xs};
-      text-align: left;
-      display: flex;
-      align-items: center;
-    `,
-    maskedBadge: css`
-      background: ${colors.yellow[900]}${alpha[70]};
-      color: ${colors.yellow[300]};
-      display: inline-block;
-      padding: ${tokens.size[0]} ${tokens.size[2.5]};
-      border-radius: ${border.radius.full};
-      font-size: ${font.size.xs};
-      font-weight: ${font.weight.normal};
-      border: 1px solid ${colors.yellow[300]};
-    `,
-    maskedLocation: css`
-      color: ${colors.yellow[300]};
-    `,
-    detailsContent: css`
-      padding: ${tokens.size[1.5]} ${tokens.size[2]};
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: ${font.size.xs};
-    `,
-    routeMatchesToggle: css`
-      display: flex;
-      align-items: center;
-      border: 1px solid ${colors.gray[500]};
-      border-radius: ${border.radius.sm};
-      overflow: hidden;
-    `,
-    routeMatchesToggleBtn: (active, showBorder) => {
-      const base = css`
-        appearance: none;
-        border: none;
-        font-size: 12px;
-        padding: 4px 8px;
-        background: transparent;
-        cursor: pointer;
-        font-family: ${fontFamily.sans};
-        font-weight: ${font.weight.medium};
-      `;
-      const classes = [base];
-      if (active) {
-        const activeStyles = css`
-          background: ${colors.darkGray[400]};
-          color: ${colors.gray[300]};
-        `;
-        classes.push(activeStyles);
-      } else {
-        const inactiveStyles = css`
-          color: ${colors.gray[500]};
-          background: ${colors.darkGray[800]}${alpha[20]};
-        `;
-        classes.push(inactiveStyles);
-      }
-      if (showBorder) {
-        classes.push(css`
-          border-right: 1px solid ${tokens.colors.gray[500]};
-        `);
-      }
-      return classes;
-    },
-    detailsHeaderInfo: css`
-      flex: 1;
-      justify-content: flex-end;
-      display: flex;
-      align-items: center;
-      font-weight: ${font.weight.normal};
-      color: ${colors.gray[400]};
-    `,
-    matchRow: (active) => {
-      const base = css`
-        display: flex;
-        border-bottom: 1px solid ${colors.darkGray[400]};
-        cursor: pointer;
-        align-items: center;
-        padding: ${size[1]} ${size[2]};
-        gap: ${size[2]};
-        font-size: ${fontSize.xs};
-        color: ${colors.gray[300]};
-      `;
-      const classes = [base];
-      if (active) {
-        const activeStyles = css`
-          background: ${colors.darkGray[500]};
-        `;
-        classes.push(activeStyles);
-      }
-      return classes;
-    },
-    matchIndicator: (color) => {
-      const base = css`
-        flex: 0 0 auto;
-        width: ${size[3]};
-        height: ${size[3]};
-        background: ${colors[color][900]};
-        border: 1px solid ${colors[color][500]};
-        border-radius: ${border.radius.full};
-        transition: all 0.25s ease-out;
-        box-sizing: border-box;
-      `;
-      const classes = [base];
-      if (color === "gray") {
-        const grayStyles = css`
-          background: ${colors.gray[700]};
-          border-color: ${colors.gray[400]};
-        `;
-        classes.push(grayStyles);
-      }
-      return classes;
-    },
-    matchID: css`
-      flex: 1;
-      line-height: ${lineHeight["xs"]};
-    `,
-    ageTicker: (showWarning) => {
-      const base = css`
-        display: flex;
-        gap: ${size[1]};
-        font-size: ${fontSize.xs};
-        color: ${colors.gray[400]};
-        font-variant-numeric: tabular-nums;
-        line-height: ${lineHeight["xs"]};
-      `;
-      const classes = [base];
-      if (showWarning) {
-        const warningStyles = css`
-          color: ${colors.yellow[400]};
-        `;
-        classes.push(warningStyles);
-      }
-      return classes;
-    },
-    secondContainer: css`
-      flex: 1 1 500px;
-      min-height: 40%;
-      max-height: 100%;
-      overflow: auto;
-      border-right: 1px solid ${colors.gray[700]};
-      display: flex;
-      flex-direction: column;
-    `,
-    thirdContainer: css`
-      flex: 1 1 500px;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      border-right: 1px solid ${colors.gray[700]};
-
-      @media (max-width: 700px) {
-        border-top: 2px solid ${colors.gray[700]};
-      }
-    `,
-    fourthContainer: css`
-      flex: 1 1 500px;
-      min-height: 40%;
-      max-height: 100%;
-      overflow: auto;
-      display: flex;
-      flex-direction: column;
-    `,
-    routesContainer: css`
-      overflow-x: auto;
-      overflow-y: visible;
-    `,
-    routesRowContainer: (active, isMatch) => {
-      const base = css`
-        display: flex;
-        border-bottom: 1px solid ${colors.darkGray[400]};
-        align-items: center;
-        padding: ${size[1]} ${size[2]};
-        gap: ${size[2]};
-        font-size: ${fontSize.xs};
-        color: ${colors.gray[300]};
-        cursor: ${isMatch ? "pointer" : "default"};
-        line-height: ${lineHeight["xs"]};
-      `;
-      const classes = [base];
-      if (active) {
-        const activeStyles = css`
-          background: ${colors.darkGray[500]};
-        `;
-        classes.push(activeStyles);
-      }
-      return classes;
-    },
-    routesRow: (isMatch) => {
-      const base = css`
-        flex: 1 0 auto;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: ${fontSize.xs};
-        line-height: ${lineHeight["xs"]};
-      `;
-      const classes = [base];
-      if (!isMatch) {
-        const matchStyles = css`
-          color: ${colors.gray[400]};
-        `;
-        classes.push(matchStyles);
-      }
-      return classes;
-    },
-    routeParamInfo: css`
-      color: ${colors.gray[400]};
-      font-size: ${fontSize.xs};
-      line-height: ${lineHeight["xs"]};
-    `,
-    nestedRouteRow: (isRoot) => {
-      const base = css`
-        margin-left: ${isRoot ? 0 : size[3.5]};
-        border-left: ${isRoot ? "" : `solid 1px ${colors.gray[700]}`};
-      `;
-      return base;
-    },
-    code: css`
-      font-size: ${fontSize.xs};
-      line-height: ${lineHeight["xs"]};
-    `,
-    matchesContainer: css`
-      flex: 1 1 auto;
-      overflow-y: auto;
-    `,
-    cachedMatchesContainer: css`
-      flex: 1 1 auto;
-      overflow-y: auto;
-      max-height: 50%;
-    `,
-    maskedBadgeContainer: css`
-      flex: 1;
-      justify-content: flex-end;
-      display: flex;
-    `,
-    matchDetails: css`
-      display: flex;
-      flex-direction: column;
-      padding: ${tokens.size[2]};
-      font-size: ${tokens.font.size.xs};
-      color: ${tokens.colors.gray[300]};
-      line-height: ${tokens.font.lineHeight.sm};
-    `,
-    matchStatus: (status, isFetching) => {
-      const colorMap = {
-        pending: "yellow",
-        success: "green",
-        error: "red",
-        notFound: "purple",
-        redirected: "gray"
-      };
-      const color = isFetching && status === "success" ? isFetching === "beforeLoad" ? "purple" : "blue" : colorMap[status];
-      return css`
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 40px;
-        border-radius: ${tokens.border.radius.sm};
-        font-weight: ${tokens.font.weight.normal};
-        background-color: ${tokens.colors[color][900]}${tokens.alpha[90]};
-        color: ${tokens.colors[color][300]};
-        border: 1px solid ${tokens.colors[color][600]};
-        margin-bottom: ${tokens.size[2]};
-        transition: all 0.25s ease-out;
-      `;
-    },
-    matchDetailsInfo: css`
-      display: flex;
-      justify-content: flex-end;
-      flex: 1;
-    `,
-    matchDetailsInfoLabel: css`
-      display: flex;
-    `,
-    mainCloseBtn: css`
-      background: ${colors.darkGray[700]};
-      padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};
-      border-radius: ${border.radius.md};
-      position: fixed;
-      z-index: 99999;
-      display: inline-flex;
-      width: fit-content;
-      cursor: pointer;
-      appearance: none;
-      border: 0;
-      gap: 8px;
-      align-items: center;
-      border: 1px solid ${colors.gray[500]};
-      font-size: ${font.size.xs};
-      cursor: pointer;
-      transition: all 0.25s ease-out;
-
-      &:hover {
-        background: ${colors.darkGray[500]};
-      }
-    `,
-    mainCloseBtnPosition: (position) => {
-      const base = css`
-        ${position === "top-left" ? `top: ${size[2]}; left: ${size[2]};` : ""}
-        ${position === "top-right" ? `top: ${size[2]}; right: ${size[2]};` : ""}
-        ${position === "bottom-left" ? `bottom: ${size[2]}; left: ${size[2]};` : ""}
-        ${position === "bottom-right" ? `bottom: ${size[2]}; right: ${size[2]};` : ""}
-      `;
-      return base;
-    },
-    mainCloseBtnAnimation: (isOpen) => {
-      if (isOpen) {
-        return css`
-          opacity: 1;
-          pointer-events: auto;
-          visibility: visible;
-        `;
-      }
-      return css`
-        opacity: 0;
-        pointer-events: none;
-        visibility: hidden;
-      `;
-    },
-    routerLogoCloseButton: css`
-      font-weight: ${font.weight.semibold};
-      font-size: ${font.size.xs};
-      background: linear-gradient(to right, #98f30c, #00f4a3);
-      background-clip: text;
-      -webkit-background-clip: text;
-      line-height: 1;
-      -webkit-text-fill-color: transparent;
-      white-space: nowrap;
-    `,
-    mainCloseBtnDivider: css`
-      width: 1px;
-      background: ${tokens.colors.gray[600]};
-      height: 100%;
-      border-radius: 999999px;
-      color: transparent;
-    `,
-    mainCloseBtnIconContainer: css`
-      position: relative;
-      width: ${size[5]};
-      height: ${size[5]};
-      background: pink;
-      border-radius: 999999px;
-      overflow: hidden;
-    `,
-    mainCloseBtnIconOuter: css`
-      width: ${size[5]};
-      height: ${size[5]};
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      filter: blur(3px) saturate(1.8) contrast(2);
-    `,
-    mainCloseBtnIconInner: css`
-      width: ${size[4]};
-      height: ${size[4]};
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    `,
-    panelCloseBtn: css`
-      position: absolute;
-      cursor: pointer;
-      z-index: 100001;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      outline: none;
-      background-color: ${colors.darkGray[700]};
-      &:hover {
-        background-color: ${colors.darkGray[500]};
-      }
-
-      top: 0;
-      right: ${size[2]};
-      transform: translate(0, -100%);
-      border-right: ${colors.darkGray[300]} 1px solid;
-      border-left: ${colors.darkGray[300]} 1px solid;
-      border-top: ${colors.darkGray[300]} 1px solid;
-      border-bottom: none;
-      border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
-      padding: ${size[1]} ${size[1.5]} ${size[0.5]} ${size[1.5]};
-
-      &::after {
-        content: ' ';
-        position: absolute;
-        top: 100%;
-        left: -${size[2.5]};
-        height: ${size[1.5]};
-        width: calc(100% + ${size[5]});
-      }
-    `,
-    panelCloseBtnIcon: css`
-      color: ${colors.gray[400]};
-      width: ${size[2]};
-      height: ${size[2]};
-    `
-  };
-};
-function useStyles() {
-  const shadowDomTarget = React__default.useContext(ShadowDomTargetContext);
-  const [_styles] = React__default.useState(() => stylesFactory(shadowDomTarget));
-  return _styles;
-}
-export {
-  TanStackRouterDevtools,
-  TanStackRouterDevtoolsPanel
-};
-//# sourceMappingURL=devtools.js.map