next 15.2.0-canary.75 → 15.2.0-canary.76

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { STORAGE_KEY_POSITION } from '../../../../shared';
 import { useState, useEffect, useRef, createContext, useContext } from 'react';
 import { Toast } from '../../toast';
 import { NextLogo } from './next-logo';
@@ -7,11 +8,12 @@ import { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-in
 import { useDelayedRender } from '../../../hooks/use-delayed-render';
 import { TurbopackInfo } from './dev-tools-info/turbopack-info';
 import { RouteInfo } from './dev-tools-info/route-info';
-import { StopIcon } from '../../../icons/stop-icon';
+import GearIcon from '../../../icons/gear-icon';
+import { UserPreferences } from './dev-tools-info/user-preferences';
 // TODO: add E2E tests to cover different scenarios
 const INDICATOR_POSITION = process.env.__NEXT_DEV_INDICATOR_POSITION || 'bottom-left';
 export function DevToolsIndicator(param) {
-    let { state, errorCount, isBuildError, setIsErrorOverlayOpen, position = INDICATOR_POSITION } = param;
+    let { state, errorCount, isBuildError, setIsErrorOverlayOpen } = param;
     const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] = useState(true);
     return /*#__PURE__*/ _jsx(DevToolsPopover, {
         routerType: state.routerType,
@@ -26,7 +28,6 @@ export function DevToolsIndicator(param) {
         },
         setIsErrorOverlayOpen: setIsErrorOverlayOpen,
         isTurbopack: !!process.env.TURBOPACK,
-        position: position,
         disabled: state.disableDevIndicator || !isDevToolsIndicatorVisible,
         isBuildError: isBuildError
     });
@@ -35,18 +36,28 @@ export function DevToolsIndicator(param) {
 const ANIMATE_OUT_DURATION_MS = 200;
 const ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)';
 const Context = /*#__PURE__*/ createContext({});
+function getInitialPosition() {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem(STORAGE_KEY_POSITION)) {
+        return localStorage.getItem(STORAGE_KEY_POSITION);
+    }
+    return INDICATOR_POSITION;
+}
 function DevToolsPopover(param) {
-    let { routerType, disabled, issueCount, isStaticRoute, isTurbopack, position, isBuildError, hide, setIsErrorOverlayOpen } = param;
+    let { routerType, disabled, issueCount, isStaticRoute, isTurbopack, isBuildError, hide, setIsErrorOverlayOpen } = param;
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
     const turbopackRef = useRef(null);
     const triggerTurbopackRef = useRef(null);
     const routeInfoRef = useRef(null);
     const triggerRouteInfoRef = useRef(null);
+    const preferencesRef = useRef(null);
+    const triggerPreferencesRef = useRef(null);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false);
     const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false);
