@tanstack/router-devtools 1.35.5 → 1.36.0

package/dist/cjs/devtools.cjs

@@ -10,31 +10,45 @@ const utils = require("./utils.cjs");
 const Explorer = require("./Explorer.cjs");
 const tokens = require("./tokens.cjs");
 const logo = require("./logo.cjs");
+const context = require("./context.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const goober__namespace = /* @__PURE__ */ _interopNamespaceDefault(goober);
 function Logo(props) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs("button", { ...rest, className: clsx.clsx(getStyles().logo, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().tanstackLogo, children: "TANSTACK" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().routerLogo, children: "React Router v1" })
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { ...rest, className: clsx.clsx(styles.logo, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.tanstackLogo, children: "TANSTACK" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerLogo, children: "React Router v1" })
   ] });
 }
-const DevtoolsOnCloseContext = React.createContext(void 0);
-const useDevtoolsOnClose = () => {
-  const context = React.useContext(DevtoolsOnCloseContext);
-  if (!context) {
-    throw new Error(
-      "useDevtoolsOnClose must be used within a TanStackRouterDevtools component"
-    );
-  }
-  return context;
-};
-function TanStackRouterDevtools({
+function TanStackRouterDevtools(props) {
+  const { shadowDOMTarget } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(context.ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingTanStackRouterDevtools, { ...props }) });
+}
+function FloatingTanStackRouterDevtools({
   initialIsOpen,
   panelProps = {},
   closeButtonProps = {},
   toggleButtonProps = {},
   position = "bottom-left",
   containerElement: Container = "footer",
-  router
+  router,
+  shadowDOMTarget
 }) {
   const [rootEl, setRootEl] = React.useState();
   const panelRef = React.useRef(null);
@@ -49,6 +63,7 @@ function TanStackRouterDevtools({
   const [isResolvedOpen, setIsResolvedOpen] = utils.useSafeState(false);
   const [isResizing, setIsResizing] = utils.useSafeState(false);
   const isMounted = utils.useIsMounted();
+  const styles = useStyles();
   const handleDragStart = (panelElement, startEvent) => {
     if (startEvent.button !== 0)
       return;
@@ -126,7 +141,7 @@ function TanStackRouterDevtools({
   const resolvedHeight = devtoolsHeight ?? 500;
   return /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref: setRootEl, className: "TanStackRouterDevtools", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      DevtoolsOnCloseContext.Provider,
+      context.DevtoolsOnCloseContext.Provider,
       {
         value: {
           onCloseClick: onCloseClick ?? (() => {
@@ -139,10 +154,10 @@ function TanStackRouterDevtools({
             ...otherPanelProps,
             router,
             className: clsx.clsx(
-              getStyles().devtoolsPanelContainer,
-              getStyles().devtoolsPanelContainerVisibility(!!isOpen),
-              getStyles().devtoolsPanelContainerResizing(isResizing),
-              getStyles().devtoolsPanelContainerAnimation(
+              styles.devtoolsPanelContainer,
+              styles.devtoolsPanelContainerVisibility(!!isOpen),
+              styles.devtoolsPanelContainerResizing(isResizing),
+              styles.devtoolsPanelContainerAnimation(
                 isResolvedOpen,
                 resolvedHeight + 16
               )
@@ -153,7 +168,8 @@ function TanStackRouterDevtools({
             },
             isOpen: isResolvedOpen,
             setIsOpen,
-            handleDragStart: (e) => handleDragStart(panelRef.current, e)
+            handleDragStart: (e) => handleDragStart(panelRef.current, e),
+            shadowDOMTarget
           }
         )
       }
@@ -169,26 +185,27 @@ function TanStackRouterDevtools({
           onToggleClick && onToggleClick(e);
         },
         className: clsx.clsx(
-          getStyles().mainCloseBtn,
-          getStyles().mainCloseBtnPosition(position),
-          getStyles().mainCloseBtnAnimation(!isButtonClosed),
+          styles.mainCloseBtn,
+          styles.mainCloseBtnPosition(position),
+          styles.mainCloseBtnAnimation(!isButtonClosed),
           toggleButtonClassName
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().mainCloseBtnIconContainer, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().mainCloseBtnIconOuter, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().mainCloseBtnIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mainCloseBtnIconContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnIconOuter, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().mainCloseBtnDivider, children: "-" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().routerLogoCloseButton, children: "TanStack Router" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnDivider, children: "-" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerLogoCloseButton, children: "TanStack Router" })
         ]
       }
     )
   ] });
 }
 const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevtoolsPanel2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DevtoolsOnCloseContext.Provider,
+  const { shadowDOMTarget } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(context.ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsxRuntime.jsx(
+    context.DevtoolsOnCloseContext.Provider,
     {
       value: {
         onCloseClick: () => {
@@ -196,7 +213,7 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(BaseTanStackRouterDevtoolsPanel, { ref, ...props })
     }
-  );
+  ) });
 });
 function RouteComp({
   router,
@@ -209,6 +226,7 @@ function RouteComp({
   const routerState = reactRouter.useRouterState({
     router
   });
+  const styles = useStyles();
   const matches = routerState.pendingMatches || routerState.matches;
   const match = routerState.matches.find((d) => d.routeId === route.id);
   const param = React.useMemo(() => {
@@ -240,31 +258,31 @@ function RouteComp({
           }
         },
         className: clsx.clsx(
-          getStyles().routesRowContainer(route.id === activeId, !!match)
+          styles.routesRowContainer(route.id === activeId, !!match)
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: clsx.clsx(
-                getStyles().matchIndicator(utils.getRouteStatusColor(matches, route))
+                styles.matchIndicator(utils.getRouteStatusColor(matches, route))
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(getStyles().routesRow(!!match)), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(styles.routesRow(!!match)), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("code", { className: getStyles().code, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("code", { className: styles.code, children: [
                 isRoot ? reactRouter.rootRouteId : route.path || reactRouter.trimPath(route.id),
                 " "
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("code", { className: getStyles().routeParamInfo, children: param })
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles.routeParamInfo, children: param })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(AgeTicker, { match, router })
           ] })
         ]
       }
     ),
-    ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
+    ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
       return a.rank - b.rank;
     }).map((r) => /* @__PURE__ */ jsxRuntime.jsx(
       RouteComp,
@@ -285,9 +303,11 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
     setIsOpen,
     handleDragStart,
     router: userRouter,
+    shadowDOMTarget,
     ...panelProps
   } = props;
-  const { onCloseClick } = useDevtoolsOnClose();
+  const { onCloseClick } = context.useDevtoolsOnClose();
+  const styles = useStyles();
   const { className, ...otherPanelProps } = panelProps;
   const contextRouter = reactRouter.useRouter({ warn: false });
   const router = userRouter ?? contextRouter;
@@ -329,23 +349,17 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
     {
       ref,
       className: clsx.clsx(
-        getStyles().devtoolsPanel,
+        styles.devtoolsPanel,
         "TanStackRouterDevtoolsPanel",
         className
       ),
       ...otherPanelProps,
       children: [
-        handleDragStart ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: getStyles().dragHandle,
-            onMouseDown: handleDragStart
-          }
-        ) : null,
+        handleDragStart ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dragHandle, onMouseDown: handleDragStart }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: getStyles().panelCloseBtn,
+            className: styles.panelCloseBtn,
             onClick: (e) => {
               setIsOpen(false);
               onCloseClick(e);
@@ -358,7 +372,7 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
                 height: "6",
                 fill: "none",
                 viewBox: "0 0 10 6",
-                className: getStyles().panelCloseBtnIcon,
+                className: styles.panelCloseBtnIcon,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "path",
                   {
@@ -373,8 +387,8 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().firstContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().row, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.firstContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.row, children: /* @__PURE__ */ jsxRuntime.jsx(
             Logo,
             {
               "aria-hidden": true,
@@ -384,7 +398,7 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
               }
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().routerExplorerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().routerExplorer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerExplorerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerExplorer, children: /* @__PURE__ */ jsxRuntime.jsx(
             Explorer.default,
             {
               label: "Router",
@@ -426,18 +440,18 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().secondContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchesContainer, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().detailsHeader, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.secondContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchesContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.detailsHeader, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pathname" }),
-              routerState.location.maskedLocation ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().maskedBadgeContainer, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: getStyles().maskedBadge, children: "masked" }) }) : null
+              routerState.location.maskedLocation ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.maskedBadgeContainer, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.maskedBadge, children: "masked" }) }) : null
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().detailsContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.detailsContent, children: [
               /* @__PURE__ */ jsxRuntime.jsx("code", { children: routerState.location.pathname }),
-              routerState.location.maskedLocation ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: getStyles().maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
+              routerState.location.maskedLocation ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles.maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().detailsHeader, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().routeMatchesToggle, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.detailsHeader, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.routeMatchesToggle, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
@@ -446,9 +460,7 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
                       setShowMatches(false);
                     },
                     disabled: !showMatches,
-                    className: clsx.clsx(
-                      getStyles().routeMatchesToggleBtn(!showMatches, true)
-                    ),
+                    className: clsx.clsx(styles.routeMatchesToggleBtn(!showMatches, true)),
                     children: "Routes"
                   }
                 ),
@@ -461,15 +473,15 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
                     },
                     disabled: showMatches,
                     className: clsx.clsx(
-                      getStyles().routeMatchesToggleBtn(!!showMatches, false)
+                      styles.routeMatchesToggleBtn(!!showMatches, false)
                     ),
                     children: "Matches"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeaderInfo, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "age / staleTime / gcTime" }) })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeaderInfo, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "age / staleTime / gcTime" }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(getStyles().routesContainer), children: !showMatches ? /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(styles.routesContainer), children: !showMatches ? /* @__PURE__ */ jsxRuntime.jsx(
               RouteComp,
               {
                 router,
@@ -486,22 +498,20 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
                     role: "button",
                     "aria-label": `Open match details for ${match.id}`,
                     onClick: () => setActiveId(activeId === match.id ? "" : match.id),
-                    className: clsx.clsx(
-                      getStyles().matchRow(match === activeMatch)
-                    ),
+                    className: clsx.clsx(styles.matchRow(match === activeMatch)),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
                         {
                           className: clsx.clsx(
-                            getStyles().matchIndicator(utils.getStatusColor(match))
+                            styles.matchIndicator(utils.getStatusColor(match))
                           )
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "code",
                         {
-                          className: getStyles().matchID,
+                          className: styles.matchID,
                           children: `${match.routeId === reactRouter.rootRouteId ? reactRouter.rootRouteId : match.pathname}`
                         }
                       ),
@@ -513,10 +523,10 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
               }
             ) }) })
           ] }),
