@tanstack/router-devtools 0.0.1-beta.99 → 1.0.1

package/build/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * router-devtools
+ * @tanstack/router-devtools/src/index.tsx
  *
  * Copyright (c) TanStack
  *
@@ -10,7 +10,7 @@
  */
 import * as React from 'react';
 import React__default from 'react';
-import { routerContext, invariant, useStore, last } from '@tanstack/router';
+import { useRouter, useRouterState, invariant, trimPath } from '@tanstack/react-router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -64,16 +64,16 @@ function useLocalStorage(key, defaultValue) {
 }
 
 const defaultTheme = {
-  background: '#0b1521',
-  backgroundAlt: '#132337',
+  background: '#222222',
+  backgroundAlt: '#292929',
   foreground: 'white',
-  gray: '#3f4e60',
-  grayAlt: '#222e3e',
+  gray: '#444',
+  grayAlt: '#444',
   inputBackgroundColor: '#fff',
   inputTextColor: '#000',
-  success: '#00ab52',
+  success: '#80cb00',
   danger: '#ff0085',
-  active: '#006bff',
+  active: '#0099ff',
   warning: '#ffb200'
 };
 const ThemeContext = /*#__PURE__*/React__default.createContext(defaultTheme);
@@ -127,7 +127,12 @@ function useMediaQuery(query) {
 
 const isServer$1 = typeof window === 'undefined';
 function getStatusColor(match, theme) {
-  return match.state.status === 'pending' ? theme.active : match.state.status === 'error' ? theme.danger : match.state.status === 'success' ? theme.success : theme.gray;
+  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(({
@@ -202,6 +207,25 @@ function scheduleMicrotask(callback) {
     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)',
@@ -218,7 +242,6 @@ const Panel = styled('div', (_props, theme) => ({
     // flexDirection: 'column',
   }
 });
-
 const ActivePanel = styled('div', () => ({
   flex: '1 1 500px',
   display: 'flex',
@@ -375,6 +398,7 @@ function Explorer({
   defaultExpanded,
   renderer = DefaultRenderer,
   pageSize = 100,
+  filterSubEntries,
   ...rest
 }) {
   const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded));
@@ -409,12 +433,14 @@ function Explorer({
       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
+      renderer: renderer,
+      filterSubEntries: filterSubEntries
     }, rest, entry)),
     type,
     subEntries,
@@ -670,6 +696,81 @@ function TanStackRouterDevtools({
     "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,
@@ -678,17 +779,21 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     router: userRouter,
     ...panelProps
   } = props;
-  const routerContextValue = React__default.useContext(routerContext);
-  const router = userRouter ?? routerContextValue?.router;
+  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 [activeRouteId, setActiveRouteId] = useLocalStorage('tanstackRouterDevtoolsActiveRouteId', '');
-  const [activeMatchId, setActiveMatchId] = useLocalStorage('tanstackRouterDevtoolsActiveMatchId', '');
-  React__default.useEffect(() => {
-    setActiveMatchId('');
-  }, [activeRouteId]);
-  const allMatches = React__default.useMemo(() => [...Object.values(router.state.currentMatches), ...Object.values(router.state.pendingMatches ?? [])], [router.state.currentMatches, router.state.pendingMatches]);
-  const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
+
+  // 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({
@@ -793,8 +898,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     }
   }, /*#__PURE__*/React__default.createElement(Explorer, {
     label: "Router",
-    value: router,
-    defaultExpanded: {}
+    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',
@@ -805,20 +917,110 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       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
+      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'
     }
-  }, "Active Matches"), router.state.currentMatches.map((match, i) => {
+  }, "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.route.id || i,
+      key: match.id || i,
       role: "button",
-      "aria-label": `Open match details for ${match.route.id}`,
-      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
+      "aria-label": `Open match details for ${match.id}`,
+      onClick: () => setActiveId(activeId === match.id ? '' : match.id),
       style: {
         display: 'flex',
         borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
@@ -841,49 +1043,76 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       }
     }), /*#__PURE__*/React__default.createElement(Code, {
       style: {
-        padding: '.5em'
+        padding: '.5em',
+        fontSize: '0.7rem'
       }
-    }, `${match.id}`));
-  }), router.state.pendingMatches?.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    }, `${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: {
-      marginTop: '2rem',
       padding: '.5em',
       background: defaultTheme.backgroundAlt,
       position: 'sticky',
       top: 0,
-      zIndex: 1
+      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'
     }
-  }, "Pending Matches"), router.state.pendingMatches?.map((match, i) => {
+  }, "age / staleTime / gcTime")), /*#__PURE__*/React__default.createElement("div", null, routerState.cachedMatches.map(match => {
     return /*#__PURE__*/React__default.createElement("div", {
-      key: match.route.id || i,
+      key: match.id,
       role: "button",
-      "aria-label": `Open match details for ${match.route.id}`,
-      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
+      "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',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
+        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: '1.3rem',
-        height: '1.3rem',
+        width: '.75rem',
+        height: '.75rem',
         marginLeft: '.25rem',
         background: getStatusColor(match, defaultTheme),
         alignItems: 'center',
         justifyContent: 'center',
         fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
+        borderRadius: '100%',
+        transition: 'all 1s ease-out'
       }
     }), /*#__PURE__*/React__default.createElement(Code, {
       style: {
         padding: '.5em'
       }
-    }, `${match.id}`));
-  })) : null), activeMatch ? /*#__PURE__*/React__default.createElement(ActivePanel, null, /*#__PURE__*/React__default.createElement("div", {
+    }, `${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,
@@ -892,7 +1121,11 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       bottom: 0,
       zIndex: 1
     }
