@tanstack/router-devtools 0.0.1-alpha.1 → 0.0.1-beta.86

package/build/cjs/packages/react-router-devtools/src/devtools.js

@@ -1,654 +0,0 @@
-/**
- * react-router-devtools
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var reactRouter = require('@tanstack/react-router');
-var useLocalStorage = require('./useLocalStorage.js');
-var utils = require('./utils.js');
-var styledComponents = require('./styledComponents.js');
-var theme = require('./theme.js');
-var Explorer = require('./Explorer.js');
-var Logo = require('./Logo.js');
-var index = require('../../../node_modules/date-fns/esm/formatDistanceStrict/index.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const _excluded = ["style"],
-      _excluded2 = ["style", "onClick"],
-      _excluded3 = ["style", "onClick"],
-      _excluded4 = ["isOpen", "setIsOpen", "handleDragStart", "useRouter"],
-      _excluded5 = ["listeners", "buildLocation", "mount", "update", "buildNext", "navigate", "cancelMatches", "loadLocation", "cleanPreloadCache", "loadRoute", "matchRoutes", "loadMatches", "invalidateRoute", "resolvePath", "matchRoute", "buildLink", "__experimental__createSnapshot", "destroy"],
-      _excluded6 = ["cancel", "load", "router", "Link", "MatchRoute", "buildLink", "linkProps", "matchRoute", "navigate"];
-const isServer = typeof window === 'undefined';
-function TanStackRouterDevtools(_ref) {
-  let {
-    initialIsOpen,
-    panelProps = {},
-    closeButtonProps = {},
-    toggleButtonProps = {},
-    position = 'bottom-left',
-    containerElement: Container = 'footer',
-    useRouter: useRouterImpl = reactRouter.useRouter
-  } = _ref;
-  const rootRef = React__default["default"].useRef(null);
-  const panelRef = React__default["default"].useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage["default"]('tanstackRouterDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('tanstackRouterDevtoolsHeight', null);
-  const [isResolvedOpen, setIsResolvedOpen] = utils.useSafeState(false);
-  const [isResizing, setIsResizing] = utils.useSafeState(false);
-  const isMounted = utils.useIsMounted();
-
-  const _handleDragStart = (panelElement, startEvent) => {
-    var _panelElement$getBoun;
-
-    if (startEvent.button !== 0) return; // Only allow left click for drag
-
-    setIsResizing(true);
-    const dragInfo = {
-      originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
-      pageY: startEvent.pageY
-    };
-
-    const run = moveEvent => {
-      const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = (dragInfo == null ? void 0 : dragInfo.originalHeight) + delta;
-      setDevtoolsHeight(newHeight);
-
-      if (newHeight < 70) {
-        setIsOpen(false);
-      } else {
-        setIsOpen(true);
-      }
-    };
-
-    const unsub = () => {
-      setIsResizing(false);
-      document.removeEventListener('mousemove', run);
-      document.removeEventListener('mouseUp', unsub);
-    };
-
-    document.addEventListener('mousemove', run);
-    document.addEventListener('mouseup', unsub);
-  };
-
-  React__default["default"].useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
-
-  React__default["default"].useEffect(() => {
-    const ref = panelRef.current;
-
-    if (ref) {
-      const handlePanelTransitionStart = () => {
-        if (ref && isResolvedOpen) {
-          ref.style.visibility = 'visible';
-        }
-      };
-
-      const handlePanelTransitionEnd = () => {
-        if (ref && !isResolvedOpen) {
-          ref.style.visibility = 'hidden';
-        }
-      };
-
-      ref.addEventListener('transitionstart', handlePanelTransitionStart);
-      ref.addEventListener('transitionend', handlePanelTransitionEnd);
-      return () => {
-        ref.removeEventListener('transitionstart', handlePanelTransitionStart);
-        ref.removeEventListener('transitionend', handlePanelTransitionEnd);
-      };
-    }
-
-    return;
-  }, [isResolvedOpen]);
-  React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => {
-    if (isResolvedOpen) {
-      var _rootRef$current, _rootRef$current$pare;
-
-      const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
-
-      const run = () => {
-        var _panelRef$current, _rootRef$current2;
-
-        const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
-
-        if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
-          rootRef.current.parentElement.style.paddingBottom = containerHeight + "px";
-        }
-      };
-
-      run();
-
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', run);
-        return () => {
-          var _rootRef$current3;
-
-          window.removeEventListener('resize', run);
-
-          if ((_rootRef$current3 = rootRef.current) != null && _rootRef$current3.parentElement && typeof previousValue === 'string') {
-            rootRef.current.parentElement.style.paddingBottom = previousValue;
-          }
-        };
-      }
-    }
-
-    return;
-  }, [isResolvedOpen]);
-
-  const {
-    style: panelStyle = {}
-  } = panelProps,
-        otherPanelProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(panelProps, _excluded);
-
-  const {
-    style: closeButtonStyle = {},
-    onClick: onCloseClick
-  } = closeButtonProps,
-        otherCloseButtonProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(closeButtonProps, _excluded2);
-
-  const {
-    style: toggleButtonStyle = {},
-    onClick: onToggleClick
-  } = toggleButtonProps,
-        otherToggleButtonProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(toggleButtonProps, _excluded3); // Do not render on the server
-
-
-  if (!isMounted()) return null;
-  return /*#__PURE__*/React__default["default"].createElement(Container, {
-    ref: rootRef,
-    className: "TanStackRouterDevtools"
-  }, /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
-    theme: theme.defaultTheme
-  }, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
-    ref: panelRef
-  }, otherPanelProps, {
-    useRouter: useRouterImpl,
-    style: _rollupPluginBabelHelpers["extends"]({
-      position: 'fixed',
-      bottom: '0',
-      right: '0',
-      zIndex: 99999,
-      width: '100%',
-      height: devtoolsHeight != null ? devtoolsHeight : 500,
-      maxHeight: '90%',
-      boxShadow: '0 0 20px rgba(0,0,0,.3)',
-      borderTop: "1px solid " + theme.defaultTheme.gray,
-      transformOrigin: 'top',
-      // visibility will be toggled after transitions, but set initial state here
-      visibility: isOpen ? 'visible' : 'hidden'
-    }, panelStyle, isResizing ? {
-      transition: "none"
-    } : {
-      transition: "all .2s ease"
-    }, isResolvedOpen ? {
-      opacity: 1,
-      pointerEvents: 'all',
-      transform: "translateY(0) scale(1)"
-    } : {
-      opacity: 0,
-      pointerEvents: 'none',
-      transform: "translateY(15px) scale(1.02)"
-    }),
-    isOpen: isResolvedOpen,
-    setIsOpen: setIsOpen,
-    handleDragStart: e => _handleDragStart(panelRef.current, e)
-  })), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
-    type: "button",
-    "aria-label": "Close TanStack Router Devtools"
-  }, otherCloseButtonProps, {
-    onClick: e => {
-      setIsOpen(false);
-      onCloseClick && onCloseClick(e);
-    },
-    style: _rollupPluginBabelHelpers["extends"]({
-      position: 'fixed',
-      zIndex: 99999,
-      margin: '.5em',
-      bottom: 0
-    }, position === 'top-right' ? {
-      right: '0'
-    } : position === 'top-left' ? {
-      left: '0'
-    } : position === 'bottom-right' ? {
-      right: '0'
-    } : {
-      left: '0'
-    }, closeButtonStyle)
-  }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-    type: "button"
-  }, otherToggleButtonProps, {
-    "aria-label": "Open TanStack Router Devtools",
-    onClick: e => {
-      setIsOpen(true);
-      onToggleClick && onToggleClick(e);
-    },
-    style: _rollupPluginBabelHelpers["extends"]({
-      appearance: 'none',
-      background: 'none',
-      border: 0,
-      padding: 0,
-      position: 'fixed',
-      zIndex: 99999,
-      display: 'inline-flex',
-      fontSize: '1.5em',
-      margin: '.5em',
-      cursor: 'pointer',
-      width: 'fit-content'
-    }, position === 'top-right' ? {
-      top: '0',
-      right: '0'
-    } : position === 'top-left' ? {
-      top: '0',
-      left: '0'
-    } : position === 'bottom-right' ? {
-      bottom: '0',
-      right: '0'
-    } : {
-      bottom: '0',
-      left: '0'
-    }, toggleButtonStyle)
-  }), /*#__PURE__*/React__default["default"].createElement(Logo["default"], {
-    "aria-hidden": true
-  })) : null);
-}
-const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
-  var _router$state$matches, _router$state$pending, _last, _last2, _last3, _last4, _last5, _last6;
-
-  const {
-    isOpen = true,
-    handleDragStart,
-    useRouter
-  } = props,
-        panelProps = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(props, _excluded4);
-
-  const router = useRouter();
-  React__default["default"].useEffect(() => {
-    let interval = setInterval(() => {
-      router.cleanPreloadCache();
-      router.notify();
-    }, 1000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, []);
-  const [activeRouteId, setActiveRouteId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveRouteId', '');
-  const activeMatch = (_router$state$matches = router.state.matches) == null ? void 0 : _router$state$matches.find(d => d.routeId === activeRouteId);
-  return /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
-    theme: theme.defaultTheme
-  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
-    ref: ref,
-    className: "TanStackRouterDevtoolsPanel"
-  }, panelProps), /*#__PURE__*/React__default["default"].createElement("style", {
-    dangerouslySetInnerHTML: {
-      __html: "\n\n            .TanStackRouterDevtoolsPanel * {\n              scrollbar-color: " + theme.defaultTheme.backgroundAlt + " " + theme.defaultTheme.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.defaultTheme.backgroundAlt + ";\n            }\n\n            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {\n              background: " + theme.defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + theme.defaultTheme.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          "
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '4px',
-      marginBottom: '-4px',
-      cursor: 'row-resize',
-      zIndex: 100000
-    },
-    onMouseDown: handleDragStart
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      flex: '1 1 500px',
-      minHeight: '40%',
-      maxHeight: '100%',
-      overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Logo["default"], {
-    "aria-hidden": true,
-    style: {
-      marginRight: '.5em'
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginRight: 'auto',
-      fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
-      fontWeight: 'bold'
-    }
-  }, "TanStack Router", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
-    style: {
-      fontWeight: 100
-    }
-  }, "Devtools"))), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      overflowY: 'auto',
-      flex: '1'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
-    label: "Router",
-    value: (() => {
-      const rest = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(router, _excluded5);
-
-      return rest;
-    })(),
-    defaultExpanded: {}
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      flex: '1 1 500px',
-      minHeight: '40%',
-      maxHeight: '100%',
-      overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Current Matches"), router.state.matches.map((match, i) => {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: match.routeId || i,
-      role: "button",
-      "aria-label": "Open match details for " + match.routeId,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
-      style: {
-        display: 'flex',
-        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
-        cursor: 'pointer',
-        alignItems: 'center',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        marginLeft: '.25rem',
-        background: utils.getStatusColor(match, theme.defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
-      style: {
-        padding: '.5em'
-      }
-    }, "" + match.matchId));
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginTop: '2rem',
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Pending Matches"), (_router$state$pending = router.state.pending) == null ? void 0 : _router$state$pending.matches.map((match, i) => {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: match.routeId || i,
-      role: "button",
-      "aria-label": "Open match details for " + match.routeId,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
-      style: {
-        display: 'flex',
-        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
-        cursor: 'pointer',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        marginLeft: '.25rem',
-        background: utils.getStatusColor(match, theme.defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
-      style: {
-        padding: '.5em'
-      }
-    }, "" + match.matchId));
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginTop: '2rem',
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Preloading Matches"), Object.keys(router.preloadCache).filter(key => {
-    var _cacheEntry$match$upd;
-
-    const cacheEntry = router.preloadCache[key];
-    return ((_cacheEntry$match$upd = cacheEntry.match.updatedAt) != null ? _cacheEntry$match$upd : Date.now()) + cacheEntry.maxAge > Date.now();
-  }).map((key, i) => {
-    var _match$updatedAt;
-
-    const {
-      match,
-      maxAge
-    } = router.preloadCache[key];
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: match.matchId || i,
-      role: "button",
-      "aria-label": "Open match details for " + match.matchId,
-      onClick: () => setActiveRouteId(activeRouteId === match.routeId ? '' : match.routeId),
-      style: {
-        display: 'flex',
-        borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
-        cursor: 'pointer',
-        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '.5rem',
-        gap: '.3rem'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        flex: '0 0 auto',
-        width: '1.3rem',
-        height: '1.3rem',
-        background: utils.getStatusColor(match, theme.defaultTheme),
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 'bold',
-        borderRadius: '.25rem',
-        transition: 'all .2s ease-out'
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, null, "" + match.matchId)), /*#__PURE__*/React__default["default"].createElement("span", {
-      style: {
-        opacity: '.5'
-      }
-    }, "Expires", ' ', index["default"](new Date(), new Date(((_match$updatedAt = match.updatedAt) != null ? _match$updatedAt : Date.now()) + maxAge), {
-      addSuffix: true
-    }))));
-  })), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Match Details"), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "ID"), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
-    style: {
-      lineHeight: '1.8em'
-    }
-  }, JSON.stringify(activeMatch.matchId, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Pending"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.isPending.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Invalid"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.isInvalid.toString())), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
-    style: {
-      opacity: '.5'
-    }
-  }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.updatedAt ? new Date(activeMatch.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      background: theme.defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '0.5em'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => {
-      router.invalidateRoute(activeMatch);
-      router.notify();
-    },
-    style: {
-      background: theme.defaultTheme.warning,
-      color: theme.defaultTheme.inputTextColor
-    }
-  }, "Invalidate"), ' ', /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => router.reload(),
-    style: {
-      background: theme.defaultTheme.gray
-    }
-  }, "Reload")), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      background: theme.defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
-    label: "Match",
-    value: (() => {
-      const rest = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(activeMatch, _excluded6);
-
-      return rest;
-    })(),
-    defaultExpanded: {}
-  }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      flex: '1 1 500px',
-      minHeight: '40%',
-      maxHeight: '100%',
-      overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Loader Data"), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, Object.keys(((_last = reactRouter.last(router.state.matches)) == null ? void 0 : _last.loaderData) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
-    value: ((_last2 = reactRouter.last(router.state.matches)) == null ? void 0 : _last2.loaderData) || {},
-    defaultExpanded: Object.keys(((_last3 = reactRouter.last(router.state.matches)) == null ? void 0 : _last3.loaderData) || {}).reduce((obj, next) => {
-      obj[next] = {};
-      return obj;
-    }, {})
-  }) : /*#__PURE__*/React__default["default"].createElement("em", {
-    style: {
-      opacity: 0.5
-    }
-  }, '{ }')), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, Object.keys(((_last4 = reactRouter.last(router.state.matches)) == null ? void 0 : _last4.search) || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
-    value: ((_last5 = reactRouter.last(router.state.matches)) == null ? void 0 : _last5.search) || {},
-    defaultExpanded: Object.keys(((_last6 = reactRouter.last(router.state.matches)) == null ? void 0 : _last6.search) || {}).reduce((obj, next) => {
-      obj[next] = {};
-      return obj;
-    }, {})
-  }) : /*#__PURE__*/React__default["default"].createElement("em", {
-    style: {
-      opacity: 0.5
-    }
-  }, '{ }')))));
-});
-
-exports.TanStackRouterDevtools = TanStackRouterDevtools;
-exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
-//# sourceMappingURL=devtools.js.map