@tanstack/router-devtools-core 1.121.19 → 1.121.21

package/dist/cjs/useStyles.d.cts

@@ -0,0 +1,55 @@
+import { Accessor } from 'solid-js';
+export declare function useStyles(): Accessor<{
+    devtoolsPanelContainer: string;
+    devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
+    devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => string;
+    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => string;
+    logo: string;
+    tanstackLogo: string;
+    routerLogo: string;
+    devtoolsPanel: string;
+    dragHandle: string;
+    firstContainer: string;
+    routerExplorerContainer: string;
+    routerExplorer: string;
+    row: string;
+    detailsHeader: string;
+    maskedBadge: string;
+    maskedLocation: string;
+    detailsContent: string;
+    routeMatchesToggle: string;
+    routeMatchesToggleBtn: (active: boolean, showBorder: boolean) => string[];
+    detailsHeaderInfo: string;
+    matchRow: (active: boolean) => string[];
+    matchIndicator: (color: "green" | "red" | "yellow" | "gray" | "blue" | "purple") => string[];
+    matchID: string;
+    ageTicker: (showWarning: boolean) => string[];
+    secondContainer: string;
+    thirdContainer: string;
+    fourthContainer: string;
+    routesContainer: string;
+    routesRowContainer: (active: boolean, isMatch: boolean) => string[];
+    routesRow: (isMatch: boolean) => string[];
+    routesRowInner: string;
+    routeParamInfo: string;
+    nestedRouteRow: (isRoot: boolean) => string;
+    code: string;
+    matchesContainer: string;
+    cachedMatchesContainer: string;
+    maskedBadgeContainer: string;
+    matchDetails: string;
+    matchStatus: (status: "pending" | "success" | "error" | "notFound" | "redirected", isFetching: false | "beforeLoad" | "loader") => string;
+    matchDetailsInfo: string;
+    matchDetailsInfoLabel: string;
+    mainCloseBtn: string;
+    mainCloseBtnPosition: (position: "top-left" | "top-right" | "bottom-left" | "bottom-right") => string;
+    mainCloseBtnAnimation: (isOpen: boolean) => string;
+    routerLogoCloseButton: string;
+    mainCloseBtnDivider: string;
+    mainCloseBtnIconContainer: string;
+    mainCloseBtnIconOuter: string;
+    mainCloseBtnIconInner: string;
+    panelCloseBtn: string;
+    panelCloseBtnIcon: string;
+    navigateButton: string;
+}>;

package/dist/cjs/utils.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("solid-js/web");
+const solidJs = require("solid-js");
+const isServer = typeof window === "undefined";
+function getStatusColor(match) {
+  const colorMap = {
+    pending: "yellow",
+    success: "green",
+    error: "red",
+    notFound: "purple",
+    redirected: "gray"
+  };
+  return match.isFetching && match.status === "success" ? match.isFetching === "beforeLoad" ? "purple" : "blue" : colorMap[match.status];
+}
+function getRouteStatusColor(matches, route) {
+  const found = matches.find((d) => d.routeId === route.id);
+  if (!found) return "gray";
+  return getStatusColor(found);
+}
+function useIsMounted() {
+  const [isMounted, setIsMounted] = solidJs.createSignal(false);
+  const effect = isServer ? solidJs.createEffect : solidJs.createRenderEffect;
+  effect(() => {
+    setIsMounted(true);
+  });
+  return isMounted;
+}
+const displayValue = (value) => {
+  const name = Object.getOwnPropertyNames(Object(value));
+  const newValue = typeof value === "bigint" ? `${value.toString()}n` : value;
+  try {
+    return JSON.stringify(newValue, name);
+  } catch (e) {
+    return `unable to stringify`;
+  }
+};
+function multiSortBy(arr, accessors = [(d) => d]) {
+  return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => {
+    for (const accessor of accessors) {
+      const ao = accessor(a);
+      const bo = accessor(b);
+      if (typeof ao === "undefined") {
+        if (typeof bo === "undefined") {
+          continue;
+        }
+        return 1;
+      }
+      if (ao === bo) {
+        continue;
+      }
+      return ao > bo ? 1 : -1;
+    }
+    return ai - bi;
+  }).map(([d]) => d);
+}
+exports.displayValue = displayValue;
+exports.getRouteStatusColor = getRouteStatusColor;
+exports.getStatusColor = getStatusColor;
+exports.isServer = isServer;
+exports.multiSortBy = multiSortBy;
+exports.useIsMounted = useIsMounted;
+//# sourceMappingURL=utils.cjs.map