+    const [isPreferencesOpen, setIsPreferencesOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(-1);
+    const [position, setPosition] = useState(getInitialPosition());
     // This hook lets us do an exit animation before unmounting the component
     const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(isMenuOpen, {
         // Intentionally no fade in, makes the UI feel more immediate
@@ -62,6 +73,10 @@ function DevToolsPopover(param) {
         enterDelay: 0,
         exitDelay: ANIMATE_OUT_DURATION_MS
     });
+    const { mounted: preferencesMounted, rendered: preferencesRendered } = useDelayedRender(isPreferencesOpen, {
+        enterDelay: 0,
+        exitDelay: ANIMATE_OUT_DURATION_MS
+    });
     // Features to make the menu accessible
     useFocusTrap(menuRef, triggerRef, isMenuOpen);
     useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu);
@@ -69,6 +84,8 @@ function DevToolsPopover(param) {
     useClickOutside(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen, closeTurbopackInfo);
     useFocusTrap(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen);
     useClickOutside(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen, closeRouteInfo);
+    useFocusTrap(preferencesRef, triggerPreferencesRef, isPreferencesOpen);
+    useClickOutside(preferencesRef, triggerPreferencesRef, isPreferencesOpen, closePreferences);
     function select(index) {
         var _menuRef_current;
         if (index === 'first') {
@@ -163,6 +180,13 @@ function DevToolsPopover(param) {
     function closeRouteInfo() {
         setIsRouteInfoOpen(false);
     }
+    function closePreferences() {
+        setIsPreferencesOpen(false);
+    }
+    function handleHideDevtools() {
+        closePreferences();
+        hide();
+    }
     const [vertical, horizontal] = position.split('-', 2);
     return /*#__PURE__*/ _jsxs(Toast, {
         "data-nextjs-toast": true,
@@ -216,6 +240,18 @@ function DevToolsPopover(param) {
                 },
                 "data-rendered": turbopackInfoRendered
             }),
+            preferencesMounted && /*#__PURE__*/ _jsx(UserPreferences, {
+                ref: preferencesRef,
+                isOpen: isPreferencesOpen,
+                hide: handleHideDevtools,
+                setPosition: setPosition,
+                position: position,
+                style: {
+                    [vertical]: 'calc(100% + 8px)',
+                    [horizontal]: 0
+                },
+                "data-rendered": preferencesRendered
+            }),
             menuMounted && /*#__PURE__*/ _jsx("div", {
                 ref: menuRef,
                 id: "nextjs-dev-tools-menu",
@@ -276,11 +312,10 @@ function DevToolsPopover(param) {
                         /*#__PURE__*/ _jsx("div", {
                             className: "dev-tools-indicator-footer",
                             children: /*#__PURE__*/ _jsx(MenuItem, {
-                                "data-hide-dev-tools": true,
-                                title: "Hide Dev Tools for the current server session or a day.",
-                                label: "Hide for Dev Session",
-                                value: /*#__PURE__*/ _jsx(StopIcon, {}),
-                                onClick: hide,
+                                "data-preferences": true,
+                                label: "Preferences",
+                                value: /*#__PURE__*/ _jsx(GearIcon, {}),
+                                onClick: ()=>setIsPreferencesOpen(true),
                                 index: isTurbopack ? 2 : 3
                             })
                         })

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport type { OverlayState } from '../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { NextLogo } from './next-logo'\nimport { useIsDevBuilding } from '../../../../../../dev/dev-build-indicator/internal/initialize'\nimport { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { TurbopackInfo } from './dev-tools-info/turbopack-info'\nimport { RouteInfo } from './dev-tools-info/route-info'\nimport { StopIcon } from '../../../icons/stop-icon'\n\n// TODO: add E2E tests to cover different scenarios\n\nconst INDICATOR_POSITION =\n  (process.env\n    .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) ||\n  'bottom-left'\n\ntype DevToolsIndicatorPosition = typeof INDICATOR_POSITION\n\nexport function DevToolsIndicator({\n  state,\n  errorCount,\n  isBuildError,\n  setIsErrorOverlayOpen,\n  position = INDICATOR_POSITION,\n}: {\n  state: OverlayState\n  errorCount: number\n  isBuildError: boolean\n  setIsErrorOverlayOpen: (\n    isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)\n  ) => void\n  // Technically this prop isn't needed, but useful for testing.\n  position?: DevToolsIndicatorPosition\n}) {\n  const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] =\n    useState(true)\n\n  return (\n    <DevToolsPopover\n      routerType={state.routerType}\n      semver={state.versionInfo.installed}\n      issueCount={errorCount}\n      isStaticRoute={state.staticIndicator}\n      hide={() => {\n        setIsDevToolsIndicatorVisible(false)\n        fetch('/__nextjs_disable_dev_indicator', {\n          method: 'POST',\n        })\n      }}\n      setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n      isTurbopack={!!process.env.TURBOPACK}\n      position={position}\n      disabled={state.disableDevIndicator || !isDevToolsIndicatorVisible}\n      isBuildError={isBuildError}\n    />\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\ninterface C {\n  closeMenu: () => void\n  selectedIndex: number\n  setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nfunction DevToolsPopover({\n  routerType,\n  disabled,\n  issueCount,\n  isStaticRoute,\n  isTurbopack,\n  position,\n  isBuildError,\n  hide,\n  setIsErrorOverlayOpen,\n}: {\n  routerType: 'pages' | 'app'\n  disabled: boolean\n  issueCount: number\n  isStaticRoute: boolean\n  semver: string | undefined\n  isTurbopack: boolean\n  position: DevToolsIndicatorPosition\n  isBuildError: boolean\n  hide: () => void\n  setIsErrorOverlayOpen: (\n    isOverlayOpen: boolean | ((prev: boolean) => boolean)\n  ) => void\n}) {\n  const menuRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const turbopackRef = useRef<HTMLElement>(null)\n  const triggerTurbopackRef = useRef<HTMLButtonElement | null>(null)\n  const routeInfoRef = useRef<HTMLElement>(null)\n  const triggerRouteInfoRef = useRef<HTMLButtonElement | null>(null)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false)\n  const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false)\n  const [selectedIndex, setSelectedIndex] = useState(-1)\n\n  // This hook lets us do an exit animation before unmounting the component\n  const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(\n    isMenuOpen,\n    {\n      // Intentionally no fade in, makes the UI feel more immediate\n      enterDelay: 0,\n      // Graceful fade out to confirm that the UI did not break\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    }\n  )\n  const { mounted: turbopackInfoMounted, rendered: turbopackInfoRendered } =\n    useDelayedRender(isTurbopackInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n  const { mounted: routeInfoMounted, rendered: routeInfoRendered } =\n    useDelayedRender(isRouteInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n\n  // Features to make the menu accessible\n  useFocusTrap(menuRef, triggerRef, isMenuOpen)\n  useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n  useFocusTrap(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen)\n  useClickOutside(\n    turbopackRef,\n    triggerTurbopackRef,\n    isTurbopackInfoOpen,\n    closeTurbopackInfo\n  )\n  useFocusTrap(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen)\n  useClickOutside(\n    routeInfoRef,\n    triggerRouteInfoRef,\n    isRouteInfoOpen,\n    closeRouteInfo\n  )\n\n  function select(index: number | 'first' | 'last') {\n    if (index === 'first') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const firstIndex = all[0].getAttribute('data-index')\n        select(Number(firstIndex))\n      }\n      return\n    }\n\n    if (index === 'last') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const lastIndex = all.length - 1\n        select(lastIndex)\n      }\n      return\n    }\n\n    const el = menuRef.current?.querySelector(\n      `[data-index=\"${index}\"]`\n    ) as HTMLElement\n    if (el) {\n      setSelectedIndex(index)\n      el?.focus()\n    }\n  }\n\n  function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {\n    e.preventDefault()\n\n    switch (e.key) {\n      case 'ArrowDown':\n        const next = selectedIndex + 1\n        select(next)\n        break\n      case 'ArrowUp':\n        const prev = selectedIndex - 1\n        select(prev)\n        break\n      case 'Home':\n        select('first')\n        break\n      case 'End':\n        select('last')\n        break\n      default:\n        break\n    }\n  }\n\n  function onTriggerKeydown(e: React.KeyboardEvent<HTMLButtonElement>) {\n    if (isMenuOpen) {\n      return\n    }\n\n    // Open with first item focused\n    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('first')\n      })\n    }\n\n    // Open with last item focused\n    if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('last')\n      })\n    }\n  }\n\n  function openErrorOverlay() {\n    if (issueCount > 0) {\n      setIsErrorOverlayOpen(true)\n    }\n  }\n\n  function toggleErrorOverlay() {\n    setIsErrorOverlayOpen((prev) => !prev)\n  }\n\n  function onTriggerClick() {\n    setIsMenuOpen((prev) => !prev)\n  }\n\n  function closeMenu() {\n    setIsMenuOpen(false)\n    // Avoid flashing selected state\n    setTimeout(() => {\n      setSelectedIndex(-1)\n    }, ANIMATE_OUT_DURATION_MS)\n  }\n\n  function closeTurbopackInfo() {\n    setIsTurbopackInfoOpen(false)\n  }\n\n  function closeRouteInfo() {\n    setIsRouteInfoOpen(false)\n  }\n\n  const [vertical, horizontal] = position.split('-', 2)\n\n  return (\n    <Toast\n      data-nextjs-toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n        // Reset the toast component's default positions.\n        bottom: 'initial',\n        left: 'initial',\n        [vertical]: '10px',\n        [horizontal]: '20px',\n      }}\n    >\n      <NextLogo\n        ref={triggerRef}\n        aria-haspopup=\"menu\"\n        aria-expanded={isMenuOpen}\n        aria-controls=\"nextjs-dev-tools-menu\"\n        aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}\n        data-nextjs-dev-tools-button\n        disabled={disabled}\n        issueCount={issueCount}\n        onTriggerClick={onTriggerClick}\n        onKeyDown={onTriggerKeydown}\n        toggleErrorOverlay={toggleErrorOverlay}\n        isDevBuilding={useIsDevBuilding()}\n        isDevRendering={useIsDevRendering()}\n        isBuildError={isBuildError}\n      />\n\n      {routeInfoMounted && (\n        <RouteInfo\n          ref={routeInfoRef}\n          routerType={routerType}\n          routeType={isStaticRoute ? 'Static' : 'Dynamic'}\n          isOpen={isRouteInfoOpen}\n          setIsOpen={setIsRouteInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + 8px)',\n            [horizontal]: 0,\n          }}\n          data-rendered={routeInfoRendered}\n        />\n      )}\n\n      {turbopackInfoMounted && (\n        <TurbopackInfo\n          ref={turbopackRef}\n          isOpen={isTurbopackInfoOpen}\n          setIsOpen={setIsTurbopackInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + 8px)',\n            [horizontal]: 0,\n          }}\n          data-rendered={turbopackInfoRendered}\n        />\n      )}\n\n      {menuMounted && (\n        <div\n          ref={menuRef}\n          id=\"nextjs-dev-tools-menu\"\n          role=\"menu\"\n          dir=\"ltr\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Next.js Dev Tools Items\"\n          tabIndex={-1}\n          className=\"dev-tools-indicator-menu\"\n          onKeyDown={onMenuKeydown}\n          data-rendered={menuRendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n              [vertical]: 'calc(100% + 8px)',\n              [horizontal]: 0,\n            } as React.CSSProperties\n          }\n        >\n          <Context.Provider\n            value={{\n              closeMenu,\n              selectedIndex,\n              setSelectedIndex,\n            }}\n          >\n            <div className=\"dev-tools-indicator-inner\">\n              {issueCount > 0 && (\n                <MenuItem\n                  title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}\n                  index={0}\n                  label=\"Issues\"\n                  value={<IssueCount>{issueCount}</IssueCount>}\n                  onClick={openErrorOverlay}\n                />\n              )}\n              <MenuItem\n                title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}\n                label=\"Route\"\n                index={1}\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n                onClick={() => setIsRouteInfoOpen(true)}\n                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n              />\n              {isTurbopack ? (\n                <MenuItem\n                  title=\"Turbopack is enabled.\"\n                  label=\"Turbopack\"\n                  value=\"Enabled\"\n                />\n              ) : (\n                <MenuItem\n                  index={2}\n                  title=\"Learn about Turbopack and how to enable it in your application.\"\n                  label=\"Try Turbopack\"\n                  value={<ChevronRight />}\n                  onClick={() => setIsTurbopackInfoOpen(true)}\n                />\n              )}\n            </div>\n\n            <div className=\"dev-tools-indicator-footer\">\n              <MenuItem\n                data-hide-dev-tools\n                title=\"Hide Dev Tools for the current server session or a day.\"\n                label=\"Hide for Dev Session\"\n                value={<StopIcon />}\n                onClick={hide}\n                index={isTurbopack ? 2 : 3}\n              />\n            </div>\n          </Context.Provider>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nfunction ChevronRight() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n    >\n      <path\n        fill=\"#666\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z\"\n      />\n    </svg>\n  )\n}\n\nfunction MenuItem({\n  index,\n  label,\n  value,\n  onClick,\n  href,\n  ...props\n}: {\n  index?: number\n  title?: string\n  label: string\n  value: React.ReactNode\n  href?: string\n  onClick?: () => void\n}) {\n  const isInteractive =\n    typeof onClick === 'function' || typeof href === 'string'\n  const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context)\n  const selected = selectedIndex === index\n\n  function click() {\n    if (isInteractive) {\n      onClick?.()\n      closeMenu()\n      if (href) {\n        window.open(href, '_blank', 'noopener, noreferrer')\n      }\n    }\n  }\n\n  return (\n    <div\n      className=\"dev-tools-indicator-item\"\n      data-index={index}\n      data-selected={selected}\n      onClick={click}\n      // Needs `onMouseMove` instead of enter to work together\n      // with keyboard and mouse input\n      onMouseMove={() => {\n        if (isInteractive && index !== undefined && selectedIndex !== index) {\n          setSelectedIndex(index)\n        }\n      }}\n      onMouseLeave={() => setSelectedIndex(-1)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          click()\n        }\n      }}\n      role={isInteractive ? 'menuitem' : undefined}\n      tabIndex={selected ? 0 : -1}\n      {...props}\n    >\n      <span className=\"dev-tools-indicator-label\">{label}</span>\n      <span className=\"dev-tools-indicator-value\">{value}</span>\n    </div>\n  )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n  return (\n    <span\n      className=\"dev-tools-indicator-issue-count\"\n      data-has-issues={children > 0}\n    >\n      <span className=\"dev-tools-indicator-issue-count-indicator\" />\n      {children}\n    </span>\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useFocusTrap(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean\n) {\n  useEffect(() => {\n    if (isMenuOpen) {\n      menuRef.current?.focus()\n    } else {\n      const root = triggerRef.current?.getRootNode()\n      const activeElement =\n        root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n      // Only restore focus if the focus was previously on the menu.\n      // This avoids us accidentally focusing on mount when the\n      // user could want to interact with their own app instead.\n      if (menuRef.current?.contains(activeElement)) {\n        triggerRef.current?.focus()\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean,\n  closeMenu: () => void\n) {\n  useEffect(() => {\n    if (!isMenuOpen) {\n      return\n    }\n\n    // Close menu when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(menuRef.current?.getBoundingClientRect()\n          ? event.clientX >= menuRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= menuRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= menuRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= menuRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(triggerRef.current?.getBoundingClientRect()\n          ? event.clientX >= triggerRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              triggerRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= triggerRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= triggerRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        closeMenu()\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMenu()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nexport const DEV_TOOLS_INDICATOR_STYLES = `\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: var(--size-36);\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n    white-space: nowrap;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: var(--size-40);\n    height: var(--size-24);\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: var(--size-13);\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: var(--size-8);\n      height: var(--size-8);\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: 4px;\n\n    kbd {\n      width: var(--size-20);\n      height: var(--size-20);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-12);\n      line-height: var(--size-16);\n    }\n  }\n`\n"],"names":["useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","TurbopackInfo","RouteInfo","StopIcon","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorVisible","setIsDevToolsIndicatorVisible","DevToolsPopover","routerType","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","fetch","method","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","menuRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","enterDelay","exitDelay","turbopackInfoMounted","turbopackInfoRendered","routeInfoMounted","routeInfoRendered","useFocusTrap","useClickOutside","closeMenu","closeTurbopackInfo","closeRouteInfo","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","toggleErrorOverlay","onTriggerClick","vertical","horizontal","split","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","title","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d","href","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { STORAGE_KEY_POSITION, type OverlayState } from '../../../../shared'\n\nimport { useState, useEffect, useRef, createContext, useContext } from 'react'\nimport { Toast } from '../../toast'\nimport { NextLogo } from './next-logo'\nimport { useIsDevBuilding } from '../../../../../../dev/dev-build-indicator/internal/initialize'\nimport { useIsDevRendering } from '../../../../utils/dev-indicator/dev-render-indicator'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport { TurbopackInfo } from './dev-tools-info/turbopack-info'\nimport { RouteInfo } from './dev-tools-info/route-info'\nimport GearIcon from '../../../icons/gear-icon'\nimport { UserPreferences } from './dev-tools-info/user-preferences'\n\n// TODO: add E2E tests to cover different scenarios\n\nconst INDICATOR_POSITION =\n  (process.env\n    .__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) ||\n  'bottom-left'\n\nexport type DevToolsIndicatorPosition = typeof INDICATOR_POSITION\n\nexport function DevToolsIndicator({\n  state,\n  errorCount,\n  isBuildError,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  errorCount: number\n  isBuildError: boolean\n  setIsErrorOverlayOpen: (\n    isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)\n  ) => void\n}) {\n  const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] =\n    useState(true)\n\n  return (\n    <DevToolsPopover\n      routerType={state.routerType}\n      semver={state.versionInfo.installed}\n      issueCount={errorCount}\n      isStaticRoute={state.staticIndicator}\n      hide={() => {\n        setIsDevToolsIndicatorVisible(false)\n        fetch('/__nextjs_disable_dev_indicator', {\n          method: 'POST',\n        })\n      }}\n      setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n      isTurbopack={!!process.env.TURBOPACK}\n      disabled={state.disableDevIndicator || !isDevToolsIndicatorVisible}\n      isBuildError={isBuildError}\n    />\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nconst ANIMATE_OUT_DURATION_MS = 200\nconst ANIMATE_OUT_TIMING_FUNCTION = 'cubic-bezier(0.175, 0.885, 0.32, 1.1)'\n\ninterface C {\n  closeMenu: () => void\n  selectedIndex: number\n  setSelectedIndex: Dispatch<SetStateAction<number>>\n}\n\nconst Context = createContext({} as C)\n\nfunction getInitialPosition() {\n  if (\n    typeof localStorage !== 'undefined' &&\n    localStorage.getItem(STORAGE_KEY_POSITION)\n  ) {\n    return localStorage.getItem(\n      STORAGE_KEY_POSITION\n    ) as DevToolsIndicatorPosition\n  }\n\n  return INDICATOR_POSITION\n}\n\nfunction DevToolsPopover({\n  routerType,\n  disabled,\n  issueCount,\n  isStaticRoute,\n  isTurbopack,\n  isBuildError,\n  hide,\n  setIsErrorOverlayOpen,\n}: {\n  routerType: 'pages' | 'app'\n  disabled: boolean\n  issueCount: number\n  isStaticRoute: boolean\n  semver: string | undefined\n  isTurbopack: boolean\n  isBuildError: boolean\n  hide: () => void\n  setIsErrorOverlayOpen: (\n    isOverlayOpen: boolean | ((prev: boolean) => boolean)\n  ) => void\n}) {\n  const menuRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const turbopackRef = useRef<HTMLElement>(null)\n  const triggerTurbopackRef = useRef<HTMLButtonElement | null>(null)\n  const routeInfoRef = useRef<HTMLElement>(null)\n  const triggerRouteInfoRef = useRef<HTMLButtonElement | null>(null)\n  const preferencesRef = useRef<HTMLElement>(null)\n  const triggerPreferencesRef = useRef<HTMLButtonElement | null>(null)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [isTurbopackInfoOpen, setIsTurbopackInfoOpen] = useState(false)\n  const [isRouteInfoOpen, setIsRouteInfoOpen] = useState(false)\n  const [isPreferencesOpen, setIsPreferencesOpen] = useState(false)\n  const [selectedIndex, setSelectedIndex] = useState(-1)\n  const [position, setPosition] = useState(getInitialPosition())\n\n  // This hook lets us do an exit animation before unmounting the component\n  const { mounted: menuMounted, rendered: menuRendered } = useDelayedRender(\n    isMenuOpen,\n    {\n      // Intentionally no fade in, makes the UI feel more immediate\n      enterDelay: 0,\n      // Graceful fade out to confirm that the UI did not break\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    }\n  )\n  const { mounted: turbopackInfoMounted, rendered: turbopackInfoRendered } =\n    useDelayedRender(isTurbopackInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n  const { mounted: routeInfoMounted, rendered: routeInfoRendered } =\n    useDelayedRender(isRouteInfoOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n  const { mounted: preferencesMounted, rendered: preferencesRendered } =\n    useDelayedRender(isPreferencesOpen, {\n      enterDelay: 0,\n      exitDelay: ANIMATE_OUT_DURATION_MS,\n    })\n\n  // Features to make the menu accessible\n  useFocusTrap(menuRef, triggerRef, isMenuOpen)\n  useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n  useFocusTrap(turbopackRef, triggerTurbopackRef, isTurbopackInfoOpen)\n  useClickOutside(\n    turbopackRef,\n    triggerTurbopackRef,\n    isTurbopackInfoOpen,\n    closeTurbopackInfo\n  )\n  useFocusTrap(routeInfoRef, triggerRouteInfoRef, isRouteInfoOpen)\n  useClickOutside(\n    routeInfoRef,\n    triggerRouteInfoRef,\n    isRouteInfoOpen,\n    closeRouteInfo\n  )\n  useFocusTrap(preferencesRef, triggerPreferencesRef, isPreferencesOpen)\n  useClickOutside(\n    preferencesRef,\n    triggerPreferencesRef,\n    isPreferencesOpen,\n    closePreferences\n  )\n  function select(index: number | 'first' | 'last') {\n    if (index === 'first') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const firstIndex = all[0].getAttribute('data-index')\n        select(Number(firstIndex))\n      }\n      return\n    }\n\n    if (index === 'last') {\n      const all = menuRef.current?.querySelectorAll('[role=\"menuitem\"]')\n      if (all) {\n        const lastIndex = all.length - 1\n        select(lastIndex)\n      }\n      return\n    }\n\n    const el = menuRef.current?.querySelector(\n      `[data-index=\"${index}\"]`\n    ) as HTMLElement\n    if (el) {\n      setSelectedIndex(index)\n      el?.focus()\n    }\n  }\n\n  function onMenuKeydown(e: React.KeyboardEvent<HTMLDivElement>) {\n    e.preventDefault()\n\n    switch (e.key) {\n      case 'ArrowDown':\n        const next = selectedIndex + 1\n        select(next)\n        break\n      case 'ArrowUp':\n        const prev = selectedIndex - 1\n        select(prev)\n        break\n      case 'Home':\n        select('first')\n        break\n      case 'End':\n        select('last')\n        break\n      default:\n        break\n    }\n  }\n\n  function onTriggerKeydown(e: React.KeyboardEvent<HTMLButtonElement>) {\n    if (isMenuOpen) {\n      return\n    }\n\n    // Open with first item focused\n    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('first')\n      })\n    }\n\n    // Open with last item focused\n    if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select('last')\n      })\n    }\n  }\n\n  function openErrorOverlay() {\n    if (issueCount > 0) {\n      setIsErrorOverlayOpen(true)\n    }\n  }\n\n  function toggleErrorOverlay() {\n    setIsErrorOverlayOpen((prev) => !prev)\n  }\n\n  function onTriggerClick() {\n    setIsMenuOpen((prev) => !prev)\n  }\n\n  function closeMenu() {\n    setIsMenuOpen(false)\n    // Avoid flashing selected state\n    setTimeout(() => {\n      setSelectedIndex(-1)\n    }, ANIMATE_OUT_DURATION_MS)\n  }\n\n  function closeTurbopackInfo() {\n    setIsTurbopackInfoOpen(false)\n  }\n\n  function closeRouteInfo() {\n    setIsRouteInfoOpen(false)\n  }\n\n  function closePreferences() {\n    setIsPreferencesOpen(false)\n  }\n\n  function handleHideDevtools() {\n    closePreferences()\n    hide()\n  }\n\n  const [vertical, horizontal] = position.split('-', 2)\n\n  return (\n    <Toast\n      data-nextjs-toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n        // Reset the toast component's default positions.\n        bottom: 'initial',\n        left: 'initial',\n        [vertical]: '10px',\n        [horizontal]: '20px',\n      }}\n    >\n      <NextLogo\n        ref={triggerRef}\n        aria-haspopup=\"menu\"\n        aria-expanded={isMenuOpen}\n        aria-controls=\"nextjs-dev-tools-menu\"\n        aria-label={`${isMenuOpen ? 'Close' : 'Open'} Next.js Dev Tools`}\n        data-nextjs-dev-tools-button\n        disabled={disabled}\n        issueCount={issueCount}\n        onTriggerClick={onTriggerClick}\n        onKeyDown={onTriggerKeydown}\n        toggleErrorOverlay={toggleErrorOverlay}\n        isDevBuilding={useIsDevBuilding()}\n        isDevRendering={useIsDevRendering()}\n        isBuildError={isBuildError}\n      />\n\n      {routeInfoMounted && (\n        <RouteInfo\n          ref={routeInfoRef}\n          routerType={routerType}\n          routeType={isStaticRoute ? 'Static' : 'Dynamic'}\n          isOpen={isRouteInfoOpen}\n          setIsOpen={setIsRouteInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + 8px)',\n            [horizontal]: 0,\n          }}\n          data-rendered={routeInfoRendered}\n        />\n      )}\n\n      {turbopackInfoMounted && (\n        <TurbopackInfo\n          ref={turbopackRef}\n          isOpen={isTurbopackInfoOpen}\n          setIsOpen={setIsTurbopackInfoOpen}\n          setPreviousOpen={setIsMenuOpen}\n          style={{\n            [vertical]: 'calc(100% + 8px)',\n            [horizontal]: 0,\n          }}\n          data-rendered={turbopackInfoRendered}\n        />\n      )}\n\n      {preferencesMounted && (\n        <UserPreferences\n          ref={preferencesRef}\n          isOpen={isPreferencesOpen}\n          hide={handleHideDevtools}\n          setPosition={setPosition}\n          position={position}\n          style={{\n            [vertical]: 'calc(100% + 8px)',\n            [horizontal]: 0,\n          }}\n          data-rendered={preferencesRendered}\n        />\n      )}\n\n      {menuMounted && (\n        <div\n          ref={menuRef}\n          id=\"nextjs-dev-tools-menu\"\n          role=\"menu\"\n          dir=\"ltr\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Next.js Dev Tools Items\"\n          tabIndex={-1}\n          className=\"dev-tools-indicator-menu\"\n          onKeyDown={onMenuKeydown}\n          data-rendered={menuRendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n              [vertical]: 'calc(100% + 8px)',\n              [horizontal]: 0,\n            } as React.CSSProperties\n          }\n        >\n          <Context.Provider\n            value={{\n              closeMenu,\n              selectedIndex,\n              setSelectedIndex,\n            }}\n          >\n            <div className=\"dev-tools-indicator-inner\">\n              {issueCount > 0 && (\n                <MenuItem\n                  title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}\n                  index={0}\n                  label=\"Issues\"\n                  value={<IssueCount>{issueCount}</IssueCount>}\n                  onClick={openErrorOverlay}\n                />\n              )}\n              <MenuItem\n                title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}\n                label=\"Route\"\n                index={1}\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n                onClick={() => setIsRouteInfoOpen(true)}\n                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n              />\n              {isTurbopack ? (\n                <MenuItem\n                  title=\"Turbopack is enabled.\"\n                  label=\"Turbopack\"\n                  value=\"Enabled\"\n                />\n              ) : (\n                <MenuItem\n                  index={2}\n                  title=\"Learn about Turbopack and how to enable it in your application.\"\n                  label=\"Try Turbopack\"\n                  value={<ChevronRight />}\n                  onClick={() => setIsTurbopackInfoOpen(true)}\n                />\n              )}\n            </div>\n\n            <div className=\"dev-tools-indicator-footer\">\n              <MenuItem\n                data-preferences\n                label=\"Preferences\"\n                value={<GearIcon />}\n                onClick={() => setIsPreferencesOpen(true)}\n                index={isTurbopack ? 2 : 3}\n              />\n            </div>\n          </Context.Provider>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nfunction ChevronRight() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n    >\n      <path\n        fill=\"#666\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M5.50011 1.93945L6.03044 2.46978L10.8537 7.293C11.2442 7.68353 11.2442 8.31669 10.8537 8.70722L6.03044 13.5304L5.50011 14.0608L4.43945 13.0001L4.96978 12.4698L9.43945 8.00011L4.96978 3.53044L4.43945 3.00011L5.50011 1.93945Z\"\n      />\n    </svg>\n  )\n}\n\nfunction MenuItem({\n  index,\n  label,\n  value,\n  onClick,\n  href,\n  ...props\n}: {\n  index?: number\n  title?: string\n  label: string\n  value: React.ReactNode\n  href?: string\n  onClick?: () => void\n}) {\n  const isInteractive =\n    typeof onClick === 'function' || typeof href === 'string'\n  const { closeMenu, selectedIndex, setSelectedIndex } = useContext(Context)\n  const selected = selectedIndex === index\n\n  function click() {\n    if (isInteractive) {\n      onClick?.()\n      closeMenu()\n      if (href) {\n        window.open(href, '_blank', 'noopener, noreferrer')\n      }\n    }\n  }\n\n  return (\n    <div\n      className=\"dev-tools-indicator-item\"\n      data-index={index}\n      data-selected={selected}\n      onClick={click}\n      // Needs `onMouseMove` instead of enter to work together\n      // with keyboard and mouse input\n      onMouseMove={() => {\n        if (isInteractive && index !== undefined && selectedIndex !== index) {\n          setSelectedIndex(index)\n        }\n      }}\n      onMouseLeave={() => setSelectedIndex(-1)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          click()\n        }\n      }}\n      role={isInteractive ? 'menuitem' : undefined}\n      tabIndex={selected ? 0 : -1}\n      {...props}\n    >\n      <span className=\"dev-tools-indicator-label\">{label}</span>\n      <span className=\"dev-tools-indicator-value\">{value}</span>\n    </div>\n  )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n  return (\n    <span\n      className=\"dev-tools-indicator-issue-count\"\n      data-has-issues={children > 0}\n    >\n      <span className=\"dev-tools-indicator-issue-count-indicator\" />\n      {children}\n    </span>\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useFocusTrap(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean\n) {\n  useEffect(() => {\n    if (isMenuOpen) {\n      menuRef.current?.focus()\n    } else {\n      const root = triggerRef.current?.getRootNode()\n      const activeElement =\n        root instanceof ShadowRoot ? (root?.activeElement as HTMLElement) : null\n\n      // Only restore focus if the focus was previously on the menu.\n      // This avoids us accidentally focusing on mount when the\n      // user could want to interact with their own app instead.\n      if (menuRef.current?.contains(activeElement)) {\n        triggerRef.current?.focus()\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n  menuRef: React.RefObject<HTMLElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean,\n  closeMenu: () => void\n) {\n  useEffect(() => {\n    if (!isMenuOpen) {\n      return\n    }\n\n    // Close menu when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(menuRef.current?.getBoundingClientRect()\n          ? event.clientX >= menuRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= menuRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= menuRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= menuRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(triggerRef.current?.getBoundingClientRect()\n          ? event.clientX >= triggerRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              triggerRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= triggerRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= triggerRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        closeMenu()\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMenu()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nexport const DEV_TOOLS_INDICATOR_STYLES = `\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: var(--size-36);\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n    white-space: nowrap;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-value {\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: var(--size-40);\n    height: var(--size-24);\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-small);\n    padding: 2px;\n    color: var(--color-gray-1000);\n    border-radius: 128px;\n    font-weight: 500;\n    font-size: var(--size-13);\n    font-variant-numeric: tabular-nums;\n\n    &[data-has-issues='true'] {\n      --color-primary: var(--color-red-800);\n      --color-secondary: var(--color-red-100);\n    }\n\n    .dev-tools-indicator-issue-count-indicator {\n      width: var(--size-8);\n      height: var(--size-8);\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .dev-tools-indicator-shortcut {\n    display: flex;\n    gap: 4px;\n\n    kbd {\n      width: var(--size-20);\n      height: var(--size-20);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: var(--rounded-md);\n      border: 1px solid var(--color-gray-400);\n      font-family: var(--font-stack-sans);\n      background: var(--color-background-100);\n      color: var(--color-gray-1000);\n      text-align: center;\n      font-size: var(--size-12);\n      line-height: var(--size-16);\n    }\n  }\n`\n"],"names":["STORAGE_KEY_POSITION","useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","TurbopackInfo","RouteInfo","GearIcon","UserPreferences","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","isDevToolsIndicatorVisible","setIsDevToolsIndicatorVisible","DevToolsPopover","routerType","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","fetch","method","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","getInitialPosition","localStorage","getItem","menuRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","preferencesRef","triggerPreferencesRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","isPreferencesOpen","setIsPreferencesOpen","selectedIndex","setSelectedIndex","position","setPosition","mounted","menuMounted","rendered","menuRendered","enterDelay","exitDelay","turbopackInfoMounted","turbopackInfoRendered","routeInfoMounted","routeInfoRendered","preferencesMounted","preferencesRendered","useFocusTrap","useClickOutside","closeMenu","closeTurbopackInfo","closeRouteInfo","closePreferences","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","toggleErrorOverlay","onTriggerClick","handleHideDevtools","vertical","horizontal","split","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","title","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-preferences","svg","xmlns","width","height","viewBox","fill","path","fillRule","clipRule","d","href","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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"}

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function DevToolsInfo(param) {
     let { title, children, learnMoreLink, setIsOpen, setPreviousOpen, ...props } = param;
+    const hasActionButtons = Boolean(learnMoreLink && setIsOpen && setPreviousOpen);
     return /*#__PURE__*/ _jsx("div", {
         "data-info-popover": true,
         ...props,
@@ -12,14 +13,14 @@ export function DevToolsInfo(param) {
                     children: title
                 }),
                 children,
-                /*#__PURE__*/ _jsxs("div", {
+                hasActionButtons && /*#__PURE__*/ _jsxs("div", {
                     className: "dev-tools-info-button-container",
                     children: [
                         /*#__PURE__*/ _jsx("button", {
                             className: "dev-tools-info-close-button",
                             onClick: ()=>{
-                                setIsOpen(false);
-                                setPreviousOpen(true);
+                                setIsOpen == null ? void 0 : setIsOpen(false);
+                                setPreviousOpen == null ? void 0 : setPreviousOpen(true);
                             },
                             children: "Close"
                         }),
@@ -36,6 +37,6 @@ export function DevToolsInfo(param) {
         })
     });
 }
-export const DEV_TOOLS_INFO_STYLES = "\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: 6px;\n  }\n\n  .dev-tools-info-title {\n    padding: 8px 6px;\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: 8px 6px;\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 6px;\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 8px;\n    height: var(--size-28);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 8px;\n    height: var(--size-28);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n";
+export const DEV_TOOLS_INFO_STYLES = "\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: 12px;\n  }\n\n  .dev-tools-info-title {\n    padding: 8px 6px;\n    color: var(--color-gray-1000);\n    font-size: var(--size-16);\n    font-weight: 600;\n    line-height: var(--size-20);\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: 8px 6px;\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 6px;\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 8px;\n    height: var(--size-28);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 8px;\n    height: var(--size-28);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n";
 
 //# sourceMappingURL=dev-tools-info.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx"],"sourcesContent":["export function DevToolsInfo({\n  title,\n  children,\n  learnMoreLink,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  title: string\n  children: React.ReactNode\n  learnMoreLink: string\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n}) {\n  return (\n    <div data-info-popover {...props}>\n      <div className=\"dev-tools-info-container\">\n        <h1 className=\"dev-tools-info-title\">{title}</h1>\n        {children}\n        <div className=\"dev-tools-info-button-container\">\n          <button\n            className=\"dev-tools-info-close-button\"\n            onClick={() => {\n              setIsOpen(false)\n              setPreviousOpen(true)\n            }}\n          >\n            Close\n          </button>\n          <a\n            className=\"dev-tools-info-learn-more-button\"\n            href={learnMoreLink}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n          >\n            Learn More\n          </a>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const DEV_TOOLS_INFO_STYLES = `\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: 6px;\n  }\n\n  .dev-tools-info-title {\n    padding: 8px 6px;\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: 8px 6px;\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 6px;\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 8px;\n    height: var(--size-28);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 8px;\n    height: var(--size-28);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n`\n"],"names":["DevToolsInfo","title","children","learnMoreLink","setIsOpen","setPreviousOpen","props","div","data-info-popover","className","h1","button","onClick","a","href","target","rel","DEV_TOOLS_INFO_STYLES"],"mappings":";AAAA,OAAO,SAASA,aAAa,KAa5B;IAb4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAb4B;IAc3B,qBACE,KAACC;QAAIC,mBAAiB;QAAE,GAAGF,KAAK;kBAC9B,cAAA,MAACC;YAAIE,WAAU;;8BACb,KAACC;oBAAGD,WAAU;8BAAwBR;;gBACrCC;8BACD,MAACK;oBAAIE,WAAU;;sCACb,KAACE;4BACCF,WAAU;4BACVG,SAAS;gCACPR,UAAU;gCACVC,gBAAgB;4BAClB;sCACD;;sCAGD,KAACQ;4BACCJ,WAAU;4BACVK,MAAMX;4BACNY,QAAO;4BACPC,KAAI;sCACL;;;;;;;AAOX;AAEA,OAAO,MAAMC,wBAAyB,u5EAgGrC"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx"],"sourcesContent":["export function DevToolsInfo({\n  title,\n  children,\n  learnMoreLink,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  title: string\n  children: React.ReactNode\n  learnMoreLink?: string\n  setIsOpen?: (isOpen: boolean) => void\n  setPreviousOpen?: (isOpen: boolean) => void\n}) {\n  const hasActionButtons = Boolean(\n    learnMoreLink && setIsOpen && setPreviousOpen\n  )\n\n  return (\n    <div data-info-popover {...props}>\n      <div className=\"dev-tools-info-container\">\n        <h1 className=\"dev-tools-info-title\">{title}</h1>\n        {children}\n        {hasActionButtons && (\n          <div className=\"dev-tools-info-button-container\">\n            <button\n              className=\"dev-tools-info-close-button\"\n              onClick={() => {\n                setIsOpen?.(false)\n                setPreviousOpen?.(true)\n              }}\n            >\n              Close\n            </button>\n            <a\n              className=\"dev-tools-info-learn-more-button\"\n              href={learnMoreLink}\n              target=\"_blank\"\n              rel=\"noreferrer noopener\"\n            >\n              Learn More\n            </a>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport const DEV_TOOLS_INFO_STYLES = `\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: 12px;\n  }\n\n  .dev-tools-info-title {\n    padding: 8px 6px;\n    color: var(--color-gray-1000);\n    font-size: var(--size-16);\n    font-weight: 600;\n    line-height: var(--size-20);\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: 8px 6px;\n    color: var(--color-gray-1000);\n    font-size: var(--size-14);\n    line-height: var(--size-20);\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 6px;\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 8px;\n    height: var(--size-28);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 8px;\n    height: var(--size-28);\n    font-size: var(--size-14);\n    font-weight: 500;\n    line-height: var(--size-20);\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n`\n"],"names":["DevToolsInfo","title","children","learnMoreLink","setIsOpen","setPreviousOpen","props","hasActionButtons","Boolean","div","data-info-popover","className","h1","button","onClick","a","href","target","rel","DEV_TOOLS_INFO_STYLES"],"mappings":";AAAA,OAAO,SAASA,aAAa,KAa5B;IAb4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAb4B;IAc3B,MAAMC,mBAAmBC,QACvBL,iBAAiBC,aAAaC;IAGhC,qBACE,KAACI;QAAIC,mBAAiB;QAAE,GAAGJ,KAAK;kBAC9B,cAAA,MAACG;YAAIE,WAAU;;8BACb,KAACC;oBAAGD,WAAU;8BAAwBV;;gBACrCC;gBACAK,kCACC,MAACE;oBAAIE,WAAU;;sCACb,KAACE;4BACCF,WAAU;4BACVG,SAAS;gCACPV,6BAAAA,UAAY;gCACZC,mCAAAA,gBAAkB;4BACpB;sCACD;;sCAGD,KAACU;4BACCJ,WAAU;4BACVK,MAAMb;4BACNc,QAAO;4BACPC,KAAI;sCACL;;;;;;;AAQb;AAEA,OAAO,MAAMC,wBAAyB,w5EAgGrC"}

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.js

@@ -145,6 +145,6 @@ export function RouteInfo(param) {
         })
     });
 }
-export const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = "\n  .dev-tools-info-link {\n  }\n";
+export const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = "";
 
 //# sourceMappingURL=route-info.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\n\nfunction StaticRouteContent({ routerType }: { routerType: 'pages' | 'app' }) {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"static\" since it will be prerendered during the build\n        time.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        With Static Rendering, routes are rendered at build time, or in the\n        background after{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href={\n            routerType === 'pages'\n              ? 'https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration'\n              : `https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration`\n          }\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          data revalidation\n        </a>\n        .\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Static rendering is useful when a route has data that is not\n        personalized to the user and can be known at build time, such as a\n        static blog post or a product page.\n      </p>\n    </article>\n  )\n}\n\nfunction DynamicRouteContent({ routerType }: { routerType: 'pages' | 'app' }) {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"dynamic\" since it will be rendered for each user at{' '}\n        <strong>request time</strong>.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Dynamic rendering is useful when a route has data that is personalized\n        to the user or has information that can only be known at request time,\n        such as cookies or the URL's search params.\n      </p>\n      {routerType === 'pages' ? (\n        <p className=\"dev-tools-info-pagraph\">\n          Exporting the{' '}\n          <a\n            className=\"dev-tools-info-link\"\n            href=\"https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            getServerSideProps\n          </a>{' '}\n          function will opt the route into dynamic rendering. This function will\n          be called by the server on every request.\n        </p>\n      ) : (\n        <p className=\"dev-tools-info-paragraph\">\n          During rendering, if a{' '}\n          <a\n            className=\"dev-tools-info-link\"\n            href=\"https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Dynamic API\n          </a>{' '}\n          or a{' '}\n          <a\n            className=\"dev-tools-info-link\"\n            href=\"https://nextjs.org/docs/app/api-reference/functions/fetch\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            fetch\n          </a>{' '}\n          option of{' '}\n          <code className=\"dev-tools-info-code\">{`{ cache: 'no-store' }`}</code>{' '}\n          is discovered, Next.js will switch to dynamically rendering the whole\n          route.\n        </p>\n      )}\n    </article>\n  )\n}\n\nconst learnMoreLink = {\n  pages: {\n    static:\n      'https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation',\n    dynamic:\n      'https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering',\n  },\n  app: {\n    static:\n      'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default',\n    dynamic:\n      'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering',\n  },\n}\n\nexport function RouteInfo({\n  routeType,\n  routerType,\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  routeType: 'Static' | 'Dynamic'\n  routerType: 'pages' | 'app'\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  const isStaticRoute = routeType === 'Static'\n\n  const learnMore = isStaticRoute\n    ? learnMoreLink[routerType].static\n    : learnMoreLink[routerType].dynamic\n  return (\n    <DevToolsInfo\n      {...props}\n      title={`${routeType} Route`}\n      learnMoreLink={learnMore}\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n    >\n      {isStaticRoute ? (\n        <StaticRouteContent routerType={routerType} />\n      ) : (\n        <DynamicRouteContent routerType={routerType} />\n      )}\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = `\n  .dev-tools-info-link {\n  }\n`\n"],"names":["DevToolsInfo","StaticRouteContent","routerType","article","className","p","code","window","location","pathname","a","href","target","rel","DynamicRouteContent","strong","learnMoreLink","pages","static","dynamic","app","RouteInfo","routeType","isOpen","setIsOpen","setPreviousOpen","props","isStaticRoute","learnMore","title","DEV_TOOLS_INFO_ROUTE_INFO_STYLES"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAE/C,SAASC,mBAAmB,KAA+C;IAA/C,IAAA,EAAEC,UAAU,EAAmC,GAA/C;IAC1B,qBACE,MAACC;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;;;0BAI9E,MAACJ;gBAAED,WAAU;;oBAA2B;oBAErB;kCACjB,KAACM;wBACCN,WAAU;wBACVO,MACET,eAAe,UACX,0GACC;wBAEPU,QAAO;wBACPC,KAAI;kCACL;;oBAEG;;;0BAGN,KAACR;gBAAED,WAAU;0BAA2B;;;;AAO9C;AAEA,SAASU,oBAAoB,KAA+C;IAA/C,IAAA,EAAEZ,UAAU,EAAmC,GAA/C;IAC3B,qBACE,MAACC;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;oBACV;kCAClE,KAACM;kCAAO;;oBAAqB;;;0BAE/B,KAACV;gBAAED,WAAU;0BAA2B;;YAKvCF,eAAe,wBACd,MAACG;gBAAED,WAAU;;oBAAyB;oBACtB;kCACd,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;;+BAKX,MAACR;gBAAED,WAAU;;oBAA2B;oBACf;kCACvB,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACJ;kCACL,KAACH;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACC;kCACV,KAACP;wBAAKF,WAAU;kCAAwB;;oBAA+B;oBAAI;;;;;AAOrF;AAEA,MAAMY,gBAAgB;IACpBC,OAAO;QACLC,QACE;QACFC,SACE;IACJ;IACAC,KAAK;QACHF,QACE;QACFC,SACE;IACJ;AACF;AAEA,OAAO,SAASE,UAAU,KAezB;IAfyB,IAAA,EACxBC,SAAS,EACTpB,UAAU,EACVqB,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OASJ,GAfyB;IAgBxB,MAAMC,gBAAgBL,cAAc;IAEpC,MAAMM,YAAYD,gBACdX,aAAa,CAACd,WAAW,CAACgB,MAAM,GAChCF,aAAa,CAACd,WAAW,CAACiB,OAAO;IACrC,qBACE,KAACnB;QACE,GAAG0B,KAAK;QACTG,OAAO,AAAC,KAAEP,YAAU;QACpBN,eAAeY;QACfJ,WAAWA;QACXC,iBAAiBA;kBAEhBE,8BACC,KAAC1B;YAAmBC,YAAYA;2BAEhC,KAACY;YAAoBZ,YAAYA;;;AAIzC;AAEA,OAAO,MAAM4B,mCAAoC,oCAGhD"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\n\nfunction StaticRouteContent({ routerType }: { routerType: 'pages' | 'app' }) {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"static\" since it will be prerendered during the build\n        time.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        With Static Rendering, routes are rendered at build time, or in the\n        background after{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href={\n            routerType === 'pages'\n              ? 'https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration'\n              : `https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration`\n          }\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          data revalidation\n        </a>\n        .\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Static rendering is useful when a route has data that is not\n        personalized to the user and can be known at build time, such as a\n        static blog post or a product page.\n      </p>\n    </article>\n  )\n}\n\nfunction DynamicRouteContent({ routerType }: { routerType: 'pages' | 'app' }) {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"dynamic\" since it will be rendered for each user at{' '}\n        <strong>request time</strong>.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Dynamic rendering is useful when a route has data that is personalized\n        to the user or has information that can only be known at request time,\n        such as cookies or the URL's search params.\n      </p>\n      {routerType === 'pages' ? (\n        <p className=\"dev-tools-info-pagraph\">\n          Exporting the{' '}\n          <a\n            className=\"dev-tools-info-link\"\n            href=\"https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            getServerSideProps\n          </a>{' '}\n          function will opt the route into dynamic rendering. This function will\n          be called by the server on every request.\n        </p>\n      ) : (\n        <p className=\"dev-tools-info-paragraph\">\n          During rendering, if a{' '}\n          <a\n            className=\"dev-tools-info-link\"\n            href=\"https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Dynamic API\n          </a>{' '}\n          or a{' '}\n          <a\n            className=\"dev-tools-info-link\"\n            href=\"https://nextjs.org/docs/app/api-reference/functions/fetch\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            fetch\n          </a>{' '}\n          option of{' '}\n          <code className=\"dev-tools-info-code\">{`{ cache: 'no-store' }`}</code>{' '}\n          is discovered, Next.js will switch to dynamically rendering the whole\n          route.\n        </p>\n      )}\n    </article>\n  )\n}\n\nconst learnMoreLink = {\n  pages: {\n    static:\n      'https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation',\n    dynamic:\n      'https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering',\n  },\n  app: {\n    static:\n      'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default',\n    dynamic:\n      'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering',\n  },\n}\n\nexport function RouteInfo({\n  routeType,\n  routerType,\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  routeType: 'Static' | 'Dynamic'\n  routerType: 'pages' | 'app'\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  const isStaticRoute = routeType === 'Static'\n\n  const learnMore = isStaticRoute\n    ? learnMoreLink[routerType].static\n    : learnMoreLink[routerType].dynamic\n  return (\n    <DevToolsInfo\n      {...props}\n      title={`${routeType} Route`}\n      learnMoreLink={learnMore}\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n    >\n      {isStaticRoute ? (\n        <StaticRouteContent routerType={routerType} />\n      ) : (\n        <DynamicRouteContent routerType={routerType} />\n      )}\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = ``\n"],"names":["DevToolsInfo","StaticRouteContent","routerType","article","className","p","code","window","location","pathname","a","href","target","rel","DynamicRouteContent","strong","learnMoreLink","pages","static","dynamic","app","RouteInfo","routeType","isOpen","setIsOpen","setPreviousOpen","props","isStaticRoute","learnMore","title","DEV_TOOLS_INFO_ROUTE_INFO_STYLES"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAE/C,SAASC,mBAAmB,KAA+C;IAA/C,IAAA,EAAEC,UAAU,EAAmC,GAA/C;IAC1B,qBACE,MAACC;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;;;0BAI9E,MAACJ;gBAAED,WAAU;;oBAA2B;oBAErB;kCACjB,KAACM;wBACCN,WAAU;wBACVO,MACET,eAAe,UACX,0GACC;wBAEPU,QAAO;wBACPC,KAAI;kCACL;;oBAEG;;;0BAGN,KAACR;gBAAED,WAAU;0BAA2B;;;;AAO9C;AAEA,SAASU,oBAAoB,KAA+C;IAA/C,IAAA,EAAEZ,UAAU,EAAmC,GAA/C;IAC3B,qBACE,MAACC;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;oBACV;kCAClE,KAACM;kCAAO;;oBAAqB;;;0BAE/B,KAACV;gBAAED,WAAU;0BAA2B;;YAKvCF,eAAe,wBACd,MAACG;gBAAED,WAAU;;oBAAyB;oBACtB;kCACd,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;;+BAKX,MAACR;gBAAED,WAAU;;oBAA2B;oBACf;kCACvB,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACJ;kCACL,KAACH;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACC;kCACV,KAACP;wBAAKF,WAAU;kCAAwB;;oBAA+B;oBAAI;;;;;AAOrF;AAEA,MAAMY,gBAAgB;IACpBC,OAAO;QACLC,QACE;QACFC,SACE;IACJ;IACAC,KAAK;QACHF,QACE;QACFC,SACE;IACJ;AACF;AAEA,OAAO,SAASE,UAAU,KAezB;IAfyB,IAAA,EACxBC,SAAS,EACTpB,UAAU,EACVqB,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OASJ,GAfyB;IAgBxB,MAAMC,gBAAgBL,cAAc;IAEpC,MAAMM,YAAYD,gBACdX,aAAa,CAACd,WAAW,CAACgB,MAAM,GAChCF,aAAa,CAACd,WAAW,CAACiB,OAAO;IACrC,qBACE,KAACnB;QACE,GAAG0B,KAAK;QACTG,OAAO,AAAC,KAAEP,YAAU;QACpBN,eAAeY;QACfJ,WAAWA;QACXC,iBAAiBA;kBAEhBE,8BACC,KAAC1B;YAAmBC,YAAYA;2BAEhC,KAACY;YAAoBZ,YAAYA;;;AAIzC;AAEA,OAAO,MAAM4B,mCAAoC,GAAC"}

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.js

@@ -168,6 +168,6 @@ export function TurbopackInfo(param) {
         ]
     });
 }
-export const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = "\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: 2px 4px;\n    margin: 0;\n    font-size: var(--size-13);\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: 6px;\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: var(--size-12);\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: 8px;\n    top: 8px;\n    padding: 4px;\n    height: var(--size-24);\n    width: var(--size-24);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 16px;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n";
+export const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = "\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-monospace);\n    padding: 2px 4px;\n    margin: 0;\n    font-size: var(--size-13);\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: 6px;\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: 8px;\n    top: 8px;\n    padding: 4px;\n    height: var(--size-24);\n    width: var(--size-24);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 16px;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n";
 
 //# sourceMappingURL=turbopack-info.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { CopyButton } from '../../../copy-button'\n\nexport function TurbopackInfo({\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <DevToolsInfo\n      title=\"Turbopack\"\n      learnMoreLink=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n      {...props}\n    >\n      <article className=\"dev-tools-info-article\">\n        <p className=\"dev-tools-info-paragraph\">\n          Turbopack is an incremental bundler optimized for JavaScript and\n          TypeScript, written in Rust, and built into Next.js. Turbopack can be\n          used in Next.js in both the{' '}\n          <code className=\"dev-tools-info-code\">pages</code> and{' '}\n          <code className=\"dev-tools-info-code\">app</code> directories for\n          faster local development.\n        </p>\n        <p className=\"dev-tools-info-paragraph\">\n          To enable Turbopack, use the{' '}\n          <code className=\"dev-tools-info-code\">--turbopack</code> flag when\n          running the Next.js development server.\n        </p>\n      </article>\n\n      <div className=\"dev-tools-info-code-block-container\">\n        <div className=\"dev-tools-info-code-block\">\n          <CopyButton\n            actionLabel=\"Copy Next.js Turbopack Command\"\n            successLabel=\"Next.js Turbopack Command Copied\"\n            content={'--turbopack'}\n            className=\"dev-tools-info-copy-button\"\n          />\n          <pre className=\"dev-tools-info-code-block-pre\">\n            <code>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'{'}</div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'  '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"scripts\"\n                </span>\n                : {'{'}\n              </div>\n              <div className=\"dev-tools-info-code-block-line dev-tools-info-highlight\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"dev\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next dev --turbopack\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"build\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next build\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"start\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next start\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"lint\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next lint\"\n                </span>\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">{'  }'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'}'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n            </code>\n          </pre>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: 2px 4px;\n    margin: 0;\n    font-size: var(--size-13);\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: 6px;\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: var(--size-12);\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: 8px;\n    top: 8px;\n    padding: 4px;\n    height: var(--size-24);\n    width: var(--size-24);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 16px;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n`\n"],"names":["DevToolsInfo","CopyButton","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","title","learnMoreLink","article","className","p","code","div","actionLabel","successLabel","content","pre","span","DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,UAAU,QAAQ,uBAAsB;AAEjD,OAAO,SAASC,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,MAACN;QACCO,OAAM;QACNC,eAAc;QACdJ,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,MAACG;gBAAQC,WAAU;;kCACjB,MAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,MAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,KAACG;gBAAIH,WAAU;0BACb,cAAA,MAACG;oBAAIH,WAAU;;sCACb,KAACT;4BACCa,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTN,WAAU;;sCAEZ,KAACO;4BAAIP,WAAU;sCACb,cAAA,MAACE;;kDACC,KAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;;;kDAIzD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEA,OAAO,MAAMS,uCAAwC,0hDAgEpD"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { CopyButton } from '../../../copy-button'\n\nexport function TurbopackInfo({\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <DevToolsInfo\n      title=\"Turbopack\"\n      learnMoreLink=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n      {...props}\n    >\n      <article className=\"dev-tools-info-article\">\n        <p className=\"dev-tools-info-paragraph\">\n          Turbopack is an incremental bundler optimized for JavaScript and\n          TypeScript, written in Rust, and built into Next.js. Turbopack can be\n          used in Next.js in both the{' '}\n          <code className=\"dev-tools-info-code\">pages</code> and{' '}\n          <code className=\"dev-tools-info-code\">app</code> directories for\n          faster local development.\n        </p>\n        <p className=\"dev-tools-info-paragraph\">\n          To enable Turbopack, use the{' '}\n          <code className=\"dev-tools-info-code\">--turbopack</code> flag when\n          running the Next.js development server.\n        </p>\n      </article>\n\n      <div className=\"dev-tools-info-code-block-container\">\n        <div className=\"dev-tools-info-code-block\">\n          <CopyButton\n            actionLabel=\"Copy Next.js Turbopack Command\"\n            successLabel=\"Next.js Turbopack Command Copied\"\n            content={'--turbopack'}\n            className=\"dev-tools-info-copy-button\"\n          />\n          <pre className=\"dev-tools-info-code-block-pre\">\n            <code>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'{'}</div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'  '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"scripts\"\n                </span>\n                : {'{'}\n              </div>\n              <div className=\"dev-tools-info-code-block-line dev-tools-info-highlight\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"dev\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next dev --turbopack\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"build\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next build\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"start\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next start\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"lint\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next lint\"\n                </span>\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">{'  }'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'}'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n            </code>\n          </pre>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-monospace);\n    padding: 2px 4px;\n    margin: 0;\n    font-size: var(--size-13);\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: 6px;\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: 8px;\n    top: 8px;\n    padding: 4px;\n    height: var(--size-24);\n    width: var(--size-24);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 16px;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n`\n"],"names":["DevToolsInfo","CopyButton","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","title","learnMoreLink","article","className","p","code","div","actionLabel","successLabel","content","pre","span","DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,UAAU,QAAQ,uBAAsB;AAEjD,OAAO,SAASC,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,MAACN;QACCO,OAAM;QACNC,eAAc;QACdJ,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,MAACG;gBAAQC,WAAU;;kCACjB,MAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,MAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,KAACG;gBAAIH,WAAU;0BACb,cAAA,MAACG;oBAAIH,WAAU;;sCACb,KAACT;4BACCa,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTN,WAAU;;sCAEZ,KAACO;4BAAIP,WAAU;sCACb,cAAA,MAACE;;kDACC,KAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;;;kDAIzD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEA,OAAO,MAAMS,uCAAwC,oiDAgEpD"}