@tanstack/router-devtools 1.112.17 → 1.114.0

package/dist/cjs/BaseTanStackRouterDevtoolsPanel.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseTanStackRouterDevtoolsPanel.cjs","sources":["../../src/BaseTanStackRouterDevtoolsPanel.tsx"],"sourcesContent":["import React from 'react'\nimport { clsx as cx } from 'clsx'\nimport {\n  invariant,\n  rootRouteId,\n  trimPath,\n  useRouter,\n  useRouterState,\n} from '@tanstack/react-router'\nimport { useDevtoolsOnClose } from './context'\nimport { useStyles } from './useStyles'\nimport useLocalStorage from './useLocalStorage'\nimport Explorer from './Explorer'\nimport { getRouteStatusColor, getStatusColor, multiSortBy } from './utils'\nimport { AgeTicker } from './AgeTicker'\nimport type { DevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel'\n\nimport type {\n  AnyRootRoute,\n  AnyRoute,\n  AnyRouter,\n  Route,\n} from '@tanstack/react-router'\n\nfunction Logo(props: React.HTMLAttributes<HTMLButtonElement>) {\n  const { className, ...rest } = props\n  const styles = useStyles()\n  return (\n    <button {...rest} className={cx(styles.logo, className)}>\n      <div className={styles.tanstackLogo}>TANSTACK</div>\n      <div className={styles.routerLogo}>React Router v1</div>\n    </button>\n  )\n}\n\nfunction RouteComp({\n  router,\n  route,\n  isRoot,\n  activeId,\n  setActiveId,\n}: {\n  router: AnyRouter\n  route: AnyRootRoute | AnyRoute\n  isRoot?: boolean\n  activeId: string | undefined\n  setActiveId: (id: string) => void\n}) {\n  const routerState = useRouterState({\n    router,\n  } as any)\n  const styles = useStyles()\n  const matches = routerState.pendingMatches || routerState.matches\n  const match = routerState.matches.find((d) => d.routeId === route.id)\n\n  const param = React.useMemo(() => {\n    try {\n      if (match?.params) {\n        const p = match.params\n        const r: string = route.path || trimPath(route.id)\n        if (r.startsWith('$')) {\n          const trimmed = r.slice(1)\n          if (p[trimmed]) {\n            return `(${p[trimmed]})`\n          }\n        }\n      }\n      return ''\n    } catch (error) {\n      return ''\n    }\n  }, [match, route])\n\n  return (\n    <div>\n      <div\n        role=\"button\"\n        aria-label={`Open match details for ${route.id}`}\n        onClick={() => {\n          if (match) {\n            setActiveId(activeId === route.id ? '' : route.id)\n          }\n        }}\n        className={cx(\n          styles.routesRowContainer(route.id === activeId, !!match),\n        )}\n      >\n        <div\n          className={cx(\n            styles.matchIndicator(getRouteStatusColor(matches, route)),\n          )}\n        />\n        <div className={cx(styles.routesRow(!!match))}>\n          <div>\n            <code className={styles.code}>\n              {isRoot ? rootRouteId : route.path || trimPath(route.id)}{' '}\n            </code>\n            <code className={styles.routeParamInfo}>{param}</code>\n          </div>\n          <AgeTicker match={match} router={router} />\n        </div>\n      </div>\n      {route.children?.length ? (\n        <div className={styles.nestedRouteRow(!!isRoot)}>\n          {[...(route.children as Array<Route>)]\n            .sort((a, b) => {\n              return a.rank - b.rank\n            })\n            .map((r) => (\n              <RouteComp\n                key={r.id}\n                router={router}\n                route={r}\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport const BaseTanStackRouterDevtoolsPanel = React.forwardRef<\n  HTMLDivElement,\n  DevtoolsPanelOptions\n>(function BaseTanStackRouterDevtoolsPanel(props, ref): React.ReactElement {\n  const {\n    isOpen = true,\n    setIsOpen,\n    handleDragStart,\n    router: userRouter,\n    shadowDOMTarget,\n    ...panelProps\n  } = props\n\n  const { onCloseClick } = useDevtoolsOnClose()\n  const styles = useStyles()\n  const { className, ...otherPanelProps } = panelProps\n\n  const contextRouter = useRouter({ warn: false })\n  const router = userRouter ?? contextRouter\n  const routerState = useRouterState({\n    router,\n  } as any)\n\n  invariant(\n    router,\n    'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.',\n  )\n\n  // useStore(router.__store)\n\n  const [showMatches, setShowMatches] = useLocalStorage(\n    'tanstackRouterDevtoolsShowMatches',\n    true,\n  )\n\n  const [activeId, setActiveId] = useLocalStorage(\n    'tanstackRouterDevtoolsActiveRouteId',\n    '',\n  )\n\n  const activeMatch = React.useMemo(() => {\n    const matches = [\n      ...(routerState.pendingMatches ?? []),\n      ...routerState.matches,\n      ...routerState.cachedMatches,\n    ]\n    return matches.find((d) => d.routeId === activeId || d.id === activeId)\n  }, [\n    activeId,\n    routerState.cachedMatches,\n    routerState.matches,\n    routerState.pendingMatches,\n  ])\n\n  const hasSearch = Object.keys(routerState.location.search).length\n\n  const explorerState = {\n    ...router,\n    state: router.state,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        styles.devtoolsPanel,\n        'TanStackRouterDevtoolsPanel',\n        className,\n      )}\n      {...otherPanelProps}\n    >\n      {handleDragStart ? (\n        <div className={styles.dragHandle} onMouseDown={handleDragStart}></div>\n      ) : null}\n      <button\n        className={styles.panelCloseBtn}\n        onClick={(e) => {\n          setIsOpen(false)\n          onCloseClick(e)\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"10\"\n          height=\"6\"\n          fill=\"none\"\n          viewBox=\"0 0 10 6\"\n          className={styles.panelCloseBtnIcon}\n        >\n          <path\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"1.667\"\n            d=\"M1 1l4 4 4-4\"\n          ></path>\n        </svg>\n      </button>\n      <div className={styles.firstContainer}>\n        <div className={styles.row}>\n          <Logo\n            aria-hidden\n            onClick={(e) => {\n              setIsOpen(false)\n              onCloseClick(e)\n            }}\n          />\n        </div>\n        <div className={styles.routerExplorerContainer}>\n          <div className={styles.routerExplorer}>\n            <Explorer\n              label=\"Router\"\n              value={Object.fromEntries(\n                multiSortBy(\n                  Object.keys(explorerState),\n                  (\n                    [\n                      'state',\n                      'routesById',\n                      'routesByPath',\n                      'flatRoutes',\n                      'options',\n                      'manifest',\n                    ] as const\n                  ).map((d) => (dd) => dd !== d),\n                )\n                  .map((key) => [key, (explorerState as any)[key]])\n                  .filter(\n                    (d) =>\n                      typeof d[1] !== 'function' &&\n                      ![\n                        '__store',\n                        'basepath',\n                        'injectedHtml',\n                        'subscribers',\n                        'latestLoadPromise',\n                        'navigateTimeout',\n                        'resetNextScroll',\n                        'tempLocationKey',\n                        'latestLocation',\n                        'routeTree',\n                        'history',\n                      ].includes(d[0]),\n                  ),\n              )}\n              defaultExpanded={{\n                state: {} as any,\n                context: {} as any,\n                options: {} as any,\n              }}\n              filterSubEntries={(subEntries) => {\n                return subEntries.filter((d) => typeof d.value !== 'function')\n              }}\n            />\n          </div>\n        </div>\n      </div>\n      <div className={styles.secondContainer}>\n        <div className={styles.matchesContainer}>\n          <div className={styles.detailsHeader}>\n            <span>Pathname</span>\n            {routerState.location.maskedLocation ? (\n              <div className={styles.maskedBadgeContainer}>\n                <span className={styles.maskedBadge}>masked</span>\n              </div>\n            ) : null}\n          </div>\n          <div className={styles.detailsContent}>\n            <code>{routerState.location.pathname}</code>\n            {routerState.location.maskedLocation ? (\n              <code className={styles.maskedLocation}>\n                {routerState.location.maskedLocation.pathname}\n              </code>\n            ) : null}\n          </div>\n          <div className={styles.detailsHeader}>\n            <div className={styles.routeMatchesToggle}>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowMatches(false)\n                }}\n                disabled={!showMatches}\n                className={cx(styles.routeMatchesToggleBtn(!showMatches, true))}\n              >\n                Routes\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowMatches(true)\n                }}\n                disabled={showMatches}\n                className={cx(\n                  styles.routeMatchesToggleBtn(!!showMatches, false),\n                )}\n              >\n                Matches\n              </button>\n            </div>\n            <div className={styles.detailsHeaderInfo}>\n              <div>age / staleTime / gcTime</div>\n            </div>\n          </div>\n          <div className={cx(styles.routesContainer)}>\n            {!showMatches ? (\n              <RouteComp\n                router={router}\n                route={router.routeTree}\n                isRoot\n                activeId={activeId}\n                setActiveId={setActiveId}\n              />\n            ) : (\n              <div>\n                {(routerState.pendingMatches?.length\n                  ? routerState.pendingMatches\n                  : routerState.matches\n                ).map((match, i) => {\n                  return (\n                    <div\n                      key={match.id || i}\n                      role=\"button\"\n                      aria-label={`Open match details for ${match.id}`}\n                      onClick={() =>\n                        setActiveId(activeId === match.id ? '' : match.id)\n                      }\n                      className={cx(styles.matchRow(match === activeMatch))}\n                    >\n                      <div\n                        className={cx(\n                          styles.matchIndicator(getStatusColor(match)),\n                        )}\n                      />\n\n                      <code\n                        className={styles.matchID}\n                      >{`${match.routeId === rootRouteId ? rootRouteId : match.pathname}`}</code>\n                      <AgeTicker match={match} router={router} />\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n          </div>\n        </div>\n        {routerState.cachedMatches.length ? (\n          <div className={styles.cachedMatchesContainer}>\n            <div className={styles.detailsHeader}>\n              <div>Cached Matches</div>\n              <div className={styles.detailsHeaderInfo}>\n                age / staleTime / gcTime\n              </div>\n            </div>\n            <div>\n              {routerState.cachedMatches.map((match) => {\n                return (\n                  <div\n                    key={match.id}\n                    role=\"button\"\n                    aria-label={`Open match details for ${match.id}`}\n                    onClick={() =>\n                      setActiveId(activeId === match.id ? '' : match.id)\n                    }\n                    className={cx(styles.matchRow(match === activeMatch))}\n                  >\n                    <div\n                      className={cx(\n                        styles.matchIndicator(getStatusColor(match)),\n                      )}\n                    />\n\n                    <code className={styles.matchID}>{`${match.id}`}</code>\n\n                    <AgeTicker match={match} router={router} />\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n        ) : null}\n      </div>\n      {activeMatch ? (\n        <div className={styles.thirdContainer}>\n          <div className={styles.detailsHeader}>Match Details</div>\n          <div>\n            <div className={styles.matchDetails}>\n              <div\n                className={styles.matchStatus(\n                  activeMatch.status,\n                  activeMatch.isFetching,\n                )}\n              >\n                <div>\n                  {activeMatch.status === 'success' && activeMatch.isFetching\n                    ? 'fetching'\n                    : activeMatch.status}\n                </div>\n              </div>\n              <div className={styles.matchDetailsInfoLabel}>\n                <div>ID:</div>\n                <div className={styles.matchDetailsInfo}>\n                  <code>{activeMatch.id}</code>\n                </div>\n              </div>\n              <div className={styles.matchDetailsInfoLabel}>\n                <div>State:</div>\n                <div className={styles.matchDetailsInfo}>\n                  {routerState.pendingMatches?.find(\n                    (d) => d.id === activeMatch.id,\n                  )\n                    ? 'Pending'\n                    : routerState.matches.find((d) => d.id === activeMatch.id)\n                      ? 'Active'\n                      : 'Cached'}\n                </div>\n              </div>\n              <div className={styles.matchDetailsInfoLabel}>\n                <div>Last Updated:</div>\n                <div className={styles.matchDetailsInfo}>\n                  {activeMatch.updatedAt\n                    ? new Date(activeMatch.updatedAt).toLocaleTimeString()\n                    : 'N/A'}\n                </div>\n              </div>\n            </div>\n          </div>\n          {activeMatch.loaderData ? (\n            <>\n              <div className={styles.detailsHeader}>Loader Data</div>\n              <div className={styles.detailsContent}>\n                <Explorer\n                  label=\"loaderData\"\n                  value={activeMatch.loaderData}\n                  defaultExpanded={{}}\n                />\n              </div>\n            </>\n          ) : null}\n          <div className={styles.detailsHeader}>Explorer</div>\n          <div className={styles.detailsContent}>\n            <Explorer label=\"Match\" value={activeMatch} defaultExpanded={{}} />\n          </div>\n        </div>\n      ) : null}\n      {hasSearch ? (\n        <div className={styles.fourthContainer}>\n          <div className={styles.detailsHeader}>Search Params</div>\n          <div className={styles.detailsContent}>\n            <Explorer\n              value={routerState.location.search}\n              defaultExpanded={Object.keys(routerState.location.search).reduce(\n                (obj: any, next) => {\n                  obj[next] = {}\n                  return obj\n                },\n                {},\n              )}\n            />\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n})\n"],"names":["useStyles","jsxs","cx","jsx","useRouterState","trimPath","getRouteStatusColor","rootRouteId","AgeTicker","BaseTanStackRouterDevtoolsPanel","useDevtoolsOnClose","useRouter","invariant","Explorer","multiSortBy","getStatusColor","Fragment"],"mappings":"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"}

package/dist/cjs/BaseTanStackRouterDevtoolsPanel.d.cts

@@ -1,3 +0,0 @@
-import { default as React } from 'react';
-import { DevtoolsPanelOptions } from './TanStackRouterDevtoolsPanel.cjs';
-export declare const BaseTanStackRouterDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/Explorer.cjs

@@ -1,310 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const clsx = require("clsx");
-const goober = require("goober");
-const tokens = require("./tokens.cjs");
-const utils = require("./utils.cjs");
-const context = require("./context.cjs");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const goober__namespace = /* @__PURE__ */ _interopNamespaceDefault(goober);
-const Expander = ({ expanded, style = {} }) => {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.expander, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "12",
-      height: "12",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      className: clsx.clsx(styles.expanderIcon(expanded)),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          stroke: "currentColor",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: "2",
-          d: "M9 18l6-6-6-6"
-        }
-      )
-    }
-  ) });
-};
-function chunkArray(array, size) {
-  if (size < 1) return [];
-  let i = 0;
-  const result = [];
-  while (i < array.length) {
-    result.push(array.slice(i, i + size));
-    i = i + size;
-  }
-  return result;
-}
-const DefaultRenderer = ({
-  handleEntry,
-  label,
-  value,
-  subEntries = [],
-  subEntryPages = [],
-  type,
-  expanded = false,
-  toggleExpanded,
-  pageSize,
-  renderer
-}) => {
-  const [expandedPages, setExpandedPages] = React__namespace.useState([]);
-  const [valueSnapshot, setValueSnapshot] = React__namespace.useState(void 0);
-  const styles = useStyles();
-  const refreshValueSnapshot = () => {
-    setValueSnapshot(value());
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.entry, children: subEntryPages.length ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        className: styles.expandButton,
-        onClick: () => toggleExpanded(),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Expander, { expanded }),
-          label,
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.info, children: [
-            String(type).toLowerCase() === "iterable" ? "(Iterable) " : "",
-            subEntries.length,
-            " ",
-            subEntries.length > 1 ? `items` : `item`
-          ] })
-        ]
-      }
-    ),
-    expanded ? subEntryPages.length === 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.subEntries, children: subEntries.map((entry, index) => handleEntry(entry)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.subEntries, children: subEntryPages.map((entries, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.entry, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            className: clsx.clsx(styles.labelButton, "labelButton"),
-            onClick: () => setExpandedPages(
-              (old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Expander, { expanded: expandedPages.includes(index) }),
-              " ",
-              "[",
-              index * pageSize,
-              " ...",
-              " ",
-              index * pageSize + pageSize - 1,
-              "]"
-            ]
-          }
-        ),
-        expandedPages.includes(index) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.subEntries, children: entries.map((entry) => handleEntry(entry)) }) : null
-      ] }) }, index);
-    }) }) : null
-  ] }) : type === "function" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    Explorer,
-    {
-      renderer,
-      label: /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: refreshValueSnapshot,
-          className: styles.refreshValueBtn,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-            " 🔄",
-            " "
-          ]
-        }
-      ),
-      value: valueSnapshot,
-      defaultExpanded: {}
-    }
-  ) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      label,
-      ":"
-    ] }),
-    " ",
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.value, children: utils.displayValue(value) })
-  ] }) });
-};
-function isIterable(x) {
-  return Symbol.iterator in x;
-}
-function Explorer({
-  value,
-  defaultExpanded,
-  renderer = DefaultRenderer,
-  pageSize = 100,
-  filterSubEntries,
-  ...rest
-}) {
-  const [expanded, setExpanded] = React__namespace.useState(Boolean(defaultExpanded));
-  const toggleExpanded = React__namespace.useCallback(() => setExpanded((old) => !old), []);
-  let type = typeof value;
-  let subEntries = [];
-  const makeProperty = (sub) => {
-    const subDefaultExpanded = defaultExpanded === true ? { [sub.label]: true } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-    return {
-      ...sub,
-      defaultExpanded: subDefaultExpanded
-    };
-  };
-  if (Array.isArray(value)) {
-    type = "array";
-    subEntries = value.map(
-      (d, i) => makeProperty({
-        label: i.toString(),
-        value: d
-      })
-    );
-  } else if (value !== null && typeof value === "object" && isIterable(value) && typeof value[Symbol.iterator] === "function") {
-    type = "Iterable";
-    subEntries = Array.from(
-      value,
-      (val, i) => makeProperty({
-        label: i.toString(),
-        value: val
-      })
-    );
-  } else if (typeof value === "object" && value !== null) {
-    type = "object";
-    subEntries = Object.entries(value).map(
-      ([key, val]) => makeProperty({
-        label: key,
-        value: val
-      })
-    );
-  }
-  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries;
-  const subEntryPages = chunkArray(subEntries, pageSize);
-  return renderer({
-    handleEntry: (entry) => /* @__PURE__ */ jsxRuntime.jsx(
-      Explorer,
-      {
-        value,
-        renderer,
-        filterSubEntries,
-        ...rest,
-        ...entry
-      },
-      entry.label
-    ),
-    type,
-    subEntries,
-    subEntryPages,
-    value,
-    expanded,
-    toggleExpanded,
-    pageSize,
-    ...rest
-  });
-}
-const stylesFactory = (shadowDOMTarget) => {
-  const { colors, font, size } = tokens.tokens;
-  const { fontFamily, lineHeight, size: fontSize } = font;
-  const css = shadowDOMTarget ? goober__namespace.css.bind({ target: shadowDOMTarget }) : goober__namespace.css;
-  return {
-    entry: css`
-      font-family: ${fontFamily.mono};
-      font-size: ${fontSize.xs};
-      line-height: ${lineHeight.sm};
-      outline: none;
-      word-break: break-word;
-    `,
-    labelButton: css`
-      cursor: pointer;
-      color: inherit;
-      font: inherit;
-      outline: inherit;
-      background: transparent;
-      border: none;
-      padding: 0;
-    `,
-    expander: css`
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: ${size[3]};
-      height: ${size[3]};
-      padding-left: 3px;
-      box-sizing: content-box;
-    `,
-    expanderIcon: (expanded) => {
-      if (expanded) {
-        return css`
-          transform: rotate(90deg);
-          transition: transform 0.1s ease;
-        `;
-      }
-      return css`
-        transform: rotate(0deg);
-        transition: transform 0.1s ease;
-      `;
-    },
-    expandButton: css`
-      display: flex;
-      gap: ${size[1]};
-      align-items: center;
-      cursor: pointer;
-      color: inherit;
-      font: inherit;
-      outline: inherit;
-      background: transparent;
-      border: none;
-      padding: 0;
-    `,
-    value: css`
-      color: ${colors.purple[400]};
-    `,
-    subEntries: css`
-      margin-left: ${size[2]};
-      padding-left: ${size[2]};
-      border-left: 2px solid ${colors.darkGray[400]};
-    `,
-    info: css`
-      color: ${colors.gray[500]};
-      font-size: ${fontSize["2xs"]};
-      padding-left: ${size[1]};
-    `,
-    refreshValueBtn: css`
-      appearance: none;
-      border: 0;
-      cursor: pointer;
-      background: transparent;
-      color: inherit;
-      padding: 0;
-      font-family: ${fontFamily.mono};
-      font-size: ${fontSize.xs};
-    `
-  };
-};
-function useStyles() {
-  const shadowDomTarget = React__namespace.useContext(context.ShadowDomTargetContext);
-  const [_styles] = React__namespace.useState(() => stylesFactory(shadowDomTarget));
-  return _styles;
-}
-exports.DefaultRenderer = DefaultRenderer;
-exports.Expander = Expander;
-exports.chunkArray = chunkArray;
-exports.default = Explorer;
-//# sourceMappingURL=Explorer.cjs.map

