@tanstack/router-devtools 1.7.0 → 1.8.0

package/build/esm/index.js

@@ -1,1265 +0,0 @@
-/**
- * @tanstack/router-devtools/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-import * as React from 'react';
-import React__default from 'react';
-import { useRouter, useRouterState, invariant, trimPath } from '@tanstack/react-router';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const getItem = key => {
-  try {
-    const itemValue = localStorage.getItem(key);
-    if (typeof itemValue === 'string') {
-      return JSON.parse(itemValue);
-    }
-    return undefined;
-  } catch {
-    return undefined;
-  }
-};
-function useLocalStorage(key, defaultValue) {
-  const [value, setValue] = React__default.useState();
-  React__default.useEffect(() => {
-    const initialValue = getItem(key);
-    if (typeof initialValue === 'undefined' || initialValue === null) {
-      setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
-    } else {
-      setValue(initialValue);
-    }
-  }, [defaultValue, key]);
-  const setter = React__default.useCallback(updater => {
-    setValue(old => {
-      let newVal = updater;
-      if (typeof updater == 'function') {
-        newVal = updater(old);
-      }
-      try {
-        localStorage.setItem(key, JSON.stringify(newVal));
-      } catch {}
-      return newVal;
-    });
-  }, [key]);
-  return [value, setter];
-}
-
-const defaultTheme = {
-  background: '#222222',
-  backgroundAlt: '#292929',
-  foreground: 'white',
-  gray: '#444',
-  grayAlt: '#444',
-  inputBackgroundColor: '#fff',
-  inputTextColor: '#000',
-  success: '#80cb00',
-  danger: '#ff0085',
-  active: '#0099ff',
-  warning: '#ffb200'
-};
-const ThemeContext = /*#__PURE__*/React__default.createContext(defaultTheme);
-function ThemeProvider({
-  theme,
-  ...rest
-}) {
-  return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, _extends({
-    value: theme
-  }, rest));
-}
-function useTheme() {
-  return React__default.useContext(ThemeContext);
-}
-
-function useMediaQuery(query) {
-  // Keep track of the preference in state, start with the current match
-  const [isMatch, setIsMatch] = React__default.useState(() => {
-    if (typeof window !== 'undefined') {
-      return window.matchMedia && window.matchMedia(query).matches;
-    }
-    return;
-  });
-
-  // Watch for changes
-  React__default.useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (!window.matchMedia) {
-        return;
-      }
-
-      // Create a matcher
-      const matcher = window.matchMedia(query);
-
-      // Create our handler
-      const onChange = ({
-        matches
-      }) => setIsMatch(matches);
-
-      // Listen for changes
-      matcher.addListener(onChange);
-      return () => {
-        // Stop listening for changes
-        matcher.removeListener(onChange);
-      };
-    }
-    return;
-  }, [isMatch, query, setIsMatch]);
-  return isMatch;
-}
-
-const isServer$1 = typeof window === 'undefined';
-function getStatusColor(match, theme) {
-  return match.status === 'pending' || match.isFetching ? theme.active : match.status === 'error' ? theme.danger : match.status === 'success' ? theme.success : theme.gray;
-}
-function getRouteStatusColor(matches, route, theme) {
-  const found = matches.find(d => d.routeId === route.id);
-  if (!found) return theme.gray;
-  return getStatusColor(found, theme);
-}
-function styled(type, newStyles, queries = {}) {
-  return /*#__PURE__*/React__default.forwardRef(({
-    style,
-    ...rest
-  }, ref) => {
-    const theme = useTheme();
-    const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useMediaQuery(key) ? {
-        ...current,
-        ...(typeof value === 'function' ? value(rest, theme) : value)
-      } : current;
-    }, {});
-    return /*#__PURE__*/React__default.createElement(type, {
-      ...rest,
-      style: {
-        ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
-        ...style,
-        ...mediaStyles
-      },
-      ref
-    });
-  });
-}
-function useIsMounted() {
-  const mountedRef = React__default.useRef(false);
-  const isMounted = React__default.useCallback(() => mountedRef.current, []);
-  React__default[isServer$1 ? 'useEffect' : 'useLayoutEffect'](() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-  return isMounted;
-}
-
-/**
- * Displays a string regardless the type of the data
- * @param {unknown} value Value to be stringified
- */
-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`;
-  }
-};
-
-/**
- * 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.
- */
-function useSafeState(initialState) {
-  const isMounted = useIsMounted();
-  const [state, setState] = React__default.useState(initialState);
-  const safeSetState = React__default.useCallback(value => {
-    scheduleMicrotask(() => {
-      if (isMounted()) {
-        setState(value);
-      }
-    });
-  }, [isMounted]);
-  return [state, safeSetState];
-}
-
-/**
- * Schedules a microtask.
- * This can be useful to schedule state updates after rendering.
- */
-function scheduleMicrotask(callback) {
-  Promise.resolve().then(callback).catch(error => setTimeout(() => {
-    throw error;
-  }));
-}
-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);
-}
-
-const Panel = styled('div', (_props, theme) => ({
-  fontSize: 'clamp(12px, 1.5vw, 14px)',
-  fontFamily: `sans-serif`,
-  display: 'flex',
-  backgroundColor: theme.background,
-  color: theme.foreground
-}), {
-  '(max-width: 700px)': {
-    flexDirection: 'column'
-  },
-  '(max-width: 600px)': {
-    fontSize: '.9em'
-    // flexDirection: 'column',
-  }
-});
-const ActivePanel = styled('div', () => ({
-  flex: '1 1 500px',
-  display: 'flex',
-  flexDirection: 'column',
-  overflow: 'auto',
-  height: '100%'
-}), {
-  '(max-width: 700px)': (_props, theme) => ({
-    borderTop: `2px solid ${theme.gray}`
-  })
-});
-const Button = styled('button', (props, theme) => ({
-  appearance: 'none',
-  fontSize: '.9em',
-  fontWeight: 'bold',
-  background: theme.gray,
-  border: '0',
-  borderRadius: '.3em',
-  color: 'white',
-  padding: '.5em',
-  opacity: props.disabled ? '.5' : undefined,
-  cursor: 'pointer'
-}));
-
-// export const QueryKeys = styled('span', {
-//   display: 'inline-block',
-//   fontSize: '0.9em',
-// })
-
-// export const QueryKey = styled('span', {
-//   display: 'inline-flex',
-//   alignItems: 'center',
-//   padding: '.2em .4em',
-//   fontWeight: 'bold',
-//   textShadow: '0 0 10px black',
-//   borderRadius: '.2em',
-// })
-
-const Code = styled('code', {
-  fontSize: '.9em'
-});
-
-const Entry = styled('div', {
-  fontFamily: 'Menlo, monospace',
-  fontSize: '.7rem',
-  lineHeight: '1.7',
-  outline: 'none',
-  wordBreak: 'break-word'
-});
-const Label = styled('span', {
-  color: 'white'
-});
-const LabelButton = styled('button', {
-  cursor: 'pointer',
-  color: 'white'
-});
-const ExpandButton = styled('button', {
-  cursor: 'pointer',
-  color: 'inherit',
-  font: 'inherit',
-  outline: 'inherit',
-  background: 'transparent',
-  border: 'none',
-  padding: 0
-});
-const Value = styled('span', (_props, theme) => ({
-  color: theme.danger
-}));
-const SubEntries = styled('div', {
-  marginLeft: '.1em',
-  paddingLeft: '1em',
-  borderLeft: '2px solid rgba(0,0,0,.15)'
-});
-const Info = styled('span', {
-  color: 'grey',
-  fontSize: '.7em'
-});
-const Expander = ({
-  expanded,
-  style = {}
-}) => /*#__PURE__*/React.createElement("span", {
-  style: {
-    display: 'inline-block',
-    transition: 'all .1s ease',
-    transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
-    ...style
-  }
-}, "\u25B6");
-/**
- * Chunk elements in the array by size
- *
- * when the array cannot be chunked evenly by size, the last chunk will be
- * filled with the remaining elements
- *
- * @example
- * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
- */
-function chunkArray(array, size) {
-  if (size < 1) return [];
-  let i = 0;
-  const result = [];
-  while (i < array.length) {
-    result.push(array.slice(i, i + size));
-    i = i + size;
-  }
-  return result;
-}
-const DefaultRenderer = ({
-  handleEntry,
-  label,
-  value,
-  subEntries = [],
-  subEntryPages = [],
-  type,
-  expanded = false,
-  toggleExpanded,
-  pageSize,
-  renderer
-}) => {
-  const [expandedPages, setExpandedPages] = React.useState([]);
-  const [valueSnapshot, setValueSnapshot] = React.useState(undefined);
-  const refreshValueSnapshot = () => {
-    setValueSnapshot(value());
-  };
-  return /*#__PURE__*/React.createElement(Entry, null, subEntryPages.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ExpandButton, {
-    onClick: () => toggleExpanded()
-  }, /*#__PURE__*/React.createElement(Expander, {
-    expanded: expanded
-  }), " ", label, ' ', /*#__PURE__*/React.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React.createElement(SubEntries, null, subEntries.map((entry, index) => handleEntry(entry))) : /*#__PURE__*/React.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React.createElement("div", {
-    key: index
-  }, /*#__PURE__*/React.createElement(Entry, null, /*#__PURE__*/React.createElement(LabelButton, {
-    onClick: () => setExpandedPages(old => old.includes(index) ? old.filter(d => d !== index) : [...old, index])
-  }, /*#__PURE__*/React.createElement(Expander, {
-    expanded: expanded
-  }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React.createElement(SubEntries, null, entries.map(entry => handleEntry(entry))) : null)))) : null) : type === 'function' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Explorer, {
-    renderer: renderer,
-    label: /*#__PURE__*/React.createElement("button", {
-      onClick: refreshValueSnapshot,
-      style: {
-        appearance: 'none',
-        border: '0',
-        background: 'transparent'
-      }
-    }, /*#__PURE__*/React.createElement(Label, null, label), " \uD83D\uDD04", ' '),
-    value: valueSnapshot,
-    defaultExpanded: {}
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React.createElement(Value, null, displayValue(value))));
-};
-function isIterable(x) {
-  return Symbol.iterator in x;
-}
-function Explorer({
-  value,
-  defaultExpanded,
-  renderer = DefaultRenderer,
-  pageSize = 100,
-  filterSubEntries,
-  ...rest
-}) {
-  const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
-  const toggleExpanded = React.useCallback(() => setExpanded(old => !old), []);
-  let type = typeof value;
-  let subEntries = [];
-  const makeProperty = sub => {
-    const subDefaultExpanded = defaultExpanded === true ? {
-      [sub.label]: true
-    } : defaultExpanded?.[sub.label];
-    return {
-      ...sub,
-      defaultExpanded: subDefaultExpanded
-    };
-  };
-  if (Array.isArray(value)) {
-    type = 'array';
-    subEntries = value.map((d, i) => makeProperty({
-      label: i.toString(),
-      value: d
-    }));
-  } else if (value !== null && typeof value === 'object' && isIterable(value) && typeof value[Symbol.iterator] === 'function') {
-    type = 'Iterable';
-    subEntries = Array.from(value, (val, i) => makeProperty({
-      label: i.toString(),
-      value: val
-    }));
-  } else if (typeof value === 'object' && value !== null) {
-    type = 'object';
-    subEntries = Object.entries(value).map(([key, val]) => makeProperty({
-      label: key,
-      value: val
-    }));
-  }
-  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries;
-  const subEntryPages = chunkArray(subEntries, pageSize);
-  return renderer({
-    handleEntry: entry => /*#__PURE__*/React.createElement(Explorer, _extends({
-      key: entry.label,
-      value: value,
-      renderer: renderer,
-      filterSubEntries: filterSubEntries
-    }, rest, entry)),
-    type,
-    subEntries,
-    subEntryPages,
-    value,
-    expanded,
-    toggleExpanded,
-    pageSize,
-    ...rest
-  });
-}
-
-const isServer = typeof window === 'undefined';
-function Logo(props) {
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
-    style: {
-      ...(props.style ?? {}),
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'column',
-      fontSize: '0.8rem',
-      fontWeight: 'bolder',
-      lineHeight: '1'
-    }
-  }), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      letterSpacing: '-0.05rem'
-    }
-  }, "TANSTACK"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
-      // @ts-ignore
-      '--tw-gradient-from': '#84cc16',
-      '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
-      '--tw-gradient-to': '#10b981',
-      WebkitBackgroundClip: 'text',
-      color: 'transparent',
-      letterSpacing: '0.1rem',
-      marginRight: '-0.2rem'
-    }
-  }, "ROUTER"));
-}
-function TanStackRouterDevtools({
-  initialIsOpen,
-  panelProps = {},
-  closeButtonProps = {},
-  toggleButtonProps = {},
-  position = 'bottom-left',
-  containerElement: Container = 'footer',
-  router
-}) {
-  const rootRef = React__default.useRef(null);
-  const panelRef = React__default.useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage('tanstackRouterDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage('tanstackRouterDevtoolsHeight', null);
-  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false);
-  const [isResizing, setIsResizing] = useSafeState(false);
-  const isMounted = useIsMounted();
-  const handleDragStart = (panelElement, startEvent) => {
-    if (startEvent.button !== 0) return; // Only allow left click for drag
-
-    setIsResizing(true);
-    const dragInfo = {
-      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
-      pageY: startEvent.pageY
-    };
-    const run = moveEvent => {
-      const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = dragInfo?.originalHeight + delta;
-      setDevtoolsHeight(newHeight);
-      if (newHeight < 70) {
-        setIsOpen(false);
-      } else {
-        setIsOpen(true);
-      }
-    };
-    const unsub = () => {
-      setIsResizing(false);
-      document.removeEventListener('mousemove', run);
-      document.removeEventListener('mouseUp', unsub);
-    };
-    document.addEventListener('mousemove', run);
-    document.addEventListener('mouseup', unsub);
-  };
-  React__default.useEffect(() => {
-    setIsResolvedOpen(isOpen ?? false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
-
-  // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
-  React__default.useEffect(() => {
-    const ref = panelRef.current;
-    if (ref) {
-      const handlePanelTransitionStart = () => {
-        if (ref && isResolvedOpen) {
-          ref.style.visibility = 'visible';
-        }
-      };
-      const handlePanelTransitionEnd = () => {
-        if (ref && !isResolvedOpen) {
-          ref.style.visibility = 'hidden';
-        }
-      };
-      ref.addEventListener('transitionstart', handlePanelTransitionStart);
-      ref.addEventListener('transitionend', handlePanelTransitionEnd);
-      return () => {
-        ref.removeEventListener('transitionstart', handlePanelTransitionStart);
-        ref.removeEventListener('transitionend', handlePanelTransitionEnd);
-      };
-    }
-    return;
-  }, [isResolvedOpen]);
-  React__default[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
-    if (isResolvedOpen) {
-      const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
-      const run = () => {
-        const containerHeight = panelRef.current?.getBoundingClientRect().height;
-        if (rootRef.current?.parentElement) {
-          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
-        }
-      };
-      run();
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', run);
-        return () => {
-          window.removeEventListener('resize', run);
-          if (rootRef.current?.parentElement && typeof previousValue === 'string') {
-            rootRef.current.parentElement.style.paddingBottom = previousValue;
-          }
-        };
-      }
-    }
-    return;
-  }, [isResolvedOpen]);
-  const {
-    style: panelStyle = {},
-    ...otherPanelProps
-  } = panelProps;
-  const {
-    style: closeButtonStyle = {},
-    onClick: onCloseClick,
-    ...otherCloseButtonProps
-  } = closeButtonProps;
-  const {
-    style: toggleButtonStyle = {},
-    onClick: onToggleClick,
-    ...otherToggleButtonProps
-  } = toggleButtonProps;
-
-  // Do not render on the server
-  if (!isMounted()) return null;
-  return /*#__PURE__*/React__default.createElement(Container, {
-    ref: rootRef,
-    className: "TanStackRouterDevtools"
-  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    theme: defaultTheme
-  }, /*#__PURE__*/React__default.createElement(TanStackRouterDevtoolsPanel, _extends({
-    ref: panelRef
-  }, otherPanelProps, {
-    router: router,
-    style: {
-      position: 'fixed',
-      bottom: '0',
-      right: '0',
-      zIndex: 99999,
-      width: '100%',
-      height: devtoolsHeight ?? 500,
-      maxHeight: '90%',
-      boxShadow: '0 0 20px rgba(0,0,0,.3)',
-      borderTop: `1px solid ${defaultTheme.gray}`,
-      transformOrigin: 'top',
-      // visibility will be toggled after transitions, but set initial state here
-      visibility: isOpen ? 'visible' : 'hidden',
-      ...panelStyle,
-      ...(isResizing ? {
-        transition: `none`
-      } : {
-        transition: `all .2s ease`
-      }),
-      ...(isResolvedOpen ? {
-        opacity: 1,
-        pointerEvents: 'all',
-        transform: `translateY(0) scale(1)`
-      } : {
-        opacity: 0,
-        pointerEvents: 'none',
-        transform: `translateY(15px) scale(1.02)`
-      })
-    },
-    isOpen: isResolvedOpen,
-    setIsOpen: setIsOpen,
-    handleDragStart: e => handleDragStart(panelRef.current, e)
-  })), isResolvedOpen ? /*#__PURE__*/React__default.createElement(Button, _extends({
-    type: "button",
-    "aria-label": "Close TanStack Router Devtools"
-  }, otherCloseButtonProps, {
-    onClick: e => {
-      setIsOpen(false);
-      onCloseClick && onCloseClick(e);
-    },
-    style: {
-      position: 'fixed',
-      zIndex: 99999,
-      margin: '.5em',
-      bottom: 0,
-      ...(position === 'top-right' ? {
-        right: '0'
-      } : position === 'top-left' ? {
-        left: '0'
-      } : position === 'bottom-right' ? {
-        right: '0'
-      } : {
-        left: '0'
-      }),
-      ...closeButtonStyle
-    }
-  }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default.createElement("button", _extends({
-    type: "button"
-  }, otherToggleButtonProps, {
-    "aria-label": "Open TanStack Router Devtools",
-    onClick: e => {
-      setIsOpen(true);
-      onToggleClick && onToggleClick(e);
-    },
-    style: {
-      appearance: 'none',
-      background: 'none',
-      border: 0,
-      padding: 0,
-      position: 'fixed',
-      zIndex: 99999,
-      display: 'inline-flex',
-      fontSize: '1.5em',
-      margin: '.5em',
-      cursor: 'pointer',
-      width: 'fit-content',
-      ...(position === 'top-right' ? {
-        top: '0',
-        right: '0'
-      } : position === 'top-left' ? {
-        top: '0',
-        left: '0'
-      } : position === 'bottom-right' ? {
-        bottom: '0',
-        right: '0'
-      } : {
-        bottom: '0',
-        left: '0'
-      }),
-      ...toggleButtonStyle
-    }
-  }), /*#__PURE__*/React__default.createElement(Logo, {
-    "aria-hidden": true
-  })) : null);
-}
-function RouteComp({
-  route,
-  isRoot,
-  activeId,
-  setActiveId
-}) {
-  const routerState = useRouterState();
-  const matches = routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches;
-  const match = routerState.matches.find(d => d.routeId === route.id);
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-    role: "button",
-    "aria-label": `Open match details for ${route.id}`,
-    onClick: () => {
-      if (match) {
-        setActiveId(activeId === route.id ? '' : route.id);
-      }
-    },
-    style: {
-      display: 'flex',
-      borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-      cursor: match ? 'pointer' : 'default',
-      alignItems: 'center',
-      background: route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,
-      padding: '.25rem .5rem',
-      gap: '.5rem'
-    }
-  }, isRoot ? null : /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flex: '0 0 auto',
-      width: '.7rem',
-      height: '.7rem',
-      alignItems: 'center',
-      justifyContent: 'center',
-      fontWeight: 'bold',
-      borderRadius: '100%',
-      transition: 'all .2s ease-out',
-      background: getRouteStatusColor(matches, route, defaultTheme),
-      opacity: match ? 1 : 0.3
-    }
-  }), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flex: '1 0 auto',
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      padding: isRoot ? '0 .25rem' : 0,
-      opacity: match ? 1 : 0.7,
-      fontSize: '0.7rem'
-    }
-  }, /*#__PURE__*/React__default.createElement(Code, null, route.path || trimPath(route.id), " "), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '.5rem'
-    }
-  }, match ? /*#__PURE__*/React__default.createElement(Code, {
-    style: {
-      opacity: 0.3
-    }
-  }, match.id) : null, /*#__PURE__*/React__default.createElement(AgeTicker, {
-    match: match
-  })))), route.children?.length ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      marginLeft: isRoot ? 0 : '1rem',
-      borderLeft: isRoot ? '' : `solid 1px ${defaultTheme.grayAlt}`
-    }
-  }, [...route.children].sort((a, b) => {
-    return a.rank - b.rank;
-  }).map(r => /*#__PURE__*/React__default.createElement(RouteComp, {
-    key: r.id,
-    route: r,
-    activeId: activeId,
-    setActiveId: setActiveId
-  }))) : null);
-}
-const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-  const {
-    isOpen = true,
-    setIsOpen,
-    handleDragStart,
-    router: userRouter,
-    ...panelProps
-  } = props;
-  const router = useRouter();
-  const routerState = useRouterState();
-  const matches = [...(routerState.pendingMatches ?? []), ...routerState.matches, ...routerState.cachedMatches];
-  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.');
-
-  // useStore(router.__store)
-
-  const [showMatches, setShowMatches] = useLocalStorage('tanstackRouterDevtoolsShowMatches', true);
-  const [activeId, setActiveId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-  const activeMatch = React__default.useMemo(() => matches.find(d => d.routeId === activeId || d.id === activeId), [matches, activeId]);
-  const hasSearch = Object.keys(routerState.location.search || {}).length;
-  const explorerState = {
-    ...router,
-    state: router.state
-  };
-  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    theme: defaultTheme
-  }, /*#__PURE__*/React__default.createElement(Panel, _extends({
-    ref: ref,
-    className: "TanStackRouterDevtoolsPanel"
-  }, panelProps), /*#__PURE__*/React__default.createElement("style", {
-    dangerouslySetInnerHTML: {
-      __html: `
-
-            .TanStackRouterDevtoolsPanel * {
-              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
-            }
-
-            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {
-              width: 1em;
-              height: 1em;
-            }
-
-            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {
-              background: ${defaultTheme.backgroundAlt};
-            }
-
-            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {
-              background: ${defaultTheme.gray};
-              border-radius: .5em;
-              border: 3px solid ${defaultTheme.backgroundAlt};
-            }
-
-            .TanStackRouterDevtoolsPanel table {
-              width: 100%;
-            }
-
-            .TanStackRouterDevtoolsPanel table tr {
-              border-bottom: 2px dotted rgba(255, 255, 255, .2);
-            }
-
-            .TanStackRouterDevtoolsPanel table tr:last-child {
-              border-bottom: none
-            }
-
-            .TanStackRouterDevtoolsPanel table td {
-              padding: .25rem .5rem;
-              border-right: 2px dotted rgba(255, 255, 255, .05);
-            }
-
-            .TanStackRouterDevtoolsPanel table td:last-child {
-              border-right: none
-            }
-
-          `
-    }
-  }), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '4px',
-      marginBottom: '-4px',
-      cursor: 'row-resize',
-      zIndex: 100000
-    },
-    onMouseDown: handleDragStart
-  }), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flex: '1 1 500px',
-      minHeight: '40%',
-      maxHeight: '100%',
-      overflow: 'auto',
-      borderRight: `1px solid ${defaultTheme.grayAlt}`,
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'start',
-      gap: '1rem',
-      padding: '1rem',
-      alignItems: 'center',
-      background: defaultTheme.backgroundAlt
-    }
-  }, /*#__PURE__*/React__default.createElement(Logo, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
-      fontWeight: 'bold'
-    }
-  }, /*#__PURE__*/React__default.createElement("span", {
-    style: {
-      fontWeight: 100
-    }
-  }, "Devtools"))), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      overflowY: 'auto',
-      flex: '1'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__default.createElement(Explorer, {
-    label: "Router",
-    value: Object.fromEntries(multiSortBy(Object.keys(explorerState), ['state', 'routesById', 'routesByPath', 'flatRoutes', 'options'].map(d => dd => dd !== d)).map(key => [key, explorerState[key]]).filter(d => typeof d[1] !== 'function' && !['__store', 'basepath', 'injectedHtml', 'subscribers', 'latestLoadPromise', 'navigateTimeout', 'resetNextScroll', 'tempLocationKey', 'latestLocation', 'routeTree', 'history'].includes(d[0]))),
-    defaultExpanded: {
-      state: {},
-      context: {},
-      options: {}
-    },
-    filterSubEntries: subEntries => {
-      return subEntries.filter(d => typeof d.value !== 'function');
-    }
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flex: '1 1 500px',
-      minHeight: '40%',
-      maxHeight: '100%',
-      overflow: 'auto',
-      borderRight: `1px solid ${defaultTheme.grayAlt}`,
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flex: '1 1 auto',
-      overflowY: 'auto'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1,
-      display: 'flex',
-      alignItems: 'center',
-      gap: '.5rem',
-      fontWeight: 'bold'
-    }
-  }, "Pathname", ' ', routerState.location.maskedLocation ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.1rem .5rem',
-      background: defaultTheme.warning,
-      color: 'black',
-      borderRadius: '.5rem'
-    }
-  }, "Masked") : null), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5rem',
-      display: 'flex',
-      gap: '.5rem',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement("code", {
-    style: {
-      opacity: 0.6
-    }
-  }, routerState.location.pathname), routerState.location.maskedLocation ? /*#__PURE__*/React__default.createElement("code", {
-    style: {
-      color: defaultTheme.warning,
-      fontWeight: 'bold'
-    }
-  }, routerState.location.maskedLocation.pathname) : null), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: '.5rem',
-      fontWeight: 'bold'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '.5rem'
-    }
-  }, /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    onClick: () => {
-      setShowMatches(false);
-    },
-    disabled: !showMatches,
-    style: {
-      appearance: 'none',
-      opacity: showMatches ? 0.5 : 1,
-      border: 0,
-      background: 'transparent',
-      color: 'inherit',
-      cursor: 'pointer'
-    }
-  }, "Routes"), "/", /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    onClick: () => {
-      setShowMatches(true);
-    },
-    disabled: showMatches,
-    style: {
-      appearance: 'none',
-      opacity: !showMatches ? 0.5 : 1,
-      border: 0,
-      background: 'transparent',
-      color: 'inherit',
-      cursor: 'pointer'
-    }
-  }, "Matches")), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      opacity: 0.3,
-      fontSize: '0.7rem',
-      fontWeight: 'normal'
-    }
-  }, "age / staleTime / gcTime")), !showMatches ? /*#__PURE__*/React__default.createElement(RouteComp, {
-    route: router.routeTree,
-    isRoot: true,
-    activeId: activeId,
-    setActiveId: setActiveId
-  }) : /*#__PURE__*/React__default.createElement("div", null, (routerState.status === 'pending' ? routerState.pendingMatches ?? [] : routerState.matches).map((match, i) => {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: match.id || i,
-      role: "button",
-      "aria-label": `Open match details for ${match.id}`,
-      onClick: () => setActiveId(activeId === match.id ? '' : match.id),
-      style: {
-        display: 'flex',
-        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-        cursor: 'pointer',
-        alignItems: 'center',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        marginLeft: '.25rem',
-        background: getStatusColor(match, defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default.createElement(Code, {
-      style: {
-        padding: '.5em',
-        fontSize: '0.7rem'
-      }
-    }, `${match.id}`), /*#__PURE__*/React__default.createElement(AgeTicker, {
-      match: match
-    }));
-  }))), routerState.cachedMatches?.length ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flex: '1 1 auto',
-      overflowY: 'auto',
-      maxHeight: '50%'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: '.5rem',
-      fontWeight: 'bold'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", null, "Cached Matches"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      opacity: 0.3,
-      fontSize: '0.7rem',
-      fontWeight: 'normal'
-    }
-  }, "age / staleTime / gcTime")), /*#__PURE__*/React__default.createElement("div", null, routerState.cachedMatches.map(match => {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: match.id,
-      role: "button",
-      "aria-label": `Open match details for ${match.id}`,
-      onClick: () => setActiveId(activeId === match.id ? '' : match.id),
-      style: {
-        display: 'flex',
-        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
-        cursor: 'pointer',
-        alignItems: 'center',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined,
-        fontSize: '0.7rem'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '.75rem',
-        height: '.75rem',
-        marginLeft: '.25rem',
-        background: getStatusColor(match, defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '100%',
-        transition: 'all 1s ease-out'
-      }
-    }), /*#__PURE__*/React__default.createElement(Code, {
-      style: {
-        padding: '.5em'
-      }
-    }, `${match.id}`), /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        marginLeft: 'auto'
-      }
-    }, /*#__PURE__*/React__default.createElement(AgeTicker, {
-      match: match
-    })));
-  }))) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1
-    }
-  }, "Match Details"), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("table", {
-    style: {
-      fontSize: '0.8rem'
-    }
-  }, /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "ID"), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Code, {
-    style: {
-      lineHeight: '1.8em'
-    }
-  }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, routerState.pendingMatches?.find(d => d.id === activeMatch.id) ? 'Pending' : routerState.matches?.find(d => d.id === activeMatch.id) ? 'Active' : 'Cached', ' ', "- ", activeMatch.status)), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Last Updated"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), activeMatch.loaderData ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      background: defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1
-    }
-  }, "Loader Data"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__default.createElement(Explorer, {
-    label: "loaderData",
-    value: activeMatch.loaderData,
-    defaultExpanded: {}
-  }))) : null, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      background: defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1
-    }
-  }, "Explorer"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__default.createElement(Explorer, {
-    label: "Match",
-    value: activeMatch,
-    defaultExpanded: {}
-  }))) : null, hasSearch ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flex: '1 1 500px',
-      minHeight: '40%',
-      maxHeight: '100%',
-      overflow: 'auto',
-      borderRight: `1px solid ${defaultTheme.grayAlt}`,
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      bottom: 0,
-      zIndex: 1,
-      fontWeight: 'bold'
-    }
-  }, "Search Params"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__default.createElement(Explorer, {
-    value: routerState.location.search || {},
-    defaultExpanded: Object.keys(routerState.location.search || {}).reduce((obj, next) => {
-      obj[next] = {};
-      return obj;
-    }, {})
-  }))) : null));
-});
-function AgeTicker({
-  match
-}) {
-  const router = useRouter();
-  const rerender = React__default.useReducer(() => ({}), () => ({}))[1];
-  React__default.useEffect(() => {
-    const interval = setInterval(() => {
-      rerender();
-    }, 1000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-  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 * 1000;
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: '.25rem',
-      color: age > staleTime ? defaultTheme.warning : undefined
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {}
-  }, formatTime(age)), /*#__PURE__*/React__default.createElement("div", null, "/"), /*#__PURE__*/React__default.createElement("div", null, formatTime(staleTime)), /*#__PURE__*/React__default.createElement("div", null, "/"), /*#__PURE__*/React__default.createElement("div", null, formatTime(gcTime)));
-}
-function formatTime(ms) {
-  const units = ['s', 'min', 'h', 'd'];
-  const values = [ms / 1000, ms / 60000, ms / 3600000, ms / 86400000];
-  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];
-}
-
-export { TanStackRouterDevtools, TanStackRouterDevtoolsPanel };
-//# sourceMappingURL=index.js.map