@tanstack/router-devtools 1.16.2 → 1.16.4

package/dist/cjs/devtools.cjs

@@ -476,7 +476,7 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    handleDragStart ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
@@ -491,7 +491,7 @@ const TanStackRouterDevtoolsPanel = React.forwardRef(function TanStackRouterDevt
         },
         onMouseDown: handleDragStart
       }
-    ),
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {

package/dist/cjs/devtools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  invariant,\n  AnyRouter,\n  Route,\n  AnyRoute,\n  AnyRootRoute,\n  trimPath,\n  useRouter,\n  useRouterState,\n  AnyRouteMatch,\n} from '@tanstack/react-router'\n\nimport useLocalStorage from './useLocalStorage'\nimport {\n  getRouteStatusColor,\n  getStatusColor,\n  multiSortBy,\n  useIsMounted,\n  useSafeState,\n} from './utils'\nimport { Panel, Button, Code, ActivePanel } from './styledComponents'\nimport { ThemeProvider, defaultTheme as theme } from './theme'\n// import { getQueryStatusLabel, getQueryStatusColor } from './utils'\nimport Explorer from './Explorer'\n\nexport type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>\n\ninterface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n}\n\ninterface DevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * The standard React className property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n}\n\nconst isServer = typeof window === 'undefined'\n\nfunction Logo(props: React.HTMLProps<HTMLDivElement>) {\n  return (\n    <div\n      {...props}\n      style={{\n        ...(props.style ?? {}),\n        display: 'flex',\n        alignItems: 'center',\n        flexDirection: 'column',\n        fontSize: '0.8rem',\n        fontWeight: 'bolder',\n        lineHeight: '1',\n      }}\n    >\n      <div\n        style={{\n          letterSpacing: '-0.05rem',\n        }}\n      >\n        TANSTACK\n      </div>\n      <div\n        style={{\n          backgroundImage:\n            'linear-gradient(to right, var(--tw-gradient-stops))',\n          // @ts-ignore\n          '--tw-gradient-from': '#84cc16',\n          '--tw-gradient-stops':\n            'var(--tw-gradient-from), var(--tw-gradient-to)',\n          '--tw-gradient-to': '#10b981',\n          WebkitBackgroundClip: 'text',\n          color: 'transparent',\n          letterSpacing: '0.1rem',\n          marginRight: '-0.2rem',\n        }}\n      >\n        ROUTER\n      </div>\n    </div>\n  )\n}\n\nexport function TanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n}: DevtoolsOptions): React.ReactElement | null {\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)\n  const [isResizing, setIsResizing] = useSafeState(false)\n  const isMounted = useIsMounted()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo?.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  // Toggle panel visibility before/after transition (depending on direction).\n  // Prevents focusing in a closed panel.\n  React.useEffect(() => {\n    const ref = panelRef.current\n\n    if (ref) {\n      const handlePanelTransitionStart = () => {\n        if (ref && isResolvedOpen) {\n          ref.style.visibility = 'visible'\n        }\n      }\n\n      const handlePanelTransitionEnd = () => {\n        if (ref && !isResolvedOpen) {\n          ref.style.visibility = 'hidden'\n        }\n      }\n\n      ref.addEventListener('transitionstart', handlePanelTransitionStart)\n      ref.addEventListener('transitionend', handlePanelTransitionEnd)\n\n      return () => {\n        ref.removeEventListener('transitionstart', handlePanelTransitionStart)\n        ref.removeEventListener('transitionend', handlePanelTransitionEnd)\n      }\n    }\n\n    return\n  }, [isResolvedOpen])\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    if (isResolvedOpen) {\n      const previousValue = rootRef.current?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef.current?.getBoundingClientRect().height\n        if (rootRef.current?.parentElement) {\n          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (\n            rootRef.current?.parentElement &&\n            typeof previousValue === 'string'\n          ) {\n            rootRef.current.parentElement.style.paddingBottom = previousValue\n          }\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    style: toggleButtonStyle = {},\n    onClick: onToggleClick,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  return (\n    <Container ref={rootRef} className=\"TanStackRouterDevtools\">\n      <ThemeProvider theme={theme}>\n        <TanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          style={{\n            direction: 'ltr',\n            position: 'fixed',\n            bottom: '0',\n            right: '0',\n            zIndex: 99999,\n            width: '100%',\n            height: devtoolsHeight ?? 500,\n            maxHeight: '90%',\n            boxShadow: '0 0 20px rgba(0,0,0,.3)',\n            borderTop: `1px solid ${theme.gray}`,\n            transformOrigin: 'top',\n            // visibility will be toggled after transitions, but set initial state here\n            visibility: isOpen ? 'visible' : 'hidden',\n            ...panelStyle,\n            ...(isResizing\n              ? {\n                  transition: `none`,\n                }\n              : { transition: `all .2s ease` }),\n            ...(isResolvedOpen\n              ? {\n                  opacity: 1,\n                  pointerEvents: 'all',\n                  transform: `translateY(0) scale(1)`,\n                }\n              : {\n                  opacity: 0,\n                  pointerEvents: 'none',\n                  transform: `translateY(15px) scale(1.02)`,\n                }),\n          }}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef.current, e)}\n        />\n        {isResolvedOpen ? (\n          <Button\n            type=\"button\"\n            aria-label=\"Close TanStack Router Devtools\"\n            {...(otherCloseButtonProps as any)}\n            onClick={(e) => {\n              setIsOpen(false)\n              onCloseClick && onCloseClick(e)\n            }}\n            style={{\n              position: 'fixed',\n              zIndex: 99999,\n              margin: '.5em',\n              bottom: 0,\n              ...(position === 'top-right'\n                ? {\n                    right: '0',\n                  }\n                : position === 'top-left'\n                  ? {\n                      left: '0',\n                    }\n                  : position === 'bottom-right'\n                    ? {\n                        right: '0',\n                      }\n                    : {\n                        left: '0',\n                      }),\n              ...closeButtonStyle,\n            }}\n          >\n            Close\n          </Button>\n        ) : null}\n      </ThemeProvider>\n      {!isResolvedOpen ? (\n        <button\n          type=\"button\"\n          {...otherToggleButtonProps}\n          aria-label=\"Open TanStack Router Devtools\"\n          onClick={(e) => {\n            setIsOpen(true)\n            onToggleClick && onToggleClick(e)\n          }}\n          style={{\n            appearance: 'none',\n            background: 'none',\n            border: 0,\n            padding: 0,\n            position: 'fixed',\n            zIndex: 99999,\n            display: 'inline-flex',\n            fontSize: '1.5em',\n            margin: '.5em',\n            cursor: 'pointer',\n            width: 'fit-content',\n            ...(position === 'top-right'\n              ? {\n                  top: '0',\n                  right: '0',\n                }\n              : position === 'top-left'\n                ? {\n                    top: '0',\n                    left: '0',\n                  }\n                : position === 'bottom-right'\n                  ? {\n                      bottom: '0',\n                      right: '0',\n                    }\n                  : {\n                      bottom: '0',\n                      left: '0',\n                    }),\n            ...toggleButtonStyle,\n          }}\n        >\n          <Logo aria-hidden />\n        </button>\n      ) : null}\n    </Container>\n  )\n}\n\nfunction RouteComp({\n  route,\n  isRoot,\n  activeId,\n  setActiveId,\n}: {\n  route: AnyRootRoute | AnyRoute\n  isRoot?: boolean\n  activeId: string | undefined\n  setActiveId: (id: string) => void\n}) {\n  const routerState = useRouterState()\n  const matches =\n    routerState.status === 'pending'\n      ? routerState.pendingMatches ?? []\n      : routerState.matches\n\n  const match = routerState.matches.find((d) => d.routeId === route.id)\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        style={{\n          display: 'flex',\n          borderBottom: `solid 1px ${theme.grayAlt}`,\n          cursor: match ? 'pointer' : 'default',\n          alignItems: 'center',\n          background:\n            route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,\n          padding: '.25rem .5rem',\n          gap: '.5rem',\n        }}\n      >\n        {isRoot ? null : (\n          <div\n            style={{\n              flex: '0 0 auto',\n              width: '.7rem',\n              height: '.7rem',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontWeight: 'bold',\n              borderRadius: '100%',\n              transition: 'all .2s ease-out',\n              background: getRouteStatusColor(matches, route, theme),\n              opacity: match ? 1 : 0.3,\n            }}\n          />\n        )}\n        <div\n          style={{\n            flex: '1 0 auto',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            padding: isRoot ? '0 .25rem' : 0,\n            opacity: match ? 1 : 0.7,\n            fontSize: '0.7rem',\n          }}\n        >\n          <Code>{route.path || trimPath(route.id)} </Code>\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: '.5rem',\n            }}\n          >\n            {match ? <Code style={{ opacity: 0.3 }}>{match.id}</Code> : null}\n            <AgeTicker match={match} />\n          </div>\n        </div>\n      </div>\n      {(route.children as Route[])?.length ? (\n        <div\n          style={{\n            marginLeft: isRoot ? 0 : '1rem',\n            borderLeft: isRoot ? '' : `solid 1px ${theme.grayAlt}`,\n          }}\n        >\n          {[...(route.children as Route[])]\n            .sort((a, b) => {\n              return a.rank - b.rank\n            })\n            .map((r) => (\n              <RouteComp\n                key={r.id}\n                route={r}\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n  HTMLDivElement,\n  DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(props, ref): React.ReactElement {\n  const {\n    isOpen = true,\n    setIsOpen,\n    handleDragStart,\n    router: userRouter,\n    ...panelProps\n  } = props\n\n  const contextRouter = useRouter({ warn: false })\n  const router = userRouter ?? contextRouter\n  const routerState = useRouterState({\n    router,\n  } as any)\n\n  const matches = [\n    ...(routerState.pendingMatches ?? []),\n    ...routerState.matches,\n    ...routerState.cachedMatches,\n  ]\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    () => matches.find((d) => d.routeId === activeId || d.id === activeId),\n    [matches, activeId],\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    <ThemeProvider theme={theme}>\n      <Panel ref={ref} className=\"TanStackRouterDevtoolsPanel\" {...panelProps}>\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: ${theme.backgroundAlt} ${theme.gray};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n              background: ${theme.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: ${theme.gray};\n              border-radius: .5em;\n              border: 3px solid ${theme.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel table {\n              width: 100%;\n            }\n\n            .TanStackRouterDevtoolsPanel table tr {\n              border-bottom: 2px dotted rgba(255, 255, 255, .2);\n            }\n\n            .TanStackRouterDevtoolsPanel table tr:last-child {\n              border-bottom: none\n            }\n\n            .TanStackRouterDevtoolsPanel table td {\n              padding: .25rem .5rem;\n              border-right: 2px dotted rgba(255, 255, 255, .05);\n            }\n\n            .TanStackRouterDevtoolsPanel table td:last-child {\n              border-right: none\n            }\n\n          `,\n          }}\n        />\n        <div\n          style={{\n            position: 'absolute',\n            left: 0,\n            top: 0,\n            width: '100%',\n            height: '4px',\n            marginBottom: '-4px',\n            cursor: 'row-resize',\n            zIndex: 100000,\n          }}\n          onMouseDown={handleDragStart}\n        ></div>\n        <div\n          style={{\n            flex: '1 1 500px',\n            minHeight: '40%',\n            maxHeight: '100%',\n            overflow: 'auto',\n            borderRight: `1px solid ${theme.grayAlt}`,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'start',\n              gap: '1rem',\n              padding: '1rem',\n              alignItems: 'center',\n              background: theme.backgroundAlt,\n            }}\n          >\n            <Logo aria-hidden />\n            <div\n              style={{\n                fontSize: 'clamp(.8rem, 2vw, 1.3rem)',\n                fontWeight: 'bold',\n              }}\n            >\n              <span\n                style={{\n                  fontWeight: 100,\n                }}\n              >\n                Devtools\n              </span>\n            </div>\n          </div>\n          <div\n            style={{\n              overflowY: 'auto',\n              flex: '1',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\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                      ] 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\n          style={{\n            flex: '1 1 500px',\n            minHeight: '40%',\n            maxHeight: '100%',\n            overflow: 'auto',\n            borderRight: `1px solid ${theme.grayAlt}`,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <div\n            style={{\n              flex: '1 1 auto',\n              overflowY: 'auto',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                zIndex: 1,\n                display: 'flex',\n                alignItems: 'center',\n                gap: '.5rem',\n                fontWeight: 'bold',\n              }}\n            >\n              Pathname{' '}\n              {routerState.location.maskedLocation ? (\n                <div\n                  style={{\n                    padding: '.1rem .5rem',\n                    background: theme.warning,\n                    color: 'black',\n                    borderRadius: '.5rem',\n                  }}\n                >\n                  Masked\n                </div>\n              ) : null}\n            </div>\n            <div\n              style={{\n                padding: '.5rem',\n                display: 'flex',\n                gap: '.5rem',\n                alignItems: 'center',\n              }}\n            >\n              <code\n                style={{\n                  opacity: 0.6,\n                }}\n              >\n                {routerState.location.pathname}\n              </code>\n              {routerState.location.maskedLocation ? (\n                <code\n                  style={{\n                    color: theme.warning,\n                    fontWeight: 'bold',\n                  }}\n                >\n                  {routerState.location.maskedLocation.pathname}\n                </code>\n              ) : null}\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                zIndex: 1,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'space-between',\n                gap: '.5rem',\n                fontWeight: 'bold',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: '.5rem',\n                }}\n              >\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(false)\n                  }}\n                  disabled={!showMatches}\n                  style={{\n                    appearance: 'none',\n                    opacity: showMatches ? 0.5 : 1,\n                    border: 0,\n                    background: 'transparent',\n                    color: 'inherit',\n                    cursor: 'pointer',\n                  }}\n                >\n                  Routes\n                </button>\n                /\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(true)\n                  }}\n                  disabled={showMatches}\n                  style={{\n                    appearance: 'none',\n                    opacity: !showMatches ? 0.5 : 1,\n                    border: 0,\n                    background: 'transparent',\n                    color: 'inherit',\n                    cursor: 'pointer',\n                  }}\n                >\n                  Matches\n                </button>\n              </div>\n              <div\n                style={{\n                  opacity: 0.3,\n                  fontSize: '0.7rem',\n                  fontWeight: 'normal',\n                }}\n              >\n                age / staleTime / gcTime\n              </div>\n            </div>\n            {!showMatches ? (\n              <RouteComp\n                route={router.routeTree}\n                isRoot\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ) : (\n              <div>\n                {(routerState.status === 'pending'\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                      style={{\n                        display: 'flex',\n                        borderBottom: `solid 1px ${theme.grayAlt}`,\n                        cursor: 'pointer',\n                        alignItems: 'center',\n                        background:\n                          match === activeMatch\n                            ? 'rgba(255,255,255,.1)'\n                            : undefined,\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: '0 0 auto',\n                          width: '1.3rem',\n                          height: '1.3rem',\n                          marginLeft: '.25rem',\n                          background: getStatusColor(match, theme),\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          fontWeight: 'bold',\n                          borderRadius: '.25rem',\n                          transition: 'all .2s ease-out',\n                        }}\n                      />\n\n                      <Code\n                        style={{\n                          padding: '.5em',\n                          fontSize: '0.7rem',\n                        }}\n                      >\n                        {`${match.id}`}\n                      </Code>\n                      <AgeTicker match={match} />\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n          {routerState.cachedMatches?.length ? (\n            <div\n              style={{\n                flex: '1 1 auto',\n                overflowY: 'auto',\n                maxHeight: '50%',\n              }}\n            >\n              <div\n                style={{\n                  padding: '.5em',\n                  background: theme.backgroundAlt,\n                  position: 'sticky',\n                  top: 0,\n                  zIndex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  gap: '.5rem',\n                  fontWeight: 'bold',\n                }}\n              >\n                <div>Cached Matches</div>\n                <div\n                  style={{\n                    opacity: 0.3,\n                    fontSize: '0.7rem',\n                    fontWeight: 'normal',\n                  }}\n                >\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                      style={{\n                        display: 'flex',\n                        borderBottom: `solid 1px ${theme.grayAlt}`,\n                        cursor: 'pointer',\n                        alignItems: 'center',\n                        background:\n                          match === activeMatch\n                            ? 'rgba(255,255,255,.1)'\n                            : undefined,\n                        fontSize: '0.7rem',\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: '0 0 auto',\n                          width: '.75rem',\n                          height: '.75rem',\n                          marginLeft: '.25rem',\n                          background: getStatusColor(match, theme),\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          fontWeight: 'bold',\n                          borderRadius: '100%',\n                          transition: 'all 1s ease-out',\n                        }}\n                      />\n\n                      <Code\n                        style={{\n                          padding: '.5em',\n                        }}\n                      >\n                        {`${match.id}`}\n                      </Code>\n\n                      <div style={{ marginLeft: 'auto' }}>\n                        <AgeTicker match={match} />\n                      </div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          ) : null}\n        </div>\n        {activeMatch ? (\n          <ActivePanel>\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Match Details\n            </div>\n            <div>\n              <table\n                style={{\n                  fontSize: '0.8rem',\n                }}\n              >\n                <tbody>\n                  <tr>\n                    <td style={{ opacity: '.5' }}>ID</td>\n                    <td>\n                      <Code\n                        style={{\n                          lineHeight: '1.8em',\n                        }}\n                      >\n                        {JSON.stringify(activeMatch.id, null, 2)}\n                      </Code>\n                    </td>\n                  </tr>\n                  <tr>\n                    <td style={{ opacity: '.5' }}>Status</td>\n                    <td>\n                      {routerState.pendingMatches?.find(\n                        (d) => d.id === activeMatch.id,\n                      )\n                        ? 'Pending'\n                        : routerState.matches?.find(\n                              (d) => d.id === activeMatch.id,\n                            )\n                          ? 'Active'\n                          : 'Cached'}{' '}\n                      - {activeMatch.status}\n                    </td>\n                  </tr>\n                  {/* <tr>\n                    <td style={{ opacity: '.5' }}>Invalid</td>\n                    <td>{activeMatch.getIsInvalid().toString()}</td>\n                  </tr> */}\n                  <tr>\n                    <td style={{ opacity: '.5' }}>Last Updated</td>\n                    <td>\n                      {activeMatch.updatedAt\n                        ? new Date(\n                            activeMatch.updatedAt as number,\n                          ).toLocaleTimeString()\n                        : 'N/A'}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            {/* <div\n              style={{\n                background: theme.backgroundAlt,\n                padding: '.5em',\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Actions\n            </div>\n            <div\n              style={{\n                padding: '0.5em',\n              }}\n            >\n              <Button\n                type=\"button\"\n                onClick={() => activeMatch.__store.setState(d => ({...d, status: 'pending'}))}\n                style={{\n                  background: theme.gray,\n                }}\n              >\n                Reload\n              </Button>\n            </div> */}\n            {activeMatch.loaderData ? (\n              <>\n                <div\n                  style={{\n                    background: theme.backgroundAlt,\n                    padding: '.5em',\n                    position: 'sticky',\n                    top: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                  }}\n                >\n                  Loader Data\n                </div>\n                <div\n                  style={{\n                    padding: '.5em',\n                  }}\n                >\n                  <Explorer\n                    label=\"loaderData\"\n                    value={activeMatch.loaderData}\n                    defaultExpanded={{}}\n                  />\n                </div>\n              </>\n            ) : null}\n            <div\n              style={{\n                background: theme.backgroundAlt,\n                padding: '.5em',\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Explorer\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\n              <Explorer\n                label=\"Match\"\n                value={activeMatch}\n                defaultExpanded={{}}\n              />\n            </div>\n          </ActivePanel>\n        ) : null}\n        {hasSearch ? (\n          <div\n            style={{\n              flex: '1 1 500px',\n              minHeight: '40%',\n              maxHeight: '100%',\n              overflow: 'auto',\n              borderRight: `1px solid ${theme.grayAlt}`,\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n                fontWeight: 'bold',\n              }}\n            >\n              Search Params\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\n              <Explorer\n                value={routerState.location.search || {}}\n                defaultExpanded={Object.keys(\n                  (routerState.location.search as {}) || {},\n                ).reduce((obj: any, next) => {\n                  obj[next] = {}\n                  return obj\n                }, {})}\n              />\n            </div>\n          </div>\n        ) : null}\n      </Panel>\n    </ThemeProvider>\n  )\n})\n\nfunction AgeTicker({ match }: { match?: AnyRouteMatch }) {\n  const router = useRouter()\n\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  }, [])\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\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '.25rem',\n        color: age > staleTime ? theme.warning : undefined,\n      }}\n    >\n      <div style={{}}>{formatTime(age)}</div>\n      <div>/</div>\n      <div>{formatTime(staleTime)}</div>\n      <div>/</div>\n      <div>{formatTime(gcTime)}</div>\n    </div>\n  )\n}\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"],"names":["jsxs","jsx","useSafeState","useIsMounted","_a","_b","ThemeProvider","theme","Button","useRouterState","getRouteStatusColor","Code","trimPath","TanStackRouterDevtoolsPanel","useRouter","invariant","Panel","Explorer","multiSortBy","getStatusColor","ActivePanel","Fragment"],"mappings":"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"}
+{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  invariant,\n  AnyRouter,\n  Route,\n  AnyRoute,\n  AnyRootRoute,\n  trimPath,\n  useRouter,\n  useRouterState,\n  AnyRouteMatch,\n} from '@tanstack/react-router'\n\nimport useLocalStorage from './useLocalStorage'\nimport {\n  getRouteStatusColor,\n  getStatusColor,\n  multiSortBy,\n  useIsMounted,\n  useSafeState,\n} from './utils'\nimport { Panel, Button, Code, ActivePanel } from './styledComponents'\nimport { ThemeProvider, defaultTheme as theme } from './theme'\n// import { getQueryStatusLabel, getQueryStatusColor } from './utils'\nimport Explorer from './Explorer'\n\nexport type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>\n\ninterface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n}\n\ninterface DevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * The standard React className property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n}\n\nconst isServer = typeof window === 'undefined'\n\nfunction Logo(props: React.HTMLProps<HTMLDivElement>) {\n  return (\n    <div\n      {...props}\n      style={{\n        ...(props.style ?? {}),\n        display: 'flex',\n        alignItems: 'center',\n        flexDirection: 'column',\n        fontSize: '0.8rem',\n        fontWeight: 'bolder',\n        lineHeight: '1',\n      }}\n    >\n      <div\n        style={{\n          letterSpacing: '-0.05rem',\n        }}\n      >\n        TANSTACK\n      </div>\n      <div\n        style={{\n          backgroundImage:\n            'linear-gradient(to right, var(--tw-gradient-stops))',\n          // @ts-ignore\n          '--tw-gradient-from': '#84cc16',\n          '--tw-gradient-stops':\n            'var(--tw-gradient-from), var(--tw-gradient-to)',\n          '--tw-gradient-to': '#10b981',\n          WebkitBackgroundClip: 'text',\n          color: 'transparent',\n          letterSpacing: '0.1rem',\n          marginRight: '-0.2rem',\n        }}\n      >\n        ROUTER\n      </div>\n    </div>\n  )\n}\n\nexport function TanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n}: DevtoolsOptions): React.ReactElement | null {\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)\n  const [isResizing, setIsResizing] = useSafeState(false)\n  const isMounted = useIsMounted()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo?.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  // Toggle panel visibility before/after transition (depending on direction).\n  // Prevents focusing in a closed panel.\n  React.useEffect(() => {\n    const ref = panelRef.current\n\n    if (ref) {\n      const handlePanelTransitionStart = () => {\n        if (ref && isResolvedOpen) {\n          ref.style.visibility = 'visible'\n        }\n      }\n\n      const handlePanelTransitionEnd = () => {\n        if (ref && !isResolvedOpen) {\n          ref.style.visibility = 'hidden'\n        }\n      }\n\n      ref.addEventListener('transitionstart', handlePanelTransitionStart)\n      ref.addEventListener('transitionend', handlePanelTransitionEnd)\n\n      return () => {\n        ref.removeEventListener('transitionstart', handlePanelTransitionStart)\n        ref.removeEventListener('transitionend', handlePanelTransitionEnd)\n      }\n    }\n\n    return\n  }, [isResolvedOpen])\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    if (isResolvedOpen) {\n      const previousValue = rootRef.current?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef.current?.getBoundingClientRect().height\n        if (rootRef.current?.parentElement) {\n          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (\n            rootRef.current?.parentElement &&\n            typeof previousValue === 'string'\n          ) {\n            rootRef.current.parentElement.style.paddingBottom = previousValue\n          }\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    style: toggleButtonStyle = {},\n    onClick: onToggleClick,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  return (\n    <Container ref={rootRef} className=\"TanStackRouterDevtools\">\n      <ThemeProvider theme={theme}>\n        <TanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          style={{\n            direction: 'ltr',\n            position: 'fixed',\n            bottom: '0',\n            right: '0',\n            zIndex: 99999,\n            width: '100%',\n            height: devtoolsHeight ?? 500,\n            maxHeight: '90%',\n            boxShadow: '0 0 20px rgba(0,0,0,.3)',\n            borderTop: `1px solid ${theme.gray}`,\n            transformOrigin: 'top',\n            // visibility will be toggled after transitions, but set initial state here\n            visibility: isOpen ? 'visible' : 'hidden',\n            ...panelStyle,\n            ...(isResizing\n              ? {\n                  transition: `none`,\n                }\n              : { transition: `all .2s ease` }),\n            ...(isResolvedOpen\n              ? {\n                  opacity: 1,\n                  pointerEvents: 'all',\n                  transform: `translateY(0) scale(1)`,\n                }\n              : {\n                  opacity: 0,\n                  pointerEvents: 'none',\n                  transform: `translateY(15px) scale(1.02)`,\n                }),\n          }}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef.current, e)}\n        />\n        {isResolvedOpen ? (\n          <Button\n            type=\"button\"\n            aria-label=\"Close TanStack Router Devtools\"\n            {...(otherCloseButtonProps as any)}\n            onClick={(e) => {\n              setIsOpen(false)\n              onCloseClick && onCloseClick(e)\n            }}\n            style={{\n              position: 'fixed',\n              zIndex: 99999,\n              margin: '.5em',\n              bottom: 0,\n              ...(position === 'top-right'\n                ? {\n                    right: '0',\n                  }\n                : position === 'top-left'\n                  ? {\n                      left: '0',\n                    }\n                  : position === 'bottom-right'\n                    ? {\n                        right: '0',\n                      }\n                    : {\n                        left: '0',\n                      }),\n              ...closeButtonStyle,\n            }}\n          >\n            Close\n          </Button>\n        ) : null}\n      </ThemeProvider>\n      {!isResolvedOpen ? (\n        <button\n          type=\"button\"\n          {...otherToggleButtonProps}\n          aria-label=\"Open TanStack Router Devtools\"\n          onClick={(e) => {\n            setIsOpen(true)\n            onToggleClick && onToggleClick(e)\n          }}\n          style={{\n            appearance: 'none',\n            background: 'none',\n            border: 0,\n            padding: 0,\n            position: 'fixed',\n            zIndex: 99999,\n            display: 'inline-flex',\n            fontSize: '1.5em',\n            margin: '.5em',\n            cursor: 'pointer',\n            width: 'fit-content',\n            ...(position === 'top-right'\n              ? {\n                  top: '0',\n                  right: '0',\n                }\n              : position === 'top-left'\n                ? {\n                    top: '0',\n                    left: '0',\n                  }\n                : position === 'bottom-right'\n                  ? {\n                      bottom: '0',\n                      right: '0',\n                    }\n                  : {\n                      bottom: '0',\n                      left: '0',\n                    }),\n            ...toggleButtonStyle,\n          }}\n        >\n          <Logo aria-hidden />\n        </button>\n      ) : null}\n    </Container>\n  )\n}\n\nfunction RouteComp({\n  route,\n  isRoot,\n  activeId,\n  setActiveId,\n}: {\n  route: AnyRootRoute | AnyRoute\n  isRoot?: boolean\n  activeId: string | undefined\n  setActiveId: (id: string) => void\n}) {\n  const routerState = useRouterState()\n  const matches =\n    routerState.status === 'pending'\n      ? routerState.pendingMatches ?? []\n      : routerState.matches\n\n  const match = routerState.matches.find((d) => d.routeId === route.id)\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        style={{\n          display: 'flex',\n          borderBottom: `solid 1px ${theme.grayAlt}`,\n          cursor: match ? 'pointer' : 'default',\n          alignItems: 'center',\n          background:\n            route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,\n          padding: '.25rem .5rem',\n          gap: '.5rem',\n        }}\n      >\n        {isRoot ? null : (\n          <div\n            style={{\n              flex: '0 0 auto',\n              width: '.7rem',\n              height: '.7rem',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontWeight: 'bold',\n              borderRadius: '100%',\n              transition: 'all .2s ease-out',\n              background: getRouteStatusColor(matches, route, theme),\n              opacity: match ? 1 : 0.3,\n            }}\n          />\n        )}\n        <div\n          style={{\n            flex: '1 0 auto',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            padding: isRoot ? '0 .25rem' : 0,\n            opacity: match ? 1 : 0.7,\n            fontSize: '0.7rem',\n          }}\n        >\n          <Code>{route.path || trimPath(route.id)} </Code>\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: '.5rem',\n            }}\n          >\n            {match ? <Code style={{ opacity: 0.3 }}>{match.id}</Code> : null}\n            <AgeTicker match={match} />\n          </div>\n        </div>\n      </div>\n      {(route.children as Route[])?.length ? (\n        <div\n          style={{\n            marginLeft: isRoot ? 0 : '1rem',\n            borderLeft: isRoot ? '' : `solid 1px ${theme.grayAlt}`,\n          }}\n        >\n          {[...(route.children as Route[])]\n            .sort((a, b) => {\n              return a.rank - b.rank\n            })\n            .map((r) => (\n              <RouteComp\n                key={r.id}\n                route={r}\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n  HTMLDivElement,\n  DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(props, ref): React.ReactElement {\n  const {\n    isOpen = true,\n    setIsOpen,\n    handleDragStart,\n    router: userRouter,\n    ...panelProps\n  } = props\n\n  const contextRouter = useRouter({ warn: false })\n  const router = userRouter ?? contextRouter\n  const routerState = useRouterState({\n    router,\n  } as any)\n\n  const matches = [\n    ...(routerState.pendingMatches ?? []),\n    ...routerState.matches,\n    ...routerState.cachedMatches,\n  ]\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    () => matches.find((d) => d.routeId === activeId || d.id === activeId),\n    [matches, activeId],\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    <ThemeProvider theme={theme}>\n      <Panel ref={ref} className=\"TanStackRouterDevtoolsPanel\" {...panelProps}>\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: ${theme.backgroundAlt} ${theme.gray};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n              background: ${theme.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: ${theme.gray};\n              border-radius: .5em;\n              border: 3px solid ${theme.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel table {\n              width: 100%;\n            }\n\n            .TanStackRouterDevtoolsPanel table tr {\n              border-bottom: 2px dotted rgba(255, 255, 255, .2);\n            }\n\n            .TanStackRouterDevtoolsPanel table tr:last-child {\n              border-bottom: none\n            }\n\n            .TanStackRouterDevtoolsPanel table td {\n              padding: .25rem .5rem;\n              border-right: 2px dotted rgba(255, 255, 255, .05);\n            }\n\n            .TanStackRouterDevtoolsPanel table td:last-child {\n              border-right: none\n            }\n\n          `,\n          }}\n        />\n        {handleDragStart ? (\n          <div\n            style={{\n              position: 'absolute',\n              left: 0,\n              top: 0,\n              width: '100%',\n              height: '4px',\n              marginBottom: '-4px',\n              cursor: 'row-resize',\n              zIndex: 100000,\n            }}\n            onMouseDown={handleDragStart}\n          ></div>\n        ) : null}\n        <div\n          style={{\n            flex: '1 1 500px',\n            minHeight: '40%',\n            maxHeight: '100%',\n            overflow: 'auto',\n            borderRight: `1px solid ${theme.grayAlt}`,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'start',\n              gap: '1rem',\n              padding: '1rem',\n              alignItems: 'center',\n              background: theme.backgroundAlt,\n            }}\n          >\n            <Logo aria-hidden />\n            <div\n              style={{\n                fontSize: 'clamp(.8rem, 2vw, 1.3rem)',\n                fontWeight: 'bold',\n              }}\n            >\n              <span\n                style={{\n                  fontWeight: 100,\n                }}\n              >\n                Devtools\n              </span>\n            </div>\n          </div>\n          <div\n            style={{\n              overflowY: 'auto',\n              flex: '1',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\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                      ] 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\n          style={{\n            flex: '1 1 500px',\n            minHeight: '40%',\n            maxHeight: '100%',\n            overflow: 'auto',\n            borderRight: `1px solid ${theme.grayAlt}`,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <div\n            style={{\n              flex: '1 1 auto',\n              overflowY: 'auto',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                zIndex: 1,\n                display: 'flex',\n                alignItems: 'center',\n                gap: '.5rem',\n                fontWeight: 'bold',\n              }}\n            >\n              Pathname{' '}\n              {routerState.location.maskedLocation ? (\n                <div\n                  style={{\n                    padding: '.1rem .5rem',\n                    background: theme.warning,\n                    color: 'black',\n                    borderRadius: '.5rem',\n                  }}\n                >\n                  Masked\n                </div>\n              ) : null}\n            </div>\n            <div\n              style={{\n                padding: '.5rem',\n                display: 'flex',\n                gap: '.5rem',\n                alignItems: 'center',\n              }}\n            >\n              <code\n                style={{\n                  opacity: 0.6,\n                }}\n              >\n                {routerState.location.pathname}\n              </code>\n              {routerState.location.maskedLocation ? (\n                <code\n                  style={{\n                    color: theme.warning,\n                    fontWeight: 'bold',\n                  }}\n                >\n                  {routerState.location.maskedLocation.pathname}\n                </code>\n              ) : null}\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                zIndex: 1,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'space-between',\n                gap: '.5rem',\n                fontWeight: 'bold',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: '.5rem',\n                }}\n              >\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(false)\n                  }}\n                  disabled={!showMatches}\n                  style={{\n                    appearance: 'none',\n                    opacity: showMatches ? 0.5 : 1,\n                    border: 0,\n                    background: 'transparent',\n                    color: 'inherit',\n                    cursor: 'pointer',\n                  }}\n                >\n                  Routes\n                </button>\n                /\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(true)\n                  }}\n                  disabled={showMatches}\n                  style={{\n                    appearance: 'none',\n                    opacity: !showMatches ? 0.5 : 1,\n                    border: 0,\n                    background: 'transparent',\n                    color: 'inherit',\n                    cursor: 'pointer',\n                  }}\n                >\n                  Matches\n                </button>\n              </div>\n              <div\n                style={{\n                  opacity: 0.3,\n                  fontSize: '0.7rem',\n                  fontWeight: 'normal',\n                }}\n              >\n                age / staleTime / gcTime\n              </div>\n            </div>\n            {!showMatches ? (\n              <RouteComp\n                route={router.routeTree}\n                isRoot\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ) : (\n              <div>\n                {(routerState.status === 'pending'\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                      style={{\n                        display: 'flex',\n                        borderBottom: `solid 1px ${theme.grayAlt}`,\n                        cursor: 'pointer',\n                        alignItems: 'center',\n                        background:\n                          match === activeMatch\n                            ? 'rgba(255,255,255,.1)'\n                            : undefined,\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: '0 0 auto',\n                          width: '1.3rem',\n                          height: '1.3rem',\n                          marginLeft: '.25rem',\n                          background: getStatusColor(match, theme),\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          fontWeight: 'bold',\n                          borderRadius: '.25rem',\n                          transition: 'all .2s ease-out',\n                        }}\n                      />\n\n                      <Code\n                        style={{\n                          padding: '.5em',\n                          fontSize: '0.7rem',\n                        }}\n                      >\n                        {`${match.id}`}\n                      </Code>\n                      <AgeTicker match={match} />\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n          {routerState.cachedMatches?.length ? (\n            <div\n              style={{\n                flex: '1 1 auto',\n                overflowY: 'auto',\n                maxHeight: '50%',\n              }}\n            >\n              <div\n                style={{\n                  padding: '.5em',\n                  background: theme.backgroundAlt,\n                  position: 'sticky',\n                  top: 0,\n                  zIndex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  gap: '.5rem',\n                  fontWeight: 'bold',\n                }}\n              >\n                <div>Cached Matches</div>\n                <div\n                  style={{\n                    opacity: 0.3,\n                    fontSize: '0.7rem',\n                    fontWeight: 'normal',\n                  }}\n                >\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                      style={{\n                        display: 'flex',\n                        borderBottom: `solid 1px ${theme.grayAlt}`,\n                        cursor: 'pointer',\n                        alignItems: 'center',\n                        background:\n                          match === activeMatch\n                            ? 'rgba(255,255,255,.1)'\n                            : undefined,\n                        fontSize: '0.7rem',\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: '0 0 auto',\n                          width: '.75rem',\n                          height: '.75rem',\n                          marginLeft: '.25rem',\n                          background: getStatusColor(match, theme),\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          fontWeight: 'bold',\n                          borderRadius: '100%',\n                          transition: 'all 1s ease-out',\n                        }}\n                      />\n\n                      <Code\n                        style={{\n                          padding: '.5em',\n                        }}\n                      >\n                        {`${match.id}`}\n                      </Code>\n\n                      <div style={{ marginLeft: 'auto' }}>\n                        <AgeTicker match={match} />\n                      </div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          ) : null}\n        </div>\n        {activeMatch ? (\n          <ActivePanel>\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Match Details\n            </div>\n            <div>\n              <table\n                style={{\n                  fontSize: '0.8rem',\n                }}\n              >\n                <tbody>\n                  <tr>\n                    <td style={{ opacity: '.5' }}>ID</td>\n                    <td>\n                      <Code\n                        style={{\n                          lineHeight: '1.8em',\n                        }}\n                      >\n                        {JSON.stringify(activeMatch.id, null, 2)}\n                      </Code>\n                    </td>\n                  </tr>\n                  <tr>\n                    <td style={{ opacity: '.5' }}>Status</td>\n                    <td>\n                      {routerState.pendingMatches?.find(\n                        (d) => d.id === activeMatch.id,\n                      )\n                        ? 'Pending'\n                        : routerState.matches?.find(\n                              (d) => d.id === activeMatch.id,\n                            )\n                          ? 'Active'\n                          : 'Cached'}{' '}\n                      - {activeMatch.status}\n                    </td>\n                  </tr>\n                  {/* <tr>\n                    <td style={{ opacity: '.5' }}>Invalid</td>\n                    <td>{activeMatch.getIsInvalid().toString()}</td>\n                  </tr> */}\n                  <tr>\n                    <td style={{ opacity: '.5' }}>Last Updated</td>\n                    <td>\n                      {activeMatch.updatedAt\n                        ? new Date(\n                            activeMatch.updatedAt as number,\n                          ).toLocaleTimeString()\n                        : 'N/A'}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            {/* <div\n              style={{\n                background: theme.backgroundAlt,\n                padding: '.5em',\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Actions\n            </div>\n            <div\n              style={{\n                padding: '0.5em',\n              }}\n            >\n              <Button\n                type=\"button\"\n                onClick={() => activeMatch.__store.setState(d => ({...d, status: 'pending'}))}\n                style={{\n                  background: theme.gray,\n                }}\n              >\n                Reload\n              </Button>\n            </div> */}\n            {activeMatch.loaderData ? (\n              <>\n                <div\n                  style={{\n                    background: theme.backgroundAlt,\n                    padding: '.5em',\n                    position: 'sticky',\n                    top: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                  }}\n                >\n                  Loader Data\n                </div>\n                <div\n                  style={{\n                    padding: '.5em',\n                  }}\n                >\n                  <Explorer\n                    label=\"loaderData\"\n                    value={activeMatch.loaderData}\n                    defaultExpanded={{}}\n                  />\n                </div>\n              </>\n            ) : null}\n            <div\n              style={{\n                background: theme.backgroundAlt,\n                padding: '.5em',\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Explorer\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\n              <Explorer\n                label=\"Match\"\n                value={activeMatch}\n                defaultExpanded={{}}\n              />\n            </div>\n          </ActivePanel>\n        ) : null}\n        {hasSearch ? (\n          <div\n            style={{\n              flex: '1 1 500px',\n              minHeight: '40%',\n              maxHeight: '100%',\n              overflow: 'auto',\n              borderRight: `1px solid ${theme.grayAlt}`,\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n                fontWeight: 'bold',\n              }}\n            >\n              Search Params\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\n              <Explorer\n                value={routerState.location.search || {}}\n                defaultExpanded={Object.keys(\n                  (routerState.location.search as {}) || {},\n                ).reduce((obj: any, next) => {\n                  obj[next] = {}\n                  return obj\n                }, {})}\n              />\n            </div>\n          </div>\n        ) : null}\n      </Panel>\n    </ThemeProvider>\n  )\n})\n\nfunction AgeTicker({ match }: { match?: AnyRouteMatch }) {\n  const router = useRouter()\n\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  }, [])\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\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '.25rem',\n        color: age > staleTime ? theme.warning : undefined,\n      }}\n    >\n      <div style={{}}>{formatTime(age)}</div>\n      <div>/</div>\n      <div>{formatTime(staleTime)}</div>\n      <div>/</div>\n      <div>{formatTime(gcTime)}</div>\n    </div>\n  )\n}\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"],"names":["jsxs","jsx","useSafeState","useIsMounted","_a","_b","ThemeProvider","theme","Button","useRouterState","getRouteStatusColor","Code","trimPath","TanStackRouterDevtoolsPanel","useRouter","invariant","Panel","Explorer","multiSortBy","getStatusColor","ActivePanel","Fragment"],"mappings":"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"}