package/dist/cjs/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../src/utils.tsx"],"sourcesContent":["import { Dynamic } from 'solid-js/web'\nimport { createEffect, createRenderEffect, createSignal } from 'solid-js'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\nimport type { AnyRoute, AnyRouteMatch } from '@tanstack/router-core'\n\nimport type { Theme } from './theme'\nimport type { JSX } from 'solid-js'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n  ? JSX.ButtonHTMLAttributes<HTMLButtonElement>\n  : T extends 'input'\n    ? JSX.InputHTMLAttributes<HTMLInputElement>\n    : T extends 'select'\n      ? JSX.SelectHTMLAttributes<HTMLSelectElement>\n      : T extends keyof HTMLElementTagNameMap\n        ? JSX.HTMLAttributes<HTMLElementTagNameMap[T]>\n        : never\n\nexport function getStatusColor(match: AnyRouteMatch) {\n  const colorMap = {\n    pending: 'yellow',\n    success: 'green',\n    error: 'red',\n    notFound: 'purple',\n    redirected: 'gray',\n  } as const\n\n  return match.isFetching && match.status === 'success'\n    ? match.isFetching === 'beforeLoad'\n      ? 'purple'\n      : 'blue'\n    : colorMap[match.status]\n}\n\nexport function getRouteStatusColor(\n  matches: Array<AnyRouteMatch>,\n  route: AnyRoute,\n) {\n  const found = matches.find((d) => d.routeId === route.id)\n  if (!found) return 'gray'\n  return getStatusColor(found)\n}\n\ntype Styles =\n  | JSX.CSSProperties\n  | ((props: Record<string, any>, theme: Theme) => JSX.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n  type: T,\n  newStyles: Styles,\n  queries: Record<string, Styles> = {},\n) {\n  return ({\n    ref,\n    style,\n    ...rest\n  }: StyledComponent<T> & {\n    ref?: HTMLElementTagNameMap[T] | undefined\n  }) => {\n    const theme = useTheme()\n\n    const mediaStyles = Object.entries(queries).reduce(\n      (current, [key, value]) => {\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n        return useMediaQuery(key)\n          ? {\n              ...current,\n              ...(typeof value === 'function' ? value(rest, theme) : value),\n            }\n          : current\n      },\n      {},\n    )\n\n    const baseStyles =\n      typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles\n\n    // Handle style being either a string or an object\n    const combinedStyles =\n      typeof style === 'string'\n        ? { ...baseStyles, ...mediaStyles, cssText: style }\n        : { ...baseStyles, ...style, ...mediaStyles }\n\n    return (\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      <Dynamic component={type} {...rest} style={combinedStyles} ref={ref} />\n    )\n  }\n}\n\nexport function useIsMounted() {\n  const [isMounted, setIsMounted] = createSignal(false)\n\n  const effect = isServer ? createEffect : createRenderEffect\n\n  effect(() => {\n    setIsMounted(true)\n  })\n\n  return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n  const name = Object.getOwnPropertyNames(Object(value))\n  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n  try {\n    return JSON.stringify(newValue, name)\n  } catch (e) {\n    return `unable to stringify`\n  }\n}\n\n/**\n * This hook is a safe useState version which schedules state updates in microtasks\n * to prevent updating a component state while React is rendering different components\n * or when the component is not mounted anymore.\n */\nexport function useSafeState<T>(initialState: T): [T, (value: T) => void] {\n  const isMounted = useIsMounted()\n  const [state, setState] = createSignal(initialState)\n\n  const safeSetState = (value: T) => {\n    scheduleMicrotask(() => {\n      if (isMounted()) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        setState(value)\n      }\n    })\n  }\n\n  return [state(), safeSetState]\n}\n\n/**\n * Schedules a microtask.\n * This can be useful to schedule state updates after rendering.\n */\nfunction scheduleMicrotask(callback: () => void) {\n  Promise.resolve()\n    .then(callback)\n    .catch((error) =>\n      setTimeout(() => {\n        throw error\n      }),\n    )\n}\n\nexport function multiSortBy<T>(\n  arr: Array<T>,\n  accessors: Array<(item: T) => any> = [(d) => d],\n): Array<T> {\n  return arr\n    .map((d, i) => [d, i] as const)\n    .sort(([a, ai], [b, bi]) => {\n      for (const accessor of accessors) {\n        const ao = accessor(a)\n        const bo = accessor(b)\n\n        if (typeof ao === 'undefined') {\n          if (typeof bo === 'undefined') {\n            continue\n          }\n          return 1\n        }\n\n        if (ao === bo) {\n          continue\n        }\n\n        return ao > bo ? 1 : -1\n      }\n\n      return ai - bi\n    })\n    .map(([d]) => d)\n}\n"],"names":["isServer","window","getStatusColor","match","colorMap","pending","success","error","notFound","redirected","isFetching","status","getRouteStatusColor","matches","route","found","find","d","routeId","id","useIsMounted","isMounted","setIsMounted","createSignal","effect","createEffect","createRenderEffect","displayValue","value","name","Object","getOwnPropertyNames","newValue","toString","JSON","stringify","e","multiSortBy","arr","accessors","map","i","sort","a","ai","b","bi","accessor","ao","bo"],"mappings":";;;;AASaA,MAAAA,WAAW,OAAOC,WAAW;AAYnC,SAASC,eAAeC,OAAsB;AACnD,QAAMC,WAAW;AAAA,IACfC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,YAAY;AAAA,EACd;AAEA,SAAON,MAAMO,cAAcP,MAAMQ,WAAW,YACxCR,MAAMO,eAAe,eACnB,WACA,SACFN,SAASD,MAAMQ,MAAM;AAC3B;AAEgBC,SAAAA,oBACdC,SACAC,OACA;AACA,QAAMC,QAAQF,QAAQG,KAAMC,OAAMA,EAAEC,YAAYJ,MAAMK,EAAE;AACpD,MAAA,CAACJ,MAAc,QAAA;AACnB,SAAOb,eAAea,KAAK;AAC7B;AAkDO,SAASK,eAAe;AAC7B,QAAM,CAACC,WAAWC,YAAY,IAAIC,QAAAA,aAAa,KAAK;AAE9CC,QAAAA,SAASxB,WAAWyB,QAAAA,eAAeC,QAAAA;AAEzCF,SAAO,MAAM;AACXF,iBAAa,IAAI;AAAA,EAAA,CAClB;AAEMD,SAAAA;AACT;AAMaM,MAAAA,eAAeA,CAACC,UAAmB;AAC9C,QAAMC,OAAOC,OAAOC,oBAAoBD,OAAOF,KAAK,CAAC;AAC/CI,QAAAA,WAAW,OAAOJ,UAAU,WAAW,GAAGA,MAAMK,SAAAA,CAAU,MAAML;AAClE,MAAA;AACKM,WAAAA,KAAKC,UAAUH,UAAUH,IAAI;AAAA,WAC7BO,GAAG;AACH,WAAA;AAAA,EAAA;AAEX;AAsCO,SAASC,YACdC,KACAC,YAAqC,CAAEtB,CAAAA,MAAMA,CAAC,GACpC;AACV,SAAOqB,IACJE,IAAI,CAACvB,GAAGwB,MAAM,CAACxB,GAAGwB,CAAC,CAAU,EAC7BC,KAAK,CAAC,CAACC,GAAGC,EAAE,GAAG,CAACC,GAAGC,EAAE,MAAM;AAC1B,eAAWC,YAAYR,WAAW;AAC1BS,YAAAA,KAAKD,SAASJ,CAAC;AACfM,YAAAA,KAAKF,SAASF,CAAC;AAEjB,UAAA,OAAOG,OAAO,aAAa;AACzB,YAAA,OAAOC,OAAO,aAAa;AAC7B;AAAA,QAAA;AAEK,eAAA;AAAA,MAAA;AAGT,UAAID,OAAOC,IAAI;AACb;AAAA,MAAA;AAGKD,aAAAA,KAAKC,KAAK,IAAI;AAAA,IAAA;AAGvB,WAAOL,KAAKE;AAAAA,EACb,CAAA,EACAN,IAAI,CAAC,CAACvB,CAAC,MAAMA,CAAC;AACnB;;;;;;;"}

package/dist/cjs/utils.d.cts

@@ -0,0 +1,25 @@
+import { AnyRoute, AnyRouteMatch } from '@tanstack/router-core';
+import { Theme } from './theme.cjs';
+import { JSX } from 'solid-js';
+export declare const isServer: boolean;
+type StyledComponent<T> = T extends 'button' ? JSX.ButtonHTMLAttributes<HTMLButtonElement> : T extends 'input' ? JSX.InputHTMLAttributes<HTMLInputElement> : T extends 'select' ? JSX.SelectHTMLAttributes<HTMLSelectElement> : T extends keyof HTMLElementTagNameMap ? JSX.HTMLAttributes<HTMLElementTagNameMap[T]> : never;
+export declare function getStatusColor(match: AnyRouteMatch): "yellow" | "green" | "red" | "purple" | "gray" | "blue";
+export declare function getRouteStatusColor(matches: Array<AnyRouteMatch>, route: AnyRoute): "yellow" | "green" | "red" | "purple" | "gray" | "blue";
+type Styles = JSX.CSSProperties | ((props: Record<string, any>, theme: Theme) => JSX.CSSProperties);
+export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): ({ ref, style, ...rest }: StyledComponent<T> & {
+    ref?: HTMLElementTagNameMap[T] | undefined;
+}) => JSX.Element;
+export declare function useIsMounted(): import('solid-js').Accessor<boolean>;
+/**
+ * Displays a string regardless the type of the data
+ * @param {unknown} value Value to be stringified
+ */
+export declare const displayValue: (value: unknown) => string;
+/**
+ * This hook is a safe useState version which schedules state updates in microtasks
+ * to prevent updating a component state while React is rendering different components
+ * or when the component is not mounted anymore.
+ */
+export declare function useSafeState<T>(initialState: T): [T, (value: T) => void];
+export declare function multiSortBy<T>(arr: Array<T>, accessors?: Array<(item: T) => any>): Array<T>;
+export {};

package/dist/esm/AgeTicker.d.ts

@@ -0,0 +1,6 @@
+import { AnyRouteMatch, AnyRouter } from '@tanstack/router-core';
+import { Accessor } from 'solid-js';
+export declare function AgeTicker({ match, router, }: {
+    match?: AnyRouteMatch;
+    router: Accessor<AnyRouter>;
+}): import("solid-js").JSX.Element;

package/dist/esm/AgeTicker.js

@@ -0,0 +1,47 @@
+import { template, insert, effect, className } from "solid-js/web";
+import { clsx } from "clsx";
+import { useStyles } from "./useStyles.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><div></div><div>/</div><div></div><div>/</div><div>`);
+function formatTime(ms) {
+  const units = ["s", "min", "h", "d"];
+  const values = [ms / 1e3, ms / 6e4, ms / 36e5, ms / 864e5];
+  let chosenUnitIndex = 0;
+  for (let i = 1; i < values.length; i++) {
+    if (values[i] < 1) break;
+    chosenUnitIndex = i;
+  }
+  const formatter = new Intl.NumberFormat(navigator.language, {
+    compactDisplay: "short",
+    notation: "compact",
+    maximumFractionDigits: 0
+  });
+  return formatter.format(values[chosenUnitIndex]) + units[chosenUnitIndex];
+}
+function AgeTicker({
+  match,
+  router
+}) {
+  const styles = useStyles();
+  if (!match) {
+    return null;
+  }
+  const route = router().looseRoutesById[match.routeId];
+  if (!route.options.loader) {
+    return null;
+  }
+  const age = Date.now() - match.updatedAt;
+  const staleTime = route.options.staleTime ?? router().options.defaultStaleTime ?? 0;
+  const gcTime = route.options.gcTime ?? router().options.defaultGcTime ?? 30 * 60 * 1e3;
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
+    insert(_el$2, () => formatTime(age));
+    insert(_el$4, () => formatTime(staleTime));
+    insert(_el$6, () => formatTime(gcTime));
+    effect(() => className(_el$, clsx(styles().ageTicker(age > staleTime))));
+    return _el$;
+  })();
+}
+export {
+  AgeTicker
+};
+//# sourceMappingURL=AgeTicker.js.map