package/dist/cjs/Explorer.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Explorer.cjs","sources":["../../src/Explorer.tsx"],"sourcesContent":["import * as React from 'react'\nimport { clsx as cx } from 'clsx'\nimport * as goober from 'goober'\nimport { tokens } from './tokens'\nimport { displayValue } from './utils'\nimport { ShadowDomTargetContext } from './context'\n\ntype ExpanderProps = {\n  expanded: boolean\n  style?: React.CSSProperties\n}\n\nexport const Expander = ({ expanded, style = {} }: ExpanderProps) => {\n  const styles = useStyles()\n  return (\n    <span className={styles.expander}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"12\"\n        height=\"12\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        className={cx(styles.expanderIcon(expanded))}\n      >\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          d=\"M9 18l6-6-6-6\"\n        ></path>\n      </svg>\n    </span>\n  )\n}\n\ntype Entry = {\n  label: string\n}\n\ntype RendererProps = {\n  handleEntry: HandleEntryFn\n  label?: React.ReactNode\n  value: unknown\n  subEntries: Array<Entry>\n  subEntryPages: Array<Array<Entry>>\n  type: string\n  expanded: boolean\n  toggleExpanded: () => void\n  pageSize: number\n  renderer?: Renderer\n  filterSubEntries?: (subEntries: Array<Property>) => Array<Property>\n}\n\n/**\n * Chunk elements in the array by size\n *\n * when the array cannot be chunked evenly by size, the last chunk will be\n * filled with the remaining elements\n *\n * @example\n * chunkArray(['a','b', 'c', 'd', 'e'], 2) // returns [['a','b'], ['c', 'd'], ['e']]\n */\nexport function chunkArray<T>(array: Array<T>, size: number): Array<Array<T>> {\n  if (size < 1) return []\n  let i = 0\n  const result: Array<Array<T>> = []\n  while (i < array.length) {\n    result.push(array.slice(i, i + size))\n    i = i + size\n  }\n  return result\n}\n\ntype Renderer = (props: RendererProps) => React.JSX.Element\n\nexport const DefaultRenderer: Renderer = ({\n  handleEntry,\n  label,\n  value,\n  subEntries = [],\n  subEntryPages = [],\n  type,\n  expanded = false,\n  toggleExpanded,\n  pageSize,\n  renderer,\n}) => {\n  const [expandedPages, setExpandedPages] = React.useState<Array<number>>([])\n  const [valueSnapshot, setValueSnapshot] = React.useState(undefined)\n  const styles = useStyles()\n\n  const refreshValueSnapshot = () => {\n    setValueSnapshot((value as () => any)())\n  }\n\n  return (\n    <div className={styles.entry}>\n      {subEntryPages.length ? (\n        <>\n          <button\n            className={styles.expandButton}\n            onClick={() => toggleExpanded()}\n          >\n            <Expander expanded={expanded} />\n            {label}\n            <span className={styles.info}>\n              {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}\n              {subEntries.length} {subEntries.length > 1 ? `items` : `item`}\n            </span>\n          </button>\n          {expanded ? (\n            subEntryPages.length === 1 ? (\n              <div className={styles.subEntries}>\n                {subEntries.map((entry, index) => handleEntry(entry))}\n              </div>\n            ) : (\n              <div className={styles.subEntries}>\n                {subEntryPages.map((entries, index) => {\n                  return (\n                    <div key={index}>\n                      <div className={styles.entry}>\n                        <button\n                          className={cx(styles.labelButton, 'labelButton')}\n                          onClick={() =>\n                            setExpandedPages((old) =>\n                              old.includes(index)\n                                ? old.filter((d) => d !== index)\n                                : [...old, index],\n                            )\n                          }\n                        >\n                          <Expander expanded={expandedPages.includes(index)} />{' '}\n                          [{index * pageSize} ...{' '}\n                          {index * pageSize + pageSize - 1}]\n                        </button>\n                        {expandedPages.includes(index) ? (\n                          <div className={styles.subEntries}>\n                            {entries.map((entry) => handleEntry(entry))}\n                          </div>\n                        ) : null}\n                      </div>\n                    </div>\n                  )\n                })}\n              </div>\n            )\n          ) : null}\n        </>\n      ) : type === 'function' ? (\n        <>\n          <Explorer\n            renderer={renderer}\n            label={\n              <button\n                onClick={refreshValueSnapshot}\n                className={styles.refreshValueBtn}\n              >\n                <span>{label}</span> 🔄{' '}\n              </button>\n            }\n            value={valueSnapshot}\n            defaultExpanded={{}}\n          />\n        </>\n      ) : (\n        <>\n          <span>{label}:</span>{' '}\n          <span className={styles.value}>{displayValue(value)}</span>\n        </>\n      )}\n    </div>\n  )\n}\n\ntype HandleEntryFn = (entry: Entry) => React.ReactNode\n\ntype ExplorerProps = Partial<RendererProps> & {\n  renderer?: Renderer\n  defaultExpanded?: true | Record<string, boolean>\n}\n\ntype Property = {\n  defaultExpanded?: boolean | Record<string, boolean>\n  label: string\n  value: unknown\n}\n\nfunction isIterable(x: any): x is Iterable<unknown> {\n  return Symbol.iterator in x\n}\n\nexport default function Explorer({\n  value,\n  defaultExpanded,\n  renderer = DefaultRenderer,\n  pageSize = 100,\n  filterSubEntries,\n  ...rest\n}: ExplorerProps) {\n  const [expanded, setExpanded] = React.useState(Boolean(defaultExpanded))\n  const toggleExpanded = React.useCallback(() => setExpanded((old) => !old), [])\n\n  let type: string = typeof value\n  let subEntries: Array<Property> = []\n\n  const makeProperty = (sub: { label: string; value: unknown }): Property => {\n    const subDefaultExpanded =\n      defaultExpanded === true\n        ? { [sub.label]: true }\n        : defaultExpanded?.[sub.label]\n    return {\n      ...sub,\n      defaultExpanded: subDefaultExpanded,\n    }\n  }\n\n  if (Array.isArray(value)) {\n    type = 'array'\n    subEntries = value.map((d, i) =>\n      makeProperty({\n        label: i.toString(),\n        value: d,\n      }),\n    )\n  } else if (\n    value !== null &&\n    typeof value === 'object' &&\n    isIterable(value) &&\n    typeof value[Symbol.iterator] === 'function'\n  ) {\n    type = 'Iterable'\n    subEntries = Array.from(value, (val, i) =>\n      makeProperty({\n        label: i.toString(),\n        value: val,\n      }),\n    )\n  } else if (typeof value === 'object' && value !== null) {\n    type = 'object'\n    subEntries = Object.entries(value).map(([key, val]) =>\n      makeProperty({\n        label: key,\n        value: val,\n      }),\n    )\n  }\n\n  subEntries = filterSubEntries ? filterSubEntries(subEntries) : subEntries\n\n  const subEntryPages = chunkArray(subEntries, pageSize)\n\n  return renderer({\n    handleEntry: (entry) => (\n      <Explorer\n        key={entry.label}\n        value={value}\n        renderer={renderer}\n        filterSubEntries={filterSubEntries}\n        {...rest}\n        {...entry}\n      />\n    ),\n    type,\n    subEntries,\n    subEntryPages,\n    value,\n    expanded,\n    toggleExpanded,\n    pageSize,\n    ...rest,\n  })\n}\n\nconst stylesFactory = (shadowDOMTarget?: ShadowRoot) => {\n  const { colors, font, size, alpha, shadow, border } = tokens\n  const { fontFamily, lineHeight, size: fontSize } = font\n  const css = shadowDOMTarget\n    ? goober.css.bind({ target: shadowDOMTarget })\n    : goober.css\n\n  return {\n    entry: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      line-height: ${lineHeight.sm};\n      outline: none;\n      word-break: break-word;\n    `,\n    labelButton: css`\n      cursor: pointer;\n      color: inherit;\n      font: inherit;\n      outline: inherit;\n      background: transparent;\n      border: none;\n      padding: 0;\n    `,\n    expander: css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: ${size[3]};\n      height: ${size[3]};\n      padding-left: 3px;\n      box-sizing: content-box;\n    `,\n    expanderIcon: (expanded: boolean) => {\n      if (expanded) {\n        return css`\n          transform: rotate(90deg);\n          transition: transform 0.1s ease;\n        `\n      }\n      return css`\n        transform: rotate(0deg);\n        transition: transform 0.1s ease;\n      `\n    },\n    expandButton: css`\n      display: flex;\n      gap: ${size[1]};\n      align-items: center;\n      cursor: pointer;\n      color: inherit;\n      font: inherit;\n      outline: inherit;\n      background: transparent;\n      border: none;\n      padding: 0;\n    `,\n    value: css`\n      color: ${colors.purple[400]};\n    `,\n    subEntries: css`\n      margin-left: ${size[2]};\n      padding-left: ${size[2]};\n      border-left: 2px solid ${colors.darkGray[400]};\n    `,\n    info: css`\n      color: ${colors.gray[500]};\n      font-size: ${fontSize['2xs']};\n      padding-left: ${size[1]};\n    `,\n    refreshValueBtn: css`\n      appearance: none;\n      border: 0;\n      cursor: pointer;\n      background: transparent;\n      color: inherit;\n      padding: 0;\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n    `,\n  }\n}\n\nfunction useStyles() {\n  const shadowDomTarget = React.useContext(ShadowDomTargetContext)\n  const [_styles] = React.useState(() => stylesFactory(shadowDomTarget))\n  return _styles\n}\n"],"names":["jsx","cx","React","jsxs","Fragment","displayValue","tokens","goober","ShadowDomTargetContext"],"mappings":"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"}