package/dist/cjs/devtools.d.cts

@@ -54,7 +54,7 @@ interface DevtoolsPanelOptions {
     /**
      * Handles the opening and closing the devtools panel
      */
-    handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * A boolean variable indicating if the "lite" version of the library is being used
      */

package/dist/esm/devtools.d.ts

@@ -54,7 +54,7 @@ interface DevtoolsPanelOptions {
     /**
      * Handles the opening and closing the devtools panel
      */
-    handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * A boolean variable indicating if the "lite" version of the library is being used
      */

package/dist/esm/devtools.js

@@ -474,7 +474,7 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
         }
       }
     ),
-    /* @__PURE__ */ jsx(
+    handleDragStart ? /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -489,7 +489,7 @@ const TanStackRouterDevtoolsPanel = React__default.forwardRef(function TanStackR
         },
         onMouseDown: handleDragStart
       }
-    ),
+    ) : null,
     /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/esm/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  invariant,\n  AnyRouter,\n  Route,\n  AnyRoute,\n  AnyRootRoute,\n  trimPath,\n  useRouter,\n  useRouterState,\n  AnyRouteMatch,\n} from '@tanstack/react-router'\n\nimport useLocalStorage from './useLocalStorage'\nimport {\n  getRouteStatusColor,\n  getStatusColor,\n  multiSortBy,\n  useIsMounted,\n  useSafeState,\n} from './utils'\nimport { Panel, Button, Code, ActivePanel } from './styledComponents'\nimport { ThemeProvider, defaultTheme as theme } from './theme'\n// import { getQueryStatusLabel, getQueryStatusColor } from './utils'\nimport Explorer from './Explorer'\n\nexport type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>\n\ninterface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n}\n\ninterface DevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * The standard React className property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n}\n\nconst isServer = typeof window === 'undefined'\n\nfunction Logo(props: React.HTMLProps<HTMLDivElement>) {\n  return (\n    <div\n      {...props}\n      style={{\n        ...(props.style ?? {}),\n        display: 'flex',\n        alignItems: 'center',\n        flexDirection: 'column',\n        fontSize: '0.8rem',\n        fontWeight: 'bolder',\n        lineHeight: '1',\n      }}\n    >\n      <div\n        style={{\n          letterSpacing: '-0.05rem',\n        }}\n      >\n        TANSTACK\n      </div>\n      <div\n        style={{\n          backgroundImage:\n            'linear-gradient(to right, var(--tw-gradient-stops))',\n          // @ts-ignore\n          '--tw-gradient-from': '#84cc16',\n          '--tw-gradient-stops':\n            'var(--tw-gradient-from), var(--tw-gradient-to)',\n          '--tw-gradient-to': '#10b981',\n          WebkitBackgroundClip: 'text',\n          color: 'transparent',\n          letterSpacing: '0.1rem',\n          marginRight: '-0.2rem',\n        }}\n      >\n        ROUTER\n      </div>\n    </div>\n  )\n}\n\nexport function TanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n}: DevtoolsOptions): React.ReactElement | null {\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)\n  const [isResizing, setIsResizing] = useSafeState(false)\n  const isMounted = useIsMounted()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo?.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  // Toggle panel visibility before/after transition (depending on direction).\n  // Prevents focusing in a closed panel.\n  React.useEffect(() => {\n    const ref = panelRef.current\n\n    if (ref) {\n      const handlePanelTransitionStart = () => {\n        if (ref && isResolvedOpen) {\n          ref.style.visibility = 'visible'\n        }\n      }\n\n      const handlePanelTransitionEnd = () => {\n        if (ref && !isResolvedOpen) {\n          ref.style.visibility = 'hidden'\n        }\n      }\n\n      ref.addEventListener('transitionstart', handlePanelTransitionStart)\n      ref.addEventListener('transitionend', handlePanelTransitionEnd)\n\n      return () => {\n        ref.removeEventListener('transitionstart', handlePanelTransitionStart)\n        ref.removeEventListener('transitionend', handlePanelTransitionEnd)\n      }\n    }\n\n    return\n  }, [isResolvedOpen])\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    if (isResolvedOpen) {\n      const previousValue = rootRef.current?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef.current?.getBoundingClientRect().height\n        if (rootRef.current?.parentElement) {\n          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (\n            rootRef.current?.parentElement &&\n            typeof previousValue === 'string'\n          ) {\n            rootRef.current.parentElement.style.paddingBottom = previousValue\n          }\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    style: toggleButtonStyle = {},\n    onClick: onToggleClick,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  return (\n    <Container ref={rootRef} className=\"TanStackRouterDevtools\">\n      <ThemeProvider theme={theme}>\n        <TanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          style={{\n            direction: 'ltr',\n            position: 'fixed',\n            bottom: '0',\n            right: '0',\n            zIndex: 99999,\n            width: '100%',\n            height: devtoolsHeight ?? 500,\n            maxHeight: '90%',\n            boxShadow: '0 0 20px rgba(0,0,0,.3)',\n            borderTop: `1px solid ${theme.gray}`,\n            transformOrigin: 'top',\n            // visibility will be toggled after transitions, but set initial state here\n            visibility: isOpen ? 'visible' : 'hidden',\n            ...panelStyle,\n            ...(isResizing\n              ? {\n                  transition: `none`,\n                }\n              : { transition: `all .2s ease` }),\n            ...(isResolvedOpen\n              ? {\n                  opacity: 1,\n                  pointerEvents: 'all',\n                  transform: `translateY(0) scale(1)`,\n                }\n              : {\n                  opacity: 0,\n                  pointerEvents: 'none',\n                  transform: `translateY(15px) scale(1.02)`,\n                }),\n          }}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef.current, e)}\n        />\n        {isResolvedOpen ? (\n          <Button\n            type=\"button\"\n            aria-label=\"Close TanStack Router Devtools\"\n            {...(otherCloseButtonProps as any)}\n            onClick={(e) => {\n              setIsOpen(false)\n              onCloseClick && onCloseClick(e)\n            }}\n            style={{\n              position: 'fixed',\n              zIndex: 99999,\n              margin: '.5em',\n              bottom: 0,\n              ...(position === 'top-right'\n                ? {\n                    right: '0',\n                  }\n                : position === 'top-left'\n                  ? {\n                      left: '0',\n                    }\n                  : position === 'bottom-right'\n                    ? {\n                        right: '0',\n                      }\n                    : {\n                        left: '0',\n                      }),\n              ...closeButtonStyle,\n            }}\n          >\n            Close\n          </Button>\n        ) : null}\n      </ThemeProvider>\n      {!isResolvedOpen ? (\n        <button\n          type=\"button\"\n          {...otherToggleButtonProps}\n          aria-label=\"Open TanStack Router Devtools\"\n          onClick={(e) => {\n            setIsOpen(true)\n            onToggleClick && onToggleClick(e)\n          }}\n          style={{\n            appearance: 'none',\n            background: 'none',\n            border: 0,\n            padding: 0,\n            position: 'fixed',\n            zIndex: 99999,\n            display: 'inline-flex',\n            fontSize: '1.5em',\n            margin: '.5em',\n            cursor: 'pointer',\n            width: 'fit-content',\n            ...(position === 'top-right'\n              ? {\n                  top: '0',\n                  right: '0',\n                }\n              : position === 'top-left'\n                ? {\n                    top: '0',\n                    left: '0',\n                  }\n                : position === 'bottom-right'\n                  ? {\n                      bottom: '0',\n                      right: '0',\n                    }\n                  : {\n                      bottom: '0',\n                      left: '0',\n                    }),\n            ...toggleButtonStyle,\n          }}\n        >\n          <Logo aria-hidden />\n        </button>\n      ) : null}\n    </Container>\n  )\n}\n\nfunction RouteComp({\n  route,\n  isRoot,\n  activeId,\n  setActiveId,\n}: {\n  route: AnyRootRoute | AnyRoute\n  isRoot?: boolean\n  activeId: string | undefined\n  setActiveId: (id: string) => void\n}) {\n  const routerState = useRouterState()\n  const matches =\n    routerState.status === 'pending'\n      ? routerState.pendingMatches ?? []\n      : routerState.matches\n\n  const match = routerState.matches.find((d) => d.routeId === route.id)\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        style={{\n          display: 'flex',\n          borderBottom: `solid 1px ${theme.grayAlt}`,\n          cursor: match ? 'pointer' : 'default',\n          alignItems: 'center',\n          background:\n            route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,\n          padding: '.25rem .5rem',\n          gap: '.5rem',\n        }}\n      >\n        {isRoot ? null : (\n          <div\n            style={{\n              flex: '0 0 auto',\n              width: '.7rem',\n              height: '.7rem',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontWeight: 'bold',\n              borderRadius: '100%',\n              transition: 'all .2s ease-out',\n              background: getRouteStatusColor(matches, route, theme),\n              opacity: match ? 1 : 0.3,\n            }}\n          />\n        )}\n        <div\n          style={{\n            flex: '1 0 auto',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            padding: isRoot ? '0 .25rem' : 0,\n            opacity: match ? 1 : 0.7,\n            fontSize: '0.7rem',\n          }}\n        >\n          <Code>{route.path || trimPath(route.id)} </Code>\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: '.5rem',\n            }}\n          >\n            {match ? <Code style={{ opacity: 0.3 }}>{match.id}</Code> : null}\n            <AgeTicker match={match} />\n          </div>\n        </div>\n      </div>\n      {(route.children as Route[])?.length ? (\n        <div\n          style={{\n            marginLeft: isRoot ? 0 : '1rem',\n            borderLeft: isRoot ? '' : `solid 1px ${theme.grayAlt}`,\n          }}\n        >\n          {[...(route.children as Route[])]\n            .sort((a, b) => {\n              return a.rank - b.rank\n            })\n            .map((r) => (\n              <RouteComp\n                key={r.id}\n                route={r}\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n  HTMLDivElement,\n  DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(props, ref): React.ReactElement {\n  const {\n    isOpen = true,\n    setIsOpen,\n    handleDragStart,\n    router: userRouter,\n    ...panelProps\n  } = props\n\n  const contextRouter = useRouter({ warn: false })\n  const router = userRouter ?? contextRouter\n  const routerState = useRouterState({\n    router,\n  } as any)\n\n  const matches = [\n    ...(routerState.pendingMatches ?? []),\n    ...routerState.matches,\n    ...routerState.cachedMatches,\n  ]\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    () => matches.find((d) => d.routeId === activeId || d.id === activeId),\n    [matches, activeId],\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    <ThemeProvider theme={theme}>\n      <Panel ref={ref} className=\"TanStackRouterDevtoolsPanel\" {...panelProps}>\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: ${theme.backgroundAlt} ${theme.gray};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n              background: ${theme.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: ${theme.gray};\n              border-radius: .5em;\n              border: 3px solid ${theme.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel table {\n              width: 100%;\n            }\n\n            .TanStackRouterDevtoolsPanel table tr {\n              border-bottom: 2px dotted rgba(255, 255, 255, .2);\n            }\n\n            .TanStackRouterDevtoolsPanel table tr:last-child {\n              border-bottom: none\n            }\n\n            .TanStackRouterDevtoolsPanel table td {\n              padding: .25rem .5rem;\n              border-right: 2px dotted rgba(255, 255, 255, .05);\n            }\n\n            .TanStackRouterDevtoolsPanel table td:last-child {\n              border-right: none\n            }\n\n          `,\n          }}\n        />\n        <div\n          style={{\n            position: 'absolute',\n            left: 0,\n            top: 0,\n            width: '100%',\n            height: '4px',\n            marginBottom: '-4px',\n            cursor: 'row-resize',\n            zIndex: 100000,\n          }}\n          onMouseDown={handleDragStart}\n        ></div>\n        <div\n          style={{\n            flex: '1 1 500px',\n            minHeight: '40%',\n            maxHeight: '100%',\n            overflow: 'auto',\n            borderRight: `1px solid ${theme.grayAlt}`,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'start',\n              gap: '1rem',\n              padding: '1rem',\n              alignItems: 'center',\n              background: theme.backgroundAlt,\n            }}\n          >\n            <Logo aria-hidden />\n            <div\n              style={{\n                fontSize: 'clamp(.8rem, 2vw, 1.3rem)',\n                fontWeight: 'bold',\n              }}\n            >\n              <span\n                style={{\n                  fontWeight: 100,\n                }}\n              >\n                Devtools\n              </span>\n            </div>\n          </div>\n          <div\n            style={{\n              overflowY: 'auto',\n              flex: '1',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\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                      ] 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\n          style={{\n            flex: '1 1 500px',\n            minHeight: '40%',\n            maxHeight: '100%',\n            overflow: 'auto',\n            borderRight: `1px solid ${theme.grayAlt}`,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <div\n            style={{\n              flex: '1 1 auto',\n              overflowY: 'auto',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                zIndex: 1,\n                display: 'flex',\n                alignItems: 'center',\n                gap: '.5rem',\n                fontWeight: 'bold',\n              }}\n            >\n              Pathname{' '}\n              {routerState.location.maskedLocation ? (\n                <div\n                  style={{\n                    padding: '.1rem .5rem',\n                    background: theme.warning,\n                    color: 'black',\n                    borderRadius: '.5rem',\n                  }}\n                >\n                  Masked\n                </div>\n              ) : null}\n            </div>\n            <div\n              style={{\n                padding: '.5rem',\n                display: 'flex',\n                gap: '.5rem',\n                alignItems: 'center',\n              }}\n            >\n              <code\n                style={{\n                  opacity: 0.6,\n                }}\n              >\n                {routerState.location.pathname}\n              </code>\n              {routerState.location.maskedLocation ? (\n                <code\n                  style={{\n                    color: theme.warning,\n                    fontWeight: 'bold',\n                  }}\n                >\n                  {routerState.location.maskedLocation.pathname}\n                </code>\n              ) : null}\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                zIndex: 1,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'space-between',\n                gap: '.5rem',\n                fontWeight: 'bold',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: '.5rem',\n                }}\n              >\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(false)\n                  }}\n                  disabled={!showMatches}\n                  style={{\n                    appearance: 'none',\n                    opacity: showMatches ? 0.5 : 1,\n                    border: 0,\n                    background: 'transparent',\n                    color: 'inherit',\n                    cursor: 'pointer',\n                  }}\n                >\n                  Routes\n                </button>\n                /\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(true)\n                  }}\n                  disabled={showMatches}\n                  style={{\n                    appearance: 'none',\n                    opacity: !showMatches ? 0.5 : 1,\n                    border: 0,\n                    background: 'transparent',\n                    color: 'inherit',\n                    cursor: 'pointer',\n                  }}\n                >\n                  Matches\n                </button>\n              </div>\n              <div\n                style={{\n                  opacity: 0.3,\n                  fontSize: '0.7rem',\n                  fontWeight: 'normal',\n                }}\n              >\n                age / staleTime / gcTime\n              </div>\n            </div>\n            {!showMatches ? (\n              <RouteComp\n                route={router.routeTree}\n                isRoot\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ) : (\n              <div>\n                {(routerState.status === 'pending'\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                      style={{\n                        display: 'flex',\n                        borderBottom: `solid 1px ${theme.grayAlt}`,\n                        cursor: 'pointer',\n                        alignItems: 'center',\n                        background:\n                          match === activeMatch\n                            ? 'rgba(255,255,255,.1)'\n                            : undefined,\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: '0 0 auto',\n                          width: '1.3rem',\n                          height: '1.3rem',\n                          marginLeft: '.25rem',\n                          background: getStatusColor(match, theme),\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          fontWeight: 'bold',\n                          borderRadius: '.25rem',\n                          transition: 'all .2s ease-out',\n                        }}\n                      />\n\n                      <Code\n                        style={{\n                          padding: '.5em',\n                          fontSize: '0.7rem',\n                        }}\n                      >\n                        {`${match.id}`}\n                      </Code>\n                      <AgeTicker match={match} />\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n          {routerState.cachedMatches?.length ? (\n            <div\n              style={{\n                flex: '1 1 auto',\n                overflowY: 'auto',\n                maxHeight: '50%',\n              }}\n            >\n              <div\n                style={{\n                  padding: '.5em',\n                  background: theme.backgroundAlt,\n                  position: 'sticky',\n                  top: 0,\n                  zIndex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  gap: '.5rem',\n                  fontWeight: 'bold',\n                }}\n              >\n                <div>Cached Matches</div>\n                <div\n                  style={{\n                    opacity: 0.3,\n                    fontSize: '0.7rem',\n                    fontWeight: 'normal',\n                  }}\n                >\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                      style={{\n                        display: 'flex',\n                        borderBottom: `solid 1px ${theme.grayAlt}`,\n                        cursor: 'pointer',\n                        alignItems: 'center',\n                        background:\n                          match === activeMatch\n                            ? 'rgba(255,255,255,.1)'\n                            : undefined,\n                        fontSize: '0.7rem',\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: '0 0 auto',\n                          width: '.75rem',\n                          height: '.75rem',\n                          marginLeft: '.25rem',\n                          background: getStatusColor(match, theme),\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          fontWeight: 'bold',\n                          borderRadius: '100%',\n                          transition: 'all 1s ease-out',\n                        }}\n                      />\n\n                      <Code\n                        style={{\n                          padding: '.5em',\n                        }}\n                      >\n                        {`${match.id}`}\n                      </Code>\n\n                      <div style={{ marginLeft: 'auto' }}>\n                        <AgeTicker match={match} />\n                      </div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          ) : null}\n        </div>\n        {activeMatch ? (\n          <ActivePanel>\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Match Details\n            </div>\n            <div>\n              <table\n                style={{\n                  fontSize: '0.8rem',\n                }}\n              >\n                <tbody>\n                  <tr>\n                    <td style={{ opacity: '.5' }}>ID</td>\n                    <td>\n                      <Code\n                        style={{\n                          lineHeight: '1.8em',\n                        }}\n                      >\n                        {JSON.stringify(activeMatch.id, null, 2)}\n                      </Code>\n                    </td>\n                  </tr>\n                  <tr>\n                    <td style={{ opacity: '.5' }}>Status</td>\n                    <td>\n                      {routerState.pendingMatches?.find(\n                        (d) => d.id === activeMatch.id,\n                      )\n                        ? 'Pending'\n                        : routerState.matches?.find(\n                              (d) => d.id === activeMatch.id,\n                            )\n                          ? 'Active'\n                          : 'Cached'}{' '}\n                      - {activeMatch.status}\n                    </td>\n                  </tr>\n                  {/* <tr>\n                    <td style={{ opacity: '.5' }}>Invalid</td>\n                    <td>{activeMatch.getIsInvalid().toString()}</td>\n                  </tr> */}\n                  <tr>\n                    <td style={{ opacity: '.5' }}>Last Updated</td>\n                    <td>\n                      {activeMatch.updatedAt\n                        ? new Date(\n                            activeMatch.updatedAt as number,\n                          ).toLocaleTimeString()\n                        : 'N/A'}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            {/* <div\n              style={{\n                background: theme.backgroundAlt,\n                padding: '.5em',\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Actions\n            </div>\n            <div\n              style={{\n                padding: '0.5em',\n              }}\n            >\n              <Button\n                type=\"button\"\n                onClick={() => activeMatch.__store.setState(d => ({...d, status: 'pending'}))}\n                style={{\n                  background: theme.gray,\n                }}\n              >\n                Reload\n              </Button>\n            </div> */}\n            {activeMatch.loaderData ? (\n              <>\n                <div\n                  style={{\n                    background: theme.backgroundAlt,\n                    padding: '.5em',\n                    position: 'sticky',\n                    top: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                  }}\n                >\n                  Loader Data\n                </div>\n                <div\n                  style={{\n                    padding: '.5em',\n                  }}\n                >\n                  <Explorer\n                    label=\"loaderData\"\n                    value={activeMatch.loaderData}\n                    defaultExpanded={{}}\n                  />\n                </div>\n              </>\n            ) : null}\n            <div\n              style={{\n                background: theme.backgroundAlt,\n                padding: '.5em',\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Explorer\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\n              <Explorer\n                label=\"Match\"\n                value={activeMatch}\n                defaultExpanded={{}}\n              />\n            </div>\n          </ActivePanel>\n        ) : null}\n        {hasSearch ? (\n          <div\n            style={{\n              flex: '1 1 500px',\n              minHeight: '40%',\n              maxHeight: '100%',\n              overflow: 'auto',\n              borderRight: `1px solid ${theme.grayAlt}`,\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n                fontWeight: 'bold',\n              }}\n            >\n              Search Params\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\n              <Explorer\n                value={routerState.location.search || {}}\n                defaultExpanded={Object.keys(\n                  (routerState.location.search as {}) || {},\n                ).reduce((obj: any, next) => {\n                  obj[next] = {}\n                  return obj\n                }, {})}\n              />\n            </div>\n          </div>\n        ) : null}\n      </Panel>\n    </ThemeProvider>\n  )\n})\n\nfunction AgeTicker({ match }: { match?: AnyRouteMatch }) {\n  const router = useRouter()\n\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  }, [])\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\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '.25rem',\n        color: age > staleTime ? theme.warning : undefined,\n      }}\n    >\n      <div style={{}}>{formatTime(age)}</div>\n      <div>/</div>\n      <div>{formatTime(staleTime)}</div>\n      <div>/</div>\n      <div>{formatTime(gcTime)}</div>\n    </div>\n  )\n}\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"],"names":["React","_a","_b","theme","TanStackRouterDevtoolsPanel"],"mappings":"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"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  invariant,\n  AnyRouter,\n  Route,\n  AnyRoute,\n  AnyRootRoute,\n  trimPath,\n  useRouter,\n  useRouterState,\n  AnyRouteMatch,\n} from '@tanstack/react-router'\n\nimport useLocalStorage from './useLocalStorage'\nimport {\n  getRouteStatusColor,\n  getStatusColor,\n  multiSortBy,\n  useIsMounted,\n  useSafeState,\n} from './utils'\nimport { Panel, Button, Code, ActivePanel } from './styledComponents'\nimport { ThemeProvider, defaultTheme as theme } from './theme'\n// import { getQueryStatusLabel, getQueryStatusColor } from './utils'\nimport Explorer from './Explorer'\n\nexport type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>\n\ninterface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >\n  /**\n   * The position of the TanStack Router logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'footer'.\n   */\n  containerElement?: string | any\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n}\n\ninterface DevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * The standard React className property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  /**\n   * A boolean variable indicating if the \"lite\" version of the library is being used\n   */\n  router?: AnyRouter\n}\n\nconst isServer = typeof window === 'undefined'\n\nfunction Logo(props: React.HTMLProps<HTMLDivElement>) {\n  return (\n    <div\n      {...props}\n      style={{\n        ...(props.style ?? {}),\n        display: 'flex',\n        alignItems: 'center',\n        flexDirection: 'column',\n        fontSize: '0.8rem',\n        fontWeight: 'bolder',\n        lineHeight: '1',\n      }}\n    >\n      <div\n        style={{\n          letterSpacing: '-0.05rem',\n        }}\n      >\n        TANSTACK\n      </div>\n      <div\n        style={{\n          backgroundImage:\n            'linear-gradient(to right, var(--tw-gradient-stops))',\n          // @ts-ignore\n          '--tw-gradient-from': '#84cc16',\n          '--tw-gradient-stops':\n            'var(--tw-gradient-from), var(--tw-gradient-to)',\n          '--tw-gradient-to': '#10b981',\n          WebkitBackgroundClip: 'text',\n          color: 'transparent',\n          letterSpacing: '0.1rem',\n          marginRight: '-0.2rem',\n        }}\n      >\n        ROUTER\n      </div>\n    </div>\n  )\n}\n\nexport function TanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n}: DevtoolsOptions): React.ReactElement | null {\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'tanstackRouterDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number | null>(\n    'tanstackRouterDevtoolsHeight',\n    null,\n  )\n  const [isResolvedOpen, setIsResolvedOpen] = useSafeState(false)\n  const [isResizing, setIsResizing] = useSafeState(false)\n  const isMounted = useIsMounted()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = dragInfo?.originalHeight + delta\n\n      setDevtoolsHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  // Toggle panel visibility before/after transition (depending on direction).\n  // Prevents focusing in a closed panel.\n  React.useEffect(() => {\n    const ref = panelRef.current\n\n    if (ref) {\n      const handlePanelTransitionStart = () => {\n        if (ref && isResolvedOpen) {\n          ref.style.visibility = 'visible'\n        }\n      }\n\n      const handlePanelTransitionEnd = () => {\n        if (ref && !isResolvedOpen) {\n          ref.style.visibility = 'hidden'\n        }\n      }\n\n      ref.addEventListener('transitionstart', handlePanelTransitionStart)\n      ref.addEventListener('transitionend', handlePanelTransitionEnd)\n\n      return () => {\n        ref.removeEventListener('transitionstart', handlePanelTransitionStart)\n        ref.removeEventListener('transitionend', handlePanelTransitionEnd)\n      }\n    }\n\n    return\n  }, [isResolvedOpen])\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    if (isResolvedOpen) {\n      const previousValue = rootRef.current?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef.current?.getBoundingClientRect().height\n        if (rootRef.current?.parentElement) {\n          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (\n            rootRef.current?.parentElement &&\n            typeof previousValue === 'string'\n          ) {\n            rootRef.current.parentElement.style.paddingBottom = previousValue\n          }\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    style: toggleButtonStyle = {},\n    onClick: onToggleClick,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  return (\n    <Container ref={rootRef} className=\"TanStackRouterDevtools\">\n      <ThemeProvider theme={theme}>\n        <TanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          style={{\n            direction: 'ltr',\n            position: 'fixed',\n            bottom: '0',\n            right: '0',\n            zIndex: 99999,\n            width: '100%',\n            height: devtoolsHeight ?? 500,\n            maxHeight: '90%',\n            boxShadow: '0 0 20px rgba(0,0,0,.3)',\n            borderTop: `1px solid ${theme.gray}`,\n            transformOrigin: 'top',\n            // visibility will be toggled after transitions, but set initial state here\n            visibility: isOpen ? 'visible' : 'hidden',\n            ...panelStyle,\n            ...(isResizing\n              ? {\n                  transition: `none`,\n                }\n              : { transition: `all .2s ease` }),\n            ...(isResolvedOpen\n              ? {\n                  opacity: 1,\n                  pointerEvents: 'all',\n                  transform: `translateY(0) scale(1)`,\n                }\n              : {\n                  opacity: 0,\n                  pointerEvents: 'none',\n                  transform: `translateY(15px) scale(1.02)`,\n                }),\n          }}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef.current, e)}\n        />\n        {isResolvedOpen ? (\n          <Button\n            type=\"button\"\n            aria-label=\"Close TanStack Router Devtools\"\n            {...(otherCloseButtonProps as any)}\n            onClick={(e) => {\n              setIsOpen(false)\n              onCloseClick && onCloseClick(e)\n            }}\n            style={{\n              position: 'fixed',\n              zIndex: 99999,\n              margin: '.5em',\n              bottom: 0,\n              ...(position === 'top-right'\n                ? {\n                    right: '0',\n                  }\n                : position === 'top-left'\n                  ? {\n                      left: '0',\n                    }\n                  : position === 'bottom-right'\n                    ? {\n                        right: '0',\n                      }\n                    : {\n                        left: '0',\n                      }),\n              ...closeButtonStyle,\n            }}\n          >\n            Close\n          </Button>\n        ) : null}\n      </ThemeProvider>\n      {!isResolvedOpen ? (\n        <button\n          type=\"button\"\n          {...otherToggleButtonProps}\n          aria-label=\"Open TanStack Router Devtools\"\n          onClick={(e) => {\n            setIsOpen(true)\n            onToggleClick && onToggleClick(e)\n          }}\n          style={{\n            appearance: 'none',\n            background: 'none',\n            border: 0,\n            padding: 0,\n            position: 'fixed',\n            zIndex: 99999,\n            display: 'inline-flex',\n            fontSize: '1.5em',\n            margin: '.5em',\n            cursor: 'pointer',\n            width: 'fit-content',\n            ...(position === 'top-right'\n              ? {\n                  top: '0',\n                  right: '0',\n                }\n              : position === 'top-left'\n                ? {\n                    top: '0',\n                    left: '0',\n                  }\n                : position === 'bottom-right'\n                  ? {\n                      bottom: '0',\n                      right: '0',\n                    }\n                  : {\n                      bottom: '0',\n                      left: '0',\n                    }),\n            ...toggleButtonStyle,\n          }}\n        >\n          <Logo aria-hidden />\n        </button>\n      ) : null}\n    </Container>\n  )\n}\n\nfunction RouteComp({\n  route,\n  isRoot,\n  activeId,\n  setActiveId,\n}: {\n  route: AnyRootRoute | AnyRoute\n  isRoot?: boolean\n  activeId: string | undefined\n  setActiveId: (id: string) => void\n}) {\n  const routerState = useRouterState()\n  const matches =\n    routerState.status === 'pending'\n      ? routerState.pendingMatches ?? []\n      : routerState.matches\n\n  const match = routerState.matches.find((d) => d.routeId === route.id)\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        style={{\n          display: 'flex',\n          borderBottom: `solid 1px ${theme.grayAlt}`,\n          cursor: match ? 'pointer' : 'default',\n          alignItems: 'center',\n          background:\n            route.id === activeId ? 'rgba(255,255,255,.1)' : undefined,\n          padding: '.25rem .5rem',\n          gap: '.5rem',\n        }}\n      >\n        {isRoot ? null : (\n          <div\n            style={{\n              flex: '0 0 auto',\n              width: '.7rem',\n              height: '.7rem',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontWeight: 'bold',\n              borderRadius: '100%',\n              transition: 'all .2s ease-out',\n              background: getRouteStatusColor(matches, route, theme),\n              opacity: match ? 1 : 0.3,\n            }}\n          />\n        )}\n        <div\n          style={{\n            flex: '1 0 auto',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            padding: isRoot ? '0 .25rem' : 0,\n            opacity: match ? 1 : 0.7,\n            fontSize: '0.7rem',\n          }}\n        >\n          <Code>{route.path || trimPath(route.id)} </Code>\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: '.5rem',\n            }}\n          >\n            {match ? <Code style={{ opacity: 0.3 }}>{match.id}</Code> : null}\n            <AgeTicker match={match} />\n          </div>\n        </div>\n      </div>\n      {(route.children as Route[])?.length ? (\n        <div\n          style={{\n            marginLeft: isRoot ? 0 : '1rem',\n            borderLeft: isRoot ? '' : `solid 1px ${theme.grayAlt}`,\n          }}\n        >\n          {[...(route.children as Route[])]\n            .sort((a, b) => {\n              return a.rank - b.rank\n            })\n            .map((r) => (\n              <RouteComp\n                key={r.id}\n                route={r}\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport const TanStackRouterDevtoolsPanel = React.forwardRef<\n  HTMLDivElement,\n  DevtoolsPanelOptions\n>(function TanStackRouterDevtoolsPanel(props, ref): React.ReactElement {\n  const {\n    isOpen = true,\n    setIsOpen,\n    handleDragStart,\n    router: userRouter,\n    ...panelProps\n  } = props\n\n  const contextRouter = useRouter({ warn: false })\n  const router = userRouter ?? contextRouter\n  const routerState = useRouterState({\n    router,\n  } as any)\n\n  const matches = [\n    ...(routerState.pendingMatches ?? []),\n    ...routerState.matches,\n    ...routerState.cachedMatches,\n  ]\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    () => matches.find((d) => d.routeId === activeId || d.id === activeId),\n    [matches, activeId],\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    <ThemeProvider theme={theme}>\n      <Panel ref={ref} className=\"TanStackRouterDevtoolsPanel\" {...panelProps}>\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: ${theme.backgroundAlt} ${theme.gray};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {\n              background: ${theme.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: ${theme.gray};\n              border-radius: .5em;\n              border: 3px solid ${theme.backgroundAlt};\n            }\n\n            .TanStackRouterDevtoolsPanel table {\n              width: 100%;\n            }\n\n            .TanStackRouterDevtoolsPanel table tr {\n              border-bottom: 2px dotted rgba(255, 255, 255, .2);\n            }\n\n            .TanStackRouterDevtoolsPanel table tr:last-child {\n              border-bottom: none\n            }\n\n            .TanStackRouterDevtoolsPanel table td {\n              padding: .25rem .5rem;\n              border-right: 2px dotted rgba(255, 255, 255, .05);\n            }\n\n            .TanStackRouterDevtoolsPanel table td:last-child {\n              border-right: none\n            }\n\n          `,\n          }}\n        />\n        {handleDragStart ? (\n          <div\n            style={{\n              position: 'absolute',\n              left: 0,\n              top: 0,\n              width: '100%',\n              height: '4px',\n              marginBottom: '-4px',\n              cursor: 'row-resize',\n              zIndex: 100000,\n            }}\n            onMouseDown={handleDragStart}\n          ></div>\n        ) : null}\n        <div\n          style={{\n            flex: '1 1 500px',\n            minHeight: '40%',\n            maxHeight: '100%',\n            overflow: 'auto',\n            borderRight: `1px solid ${theme.grayAlt}`,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'start',\n              gap: '1rem',\n              padding: '1rem',\n              alignItems: 'center',\n              background: theme.backgroundAlt,\n            }}\n          >\n            <Logo aria-hidden />\n            <div\n              style={{\n                fontSize: 'clamp(.8rem, 2vw, 1.3rem)',\n                fontWeight: 'bold',\n              }}\n            >\n              <span\n                style={{\n                  fontWeight: 100,\n                }}\n              >\n                Devtools\n              </span>\n            </div>\n          </div>\n          <div\n            style={{\n              overflowY: 'auto',\n              flex: '1',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\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                      ] 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\n          style={{\n            flex: '1 1 500px',\n            minHeight: '40%',\n            maxHeight: '100%',\n            overflow: 'auto',\n            borderRight: `1px solid ${theme.grayAlt}`,\n            display: 'flex',\n            flexDirection: 'column',\n          }}\n        >\n          <div\n            style={{\n              flex: '1 1 auto',\n              overflowY: 'auto',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                zIndex: 1,\n                display: 'flex',\n                alignItems: 'center',\n                gap: '.5rem',\n                fontWeight: 'bold',\n              }}\n            >\n              Pathname{' '}\n              {routerState.location.maskedLocation ? (\n                <div\n                  style={{\n                    padding: '.1rem .5rem',\n                    background: theme.warning,\n                    color: 'black',\n                    borderRadius: '.5rem',\n                  }}\n                >\n                  Masked\n                </div>\n              ) : null}\n            </div>\n            <div\n              style={{\n                padding: '.5rem',\n                display: 'flex',\n                gap: '.5rem',\n                alignItems: 'center',\n              }}\n            >\n              <code\n                style={{\n                  opacity: 0.6,\n                }}\n              >\n                {routerState.location.pathname}\n              </code>\n              {routerState.location.maskedLocation ? (\n                <code\n                  style={{\n                    color: theme.warning,\n                    fontWeight: 'bold',\n                  }}\n                >\n                  {routerState.location.maskedLocation.pathname}\n                </code>\n              ) : null}\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                zIndex: 1,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'space-between',\n                gap: '.5rem',\n                fontWeight: 'bold',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: '.5rem',\n                }}\n              >\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(false)\n                  }}\n                  disabled={!showMatches}\n                  style={{\n                    appearance: 'none',\n                    opacity: showMatches ? 0.5 : 1,\n                    border: 0,\n                    background: 'transparent',\n                    color: 'inherit',\n                    cursor: 'pointer',\n                  }}\n                >\n                  Routes\n                </button>\n                /\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowMatches(true)\n                  }}\n                  disabled={showMatches}\n                  style={{\n                    appearance: 'none',\n                    opacity: !showMatches ? 0.5 : 1,\n                    border: 0,\n                    background: 'transparent',\n                    color: 'inherit',\n                    cursor: 'pointer',\n                  }}\n                >\n                  Matches\n                </button>\n              </div>\n              <div\n                style={{\n                  opacity: 0.3,\n                  fontSize: '0.7rem',\n                  fontWeight: 'normal',\n                }}\n              >\n                age / staleTime / gcTime\n              </div>\n            </div>\n            {!showMatches ? (\n              <RouteComp\n                route={router.routeTree}\n                isRoot\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ) : (\n              <div>\n                {(routerState.status === 'pending'\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                      style={{\n                        display: 'flex',\n                        borderBottom: `solid 1px ${theme.grayAlt}`,\n                        cursor: 'pointer',\n                        alignItems: 'center',\n                        background:\n                          match === activeMatch\n                            ? 'rgba(255,255,255,.1)'\n                            : undefined,\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: '0 0 auto',\n                          width: '1.3rem',\n                          height: '1.3rem',\n                          marginLeft: '.25rem',\n                          background: getStatusColor(match, theme),\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          fontWeight: 'bold',\n                          borderRadius: '.25rem',\n                          transition: 'all .2s ease-out',\n                        }}\n                      />\n\n                      <Code\n                        style={{\n                          padding: '.5em',\n                          fontSize: '0.7rem',\n                        }}\n                      >\n                        {`${match.id}`}\n                      </Code>\n                      <AgeTicker match={match} />\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n          {routerState.cachedMatches?.length ? (\n            <div\n              style={{\n                flex: '1 1 auto',\n                overflowY: 'auto',\n                maxHeight: '50%',\n              }}\n            >\n              <div\n                style={{\n                  padding: '.5em',\n                  background: theme.backgroundAlt,\n                  position: 'sticky',\n                  top: 0,\n                  zIndex: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  gap: '.5rem',\n                  fontWeight: 'bold',\n                }}\n              >\n                <div>Cached Matches</div>\n                <div\n                  style={{\n                    opacity: 0.3,\n                    fontSize: '0.7rem',\n                    fontWeight: 'normal',\n                  }}\n                >\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                      style={{\n                        display: 'flex',\n                        borderBottom: `solid 1px ${theme.grayAlt}`,\n                        cursor: 'pointer',\n                        alignItems: 'center',\n                        background:\n                          match === activeMatch\n                            ? 'rgba(255,255,255,.1)'\n                            : undefined,\n                        fontSize: '0.7rem',\n                      }}\n                    >\n                      <div\n                        style={{\n                          flex: '0 0 auto',\n                          width: '.75rem',\n                          height: '.75rem',\n                          marginLeft: '.25rem',\n                          background: getStatusColor(match, theme),\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          fontWeight: 'bold',\n                          borderRadius: '100%',\n                          transition: 'all 1s ease-out',\n                        }}\n                      />\n\n                      <Code\n                        style={{\n                          padding: '.5em',\n                        }}\n                      >\n                        {`${match.id}`}\n                      </Code>\n\n                      <div style={{ marginLeft: 'auto' }}>\n                        <AgeTicker match={match} />\n                      </div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          ) : null}\n        </div>\n        {activeMatch ? (\n          <ActivePanel>\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Match Details\n            </div>\n            <div>\n              <table\n                style={{\n                  fontSize: '0.8rem',\n                }}\n              >\n                <tbody>\n                  <tr>\n                    <td style={{ opacity: '.5' }}>ID</td>\n                    <td>\n                      <Code\n                        style={{\n                          lineHeight: '1.8em',\n                        }}\n                      >\n                        {JSON.stringify(activeMatch.id, null, 2)}\n                      </Code>\n                    </td>\n                  </tr>\n                  <tr>\n                    <td style={{ opacity: '.5' }}>Status</td>\n                    <td>\n                      {routerState.pendingMatches?.find(\n                        (d) => d.id === activeMatch.id,\n                      )\n                        ? 'Pending'\n                        : routerState.matches?.find(\n                              (d) => d.id === activeMatch.id,\n                            )\n                          ? 'Active'\n                          : 'Cached'}{' '}\n                      - {activeMatch.status}\n                    </td>\n                  </tr>\n                  {/* <tr>\n                    <td style={{ opacity: '.5' }}>Invalid</td>\n                    <td>{activeMatch.getIsInvalid().toString()}</td>\n                  </tr> */}\n                  <tr>\n                    <td style={{ opacity: '.5' }}>Last Updated</td>\n                    <td>\n                      {activeMatch.updatedAt\n                        ? new Date(\n                            activeMatch.updatedAt as number,\n                          ).toLocaleTimeString()\n                        : 'N/A'}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n            {/* <div\n              style={{\n                background: theme.backgroundAlt,\n                padding: '.5em',\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Actions\n            </div>\n            <div\n              style={{\n                padding: '0.5em',\n              }}\n            >\n              <Button\n                type=\"button\"\n                onClick={() => activeMatch.__store.setState(d => ({...d, status: 'pending'}))}\n                style={{\n                  background: theme.gray,\n                }}\n              >\n                Reload\n              </Button>\n            </div> */}\n            {activeMatch.loaderData ? (\n              <>\n                <div\n                  style={{\n                    background: theme.backgroundAlt,\n                    padding: '.5em',\n                    position: 'sticky',\n                    top: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                  }}\n                >\n                  Loader Data\n                </div>\n                <div\n                  style={{\n                    padding: '.5em',\n                  }}\n                >\n                  <Explorer\n                    label=\"loaderData\"\n                    value={activeMatch.loaderData}\n                    defaultExpanded={{}}\n                  />\n                </div>\n              </>\n            ) : null}\n            <div\n              style={{\n                background: theme.backgroundAlt,\n                padding: '.5em',\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n              }}\n            >\n              Explorer\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\n              <Explorer\n                label=\"Match\"\n                value={activeMatch}\n                defaultExpanded={{}}\n              />\n            </div>\n          </ActivePanel>\n        ) : null}\n        {hasSearch ? (\n          <div\n            style={{\n              flex: '1 1 500px',\n              minHeight: '40%',\n              maxHeight: '100%',\n              overflow: 'auto',\n              borderRight: `1px solid ${theme.grayAlt}`,\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                position: 'sticky',\n                top: 0,\n                bottom: 0,\n                zIndex: 1,\n                fontWeight: 'bold',\n              }}\n            >\n              Search Params\n            </div>\n            <div\n              style={{\n                padding: '.5em',\n              }}\n            >\n              <Explorer\n                value={routerState.location.search || {}}\n                defaultExpanded={Object.keys(\n                  (routerState.location.search as {}) || {},\n                ).reduce((obj: any, next) => {\n                  obj[next] = {}\n                  return obj\n                }, {})}\n              />\n            </div>\n          </div>\n        ) : null}\n      </Panel>\n    </ThemeProvider>\n  )\n})\n\nfunction AgeTicker({ match }: { match?: AnyRouteMatch }) {\n  const router = useRouter()\n\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  }, [])\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\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '.25rem',\n        color: age > staleTime ? theme.warning : undefined,\n      }}\n    >\n      <div style={{}}>{formatTime(age)}</div>\n      <div>/</div>\n      <div>{formatTime(staleTime)}</div>\n      <div>/</div>\n      <div>{formatTime(gcTime)}</div>\n    </div>\n  )\n}\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"],"names":["React","_a","_b","theme","TanStackRouterDevtoolsPanel"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-devtools",
-  "version": "1.16.2",
+  "version": "1.16.4",
   "description": "",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/devtools.tsx

@@ -89,7 +89,7 @@ interface DevtoolsPanelOptions {
   /**
    * Handles the opening and closing the devtools panel
    */
-  handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  handleDragStart?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   /**
    * A boolean variable indicating if the "lite" version of the library is being used
    */
@@ -617,19 +617,21 @@ export const TanStackRouterDevtoolsPanel = React.forwardRef<
           `,
           }}
         />
-        <div
-          style={{
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            width: '100%',
-            height: '4px',
-            marginBottom: '-4px',
-            cursor: 'row-resize',
-            zIndex: 100000,
-          }}
-          onMouseDown={handleDragStart}
-        ></div>
+        {handleDragStart ? (
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              width: '100%',
+              height: '4px',
+              marginBottom: '-4px',
+              cursor: 'row-resize',
+              zIndex: 100000,
+            }}
+            onMouseDown={handleDragStart}
+          ></div>
+        ) : null}
         <div
           style={{
             flex: '1 1 500px',