@tanstack/router-devtools 1.16.6 → 1.17.0

package/dist/esm/devtools.js

@@ -3,55 +3,29 @@ 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 { css } from "goober";
+import { clsx } from "clsx";
 import Explorer from "./Explorer.js";
+import { tokens } from "./tokens.js";
+import { TanStackLogo } from "./logo.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"
-          }
-        )
-      ]
-    }
-  );
+  const { className, ...rest } = props;
+  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" })
+  ] });
 }
+const DevtoolsOnCloseContext = React__default.createContext(void 0);
+const useDevtoolsOnClose = () => {
+  const context = React__default.useContext(DevtoolsOnCloseContext);
+  if (!context) {
+    throw new Error(
+      "useDevtoolsOnClose must be used within a TanStackRouterDevtools component"
+    );
+  }
+  return context;
+};
 function TanStackRouterDevtools({
   initialIsOpen,
   panelProps = {},
@@ -100,31 +74,10 @@ function TanStackRouterDevtools({
     document.addEventListener("mousemove", run);
     document.addEventListener("mouseup", unsub);
   };
+  const isButtonClosed = isOpen ?? false;
   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) {
@@ -150,6 +103,13 @@ function TanStackRouterDevtools({
     }
     return;
   }, [isResolvedOpen]);
+  React__default[isServer ? "useEffect" : "useLayoutEffect"](() => {
+    if (rootRef.current) {
+      const el = rootRef.current;
+      const fontSize = getComputedStyle(el).fontSize;
+      el.style.setProperty("--tsrd-font-size", fontSize);
+    }
+  }, [rootRef.current]);
   const { style: panelStyle = {}, ...otherPanelProps } = panelProps;
   const {
     style: closeButtonStyle = {},
@@ -163,78 +123,42 @@ function TanStackRouterDevtools({
   } = toggleButtonProps;
   if (!isMounted())
     return null;
+  const resolvedHeight = devtoolsHeight ?? 500;
   return /* @__PURE__ */ jsxs(Container, { ref: rootRef, className: "TanStackRouterDevtools", children: [
-    /* @__PURE__ */ jsxs(ThemeProvider, { theme: defaultTheme, children: [
-      /* @__PURE__ */ jsx(
-        TanStackRouterDevtoolsPanel,
-        {
-          ref: panelRef,
-          ...otherPanelProps,
-          router,
-          style: {
-            direction: "ltr",
-            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"
+    /* @__PURE__ */ jsx(
+      DevtoolsOnCloseContext.Provider,
+      {
+        value: {
+          onCloseClick: onCloseClick ?? (() => {
+          })
+        },
+        children: /* @__PURE__ */ jsx(
+          TanStackRouterDevtoolsPanel,
+          {
+            ref: panelRef,
+            ...otherPanelProps,
+            router,
+            className: clsx(
+              styles.devtoolsPanelContainer,
+              styles.devtoolsPanelContainerVisibility(!!isOpen),
+              styles.devtoolsPanelContainerResizing(isResizing),
+              styles.devtoolsPanelContainerAnimation(
+                isResolvedOpen,
+                resolvedHeight + 16
+              )
+            ),
+            style: {
+              height: resolvedHeight,
+              ...panelStyle
             },
-            ...closeButtonStyle
-          },
-          children: "Close"
-        }
-      ) : null
-    ] }),
-    !isResolvedOpen ? /* @__PURE__ */ jsx(
+            isOpen: isResolvedOpen,
+            setIsOpen,
+            handleDragStart: (e) => handleDragStart(panelRef.current, e)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -244,36 +168,21 @@ function TanStackRouterDevtools({
           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 })
+        className: clsx(
+          styles.mainCloseBtn,
+          styles.mainCloseBtnPosition(position),
+          styles.mainCloseBtnAnimation(!isButtonClosed)
+        ),
+        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: "React Router" })
+        ]
       }
-    ) : null
+    )
   ] });
 }
 function RouteComp({
@@ -286,6 +195,23 @@ function RouteComp({
   const routerState = useRouterState();
   const matches = routerState.status === "pending" ? 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",
@@ -297,90 +223,42 @@ function RouteComp({
             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"
-        },
+        className: clsx(
+          styles.routesRowContainer(route.id === activeId, !!match)
+        ),
         children: [
-          isRoot ? null : /* @__PURE__ */ jsx(
+          /* @__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
-              }
+              className: clsx(
+                styles.matchIndicator(getRouteStatusColor(matches, route))
+              )
             }
           ),
-          /* @__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 })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { className: clsx(styles.routesRow(!!match)), children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("code", { className: styles.code, children: [
+                isRoot ? "__root__" : route.path || trimPath(route.id),
+                " "
+              ] }),
+              /* @__PURE__ */ jsx("code", { className: styles.routeParamInfo, children: param })
+            ] }),
+            /* @__PURE__ */ jsx(AgeTicker, { match })
+          ] })
         ]
       }
     ),
-    ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(
-      "div",
+    ((_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,
       {
-        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
+        route: r,
+        activeId,
+        setActiveId
+      },
+      r.id
+    )) }) : null
   ] });
 }
 const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackRouterDevtoolsPanel2(props, ref) {
@@ -392,6 +270,8 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
     router: userRouter,
     ...panelProps
   } = props;
