@tanstack/router-devtools 1.7.1 → 1.8.1

package/dist/cjs/devtools.cjs.map

@@ -0,0 +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            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 router = useRouter()\n  const routerState = useRouterState()\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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"}

package/dist/cjs/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const devtools = require("./devtools.cjs");
+exports.TanStackRouterDevtools = devtools.TanStackRouterDevtools;
+exports.TanStackRouterDevtoolsPanel = devtools.TanStackRouterDevtoolsPanel;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/styledComponents.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("./utils.cjs");
+const Panel = utils.styled(
+  "div",
+  (_props, theme) => ({
+    fontSize: "clamp(12px, 1.5vw, 14px)",
+    fontFamily: `sans-serif`,
+    display: "flex",
+    backgroundColor: theme.background,
+    color: theme.foreground
+  }),
+  {
+    "(max-width: 700px)": {
+      flexDirection: "column"
+    },
+    "(max-width: 600px)": {
+      fontSize: ".9em"
+      // flexDirection: 'column',
+    }
+  }
+);
+const ActivePanel = utils.styled(
+  "div",
+  () => ({
+    flex: "1 1 500px",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto",
+    height: "100%"
+  }),
+  {
+    "(max-width: 700px)": (_props, theme) => ({
+      borderTop: `2px solid ${theme.gray}`
+    })
+  }
+);
+const Button = utils.styled("button", (props, theme) => ({
+  appearance: "none",
+  fontSize: ".9em",
+  fontWeight: "bold",
+  background: theme.gray,
+  border: "0",
+  borderRadius: ".3em",
+  color: "white",
+  padding: ".5em",
+  opacity: props.disabled ? ".5" : void 0,
+  cursor: "pointer"
+}));
+const Code = utils.styled("code", {
+  fontSize: ".9em"
+});
+utils.styled("input", (_props, theme) => ({
+  backgroundColor: theme.inputBackgroundColor,
+  border: 0,
+  borderRadius: ".2em",
+  color: theme.inputTextColor,
+  fontSize: ".9em",
+  lineHeight: `1.3`,
+  padding: ".3em .4em"
+}));
+utils.styled(
+  "select",
+  (_props, theme) => ({
+    display: `inline-block`,
+    fontSize: `.9em`,
+    fontFamily: `sans-serif`,
+    fontWeight: "normal",
+    lineHeight: `1.3`,
+    padding: `.3em 1.5em .3em .5em`,
+    height: "auto",
+    border: 0,
+    borderRadius: `.2em`,
+    appearance: `none`,
+    WebkitAppearance: "none",
+    backgroundColor: theme.inputBackgroundColor,
+    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
+    backgroundRepeat: `no-repeat`,
+    backgroundPosition: `right .55em center`,
+    backgroundSize: `.65em auto, 100%`,
+    color: theme.inputTextColor
+  }),
+  {
+    "(max-width: 500px)": {
+      display: "none"
+    }
+  }
+);
+exports.ActivePanel = ActivePanel;
+exports.Button = Button;
+exports.Code = Code;
+exports.Panel = Panel;
+//# sourceMappingURL=styledComponents.cjs.map