package/dist/cjs/Explorer.d.cts

@@ -1,46 +0,0 @@
-import * as React from 'react';
-type ExpanderProps = {
-    expanded: boolean;
-    style?: React.CSSProperties;
-};
-export declare const Expander: ({ expanded, style }: ExpanderProps) => import("react/jsx-runtime").JSX.Element;
-type Entry = {
-    label: string;
-};
-type RendererProps = {
-    handleEntry: HandleEntryFn;
-    label?: React.ReactNode;
-    value: unknown;
-    subEntries: Array<Entry>;
-    subEntryPages: Array<Array<Entry>>;
-    type: string;
-    expanded: boolean;
-    toggleExpanded: () => void;
-    pageSize: number;
-    renderer?: Renderer;
-    filterSubEntries?: (subEntries: Array<Property>) => Array<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: Array<T>, size: number): Array<Array<T>>;
-type Renderer = (props: RendererProps) => React.JSX.Element;
-export declare const DefaultRenderer: Renderer;
-type HandleEntryFn = (entry: Entry) => React.ReactNode;
-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): React.JSX.Element;
-export {};

package/dist/cjs/TanStackRouterDevtools.cjs

@@ -1,177 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const clsx = require("clsx");
-const React = require("react");
-const context = require("./context.cjs");
-const utils = require("./utils.cjs");
-const BaseTanStackRouterDevtoolsPanel = require("./BaseTanStackRouterDevtoolsPanel.cjs");
-const useLocalStorage = require("./useLocalStorage.cjs");
-const logo = require("./logo.cjs");
-const useStyles = require("./useStyles.cjs");
-function TanStackRouterDevtools(props) {
-  const { shadowDOMTarget } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(context.ShadowDomTargetContext.Provider, { value: shadowDOMTarget, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingTanStackRouterDevtools, { ...props }) });
-}
-function FloatingTanStackRouterDevtools({
-  initialIsOpen,
-  panelProps = {},
-  closeButtonProps = {},
-  toggleButtonProps = {},
-  position = "bottom-left",
-  containerElement: Container = "footer",
-  router,
-  shadowDOMTarget
-}) {
-  const [rootEl, setRootEl] = React.useState();
-  const panelRef = React.useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage(
-    "tanstackRouterDevtoolsOpen",
-    initialIsOpen
-  );
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage(
-    "tanstackRouterDevtoolsHeight",
-    null
-  );
-  const [isResolvedOpen, setIsResolvedOpen] = utils.useSafeState(false);
-  const [isResizing, setIsResizing] = utils.useSafeState(false);
-  const isMounted = utils.useIsMounted();
-  const styles = useStyles.useStyles();
-  const handleDragStart = (panelElement, startEvent) => {
-    if (startEvent.button !== 0) return;
-    setIsResizing(true);
-    const dragInfo = {
-      originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
-      pageY: startEvent.pageY
-    };
-    const run = (moveEvent) => {
-      const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = dragInfo.originalHeight + delta;
-      setDevtoolsHeight(newHeight);
-      if (newHeight < 70) {
-        setIsOpen(false);
-      } else {
-        setIsOpen(true);
-      }
-    };
-    const unsub = () => {
-      setIsResizing(false);
-      document.removeEventListener("mousemove", run);
-      document.removeEventListener("mouseUp", unsub);
-    };
-    document.addEventListener("mousemove", run);
-    document.addEventListener("mouseup", unsub);
-  };
-  const isButtonClosed = isOpen ?? false;
-  React.useEffect(() => {
-    setIsResolvedOpen(isOpen ?? false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
-  React.useEffect(() => {
-    var _a;
-    if (isResolvedOpen) {
-      const previousValue = (_a = rootEl == null ? void 0 : rootEl.parentElement) == null ? void 0 : _a.style.paddingBottom;
-      const run = () => {
-        var _a2;
-        const containerHeight = (_a2 = panelRef.current) == null ? void 0 : _a2.getBoundingClientRect().height;
-        if (rootEl == null ? void 0 : rootEl.parentElement) {
-          rootEl.parentElement.style.paddingBottom = `${containerHeight}px`;
-        }
-      };
-      run();
-      if (typeof window !== "undefined") {
-        window.addEventListener("resize", run);
-        return () => {
-          window.removeEventListener("resize", run);
-          if ((rootEl == null ? void 0 : rootEl.parentElement) && typeof previousValue === "string") {
-            rootEl.parentElement.style.paddingBottom = previousValue;
-          }
-        };
-      }
-    }
-    return;
-  }, [isResolvedOpen, rootEl == null ? void 0 : rootEl.parentElement]);
-  React.useEffect(() => {
-    if (rootEl) {
-      const el = rootEl;
-      const fontSize = getComputedStyle(el).fontSize;
-      el.style.setProperty("--tsrd-font-size", fontSize);
-    }
-  }, [rootEl]);
-  const { style: panelStyle = {}, ...otherPanelProps } = panelProps;
-  const {
-    style: closeButtonStyle = {},
-    onClick: onCloseClick,
-    ...otherCloseButtonProps
-  } = closeButtonProps;
-  const {
-    onClick: onToggleClick,
-    className: toggleButtonClassName,
-    ...otherToggleButtonProps
-  } = toggleButtonProps;
-  if (!isMounted) return null;
-  const resolvedHeight = devtoolsHeight ?? 500;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { ref: setRootEl, className: "TanStackRouterDevtools", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      context.DevtoolsOnCloseContext.Provider,
-      {
-        value: {
-          onCloseClick: onCloseClick ?? (() => {
-          })
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          BaseTanStackRouterDevtoolsPanel.BaseTanStackRouterDevtoolsPanel,
-          {
-            ref: panelRef,
-            ...otherPanelProps,
-            router,
-            className: clsx.clsx(
-              styles.devtoolsPanelContainer,
-              styles.devtoolsPanelContainerVisibility(!!isOpen),
-              styles.devtoolsPanelContainerResizing(isResizing),
-              styles.devtoolsPanelContainerAnimation(
-                isResolvedOpen,
-                resolvedHeight + 16
-              )
-            ),
-            style: {
-              height: resolvedHeight,
-              ...panelStyle
-            },
-            isOpen: isResolvedOpen,
-            setIsOpen,
-            handleDragStart: (e) => handleDragStart(panelRef.current, e),
-            shadowDOMTarget
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        ...otherToggleButtonProps,
-        "aria-label": "Open TanStack Router Devtools",
-        onClick: (e) => {
-          setIsOpen(true);
-          onToggleClick && onToggleClick(e);
-        },
-        className: clsx.clsx(
-          styles.mainCloseBtn,
-          styles.mainCloseBtnPosition(position),
-          styles.mainCloseBtnAnimation(!isButtonClosed),
-          toggleButtonClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mainCloseBtnIconContainer, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnIconOuter, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(logo.TanStackLogo, {}) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mainCloseBtnDivider, children: "-" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.routerLogoCloseButton, children: "TanStack Router" })
-        ]
-      }
-    )
-  ] });
-}
-exports.TanStackRouterDevtools = TanStackRouterDevtools;
-//# sourceMappingURL=TanStackRouterDevtools.cjs.map

