@tanstack/router-devtools 1.112.0 → 1.112.5

package/dist/cjs/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\nimport type {\n  AnyRootRoute,\n  AnyRoute,\n  AnyRouteMatch,\n} from '@tanstack/react-router'\n\nimport type { Theme } from './theme'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n  ? React.DetailedHTMLProps<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >\n  : T extends 'input'\n    ? React.DetailedHTMLProps<\n        React.InputHTMLAttributes<HTMLInputElement>,\n        HTMLInputElement\n      >\n    : T extends 'select'\n      ? React.DetailedHTMLProps<\n          React.SelectHTMLAttributes<HTMLSelectElement>,\n          HTMLSelectElement\n        >\n      : T extends keyof HTMLElementTagNameMap\n        ? React.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 | AnyRootRoute,\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  | React.CSSProperties\n  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n  type: T,\n  newStyles: Styles,\n  queries: Record<string, Styles> = {},\n) {\n  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n    ({ style, ...rest }, ref) => {\n      const theme = useTheme()\n\n      const mediaStyles = Object.entries(queries).reduce(\n        (current, [key, value]) => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          return useMediaQuery(key)\n            ? {\n                ...current,\n                ...(typeof value === 'function' ? value(rest, theme) : value),\n              }\n            : current\n        },\n        {},\n      )\n\n      return React.createElement(type, {\n        ...rest,\n        style: {\n          ...(typeof newStyles === 'function'\n            ? newStyles(rest, theme)\n            : newStyles),\n          ...style,\n          ...mediaStyles,\n        },\n        ref,\n      })\n    },\n  )\n}\n\nexport function useIsMounted() {\n  const [isMounted, setIsMounted] = React.useState(false)\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\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] = React.useState(initialState)\n\n  const safeSetState = React.useCallback(\n    (value: T) => {\n      scheduleMicrotask(() => {\n        if (isMounted) {\n          setState(value)\n        }\n      })\n    },\n    [isMounted],\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":[],"mappings":";;;AAWa,MAAA,WAAW,OAAO,WAAW;AAqBnC,SAAS,eAAe,OAAsB;AACnD,QAAM,WAAW;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAEA,SAAO,MAAM,cAAc,MAAM,WAAW,YACxC,MAAM,eAAe,eACnB,WACA,SACF,SAAS,MAAM,MAAM;AAC3B;AAEgB,SAAA,oBACd,SACA,OACA;AACM,QAAA,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,MAAM,EAAE;AACpD,MAAA,CAAC,MAAc,QAAA;AACnB,SAAO,eAAe,KAAK;AAC7B;AA2CO,SAAS,eAAe;AAC7B,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AAEtD,QAAM,WAAW,cAAc,iBAAiB,EAAE,MAAM;AACtD,iBAAa,IAAI;AAAA,EACnB,GAAG,EAAE;AAEE,SAAA;AACT;AAMa,MAAA,eAAe,CAAC,UAAmB;AAC9C,QAAM,OAAO,OAAO,oBAAoB,OAAO,KAAK,CAAC;AAC/C,QAAA,WAAW,OAAO,UAAU,WAAW,GAAG,MAAM,SAAA,CAAU,MAAM;AAClE,MAAA;AACK,WAAA,KAAK,UAAU,UAAU,IAAI;AAAA,WAC7B,GAAG;AACH,WAAA;AAAA,EAAA;AAEX;AAOO,SAAS,aAAgB,cAA0C;AACxE,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,YAAY;AAErD,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,UAAa;AACZ,wBAAkB,MAAM;AACtB,YAAI,WAAW;AACb,mBAAS,KAAK;AAAA,QAAA;AAAA,MAChB,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEO,SAAA,CAAC,OAAO,YAAY;AAC7B;AAMA,SAAS,kBAAkB,UAAsB;AAC/C,UAAQ,QAAQ,EACb,KAAK,QAAQ,EACb;AAAA,IAAM,CAAC,UACN,WAAW,MAAM;AACT,YAAA;AAAA,IACP,CAAA;AAAA,EACH;AACJ;AAEO,SAAS,YACd,KACA,YAAqC,CAAC,CAAC,MAAM,CAAC,GACpC;AACV,SAAO,IACJ,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAU,EAC7B,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,MAAM;AAC1B,eAAW,YAAY,WAAW;AAC1B,YAAA,KAAK,SAAS,CAAC;AACf,YAAA,KAAK,SAAS,CAAC;AAEjB,UAAA,OAAO,OAAO,aAAa;AACzB,YAAA,OAAO,OAAO,aAAa;AAC7B;AAAA,QAAA;AAEK,eAAA;AAAA,MAAA;AAGT,UAAI,OAAO,IAAI;AACb;AAAA,MAAA;AAGK,aAAA,KAAK,KAAK,IAAI;AAAA,IAAA;AAGvB,WAAO,KAAK;AAAA,EACb,CAAA,EACA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACnB;;;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\nimport type {\n  AnyRootRoute,\n  AnyRoute,\n  AnyRouteMatch,\n} from '@tanstack/react-router'\n\nimport type { Theme } from './theme'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n  ? React.DetailedHTMLProps<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >\n  : T extends 'input'\n    ? React.DetailedHTMLProps<\n        React.InputHTMLAttributes<HTMLInputElement>,\n        HTMLInputElement\n      >\n    : T extends 'select'\n      ? React.DetailedHTMLProps<\n          React.SelectHTMLAttributes<HTMLSelectElement>,\n          HTMLSelectElement\n        >\n      : T extends keyof HTMLElementTagNameMap\n        ? React.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 | AnyRootRoute,\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  | React.CSSProperties\n  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n  type: T,\n  newStyles: Styles,\n  queries: Record<string, Styles> = {},\n): (\n  props: StyledComponent<T> & {\n    ref?: React.RefObject<HTMLElementTagNameMap[T] | null>\n  },\n) => React.ReactElement {\n  return ({\n    ref,\n    style,\n    ...rest\n  }: StyledComponent<T> & {\n    ref?: React.RefObject<HTMLElementTagNameMap[T] | null>\n  }) => {\n    const theme = useTheme()\n\n    const mediaStyles = Object.entries(queries).reduce(\n      (current, [key, value]) => {\n        return useMediaQuery(key)\n          ? {\n              ...current,\n              ...(typeof value === 'function' ? value(rest, theme) : value),\n            }\n          : current\n      },\n      {},\n    )\n\n    return React.createElement(type, {\n      ...rest,\n      style: {\n        ...(typeof newStyles === 'function'\n          ? newStyles(rest, theme)\n          : newStyles),\n        ...style,\n        ...mediaStyles,\n      },\n      ref,\n    })\n  }\n}\n\nexport function useIsMounted() {\n  const [isMounted, setIsMounted] = React.useState(false)\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\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] = React.useState(initialState)\n\n  const safeSetState = React.useCallback(\n    (value: T) => {\n      scheduleMicrotask(() => {\n        if (isMounted) {\n          setState(value)\n        }\n      })\n    },\n    [isMounted],\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":[],"mappings":";;;AAWa,MAAA,WAAW,OAAO,WAAW;AAqBnC,SAAS,eAAe,OAAsB;AACnD,QAAM,WAAW;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAEA,SAAO,MAAM,cAAc,MAAM,WAAW,YACxC,MAAM,eAAe,eACnB,WACA,SACF,SAAS,MAAM,MAAM;AAC3B;AAEgB,SAAA,oBACd,SACA,OACA;AACM,QAAA,QAAQ,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,MAAM,EAAE;AACpD,MAAA,CAAC,MAAc,QAAA;AACnB,SAAO,eAAe,KAAK;AAC7B;AAkDO,SAAS,eAAe;AAC7B,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AAEtD,QAAM,WAAW,cAAc,iBAAiB,EAAE,MAAM;AACtD,iBAAa,IAAI;AAAA,EACnB,GAAG,EAAE;AAEE,SAAA;AACT;AAMa,MAAA,eAAe,CAAC,UAAmB;AAC9C,QAAM,OAAO,OAAO,oBAAoB,OAAO,KAAK,CAAC;AAC/C,QAAA,WAAW,OAAO,UAAU,WAAW,GAAG,MAAM,SAAA,CAAU,MAAM;AAClE,MAAA;AACK,WAAA,KAAK,UAAU,UAAU,IAAI;AAAA,WAC7B,GAAG;AACH,WAAA;AAAA,EAAA;AAEX;AAOO,SAAS,aAAgB,cAA0C;AACxE,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,YAAY;AAErD,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,UAAa;AACZ,wBAAkB,MAAM;AACtB,YAAI,WAAW;AACb,mBAAS,KAAK;AAAA,QAAA;AAAA,MAChB,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEO,SAAA,CAAC,OAAO,YAAY;AAC7B;AAMA,SAAS,kBAAkB,UAAsB;AAC/C,UAAQ,QAAQ,EACb,KAAK,QAAQ,EACb;AAAA,IAAM,CAAC,UACN,WAAW,MAAM;AACT,YAAA;AAAA,IACP,CAAA;AAAA,EACH;AACJ;AAEO,SAAS,YACd,KACA,YAAqC,CAAC,CAAC,MAAM,CAAC,GACpC;AACV,SAAO,IACJ,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAU,EAC7B,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,MAAM;AAC1B,eAAW,YAAY,WAAW;AAC1B,YAAA,KAAK,SAAS,CAAC;AACf,YAAA,KAAK,SAAS,CAAC;AAEjB,UAAA,OAAO,OAAO,aAAa;AACzB,YAAA,OAAO,OAAO,aAAa;AAC7B;AAAA,QAAA;AAEK,eAAA;AAAA,MAAA;AAGT,UAAI,OAAO,IAAI;AACb;AAAA,MAAA;AAGK,aAAA,KAAK,KAAK,IAAI;AAAA,IAAA;AAGvB,WAAO,KAAK;AAAA,EACb,CAAA,EACA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACnB;;;;;;;;"}

package/dist/cjs/utils.d.cts

@@ -6,7 +6,9 @@ type StyledComponent<T> = T extends 'button' ? React.DetailedHTMLProps<React.But
 export declare function getStatusColor(match: AnyRouteMatch): "yellow" | "green" | "red" | "purple" | "gray" | "blue";
 export declare function getRouteStatusColor(matches: Array<AnyRouteMatch>, route: AnyRoute | AnyRootRoute): "yellow" | "green" | "red" | "purple" | "gray" | "blue";
 type Styles = React.CSSProperties | ((props: Record<string, any>, theme: Theme) => React.CSSProperties);
-export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): React.ForwardRefExoticComponent<React.PropsWithoutRef<StyledComponent<T>> & React.RefAttributes<HTMLElementTagNameMap[T]>>;
+export declare function styled<T extends keyof HTMLElementTagNameMap>(type: T, newStyles: Styles, queries?: Record<string, Styles>): (props: StyledComponent<T> & {
+    ref?: React.RefObject<HTMLElementTagNameMap[T] | null>;
+}) => React.ReactElement;
 export declare function useIsMounted(): boolean;
 /**
  * Displays a string regardless the type of the data

package/dist/esm/AgeTicker.d.ts

@@ -0,0 +1,5 @@
+import { AnyRouteMatch, AnyRouter } from '@tanstack/react-router';
+export declare function AgeTicker({ match, router, }: {
+    match?: AnyRouteMatch;
+    router: AnyRouter;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/AgeTicker.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import React__default from "react";
+import { useStyles } from "./useStyles.js";
+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();
+  const rerender = React__default.useReducer(
+    () => ({}),
+    () => ({})
+  )[1];
+  React__default.useEffect(() => {
+    const interval = setInterval(() => {
+      rerender();
+    }, 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [rerender]);
+  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 /* @__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) })
+  ] });
+}
+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 React from 'react'\nimport { useStyles } from './useStyles'\nimport type { AnyRouteMatch, AnyRouter } from '@tanstack/react-router'\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: AnyRouter\n}) {\n  const styles = useStyles()\n  const rerender = React.useReducer(\n    () => ({}),\n    () => ({}),\n  )[1]\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      rerender()\n    }, 1000)\n\n    return () => {\n      clearInterval(interval)\n    }\n  }, [rerender])\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 className={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":["React","cx"],"mappings":";;;;AAKA,SAAS,WAAW,IAAY;AAC9B,QAAM,QAAQ,CAAC,KAAK,OAAO,KAAK,GAAG;AAC7B,QAAA,SAAS,CAAC,KAAK,KAAM,KAAK,KAAO,KAAK,MAAS,KAAK,KAAQ;AAElE,MAAI,kBAAkB;AACtB,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AAClC,QAAA,OAAO,CAAC,IAAK,EAAG;AACF,sBAAA;AAAA,EAAA;AAGpB,QAAM,YAAY,IAAI,KAAK,aAAa,UAAU,UAAU;AAAA,IAC1D,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,uBAAuB;AAAA,EAAA,CACxB;AAED,SAAO,UAAU,OAAO,OAAO,eAAe,CAAE,IAAI,MAAM,eAAe;AAC3E;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AACF,GAGG;AACD,QAAM,SAAS,UAAU;AACzB,QAAM,WAAWA,eAAM;AAAA,IACrB,OAAO;IACP,OAAO,CAAC;AAAA,IACR,CAAC;AAEHA,iBAAM,UAAU,MAAM;AACd,UAAA,WAAW,YAAY,MAAM;AACxB,eAAA;AAAA,OACR,GAAI;AAEP,WAAO,MAAM;AACX,oBAAc,QAAQ;AAAA,IACxB;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,MAAI,CAAC,OAAO;AACH,WAAA;AAAA,EAAA;AAGT,QAAM,QAAQ,OAAO,gBAAgB,MAAM,OAAO;AAE9C,MAAA,CAAC,MAAM,QAAQ,QAAQ;AAClB,WAAA;AAAA,EAAA;AAGT,QAAM,MAAM,KAAK,IAAI,IAAI,MAAM;AAC/B,QAAM,YACJ,MAAM,QAAQ,aAAa,OAAO,QAAQ,oBAAoB;AAC1D,QAAA,SACJ,MAAM,QAAQ,UAAU,OAAO,QAAQ,iBAAiB,KAAK,KAAK;AAGlE,SAAA,qBAAC,SAAI,WAAWC,KAAG,OAAO,UAAU,MAAM,SAAS,CAAC,GAClD,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAK,UAAW,WAAA,GAAG,EAAE,CAAA;AAAA,IACtB,oBAAC,SAAI,UAAC,IAAA,CAAA;AAAA,IACL,oBAAA,OAAA,EAAK,UAAW,WAAA,SAAS,EAAE,CAAA;AAAA,IAC5B,oBAAC,SAAI,UAAC,IAAA,CAAA;AAAA,IACL,oBAAA,OAAA,EAAK,UAAW,WAAA,MAAM,EAAE,CAAA;AAAA,EAAA,GAC3B;AAEJ;"}

package/dist/esm/BaseTanStackRouterDevtoolsPanel.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { DevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel.js';
+export declare const BaseTanStackRouterDevtoolsPanel: ({ ref, ...props }: DevtoolsPanelOptions & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+}) => React.ReactElement;

package/dist/esm/BaseTanStackRouterDevtoolsPanel.js

@@ -0,0 +1,438 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import { clsx } from "clsx";
+import { useRouter, useRouterState, invariant, rootRouteId, trimPath } from "@tanstack/react-router";
+import { useDevtoolsOnClose } from "./context.js";
+import { useStyles } from "./useStyles.js";
+import useLocalStorage from "./useLocalStorage.js";
+import Explorer from "./Explorer.js";
+import { multiSortBy, getStatusColor, getRouteStatusColor } from "./utils.js";
+import { AgeTicker } from "./AgeTicker.js";
+function Logo(props) {
+  const { className, ...rest } = props;
+  const styles = useStyles();
+  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" })
+  ] });
+}
+function RouteComp({
+  router,
+  route,
+  isRoot,
+  activeId,
+  setActiveId
+}) {
+  var _a;
+  const routerState = useRouterState({
+    router
+  });
+  const styles = useStyles();
+  const matches = 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",
+      {
+        role: "button",
+        "aria-label": `Open match details for ${route.id}`,
+        onClick: () => {
+          if (match) {
+            setActiveId(activeId === route.id ? "" : route.id);
+          }
+        },
+        className: clsx(
+          styles.routesRowContainer(route.id === activeId, !!match)
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                styles.matchIndicator(getRouteStatusColor(matches, route))
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: clsx(styles.routesRow(!!match)), children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("code", { className: styles.code, children: [
+                isRoot ? rootRouteId : route.path || trimPath(route.id),
+                " "
+              ] }),
+              /* @__PURE__ */ jsx("code", { className: styles.routeParamInfo, children: param })
+            ] }),
+            /* @__PURE__ */ jsx(AgeTicker, { match, router })
+          ] })
+        ]
+      }
+    ),
+    ((_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,
+      {
+        router,
+        route: r,
+        activeId,
+        setActiveId
+      },
+      r.id
+    )) }) : null
+  ] });
+}
+const BaseTanStackRouterDevtoolsPanel = function BaseTanStackRouterDevtoolsPanel2({
+  ref,
+  ...props
+}) {
+  var _a, _b;
+  const {
+    isOpen = true,
+    setIsOpen,
+    handleDragStart,
+    router: userRouter,
+    shadowDOMTarget,
+    ...panelProps
+  } = props;
+  const { onCloseClick } = useDevtoolsOnClose();
+  const styles = useStyles();
+  const { className, ...otherPanelProps } = panelProps;
+  const contextRouter = useRouter({ warn: false });
+  const router = userRouter ?? contextRouter;
+  const routerState = useRouterState({
+    router
+  });
+  invariant(
+    router,
+    "No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually."
+  );
+  const [showMatches, setShowMatches] = useLocalStorage(
+    "tanstackRouterDevtoolsShowMatches",
+    true
+  );
+  const [activeId, setActiveId] = useLocalStorage(
+    "tanstackRouterDevtoolsActiveRouteId",
+    ""
+  );
+  const activeMatch = React__default.useMemo(() => {
+    const matches = [
+      ...routerState.pendingMatches ?? [],
+      ...routerState.matches,
+      ...routerState.cachedMatches
+    ];
+    return matches.find((d) => d.routeId === activeId || d.id === activeId);
+  }, [
+    activeId,
+    routerState.cachedMatches,
+    routerState.matches,
+    routerState.pendingMatches
+  ]);
+  const hasSearch = Object.keys(routerState.location.search).length;
+  const explorerState = {
+    ...router,
+    state: router.state
+  };
+  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",
+                  {
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "1.667",
+                    d: "M1 1l4 4 4-4"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles.firstContainer, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.row, children: /* @__PURE__ */ jsx(
+            Logo,
+            {
+              "aria-hidden": true,
+              onClick: (e) => {
+                setIsOpen(false);
+                onCloseClick(e);
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: styles.routerExplorerContainer, children: /* @__PURE__ */ jsx("div", { className: styles.routerExplorer, children: /* @__PURE__ */ jsx(
+            Explorer,
+            {
+              label: "Router",
+              value: Object.fromEntries(
+                multiSortBy(
+                  Object.keys(explorerState),
+                  [
+                    "state",
+                    "routesById",
+                    "routesByPath",
+                    "flatRoutes",
+                    "options",
+                    "manifest"
+                  ].map((d) => (dd) => dd !== d)
+                ).map((key) => [key, explorerState[key]]).filter(
+                  (d) => typeof d[1] !== "function" && ![
+                    "__store",
+                    "basepath",
+                    "injectedHtml",
+                    "subscribers",
+                    "latestLoadPromise",
+                    "navigateTimeout",
+                    "resetNextScroll",
+                    "tempLocationKey",
+                    "latestLocation",
+                    "routeTree",
+                    "history"
+                  ].includes(d[0])
+                )
+              ),
+              defaultExpanded: {
+                state: {},
+                context: {},
+                options: {}
+              },
+              filterSubEntries: (subEntries) => {
+                return subEntries.filter((d) => typeof d.value !== "function");
+              }
+            }
+          ) }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { 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",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setShowMatches(false);
+                    },
+                    disabled: !showMatches,
+                    className: clsx(
+                      styles.routeMatchesToggleBtn(!showMatches, true)
+                    ),
+                    children: "Routes"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setShowMatches(true);
+                    },
+                    disabled: showMatches,
+                    className: clsx(
+                      styles.routeMatchesToggleBtn(!!showMatches, false)
+                    ),
+                    children: "Matches"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.detailsHeaderInfo, children: /* @__PURE__ */ jsx("div", { children: "age / staleTime / gcTime" }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: clsx(styles.routesContainer), children: !showMatches ? /* @__PURE__ */ jsx(
+              RouteComp,
+              {
+                router,
+                route: router.routeTree,
+                isRoot: true,
+                activeId,
+                setActiveId
+              }
+            ) : /* @__PURE__ */ jsx("div", { children: (((_a = routerState.pendingMatches) == null ? void 0 : _a.length) ? 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),
+                  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 === rootRouteId ? rootRouteId : match.pathname}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(AgeTicker, { match, router })
+                  ]
+                },
+                match.id || i
+              );
+            }) }) })
+          ] }),
+          routerState.cachedMatches.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__ */ 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, router })
+                  ]
+                },
+                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" : routerState.matches.find((d) => d.id === activeMatch.id) ? "Active" : "Cached" })
+            ] }),
+            /* @__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", { 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", { 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,
+            {
+              value: routerState.location.search,
+              defaultExpanded: Object.keys(
+                routerState.location.search
+              ).reduce((obj, next) => {
+                obj[next] = {};
+                return obj;
+              }, {})
+            }
+          ) })
+        ] }) : null
+      ]
+    }
+  );
+};
+export {
+  BaseTanStackRouterDevtoolsPanel
+};
+//# sourceMappingURL=BaseTanStackRouterDevtoolsPanel.js.map

package/dist/esm/BaseTanStackRouterDevtoolsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTanStackRouterDevtoolsPanel.js","sources":["../../src/BaseTanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import React from 'react'\nimport { clsx as cx } from 'clsx'\nimport {\n  invariant,\n  rootRouteId,\n  trimPath,\n  useRouter,\n  useRouterState,\n} from '@tanstack/react-router'\nimport { useDevtoolsOnClose } from './context'\nimport { useStyles } from './useStyles'\nimport useLocalStorage from './useLocalStorage'\nimport Explorer from './Explorer'\nimport { getRouteStatusColor, getStatusColor, multiSortBy } from './utils'\nimport { AgeTicker } from './AgeTicker'\nimport type { DevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel'\n\nimport type {\n  AnyRootRoute,\n  AnyRoute,\n  AnyRouter,\n  Route,\n} from '@tanstack/react-router'\n\nfunction Logo(props: React.HTMLAttributes<HTMLButtonElement>) {\n  const { className, ...rest } = props\n  const styles = useStyles()\n  return (\n    <button {...rest} className={cx(styles.logo, className)}>\n      <div className={styles.tanstackLogo}>TANSTACK</div>\n      <div className={styles.routerLogo}>React Router v1</div>\n    </button>\n  )\n}\n\nfunction RouteComp({\n  router,\n  route,\n  isRoot,\n  activeId,\n  setActiveId,\n}: {\n  router: AnyRouter\n  route: AnyRootRoute | AnyRoute\n  isRoot?: boolean\n  activeId: string | undefined\n  setActiveId: (id: string) => void\n}) {\n  const routerState = useRouterState({\n    router,\n  } as any)\n  const styles = useStyles()\n  const matches = routerState.pendingMatches || routerState.matches\n  const match = routerState.matches.find((d) => d.routeId === route.id)\n\n  const param = React.useMemo(() => {\n    try {\n      if (match?.params) {\n        const p = match.params\n        const r: string = route.path || trimPath(route.id)\n        if (r.startsWith('$')) {\n          const trimmed = r.slice(1)\n          if (p[trimmed]) {\n            return `(${p[trimmed]})`\n          }\n        }\n      }\n      return ''\n    } catch (error) {\n      return ''\n    }\n  }, [match, route])\n\n  return (\n    <div>\n      <div\n        role=\"button\"\n        aria-label={`Open match details for ${route.id}`}\n        onClick={() => {\n          if (match) {\n            setActiveId(activeId === route.id ? '' : route.id)\n          }\n        }}\n        className={cx(\n          styles.routesRowContainer(route.id === activeId, !!match),\n        )}\n      >\n        <div\n          className={cx(\n            styles.matchIndicator(getRouteStatusColor(matches, route)),\n          )}\n        />\n        <div className={cx(styles.routesRow(!!match))}>\n          <div>\n            <code className={styles.code}>\n              {isRoot ? rootRouteId : route.path || trimPath(route.id)}{' '}\n            </code>\n            <code className={styles.routeParamInfo}>{param}</code>\n          </div>\n          <AgeTicker match={match} router={router} />\n        </div>\n      </div>\n      {route.children?.length ? (\n        <div className={styles.nestedRouteRow(!!isRoot)}>\n          {[...(route.children as Array<Route>)]\n            .sort((a, b) => {\n              return a.rank - b.rank\n            })\n            .map((r) => (\n              <RouteComp\n                key={r.id}\n                router={router}\n                route={r}\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport const BaseTanStackRouterDevtoolsPanel =\n  function BaseTanStackRouterDevtoolsPanel({\n    ref,\n    ...props\n  }: DevtoolsPanelOptions & {\n    ref?: React.RefObject<HTMLDivElement | null>\n  }): React.ReactElement {\n    const {\n      isOpen = true,\n      setIsOpen,\n      handleDragStart,\n      router: userRouter,\n      shadowDOMTarget,\n      ...panelProps\n    } = props\n\n    const { onCloseClick } = useDevtoolsOnClose()\n    const styles = useStyles()\n    const { className, ...otherPanelProps } = panelProps\n\n    const contextRouter = useRouter({ warn: false })\n    const router = userRouter ?? contextRouter\n    const routerState = useRouterState({\n      router,\n    } as any)\n\n    invariant(\n      router,\n      'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.',\n    )\n\n    // useStore(router.__store)\n\n    const [showMatches, setShowMatches] = useLocalStorage(\n      'tanstackRouterDevtoolsShowMatches',\n      true,\n    )\n\n    const [activeId, setActiveId] = useLocalStorage(\n      'tanstackRouterDevtoolsActiveRouteId',\n      '',\n    )\n\n    const activeMatch = React.useMemo(() => {\n      const matches = [\n        ...(routerState.pendingMatches ?? []),\n        ...routerState.matches,\n        ...routerState.cachedMatches,\n      ]\n      return matches.find((d) => d.routeId === activeId || d.id === activeId)\n    }, [\n      activeId,\n      routerState.cachedMatches,\n      routerState.matches,\n      routerState.pendingMatches,\n    ])\n\n    const hasSearch = Object.keys(routerState.location.search).length\n\n    const explorerState = {\n      ...router,\n      state: router.state,\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          styles.devtoolsPanel,\n          'TanStackRouterDevtoolsPanel',\n          className,\n        )}\n        {...otherPanelProps}\n      >\n        {handleDragStart ? (\n          <div\n            className={styles.dragHandle}\n            onMouseDown={handleDragStart}\n          ></div>\n        ) : null}\n        <button\n          className={styles.panelCloseBtn}\n          onClick={(e) => {\n            setIsOpen(false)\n            onCloseClick(e)\n          }}\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"10\"\n            height=\"6\"\n            fill=\"none\"\n            viewBox=\"0 0 10 6\"\n            className={styles.panelCloseBtnIcon}\n          >\n            <path\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"1.667\"\n              d=\"M1 1l4 4 4-4\"\n            ></path>\n          </svg>\n        </button>\n        <div className={styles.firstContainer}>\n          <div className={styles.row}>\n            <Logo\n              aria-hidden\n              onClick={(e) => {\n                setIsOpen(false)\n                onCloseClick(e)\n              }}\n            />\n          </div>\n          <div className={styles.routerExplorerContainer}>\n            <div className={styles.routerExplorer}>\n              <Explorer\n                label=\"Router\"\n                value={Object.fromEntries(\n                  multiSortBy(\n                    Object.keys(explorerState),\n                    (\n                      [\n                        'state',\n                        'routesById',\n                        'routesByPath',\n                        'flatRoutes',\n                        'options',\n                        'manifest',\n                      ] as const\n                    ).map((d) => (dd) => dd !== d),\n                  )\n                    .map((key) => [key, (explorerState as any)[key]])\n                    .filter(\n                      (d) =>\n                        typeof d[1] !== 'function' &&\n                        ![\n                          '__store',\n                          'basepath',\n                          'injectedHtml',\n                          'subscribers',\n                          'latestLoadPromise',\n                          'navigateTimeout',\n                          'resetNextScroll',\n                          'tempLocationKey',\n                          'latestLocation',\n                          'routeTree',\n                          'history',\n                        ].includes(d[0]),\n                    ),\n                )}\n                defaultExpanded={{\n                  state: {} as any,\n                  context: {} as any,\n                  options: {} as any,\n                }}\n                filterSubEntries={(subEntries) => {\n                  return subEntries.filter((d) => typeof d.value !== 'function')\n                }}\n              />\n            </div>\n          </div>\n        </div>\n        <div className={styles.secondContainer}>\n          <div className={styles.matchesContainer}>\n            <div className={styles.detailsHeader}>\n              <span>Pathname</span>\n              {routerState.location.maskedLocation ? (\n                <div className={styles.maskedBadgeContainer}>\n                  <span className={styles.maskedBadge}>masked</span>\n                </div>\n              ) : null}\n            </div>\n            <div className={styles.detailsContent}>\n              <code>{routerState.location.pathname}</code>\n              {routerState.location.maskedLocation ? (\n                <code className={styles.maskedLocation}>\n                  {routerState.location.maskedLocation.pathname}\n                </code>\n              ) : null}\n            </div>\n            <div className={styles.detailsHeader}>\n              <div className={styles.routeMatchesToggle}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(false)\n                  }}\n                  disabled={!showMatches}\n                  className={cx(\n                    styles.routeMatchesToggleBtn(!showMatches, true),\n                  )}\n                >\n                  Routes\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(true)\n                  }}\n                  disabled={showMatches}\n                  className={cx(\n                    styles.routeMatchesToggleBtn(!!showMatches, false),\n                  )}\n                >\n                  Matches\n                </button>\n              </div>\n              <div className={styles.detailsHeaderInfo}>\n                <div>age / staleTime / gcTime</div>\n              </div>\n            </div>\n            <div className={cx(styles.routesContainer)}>\n              {!showMatches ? (\n                <RouteComp\n                  router={router}\n                  route={router.routeTree}\n                  isRoot\n                  activeId={activeId}\n                  setActiveId={setActiveId}\n                />\n              ) : (\n                <div>\n                  {(routerState.pendingMatches?.length\n                    ? routerState.pendingMatches\n                    : routerState.matches\n                  ).map((match, i) => {\n                    return (\n                      <div\n                        key={match.id || i}\n                        role=\"button\"\n                        aria-label={`Open match details for ${match.id}`}\n                        onClick={() =>\n                          setActiveId(activeId === match.id ? '' : match.id)\n                        }\n                        className={cx(styles.matchRow(match === activeMatch))}\n                      >\n                        <div\n                          className={cx(\n                            styles.matchIndicator(getStatusColor(match)),\n                          )}\n                        />\n\n                        <code\n                          className={styles.matchID}\n                        >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>\n                        <AgeTicker match={match} router={router} />\n                      </div>\n                    )\n                  })}\n                </div>\n              )}\n            </div>\n          </div>\n          {routerState.cachedMatches.length ? (\n            <div className={styles.cachedMatchesContainer}>\n              <div className={styles.detailsHeader}>\n                <div>Cached Matches</div>\n                <div className={styles.detailsHeaderInfo}>\n                  age / staleTime / gcTime\n                </div>\n              </div>\n              <div>\n                {routerState.cachedMatches.map((match) => {\n                  return (\n                    <div\n                      key={match.id}\n                      role=\"button\"\n                      aria-label={`Open match details for ${match.id}`}\n                      onClick={() =>\n                        setActiveId(activeId === match.id ? '' : match.id)\n                      }\n                      className={cx(styles.matchRow(match === activeMatch))}\n                    >\n                      <div\n                        className={cx(\n                          styles.matchIndicator(getStatusColor(match)),\n                        )}\n                      />\n\n                      <code className={styles.matchID}>{`${match.id}`}</code>\n\n                      <AgeTicker match={match} router={router} />\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          ) : null}\n        </div>\n        {activeMatch ? (\n          <div className={styles.thirdContainer}>\n            <div className={styles.detailsHeader}>Match Details</div>\n            <div>\n              <div className={styles.matchDetails}>\n                <div\n                  className={styles.matchStatus(\n                    activeMatch.status,\n                    activeMatch.isFetching,\n                  )}\n                >\n                  <div>\n                    {activeMatch.status === 'success' && activeMatch.isFetching\n                      ? 'fetching'\n                      : activeMatch.status}\n                  </div>\n                </div>\n                <div className={styles.matchDetailsInfoLabel}>\n                  <div>ID:</div>\n                  <div className={styles.matchDetailsInfo}>\n                    <code>{activeMatch.id}</code>\n                  </div>\n                </div>\n                <div className={styles.matchDetailsInfoLabel}>\n                  <div>State:</div>\n                  <div className={styles.matchDetailsInfo}>\n                    {routerState.pendingMatches?.find(\n                      (d) => d.id === activeMatch.id,\n                    )\n                      ? 'Pending'\n                      : routerState.matches.find((d) => d.id === activeMatch.id)\n                        ? 'Active'\n                        : 'Cached'}\n                  </div>\n                </div>\n                <div className={styles.matchDetailsInfoLabel}>\n                  <div>Last Updated:</div>\n                  <div className={styles.matchDetailsInfo}>\n                    {activeMatch.updatedAt\n                      ? new Date(activeMatch.updatedAt).toLocaleTimeString()\n                      : 'N/A'}\n                  </div>\n                </div>\n              </div>\n            </div>\n            {activeMatch.loaderData ? (\n              <>\n                <div className={styles.detailsHeader}>Loader Data</div>\n                <div className={styles.detailsContent}>\n                  <Explorer\n                    label=\"loaderData\"\n                    value={activeMatch.loaderData}\n                    defaultExpanded={{}}\n                  />\n                </div>\n              </>\n            ) : null}\n            <div className={styles.detailsHeader}>Explorer</div>\n            <div className={styles.detailsContent}>\n              <Explorer\n                label=\"Match\"\n                value={activeMatch}\n                defaultExpanded={{}}\n              />\n            </div>\n          </div>\n        ) : null}\n        {hasSearch ? (\n          <div className={styles.fourthContainer}>\n            <div className={styles.detailsHeader}>Search Params</div>\n            <div className={styles.detailsContent}>\n              <Explorer\n                value={routerState.location.search}\n                defaultExpanded={Object.keys(\n                  routerState.location.search,\n                ).reduce((obj: any, next) => {\n                  obj[next] = {}\n                  return obj\n                }, {})}\n              />\n            </div>\n          </div>\n        ) : null}\n      </div>\n    )\n  }\n"],"names":["cx","React","BaseTanStackRouterDevtoolsPanel"],"mappings":";;;;;;;;;;AAwBA,SAAS,KAAK,OAAgD;AAC5D,QAAM,EAAE,WAAW,GAAG,KAAA,IAAS;AAC/B,QAAM,SAAS,UAAU;AAEvB,SAAA,qBAAC,YAAQ,GAAG,MAAM,WAAWA,KAAG,OAAO,MAAM,SAAS,GACpD,UAAA;AAAA,IAAA,oBAAC,OAAI,EAAA,WAAW,OAAO,cAAc,UAAQ,YAAA;AAAA,IAC5C,oBAAA,OAAA,EAAI,WAAW,OAAO,YAAY,UAAe,kBAAA,CAAA;AAAA,EAAA,GACpD;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;;AACD,QAAM,cAAc,eAAe;AAAA,IACjC;AAAA,EAAA,CACM;AACR,QAAM,SAAS,UAAU;AACnB,QAAA,UAAU,YAAY,kBAAkB,YAAY;AACpD,QAAA,QAAQ,YAAY,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,MAAM,EAAE;AAE9D,QAAA,QAAQC,eAAM,QAAQ,MAAM;AAC5B,QAAA;AACF,UAAI,+BAAO,QAAQ;AACjB,cAAM,IAAI,MAAM;AAChB,cAAM,IAAY,MAAM,QAAQ,SAAS,MAAM,EAAE;AAC7C,YAAA,EAAE,WAAW,GAAG,GAAG;AACf,gBAAA,UAAU,EAAE,MAAM,CAAC;AACrB,cAAA,EAAE,OAAO,GAAG;AACP,mBAAA,IAAI,EAAE,OAAO,CAAC;AAAA,UAAA;AAAA,QACvB;AAAA,MACF;AAEK,aAAA;AAAA,aACA,OAAO;AACP,aAAA;AAAA,IAAA;AAAA,EACT,GACC,CAAC,OAAO,KAAK,CAAC;AAEjB,8BACG,OACC,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY,0BAA0B,MAAM,EAAE;AAAA,QAC9C,SAAS,MAAM;AACb,cAAI,OAAO;AACT,wBAAY,aAAa,MAAM,KAAK,KAAK,MAAM,EAAE;AAAA,UAAA;AAAA,QAErD;AAAA,QACA,WAAWD;AAAAA,UACT,OAAO,mBAAmB,MAAM,OAAO,UAAU,CAAC,CAAC,KAAK;AAAA,QAC1D;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWA;AAAAA,gBACT,OAAO,eAAe,oBAAoB,SAAS,KAAK,CAAC;AAAA,cAAA;AAAA,YAC3D;AAAA,UACF;AAAA,UACA,qBAAC,OAAI,EAAA,WAAWA,KAAG,OAAO,UAAU,CAAC,CAAC,KAAK,CAAC,GAC1C,UAAA;AAAA,YAAA,qBAAC,OACC,EAAA,UAAA;AAAA,cAAC,qBAAA,QAAA,EAAK,WAAW,OAAO,MACrB,UAAA;AAAA,gBAAA,SAAS,cAAc,MAAM,QAAQ,SAAS,MAAM,EAAE;AAAA,gBAAG;AAAA,cAAA,GAC5D;AAAA,cACC,oBAAA,QAAA,EAAK,WAAW,OAAO,gBAAiB,UAAM,MAAA,CAAA;AAAA,YAAA,GACjD;AAAA,YACA,oBAAC,WAAU,EAAA,OAAc,OAAgB,CAAA;AAAA,UAAA,EAC3C,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,MACC,WAAM,aAAN,mBAAgB,UACf,oBAAC,SAAI,WAAW,OAAO,eAAe,CAAC,CAAC,MAAM,GAC3C,UAAA,CAAC,GAAI,MAAM,QAAyB,EAClC,KAAK,CAAC,GAAG,MAAM;AACP,aAAA,EAAE,OAAO,EAAE;AAAA,IAAA,CACnB,EACA,IAAI,CAAC,MACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAJK,EAAE;AAAA,IAMV,CAAA,EACL,CAAA,IACE;AAAA,EAAA,GACN;AAEJ;AAEa,MAAA,kCACX,SAASE,iCAAgC;AAAA,EACvC;AAAA,EACA,GAAG;AACL,GAEuB;;AACf,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,EAAE,aAAa,IAAI,mBAAmB;AAC5C,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,WAAW,GAAG,gBAAA,IAAoB;AAE1C,QAAM,gBAAgB,UAAU,EAAE,MAAM,OAAO;AAC/C,QAAM,SAAS,cAAc;AAC7B,QAAM,cAAc,eAAe;AAAA,IACjC;AAAA,EAAA,CACM;AAER;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAIM,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EACF;AAEM,QAAA,CAAC,UAAU,WAAW,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,EACF;AAEM,QAAA,cAAcD,eAAM,QAAQ,MAAM;AACtC,UAAM,UAAU;AAAA,MACd,GAAI,YAAY,kBAAkB,CAAC;AAAA,MACnC,GAAG,YAAY;AAAA,MACf,GAAG,YAAY;AAAA,IACjB;AACO,WAAA,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAY,YAAY,EAAE,OAAO,QAAQ;AAAA,EAAA,GACrE;AAAA,IACD;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA,CACb;AAED,QAAM,YAAY,OAAO,KAAK,YAAY,SAAS,MAAM,EAAE;AAE3D,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA,IACH,OAAO,OAAO;AAAA,EAChB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWD;AAAAA,QACT,OAAO;AAAA,QACP;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QACC,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,aAAa;AAAA,UAAA;AAAA,QAAA,IAEb;AAAA,QACJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,SAAS,CAAC,MAAM;AACd,wBAAU,KAAK;AACf,2BAAa,CAAC;AAAA,YAChB;AAAA,YAEA,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,WAAW,OAAO;AAAA,gBAElB,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,QAAO;AAAA,oBACP,eAAc;AAAA,oBACd,gBAAe;AAAA,oBACf,aAAY;AAAA,oBACZ,GAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UACH;AAAA,QACF;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,OAAO,gBACrB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,OAAO,KACrB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,SAAS,CAAC,MAAM;AACd,0BAAU,KAAK;AACf,6BAAa,CAAC;AAAA,cAAA;AAAA,YAChB;AAAA,UAAA,GAEJ;AAAA,UACA,oBAAC,SAAI,WAAW,OAAO,yBACrB,UAAC,oBAAA,OAAA,EAAI,WAAW,OAAO,gBACrB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO,OAAO;AAAA,gBACZ;AAAA,kBACE,OAAO,KAAK,aAAa;AAAA,kBAEvB;AAAA,oBACE;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBAEF,IAAI,CAAC,MAAM,CAAC,OAAO,OAAO,CAAC;AAAA,gBAAA,EAE5B,IAAI,CAAC,QAAQ,CAAC,KAAM,cAAsB,GAAG,CAAC,CAAC,EAC/C;AAAA,kBACC,CAAC,MACC,OAAO,EAAE,CAAC,MAAM,cAChB,CAAC;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,kBAAA,EACA,SAAS,EAAE,CAAC,CAAC;AAAA,gBAAA;AAAA,cAEvB;AAAA,cACA,iBAAiB;AAAA,gBACf,OAAO,CAAC;AAAA,gBACR,SAAS,CAAC;AAAA,gBACV,SAAS,CAAA;AAAA,cACX;AAAA,cACA,kBAAkB,CAAC,eAAe;AAChC,uBAAO,WAAW,OAAO,CAAC,MAAM,OAAO,EAAE,UAAU,UAAU;AAAA,cAAA;AAAA,YAC/D;AAAA,aAEJ,EACF,CAAA;AAAA,QAAA,GACF;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,OAAO,iBACrB,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAW,OAAO,kBACrB,UAAA;AAAA,YAAC,qBAAA,OAAA,EAAI,WAAW,OAAO,eACrB,UAAA;AAAA,cAAA,oBAAC,UAAK,UAAQ,WAAA,CAAA;AAAA,cACb,YAAY,SAAS,iBACpB,oBAAC,SAAI,WAAW,OAAO,sBACrB,UAAA,oBAAC,UAAK,WAAW,OAAO,aAAa,UAAA,UAAM,GAC7C,IACE;AAAA,YAAA,GACN;AAAA,YACC,qBAAA,OAAA,EAAI,WAAW,OAAO,gBACrB,UAAA;AAAA,cAAC,oBAAA,QAAA,EAAM,UAAY,YAAA,SAAS,UAAS;AAAA,cACpC,YAAY,SAAS,iBACpB,oBAAC,QAAK,EAAA,WAAW,OAAO,gBACrB,UAAY,YAAA,SAAS,eAAe,SACvC,CAAA,IACE;AAAA,YAAA,GACN;AAAA,YACC,qBAAA,OAAA,EAAI,WAAW,OAAO,eACrB,UAAA;AAAA,cAAC,qBAAA,OAAA,EAAI,WAAW,OAAO,oBACrB,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,MAAM;AACb,qCAAe,KAAK;AAAA,oBACtB;AAAA,oBACA,UAAU,CAAC;AAAA,oBACX,WAAWA;AAAAA,sBACT,OAAO,sBAAsB,CAAC,aAAa,IAAI;AAAA,oBACjD;AAAA,oBACD,UAAA;AAAA,kBAAA;AAAA,gBAED;AAAA,gBACA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,MAAM;AACb,qCAAe,IAAI;AAAA,oBACrB;AAAA,oBACA,UAAU;AAAA,oBACV,WAAWA;AAAAA,sBACT,OAAO,sBAAsB,CAAC,CAAC,aAAa,KAAK;AAAA,oBACnD;AAAA,oBACD,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAED,GACF;AAAA,cACA,oBAAC,SAAI,WAAW,OAAO,mBACrB,UAAC,oBAAA,OAAA,EAAI,qCAAwB,CAAA,EAC/B,CAAA;AAAA,YAAA,GACF;AAAA,YACA,oBAAC,SAAI,WAAWA,KAAG,OAAO,eAAe,GACtC,WAAC,cACA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,OAAO,OAAO;AAAA,gBACd,QAAM;AAAA,gBACN;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA,IAGF,oBAAC,OACG,EAAA,aAAA,iBAAY,mBAAZ,mBAA4B,UAC1B,YAAY,iBACZ,YAAY,SACd,IAAI,CAAC,OAAO,MAAM;AAEhB,qBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,cAAY,0BAA0B,MAAM,EAAE;AAAA,kBAC9C,SAAS,MACP,YAAY,aAAa,MAAM,KAAK,KAAK,MAAM,EAAE;AAAA,kBAEnD,WAAWA,KAAG,OAAO,SAAS,UAAU,WAAW,CAAC;AAAA,kBAEpD,UAAA;AAAA,oBAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWA;AAAAA,0BACT,OAAO,eAAe,eAAe,KAAK,CAAC;AAAA,wBAAA;AAAA,sBAC7C;AAAA,oBACF;AAAA,oBAEA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAW,OAAO;AAAA,wBAClB,aAAG,MAAM,YAAY,cAAc,cAAc,MAAM,QAAQ;AAAA,sBAAA;AAAA,oBAAG;AAAA,oBACpE,oBAAC,WAAU,EAAA,OAAc,OAAgB,CAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAjBpC,MAAM,MAAM;AAAA,cAkBnB;AAAA,YAEH,CAAA,EACH,CAAA,EAEJ,CAAA;AAAA,UAAA,GACF;AAAA,UACC,YAAY,cAAc,8BACxB,OAAI,EAAA,WAAW,OAAO,wBACrB,UAAA;AAAA,YAAC,qBAAA,OAAA,EAAI,WAAW,OAAO,eACrB,UAAA;AAAA,cAAA,oBAAC,SAAI,UAAc,iBAAA,CAAA;AAAA,cAClB,oBAAA,OAAA,EAAI,WAAW,OAAO,mBAAmB,UAE1C,2BAAA,CAAA;AAAA,YAAA,GACF;AAAA,gCACC,OACE,EAAA,UAAA,YAAY,cAAc,IAAI,CAAC,UAAU;AAEtC,qBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,cAAY,0BAA0B,MAAM,EAAE;AAAA,kBAC9C,SAAS,MACP,YAAY,aAAa,MAAM,KAAK,KAAK,MAAM,EAAE;AAAA,kBAEnD,WAAWA,KAAG,OAAO,SAAS,UAAU,WAAW,CAAC;AAAA,kBAEpD,UAAA;AAAA,oBAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWA;AAAAA,0BACT,OAAO,eAAe,eAAe,KAAK,CAAC;AAAA,wBAAA;AAAA,sBAC7C;AAAA,oBACF;AAAA,oBAEA,oBAAC,UAAK,WAAW,OAAO,SAAU,UAAG,GAAA,MAAM,EAAE,GAAG,CAAA;AAAA,oBAEhD,oBAAC,WAAU,EAAA,OAAc,OAAgB,CAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAhBpC,MAAM;AAAA,cAiBb;AAAA,YAAA,CAEH,EACH,CAAA;AAAA,UAAA,EAAA,CACF,IACE;AAAA,QAAA,GACN;AAAA,QACC,cACC,qBAAC,OAAI,EAAA,WAAW,OAAO,gBACrB,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,OAAO,eAAe,UAAa,iBAAA;AAAA,8BAClD,OACC,EAAA,UAAA,qBAAC,OAAI,EAAA,WAAW,OAAO,cACrB,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,OAAO;AAAA,kBAChB,YAAY;AAAA,kBACZ,YAAY;AAAA,gBACd;AAAA,gBAEA,UAAA,oBAAC,SACE,UAAY,YAAA,WAAW,aAAa,YAAY,aAC7C,aACA,YAAY,OAClB,CAAA;AAAA,cAAA;AAAA,YACF;AAAA,YACC,qBAAA,OAAA,EAAI,WAAW,OAAO,uBACrB,UAAA;AAAA,cAAA,oBAAC,SAAI,UAAG,MAAA,CAAA;AAAA,cACR,oBAAC,SAAI,WAAW,OAAO,kBACrB,UAAC,oBAAA,QAAA,EAAM,UAAY,YAAA,GAAG,CAAA,EACxB,CAAA;AAAA,YAAA,GACF;AAAA,YACC,qBAAA,OAAA,EAAI,WAAW,OAAO,uBACrB,UAAA;AAAA,cAAA,oBAAC,SAAI,UAAM,SAAA,CAAA;AAAA,kCACV,OAAI,EAAA,WAAW,OAAO,kBACpB,6BAAY,sCAAgB;AAAA,gBAC3B,CAAC,MAAM,EAAE,OAAO,YAAY;AAAA,mBAE1B,YACA,YAAY,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,YAAY,EAAE,IACrD,WACA,SACR,CAAA;AAAA,YAAA,GACF;AAAA,YACC,qBAAA,OAAA,EAAI,WAAW,OAAO,uBACrB,UAAA;AAAA,cAAA,oBAAC,SAAI,UAAa,gBAAA,CAAA;AAAA,cACjB,oBAAA,OAAA,EAAI,WAAW,OAAO,kBACpB,UAAY,YAAA,YACT,IAAI,KAAK,YAAY,SAAS,EAAE,uBAChC,MACN,CAAA;AAAA,YAAA,EACF,CAAA;AAAA,UAAA,EAAA,CACF,EACF,CAAA;AAAA,UACC,YAAY,aAET,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,OAAO,eAAe,UAAW,eAAA;AAAA,YAChD,oBAAA,OAAA,EAAI,WAAW,OAAO,gBACrB,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAO,YAAY;AAAA,gBACnB,iBAAiB,CAAA;AAAA,cAAC;AAAA,YAAA,EAEtB,CAAA;AAAA,UAAA,EAAA,CACF,IACE;AAAA,UACH,oBAAA,OAAA,EAAI,WAAW,OAAO,eAAe,UAAQ,YAAA;AAAA,UAC7C,oBAAA,OAAA,EAAI,WAAW,OAAO,gBACrB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,iBAAiB,CAAA;AAAA,YAAC;AAAA,UAAA,EAEtB,CAAA;AAAA,QAAA,EAAA,CACF,IACE;AAAA,QACH,YACC,qBAAC,OAAI,EAAA,WAAW,OAAO,iBACrB,UAAA;AAAA,UAAA,oBAAC,OAAI,EAAA,WAAW,OAAO,eAAe,UAAa,iBAAA;AAAA,UAClD,oBAAA,OAAA,EAAI,WAAW,OAAO,gBACrB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,YAAY,SAAS;AAAA,cAC5B,iBAAiB,OAAO;AAAA,gBACtB,YAAY,SAAS;AAAA,cAAA,EACrB,OAAO,CAAC,KAAU,SAAS;AACvB,oBAAA,IAAI,IAAI,CAAC;AACN,uBAAA;AAAA,cAAA,GACN,CAAE,CAAA;AAAA,YAAA;AAAA,UAAA,EAET,CAAA;AAAA,QAAA,EAAA,CACF,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/esm/Explorer.js

@@ -279,7 +279,7 @@ const stylesFactory = (shadowDOMTarget) => {
   };
 };
 function useStyles() {
-  const shadowDomTarget = React.useContext(ShadowDomTargetContext);
+  const shadowDomTarget = React.use(ShadowDomTargetContext);
   const [_styles] = React.useState(() => stylesFactory(shadowDomTarget));
   return _styles;
 }