+  const { onCloseClick } = useDevtoolsOnClose();
+  const { className, ...otherPanelProps } = panelProps;
   const contextRouter = useRouter({ warn: false });
   const router = userRouter ?? contextRouter;
   const routerState = useRouterState({
@@ -423,670 +303,274 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
     ...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
-            }
-
-          `
-        }
-      }
-    ),
-    handleDragStart ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          width: "100%",
-          height: "4px",
-          marginBottom: "-4px",
-          cursor: "row-resize",
-          zIndex: 1e5
-        },
-        onMouseDown: handleDragStart
-      }
-    ) : null,
-    /* @__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",
+  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",
                   {
-                    style: {
-                      fontSize: "clamp(.8rem, 2vw, 1.3rem)",
-                      fontWeight: "bold"
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          fontWeight: 100
-                        },
-                        children: "Devtools"
-                      }
-                    )
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "1.667",
+                    d: "M1 1l4 4 4-4"
                   }
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles.firstContainer, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.row, children: /* @__PURE__ */ jsx(
+            Logo,
             {
-              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");
-                      }
-                    }
-                  )
-                }
-              )
+              "aria-hidden": true,
+              onClick: (e) => {
+                setIsOpen(false);
+                onCloseClick(e);
+              }
             }
-          )
-        ]
-      }
-    ),
-    /* @__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",
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: styles.routerExplorerContainer, children: /* @__PURE__ */ jsx("div", { className: styles.routerExplorer, children: /* @__PURE__ */ jsx(
+            Explorer,
             {
-              style: {
-                flex: "1 1 auto",
-                overflowY: "auto"
+              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: {}
               },
-              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",
+              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",
                   {
-                    style: {
-                      padding: ".5em",
-                      background: defaultTheme.backgroundAlt,
-                      position: "sticky",
-                      top: 0,
-                      zIndex: 1,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      gap: ".5rem",
-                      fontWeight: "bold"
+                    type: "button",
+                    onClick: () => {
+                      setShowMatches(false);
                     },
-                    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"
-                        }
-                      )
-                    ]
+                    disabled: !showMatches,
+                    className: clsx(styles.routeMatchesToggleBtn(!showMatches, true)),
+                    children: "Routes"
                   }
                 ),
-                !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",
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    style: {
-                      padding: ".5em",
-                      background: defaultTheme.backgroundAlt,
-                      position: "sticky",
-                      top: 0,
-                      zIndex: 1,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      gap: ".5rem",
-                      fontWeight: "bold"
+                    type: "button",
+                    onClick: () => {
+                      setShowMatches(true);
                     },
-                    children: [
-                      /* @__PURE__ */ jsx("div", { children: "Cached Matches" }),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            opacity: 0.3,
-                            fontSize: "0.7rem",
-                            fontWeight: "normal"
-                          },
-                          children: "age / staleTime / gcTime"
-                        }
-                      )
-                    ]
+                    disabled: showMatches,
+                    className: clsx(
+                      styles.routeMatchesToggleBtn(!!showMatches, false)
+                    ),
+                    children: "Matches"
                   }
-                ),
-                /* @__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,
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.detailsHeaderInfo, children: /* @__PURE__ */ jsx("div", { 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",
                 {
-                  style: {
-                    lineHeight: "1.8em"
-                  },
-                  children: JSON.stringify(activeMatch.id, null, 2)
-                }
-              ) })
+                  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 === "__root__" ? "__root__" : match.pathname}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(AgeTicker, { match })
+                  ]
+                },
+                match.id || i
+              );
+            }) })
+          ] }),
+          ((_a = routerState.cachedMatches) == null ? void 0 : _a.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__ */ 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__ */ 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 })
+                  ]
+                },
+                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" : ((_c = routerState.matches) == null ? void 0 : _c.find((d) => d.id === activeMatch.id)) ? "Active" : "Cached" })
             ] }),
-            /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("td", { style: { opacity: ".5" }, children: "Last Updated" }),
-              /* @__PURE__ */ jsx("td", { children: activeMatch.updatedAt ? new Date(
+            /* @__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",
-          {
-            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(
+          ] }) }),
+          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",
-        {
-          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(
+            ) })
+          ] }) : 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,
             {
-              label: "Match",
-              value: activeMatch,
-              defaultExpanded: {}
+              value: routerState.location.search || {},
+              defaultExpanded: Object.keys(
+                routerState.location.search || {}
+              ).reduce((obj, next) => {
+                obj[next] = {};
+                return obj;
+              }, {})
             }
-          )
-        }
-      )
-    ] }) : 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
-  ] }) });
+          ) })
+        ] }) : null
+      ]
+    }
+  );
 });
 function AgeTicker({ match }) {
   const router = useRouter();
@@ -1112,24 +596,13 @@ function AgeTicker({ match }) {
   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) })
-      ]
-    }
-  );
+  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"];
@@ -1147,6 +620,540 @@ function formatTime(ms) {
   });
   return formatter.format(values[chosenUnitIndex]) + units[chosenUnitIndex];
 }
+const stylesFactory = () => {
+  const { colors, font, size, alpha, shadow, border } = tokens;
+  const { fontFamily, lineHeight, size: fontSize } = font;
+  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;
+      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) {
+        const border2 = css`
+          border-right: 1px solid ${tokens.colors.gray[500]};
+        `;
+        classes.push(border2);
+      }
+      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;
+    `,
+    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"
+      };
+      const color = isFetching && status === "success" ? "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]};
+    `
+  };
+};
+const styles = stylesFactory();
 export {
   TanStackRouterDevtools,
   TanStackRouterDevtoolsPanel