@tanstack/router-devtools 1.35.6 → 1.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/cjs/Explorer.cjs +51 -43
  2. package/dist/cjs/Explorer.cjs.map +1 -1
  3. package/dist/cjs/context.cjs +18 -0
  4. package/dist/cjs/context.cjs.map +1 -0
  5. package/dist/cjs/context.d.cts +9 -0
  6. package/dist/cjs/devtools.cjs +172 -159
  7. package/dist/cjs/devtools.cjs.map +1 -1
  8. package/dist/cjs/devtools.d.cts +9 -1
  9. package/dist/esm/Explorer.js +41 -34
  10. package/dist/esm/Explorer.js.map +1 -1
  11. package/dist/esm/context.d.ts +9 -0
  12. package/dist/esm/context.js +18 -0
  13. package/dist/esm/context.js.map +1 -0
  14. package/dist/esm/devtools.d.ts +9 -1
  15. package/dist/esm/devtools.js +93 -97
  16. package/dist/esm/devtools.js.map +1 -1
  17. package/package.json +1 -1
  18. package/src/Explorer.tsx +43 -34
  19. package/src/context.ts +22 -0
  20. package/src/devtools.tsx +120 -103
package/dist/esm/devtools.d.ts CHANGED
@@ -33,6 +33,10 @@ interface DevtoolsOptions {
33
33
  * A boolean variable indicating if the "lite" version of the library is being used
34
34
  */
35
35
  router?: AnyRouter;
36
+ /**
37
+ * Use this to attach the devtool's styles to specific element in the DOM.
38
+ */
39
+ shadowDOMTarget?: ShadowRoot;
36
40
  }
37
41
  interface DevtoolsPanelOptions {
38
42
  /**
@@ -59,7 +63,11 @@ interface DevtoolsPanelOptions {
59
63
  * A boolean variable indicating if the "lite" version of the library is being used
60
64
  */
61
65
  router?: AnyRouter;
66
+ /**
67
+ * Use this to attach the devtool's styles to specific element in the DOM.
68
+ */
69
+ shadowDOMTarget?: ShadowRoot;
62
70
  }
63
- export declare function TanStackRouterDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, router, }: DevtoolsOptions): React.ReactElement | null;
71
+ export declare function TanStackRouterDevtools(props: DevtoolsOptions): React.ReactElement | null;
64
72
  export declare const TanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
65
73
  export {};
package/dist/esm/devtools.js CHANGED
@@ -1,38 +1,35 @@
1
- import { jsxs, jsx, Fragment } from "react/jsx-runtime";
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import React__default from "react";
3
3
  import { useRouter, useRouterState, invariant, rootRouteId, trimPath } from "@tanstack/react-router";
4
- import { css } from "goober";
4
+ import * as goober from "goober";
5
5
  import { clsx } from "clsx";
6
6
  import useLocalStorage from "./useLocalStorage.js";
7
7
  import { useSafeState, useIsMounted, multiSortBy, getStatusColor, getRouteStatusColor } from "./utils.js";
8
8
  import Explorer from "./Explorer.js";
9
9
  import { tokens } from "./tokens.js";
10
10
  import { TanStackLogo } from "./logo.js";