package/dist/esm/AgeTicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgeTicker.js","sources":["../../src/AgeTicker.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\nimport { useStyles } from './useStyles'\nimport type { AnyRouteMatch, AnyRouter } from '@tanstack/router-core'\nimport type { Accessor } from 'solid-js'\n\nfunction formatTime(ms: number) {\n  const units = ['s', 'min', 'h', 'd']\n  const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000]\n\n  let chosenUnitIndex = 0\n  for (let i = 1; i < values.length; i++) {\n    if (values[i]! < 1) break\n    chosenUnitIndex = i\n  }\n\n  const formatter = new Intl.NumberFormat(navigator.language, {\n    compactDisplay: 'short',\n    notation: 'compact',\n    maximumFractionDigits: 0,\n  })\n\n  return formatter.format(values[chosenUnitIndex]!) + units[chosenUnitIndex]\n}\n\nexport function AgeTicker({\n  match,\n  router,\n}: {\n  match?: AnyRouteMatch\n  router: Accessor<AnyRouter>\n}) {\n  const styles = useStyles()\n\n  if (!match) {\n    return null\n  }\n\n  const route = router().looseRoutesById[match.routeId]!\n\n  if (!route.options.loader) {\n    return null\n  }\n\n  const age = Date.now() - match.updatedAt\n  const staleTime =\n    route.options.staleTime ?? router().options.defaultStaleTime ?? 0\n  const gcTime =\n    route.options.gcTime ?? router().options.defaultGcTime ?? 30 * 60 * 1000\n\n  return (\n    <div class={cx(styles().ageTicker(age > staleTime))}>\n      <div>{formatTime(age)}</div>\n      <div>/</div>\n      <div>{formatTime(staleTime)}</div>\n      <div>/</div>\n      <div>{formatTime(gcTime)}</div>\n    </div>\n  )\n}\n"],"names":["formatTime","ms","units","values","chosenUnitIndex","i","length","formatter","Intl","NumberFormat","navigator","language","compactDisplay","notation","maximumFractionDigits","format","AgeTicker","match","router","styles","useStyles","route","looseRoutesById","routeId","options","loader","age","Date","now","updatedAt","staleTime","defaultStaleTime","gcTime","defaultGcTime","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_$insert","_$className","cx","ageTicker"],"mappings":";;;;AAKA,SAASA,WAAWC,IAAY;AAC9B,QAAMC,QAAQ,CAAC,KAAK,OAAO,KAAK,GAAG;AAC7BC,QAAAA,SAAS,CAACF,KAAK,KAAMA,KAAK,KAAOA,KAAK,MAASA,KAAK,KAAQ;AAElE,MAAIG,kBAAkB;AACtB,WAASC,IAAI,GAAGA,IAAIF,OAAOG,QAAQD,KAAK;AAClCF,QAAAA,OAAOE,CAAC,IAAK,EAAG;AACFA,sBAAAA;AAAAA,EAAAA;AAGpB,QAAME,YAAY,IAAIC,KAAKC,aAAaC,UAAUC,UAAU;AAAA,IAC1DC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IACVC,uBAAuB;AAAA,EAAA,CACxB;AAED,SAAOP,UAAUQ,OAAOZ,OAAOC,eAAe,CAAE,IAAIF,MAAME,eAAe;AAC3E;AAEO,SAASY,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAIF,GAAG;AACD,QAAMC,SAASC,UAAU;AAEzB,MAAI,CAACH,OAAO;AACH,WAAA;AAAA,EAAA;AAGT,QAAMI,QAAQH,OAAAA,EAASI,gBAAgBL,MAAMM,OAAO;AAEhD,MAAA,CAACF,MAAMG,QAAQC,QAAQ;AAClB,WAAA;AAAA,EAAA;AAGT,QAAMC,MAAMC,KAAKC,IAAI,IAAIX,MAAMY;AAC/B,QAAMC,YACJT,MAAMG,QAAQM,aAAaZ,SAASM,QAAQO,oBAAoB;AAC5DC,QAAAA,SACJX,MAAMG,QAAQQ,UAAUd,SAASM,QAAQS,iBAAiB,KAAK,KAAK;AAEtE,UAAA,MAAA;AAAA,QAAAC,OAAAC,UAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAC,aAAAE,QAAAD,MAAAD,aAAAG,QAAAD,MAAAF;AAAAI,WAAAP,OAAA,MAEUpC,WAAW0B,GAAG,CAAC;AAAAiB,WAAAH,OAAA,MAEfxC,WAAW8B,SAAS,CAAC;AAAAa,WAAAD,OAAA,MAErB1C,WAAWgC,MAAM,CAAC;iBAAAY,UAAAV,MALdW,KAAG1B,SAAS2B,UAAUpB,MAAMI,SAAS,CAAC,CAAC,CAAA;AAAAI,WAAAA;AAAAA,EAAAA,GAAA;AAQvD;"}

package/dist/esm/BaseTanStackRouterDevtoolsPanel.d.ts

@@ -0,0 +1,35 @@
+import { AnyRouter } from '@tanstack/router-core';
+import { Accessor, JSX } from 'solid-js';
+export interface BaseDevtoolsPanelOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: Accessor<JSX.CSSProperties>;
+    /**
+     * The standard React class property used to style a component with classes
+     */
+    className?: Accessor<string>;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    handleDragStart?: (e: any) => void;
+    /**
+     * A boolean variable indicating if the "lite" version of the library is being used
+     */
+    router: Accessor<AnyRouter>;
+    routerState: Accessor<any>;
+    /**
+     * Use this to attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+}
+export declare const BaseTanStackRouterDevtoolsPanel: ({ ...props }: BaseDevtoolsPanelOptions) => JSX.Element;
+export default BaseTanStackRouterDevtoolsPanel;