package/dist/cjs/styledComponents.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styledComponents.cjs","sources":["../../src/styledComponents.ts"],"sourcesContent":["import { styled } from './utils'\n\nexport const Panel = styled(\n  'div',\n  (_props, theme) => ({\n    fontSize: 'clamp(12px, 1.5vw, 14px)',\n    fontFamily: `sans-serif`,\n    display: 'flex',\n    backgroundColor: theme.background,\n    color: theme.foreground,\n  }),\n  {\n    '(max-width: 700px)': {\n      flexDirection: 'column',\n    },\n    '(max-width: 600px)': {\n      fontSize: '.9em',\n      // flexDirection: 'column',\n    },\n  },\n)\n\nexport const ActivePanel = styled(\n  'div',\n  () => ({\n    flex: '1 1 500px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'auto',\n    height: '100%',\n  }),\n  {\n    '(max-width: 700px)': (_props, theme) => ({\n      borderTop: `2px solid ${theme.gray}`,\n    }),\n  },\n)\n\nexport const Button = styled('button', (props, theme) => ({\n  appearance: 'none',\n  fontSize: '.9em',\n  fontWeight: 'bold',\n  background: theme.gray,\n  border: '0',\n  borderRadius: '.3em',\n  color: 'white',\n  padding: '.5em',\n  opacity: props.disabled ? '.5' : undefined,\n  cursor: 'pointer',\n}))\n\n// export const QueryKeys = styled('span', {\n//   display: 'inline-block',\n//   fontSize: '0.9em',\n// })\n\n// export const QueryKey = styled('span', {\n//   display: 'inline-flex',\n//   alignItems: 'center',\n//   padding: '.2em .4em',\n//   fontWeight: 'bold',\n//   textShadow: '0 0 10px black',\n//   borderRadius: '.2em',\n// })\n\nexport const Code = styled('code', {\n  fontSize: '.9em',\n})\n\nexport const Input = styled('input', (_props, theme) => ({\n  backgroundColor: theme.inputBackgroundColor,\n  border: 0,\n  borderRadius: '.2em',\n  color: theme.inputTextColor,\n  fontSize: '.9em',\n  lineHeight: `1.3`,\n  padding: '.3em .4em',\n}))\n\nexport const Select = styled(\n  'select',\n  (_props, theme) => ({\n    display: `inline-block`,\n    fontSize: `.9em`,\n    fontFamily: `sans-serif`,\n    fontWeight: 'normal',\n    lineHeight: `1.3`,\n    padding: `.3em 1.5em .3em .5em`,\n    height: 'auto',\n    border: 0,\n    borderRadius: `.2em`,\n    appearance: `none`,\n    WebkitAppearance: 'none',\n    backgroundColor: theme.inputBackgroundColor,\n    backgroundImage: `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")`,\n    backgroundRepeat: `no-repeat`,\n    backgroundPosition: `right .55em center`,\n    backgroundSize: `.65em auto, 100%`,\n    color: theme.inputTextColor,\n  }),\n  {\n    '(max-width: 500px)': {\n      display: 'none',\n    },\n  },\n)\n"],"names":["styled"],"mappings":";;;AAEO,MAAM,QAAQA,MAAA;AAAA,EACnB;AAAA,EACA,CAAC,QAAQ,WAAW;AAAA,IAClB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB,MAAM;AAAA,IACvB,OAAO,MAAM;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,sBAAsB;AAAA,MACpB,eAAe;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,MACpB,UAAU;AAAA;AAAA,IAEZ;AAAA,EACF;AACF;AAEO,MAAM,cAAcA,MAAA;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV;AAAA,IACE,sBAAsB,CAAC,QAAQ,WAAW;AAAA,MACxC,WAAW,aAAa,MAAM,IAAI;AAAA,IAAA;AAAA,EAEtC;AACF;AAEO,MAAM,SAASA,MAAAA,OAAO,UAAU,CAAC,OAAO,WAAW;AAAA,EACxD,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY,MAAM;AAAA,EAClB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM,WAAW,OAAO;AAAA,EACjC,QAAQ;AACV,EAAE;AAgBW,MAAA,OAAOA,aAAO,QAAQ;AAAA,EACjC,UAAU;AACZ,CAAC;AAEoBA,MAAAA,OAAO,SAAS,CAAC,QAAQ,WAAW;AAAA,EACvD,iBAAiB,MAAM;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO,MAAM;AAAA,EACb,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AACX,EAAE;AAEoBA,MAAA;AAAA,EACpB;AAAA,EACA,CAAC,QAAQ,WAAW;AAAA,IAClB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,iBAAiB,MAAM;AAAA,IACvB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO,MAAM;AAAA,EAAA;AAAA,EAEf;AAAA,IACE,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;;;"}

package/dist/cjs/theme.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const defaultTheme = {
+  background: "#222222",
+  backgroundAlt: "#292929",
+  foreground: "white",
+  gray: "#444",
+  grayAlt: "#444",
+  inputBackgroundColor: "#fff",
+  inputTextColor: "#000",
+  success: "#80cb00",
+  danger: "#ff0085",
+  active: "#0099ff",
+  warning: "#ffb200"
+};
+const ThemeContext = React.createContext(defaultTheme);
+function ThemeProvider({ theme, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: theme, ...rest });
+}
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
+exports.ThemeProvider = ThemeProvider;
+exports.defaultTheme = defaultTheme;
+exports.useTheme = useTheme;
+//# sourceMappingURL=theme.cjs.map

package/dist/cjs/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.cjs","sources":["../../src/theme.tsx"],"sourcesContent":["import React from 'react'\n\nexport const defaultTheme = {\n  background: '#222222',\n  backgroundAlt: '#292929',\n  foreground: 'white',\n  gray: '#444',\n  grayAlt: '#444',\n  inputBackgroundColor: '#fff',\n  inputTextColor: '#000',\n  success: '#80cb00',\n  danger: '#ff0085',\n  active: '#0099ff',\n  warning: '#ffb200',\n} as const\n\nexport type Theme = typeof defaultTheme\ninterface ProviderProps {\n  theme: Theme\n  children?: React.ReactNode\n}\n\nconst ThemeContext = React.createContext(defaultTheme)\n\nexport function ThemeProvider({ theme, ...rest }: ProviderProps) {\n  return <ThemeContext.Provider value={theme} {...rest} />\n}\n\nexport function useTheme() {\n  return React.useContext(ThemeContext)\n}\n"],"names":[],"mappings":";;;;AAEO,MAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,SAAS;AAAA,EACT,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX;AAQA,MAAM,eAAe,MAAM,cAAc,YAAY;AAE9C,SAAS,cAAc,EAAE,OAAO,GAAG,QAAuB;AAC/D,wCAAQ,aAAa,UAAb,EAAsB,OAAO,OAAQ,GAAG,KAAM,CAAA;AACxD;AAEO,SAAS,WAAW;AAClB,SAAA,MAAM,WAAW,YAAY;AACtC;;;;"}

package/dist/cjs/useLocalStorage.cjs

@@ -0,0 +1,45 @@
+"use strict";
+const React = require("react");
+const getItem = (key) => {
+  try {
+    const itemValue = localStorage.getItem(key);
+    if (typeof itemValue === "string") {
+      return JSON.parse(itemValue);
+    }
+    return void 0;
+  } catch {
+    return void 0;
+  }
+};
+function useLocalStorage(key, defaultValue) {
+  const [value, setValue] = React.useState();
+  React.useEffect(() => {
+    const initialValue = getItem(key);
+    if (typeof initialValue === "undefined" || initialValue === null) {
+      setValue(
+        typeof defaultValue === "function" ? defaultValue() : defaultValue
+      );
+    } else {
+      setValue(initialValue);
+    }
+  }, [defaultValue, key]);
+  const setter = React.useCallback(
+    (updater) => {
+      setValue((old) => {
+        let newVal = updater;
+        if (typeof updater == "function") {
+          newVal = updater(old);
+        }
+        try {
+          localStorage.setItem(key, JSON.stringify(newVal));
+        } catch {
+        }
+        return newVal;
+      });
+    },
+    [key]
+  );
+  return [value, setter];
+}
+module.exports = useLocalStorage;
+//# sourceMappingURL=useLocalStorage.cjs.map

package/dist/cjs/useLocalStorage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalStorage.cjs","sources":["../../src/useLocalStorage.ts"],"sourcesContent":["import React from 'react'\n\nconst getItem = (key: string): unknown => {\n  try {\n    const itemValue = localStorage.getItem(key)\n    if (typeof itemValue === 'string') {\n      return JSON.parse(itemValue)\n    }\n    return undefined\n  } catch {\n    return undefined\n  }\n}\n\nexport default function useLocalStorage<T>(\n  key: string,\n  defaultValue: T | undefined,\n): [T | undefined, (newVal: T | ((prevVal: T) => T)) => void] {\n  const [value, setValue] = React.useState<T>()\n\n  React.useEffect(() => {\n    const initialValue = getItem(key) as T | undefined\n\n    if (typeof initialValue === 'undefined' || initialValue === null) {\n      setValue(\n        typeof defaultValue === 'function' ? defaultValue() : defaultValue,\n      )\n    } else {\n      setValue(initialValue)\n    }\n  }, [defaultValue, key])\n\n  const setter = React.useCallback(\n    (updater: any) => {\n      setValue((old) => {\n        let newVal = updater\n\n        if (typeof updater == 'function') {\n          newVal = updater(old)\n        }\n        try {\n          localStorage.setItem(key, JSON.stringify(newVal))\n        } catch {}\n\n        return newVal\n      })\n    },\n    [key],\n  )\n\n  return [value, setter]\n}\n"],"names":[],"mappings":";;AAEA,MAAM,UAAU,CAAC,QAAyB;AACpC,MAAA;AACI,UAAA,YAAY,aAAa,QAAQ,GAAG;AACtC,QAAA,OAAO,cAAc,UAAU;AAC1B,aAAA,KAAK,MAAM,SAAS;AAAA,IAC7B;AACO,WAAA;AAAA,EAAA,QACD;AACC,WAAA;AAAA,EACT;AACF;AAEwB,SAAA,gBACtB,KACA,cAC4D;AAC5D,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAY;AAE5C,QAAM,UAAU,MAAM;AACd,UAAA,eAAe,QAAQ,GAAG;AAEhC,QAAI,OAAO,iBAAiB,eAAe,iBAAiB,MAAM;AAChE;AAAA,QACE,OAAO,iBAAiB,aAAa,aAAA,IAAiB;AAAA,MAAA;AAAA,IACxD,OACK;AACL,eAAS,YAAY;AAAA,IACvB;AAAA,EAAA,GACC,CAAC,cAAc,GAAG,CAAC;AAEtB,QAAM,SAAS,MAAM;AAAA,IACnB,CAAC,YAAiB;AAChB,eAAS,CAAC,QAAQ;AAChB,YAAI,SAAS;AAET,YAAA,OAAO,WAAW,YAAY;AAChC,mBAAS,QAAQ,GAAG;AAAA,QACtB;AACI,YAAA;AACF,uBAAa,QAAQ,KAAK,KAAK,UAAU,MAAM,CAAC;AAAA,QAAA,QAC1C;AAAA,QAAC;AAEF,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AAAA,IACA,CAAC,GAAG;AAAA,EAAA;AAGC,SAAA,CAAC,OAAO,MAAM;AACvB;;"}

package/dist/cjs/useMediaQuery.cjs

@@ -0,0 +1,27 @@
+"use strict";
+const React = require("react");
+function useMediaQuery(query) {
+  const [isMatch, setIsMatch] = React.useState(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia && window.matchMedia(query).matches;
+    }
+    return;
+  });
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (!window.matchMedia) {
+        return;
+      }
+      const matcher = window.matchMedia(query);
+      const onChange = ({ matches }) => setIsMatch(matches);
+      matcher.addListener(onChange);
+      return () => {
+        matcher.removeListener(onChange);
+      };
+    }
+    return;
+  }, [isMatch, query, setIsMatch]);
+  return isMatch;
+}
+module.exports = useMediaQuery;
+//# sourceMappingURL=useMediaQuery.cjs.map