-          routerState.cachedMatches.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().cachedMatchesContainer, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().detailsHeader, children: [
+          routerState.cachedMatches.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.cachedMatchesContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.detailsHeader, children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Cached Matches" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeaderInfo, children: "age / staleTime / gcTime" })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeaderInfo, children: "age / staleTime / gcTime" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { children: routerState.cachedMatches.map((match) => {
               return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -525,17 +535,17 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
                   role: "button",
                   "aria-label": `Open match details for ${match.id}`,
                   onClick: () => setActiveId(activeId === match.id ? "" : match.id),
-                  className: clsx.clsx(getStyles().matchRow(match === activeMatch)),
+                  className: clsx.clsx(styles.matchRow(match === activeMatch)),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
                         className: clsx.clsx(
-                          getStyles().matchIndicator(utils.getStatusColor(match))
+                          styles.matchIndicator(utils.getStatusColor(match))
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("code", { className: getStyles().matchID, children: `${match.id}` }),
+                    /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles.matchID, children: `${match.id}` }),
                     /* @__PURE__ */ jsxRuntime.jsx(AgeTicker, { match, router })
                   ]
                 },
@@ -544,37 +554,37 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
             }) })
           ] }) : null
         ] }),
-        activeMatch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().thirdContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeader, children: "Match Details" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchDetails, children: [
+        activeMatch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.thirdContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeader, children: "Match Details" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchDetails, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: getStyles().matchStatus(
+                className: styles.matchStatus(
                   activeMatch.status,
                   activeMatch.isFetching
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: activeMatch.status === "success" && activeMatch.isFetching ? "fetching" : activeMatch.status })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { children: "ID:" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().matchDetailsInfo, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: activeMatch.id }) })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.matchDetailsInfo, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: activeMatch.id }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { children: "State:" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().matchDetailsInfo, children: ((_a = routerState.pendingMatches) == null ? void 0 : _a.find(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.matchDetailsInfo, children: ((_a = routerState.pendingMatches) == null ? void 0 : _a.find(
                 (d) => d.id === activeMatch.id
               )) ? "Pending" : routerState.matches.find((d) => d.id === activeMatch.id) ? "Active" : "Cached" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Last Updated:" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().matchDetailsInfo, children: activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : "N/A" })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.matchDetailsInfo, children: activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : "N/A" })
             ] })
           ] }) }),
           activeMatch.loaderData ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeader, children: "Loader Data" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeader, children: "Loader Data" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(
               Explorer.default,
               {
                 label: "loaderData",
@@ -583,12 +593,12 @@ const BaseTanStackRouterDevtoolsPanel = React.forwardRef(function BaseTanStackRo
               }
             ) })
           ] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeader, children: "Explorer" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(Explorer.default, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeader, children: "Explorer" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(Explorer.default, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
         ] }) : null,
