next 15.2.0-canary.28 → 15.2.0-canary.29

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/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 } from 'react'\nimport { Toast } from '../../toast'\nimport { NextLogo } from './internal/next-logo'\nimport { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'\nimport { useIsDevRendering } from './internal/dev-render-indicator'\nimport { useDelayedRender } from './internal/use-delayed-render'\nimport { useKeyboardShortcut } from '../../../hooks/use-keyboard-shortcut'\nimport { MODIFIERS } from '../../../hooks/use-keyboard-shortcut'\n\n// TODO: test a11y\n// TODO: add E2E tests to cover different scenarios\n\nexport function DevToolsIndicator({\n  state,\n  readyErrorsLength,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  readyErrorsLength: number\n  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n}) {\n  const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)\n  // Register `(cmd|ctrl) + .` to show/hide the error indicator.\n  useKeyboardShortcut({\n    key: '.',\n    modifiers: [MODIFIERS.CTRL_CMD],\n    callback: () => {\n      setIsDevToolsIndicatorOpen(!isDevToolsIndicatorOpen)\n      setIsErrorOverlayOpen(!isDevToolsIndicatorOpen)\n    },\n  })\n\n  return (\n    isDevToolsIndicatorOpen && (\n      <DevToolsPopover\n        semver={state.versionInfo.installed}\n        issueCount={readyErrorsLength}\n        isStaticRoute={state.staticIndicator}\n        hide={() => {\n          setIsDevToolsIndicatorOpen(false)\n        }}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n        isTurbopack={!!process.env.TURBOPACK}\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\nconst DevToolsPopover = ({\n  issueCount,\n  isStaticRoute,\n  semver,\n  isTurbopack,\n  hide,\n  setIsErrorOverlayOpen,\n}: {\n  issueCount: number\n  isStaticRoute: boolean\n  semver: string | undefined\n  isTurbopack: boolean\n  hide: () => void\n  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n}) => {\n  const popoverRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLDivElement>(null)\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false)\n\n  const { mounted, rendered } = useDelayedRender(isPopoverOpen, {\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  useEffect(() => {\n    // Close popover when clicking outside of it or its button\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        !(popoverRef.current?.getBoundingClientRect()\n          ? event.clientX >= popoverRef.current.getBoundingClientRect()!.left &&\n            event.clientX <=\n              popoverRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= popoverRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= popoverRef.current.getBoundingClientRect()!.bottom\n          : false) &&\n        !(buttonRef.current?.getBoundingClientRect()\n          ? event.clientX >= buttonRef.current.getBoundingClientRect()!.left &&\n            event.clientX <= buttonRef.current.getBoundingClientRect()!.right &&\n            event.clientY >= buttonRef.current.getBoundingClientRect()!.top &&\n            event.clientY <= buttonRef.current.getBoundingClientRect()!.bottom\n          : false)\n      ) {\n        setIsPopoverOpen(false)\n      }\n    }\n\n    // Close popover when pressing escape\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsPopoverOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [])\n\n  const togglePopover = () => setIsPopoverOpen((prev) => !prev)\n  const onIssuesClick = () =>\n    issueCount > 0 ? setIsErrorOverlayOpen(true) : null\n\n  const onLogoClick = () => {\n    togglePopover()\n    onIssuesClick()\n  }\n\n  return (\n    <Toast\n      data-nextjs-toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n      }}\n    >\n      <div ref={buttonRef}>\n        <NextLogo\n          key={issueCount}\n          issueCount={issueCount}\n          onLogoClick={onLogoClick}\n          onIssuesClick={onIssuesClick}\n          isDevBuilding={useIsDevBuilding()}\n          isDevRendering={useIsDevRendering()}\n          aria-haspopup=\"true\"\n          aria-expanded={isPopoverOpen}\n          aria-controls=\"dev-tools-popover\"\n          data-nextjs-dev-tools-button\n        />\n      </div>\n\n      {mounted && (\n        <div\n          ref={popoverRef}\n          id=\"dev-tools-popover\"\n          role=\"dialog\"\n          aria-labelledby=\"dev-tools-title\"\n          data-nextjs-dev-tools-popover\n          data-rendered={rendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n            } as React.CSSProperties\n          }\n          tabIndex={-1}\n        >\n          <div data-nextjs-dev-tools-content>\n            <div data-nextjs-dev-tools-container>\n              <h2 id=\"dev-tools-title\" style={{ display: 'none' }}>\n                Dev Tools Options\n              </h2>\n\n              <IndicatorRow\n                label=\"Hide Dev Tools\"\n                value={<DevToolsShortcutGroup />}\n                onClick={hide}\n              />\n              <IndicatorRow\n                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n                label=\"Route\"\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n              />\n              <IndicatorRow\n                label=\"Issues\"\n                value={<IssueCount count={issueCount} />}\n                onClick={onIssuesClick}\n              />\n            </div>\n          </div>\n          <div data-nextjs-dev-tools-footer>\n            <div data-nextjs-dev-tools-footer-text>\n              {semver ? (\n                <p data-nextjs-dev-tools-version>Next.js {semver}</p>\n              ) : null}\n\n              <p data-nextjs-dev-tools-version>\n                Turbopack {isTurbopack ? 'enabled' : 'not enabled'}\n              </p>\n            </div>\n          </div>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nconst IndicatorRow = ({\n  label,\n  value,\n  onClick,\n  ...props\n}: {\n  label: string\n  value: React.ReactNode\n  onClick?: () => void\n} & React.HTMLAttributes<HTMLDivElement | HTMLButtonElement>) => {\n  const Wrapper = onClick ? 'button' : 'div'\n  return (\n    <Wrapper data-nextjs-dev-tools-row onClick={onClick} {...props}>\n      <span data-nextjs-dev-tools-row-label>{label}</span>\n      <span data-nextjs-dev-tools-row-value>{value}</span>\n    </Wrapper>\n  )\n}\n\nconst IssueCount = ({ count }: { count: number }) => {\n  return (\n    <span data-nextjs-dev-tools-issue-count data-has-issues={count > 0}>\n      <span data-nextjs-dev-tools-issue-text data-has-issues={count > 0}>\n        {count}\n      </span>\n    </span>\n  )\n}\n\nfunction DevToolsShortcutGroup() {\n  const isMac =\n    // Feature detect for `navigator.userAgentData` which is experimental:\n    // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform\n    'userAgentData' in navigator\n      ? (navigator.userAgentData as any).platform === 'macOS'\n      : // This is the least-bad option to detect the modifier key when using `navigator.platform`:\n        // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples\n        navigator.platform.indexOf('Mac') === 0 ||\n        navigator.platform === 'iPhone'\n\n  return (\n    <span data-nextjs-dev-tools-shortcut-group>\n      {isMac ? <CmdIcon /> : <CtrlIcon />}\n      <DotIcon />\n    </span>\n  )\n}\n\nfunction CmdIcon() {\n  return <span data-nextjs-dev-tools-icon>⌘</span>\n}\n\nfunction CtrlIcon() {\n  return (\n    <span data-nextjs-dev-tools-icon data-nextjs-dev-tools-ctrl-icon>\n      ctrl\n    </span>\n  )\n}\n\nfunction DotIcon() {\n  return <span data-nextjs-dev-tools-icon>.</span>\n}\n"],"names":["useState","useEffect","useRef","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","useKeyboardShortcut","MODIFIERS","DevToolsIndicator","state","readyErrorsLength","setIsErrorOverlayOpen","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","key","modifiers","CTRL_CMD","callback","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","process","env","TURBOPACK","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","popoverRef","buttonRef","isPopoverOpen","setIsPopoverOpen","mounted","rendered","enterDelay","exitDelay","handleClickOutside","event","current","getBoundingClientRect","clientX","left","right","clientY","top","bottom","handleKeyDown","document","addEventListener","removeEventListener","togglePopover","prev","onIssuesClick","onLogoClick","data-nextjs-toast","style","boxShadow","zIndex","div","ref","isDevBuilding","isDevRendering","aria-haspopup","aria-expanded","aria-controls","data-nextjs-dev-tools-button","id","role","aria-labelledby","data-nextjs-dev-tools-popover","data-rendered","tabIndex","data-nextjs-dev-tools-content","data-nextjs-dev-tools-container","h2","display","IndicatorRow","label","value","DevToolsShortcutGroup","onClick","data-nextjs-route-type","IssueCount","count","data-nextjs-dev-tools-footer","data-nextjs-dev-tools-footer-text","p","data-nextjs-dev-tools-version","props","Wrapper","data-nextjs-dev-tools-row","span","data-nextjs-dev-tools-row-label","data-nextjs-dev-tools-row-value","data-nextjs-dev-tools-issue-count","data-has-issues","data-nextjs-dev-tools-issue-text","isMac","navigator","userAgentData","platform","indexOf","data-nextjs-dev-tools-shortcut-group","CmdIcon","CtrlIcon","DotIcon","data-nextjs-dev-tools-icon","data-nextjs-dev-tools-ctrl-icon"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/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 './internal/next-logo'\nimport { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'\nimport { useIsDevRendering } from './internal/dev-render-indicator'\nimport { useDelayedRender } from './internal/use-delayed-render'\nimport { useKeyboardShortcut } from '../../../hooks/use-keyboard-shortcut'\nimport { MODIFIERS } from '../../../hooks/use-keyboard-shortcut'\n\n// TODO: add E2E tests to cover different scenarios\n\nexport function DevToolsIndicator({\n  state,\n  errorCount,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  errorCount: number\n  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n}) {\n  const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)\n  // Register `(cmd|ctrl) + .` to show/hide the error indicator.\n  useKeyboardShortcut({\n    key: '.',\n    modifiers: [MODIFIERS.CTRL_CMD],\n    callback: () => {\n      setIsDevToolsIndicatorOpen(!isDevToolsIndicatorOpen)\n      setIsErrorOverlayOpen(!isDevToolsIndicatorOpen)\n    },\n  })\n\n  return (\n    isDevToolsIndicatorOpen && (\n      <DevToolsPopover\n        semver={state.versionInfo.installed}\n        issueCount={errorCount}\n        isStaticRoute={state.staticIndicator}\n        hide={() => {\n          setIsDevToolsIndicatorOpen(false)\n        }}\n        setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n        isTurbopack={!!process.env.TURBOPACK}\n      />\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  issueCount,\n  isStaticRoute,\n  isTurbopack,\n  hide,\n  setIsErrorOverlayOpen,\n}: {\n  issueCount: number\n  isStaticRoute: boolean\n  semver: string | undefined\n  isTurbopack: boolean\n  hide: () => void\n  setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>\n}) {\n  const menuRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const [isMenuOpen, setIsMenuOpen] = useState(false)\n  const [selectedIndex, setSelectedIndex] = useState(-1)\n\n  const { mounted, rendered } = useDelayedRender(isMenuOpen, {\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  // Features to make the menu accessible\n  useFocusTrap(menuRef, triggerRef, isMenuOpen)\n  useClickOutside(menuRef, triggerRef, isMenuOpen, closeMenu)\n\n  function select(index: number | 'last') {\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(0)\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      setIsMenuOpen(true)\n      // Run on next tick because querying DOM after state change\n      setTimeout(() => {\n        select(0)\n      })\n    }\n\n    // Open with last item focused\n    if (e.key === 'ArrowUp') {\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 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  return (\n    <Toast\n      data-nextjs-toast\n      style={{\n        boxShadow: 'none',\n        zIndex: 2147483647,\n      }}\n    >\n      <NextLogo\n        ref={triggerRef}\n        key={issueCount}\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        issueCount={issueCount}\n        onTriggerClick={onTriggerClick}\n        onKeyDown={onTriggerKeydown}\n        openErrorOverlay={openErrorOverlay}\n        isDevBuilding={useIsDevBuilding()}\n        isDevRendering={useIsDevRendering()}\n      />\n\n      {mounted && (\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=\"menu\"\n          onKeyDown={onMenuKeydown}\n          data-rendered={rendered}\n          style={\n            {\n              '--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,\n              '--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,\n            } as React.CSSProperties\n          }\n        >\n          <Context.Provider\n            value={{\n              closeMenu,\n              selectedIndex,\n              setSelectedIndex,\n            }}\n          >\n            <div className=\"inner\">\n              <MenuItem\n                index={0}\n                label=\"Issues\"\n                value={<IssueCount>{issueCount}</IssueCount>}\n                onClick={openErrorOverlay}\n              />\n              <MenuItem\n                label=\"Route\"\n                value={isStaticRoute ? 'Static' : 'Dynamic'}\n                data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}\n              />\n              {isTurbopack ? (\n                <MenuItem label=\"Turbopack\" value=\"Enabled\" />\n              ) : (\n                <MenuItem\n                  index={1}\n                  label=\"Try Turbopack\"\n                  value={<ExternalIcon />}\n                  href=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n                />\n              )}\n            </div>\n\n            <div className=\"footer\">\n              <MenuItem\n                label=\"Hide Dev Tools\"\n                value={<HideShortcut />}\n                onClick={hide}\n                index={isTurbopack ? 1 : 2}\n              />\n            </div>\n          </Context.Provider>\n        </div>\n      )}\n    </Toast>\n  )\n}\n\nfunction MenuItem({\n  index,\n  label,\n  value,\n  onClick,\n  href,\n  ...props\n}: {\n  index?: number\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=\"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=\"label\">{label}</span>\n      <span className=\"value\">{value}</span>\n    </div>\n  )\n}\n\nfunction IssueCount({ children }: { children: number }) {\n  return (\n    <span className=\"issueCount\" data-has-issues={children > 0}>\n      <span className=\"indicator\" />\n      {children}\n    </span>\n  )\n}\n\nfunction HideShortcut() {\n  const isMac =\n    // Feature detect for `navigator.userAgentData` which is experimental:\n    // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform\n    'userAgentData' in navigator\n      ? (navigator.userAgentData as any).platform === 'macOS'\n      : // This is the least-bad option to detect the modifier key when using `navigator.platform`:\n        // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples\n        navigator.platform.indexOf('Mac') === 0 ||\n        navigator.platform === 'iPhone'\n\n  return (\n    <span className=\"shortcut\">\n      {isMac ? (\n        <kbd aria-label=\"Command\">⌘</kbd>\n      ) : (\n        <kbd\n          aria-label=\"Control\"\n          style={{ width: 'fit-content', padding: '0 4px' }}\n        >\n          Ctrl\n        </kbd>\n      )}\n      <kbd>.</kbd>\n    </span>\n  )\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useFocusTrap(\n  menuRef: React.RefObject<HTMLDivElement | null>,\n  triggerRef: React.RefObject<HTMLButtonElement | null>,\n  isMenuOpen: boolean\n) {\n  useEffect(() => {\n    if (isMenuOpen) {\n      menuRef.current?.focus()\n    } else {\n      triggerRef.current?.focus()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isMenuOpen])\n}\n\n//////////////////////////////////////////////////////////////////////////////////////\n\nfunction useClickOutside(\n  menuRef: React.RefObject<HTMLDivElement | 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\nfunction ExternalIcon() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      role=\"img\"\n      aria-label=\"External link\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M13.5 10.25V13.25C13.5 13.3881 13.3881 13.5 13.25 13.5H2.75C2.61193 13.5 2.5 13.3881 2.5 13.25L2.5 2.75C2.5 2.61193 2.61193 2.5 2.75 2.5H5.75H6.5V1H5.75H2.75C1.7835 1 1 1.7835 1 2.75V13.25C1 14.2165 1.7835 15 2.75 15H13.25C14.2165 15 15 14.2165 15 13.25V10.25V9.5H13.5V10.25ZM9 1H9.75H14.2495C14.6637 1 14.9995 1.33579 14.9995 1.75V6.25V7H13.4995V6.25V3.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L12.4388 2.5H9.75H9V1Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","useKeyboardShortcut","MODIFIERS","DevToolsIndicator","state","errorCount","setIsErrorOverlayOpen","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","key","modifiers","CTRL_CMD","callback","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","process","env","TURBOPACK","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","menuRef","triggerRef","isMenuOpen","setIsMenuOpen","selectedIndex","setSelectedIndex","mounted","rendered","enterDelay","exitDelay","useFocusTrap","useClickOutside","closeMenu","select","index","all","current","querySelectorAll","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","data-nextjs-toast","style","boxShadow","zIndex","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","div","id","role","dir","aria-orientation","tabIndex","className","data-rendered","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ExternalIcon","href","HideShortcut","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","isMac","navigator","userAgentData","platform","indexOf","kbd","width","padding","handleClickOutside","event","getBoundingClientRect","clientX","left","right","clientY","top","bottom","handleKeyDown","document","addEventListener","removeEventListener","svg","height","viewBox","fill","path","fillRule","clipRule","d"],"mappings":"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"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.js

@@ -49,28 +49,28 @@ const state = {
 };
 export const NoErrors = {
     args: {
-        readyErrorsLength: 0,
+        errorCount: 0,
         state,
         setIsErrorOverlayOpen: ()=>{}
     }
 };
 export const SingleError = {
     args: {
-        readyErrorsLength: 1,
+        errorCount: 1,
         state,
         setIsErrorOverlayOpen: ()=>{}
     }
 };
 export const MultipleErrors = {
     args: {
-        readyErrorsLength: 3,
+        errorCount: 3,
         state,
         setIsErrorOverlayOpen: ()=>{}
     }
 };
 export const WithStaticIndicator = {
     args: {
-        readyErrorsLength: 3,
+        errorCount: 3,
         state: {
             ...state,
             staticIndicator: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { DevToolsIndicator } from './dev-tools-indicator'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\nimport type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\nimport type { OverlayState } from '../../../../../shared'\n\nconst meta: Meta<typeof DevToolsIndicator> = {\n  component: DevToolsIndicator,\n  parameters: {\n    layout: 'centered',\n  },\n  decorators: [\n    withShadowPortal,\n    // Test for high z-index\n    (Story) => (\n      <div\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 9999,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          background:\n            'linear-gradient(135deg, rgba(230,240,255,0.8) 0%, rgba(200,220,255,0.6) 100%)',\n        }}\n      >\n        <Story />\n      </div>\n    ),\n  ],\n}\n\nexport default meta\ntype Story = StoryObj<typeof DevToolsIndicator>\n\n// Mock version info for stories\nconst mockVersionInfo: VersionInfo = {\n  installed: '15.1.2',\n  staleness: 'stale-major',\n}\n\nconst state: OverlayState = {\n  nextId: 1,\n  buildError: null,\n  errors: [],\n  refreshState: { type: 'idle' },\n  rootLayoutMissingTags: [],\n  versionInfo: mockVersionInfo,\n  notFound: false,\n  staticIndicator: false,\n  debugInfo: { devtoolsFrontendUrl: undefined },\n}\n\nexport const NoErrors: Story = {\n  args: {\n    readyErrorsLength: 0,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const SingleError: Story = {\n  args: {\n    readyErrorsLength: 1,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const MultipleErrors: Story = {\n  args: {\n    readyErrorsLength: 3,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const WithStaticIndicator: Story = {\n  args: {\n    readyErrorsLength: 3,\n    state: {\n      ...state,\n      staticIndicator: true,\n    },\n    setIsErrorOverlayOpen: () => {\n      console.log('setIsErrorOverlayOpen called')\n    },\n  },\n}\n"],"names":["DevToolsIndicator","withShadowPortal","meta","component","parameters","layout","decorators","Story","div","style","position","top","left","width","height","zIndex","display","alignItems","justifyContent","background","mockVersionInfo","installed","staleness","state","nextId","buildError","errors","refreshState","type","rootLayoutMissingTags","versionInfo","notFound","staticIndicator","debugInfo","devtoolsFrontendUrl","undefined","NoErrors","args","readyErrorsLength","setIsErrorOverlayOpen","SingleError","MultipleErrors","WithStaticIndicator","console","log"],"mappings":";AACA,SAASA,iBAAiB,QAAQ,wBAAuB;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AAIxE,MAAMC,OAAuC;IAC3CC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QACVL;QACA,wBAAwB;QACxB,CAACM,sBACC,KAACC;gBACCC,OAAO;oBACLC,UAAU;oBACVC,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,QAAQ;oBACRC,QAAQ;oBACRC,SAAS;oBACTC,YAAY;oBACZC,gBAAgB;oBAChBC,YACE;gBACJ;0BAEA,cAAA,KAACZ;;KAGN;AACH;AAEA,eAAeL,KAAI;AAGnB,gCAAgC;AAChC,MAAMkB,kBAA+B;IACnCC,WAAW;IACXC,WAAW;AACb;AAEA,MAAMC,QAAsB;IAC1BC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE;IACVC,cAAc;QAAEC,MAAM;IAAO;IAC7BC,uBAAuB,EAAE;IACzBC,aAAaV;IACbW,UAAU;IACVC,iBAAiB;IACjBC,WAAW;QAAEC,qBAAqBC;IAAU;AAC9C;AAEA,OAAO,MAAMC,WAAkB;IAC7BC,MAAM;QACJC,mBAAmB;QACnBf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAMC,cAAqB;IAChCH,MAAM;QACJC,mBAAmB;QACnBf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAME,iBAAwB;IACnCJ,MAAM;QACJC,mBAAmB;QACnBf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAMG,sBAA6B;IACxCL,MAAM;QACJC,mBAAmB;QACnBf,OAAO;YACL,GAAGA,KAAK;YACRS,iBAAiB;QACnB;QACAO,uBAAuB;YACrBI,QAAQC,GAAG,CAAC;QACd;IACF;AACF,EAAC"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { DevToolsIndicator } from './dev-tools-indicator'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\nimport type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\nimport type { OverlayState } from '../../../../../shared'\n\nconst meta: Meta<typeof DevToolsIndicator> = {\n  component: DevToolsIndicator,\n  parameters: {\n    layout: 'centered',\n  },\n  decorators: [\n    withShadowPortal,\n    // Test for high z-index\n    (Story) => (\n      <div\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 9999,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          background:\n            'linear-gradient(135deg, rgba(230,240,255,0.8) 0%, rgba(200,220,255,0.6) 100%)',\n        }}\n      >\n        <Story />\n      </div>\n    ),\n  ],\n}\n\nexport default meta\ntype Story = StoryObj<typeof DevToolsIndicator>\n\n// Mock version info for stories\nconst mockVersionInfo: VersionInfo = {\n  installed: '15.1.2',\n  staleness: 'stale-major',\n}\n\nconst state: OverlayState = {\n  nextId: 1,\n  buildError: null,\n  errors: [],\n  refreshState: { type: 'idle' },\n  rootLayoutMissingTags: [],\n  versionInfo: mockVersionInfo,\n  notFound: false,\n  staticIndicator: false,\n  debugInfo: { devtoolsFrontendUrl: undefined },\n}\n\nexport const NoErrors: Story = {\n  args: {\n    errorCount: 0,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const SingleError: Story = {\n  args: {\n    errorCount: 1,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const MultipleErrors: Story = {\n  args: {\n    errorCount: 3,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const WithStaticIndicator: Story = {\n  args: {\n    errorCount: 3,\n    state: {\n      ...state,\n      staticIndicator: true,\n    },\n    setIsErrorOverlayOpen: () => {\n      console.log('setIsErrorOverlayOpen called')\n    },\n  },\n}\n"],"names":["DevToolsIndicator","withShadowPortal","meta","component","parameters","layout","decorators","Story","div","style","position","top","left","width","height","zIndex","display","alignItems","justifyContent","background","mockVersionInfo","installed","staleness","state","nextId","buildError","errors","refreshState","type","rootLayoutMissingTags","versionInfo","notFound","staticIndicator","debugInfo","devtoolsFrontendUrl","undefined","NoErrors","args","errorCount","setIsErrorOverlayOpen","SingleError","MultipleErrors","WithStaticIndicator","console","log"],"mappings":";AACA,SAASA,iBAAiB,QAAQ,wBAAuB;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AAIxE,MAAMC,OAAuC;IAC3CC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QACVL;QACA,wBAAwB;QACxB,CAACM,sBACC,KAACC;gBACCC,OAAO;oBACLC,UAAU;oBACVC,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,QAAQ;oBACRC,QAAQ;oBACRC,SAAS;oBACTC,YAAY;oBACZC,gBAAgB;oBAChBC,YACE;gBACJ;0BAEA,cAAA,KAACZ;;KAGN;AACH;AAEA,eAAeL,KAAI;AAGnB,gCAAgC;AAChC,MAAMkB,kBAA+B;IACnCC,WAAW;IACXC,WAAW;AACb;AAEA,MAAMC,QAAsB;IAC1BC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE;IACVC,cAAc;QAAEC,MAAM;IAAO;IAC7BC,uBAAuB,EAAE;IACzBC,aAAaV;IACbW,UAAU;IACVC,iBAAiB;IACjBC,WAAW;QAAEC,qBAAqBC;IAAU;AAC9C;AAEA,OAAO,MAAMC,WAAkB;IAC7BC,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAMC,cAAqB;IAChCH,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAME,iBAAwB;IACnCJ,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAMG,sBAA6B;IACxCL,MAAM;QACJC,YAAY;QACZf,OAAO;YACL,GAAGA,KAAK;YACRS,iBAAiB;QACnB;QACAO,uBAAuB;YACrBI,QAAQC,GAAG,CAAC;QACd;IACF;AACF,EAAC"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.js

@@ -1,7 +1,7 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-2: hsla(0, 0%, 100%, 0.23);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale 150ms var(--timing),\n              width var(--duration) var(--timing),\n              box-shadow var(--duration) var(--timing),\n              background 150ms ease;\n\n            &:active:not([data-error='true']) {\n              scale: 0.95;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: 150ms;\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: calc(var(--padding) * 2);\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 8px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:hover {\n              background: var(--color-hover-alpha);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n        "
+        "\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-2: hsla(0, 0%, 100%, 0.23);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale 150ms var(--timing),\n              width var(--duration) var(--timing),\n              box-shadow var(--duration) var(--timing),\n              background 150ms ease;\n\n            &:active[data-error='false'] {\n              scale: 0.95;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: 150ms;\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: calc(var(--padding) * 2);\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 8px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:hover {\n              background: var(--color-hover-alpha);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n        "
     ]);
     _templateObject = function() {
         return data;
@@ -9,25 +9,19 @@ function _templateObject() {
     return data;
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { noop as css } from '../../../../../../internal/helpers/noop-template';
+import mergeRefs from '../../../../helpers/merge-refs';
 import { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple';
 const SIZE = 36;
-export const NextLogo = (param)=>{
-    let { issueCount, isDevBuilding, isDevRendering, onLogoClick, onIssuesClick, ...props } = param;
+export const NextLogo = /*#__PURE__*/ forwardRef(function NextLogo(param, propRef) {
+    let { issueCount, isDevBuilding, isDevRendering, onTriggerClick, openErrorOverlay, ...props } = param;
     const hasError = issueCount > 0;
     const [isErrorExpanded, setIsErrorExpanded] = useState(hasError);
     const triggerRef = useRef(null);
     const ref = useRef(null);
     const width = useMeasureWidth(ref);
     const isLoading = useMinimumLoadingTimeMultiple(isDevBuilding || isDevRendering);
-    useEffect(()=>{
-        if (hasError) {
-            setIsErrorExpanded(true);
-        }
-    }, [
-        hasError
-    ]);
     return /*#__PURE__*/ _jsxs("div", {
         "data-next-badge-root": true,
         style: {
@@ -48,9 +42,9 @@ export const NextLogo = (param)=>{
                     ref: ref,
                     children: [
                         /*#__PURE__*/ _jsx("button", {
-                            ref: triggerRef,
+                            ref: mergeRefs(triggerRef, propRef),
                             "data-next-mark": true,
-                            onClick: onLogoClick,
+                            onClick: onTriggerClick,
                             ...props,
                             children: /*#__PURE__*/ _jsx(NextMark, {
                                 isLoading: isLoading
@@ -62,7 +56,7 @@ export const NextLogo = (param)=>{
                                 /*#__PURE__*/ _jsxs("button", {
                                     "data-issues-open": true,
                                     "aria-label": "Open issues overlay",
-                                    onClick: onIssuesClick,
+                                    onClick: openErrorOverlay,
                                     children: [
                                         /*#__PURE__*/ _jsx("span", {
                                             "data-issues-count": true,
@@ -94,7 +88,7 @@ export const NextLogo = (param)=>{
             })
         ]
     });
-};
+});
 function useMeasureWidth(ref) {
     const [width, setWidth] = useState(0);
     useEffect(()=>{

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { noop as css } from '../../../../../../internal/helpers/noop-template'\nimport { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'\n\ninterface Props extends React.ComponentProps<'button'> {\n  issueCount: number\n  isDevBuilding: boolean\n  isDevRendering: boolean\n  onLogoClick: () => void\n  onIssuesClick: () => void\n}\n\nconst SIZE = 36\n\nexport const NextLogo = ({\n  issueCount,\n  isDevBuilding,\n  isDevRendering,\n  onLogoClick,\n  onIssuesClick,\n  ...props\n}: Props) => {\n  const hasError = issueCount > 0\n  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const width = useMeasureWidth(ref)\n  const isLoading = useMinimumLoadingTimeMultiple(\n    isDevBuilding || isDevRendering\n  )\n\n  useEffect(() => {\n    if (hasError) {\n      setIsErrorExpanded(true)\n    }\n  }, [hasError])\n\n  return (\n    <div\n      data-next-badge-root\n      style={\n        {\n          '--size': `${SIZE}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Styles */}\n      <style>\n        {css`\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-2: hsla(0, 0%, 100%, 0.23);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale 150ms var(--timing),\n              width var(--duration) var(--timing),\n              box-shadow var(--duration) var(--timing),\n              background 150ms ease;\n\n            &:active:not([data-error='true']) {\n              scale: 0.95;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: 150ms;\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: calc(var(--padding) * 2);\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 8px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:hover {\n              background: var(--color-hover-alpha);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n        `}\n      </style>\n      <div\n        data-next-badge\n        data-error={hasError}\n        data-error-expanded={isErrorExpanded}\n        style={{\n          width: hasError && width > SIZE ? width : SIZE,\n        }}\n      >\n        <div ref={ref}>\n          {/* Children */}\n          <button\n            ref={triggerRef}\n            data-next-mark\n            onClick={onLogoClick}\n            {...props}\n          >\n            <NextMark isLoading={isLoading} />\n          </button>\n          {isErrorExpanded && (\n            <div data-issues>\n              <button\n                data-issues-open\n                aria-label=\"Open issues overlay\"\n                onClick={onIssuesClick}\n              >\n                <span data-issues-count>{issueCount}</span>{' '}\n                {issueCount === 1 ? 'Issue' : 'Issues'}\n              </button>\n              <button\n                data-issues-collapse\n                aria-label=\"Collapse issues badge\"\n                onClick={() => {\n                  setIsErrorExpanded(false)\n                  // Move focus to the trigger to prevent having it stuck on this element\n                  triggerRef.current?.focus()\n                }}\n              >\n                <Cross />\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n      <div aria-hidden data-dot />\n    </div>\n  )\n}\n\nfunction useMeasureWidth(ref: React.RefObject<HTMLDivElement | null>) {\n  const [width, setWidth] = useState<number>(0)\n\n  useEffect(() => {\n    const el = ref.current\n\n    if (!el) {\n      return\n    }\n\n    const observer = new ResizeObserver(() => {\n      const { width: w } = el.getBoundingClientRect()\n      setWidth(w)\n    })\n\n    observer.observe(el)\n    return () => observer.disconnect()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return width\n}\n\nfunction NextMark({ isLoading }: { isLoading?: boolean }) {\n  return (\n    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\n      <g transform=\"translate(8.5, 13)\">\n        <path\n          className={isLoading ? 'path0' : 'paused'}\n          d=\"M13.3 15.2 L2.34 1 V12.6\"\n          fill=\"none\"\n          stroke=\"url(#paint0_linear_1357_10853)\"\n          strokeWidth=\"1.86\"\n          mask=\"url(#mask0)\"\n          strokeDasharray=\"29.6\"\n          strokeDashoffset=\"29.6\"\n        />\n        <path\n          className={isLoading ? 'path1' : 'paused'}\n          d=\"M11.825 1.5 V13.1\"\n          strokeWidth=\"1.86\"\n          stroke=\"url(#paint1_linear_1357_10853)\"\n          strokeDasharray=\"11.6\"\n          strokeDashoffset=\"11.6\"\n        />\n      </g>\n      <defs>\n        <linearGradient\n          id=\"paint0_linear_1357_10853\"\n          x1=\"9.95555\"\n          y1=\"11.1226\"\n          x2=\"15.4778\"\n          y2=\"17.9671\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"0.604072\" stopColor=\"white\" stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient\n          id=\"paint1_linear_1357_10853\"\n          x1=\"11.8222\"\n          y1=\"1.40039\"\n          x2=\"11.791\"\n          y2=\"9.62542\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <mask id=\"mask0\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n        </mask>\n      </defs>\n    </svg>\n  )\n}\n\nfunction Cross() {\n  return (\n    <svg\n      data-cross\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.08889 11.8384L2.62486 12.3024L1.69678 11.3744L2.16082 10.9103L6.07178 6.99937L2.16082 3.08841L1.69678 2.62437L2.62486 1.69629L3.08889 2.16033L6.99986 6.07129L10.9108 2.16033L11.3749 1.69629L12.3029 2.62437L11.8389 3.08841L7.92793 6.99937L11.8389 10.9103L12.3029 11.3744L11.3749 12.3024L10.9108 11.8384L6.99986 7.92744L3.08889 11.8384Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["useEffect","useRef","useState","noop","css","useMinimumLoadingTimeMultiple","SIZE","NextLogo","issueCount","isDevBuilding","isDevRendering","onLogoClick","onIssuesClick","props","hasError","isErrorExpanded","setIsErrorExpanded","triggerRef","ref","width","useMeasureWidth","isLoading","div","data-next-badge-root","style","data-next-badge","data-error","data-error-expanded","button","data-next-mark","onClick","NextMark","data-issues","data-issues-open","aria-label","span","data-issues-count","data-issues-collapse","current","focus","Cross","aria-hidden","data-dot","setWidth","el","observer","ResizeObserver","w","getBoundingClientRect","observe","disconnect","svg","height","viewBox","fill","g","transform","path","className","d","stroke","strokeWidth","mask","strokeDasharray","strokeDashoffset","defs","linearGradient","id","x1","y1","x2","y2","gradientUnits","stop","stopColor","offset","stopOpacity","rect","data-cross","xmlns","fillRule","clipRule"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { noop as css } from '../../../../../../internal/helpers/noop-template'\nimport mergeRefs from '../../../../helpers/merge-refs'\nimport { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'\n\ninterface Props extends React.ComponentProps<'button'> {\n  issueCount: number\n  isDevBuilding: boolean\n  isDevRendering: boolean\n  onTriggerClick: () => void\n  openErrorOverlay: () => void\n}\n\nconst SIZE = 36\n\nexport const NextLogo = forwardRef(function NextLogo(\n  {\n    issueCount,\n    isDevBuilding,\n    isDevRendering,\n    onTriggerClick,\n    openErrorOverlay,\n    ...props\n  }: Props,\n  propRef: React.Ref<HTMLButtonElement>\n) {\n  const hasError = issueCount > 0\n  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const width = useMeasureWidth(ref)\n  const isLoading = useMinimumLoadingTimeMultiple(\n    isDevBuilding || isDevRendering\n  )\n  return (\n    <div\n      data-next-badge-root\n      style={\n        {\n          '--size': `${SIZE}px`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Styles */}\n      <style>\n        {css`\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-2: hsla(0, 0%, 100%, 0.23);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale 150ms var(--timing),\n              width var(--duration) var(--timing),\n              box-shadow var(--duration) var(--timing),\n              background 150ms ease;\n\n            &:active[data-error='false'] {\n              scale: 0.95;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: 150ms;\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: calc(var(--padding) * 2);\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 8px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background 150ms ease;\n\n            &:hover {\n              background: var(--color-hover-alpha);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n        `}\n      </style>\n      <div\n        data-next-badge\n        data-error={hasError}\n        data-error-expanded={isErrorExpanded}\n        style={{\n          width: hasError && width > SIZE ? width : SIZE,\n        }}\n      >\n        <div ref={ref}>\n          {/* Children */}\n          <button\n            ref={mergeRefs(triggerRef, propRef)}\n            data-next-mark\n            onClick={onTriggerClick}\n            {...props}\n          >\n            <NextMark isLoading={isLoading} />\n          </button>\n          {isErrorExpanded && (\n            <div data-issues>\n              <button\n                data-issues-open\n                aria-label=\"Open issues overlay\"\n                onClick={openErrorOverlay}\n              >\n                <span data-issues-count>{issueCount}</span>{' '}\n                {issueCount === 1 ? 'Issue' : 'Issues'}\n              </button>\n              <button\n                data-issues-collapse\n                aria-label=\"Collapse issues badge\"\n                onClick={() => {\n                  setIsErrorExpanded(false)\n                  // Move focus to the trigger to prevent having it stuck on this element\n                  triggerRef.current?.focus()\n                }}\n              >\n                <Cross />\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n      <div aria-hidden data-dot />\n    </div>\n  )\n})\n\nfunction useMeasureWidth(ref: React.RefObject<HTMLDivElement | null>) {\n  const [width, setWidth] = useState<number>(0)\n\n  useEffect(() => {\n    const el = ref.current\n\n    if (!el) {\n      return\n    }\n\n    const observer = new ResizeObserver(() => {\n      const { width: w } = el.getBoundingClientRect()\n      setWidth(w)\n    })\n\n    observer.observe(el)\n    return () => observer.disconnect()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return width\n}\n\nfunction NextMark({ isLoading }: { isLoading?: boolean }) {\n  return (\n    <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\n      <g transform=\"translate(8.5, 13)\">\n        <path\n          className={isLoading ? 'path0' : 'paused'}\n          d=\"M13.3 15.2 L2.34 1 V12.6\"\n          fill=\"none\"\n          stroke=\"url(#paint0_linear_1357_10853)\"\n          strokeWidth=\"1.86\"\n          mask=\"url(#mask0)\"\n          strokeDasharray=\"29.6\"\n          strokeDashoffset=\"29.6\"\n        />\n        <path\n          className={isLoading ? 'path1' : 'paused'}\n          d=\"M11.825 1.5 V13.1\"\n          strokeWidth=\"1.86\"\n          stroke=\"url(#paint1_linear_1357_10853)\"\n          strokeDasharray=\"11.6\"\n          strokeDashoffset=\"11.6\"\n        />\n      </g>\n      <defs>\n        <linearGradient\n          id=\"paint0_linear_1357_10853\"\n          x1=\"9.95555\"\n          y1=\"11.1226\"\n          x2=\"15.4778\"\n          y2=\"17.9671\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"0.604072\" stopColor=\"white\" stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient\n          id=\"paint1_linear_1357_10853\"\n          x1=\"11.8222\"\n          y1=\"1.40039\"\n          x2=\"11.791\"\n          y2=\"9.62542\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <mask id=\"mask0\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n        </mask>\n      </defs>\n    </svg>\n  )\n}\n\nfunction Cross() {\n  return (\n    <svg\n      data-cross\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.08889 11.8384L2.62486 12.3024L1.69678 11.3744L2.16082 10.9103L6.07178 6.99937L2.16082 3.08841L1.69678 2.62437L2.62486 1.69629L3.08889 2.16033L6.99986 6.07129L10.9108 2.16033L11.3749 1.69629L12.3029 2.62437L11.8389 3.08841L7.92793 6.99937L11.8389 10.9103L12.3029 11.3744L11.3749 12.3024L10.9108 11.8384L6.99986 7.92744L3.08889 11.8384Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["forwardRef","useEffect","useRef","useState","noop","css","mergeRefs","useMinimumLoadingTimeMultiple","SIZE","NextLogo","propRef","issueCount","isDevBuilding","isDevRendering","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","triggerRef","ref","width","useMeasureWidth","isLoading","div","data-next-badge-root","style","data-next-badge","data-error","data-error-expanded","button","data-next-mark","onClick","NextMark","data-issues","data-issues-open","aria-label","span","data-issues-count","data-issues-collapse","current","focus","Cross","aria-hidden","data-dot","setWidth","el","observer","ResizeObserver","w","getBoundingClientRect","observe","disconnect","svg","height","viewBox","fill","g","transform","path","className","d","stroke","strokeWidth","mask","strokeDasharray","strokeDashoffset","defs","linearGradient","id","x1","y1","x2","y2","gradientUnits","stop","stopColor","offset","stopOpacity","rect","data-cross","xmlns","fillRule","clipRule"],"mappings":"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"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/styles.js

@@ -1,7 +1,7 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n  [data-nextjs-toast-wrapper] {\n    border: none;\n  }\n\n  [data-nextjs-dev-tools-button] {\n    border: none;\n    background: none;\n    padding: 0;\n    font-size: var(--size-font);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\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    bottom: calc(100% + var(--size-gap));\n    left: 0;\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\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  [data-nextjs-dev-tools-content] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-footer] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    gap: var(--size-2_5);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-200);\n    width: 100%;\n  }\n\n  [data-nextjs-dev-tools-footer-text] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-2) var(--size-1_5);\n    width: 248px;\n  }\n\n  [data-nextjs-dev-tools-version] {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 11px;\n    line-height: var(--size-4);\n    color: var(--color-gray-900);\n  }\n\n  [data-nextjs-dev-tools-row] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n    gap: var(--size-2);\n    width: 248px;\n    height: 36px;\n    border-radius: var(--rounded-md);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-row]:hover {\n    background-color: var(--color-gray-100);\n  }\n\n  [data-nextjs-dev-tools-row-label] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-row-value] {\n    font-family: var(--font-stack-sans);\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n    padding: 0 var(--size-0_5);\n  }\n\n  [data-nextjs-dev-tools-issue-count] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: var(--size-1);\n    width: var(--size-5);\n    height: var(--size-5);\n    border-radius: var(--rounded-full);\n  }\n\n  [data-nextjs-dev-tools-issue-text] {\n    font-family: var(--font-stack-sans);\n    font-weight: 500;\n    font-size: 11px;\n    line-height: var(--size-4);\n    text-align: center;\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='true'] {\n    background: var(--color-red-300);\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='false'] {\n    background: var(--color-gray-300);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='true'] {\n    color: var(--color-red-900);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='false'] {\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-container] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-shortcut-group] {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--size-1);\n  }\n\n  [data-nextjs-dev-tools-icon] {\n    display: flex;\n    width: var(--size-5);\n    height: var(--size-5);\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-100);\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-smaller);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--size-4);\n  }\n\n  [data-nextjs-dev-tools-ctrl-icon] {\n    width: 100%;\n  }\n"
+        "\n  .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    bottom: calc(100% + var(--size-gap));\n    left: 0;\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    background: var(--color-background-100);\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  .inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .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  .item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .issueCount {\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: 41px;\n    height: 24px;\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: 13px;\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    .indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\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-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n"
     ]);
     _templateObject = function() {
         return data;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/styles.ts"],"sourcesContent":["import { noop as css } from '../../../helpers/noop-template'\n\nexport const styles = css`\n  [data-nextjs-toast-wrapper] {\n    border: none;\n  }\n\n  [data-nextjs-dev-tools-button] {\n    border: none;\n    background: none;\n    padding: 0;\n    font-size: var(--size-font);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\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    bottom: calc(100% + var(--size-gap));\n    left: 0;\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\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  [data-nextjs-dev-tools-content] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-footer] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-1_5);\n    gap: var(--size-2_5);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-200);\n    width: 100%;\n  }\n\n  [data-nextjs-dev-tools-footer-text] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--size-2) var(--size-1_5);\n    width: 248px;\n  }\n\n  [data-nextjs-dev-tools-version] {\n    margin: 0;\n    font-family: var(--font-stack-monospace);\n    font-style: normal;\n    font-weight: 400;\n    font-size: 11px;\n    line-height: var(--size-4);\n    color: var(--color-gray-900);\n  }\n\n  [data-nextjs-dev-tools-row] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n    gap: var(--size-2);\n    width: 248px;\n    height: 36px;\n    border-radius: var(--rounded-md);\n    cursor: pointer;\n  }\n\n  [data-nextjs-dev-tools-row]:hover {\n    background-color: var(--color-gray-100);\n  }\n\n  [data-nextjs-dev-tools-row-label] {\n    font-family: var(--font-stack-sans);\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-row-value] {\n    font-family: var(--font-stack-sans);\n    font-weight: 400;\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n    padding: 0 var(--size-0_5);\n  }\n\n  [data-nextjs-dev-tools-issue-count] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: var(--size-1);\n    width: var(--size-5);\n    height: var(--size-5);\n    border-radius: var(--rounded-full);\n  }\n\n  [data-nextjs-dev-tools-issue-text] {\n    font-family: var(--font-stack-sans);\n    font-weight: 500;\n    font-size: 11px;\n    line-height: var(--size-4);\n    text-align: center;\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='true'] {\n    background: var(--color-red-300);\n  }\n\n  [data-nextjs-dev-tools-issue-count][data-has-issues='false'] {\n    background: var(--color-gray-300);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='true'] {\n    color: var(--color-red-900);\n  }\n\n  [data-nextjs-dev-tools-issue-text][data-has-issues='false'] {\n    color: var(--color-gray-1000);\n  }\n\n  [data-nextjs-dev-tools-container] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n  }\n\n  [data-nextjs-dev-tools-shortcut-group] {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--size-1);\n  }\n\n  [data-nextjs-dev-tools-icon] {\n    display: flex;\n    width: var(--size-5);\n    height: var(--size-5);\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-100);\n    color: var(--color-gray-1000);\n    text-align: center;\n    font-size: var(--size-font-smaller);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--size-4);\n  }\n\n  [data-nextjs-dev-tools-ctrl-icon] {\n    width: 100%;\n  }\n`\n"],"names":["noop","css","styles"],"mappings":";;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,iCAAgC;AAE5D,OAAO,MAAMC,SAASD,uBAmLrB"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/styles.ts"],"sourcesContent":["import { noop as css } from '../../../helpers/noop-template'\n\nexport const styles = css`\n  .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    bottom: calc(100% + var(--size-gap));\n    left: 0;\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    background: var(--color-background-100);\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  .inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 36px;\n    border-radius: 6px;\n    text-decoration: none !important;\n    user-select: none;\n\n    &:focus-visible {\n      outline: 0;\n    }\n  }\n\n  .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  .item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .value {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-900);\n    margin-left: auto;\n  }\n\n  .issueCount {\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: 41px;\n    height: 24px;\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: 13px;\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    .indicator {\n      width: 8px;\n      height: 8px;\n      background: var(--color-primary);\n      box-shadow: 0 0 0 2px var(--color-secondary);\n      border-radius: 50%;\n    }\n  }\n\n  .shortcut {\n    display: flex;\n    gap: var(--size-1);\n\n    kbd {\n      width: var(--size-5);\n      height: var(--size-5);\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-font-smaller);\n      line-height: var(--size-4);\n    }\n  }\n`\n"],"names":["noop","css","styles"],"mappings":";;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,iCAAgC;AAE5D,OAAO,MAAMC,SAASD,uBAiIrB"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.js

@@ -21,7 +21,7 @@ export function ErrorOverlay(param) {
         });
     }
     // No Runtime Errors.
-    if (!state.errors.length) {
+    if (!readyErrors.length) {
         return null;
     }
     if (!isErrorOverlayOpen) {
@@ -29,9 +29,7 @@ export function ErrorOverlay(param) {
     }
     return /*#__PURE__*/ _jsx(Errors, {
         debugInfo: state.debugInfo,
-        hasStaticIndicator: state.staticIndicator,
         isTurbopack: isTurbopack,
-        errors: state.errors,
         readyErrors: readyErrors,
         versionInfo: state.versionInfo,
         onClose: ()=>{

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../../../../shared'\nimport type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'\n\nimport { BuildError } from '../../../container/build-error'\nimport { Errors } from '../../../container/errors'\nimport { RootLayoutMissingTagsError } from '../../../container/root-layout-missing-tags-error'\n\nexport function ErrorOverlay({\n  state,\n  readyErrors,\n  isErrorOverlayOpen,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  readyErrors: ReadyRuntimeError[]\n  isErrorOverlayOpen: boolean\n  setIsErrorOverlayOpen: (value: boolean) => void\n}) {\n  const isTurbopack = !!process.env.TURBOPACK\n\n  if (!!state.rootLayoutMissingTags?.length) {\n    return (\n      <RootLayoutMissingTagsError\n        isTurbopack={isTurbopack}\n        missingTags={state.rootLayoutMissingTags}\n        versionInfo={state.versionInfo}\n      />\n    )\n  }\n\n  if (state.buildError !== null) {\n    return (\n      <BuildError\n        isTurbopack={isTurbopack}\n        message={state.buildError}\n        versionInfo={state.versionInfo}\n      />\n    )\n  }\n\n  // No Runtime Errors.\n  if (!state.errors.length) {\n    return null\n  }\n\n  if (!isErrorOverlayOpen) {\n    return null\n  }\n\n  return (\n    <Errors\n      debugInfo={state.debugInfo}\n      hasStaticIndicator={state.staticIndicator}\n      isTurbopack={isTurbopack}\n      errors={state.errors}\n      readyErrors={readyErrors}\n      versionInfo={state.versionInfo}\n      onClose={() => {\n        setIsErrorOverlayOpen(false)\n      }}\n    />\n  )\n}\n"],"names":["BuildError","Errors","RootLayoutMissingTagsError","ErrorOverlay","state","readyErrors","isErrorOverlayOpen","setIsErrorOverlayOpen","isTurbopack","process","env","TURBOPACK","rootLayoutMissingTags","length","missingTags","versionInfo","buildError","message","errors","debugInfo","hasStaticIndicator","staticIndicator","onClose"],"mappings":";AAGA,SAASA,UAAU,QAAQ,iCAAgC;AAC3D,SAASC,MAAM,QAAQ,4BAA2B;AAClD,SAASC,0BAA0B,QAAQ,oDAAmD;AAE9F,OAAO,SAASC,aAAa,KAU5B;IAV4B,IAAA,EAC3BC,KAAK,EACLC,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EAMtB,GAV4B;QAarBH;IAFN,MAAMI,cAAc,CAAC,CAACC,QAAQC,GAAG,CAACC,SAAS;IAE3C,IAAI,CAAC,GAACP,+BAAAA,MAAMQ,qBAAqB,qBAA3BR,6BAA6BS,MAAM,GAAE;QACzC,qBACE,KAACX;YACCM,aAAaA;YACbM,aAAaV,MAAMQ,qBAAqB;YACxCG,aAAaX,MAAMW,WAAW;;IAGpC;IAEA,IAAIX,MAAMY,UAAU,KAAK,MAAM;QAC7B,qBACE,KAAChB;YACCQ,aAAaA;YACbS,SAASb,MAAMY,UAAU;YACzBD,aAAaX,MAAMW,WAAW;;IAGpC;IAEA,qBAAqB;IACrB,IAAI,CAACX,MAAMc,MAAM,CAACL,MAAM,EAAE;QACxB,OAAO;IACT;IAEA,IAAI,CAACP,oBAAoB;QACvB,OAAO;IACT;IAEA,qBACE,KAACL;QACCkB,WAAWf,MAAMe,SAAS;QAC1BC,oBAAoBhB,MAAMiB,eAAe;QACzCb,aAAaA;QACbU,QAAQd,MAAMc,MAAM;QACpBb,aAAaA;QACbU,aAAaX,MAAMW,WAAW;QAC9BO,SAAS;YACPf,sBAAsB;QACxB;;AAGN"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../../../../shared'\nimport type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'\n\nimport { BuildError } from '../../../container/build-error'\nimport { Errors } from '../../../container/errors'\nimport { RootLayoutMissingTagsError } from '../../../container/root-layout-missing-tags-error'\n\nexport function ErrorOverlay({\n  state,\n  readyErrors,\n  isErrorOverlayOpen,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  readyErrors: ReadyRuntimeError[]\n  isErrorOverlayOpen: boolean\n  setIsErrorOverlayOpen: (value: boolean) => void\n}) {\n  const isTurbopack = !!process.env.TURBOPACK\n\n  if (!!state.rootLayoutMissingTags?.length) {\n    return (\n      <RootLayoutMissingTagsError\n        isTurbopack={isTurbopack}\n        missingTags={state.rootLayoutMissingTags}\n        versionInfo={state.versionInfo}\n      />\n    )\n  }\n\n  if (state.buildError !== null) {\n    return (\n      <BuildError\n        isTurbopack={isTurbopack}\n        message={state.buildError}\n        versionInfo={state.versionInfo}\n      />\n    )\n  }\n\n  // No Runtime Errors.\n  if (!readyErrors.length) {\n    return null\n  }\n\n  if (!isErrorOverlayOpen) {\n    return null\n  }\n\n  return (\n    <Errors\n      debugInfo={state.debugInfo}\n      isTurbopack={isTurbopack}\n      readyErrors={readyErrors}\n      versionInfo={state.versionInfo}\n      onClose={() => {\n        setIsErrorOverlayOpen(false)\n      }}\n    />\n  )\n}\n"],"names":["BuildError","Errors","RootLayoutMissingTagsError","ErrorOverlay","state","readyErrors","isErrorOverlayOpen","setIsErrorOverlayOpen","isTurbopack","process","env","TURBOPACK","rootLayoutMissingTags","length","missingTags","versionInfo","buildError","message","debugInfo","onClose"],"mappings":";AAGA,SAASA,UAAU,QAAQ,iCAAgC;AAC3D,SAASC,MAAM,QAAQ,4BAA2B;AAClD,SAASC,0BAA0B,QAAQ,oDAAmD;AAE9F,OAAO,SAASC,aAAa,KAU5B;IAV4B,IAAA,EAC3BC,KAAK,EACLC,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EAMtB,GAV4B;QAarBH;IAFN,MAAMI,cAAc,CAAC,CAACC,QAAQC,GAAG,CAACC,SAAS;IAE3C,IAAI,CAAC,GAACP,+BAAAA,MAAMQ,qBAAqB,qBAA3BR,6BAA6BS,MAAM,GAAE;QACzC,qBACE,KAACX;YACCM,aAAaA;YACbM,aAAaV,MAAMQ,qBAAqB;YACxCG,aAAaX,MAAMW,WAAW;;IAGpC;IAEA,IAAIX,MAAMY,UAAU,KAAK,MAAM;QAC7B,qBACE,KAAChB;YACCQ,aAAaA;YACbS,SAASb,MAAMY,UAAU;YACzBD,aAAaX,MAAMW,WAAW;;IAGpC;IAEA,qBAAqB;IACrB,IAAI,CAACV,YAAYQ,MAAM,EAAE;QACvB,OAAO;IACT;IAEA,IAAI,CAACP,oBAAoB;QACvB,OAAO;IACT;IAEA,qBACE,KAACL;QACCiB,WAAWd,MAAMc,SAAS;QAC1BV,aAAaA;QACbH,aAAaA;QACbU,aAAaX,MAAMW,WAAW;QAC9BI,SAAS;YACPZ,sBAAsB;QACxB;;AAGN"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.js

@@ -14,7 +14,7 @@ import { ThumbsUp } from '../../../../icons/thumbs/thumbs-up';
 import { ThumbsDown } from '../../../../icons/thumbs/thumbs-down';
 import { noop as css } from '../../../../helpers/noop-template';
 export function ErrorFeedback(param) {
-    let { errorCode } = param;
+    let { errorCode, className } = param;
     const [votedMap, setVotedMap] = useState({});
     const voted = votedMap[errorCode];
     const hasVoted = voted !== undefined;
@@ -40,7 +40,7 @@ export function ErrorFeedback(param) {
         errorCode
     ]);
     return /*#__PURE__*/ _jsx("div", {
-        className: "error-feedback",
+        className: "error-feedback" + (className ? " " + className : ''),
         role: "region",
         "aria-label": "Error feedback",
         children: hasVoted ? /*#__PURE__*/ _jsx("p", {

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx"],"sourcesContent":["import { useState, useCallback } from 'react'\nimport { ThumbsUp } from '../../../../icons/thumbs/thumbs-up'\nimport { ThumbsDown } from '../../../../icons/thumbs/thumbs-down'\nimport { noop as css } from '../../../../helpers/noop-template'\n\ninterface ErrorFeedbackProps {\n  errorCode: string\n}\nexport function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {\n  const [votedMap, setVotedMap] = useState<Record<string, boolean>>({})\n  const voted = votedMap[errorCode]\n  const hasVoted = voted !== undefined\n\n  const handleFeedback = useCallback(\n    async (wasHelpful: boolean) => {\n      // Optimistically set feedback state without loading/error states to keep implementation simple\n      setVotedMap((prev) => ({\n        ...prev,\n        [errorCode]: wasHelpful,\n      }))\n\n      try {\n        const response = await fetch(\n          `${process.env.__NEXT_ROUTER_BASEPATH || ''}/__nextjs_error_feedback?${new URLSearchParams(\n            {\n              errorCode,\n              wasHelpful: wasHelpful.toString(),\n            }\n          )}`\n        )\n\n        if (!response.ok) {\n          // Handle non-2xx HTTP responses here if needed\n          console.error('Failed to record feedback on the server.')\n        }\n      } catch (error) {\n        console.error('Failed to record feedback:', error)\n      }\n    },\n    [errorCode]\n  )\n\n  return (\n    <div className=\"error-feedback\" role=\"region\" aria-label=\"Error feedback\">\n      {hasVoted ? (\n        <p className=\"error-feedback-thanks\" role=\"status\" aria-live=\"polite\">\n          Thanks for your feedback!\n        </p>\n      ) : (\n        <>\n          <p>Was this helpful?</p>\n          <button\n            aria-label=\"Mark as helpful\"\n            onClick={() => handleFeedback(true)}\n            className={`feedback-button ${voted === true ? 'voted' : ''}`}\n            type=\"button\"\n          >\n            <ThumbsUp aria-hidden=\"true\" />\n          </button>\n          <button\n            aria-label=\"Mark as not helpful\"\n            onClick={() => handleFeedback(false)}\n            className={`feedback-button ${voted === false ? 'voted' : ''}`}\n            type=\"button\"\n          >\n            <ThumbsDown aria-hidden=\"true\" />\n          </button>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport const styles = css`\n  .error-feedback {\n    display: flex;\n    gap: var(--size-gap);\n    white-space: nowrap;\n  }\n\n  .error-feedback-thanks {\n    height: 1.5rem; /* 24px */\n    display: flex;\n    align-items: center;\n    padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n  }\n\n  .feedback-button {\n    background: none;\n    border: none;\n    border-radius: var(--rounded-md);\n    padding: var(--size-gap-half);\n    width: 1.5rem; /* 24px */\n    height: 1.5rem; /* 24px */\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n\n    &:focus {\n      outline: none;\n    }\n\n    &:hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:active {\n      background: var(--color-gray-alpha-200);\n    }\n  }\n\n  .feedback-button:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  .feedback-button.voted {\n    background: var(--color-gray-alpha-200);\n  }\n\n  .thumbs-up-icon,\n  .thumbs-down-icon {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["useState","useCallback","ThumbsUp","ThumbsDown","noop","css","ErrorFeedback","errorCode","votedMap","setVotedMap","voted","hasVoted","undefined","handleFeedback","wasHelpful","prev","response","fetch","process","env","__NEXT_ROUTER_BASEPATH","URLSearchParams","toString","ok","console","error","div","className","role","aria-label","p","aria-live","button","onClick","type","aria-hidden","styles"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,QAAO;AAC7C,SAASC,QAAQ,QAAQ,qCAAoC;AAC7D,SAASC,UAAU,QAAQ,uCAAsC;AACjE,SAASC,QAAQC,GAAG,QAAQ,oCAAmC;AAK/D,OAAO,SAASC,cAAc,KAAiC;IAAjC,IAAA,EAAEC,SAAS,EAAsB,GAAjC;IAC5B,MAAM,CAACC,UAAUC,YAAY,GAAGT,SAAkC,CAAC;IACnE,MAAMU,QAAQF,QAAQ,CAACD,UAAU;IACjC,MAAMI,WAAWD,UAAUE;IAE3B,MAAMC,iBAAiBZ,YACrB,OAAOa;QACL,+FAA+F;QAC/FL,YAAY,CAACM,OAAU,CAAA;gBACrB,GAAGA,IAAI;gBACP,CAACR,UAAU,EAAEO;YACf,CAAA;QAEA,IAAI;YACF,MAAME,WAAW,MAAMC,MACrB,AAAGC,CAAAA,QAAQC,GAAG,CAACC,sBAAsB,IAAI,EAAC,IAAE,8BAA2B,IAAIC,gBACzE;gBACEd;gBACAO,YAAYA,WAAWQ,QAAQ;YACjC;YAIJ,IAAI,CAACN,SAASO,EAAE,EAAE;gBAChB,+CAA+C;gBAC/CC,QAAQC,KAAK,CAAC;YAChB;QACF,EAAE,OAAOA,OAAO;YACdD,QAAQC,KAAK,CAAC,8BAA8BA;QAC9C;IACF,GACA;QAAClB;KAAU;IAGb,qBACE,KAACmB;QAAIC,WAAU;QAAiBC,MAAK;QAASC,cAAW;kBACtDlB,yBACC,KAACmB;YAAEH,WAAU;YAAwBC,MAAK;YAASG,aAAU;sBAAS;2BAItE;;8BACE,KAACD;8BAAE;;8BACH,KAACE;oBACCH,cAAW;oBACXI,SAAS,IAAMpB,eAAe;oBAC9Bc,WAAW,AAAC,qBAAkBjB,CAAAA,UAAU,OAAO,UAAU,EAAC;oBAC1DwB,MAAK;8BAEL,cAAA,KAAChC;wBAASiC,eAAY;;;8BAExB,KAACH;oBACCH,cAAW;oBACXI,SAAS,IAAMpB,eAAe;oBAC9Bc,WAAW,AAAC,qBAAkBjB,CAAAA,UAAU,QAAQ,UAAU,EAAC;oBAC3DwB,MAAK;8BAEL,cAAA,KAAC/B;wBAAWgC,eAAY;;;;;;AAMpC;AAEA,OAAO,MAAMC,SAAS/B,uBAmDrB"}
+{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx"],"sourcesContent":["import { useState, useCallback } from 'react'\nimport { ThumbsUp } from '../../../../icons/thumbs/thumbs-up'\nimport { ThumbsDown } from '../../../../icons/thumbs/thumbs-down'\nimport { noop as css } from '../../../../helpers/noop-template'\n\ninterface ErrorFeedbackProps {\n  errorCode: string\n  className?: string\n}\nexport function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps) {\n  const [votedMap, setVotedMap] = useState<Record<string, boolean>>({})\n  const voted = votedMap[errorCode]\n  const hasVoted = voted !== undefined\n\n  const handleFeedback = useCallback(\n    async (wasHelpful: boolean) => {\n      // Optimistically set feedback state without loading/error states to keep implementation simple\n      setVotedMap((prev) => ({\n        ...prev,\n        [errorCode]: wasHelpful,\n      }))\n\n      try {\n        const response = await fetch(\n          `${process.env.__NEXT_ROUTER_BASEPATH || ''}/__nextjs_error_feedback?${new URLSearchParams(\n            {\n              errorCode,\n              wasHelpful: wasHelpful.toString(),\n            }\n          )}`\n        )\n\n        if (!response.ok) {\n          // Handle non-2xx HTTP responses here if needed\n          console.error('Failed to record feedback on the server.')\n        }\n      } catch (error) {\n        console.error('Failed to record feedback:', error)\n      }\n    },\n    [errorCode]\n  )\n\n  return (\n    <div\n      className={`error-feedback${className ? ` ${className}` : ''}`}\n      role=\"region\"\n      aria-label=\"Error feedback\"\n    >\n      {hasVoted ? (\n        <p className=\"error-feedback-thanks\" role=\"status\" aria-live=\"polite\">\n          Thanks for your feedback!\n        </p>\n      ) : (\n        <>\n          <p>Was this helpful?</p>\n          <button\n            aria-label=\"Mark as helpful\"\n            onClick={() => handleFeedback(true)}\n            className={`feedback-button ${voted === true ? 'voted' : ''}`}\n            type=\"button\"\n          >\n            <ThumbsUp aria-hidden=\"true\" />\n          </button>\n          <button\n            aria-label=\"Mark as not helpful\"\n            onClick={() => handleFeedback(false)}\n            className={`feedback-button ${voted === false ? 'voted' : ''}`}\n            type=\"button\"\n          >\n            <ThumbsDown aria-hidden=\"true\" />\n          </button>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport const styles = css`\n  .error-feedback {\n    display: flex;\n    gap: var(--size-gap);\n    white-space: nowrap;\n  }\n\n  .error-feedback-thanks {\n    height: 1.5rem; /* 24px */\n    display: flex;\n    align-items: center;\n    padding-right: 4px; /* To match the 4px inner padding of the thumbs up and down icons */\n  }\n\n  .feedback-button {\n    background: none;\n    border: none;\n    border-radius: var(--rounded-md);\n    padding: var(--size-gap-half);\n    width: 1.5rem; /* 24px */\n    height: 1.5rem; /* 24px */\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n\n    &:focus {\n      outline: none;\n    }\n\n    &:hover {\n      background: var(--color-gray-alpha-100);\n    }\n\n    &:active {\n      background: var(--color-gray-alpha-200);\n    }\n  }\n\n  .feedback-button:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  .feedback-button.voted {\n    background: var(--color-gray-alpha-200);\n  }\n\n  .thumbs-up-icon,\n  .thumbs-down-icon {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["useState","useCallback","ThumbsUp","ThumbsDown","noop","css","ErrorFeedback","errorCode","className","votedMap","setVotedMap","voted","hasVoted","undefined","handleFeedback","wasHelpful","prev","response","fetch","process","env","__NEXT_ROUTER_BASEPATH","URLSearchParams","toString","ok","console","error","div","role","aria-label","p","aria-live","button","onClick","type","aria-hidden","styles"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQ,EAAEC,WAAW,QAAQ,QAAO;AAC7C,SAASC,QAAQ,QAAQ,qCAAoC;AAC7D,SAASC,UAAU,QAAQ,uCAAsC;AACjE,SAASC,QAAQC,GAAG,QAAQ,oCAAmC;AAM/D,OAAO,SAASC,cAAc,KAA4C;IAA5C,IAAA,EAAEC,SAAS,EAAEC,SAAS,EAAsB,GAA5C;IAC5B,MAAM,CAACC,UAAUC,YAAY,GAAGV,SAAkC,CAAC;IACnE,MAAMW,QAAQF,QAAQ,CAACF,UAAU;IACjC,MAAMK,WAAWD,UAAUE;IAE3B,MAAMC,iBAAiBb,YACrB,OAAOc;QACL,+FAA+F;QAC/FL,YAAY,CAACM,OAAU,CAAA;gBACrB,GAAGA,IAAI;gBACP,CAACT,UAAU,EAAEQ;YACf,CAAA;QAEA,IAAI;YACF,MAAME,WAAW,MAAMC,MACrB,AAAGC,CAAAA,QAAQC,GAAG,CAACC,sBAAsB,IAAI,EAAC,IAAE,8BAA2B,IAAIC,gBACzE;gBACEf;gBACAQ,YAAYA,WAAWQ,QAAQ;YACjC;YAIJ,IAAI,CAACN,SAASO,EAAE,EAAE;gBAChB,+CAA+C;gBAC/CC,QAAQC,KAAK,CAAC;YAChB;QACF,EAAE,OAAOA,OAAO;YACdD,QAAQC,KAAK,CAAC,8BAA8BA;QAC9C;IACF,GACA;QAACnB;KAAU;IAGb,qBACE,KAACoB;QACCnB,WAAW,AAAC,mBAAgBA,CAAAA,YAAY,AAAC,MAAGA,YAAc,EAAC;QAC3DoB,MAAK;QACLC,cAAW;kBAEVjB,yBACC,KAACkB;YAAEtB,WAAU;YAAwBoB,MAAK;YAASG,aAAU;sBAAS;2BAItE;;8BACE,KAACD;8BAAE;;8BACH,KAACE;oBACCH,cAAW;oBACXI,SAAS,IAAMnB,eAAe;oBAC9BN,WAAW,AAAC,qBAAkBG,CAAAA,UAAU,OAAO,UAAU,EAAC;oBAC1DuB,MAAK;8BAEL,cAAA,KAAChC;wBAASiC,eAAY;;;8BAExB,KAACH;oBACCH,cAAW;oBACXI,SAAS,IAAMnB,eAAe;oBAC9BN,WAAW,AAAC,qBAAkBG,CAAAA,UAAU,QAAQ,UAAU,EAAC;oBAC3DuB,MAAK;8BAEL,cAAA,KAAC/B;wBAAWgC,eAAY;;;;;;AAMpC;AAEA,OAAO,MAAMC,SAAS/B,uBAmDrB"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-overlay-footer.js

@@ -1,7 +1,7 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-overlay-footer p {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: var(--size-font-small);\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  ",
+        "\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-feedback {\n    margin-left: auto;\n  }\n\n  .error-overlay-footer p {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: var(--size-font-small);\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  ",
         "\n"
     ]);
     _templateObject = function() {
@@ -23,6 +23,7 @@ export function ErrorOverlayFooter(param) {
                 children: footerMessage
             }) : null,
             errorCode ? /*#__PURE__*/ _jsx(ErrorFeedback, {
+                className: "error-feedback",
                 errorCode: errorCode
             }) : null
         ]

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-overlay-footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-overlay-footer.tsx"],"sourcesContent":["import { ErrorFeedback } from './error-feedback/error-feedback'\nimport { styles as feedbackStyles } from './error-feedback/error-feedback'\nimport { noop as css } from '../../../helpers/noop-template'\n\nexport type ErrorOverlayFooterProps = {\n  errorCode: string | undefined\n  footerMessage: string | undefined\n}\n\nexport function ErrorOverlayFooter({\n  errorCode,\n  footerMessage,\n}: ErrorOverlayFooterProps) {\n  return (\n    <footer className=\"error-overlay-footer\">\n      {footerMessage ? (\n        <p className=\"error-overlay-footer-message\">{footerMessage}</p>\n      ) : null}\n      {errorCode ? <ErrorFeedback errorCode={errorCode} /> : null}\n    </footer>\n  )\n}\n\nexport const styles = css`\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-overlay-footer p {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: var(--size-font-small);\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  ${feedbackStyles}\n`\n"],"names":["ErrorFeedback","styles","feedbackStyles","noop","css","ErrorOverlayFooter","errorCode","footerMessage","footer","className","p"],"mappings":";;;;;;;;;;;;AAAA,SAASA,aAAa,QAAQ,kCAAiC;AAC/D,SAASC,UAAUC,cAAc,QAAQ,kCAAiC;AAC1E,SAASC,QAAQC,GAAG,QAAQ,iCAAgC;AAO5D,OAAO,SAASC,mBAAmB,KAGT;IAHS,IAAA,EACjCC,SAAS,EACTC,aAAa,EACW,GAHS;IAIjC,qBACE,MAACC;QAAOC,WAAU;;YACfF,8BACC,KAACG;gBAAED,WAAU;0BAAgCF;iBAC3C;YACHD,0BAAY,KAACN;gBAAcM,WAAWA;iBAAgB;;;AAG7D;AAEA,OAAO,MAAML,SAASG,uBA4BlBF,gBACH"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-footer/error-overlay-footer.tsx"],"sourcesContent":["import { ErrorFeedback } from './error-feedback/error-feedback'\nimport { styles as feedbackStyles } from './error-feedback/error-feedback'\nimport { noop as css } from '../../../helpers/noop-template'\n\nexport type ErrorOverlayFooterProps = {\n  errorCode: string | undefined\n  footerMessage: string | undefined\n}\n\nexport function ErrorOverlayFooter({\n  errorCode,\n  footerMessage,\n}: ErrorOverlayFooterProps) {\n  return (\n    <footer className=\"error-overlay-footer\">\n      {footerMessage ? (\n        <p className=\"error-overlay-footer-message\">{footerMessage}</p>\n      ) : null}\n      {errorCode ? (\n        <ErrorFeedback className=\"error-feedback\" errorCode={errorCode} />\n      ) : null}\n    </footer>\n  )\n}\n\nexport const styles = css`\n  .error-overlay-footer {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    gap: var(--size-gap);\n    padding: var(--size-3);\n    background: var(--color-background-200);\n    border-top: 1px solid var(--color-gray-400);\n  }\n\n  .error-feedback {\n    margin-left: auto;\n  }\n\n  .error-overlay-footer p {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n  }\n\n  .error-overlay-footer-message {\n    color: var(--color-gray-900);\n    margin: 0;\n    font-size: var(--size-font-small);\n    font-weight: 400;\n    line-height: var(--size-font-big);\n  }\n\n  ${feedbackStyles}\n`\n"],"names":["ErrorFeedback","styles","feedbackStyles","noop","css","ErrorOverlayFooter","errorCode","footerMessage","footer","className","p"],"mappings":";;;;;;;;;;;;AAAA,SAASA,aAAa,QAAQ,kCAAiC;AAC/D,SAASC,UAAUC,cAAc,QAAQ,kCAAiC;AAC1E,SAASC,QAAQC,GAAG,QAAQ,iCAAgC;AAO5D,OAAO,SAASC,mBAAmB,KAGT;IAHS,IAAA,EACjCC,SAAS,EACTC,aAAa,EACW,GAHS;IAIjC,qBACE,MAACC;QAAOC,WAAU;;YACfF,8BACC,KAACG;gBAAED,WAAU;0BAAgCF;iBAC3C;YACHD,0BACC,KAACN;gBAAcS,WAAU;gBAAiBH,WAAWA;iBACnD;;;AAGV;AAEA,OAAO,MAAML,SAASG,uBAgClBF,gBACH"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/errors.js

@@ -48,7 +48,7 @@ function ErrorDescription(param) {
     });
 }
 export function Errors(param) {
-    let { errors, readyErrors, debugInfo, versionInfo, isTurbopack, onClose } = param;
+    let { readyErrors, debugInfo, versionInfo, isTurbopack, onClose } = param;
     var _activeError_componentStackFrames;
     useEffect(()=>{
         // Close the error overlay when pressing escape
@@ -63,9 +63,8 @@ export function Errors(param) {
         onClose
     ]);
     const isLoading = useMemo(()=>{
-        return readyErrors.length < 1 && Boolean(errors.length);
+        return readyErrors.length < 1;
     }, [
-        errors.length,
         readyErrors.length
     ]);
     const [activeIdx, setActiveIndex] = useState(0);