package/dist/cjs/useMediaQuery.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.cjs","sources":["../../src/useMediaQuery.ts"],"sourcesContent":["import React from 'react'\n\nexport default function useMediaQuery(query: string): boolean | undefined {\n  // Keep track of the preference in state, start with the current match\n  const [isMatch, setIsMatch] = React.useState(() => {\n    if (typeof window !== 'undefined') {\n      return window.matchMedia && window.matchMedia(query).matches\n    }\n    return\n  })\n\n  // Watch for changes\n  React.useEffect(() => {\n    if (typeof window !== 'undefined') {\n      if (!window.matchMedia) {\n        return\n      }\n\n      // Create a matcher\n      const matcher = window.matchMedia(query)\n\n      // Create our handler\n      const onChange = ({ matches }: { matches: boolean }) =>\n        setIsMatch(matches)\n\n      // Listen for changes\n      matcher.addListener(onChange)\n\n      return () => {\n        // Stop listening for changes\n        matcher.removeListener(onChange)\n      }\n    }\n\n    return\n  }, [isMatch, query, setIsMatch])\n\n  return isMatch\n}\n"],"names":[],"mappings":";;AAEA,SAAwB,cAAc,OAAoC;AAExE,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,MAAM;AAC7C,QAAA,OAAO,WAAW,aAAa;AACjC,aAAO,OAAO,cAAc,OAAO,WAAW,KAAK,EAAE;AAAA,IACvD;AACA;AAAA,EAAA,CACD;AAGD,QAAM,UAAU,MAAM;AAChB,QAAA,OAAO,WAAW,aAAa;AAC7B,UAAA,CAAC,OAAO,YAAY;AACtB;AAAA,MACF;AAGM,YAAA,UAAU,OAAO,WAAW,KAAK;AAGvC,YAAM,WAAW,CAAC,EAAE,QAAQ,MAC1B,WAAW,OAAO;AAGpB,cAAQ,YAAY,QAAQ;AAE5B,aAAO,MAAM;AAEX,gBAAQ,eAAe,QAAQ;AAAA,MAAA;AAAA,IAEnC;AAEA;AAAA,EACC,GAAA,CAAC,SAAS,OAAO,UAAU,CAAC;AAExB,SAAA;AACT;;"}

package/dist/cjs/utils.cjs

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const theme = require("./theme.cjs");
+const useMediaQuery = require("./useMediaQuery.cjs");
+const isServer = typeof window === "undefined";
+function getStatusColor(match, theme2) {
+  return match.status === "pending" || match.isFetching ? theme2.active : match.status === "error" ? theme2.danger : match.status === "success" ? theme2.success : theme2.gray;
+}
+function getRouteStatusColor(matches, route, theme2) {
+  const found = matches.find((d) => d.routeId === route.id);
+  if (!found)
+    return theme2.gray;
+  return getStatusColor(found, theme2);
+}
+function styled(type, newStyles, queries = {}) {
+  return React.forwardRef(
+    ({ style, ...rest }, ref) => {
+      const theme$1 = theme.useTheme();
+      const mediaStyles = Object.entries(queries).reduce(
+        (current, [key, value]) => {
+          return useMediaQuery(key) ? {
+            ...current,
+            ...typeof value === "function" ? value(rest, theme$1) : value
+          } : current;
+        },
+        {}
+      );
+      return React.createElement(type, {
+        ...rest,
+        style: {
+          ...typeof newStyles === "function" ? newStyles(rest, theme$1) : newStyles,
+          ...style,
+          ...mediaStyles
+        },
+        ref
+      });
+    }
+  );
+}
+function useIsMounted() {
+  const mountedRef = React.useRef(false);
+  const isMounted = React.useCallback(() => mountedRef.current, []);
+  React[isServer ? "useEffect" : "useLayoutEffect"](() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return isMounted;
+}
+const displayValue = (value) => {
+  const name = Object.getOwnPropertyNames(Object(value));
+  const newValue = typeof value === "bigint" ? `${value.toString()}n` : value;
+  try {
+    return JSON.stringify(newValue, name);
+  } catch (e) {
+    return `unable to stringify`;
+  }
+};
+function useSafeState(initialState) {
+  const isMounted = useIsMounted();
+  const [state, setState] = React.useState(initialState);
+  const safeSetState = React.useCallback(
+    (value) => {
+      scheduleMicrotask(() => {
+        if (isMounted()) {
+          setState(value);
+        }
+      });
+    },
+    [isMounted]
+  );
+  return [state, safeSetState];
+}
+function scheduleMicrotask(callback) {
+  Promise.resolve().then(callback).catch(
+    (error) => setTimeout(() => {
+      throw error;
+    })
+  );
+}
+function multiSortBy(arr, accessors = [(d) => d]) {
+  return arr.map((d, i) => [d, i]).sort(([a, ai], [b, bi]) => {
+    for (const accessor of accessors) {
+      const ao = accessor(a);
+      const bo = accessor(b);
+      if (typeof ao === "undefined") {
+        if (typeof bo === "undefined") {
+          continue;
+        }
+        return 1;
+      }
+      if (ao === bo) {
+        continue;
+      }
+      return ao > bo ? 1 : -1;
+    }
+    return ai - bi;
+  }).map(([d]) => d);
+}
+exports.displayValue = displayValue;
+exports.getRouteStatusColor = getRouteStatusColor;
+exports.getStatusColor = getStatusColor;
+exports.isServer = isServer;
+exports.multiSortBy = multiSortBy;
+exports.styled = styled;
+exports.useIsMounted = useIsMounted;
+exports.useSafeState = useSafeState;
+//# sourceMappingURL=utils.cjs.map

package/dist/cjs/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import React from 'react'\nimport { AnyRootRoute, AnyRoute, AnyRouteMatch } from '@tanstack/react-router'\n\nimport { Theme, useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\nexport const isServer = typeof window === 'undefined'\n\ntype StyledComponent<T> = T extends 'button'\n  ? React.DetailedHTMLProps<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >\n  : T extends 'input'\n    ? React.DetailedHTMLProps<\n        React.InputHTMLAttributes<HTMLInputElement>,\n        HTMLInputElement\n      >\n    : T extends 'select'\n      ? React.DetailedHTMLProps<\n          React.SelectHTMLAttributes<HTMLSelectElement>,\n          HTMLSelectElement\n        >\n      : T extends keyof HTMLElementTagNameMap\n        ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n        : never\n\nexport function getStatusColor(match: AnyRouteMatch, theme: Theme) {\n  return match.status === 'pending' || match.isFetching\n    ? theme.active\n    : match.status === 'error'\n      ? theme.danger\n      : match.status === 'success'\n        ? theme.success\n        : theme.gray\n}\n\nexport function getRouteStatusColor(\n  matches: AnyRouteMatch[],\n  route: AnyRoute | AnyRootRoute,\n  theme: Theme,\n) {\n  const found = matches.find((d) => d.routeId === route.id)\n  if (!found) return theme.gray\n  return getStatusColor(found, theme)\n}\n\ntype Styles =\n  | React.CSSProperties\n  | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n  type: T,\n  newStyles: Styles,\n  queries: Record<string, Styles> = {},\n) {\n  return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n    ({ style, ...rest }, ref) => {\n      const theme = useTheme()\n\n      const mediaStyles = Object.entries(queries).reduce(\n        (current, [key, value]) => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          return useMediaQuery(key)\n            ? {\n                ...current,\n                ...(typeof value === 'function' ? value(rest, theme) : value),\n              }\n            : current\n        },\n        {},\n      )\n\n      return React.createElement(type, {\n        ...rest,\n        style: {\n          ...(typeof newStyles === 'function'\n            ? newStyles(rest, theme)\n            : newStyles),\n          ...style,\n          ...mediaStyles,\n        },\n        ref,\n      })\n    },\n  )\n}\n\nexport function useIsMounted() {\n  const mountedRef = React.useRef(false)\n  const isMounted = React.useCallback(() => mountedRef.current, [])\n\n  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {\n    mountedRef.current = true\n    return () => {\n      mountedRef.current = false\n    }\n  }, [])\n\n  return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n */\nexport const displayValue = (value: unknown) => {\n  const name = Object.getOwnPropertyNames(Object(value))\n  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value\n  try {\n    return JSON.stringify(newValue, name)\n  } catch (e) {\n    return `unable to stringify`\n  }\n}\n\n/**\n * This hook is a safe useState version which schedules state updates in microtasks\n * to prevent updating a component state while React is rendering different components\n * or when the component is not mounted anymore.\n */\nexport function useSafeState<T>(initialState: T): [T, (value: T) => void] {\n  const isMounted = useIsMounted()\n  const [state, setState] = React.useState(initialState)\n\n  const safeSetState = React.useCallback(\n    (value: T) => {\n      scheduleMicrotask(() => {\n        if (isMounted()) {\n          setState(value)\n        }\n      })\n    },\n    [isMounted],\n  )\n\n  return [state, safeSetState]\n}\n\n/**\n * Schedules a microtask.\n * This can be useful to schedule state updates after rendering.\n */\nfunction scheduleMicrotask(callback: () => void) {\n  Promise.resolve()\n    .then(callback)\n    .catch((error) =>\n      setTimeout(() => {\n        throw error\n      }),\n    )\n}\n\nexport function multiSortBy<T>(\n  arr: T[],\n  accessors: ((item: T) => any)[] = [(d) => d],\n): T[] {\n  return arr\n    .map((d, i) => [d, i] as const)\n    .sort(([a, ai], [b, bi]) => {\n      for (const accessor of accessors) {\n        const ao = accessor(a)\n        const bo = accessor(b)\n\n        if (typeof ao === 'undefined') {\n          if (typeof bo === 'undefined') {\n            continue\n          }\n          return 1\n        }\n\n        if (ao === bo) {\n          continue\n        }\n\n        return ao > bo ? 1 : -1\n      }\n\n      return ai - bi\n    })\n    .map(([d]) => d)\n}\n"],"names":["theme","useTheme"],"mappings":"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"}