package/dist/cjs/TanStackRouterDevtools.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TanStackRouterDevtools.cjs","sources":["../../src/TanStackRouterDevtools.tsx"],"sourcesContent":["import { clsx as cx } from 'clsx'\nimport React from 'react'\nimport { DevtoolsOnCloseContext, ShadowDomTargetContext } from './context'\nimport { useIsMounted, useSafeState } from './utils'\nimport { BaseTanStackRouterDevtoolsPanel } from './BaseTanStackRouterDevtoolsPanel'\nimport useLocalStorage from './useLocalStorage'\nimport { TanStackLogo } from './logo'\nimport { useStyles } from './useStyles'\nimport type { AnyRouter } from '@tanstack/react-router'\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   * Use this to attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\nexport function TanStackRouterDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const { shadowDOMTarget } = props\n\n  return (\n    <ShadowDomTargetContext.Provider value={shadowDOMTarget}>\n      <FloatingTanStackRouterDevtools {...props} />\n    </ShadowDomTargetContext.Provider>\n  )\n}\n\nfunction FloatingTanStackRouterDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'footer',\n  router,\n  shadowDOMTarget,\n}: DevtoolsOptions): React.ReactElement | null {\n  const [rootEl, setRootEl] = React.useState<HTMLDivElement>()\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  const styles = useStyles()\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  const isButtonClosed = isOpen ?? false\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  React.useEffect(() => {\n    if (isResolvedOpen) {\n      const previousValue = rootEl?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        const containerHeight = panelRef.current?.getBoundingClientRect().height\n        if (rootEl?.parentElement) {\n          rootEl.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 (rootEl?.parentElement && typeof previousValue === 'string') {\n            rootEl.parentElement.style.paddingBottom = previousValue\n          }\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen, rootEl?.parentElement])\n\n  React.useEffect(() => {\n    if (rootEl) {\n      const el = rootEl\n      const fontSize = getComputedStyle(el).fontSize\n      el.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  }, [rootEl])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: closeButtonStyle = {},\n    onClick: onCloseClick,\n    ...otherCloseButtonProps\n  } = closeButtonProps\n\n  const {\n    onClick: onToggleClick,\n    className: toggleButtonClassName,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // Do not render on the server\n  if (!isMounted) return null\n\n  const resolvedHeight = devtoolsHeight ?? 500\n\n  return (\n    <Container ref={setRootEl} className=\"TanStackRouterDevtools\">\n      <DevtoolsOnCloseContext.Provider\n        value={{\n          onCloseClick: onCloseClick ?? (() => {}),\n        }}\n      >\n        <BaseTanStackRouterDevtoolsPanel\n          ref={panelRef as any}\n          {...otherPanelProps}\n          router={router}\n          className={cx(\n            styles.devtoolsPanelContainer,\n            styles.devtoolsPanelContainerVisibility(!!isOpen),\n            styles.devtoolsPanelContainerResizing(isResizing),\n            styles.devtoolsPanelContainerAnimation(\n              isResolvedOpen,\n              resolvedHeight + 16,\n            ),\n          )}\n          style={{\n            height: resolvedHeight,\n            ...panelStyle,\n          }}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          handleDragStart={(e) => handleDragStart(panelRef.current, e)}\n          shadowDOMTarget={shadowDOMTarget}\n        />\n      </DevtoolsOnCloseContext.Provider>\n\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        className={cx(\n          styles.mainCloseBtn,\n          styles.mainCloseBtnPosition(position),\n          styles.mainCloseBtnAnimation(!isButtonClosed),\n          toggleButtonClassName,\n        )}\n      >\n        <div className={styles.mainCloseBtnIconContainer}>\n          <div className={styles.mainCloseBtnIconOuter}>\n            <TanStackLogo />\n          </div>\n          <div className={styles.mainCloseBtnIconInner}>\n            <TanStackLogo />\n          </div>\n        </div>\n        <div className={styles.mainCloseBtnDivider}>-</div>\n        <div className={styles.routerLogoCloseButton}>TanStack Router</div>\n      </button>\n    </Container>\n  )\n}\n"],"names":["jsx","ShadowDomTargetContext","useSafeState","useIsMounted","useStyles","_a","jsxs","DevtoolsOnCloseContext","BaseTanStackRouterDevtoolsPanel","cx","TanStackLogo"],"mappings":";;;;;;;;;;;AAyDO,SAAS,uBACd,OAC2B;AACrB,QAAA,EAAE,oBAAoB;AAG1B,SAAAA,2BAAA,IAACC,QAAuB,uBAAA,UAAvB,EAAgC,OAAO,iBACtC,UAACD,2BAAAA,IAAA,gCAAA,EAAgC,GAAG,MAAA,CAAO,EAC7C,CAAA;AAEJ;AAEA,SAAS,+BAA+B;AAAA,EACtC;AAAA,EACA,aAAa,CAAC;AAAA,EACd,mBAAmB,CAAC;AAAA,EACpB,oBAAoB,CAAC;AAAA,EACrB,WAAW;AAAA,EACX,kBAAkB,YAAY;AAAA,EAC9B;AAAA,EACA;AACF,GAA+C;AAC7C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAyB;AACrD,QAAA,WAAW,MAAM,OAAuB,IAAI;AAC5C,QAAA,CAAC,QAAQ,SAAS,IAAI;AAAA,IAC1B;AAAA,IACA;AAAA,EACF;AACM,QAAA,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,gBAAgB,iBAAiB,IAAIE,MAAAA,aAAa,KAAK;AAC9D,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,aAAa,KAAK;AACtD,QAAM,YAAYC,MAAAA,aAAa;AAC/B,QAAM,SAASC,UAAAA,UAAU;AAEnB,QAAA,kBAAkB,CACtB,cACA,eACG;AACC,QAAA,WAAW,WAAW,EAAG;AAE7B,kBAAc,IAAI;AAElB,UAAM,WAAW;AAAA,MACf,iBAAgB,6CAAc,wBAAwB,WAAU;AAAA,MAChE,OAAO,WAAW;AAAA,IACpB;AAEM,UAAA,MAAM,CAAC,cAA0B;AAC/B,YAAA,QAAQ,SAAS,QAAQ,UAAU;AACnC,YAAA,YAAY,SAAS,iBAAiB;AAE5C,wBAAkB,SAAS;AAE3B,UAAI,YAAY,IAAI;AAClB,kBAAU,KAAK;AAAA,MAAA,OACV;AACL,kBAAU,IAAI;AAAA,MAAA;AAAA,IAElB;AAEA,UAAM,QAAQ,MAAM;AAClB,oBAAc,KAAK;AACV,eAAA,oBAAoB,aAAa,GAAG;AACpC,eAAA,oBAAoB,WAAW,KAAK;AAAA,IAC/C;AAES,aAAA,iBAAiB,aAAa,GAAG;AACjC,aAAA,iBAAiB,WAAW,KAAK;AAAA,EAC5C;AAEA,QAAM,iBAAiB,UAAU;AAEjC,QAAM,UAAU,MAAM;AACpB,sBAAkB,UAAU,KAAK;AAAA,EAChC,GAAA,CAAC,QAAQ,gBAAgB,iBAAiB,CAAC;AAE9C,QAAM,UAAU,MAAM;;AACpB,QAAI,gBAAgB;AACZ,YAAA,iBAAgB,sCAAQ,kBAAR,mBAAuB,MAAM;AAEnD,YAAM,MAAM,MAAM;;AAChB,cAAM,mBAAkBC,MAAA,SAAS,YAAT,gBAAAA,IAAkB,wBAAwB;AAClE,YAAI,iCAAQ,eAAe;AACzB,iBAAO,cAAc,MAAM,gBAAgB,GAAG,eAAe;AAAA,QAAA;AAAA,MAEjE;AAEI,UAAA;AAEA,UAAA,OAAO,WAAW,aAAa;AAC1B,eAAA,iBAAiB,UAAU,GAAG;AAErC,eAAO,MAAM;AACJ,iBAAA,oBAAoB,UAAU,GAAG;AACxC,eAAI,iCAAQ,kBAAiB,OAAO,kBAAkB,UAAU;AACvD,mBAAA,cAAc,MAAM,gBAAgB;AAAA,UAAA;AAAA,QAE/C;AAAA,MAAA;AAAA,IACF;AAEF;AAAA,EACC,GAAA,CAAC,gBAAgB,iCAAQ,aAAa,CAAC;AAE1C,QAAM,UAAU,MAAM;AACpB,QAAI,QAAQ;AACV,YAAM,KAAK;AACL,YAAA,WAAW,iBAAiB,EAAE,EAAE;AACnC,SAAA,MAAM,YAAY,oBAAoB,QAAQ;AAAA,IAAA;AAAA,EACnD,GACC,CAAC,MAAM,CAAC;AAEX,QAAM,EAAE,OAAO,aAAa,CAAI,GAAA,GAAG,gBAAoB,IAAA;AAEjD,QAAA;AAAA,IACJ,OAAO,mBAAmB,CAAC;AAAA,IAC3B,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD;AAEE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD;AAGA,MAAA,CAAC,UAAkB,QAAA;AAEvB,QAAM,iBAAiB,kBAAkB;AAEzC,SACGC,2BAAAA,KAAA,WAAA,EAAU,KAAK,WAAW,WAAU,0BACnC,UAAA;AAAA,IAAAN,2BAAA;AAAA,MAACO,QAAAA,uBAAuB;AAAA,MAAvB;AAAA,QACC,OAAO;AAAA,UACL,cAAc,iBAAiB,MAAM;AAAA,UAAC;AAAA,QACxC;AAAA,QAEA,UAAAP,2BAAA;AAAA,UAACQ,gCAAA;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACJ,GAAG;AAAA,YACJ;AAAA,YACA,WAAWC,KAAA;AAAA,cACT,OAAO;AAAA,cACP,OAAO,iCAAiC,CAAC,CAAC,MAAM;AAAA,cAChD,OAAO,+BAA+B,UAAU;AAAA,cAChD,OAAO;AAAA,gBACL;AAAA,gBACA,iBAAiB;AAAA,cAAA;AAAA,YAErB;AAAA,YACA,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,GAAG;AAAA,YACL;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA,iBAAiB,CAAC,MAAM,gBAAgB,SAAS,SAAS,CAAC;AAAA,YAC3D;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEAH,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,cAAW;AAAA,QACX,SAAS,CAAC,MAAM;AACd,oBAAU,IAAI;AACd,2BAAiB,cAAc,CAAC;AAAA,QAClC;AAAA,QACA,WAAWG,KAAA;AAAA,UACT,OAAO;AAAA,UACP,OAAO,qBAAqB,QAAQ;AAAA,UACpC,OAAO,sBAAsB,CAAC,cAAc;AAAA,UAC5C;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAACH,2BAAA,KAAA,OAAA,EAAI,WAAW,OAAO,2BACrB,UAAA;AAAA,YAAAN,2BAAAA,IAAC,SAAI,WAAW,OAAO,uBACrB,UAAAA,+BAACU,KAAAA,eAAa,CAAA,GAChB;AAAA,2CACC,OAAI,EAAA,WAAW,OAAO,uBACrB,UAAAV,2BAAA,IAACU,qBAAa,EAChB,CAAA;AAAA,UAAA,GACF;AAAA,UACCV,2BAAA,IAAA,OAAA,EAAI,WAAW,OAAO,qBAAqB,UAAC,KAAA;AAAA,UAC5CA,2BAAA,IAAA,OAAA,EAAI,WAAW,OAAO,uBAAuB,UAAe,kBAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/D,GACF;AAEJ;;"}