@tanstack/router-devtools 1.7.0 → 1.8.0

package/dist/esm/devtools.js

@@ -0,0 +1,1150 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import { useRouter, useRouterState, invariant, trimPath } from "@tanstack/react-router";
+import useLocalStorage from "./useLocalStorage.js";
+import { useSafeState, useIsMounted, multiSortBy, getStatusColor, getRouteStatusColor } from "./utils.js";
+import { Button, Panel, Code, ActivePanel } from "./styledComponents.js";
+import { ThemeProvider, defaultTheme } from "./theme.js";
+import Explorer from "./Explorer.js";
+const isServer = typeof window === "undefined";
+function Logo(props) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      style: {
+        ...props.style ?? {},
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        fontSize: "0.8rem",
+        fontWeight: "bolder",
+        lineHeight: "1"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              letterSpacing: "-0.05rem"
+            },
+            children: "TANSTACK"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              backgroundImage: "linear-gradient(to right, var(--tw-gradient-stops))",
+              // @ts-ignore
+              "--tw-gradient-from": "#84cc16",
+              "--tw-gradient-stops": "var(--tw-gradient-from), var(--tw-gradient-to)",
+              "--tw-gradient-to": "#10b981",
+              WebkitBackgroundClip: "text",
+              color: "transparent",
+              letterSpacing: "0.1rem",
+              marginRight: "-0.2rem"
+            },
+            children: "ROUTER"
+          }
+        )
+      ]
+    }
+  );
+}
+function TanStackRouterDevtools({
+  initialIsOpen,
+  panelProps = {},
+  closeButtonProps = {},
+  toggleButtonProps = {},
+  position = "bottom-left",
+  containerElement: Container = "footer",
+  router
+}) {
+  const rootRef = React__default.useRef(null);
+  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 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 == null ? void 0 : 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);
+  };
+  React__default.useEffect(() => {
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
+  React__default.useEffect(() => {
+    const ref = panelRef.current;
+    if (ref) {
+      const handlePanelTransitionStart = () => {
+        if (ref && isResolvedOpen) {
+          ref.style.visibility = "visible";
+        }
+      };
+      const handlePanelTransitionEnd = () => {
+        if (ref && !isResolvedOpen) {
+          ref.style.visibility = "hidden";
+        }
+      };
+      ref.addEventListener("transitionstart", handlePanelTransitionStart);
+      ref.addEventListener("transitionend", handlePanelTransitionEnd);
+      return () => {
+        ref.removeEventListener("transitionstart", handlePanelTransitionStart);
+        ref.removeEventListener("transitionend", handlePanelTransitionEnd);
+      };
+    }
+    return;
+  }, [isResolvedOpen]);
+  React__default[isServer ? "useEffect" : "useLayoutEffect"](() => {
+    var _a, _b;
+    if (isResolvedOpen) {
+      const previousValue = (_b = (_a = rootRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
+      const run = () => {
+        var _a2, _b2;
+        const containerHeight = (_a2 = panelRef.current) == null ? void 0 : _a2.getBoundingClientRect().height;
+        if ((_b2 = rootRef.current) == null ? void 0 : _b2.parentElement) {
+          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
+        }
+      };
+      run();
+      if (typeof window !== "undefined") {
+        window.addEventListener("resize", run);
+        return () => {
+          var _a2;
+          window.removeEventListener("resize", run);
+          if (((_a2 = rootRef.current) == null ? void 0 : _a2.parentElement) && typeof previousValue === "string") {
+            rootRef.current.parentElement.style.paddingBottom = previousValue;
+          }
+        };
+      }
+    }
+    return;
+  }, [isResolvedOpen]);
+  const { style: panelStyle = {}, ...otherPanelProps } = panelProps;
+  const {
+    style: closeButtonStyle = {},
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
+  const {
+    style: toggleButtonStyle = {},
+    onClick: onToggleClick,
+    ...otherToggleButtonProps
+  } = toggleButtonProps;
+  if (!isMounted())
+    return null;
+  return /* @__PURE__ */ jsxs(Container, { ref: rootRef, className: "TanStackRouterDevtools", children: [
+    /* @__PURE__ */ jsxs(ThemeProvider, { theme: defaultTheme, children: [
+      /* @__PURE__ */ jsx(
+        TanStackRouterDevtoolsPanel,
+        {
+          ref: panelRef,
+          ...otherPanelProps,
+          router,
+          style: {
+            position: "fixed",
+            bottom: "0",
+            right: "0",
+            zIndex: 99999,
+            width: "100%",
+            height: devtoolsHeight ?? 500,
+            maxHeight: "90%",
+            boxShadow: "0 0 20px rgba(0,0,0,.3)",
+            borderTop: `1px solid ${defaultTheme.gray}`,
+            transformOrigin: "top",
+            // visibility will be toggled after transitions, but set initial state here
+            visibility: isOpen ? "visible" : "hidden",
+            ...panelStyle,
+            ...isResizing ? {
+              transition: `none`
+            } : { transition: `all .2s ease` },
+            ...isResolvedOpen ? {
+              opacity: 1,
+              pointerEvents: "all",
+              transform: `translateY(0) scale(1)`
+            } : {
+              opacity: 0,
+              pointerEvents: "none",
+              transform: `translateY(15px) scale(1.02)`
+            }
+          },
+          isOpen: isResolvedOpen,
+          setIsOpen,
+          handleDragStart: (e) => handleDragStart(panelRef.current, e)
+        }
+      ),
+      isResolvedOpen ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          "aria-label": "Close TanStack Router Devtools",
+          ...otherCloseButtonProps,
+          onClick: (e) => {
+            setIsOpen(false);
+            onCloseClick && onCloseClick(e);
+          },
+          style: {
+            position: "fixed",
+            zIndex: 99999,
+            margin: ".5em",
+            bottom: 0,
+            ...position === "top-right" ? {
+              right: "0"
+            } : position === "top-left" ? {
+              left: "0"
+            } : position === "bottom-right" ? {
+              right: "0"
+            } : {
+              left: "0"
+            },
+            ...closeButtonStyle
+          },
+          children: "Close"
+        }
+      ) : null
+    ] }),
+    !isResolvedOpen ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...otherToggleButtonProps,
+        "aria-label": "Open TanStack Router Devtools",
+        onClick: (e) => {
+          setIsOpen(true);
+          onToggleClick && onToggleClick(e);
+        },
+        style: {
+          appearance: "none",
+          background: "none",
+          border: 0,
+          padding: 0,
+          position: "fixed",
+          zIndex: 99999,
+          display: "inline-flex",
+          fontSize: "1.5em",
+          margin: ".5em",
+          cursor: "pointer",
+          width: "fit-content",
+          ...position === "top-right" ? {
+            top: "0",
+            right: "0"
+          } : position === "top-left" ? {
+            top: "0",
+            left: "0"
+          } : position === "bottom-right" ? {
+            bottom: "0",
+            right: "0"
+          } : {
+            bottom: "0",
+            left: "0"
+          },
+          ...toggleButtonStyle
+        },
+        children: /* @__PURE__ */ jsx(Logo, { "aria-hidden": true })
+      }
+    ) : null
+  ] });
+}
+function RouteComp({
+  route,
+  isRoot,
+  activeId,
+  setActiveId
+}) {
+  var _a;
+  const routerState = useRouterState();
+  const matches = routerState.status === "pending" ? routerState.pendingMatches ?? [] : routerState.matches;
+  const match = routerState.matches.find((d) => d.routeId === route.id);
+  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);
+          }
+        },
+        style: {
+          display: "flex",
+          borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
+          cursor: match ? "pointer" : "default",
+          alignItems: "center",
+          background: route.id === activeId ? "rgba(255,255,255,.1)" : void 0,
+          padding: ".25rem .5rem",
+          gap: ".5rem"
+        },
+        children: [
+          isRoot ? null : /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flex: "0 0 auto",
+                width: ".7rem",
+                height: ".7rem",
+                alignItems: "center",
+                justifyContent: "center",
+                fontWeight: "bold",
+                borderRadius: "100%",
+                transition: "all .2s ease-out",
+                background: getRouteStatusColor(matches, route, defaultTheme),
+                opacity: match ? 1 : 0.3
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                flex: "1 0 auto",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: isRoot ? "0 .25rem" : 0,
+                opacity: match ? 1 : 0.7,
+                fontSize: "0.7rem"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(Code, { children: [
+                  route.path || trimPath(route.id),
+                  " "
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: ".5rem"
+                    },
+                    children: [
+                      match ? /* @__PURE__ */ jsx(Code, { style: { opacity: 0.3 }, children: match.id }) : null,
+                      /* @__PURE__ */ jsx(AgeTicker, { match })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          marginLeft: isRoot ? 0 : "1rem",
+          borderLeft: isRoot ? "" : `solid 1px ${defaultTheme.grayAlt}`
+        },
+        children: [...route.children].sort((a, b) => {
+          return a.rank - b.rank;
+        }).map((r) => /* @__PURE__ */ jsx(
+          RouteComp,
+          {
+            route: r,
+            activeId,
+            setActiveId
+          },
+          r.id
+        ))
+      }
+    ) : null
+  ] });
+}
+const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackRouterDevtoolsPanel2(props, ref) {
+  var _a, _b, _c;
+  const {
+    isOpen = true,
+    setIsOpen,
+    handleDragStart,
+    router: userRouter,
+    ...panelProps
+  } = props;
+  const router = useRouter();
+  const routerState = useRouterState();
+  const matches = [
+    ...routerState.pendingMatches ?? [],
+    ...routerState.matches,
+    ...routerState.cachedMatches
+  ];
+  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(
+    () => matches.find((d) => d.routeId === activeId || d.id === activeId),
+    [matches, activeId]
+  );
+  const hasSearch = Object.keys(routerState.location.search || {}).length;
+  const explorerState = {
+    ...router,
+    state: router.state
+  };
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: defaultTheme, children: /* @__PURE__ */ jsxs(Panel, { ref, className: "TanStackRouterDevtoolsPanel", ...panelProps, children: [
+    /* @__PURE__ */ jsx(
+      "style",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `
+
+            .TanStackRouterDevtoolsPanel * {
+              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {
+              background: ${defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {
+              background: ${defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel table {
+              width: 100%;
+            }
+
+            .TanStackRouterDevtoolsPanel table tr {
+              border-bottom: 2px dotted rgba(255, 255, 255, .2);
+            }
+
+            .TanStackRouterDevtoolsPanel table tr:last-child {
+              border-bottom: none
+            }
+
+            .TanStackRouterDevtoolsPanel table td {
+              padding: .25rem .5rem;
+              border-right: 2px dotted rgba(255, 255, 255, .05);
+            }
+
+            .TanStackRouterDevtoolsPanel table td:last-child {
+              border-right: none
+            }
+
+          `
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: "100%",
+          height: "4px",
+          marginBottom: "-4px",
+          cursor: "row-resize",
+          zIndex: 1e5
+        },
+        onMouseDown: handleDragStart
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          flex: "1 1 500px",
+          minHeight: "40%",
+          maxHeight: "100%",
+          overflow: "auto",
+          borderRight: `1px solid ${defaultTheme.grayAlt}`,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "start",
+                gap: "1rem",
+                padding: "1rem",
+                alignItems: "center",
+                background: defaultTheme.backgroundAlt
+              },
+              children: [
+                /* @__PURE__ */ jsx(Logo, { "aria-hidden": true }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "clamp(.8rem, 2vw, 1.3rem)",
+                      fontWeight: "bold"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontWeight: 100
+                        },
+                        children: "Devtools"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                overflowY: "auto",
+                flex: "1"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: ".5em"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Explorer,
+                    {
+                      label: "Router",
+                      value: Object.fromEntries(
+                        multiSortBy(
+                          Object.keys(explorerState),
+                          [
+                            "state",
+                            "routesById",
+                            "routesByPath",
+                            "flatRoutes",
+                            "options"
+                          ].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",
+      {
+        style: {
+          flex: "1 1 500px",
+          minHeight: "40%",
+          maxHeight: "100%",
+          overflow: "auto",
+          borderRight: `1px solid ${defaultTheme.grayAlt}`,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                flex: "1 1 auto",
+                overflowY: "auto"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      padding: ".5em",
+                      background: defaultTheme.backgroundAlt,
+                      position: "sticky",
+                      top: 0,
+                      zIndex: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: ".5rem",
+                      fontWeight: "bold"
+                    },
+                    children: [
+                      "Pathname",
+                      " ",
+                      routerState.location.maskedLocation ? /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            padding: ".1rem .5rem",
+                            background: defaultTheme.warning,
+                            color: "black",
+                            borderRadius: ".5rem"
+                          },
+                          children: "Masked"
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      padding: ".5rem",
+                      display: "flex",
+                      gap: ".5rem",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "code",
+                        {
+                          style: {
+                            opacity: 0.6
+                          },
+                          children: routerState.location.pathname
+                        }
+                      ),
+                      routerState.location.maskedLocation ? /* @__PURE__ */ jsx(
+                        "code",
+                        {
+                          style: {
+                            color: defaultTheme.warning,
+                            fontWeight: "bold"
+                          },
+                          children: routerState.location.maskedLocation.pathname
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      padding: ".5em",
+                      background: defaultTheme.backgroundAlt,
+                      position: "sticky",
+                      top: 0,
+                      zIndex: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: ".5rem",
+                      fontWeight: "bold"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: ".5rem"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => {
+                                  setShowMatches(false);
+                                },
+                                disabled: !showMatches,
+                                style: {
+                                  appearance: "none",
+                                  opacity: showMatches ? 0.5 : 1,
+                                  border: 0,
+                                  background: "transparent",
+                                  color: "inherit",
+                                  cursor: "pointer"
+                                },
+                                children: "Routes"
+                              }
+                            ),
+                            "/",
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => {
+                                  setShowMatches(true);
+                                },
+                                disabled: showMatches,
+                                style: {
+                                  appearance: "none",
+                                  opacity: !showMatches ? 0.5 : 1,
+                                  border: 0,
+                                  background: "transparent",
+                                  color: "inherit",
+                                  cursor: "pointer"
+                                },
+                                children: "Matches"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            opacity: 0.3,
+                            fontSize: "0.7rem",
+                            fontWeight: "normal"
+                          },
+                          children: "age / staleTime / gcTime"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !showMatches ? /* @__PURE__ */ jsx(
+                  RouteComp,
+                  {
+                    route: router.routeTree,
+                    isRoot: true,
+                    activeId,
+                    setActiveId
+                  }
+                ) : /* @__PURE__ */ jsx("div", { children: (routerState.status === "pending" ? 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),
+                      style: {
+                        display: "flex",
+                        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
+                        cursor: "pointer",
+                        alignItems: "center",
+                        background: match === activeMatch ? "rgba(255,255,255,.1)" : void 0
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              flex: "0 0 auto",
+                              width: "1.3rem",
+                              height: "1.3rem",
+                              marginLeft: ".25rem",
+                              background: getStatusColor(match, defaultTheme),
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontWeight: "bold",
+                              borderRadius: ".25rem",
+                              transition: "all .2s ease-out"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Code,
+                          {
+                            style: {
+                              padding: ".5em",
+                              fontSize: "0.7rem"
+                            },
+                            children: `${match.id}`
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(AgeTicker, { match })
+                      ]
+                    },
+                    match.id || i
+                  );
+                }) })
+              ]
+            }
+          ),
+          ((_a = routerState.cachedMatches) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                flex: "1 1 auto",
+                overflowY: "auto",
+                maxHeight: "50%"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      padding: ".5em",
+                      background: defaultTheme.backgroundAlt,
+                      position: "sticky",
+                      top: 0,
+                      zIndex: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: ".5rem",
+                      fontWeight: "bold"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { children: "Cached Matches" }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            opacity: 0.3,
+                            fontSize: "0.7rem",
+                            fontWeight: "normal"
+                          },
+                          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),
+                      style: {
+                        display: "flex",
+                        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
+                        cursor: "pointer",
+                        alignItems: "center",
+                        background: match === activeMatch ? "rgba(255,255,255,.1)" : void 0,
+                        fontSize: "0.7rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              flex: "0 0 auto",
+                              width: ".75rem",
+                              height: ".75rem",
+                              marginLeft: ".25rem",
+                              background: getStatusColor(match, defaultTheme),
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontWeight: "bold",
+                              borderRadius: "100%",
+                              transition: "all 1s ease-out"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Code,
+                          {
+                            style: {
+                              padding: ".5em"
+                            },
+                            children: `${match.id}`
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx(AgeTicker, { match }) })
+                      ]
+                    },
+                    match.id
+                  );
+                }) })
+              ]
+            }
+          ) : null
+        ]
+      }
+    ),
+    activeMatch ? /* @__PURE__ */ jsxs(ActivePanel, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            padding: ".5em",
+            background: defaultTheme.backgroundAlt,
+            position: "sticky",
+            top: 0,
+            bottom: 0,
+            zIndex: 1
+          },
+          children: "Match Details"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          style: {
+            fontSize: "0.8rem"
+          },
+          children: /* @__PURE__ */ jsxs("tbody", { children: [
+            /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { style: { opacity: ".5" }, children: "ID" }),
+              /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+                Code,
+                {
+                  style: {
+                    lineHeight: "1.8em"
+                  },
+                  children: JSON.stringify(activeMatch.id, null, 2)
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { style: { opacity: ".5" }, children: "Status" }),
+              /* @__PURE__ */ jsxs("td", { children: [
+                ((_b = routerState.pendingMatches) == null ? void 0 : _b.find(
+                  (d) => d.id === activeMatch.id
+                )) ? "Pending" : ((_c = routerState.matches) == null ? void 0 : _c.find(
+                  (d) => d.id === activeMatch.id
+                )) ? "Active" : "Cached",
+                " ",
+                "- ",
+                activeMatch.status
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { style: { opacity: ".5" }, children: "Last Updated" }),
+              /* @__PURE__ */ jsx("td", { children: activeMatch.updatedAt ? new Date(
+                activeMatch.updatedAt
+              ).toLocaleTimeString() : "N/A" })
+            ] })
+          ] })
+        }
+      ) }),
+      activeMatch.loaderData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              background: defaultTheme.backgroundAlt,
+              padding: ".5em",
+              position: "sticky",
+              top: 0,
+              bottom: 0,
+              zIndex: 1
+            },
+            children: "Loader Data"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: ".5em"
+            },
+            children: /* @__PURE__ */ jsx(
+              Explorer,
+              {
+                label: "loaderData",
+                value: activeMatch.loaderData,
+                defaultExpanded: {}
+              }
+            )
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            background: defaultTheme.backgroundAlt,
+            padding: ".5em",
+            position: "sticky",
+            top: 0,
+            bottom: 0,
+            zIndex: 1
+          },
+          children: "Explorer"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            padding: ".5em"
+          },
+          children: /* @__PURE__ */ jsx(
+            Explorer,
+            {
+              label: "Match",
+              value: activeMatch,
+              defaultExpanded: {}
+            }
+          )
+        }
+      )
+    ] }) : null,
+    hasSearch ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          flex: "1 1 500px",
+          minHeight: "40%",
+          maxHeight: "100%",
+          overflow: "auto",
+          borderRight: `1px solid ${defaultTheme.grayAlt}`,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: ".5em",
+                background: defaultTheme.backgroundAlt,
+                position: "sticky",
+                top: 0,
+                bottom: 0,
+                zIndex: 1,
+                fontWeight: "bold"
+              },
+              children: "Search Params"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: ".5em"
+              },
+              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 }) {
+  const router = useRouter();
+  const rerender = React__default.useReducer(
+    () => ({}),
+    () => ({})
+  )[1];
+  React__default.useEffect(() => {
+    const interval = setInterval(() => {
+      rerender();
+    }, 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  if (!match) {
+    return null;
+  }
+  const route = router.looseRoutesById[match == null ? void 0 : match.routeId];
+  if (!route.options.loader) {
+    return null;
+  }
+  const age = Date.now() - (match == null ? void 0 : 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",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: ".25rem",
+        color: age > staleTime ? defaultTheme.warning : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: {}, 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];
+}
+export {
+  TanStackRouterDevtools,
+  TanStackRouterDevtoolsPanel
+};
+//# sourceMappingURL=devtools.js.map