package/dist/esm/Explorer.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+export declare const Entry: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Label: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export declare const LabelButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ExpandButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Value: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+export declare const SubEntries: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Info: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+type ExpanderProps = {
+    expanded: boolean;
+    style?: React.CSSProperties;
+};
+export declare const Expander: ({ expanded, style }: ExpanderProps) => React.JSX.Element;
+type Entry = {
+    label: string;
+};
+type RendererProps = {
+    handleEntry: HandleEntryFn;
+    label?: React.ReactNode;
+    value: unknown;
+    subEntries: Entry[];
+    subEntryPages: Entry[][];
+    type: string;
+    expanded: boolean;
+    toggleExpanded: () => void;
+    pageSize: number;
+    renderer?: Renderer;
+    filterSubEntries?: (subEntries: Property[]) => Property[];
+};
+/**
+ * Chunk elements in the array by size
+ *
+ * when the array cannot be chunked evenly by size, the last chunk will be
+ * filled with the remaining elements
+ *
+ * @example
+ * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]
+ */
+export declare function chunkArray<T>(array: T[], size: number): T[][];
+type Renderer = (props: RendererProps) => JSX.Element;
+export declare const DefaultRenderer: Renderer;
+type HandleEntryFn = (entry: Entry) => JSX.Element;
+type ExplorerProps = Partial<RendererProps> & {
+    renderer?: Renderer;
+    defaultExpanded?: true | Record<string, boolean>;
+};
+type Property = {
+    defaultExpanded?: boolean | Record<string, boolean>;
+    label: string;
+    value: unknown;
+};
+export default function Explorer({ value, defaultExpanded, renderer, pageSize, filterSubEntries, ...rest }: ExplorerProps): JSX.Element;
+export {};