-  }, "Match Details"), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("table", null, /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, "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'
     }
@@ -904,11 +1137,11 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     style: {
       opacity: '.5'
     }
-  }, "Status"), /*#__PURE__*/React__default.createElement("td", null, activeMatch.state.status)), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }, "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.state.updatedAt ? new Date(activeMatch.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default.createElement("div", {
+  }, "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',
@@ -917,17 +1150,15 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       bottom: 0,
       zIndex: 1
     }
-  }, "Actions"), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      padding: '0.5em'
-    }
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    type: "button",
-    onClick: () => activeMatch.load(),
+  }, "Loader Data"), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      background: defaultTheme.gray
+      padding: '.5em'
     }
-  }, "Reload")), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(Explorer, {
+    label: "loaderData",
+    value: activeMatch.loaderData,
+    defaultExpanded: {}
+  }))) : null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       background: defaultTheme.backgroundAlt,
       padding: '.5em',
@@ -944,7 +1175,7 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
     label: "Match",
     value: activeMatch,
     defaultExpanded: {}
-  }))) : null, /*#__PURE__*/React__default.createElement("div", {
+  }))) : null, hasSearch ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       flex: '1 1 500px',
       minHeight: '40%',
@@ -961,24 +1192,70 @@ const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(funct
       position: 'sticky',
       top: 0,
       bottom: 0,
-      zIndex: 1
+      zIndex: 1,
+      fontWeight: 'bold'
     }
   }, "Search Params"), /*#__PURE__*/React__default.createElement("div", {
     style: {
       padding: '.5em'
     }
-  }, Object.keys(last(router.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default.createElement(Explorer, {
-    value: last(router.state.currentMatches)?.state.search || {},
-    defaultExpanded: Object.keys(last(router.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
+  }, /*#__PURE__*/React__default.createElement(Explorer, {
+    value: routerState.location.search || {},
+    defaultExpanded: Object.keys(routerState.location.search || {}).reduce((obj, next) => {
       obj[next] = {};
       return obj;
     }, {})
-  }) : /*#__PURE__*/React__default.createElement("em", {
+  }))) : 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: {
-      opacity: 0.5
+      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