-        hasSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getStyles().fourthContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsHeader, children: "Search Params" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(
+        hasSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fourthContainer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsHeader, children: "Search Params" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsxRuntime.jsx(
             Explorer.default,
             {
               value: routerState.location.search,
@@ -610,6 +620,7 @@ function AgeTicker({
   match,
   router
 }) {
+  const styles = useStyles();
   const rerender = React.useReducer(
     () => ({}),
     () => ({})
@@ -632,7 +643,7 @@ function AgeTicker({
   const age = Date.now() - match.updatedAt;
   const staleTime = route.options.staleTime ?? router.options.defaultStaleTime ?? 0;
   const gcTime = route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1e3;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(getStyles().ageTicker(age > staleTime)), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(styles.ageTicker(age > staleTime)), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTime(age) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: "/" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: formatTime(staleTime) }),
@@ -656,11 +667,12 @@ function formatTime(ms) {
   });
   return formatter.format(values[chosenUnitIndex]) + units[chosenUnitIndex];
 }
-const stylesFactory = () => {
+const stylesFactory = (shadowDOMTarget) => {
   const { colors, font, size, alpha, shadow, border } = tokens.tokens;
   const { fontFamily, lineHeight, size: fontSize } = font;
+  const css = shadowDOMTarget ? goober__namespace.css.bind({ target: shadowDOMTarget }) : goober__namespace.css;
   return {
-    devtoolsPanelContainer: goober.css`
+    devtoolsPanelContainer: css`
       direction: ltr;
       position: fixed;
       bottom: 0;
@@ -672,33 +684,33 @@ const stylesFactory = () => {
       transform-origin: top;
     `,
     devtoolsPanelContainerVisibility: (isOpen) => {
-      return goober.css`
+      return css`
         visibility: ${isOpen ? "visible" : "hidden"};
       `;
     },
     devtoolsPanelContainerResizing: (isResizing) => {
       if (isResizing) {
-        return goober.css`
+        return css`
           transition: none;
         `;
       }
-      return goober.css`
+      return css`
         transition: all 0.4s ease;
       `;
     },
     devtoolsPanelContainerAnimation: (isOpen, height) => {
       if (isOpen) {
-        return goober.css`
+        return css`
           pointer-events: auto;
           transform: translateY(0);
         `;
       }
-      return goober.css`
+      return css`
         pointer-events: none;
         transform: translateY(${height}px);
       `;
     },
-    logo: goober.css`
+    logo: css`
       cursor: pointer;
       display: flex;
       flex-direction: column;
@@ -716,14 +728,14 @@ const stylesFactory = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    tanstackLogo: goober.css`
+    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: goober.css`
+    routerLogo: css`
       font-weight: ${font.weight.semibold};
       font-size: ${font.size.xs};
       background: linear-gradient(to right, #84cc16, #10b981);
@@ -733,7 +745,7 @@ const stylesFactory = () => {
       -webkit-text-fill-color: transparent;
       white-space: nowrap;
     `,
-    devtoolsPanel: goober.css`
+    devtoolsPanel: css`
       display: flex;
       font-size: ${fontSize.sm};
       font-family: ${fontFamily.sans};
@@ -747,7 +759,7 @@ const stylesFactory = () => {
         font-size: ${fontSize.xs};
       }
     `,
-    dragHandle: goober.css`
+    dragHandle: css`
       position: absolute;
       left: 0;
       top: 0;
@@ -759,7 +771,7 @@ const stylesFactory = () => {
         background-color: ${colors.purple[400]}${alpha[90]};
       }
     `,
-    firstContainer: goober.css`
+    firstContainer: css`
       flex: 1 1 500px;
       min-height: 40%;
       max-height: 100%;
@@ -768,14 +780,14 @@ const stylesFactory = () => {
       display: flex;
       flex-direction: column;
     `,
-    routerExplorerContainer: goober.css`
+    routerExplorerContainer: css`
       overflow-y: auto;
       flex: 1;
     `,
-    routerExplorer: goober.css`
+    routerExplorer: css`
       padding: ${tokens.tokens.size[2]};
     `,
-    row: goober.css`
+    row: css`
       display: flex;
       align-items: center;
       padding: ${tokens.tokens.size[2]} ${tokens.tokens.size[2.5]};
@@ -783,7 +795,7 @@ const stylesFactory = () => {
       border-bottom: ${colors.darkGray[500]} 1px solid;
       align-items: center;
     `,
-    detailsHeader: goober.css`
+    detailsHeader: css`
       font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
@@ -798,7 +810,7 @@ const stylesFactory = () => {
       display: flex;
       align-items: center;
     `,
-    maskedBadge: goober.css`
+    maskedBadge: css`
       background: ${colors.yellow[900]}${alpha[70]};
       color: ${colors.yellow[300]};
       display: inline-block;
@@ -808,16 +820,16 @@ const stylesFactory = () => {
       font-weight: ${font.weight.normal};
       border: 1px solid ${colors.yellow[300]};
     `,
-    maskedLocation: goober.css`
+    maskedLocation: css`
       color: ${colors.yellow[300]};
     `,
-    detailsContent: goober.css`
+    detailsContent: css`
       padding: ${tokens.tokens.size[1.5]} ${tokens.tokens.size[2]};
       display: flex;
       align-items: center;
       font-size: ${font.size.xs};
     `,
-    routeMatchesToggle: goober.css`
+    routeMatchesToggle: css`
       display: flex;
       align-items: center;
       border: 1px solid ${colors.gray[500]};
@@ -825,7 +837,7 @@ const stylesFactory = () => {
       overflow: hidden;
     `,
     routeMatchesToggleBtn: (active, showBorder) => {
-      const base = goober.css`
+      const base = css`
         appearance: none;
         border: none;
         font-size: 12px;
@@ -837,26 +849,26 @@ const stylesFactory = () => {
       `;
       const classes = [base];
       if (active) {
-        const activeStyles = goober.css`
+        const activeStyles = css`
           background: ${colors.darkGray[400]};
           color: ${colors.gray[300]};
         `;
         classes.push(activeStyles);
       } else {
-        const inactiveStyles = goober.css`
+        const inactiveStyles = css`
           color: ${colors.gray[500]};
           background: ${colors.darkGray[800]}${alpha[20]};
         `;
         classes.push(inactiveStyles);
       }
       if (showBorder) {
-        classes.push(goober.css`
+        classes.push(css`
           border-right: 1px solid ${tokens.tokens.colors.gray[500]};
         `);
       }
       return classes;
     },
-    detailsHeaderInfo: goober.css`
+    detailsHeaderInfo: css`
       flex: 1;
       justify-content: flex-end;
       display: flex;
@@ -865,7 +877,7 @@ const stylesFactory = () => {
       color: ${colors.gray[400]};
     `,
     matchRow: (active) => {
-      const base = goober.css`
+      const base = css`
         display: flex;
         border-bottom: 1px solid ${colors.darkGray[400]};
         cursor: pointer;
@@ -877,7 +889,7 @@ const stylesFactory = () => {
       `;
       const classes = [base];
       if (active) {
-        const activeStyles = goober.css`
+        const activeStyles = css`
           background: ${colors.darkGray[500]};
         `;
         classes.push(activeStyles);
@@ -885,7 +897,7 @@ const stylesFactory = () => {
       return classes;
     },
     matchIndicator: (color) => {
-      const base = goober.css`
+      const base = css`
         flex: 0 0 auto;
         width: ${size[3]};
         height: ${size[3]};
@@ -897,7 +909,7 @@ const stylesFactory = () => {
       `;
       const classes = [base];
       if (color === "gray") {
-        const grayStyles = goober.css`
+        const grayStyles = css`
           background: ${colors.gray[700]};
           border-color: ${colors.gray[400]};
         `;
@@ -905,12 +917,12 @@ const stylesFactory = () => {
       }
       return classes;
     },
-    matchID: goober.css`
+    matchID: css`
       flex: 1;
       line-height: ${lineHeight["xs"]};
     `,
     ageTicker: (showWarning) => {
-      const base = goober.css`
+      const base = css`
         display: flex;
         gap: ${size[1]};
         font-size: ${fontSize.xs};
@@ -920,14 +932,14 @@ const stylesFactory = () => {
       `;
       const classes = [base];
       if (showWarning) {
-        const warningStyles = goober.css`
+        const warningStyles = css`
           color: ${colors.yellow[400]};
         `;
         classes.push(warningStyles);
       }
       return classes;
     },
-    secondContainer: goober.css`
+    secondContainer: css`
       flex: 1 1 500px;
       min-height: 40%;
       max-height: 100%;
@@ -936,7 +948,7 @@ const stylesFactory = () => {
       display: flex;
       flex-direction: column;
     `,
-    thirdContainer: goober.css`
+    thirdContainer: css`
       flex: 1 1 500px;
       overflow: auto;
       display: flex;
@@ -948,7 +960,7 @@ const stylesFactory = () => {
         border-top: 2px solid ${colors.gray[700]};
       }
     `,
-    fourthContainer: goober.css`
+    fourthContainer: css`
       flex: 1 1 500px;
       min-height: 40%;
       max-height: 100%;
@@ -956,12 +968,12 @@ const stylesFactory = () => {
       display: flex;
       flex-direction: column;
     `,
-    routesContainer: goober.css`
+    routesContainer: css`
       overflow-x: auto;
       overflow-y: visible;
     `,
     routesRowContainer: (active, isMatch) => {
-      const base = goober.css`
+      const base = css`
         display: flex;
         border-bottom: 1px solid ${colors.darkGray[400]};
         align-items: center;
@@ -974,7 +986,7 @@ const stylesFactory = () => {
       `;
       const classes = [base];
       if (active) {
-        const activeStyles = goober.css`
+        const activeStyles = css`
           background: ${colors.darkGray[500]};
         `;
         classes.push(activeStyles);
@@ -982,7 +994,7 @@ const stylesFactory = () => {
       return classes;
     },
     routesRow: (isMatch) => {
-      const base = goober.css`
+      const base = css`
         flex: 1 0 auto;
         display: flex;
         justify-content: space-between;
@@ -992,44 +1004,44 @@ const stylesFactory = () => {
       `;
       const classes = [base];
       if (!isMatch) {
-        const matchStyles = goober.css`
+        const matchStyles = css`
           color: ${colors.gray[400]};
         `;
         classes.push(matchStyles);
       }
       return classes;
     },
-    routeParamInfo: goober.css`
+    routeParamInfo: css`
       color: ${colors.gray[400]};
       font-size: ${fontSize.xs};
       line-height: ${lineHeight["xs"]};
     `,
     nestedRouteRow: (isRoot) => {
-      const base = goober.css`
+      const base = css`
         margin-left: ${isRoot ? 0 : size[3.5]};
         border-left: ${isRoot ? "" : `solid 1px ${colors.gray[700]}`};
       `;
       return base;
     },
-    code: goober.css`
+    code: css`
       font-size: ${fontSize.xs};
       line-height: ${lineHeight["xs"]};
     `,
-    matchesContainer: goober.css`
+    matchesContainer: css`
       flex: 1 1 auto;
       overflow-y: auto;
     `,
-    cachedMatchesContainer: goober.css`
+    cachedMatchesContainer: css`
       flex: 1 1 auto;
       overflow-y: auto;
       max-height: 50%;
     `,
-    maskedBadgeContainer: goober.css`
+    maskedBadgeContainer: css`
       flex: 1;
       justify-content: flex-end;
       display: flex;
     `,
-    matchDetails: goober.css`
+    matchDetails: css`
       display: flex;
       flex-direction: column;
       padding: ${tokens.tokens.size[2]};
@@ -1046,7 +1058,7 @@ const stylesFactory = () => {
         redirected: "gray"
       };
       const color = isFetching && status === "success" ? isFetching === "beforeLoad" ? "purple" : "blue" : colorMap[status];
-      return goober.css`
+      return css`
         display: flex;
         justify-content: center;
         align-items: center;
@@ -1060,15 +1072,15 @@ const stylesFactory = () => {
         transition: all 0.25s ease-out;
       `;
     },
-    matchDetailsInfo: goober.css`
+    matchDetailsInfo: css`
       display: flex;
       justify-content: flex-end;
       flex: 1;
     `,
-    matchDetailsInfoLabel: goober.css`
+    matchDetailsInfoLabel: css`
       display: flex;
     `,
-    mainCloseBtn: goober.css`
+    mainCloseBtn: css`
       background: ${colors.darkGray[700]};
       padding: ${size[1]} ${size[2]} ${size[1]} ${size[1.5]};
       border-radius: ${border.radius.md};
@@ -1091,7 +1103,7 @@ const stylesFactory = () => {
       }
     `,
     mainCloseBtnPosition: (position) => {
-      const base = goober.css`
+      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]};` : ""}
@@ -1101,19 +1113,19 @@ const stylesFactory = () => {
     },
     mainCloseBtnAnimation: (isOpen) => {
       if (isOpen) {
-        return goober.css`
+        return css`
           opacity: 1;
           pointer-events: auto;
           visibility: visible;
         `;
       }
-      return goober.css`
+      return css`
         opacity: 0;
         pointer-events: none;
         visibility: hidden;
       `;
     },
-    routerLogoCloseButton: goober.css`
+    routerLogoCloseButton: css`
       font-weight: ${font.weight.semibold};
       font-size: ${font.size.xs};
       background: linear-gradient(to right, #98f30c, #00f4a3);
@@ -1123,14 +1135,14 @@ const stylesFactory = () => {
       -webkit-text-fill-color: transparent;
       white-space: nowrap;
     `,
-    mainCloseBtnDivider: goober.css`
+    mainCloseBtnDivider: css`
       width: 1px;
       background: ${tokens.tokens.colors.gray[600]};
       height: 100%;
       border-radius: 999999px;
       color: transparent;
     `,
-    mainCloseBtnIconContainer: goober.css`
+    mainCloseBtnIconContainer: css`
       position: relative;
       width: ${size[5]};
       height: ${size[5]};
@@ -1138,7 +1150,7 @@ const stylesFactory = () => {
       border-radius: 999999px;
       overflow: hidden;
     `,
-    mainCloseBtnIconOuter: goober.css`
+    mainCloseBtnIconOuter: css`
       width: ${size[5]};
       height: ${size[5]};
       position: absolute;
@@ -1147,7 +1159,7 @@ const stylesFactory = () => {
       transform: translate(-50%, -50%);
       filter: blur(3px) saturate(1.8) contrast(2);
     `,
-    mainCloseBtnIconInner: goober.css`
+    mainCloseBtnIconInner: css`
       width: ${size[4]};
       height: ${size[4]};
       position: absolute;
@@ -1155,7 +1167,7 @@ const stylesFactory = () => {
       left: 50%;
       transform: translate(-50%, -50%);
     `,
-    panelCloseBtn: goober.css`
+    panelCloseBtn: css`
       position: absolute;
       cursor: pointer;
       z-index: 100001;
@@ -1187,7 +1199,7 @@ const stylesFactory = () => {
         width: calc(100% + ${size[5]});
       }
     `,
-    panelCloseBtnIcon: goober.css`
+    panelCloseBtnIcon: css`
       color: ${colors.gray[400]};
       width: ${size[2]};
       height: ${size[2]};
@@ -1195,10 +1207,11 @@ const stylesFactory = () => {
   };
 };
 let _styles = null;
-function getStyles() {
+function useStyles() {
+  const shadowDomTarget = React.useContext(context.ShadowDomTargetContext);
   if (_styles)
     return _styles;
-  _styles = stylesFactory();
+  _styles = stylesFactory(shadowDomTarget);
   return _styles;
 }
 exports.TanStackRouterDevtools = TanStackRouterDevtools;