11
+ import { ShadowDomTargetContext, DevtoolsOnCloseContext, useDevtoolsOnClose } from "./context.js";
11
12
  function Logo(props) {
12
13
  const { className, ...rest } = props;
13
- return /* @__PURE__ */ jsxs("button", { ...rest, className: clsx(getStyles().logo, className), children: [
14
- /* @__PURE__ */ jsx("div", { className: getStyles().tanstackLogo, children: "TANSTACK" }),
15
- /* @__PURE__ */ jsx("div", { className: getStyles().routerLogo, children: "React Router v1" })
14
+ const styles = useStyles();
15
+ return /* @__PURE__ */ jsxs("button", { ...rest, className: clsx(styles.logo, className), children: [
16
+ /* @__PURE__ */ jsx("div", { className: styles.tanstackLogo, children: "TANSTACK" }),
17
+ /* @__PURE__ */ jsx("div", { className: styles.routerLogo, children: "React Router v1" })
16
18
  ] });
17
19
  }
18
- const DevtoolsOnCloseContext = React__default.createContext(void 0);
19
- const useDevtoolsOnClose = () => {
20
- const context = React__default.useContext(DevtoolsOnCloseContext);
21
- if (!context) {
22
- throw new Error(
23
- "useDevtoolsOnClose must be used within a TanStackRouterDevtools component"
24
- );
25
- }
26
- return context;
27
- };
28
- function TanStackRouterDevtools({
20
+ function TanStackRouterDevtools(props) {
21
+ const { shadowDOMTarget } = props;
22
+ return /* @__PURE__ */ jsx(ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsx(FloatingTanStackRouterDevtools, { ...props }) });
23
+ }
24
+ function FloatingTanStackRouterDevtools({
29
25
  initialIsOpen,
30
26
  panelProps = {},
31
27
  closeButtonProps = {},
32
28
  toggleButtonProps = {},
33
29
  position = "bottom-left",
34
30
  containerElement: Container = "footer",
35
- router
31
+ router,
32
+ shadowDOMTarget
36
33
  }) {
37
34
  const [rootEl, setRootEl] = React__default.useState();
38
35
  const panelRef = React__default.useRef(null);
@@ -47,6 +44,7 @@ function TanStackRouterDevtools({
47
44
  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
48
45
  const [isResizing, setIsResizing] = useSafeState(false);
49
46
  const isMounted = useIsMounted();
47
+ const styles = useStyles();
50
48
  const handleDragStart = (panelElement, startEvent) => {
51
49
  if (startEvent.button !== 0)
52
50
  return;
@@ -137,10 +135,10 @@ function TanStackRouterDevtools({
137
135
  ...otherPanelProps,
138
136
  router,
139
137
  className: clsx(
140
- getStyles().devtoolsPanelContainer,
141
- getStyles().devtoolsPanelContainerVisibility(!!isOpen),
142
- getStyles().devtoolsPanelContainerResizing(isResizing),
143
- getStyles().devtoolsPanelContainerAnimation(
138
+ styles.devtoolsPanelContainer,
139
+ styles.devtoolsPanelContainerVisibility(!!isOpen),
140
+ styles.devtoolsPanelContainerResizing(isResizing),
141
+ styles.devtoolsPanelContainerAnimation(
144
142
  isResolvedOpen,
145
143
  resolvedHeight + 16
146
144
  )
@@ -151,7 +149,8 @@ function TanStackRouterDevtools({
151
149
  },
152
150
  isOpen: isResolvedOpen,
153
151
  setIsOpen,
154
- handleDragStart: (e) => handleDragStart(panelRef.current, e)
152
+ handleDragStart: (e) => handleDragStart(panelRef.current, e),
153
+ shadowDOMTarget
155
154
  }
156
155
  )
157
156
  }
@@ -167,25 +166,26 @@ function TanStackRouterDevtools({
167
166
  onToggleClick && onToggleClick(e);
168
167
  },
169
168
  className: clsx(
170
- getStyles().mainCloseBtn,
171
- getStyles().mainCloseBtnPosition(position),
172
- getStyles().mainCloseBtnAnimation(!isButtonClosed),
169
+ styles.mainCloseBtn,
170
+ styles.mainCloseBtnPosition(position),
171
+ styles.mainCloseBtnAnimation(!isButtonClosed),
173
172
  toggleButtonClassName
174
173
  ),
175
174
  children: [
176
- /* @__PURE__ */ jsxs("div", { className: getStyles().mainCloseBtnIconContainer, children: [
177
- /* @__PURE__ */ jsx("div", { className: getStyles().mainCloseBtnIconOuter, children: /* @__PURE__ */ jsx(TanStackLogo, {}) }),
178
- /* @__PURE__ */ jsx("div", { className: getStyles().mainCloseBtnIconInner, children: /* @__PURE__ */ jsx(TanStackLogo, {}) })
175
+ /* @__PURE__ */ jsxs("div", { className: styles.mainCloseBtnIconContainer, children: [
176
+ /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnIconOuter, children: /* @__PURE__ */ jsx(TanStackLogo, {}) }),
177
+ /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnIconInner, children: /* @__PURE__ */ jsx(TanStackLogo, {}) })
179
178
  ] }),
180
- /* @__PURE__ */ jsx("div", { className: getStyles().mainCloseBtnDivider, children: "-" }),
181
- /* @__PURE__ */ jsx("div", { className: getStyles().routerLogoCloseButton, children: "TanStack Router" })
179
+ /* @__PURE__ */ jsx("div", { className: styles.mainCloseBtnDivider, children: "-" }),
180
+ /* @__PURE__ */ jsx("div", { className: styles.routerLogoCloseButton, children: "TanStack Router" })
182
181
  ]
183
182
  }
184
183
  )
185
184
  ] });
186
185
  }
187
186
  const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackRouterDevtoolsPanel2(props, ref) {
188
- return /* @__PURE__ */ jsx(
187
+ const { shadowDOMTarget } = props;
188
+ return /* @__PURE__ */ jsx(ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsx(
189
189
  DevtoolsOnCloseContext.Provider,
190
190
  {
191
191
  value: {
@@ -194,7 +194,7 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
194
194
  },
195
195
  children: /* @__PURE__ */ jsx(BaseTanStackRouterDevtoolsPanel, { ref, ...props })
196
196
  }
197
- );
197
+ ) });
198
198
  });
199
199
  function RouteComp({
200
200
  router,
@@ -207,6 +207,7 @@ function RouteComp({
207
207
  const routerState = useRouterState({
208
208
  router
209
209
  });
210
+ const styles = useStyles();
210
211
  const matches = routerState.pendingMatches || routerState.matches;
211
212
  const match = routerState.matches.find((d) => d.routeId === route.id);
212
213
  const param = React__default.useMemo(() => {
@@ -238,31 +239,31 @@ function RouteComp({
238
239
  }
239
240
  },
240
241
  className: clsx(
241
- getStyles().routesRowContainer(route.id === activeId, !!match)
242
+ styles.routesRowContainer(route.id === activeId, !!match)
242
243
  ),
243
244
  children: [
244
245
  /* @__PURE__ */ jsx(
245
246
  "div",
246
247
  {
247
248
  className: clsx(
248
- getStyles().matchIndicator(getRouteStatusColor(matches, route))
249
+ styles.matchIndicator(getRouteStatusColor(matches, route))
249
250
  )
250
251
  }
251
252
  ),
252
- /* @__PURE__ */ jsxs("div", { className: clsx(getStyles().routesRow(!!match)), children: [
253
+ /* @__PURE__ */ jsxs("div", { className: clsx(styles.routesRow(!!match)), children: [
253
254
  /* @__PURE__ */ jsxs("div", { children: [
254
- /* @__PURE__ */ jsxs("code", { className: getStyles().code, children: [
255
+ /* @__PURE__ */ jsxs("code", { className: styles.code, children: [
255
256
  isRoot ? rootRouteId : route.path || trimPath(route.id),
256
257
  " "
257
258
  ] }),
258
- /* @__PURE__ */ jsx("code", { className: getStyles().routeParamInfo, children: param })
259
+ /* @__PURE__ */ jsx("code", { className: styles.routeParamInfo, children: param })
259
260
  ] }),
260
261
  /* @__PURE__ */ jsx(AgeTicker, { match, router })
261
262
  ] })
262
263
  ]
263
264
  }
264
265
  ),
265
- ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx("div", { className: getStyles().nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
266
+ ((_a = route.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx("div", { className: styles.nestedRouteRow(!!isRoot), children: [...route.children].sort((a, b) => {
266
267
  return a.rank - b.rank;
267
268
  }).map((r) => /* @__PURE__ */ jsx(
268
269
  RouteComp,
@@ -283,9 +284,11 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
283
284
  setIsOpen,
284
285
  handleDragStart,
285
286
  router: userRouter,
287
+ shadowDOMTarget,
286
288
  ...panelProps
287
289
  } = props;
288
290
  const { onCloseClick } = useDevtoolsOnClose();
291
+ const styles = useStyles();
289
292
  const { className, ...otherPanelProps } = panelProps;
290
293
  const contextRouter = useRouter({ warn: false });
291
294
  const router = userRouter ?? contextRouter;
@@ -327,23 +330,17 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
327
330
  {
328
331
  ref,
329
332
  className: clsx(
330
- getStyles().devtoolsPanel,
333
+ styles.devtoolsPanel,
331
334
  "TanStackRouterDevtoolsPanel",
332
335
  className
333
336
  ),
334
337
  ...otherPanelProps,
335
338
  children: [
336
- handleDragStart ? /* @__PURE__ */ jsx(
337
- "div",
338
- {
339
- className: getStyles().dragHandle,
340
- onMouseDown: handleDragStart
341
- }
342
- ) : null,
339
+ handleDragStart ? /* @__PURE__ */ jsx("div", { className: styles.dragHandle, onMouseDown: handleDragStart }) : null,
343
340
  /* @__PURE__ */ jsx(
344
341
  "button",
345
342
  {
346
- className: getStyles().panelCloseBtn,
343
+ className: styles.panelCloseBtn,
347
344
  onClick: (e) => {
348
345
  setIsOpen(false);
349
346
  onCloseClick(e);
@@ -356,7 +353,7 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
356
353
  height: "6",
357
354
  fill: "none",
358
355
  viewBox: "0 0 10 6",
359
- className: getStyles().panelCloseBtnIcon,
356
+ className: styles.panelCloseBtnIcon,
360
357
  children: /* @__PURE__ */ jsx(
361
358
  "path",
362
359
  {
@@ -371,8 +368,8 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
371
368
  )
372
369
  }
373
370
  ),
374
- /* @__PURE__ */ jsxs("div", { className: getStyles().firstContainer, children: [
375
- /* @__PURE__ */ jsx("div", { className: getStyles().row, children: /* @__PURE__ */ jsx(
371
+ /* @__PURE__ */ jsxs("div", { className: styles.firstContainer, children: [
372
+ /* @__PURE__ */ jsx("div", { className: styles.row, children: /* @__PURE__ */ jsx(
376
373
  Logo,
377
374
  {
378
375
  "aria-hidden": true,
@@ -382,7 +379,7 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
382
379
  }
383
380
  }
384
381
  ) }),
385
- /* @__PURE__ */ jsx("div", { className: getStyles().routerExplorerContainer, children: /* @__PURE__ */ jsx("div", { className: getStyles().routerExplorer, children: /* @__PURE__ */ jsx(
382
+ /* @__PURE__ */ jsx("div", { className: styles.routerExplorerContainer, children: /* @__PURE__ */ jsx("div", { className: styles.routerExplorer, children: /* @__PURE__ */ jsx(
386
383
  Explorer,
387
384
  {
388
385
  label: "Router",
@@ -424,18 +421,18 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
424
421
  }
425
422
  ) }) })
426
423
  ] }),
427
- /* @__PURE__ */ jsxs("div", { className: getStyles().secondContainer, children: [
428
- /* @__PURE__ */ jsxs("div", { className: getStyles().matchesContainer, children: [
429
- /* @__PURE__ */ jsxs("div", { className: getStyles().detailsHeader, children: [
424
+ /* @__PURE__ */ jsxs("div", { className: styles.secondContainer, children: [
425
+ /* @__PURE__ */ jsxs("div", { className: styles.matchesContainer, children: [
426
+ /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
430
427
  /* @__PURE__ */ jsx("span", { children: "Pathname" }),
431
- routerState.location.maskedLocation ? /* @__PURE__ */ jsx("div", { className: getStyles().maskedBadgeContainer, children: /* @__PURE__ */ jsx("span", { className: getStyles().maskedBadge, children: "masked" }) }) : null
428
+ routerState.location.maskedLocation ? /* @__PURE__ */ jsx("div", { className: styles.maskedBadgeContainer, children: /* @__PURE__ */ jsx("span", { className: styles.maskedBadge, children: "masked" }) }) : null
432
429
  ] }),
433
- /* @__PURE__ */ jsxs("div", { className: getStyles().detailsContent, children: [
430
+ /* @__PURE__ */ jsxs("div", { className: styles.detailsContent, children: [
434
431
  /* @__PURE__ */ jsx("code", { children: routerState.location.pathname }),
435
- routerState.location.maskedLocation ? /* @__PURE__ */ jsx("code", { className: getStyles().maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
432
+ routerState.location.maskedLocation ? /* @__PURE__ */ jsx("code", { className: styles.maskedLocation, children: routerState.location.maskedLocation.pathname }) : null
436
433
  ] }),
437
- /* @__PURE__ */ jsxs("div", { className: getStyles().detailsHeader, children: [
438
- /* @__PURE__ */ jsxs("div", { className: getStyles().routeMatchesToggle, children: [
434
+ /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
435
+ /* @__PURE__ */ jsxs("div", { className: styles.routeMatchesToggle, children: [
439
436
  /* @__PURE__ */ jsx(
440
437
  "button",
441
438
  {
@@ -444,9 +441,7 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
444
441
  setShowMatches(false);
445
442
  },
446
443
  disabled: !showMatches,
447
- className: clsx(
448
- getStyles().routeMatchesToggleBtn(!showMatches, true)
449
- ),
444
+ className: clsx(styles.routeMatchesToggleBtn(!showMatches, true)),
450
445
  children: "Routes"
451
446
  }
452
447
  ),
@@ -459,15 +454,15 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
459
454
  },
460
455
  disabled: showMatches,
461
456
  className: clsx(
462
- getStyles().routeMatchesToggleBtn(!!showMatches, false)
457
+ styles.routeMatchesToggleBtn(!!showMatches, false)
463
458
  ),
464
459
  children: "Matches"
465
460
  }
466
461
  )
467
462
  ] }),
468
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeaderInfo, children: /* @__PURE__ */ jsx("div", { children: "age / staleTime / gcTime" }) })
463
+ /* @__PURE__ */ jsx("div", { className: styles.detailsHeaderInfo, children: /* @__PURE__ */ jsx("div", { children: "age / staleTime / gcTime" }) })
469
464
  ] }),
470
- /* @__PURE__ */ jsx("div", { className: clsx(getStyles().routesContainer), children: !showMatches ? /* @__PURE__ */ jsx(
465
+ /* @__PURE__ */ jsx("div", { className: clsx(styles.routesContainer), children: !showMatches ? /* @__PURE__ */ jsx(
471
466
  RouteComp,
472
467
  {
473
468
  router,
@@ -484,22 +479,20 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
484
479
  role: "button",
485
480
  "aria-label": `Open match details for ${match.id}`,
486
481
  onClick: () => setActiveId(activeId === match.id ? "" : match.id),
487
- className: clsx(
488
- getStyles().matchRow(match === activeMatch)
489
- ),
482
+ className: clsx(styles.matchRow(match === activeMatch)),
490
483
  children: [
491
484
  /* @__PURE__ */ jsx(
492
485
  "div",
493
486
  {
494
487
  className: clsx(
495
- getStyles().matchIndicator(getStatusColor(match))
488
+ styles.matchIndicator(getStatusColor(match))
496
489
  )
497
490
  }
498
491
  ),
499
492
  /* @__PURE__ */ jsx(
500
493
  "code",
501
494
  {
502
- className: getStyles().matchID,
495
+ className: styles.matchID,
503
496
  children: `${match.routeId === rootRouteId ? rootRouteId : match.pathname}`
504
497
  }
505
498
  ),
@@ -511,10 +504,10 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
511
504
  }
512
505
  ) }) })
513
506
  ] }),
514
- routerState.cachedMatches.length ? /* @__PURE__ */ jsxs("div", { className: getStyles().cachedMatchesContainer, children: [
515
- /* @__PURE__ */ jsxs("div", { className: getStyles().detailsHeader, children: [
507
+ routerState.cachedMatches.length ? /* @__PURE__ */ jsxs("div", { className: styles.cachedMatchesContainer, children: [
508
+ /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
516
509
  /* @__PURE__ */ jsx("div", { children: "Cached Matches" }),
517
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeaderInfo, children: "age / staleTime / gcTime" })
510
+ /* @__PURE__ */ jsx("div", { className: styles.detailsHeaderInfo, children: "age / staleTime / gcTime" })
518
511
  ] }),
519
512
  /* @__PURE__ */ jsx("div", { children: routerState.cachedMatches.map((match) => {
520
513
  return /* @__PURE__ */ jsxs(
@@ -523,17 +516,17 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
523
516
  role: "button",
524
517
  "aria-label": `Open match details for ${match.id}`,
525
518
  onClick: () => setActiveId(activeId === match.id ? "" : match.id),
526
- className: clsx(getStyles().matchRow(match === activeMatch)),
519
+ className: clsx(styles.matchRow(match === activeMatch)),
527
520
  children: [
528
521
  /* @__PURE__ */ jsx(
529
522
  "div",
530
523
  {
531
524
  className: clsx(
532
- getStyles().matchIndicator(getStatusColor(match))
525
+ styles.matchIndicator(getStatusColor(match))
533
526
  )
534
527
  }
535
528
  ),
536
- /* @__PURE__ */ jsx("code", { className: getStyles().matchID, children: `${match.id}` }),
529
+ /* @__PURE__ */ jsx("code", { className: styles.matchID, children: `${match.id}` }),
537
530
  /* @__PURE__ */ jsx(AgeTicker, { match, router })
538
531
  ]
539
532
  },
@@ -542,37 +535,37 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
542
535
  }) })
543
536
  ] }) : null
544
537
  ] }),
545
- activeMatch ? /* @__PURE__ */ jsxs("div", { className: getStyles().thirdContainer, children: [
546
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeader, children: "Match Details" }),
547
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: getStyles().matchDetails, children: [
538
+ activeMatch ? /* @__PURE__ */ jsxs("div", { className: styles.thirdContainer, children: [
539
+ /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Match Details" }),
540
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.matchDetails, children: [
548
541
  /* @__PURE__ */ jsx(
549
542
  "div",
550
543
  {
551
- className: getStyles().matchStatus(
544
+ className: styles.matchStatus(
552
545
  activeMatch.status,
553
546
  activeMatch.isFetching
554
547
  ),
555
548
  children: /* @__PURE__ */ jsx("div", { children: activeMatch.status === "success" && activeMatch.isFetching ? "fetching" : activeMatch.status })
556
549
  }
557
550
  ),
558
- /* @__PURE__ */ jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
551
+ /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
559
552
  /* @__PURE__ */ jsx("div", { children: "ID:" }),
560
- /* @__PURE__ */ jsx("div", { className: getStyles().matchDetailsInfo, children: /* @__PURE__ */ jsx("code", { children: activeMatch.id }) })
553
+ /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: /* @__PURE__ */ jsx("code", { children: activeMatch.id }) })
561
554
  ] }),
562
- /* @__PURE__ */ jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
555
+ /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
563
556
  /* @__PURE__ */ jsx("div", { children: "State:" }),
564
- /* @__PURE__ */ jsx("div", { className: getStyles().matchDetailsInfo, children: ((_a = routerState.pendingMatches) == null ? void 0 : _a.find(
557
+ /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: ((_a = routerState.pendingMatches) == null ? void 0 : _a.find(
565
558
  (d) => d.id === activeMatch.id
566
559
  )) ? "Pending" : routerState.matches.find((d) => d.id === activeMatch.id) ? "Active" : "Cached" })
567
560
  ] }),
568
- /* @__PURE__ */ jsxs("div", { className: getStyles().matchDetailsInfoLabel, children: [
561
+ /* @__PURE__ */ jsxs("div", { className: styles.matchDetailsInfoLabel, children: [
569
562
  /* @__PURE__ */ jsx("div", { children: "Last Updated:" }),
570
- /* @__PURE__ */ jsx("div", { className: getStyles().matchDetailsInfo, children: activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : "N/A" })
563
+ /* @__PURE__ */ jsx("div", { className: styles.matchDetailsInfo, children: activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : "N/A" })
571
564
  ] })
572
565
  ] }) }),
573
566
  activeMatch.loaderData ? /* @__PURE__ */ jsxs(Fragment, { children: [
574
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeader, children: "Loader Data" }),
575
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsx(
567
+ /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Loader Data" }),
568
+ /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(
576
569
  Explorer,
577
570
  {
578
571
  label: "loaderData",
@@ -581,12 +574,12 @@ const BaseTanStackRouterDevtoolsPanel = React__default.forwardRef(function BaseT
581
574
  }
582
575
  ) })
583
576
  ] }) : null,
584
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeader, children: "Explorer" }),
585
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsx(Explorer, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
577
+ /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Explorer" }),
578
+ /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(Explorer, { label: "Match", value: activeMatch, defaultExpanded: {} }) })
586
579
  ] }) : null,
587
- hasSearch ? /* @__PURE__ */ jsxs("div", { className: getStyles().fourthContainer, children: [
588
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsHeader, children: "Search Params" }),
589
- /* @__PURE__ */ jsx("div", { className: getStyles().detailsContent, children: /* @__PURE__ */ jsx(
580
+ hasSearch ? /* @__PURE__ */ jsxs("div", { className: styles.fourthContainer, children: [
581
+ /* @__PURE__ */ jsx("div", { className: styles.detailsHeader, children: "Search Params" }),
582
+ /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: /* @__PURE__ */ jsx(
590
583
  Explorer,
591
584
  {
592
585
  value: routerState.location.search,
@@ -608,6 +601,7 @@ function AgeTicker({
608
601
  match,
609
602
  router
610
603
  }) {
604
+ const styles = useStyles();
611
605
  const rerender = React__default.useReducer(
612
606
  () => ({}),
613
607
  () => ({})
@@ -630,7 +624,7 @@ function AgeTicker({
630
624
  const age = Date.now() - match.updatedAt;
631
625
  const staleTime = route.options.staleTime ?? router.options.defaultStaleTime ?? 0;
632
626
  const gcTime = route.options.gcTime ?? router.options.defaultGcTime ?? 30 * 60 * 1e3;
633
- return /* @__PURE__ */ jsxs("div", { className: clsx(getStyles().ageTicker(age > staleTime)), children: [
627
+ return /* @__PURE__ */ jsxs("div", { className: clsx(styles.ageTicker(age > staleTime)), children: [
634
628
  /* @__PURE__ */ jsx("div", { children: formatTime(age) }),
635
629
  /* @__PURE__ */ jsx("div", { children: "/" }),
636
630
  /* @__PURE__ */ jsx("div", { children: formatTime(staleTime) }),
@@ -654,9 +648,10 @@ function formatTime(ms) {
654
648
  });
655
649
  return formatter.format(values[chosenUnitIndex]) + units[chosenUnitIndex];
656
650
  }
657
- const stylesFactory = () => {
651
+ const stylesFactory = (shadowDOMTarget) => {
658
652
  const { colors, font, size, alpha, shadow, border } = tokens;
659
653
  const { fontFamily, lineHeight, size: fontSize } = font;
654
+ const css = shadowDOMTarget ? goober.css.bind({ target: shadowDOMTarget }) : goober.css;
660
655
  return {
661
656
  devtoolsPanelContainer: css`
662
657
  direction: ltr;
@@ -1193,10 +1188,11 @@ const stylesFactory = () => {
1193
1188
  };
1194
1189
  };
1195
1190
  let _styles = null;
1196
- function getStyles() {
1191
+ function useStyles() {
1192
+ const shadowDomTarget = React__default.useContext(ShadowDomTargetContext);
1197
1193
  if (_styles)
1198
1194
  return _styles;
1199
- _styles = stylesFactory();
1195
+ _styles = stylesFactory(shadowDomTarget);
1200
1196
  return _styles;
1201
1197
  }
1202
1198
  export {