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

package/dist/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":["DevToolsIndicator","state","readyErrorsLength","setIsErrorOverlayOpen","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","useState","useKeyboardShortcut","key","modifiers","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","useRef","buttonRef","isPopoverOpen","setIsPopoverOpen","mounted","rendered","useDelayedRender","enterDelay","exitDelay","useEffect","handleClickOutside","event","current","getBoundingClientRect","clientX","left","right","clientY","top","bottom","handleKeyDown","document","addEventListener","removeEventListener","togglePopover","prev","onIssuesClick","onLogoClick","Toast","data-nextjs-toast","style","boxShadow","zIndex","div","ref","NextLogo","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","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":["DevToolsIndicator","state","errorCount","setIsErrorOverlayOpen","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","useState","useKeyboardShortcut","key","modifiers","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","createContext","menuRef","useRef","triggerRef","isMenuOpen","setIsMenuOpen","selectedIndex","setSelectedIndex","mounted","rendered","useDelayedRender","enterDelay","exitDelay","useFocusTrap","useClickOutside","closeMenu","select","index","all","current","querySelectorAll","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","Toast","data-nextjs-toast","style","boxShadow","zIndex","NextLogo","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","useIsDevBuilding","isDevRendering","useIsDevRendering","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","useContext","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","isMac","navigator","userAgentData","platform","indexOf","kbd","width","padding","useEffect","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/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.js

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

package/dist/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":["MultipleErrors","NoErrors","SingleError","WithStaticIndicator","meta","component","DevToolsIndicator","parameters","layout","decorators","withShadowPortal","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","args","readyErrorsLength","setIsErrorOverlayOpen","console","log"],"mappings":";;;;;;;;;;;;;;;;;;IAyEaA,cAAc;eAAdA;;IAhBAC,QAAQ;eAARA;;IAQAC,WAAW;eAAXA;;IAgBAC,mBAAmB;eAAnBA;;IA7Cb,OAAmB;eAAnB;;;;mCAnCkC;kCACD;AAIjC,MAAMC,OAAuC;IAC3CC,WAAWC,oCAAiB;IAC5BC,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QACVC,kCAAgB;QAChB,wBAAwB;QACxB,CAACC,sBACC,qBAACC;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,qBAACZ;;KAGN;AACH;MAEA,WAAeP;AAGf,gCAAgC;AAChC,MAAMoB,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;AAEO,MAAMtC,WAAkB;IAC7BuC,MAAM;QACJC,mBAAmB;QACnBd;QACAe,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAMxC,cAAqB;IAChCsC,MAAM;QACJC,mBAAmB;QACnBd;QACAe,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAM1C,iBAAwB;IACnCwC,MAAM;QACJC,mBAAmB;QACnBd;QACAe,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAMvC,sBAA6B;IACxCqC,MAAM;QACJC,mBAAmB;QACnBd,OAAO;YACL,GAAGA,KAAK;YACRS,iBAAiB;QACnB;QACAM,uBAAuB;YACrBC,QAAQC,GAAG,CAAC;QACd;IACF;AACF"}
+{"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":["MultipleErrors","NoErrors","SingleError","WithStaticIndicator","meta","component","DevToolsIndicator","parameters","layout","decorators","withShadowPortal","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","args","errorCount","setIsErrorOverlayOpen","console","log"],"mappings":";;;;;;;;;;;;;;;;;;IAyEaA,cAAc;eAAdA;;IAhBAC,QAAQ;eAARA;;IAQAC,WAAW;eAAXA;;IAgBAC,mBAAmB;eAAnBA;;IA7Cb,OAAmB;eAAnB;;;;mCAnCkC;kCACD;AAIjC,MAAMC,OAAuC;IAC3CC,WAAWC,oCAAiB;IAC5BC,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QACVC,kCAAgB;QAChB,wBAAwB;QACxB,CAACC,sBACC,qBAACC;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,qBAACZ;;KAGN;AACH;MAEA,WAAeP;AAGf,gCAAgC;AAChC,MAAMoB,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;AAEO,MAAMtC,WAAkB;IAC7BuC,MAAM;QACJC,YAAY;QACZd;QACAe,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAMxC,cAAqB;IAChCsC,MAAM;QACJC,YAAY;QACZd;QACAe,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAM1C,iBAAwB;IACnCwC,MAAM;QACJC,YAAY;QACZd;QACAe,uBAAuB,KAAO;IAChC;AACF;AAEO,MAAMvC,sBAA6B;IACxCqC,MAAM;QACJC,YAAY;QACZd,OAAO;YACL,GAAGA,KAAK;YACRS,iBAAiB;QACnB;QACAM,uBAAuB;YACrBC,QAAQC,GAAG,CAAC;QACd;IACF;AACF"}

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

@@ -2,8 +2,8 @@ interface Props extends React.ComponentProps<'button'> {
     issueCount: number;
     isDevBuilding: boolean;
     isDevRendering: boolean;
-    onLogoClick: () => void;
-    onIssuesClick: () => void;
+    onTriggerClick: () => void;
+    openErrorOverlay: () => void;
 }
-export declare const NextLogo: ({ issueCount, isDevBuilding, isDevRendering, onLogoClick, onIssuesClick, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NextLogo: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -8,14 +8,16 @@ Object.defineProperty(exports, "NextLogo", {
         return NextLogo;
     }
 });
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _nooptemplate = require("../../../../../../internal/helpers/noop-template");
+const _mergerefs = /*#__PURE__*/ _interop_require_default._(require("../../../../helpers/merge-refs"));
 const _useminimumloadingtimemultiple = require("./use-minimum-loading-time-multiple");
 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;
@@ -23,21 +25,14 @@ function _templateObject() {
     return data;
 }
 const SIZE = 36;
-const NextLogo = (param)=>{
-    let { issueCount, isDevBuilding, isDevRendering, onLogoClick, onIssuesClick, ...props } = param;
+const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, propRef) {
+    let { issueCount, isDevBuilding, isDevRendering, onTriggerClick, openErrorOverlay, ...props } = param;
     const hasError = issueCount > 0;
     const [isErrorExpanded, setIsErrorExpanded] = (0, _react.useState)(hasError);
     const triggerRef = (0, _react.useRef)(null);
     const ref = (0, _react.useRef)(null);
     const width = useMeasureWidth(ref);
     const isLoading = (0, _useminimumloadingtimemultiple.useMinimumLoadingTimeMultiple)(isDevBuilding || isDevRendering);
-    (0, _react.useEffect)(()=>{
-        if (hasError) {
-            setIsErrorExpanded(true);
-        }
-    }, [
-        hasError
-    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         "data-next-badge-root": true,
         style: {
@@ -58,9 +53,9 @@ const NextLogo = (param)=>{
                     ref: ref,
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
-                            ref: triggerRef,
+                            ref: (0, _mergerefs.default)(triggerRef, propRef),
                             "data-next-mark": true,
-                            onClick: onLogoClick,
+                            onClick: onTriggerClick,
                             ...props,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(NextMark, {
                                 isLoading: isLoading
@@ -72,7 +67,7 @@ const NextLogo = (param)=>{
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
                                     "data-issues-open": true,
                                     "aria-label": "Open issues overlay",
-                                    onClick: onIssuesClick,
+                                    onClick: openErrorOverlay,
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                                             "data-issues-count": true,
@@ -104,7 +99,7 @@ const NextLogo = (param)=>{
             })
         ]
     });
-};
+});
 function useMeasureWidth(ref) {
     const [width, setWidth] = (0, _react.useState)(0);
     (0, _react.useEffect)(()=>{

package/dist/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":["NextLogo","SIZE","issueCount","isDevBuilding","isDevRendering","onLogoClick","onIssuesClick","props","hasError","isErrorExpanded","setIsErrorExpanded","useState","triggerRef","useRef","ref","width","useMeasureWidth","isLoading","useMinimumLoadingTimeMultiple","useEffect","div","data-next-badge-root","style","css","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":["NextLogo","SIZE","forwardRef","propRef","issueCount","isDevBuilding","isDevRendering","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","useState","triggerRef","useRef","ref","width","useMeasureWidth","isLoading","useMinimumLoadingTimeMultiple","div","data-next-badge-root","style","css","data-next-badge","data-error","data-error-expanded","button","mergeRefs","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","useEffect","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/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/styles.js

@@ -12,7 +12,7 @@ const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_
 const _nooptemplate = require("../../../helpers/noop-template");
 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/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":["styles","css"],"mappings":";;;;+BAEaA;;;eAAAA;;;;8BAFe;;;;;;;;;;AAErB,MAAMA,aAASC,kBAAG"}
+{"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":["styles","css"],"mappings":";;;;+BAEaA;;;eAAAA;;;;8BAFe;;;;;;;;;;AAErB,MAAMA,aAASC,kBAAG"}

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

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

package/dist/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":["ErrorOverlay","state","readyErrors","isErrorOverlayOpen","setIsErrorOverlayOpen","isTurbopack","process","env","TURBOPACK","rootLayoutMissingTags","length","RootLayoutMissingTagsError","missingTags","versionInfo","buildError","BuildError","message","errors","Errors","debugInfo","hasStaticIndicator","staticIndicator","onClose"],"mappings":";;;;+BAOgBA;;;eAAAA;;;;4BAJW;wBACJ;4CACoB;AAEpC,SAASA,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,qBAACC,sDAA0B;YACzBN,aAAaA;YACbO,aAAaX,MAAMQ,qBAAqB;YACxCI,aAAaZ,MAAMY,WAAW;;IAGpC;IAEA,IAAIZ,MAAMa,UAAU,KAAK,MAAM;QAC7B,qBACE,qBAACC,sBAAU;YACTV,aAAaA;YACbW,SAASf,MAAMa,UAAU;YACzBD,aAAaZ,MAAMY,WAAW;;IAGpC;IAEA,qBAAqB;IACrB,IAAI,CAACZ,MAAMgB,MAAM,CAACP,MAAM,EAAE;QACxB,OAAO;IACT;IAEA,IAAI,CAACP,oBAAoB;QACvB,OAAO;IACT;IAEA,qBACE,qBAACe,cAAM;QACLC,WAAWlB,MAAMkB,SAAS;QAC1BC,oBAAoBnB,MAAMoB,eAAe;QACzChB,aAAaA;QACbY,QAAQhB,MAAMgB,MAAM;QACpBf,aAAaA;QACbW,aAAaZ,MAAMY,WAAW;QAC9BS,SAAS;YACPlB,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":["ErrorOverlay","state","readyErrors","isErrorOverlayOpen","setIsErrorOverlayOpen","isTurbopack","process","env","TURBOPACK","rootLayoutMissingTags","length","RootLayoutMissingTagsError","missingTags","versionInfo","buildError","BuildError","message","Errors","debugInfo","onClose"],"mappings":";;;;+BAOgBA;;;eAAAA;;;;4BAJW;wBACJ;4CACoB;AAEpC,SAASA,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,qBAACC,sDAA0B;YACzBN,aAAaA;YACbO,aAAaX,MAAMQ,qBAAqB;YACxCI,aAAaZ,MAAMY,WAAW;;IAGpC;IAEA,IAAIZ,MAAMa,UAAU,KAAK,MAAM;QAC7B,qBACE,qBAACC,sBAAU;YACTV,aAAaA;YACbW,SAASf,MAAMa,UAAU;YACzBD,aAAaZ,MAAMY,WAAW;;IAGpC;IAEA,qBAAqB;IACrB,IAAI,CAACX,YAAYQ,MAAM,EAAE;QACvB,OAAO;IACT;IAEA,IAAI,CAACP,oBAAoB;QACvB,OAAO;IACT;IAEA,qBACE,qBAACc,cAAM;QACLC,WAAWjB,MAAMiB,SAAS;QAC1Bb,aAAaA;QACbH,aAAaA;QACbW,aAAaZ,MAAMY,WAAW;QAC9BM,SAAS;YACPf,sBAAsB;QACxB;;AAGN"}

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

@@ -1,6 +1,7 @@
 interface ErrorFeedbackProps {
     errorCode: string;
+    className?: string;
 }
-export declare function ErrorFeedback({ errorCode }: ErrorFeedbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorFeedback({ errorCode, className }: ErrorFeedbackProps): import("react/jsx-runtime").JSX.Element;
 export declare const styles: string;
 export {};

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

@@ -36,7 +36,7 @@ function _templateObject() {
     return data;
 }
 function ErrorFeedback(param) {
-    let { errorCode } = param;
+    let { errorCode, className } = param;
     const [votedMap, setVotedMap] = (0, _react.useState)({});
     const voted = votedMap[errorCode];
     const hasVoted = voted !== undefined;
@@ -62,7 +62,7 @@ function ErrorFeedback(param) {
         errorCode
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-        className: "error-feedback",
+        className: "error-feedback" + (className ? " " + className : ''),
         role: "region",
         "aria-label": "Error feedback",
         children: hasVoted ? /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {

package/dist/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":["ErrorFeedback","styles","errorCode","votedMap","setVotedMap","useState","voted","hasVoted","undefined","handleFeedback","useCallback","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","ThumbsUp","aria-hidden","ThumbsDown","css"],"mappings":";;;;;;;;;;;;;;;IAQgBA,aAAa;eAAbA;;IAiEHC,MAAM;eAANA;;;;;uBAzEyB;0BACb;4BACE;8BACC;;;;;;;;;;AAKrB,SAASD,cAAc,KAAiC;IAAjC,IAAA,EAAEE,SAAS,EAAsB,GAAjC;IAC5B,MAAM,CAACC,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAA0B,CAAC;IACnE,MAAMC,QAAQH,QAAQ,CAACD,UAAU;IACjC,MAAMK,WAAWD,UAAUE;IAE3B,MAAMC,iBAAiBC,IAAAA,kBAAW,EAChC,OAAOC;QACL,+FAA+F;QAC/FP,YAAY,CAACQ,OAAU,CAAA;gBACrB,GAAGA,IAAI;gBACP,CAACV,UAAU,EAAES;YACf,CAAA;QAEA,IAAI;YACF,MAAME,WAAW,MAAMC,MACrB,AAAGC,CAAAA,QAAQC,GAAG,CAACC,sBAAsB,IAAI,EAAC,IAAE,8BAA2B,IAAIC,gBACzE;gBACEhB;gBACAS,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;QAACpB;KAAU;IAGb,qBACE,qBAACqB;QAAIC,WAAU;QAAiBC,MAAK;QAASC,cAAW;kBACtDnB,yBACC,qBAACoB;YAAEH,WAAU;YAAwBC,MAAK;YAASG,aAAU;sBAAS;2BAItE;;8BACE,qBAACD;8BAAE;;8BACH,qBAACE;oBACCH,cAAW;oBACXI,SAAS,IAAMrB,eAAe;oBAC9Be,WAAW,AAAC,qBAAkBlB,CAAAA,UAAU,OAAO,UAAU,EAAC;oBAC1DyB,MAAK;8BAEL,cAAA,qBAACC,kBAAQ;wBAACC,eAAY;;;8BAExB,qBAACJ;oBACCH,cAAW;oBACXI,SAAS,IAAMrB,eAAe;oBAC9Be,WAAW,AAAC,qBAAkBlB,CAAAA,UAAU,QAAQ,UAAU,EAAC;oBAC3DyB,MAAK;8BAEL,cAAA,qBAACG,sBAAU;wBAACD,eAAY;;;;;;AAMpC;AAEO,MAAMhC,aAASkC,kBAAG"}
+{"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":["ErrorFeedback","styles","errorCode","className","votedMap","setVotedMap","useState","voted","hasVoted","undefined","handleFeedback","useCallback","wasHelpful","prev","response","fetch","process","env","__NEXT_ROUTER_BASEPATH","URLSearchParams","toString","ok","console","error","div","role","aria-label","p","aria-live","button","onClick","type","ThumbsUp","aria-hidden","ThumbsDown","css"],"mappings":";;;;;;;;;;;;;;;IASgBA,aAAa;eAAbA;;IAqEHC,MAAM;eAANA;;;;;uBA9EyB;0BACb;4BACE;8BACC;;;;;;;;;;AAMrB,SAASD,cAAc,KAA4C;IAA5C,IAAA,EAAEE,SAAS,EAAEC,SAAS,EAAsB,GAA5C;IAC5B,MAAM,CAACC,UAAUC,YAAY,GAAGC,IAAAA,eAAQ,EAA0B,CAAC;IACnE,MAAMC,QAAQH,QAAQ,CAACF,UAAU;IACjC,MAAMM,WAAWD,UAAUE;IAE3B,MAAMC,iBAAiBC,IAAAA,kBAAW,EAChC,OAAOC;QACL,+FAA+F;QAC/FP,YAAY,CAACQ,OAAU,CAAA;gBACrB,GAAGA,IAAI;gBACP,CAACX,UAAU,EAAEU;YACf,CAAA;QAEA,IAAI;YACF,MAAME,WAAW,MAAMC,MACrB,AAAGC,CAAAA,QAAQC,GAAG,CAACC,sBAAsB,IAAI,EAAC,IAAE,8BAA2B,IAAIC,gBACzE;gBACEjB;gBACAU,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;QAACrB;KAAU;IAGb,qBACE,qBAACsB;QACCrB,WAAW,AAAC,mBAAgBA,CAAAA,YAAY,AAAC,MAAGA,YAAc,EAAC;QAC3DsB,MAAK;QACLC,cAAW;kBAEVlB,yBACC,qBAACmB;YAAExB,WAAU;YAAwBsB,MAAK;YAASG,aAAU;sBAAS;2BAItE;;8BACE,qBAACD;8BAAE;;8BACH,qBAACE;oBACCH,cAAW;oBACXI,SAAS,IAAMpB,eAAe;oBAC9BP,WAAW,AAAC,qBAAkBI,CAAAA,UAAU,OAAO,UAAU,EAAC;oBAC1DwB,MAAK;8BAEL,cAAA,qBAACC,kBAAQ;wBAACC,eAAY;;;8BAExB,qBAACJ;oBACCH,cAAW;oBACXI,SAAS,IAAMpB,eAAe;oBAC9BP,WAAW,AAAC,qBAAkBI,CAAAA,UAAU,QAAQ,UAAU,EAAC;oBAC3DwB,MAAK;8BAEL,cAAA,qBAACG,sBAAU;wBAACD,eAAY;;;;;;AAMpC;AAEO,MAAMhC,aAASkC,kBAAG"}

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

@@ -26,7 +26,7 @@ const _errorfeedback = require("./error-feedback/error-feedback");
 const _nooptemplate = require("../../../helpers/noop-template");
 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() {
@@ -44,6 +44,7 @@ function ErrorOverlayFooter(param) {
                 children: footerMessage
             }) : null,
             errorCode ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_errorfeedback.ErrorFeedback, {
+                className: "error-feedback",
                 errorCode: errorCode
             }) : null
         ]

package/dist/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":["ErrorOverlayFooter","styles","errorCode","footerMessage","footer","className","p","ErrorFeedback","css","feedbackStyles"],"mappings":";;;;;;;;;;;;;;;IASgBA,kBAAkB;eAAlBA;;IAcHC,MAAM;eAANA;;;;;+BAvBiB;8BAEF;;;;;;;;;;;AAOrB,SAASD,mBAAmB,KAGT;IAHS,IAAA,EACjCE,SAAS,EACTC,aAAa,EACW,GAHS;IAIjC,qBACE,sBAACC;QAAOC,WAAU;;YACfF,8BACC,qBAACG;gBAAED,WAAU;0BAAgCF;iBAC3C;YACHD,0BAAY,qBAACK,4BAAa;gBAACL,WAAWA;iBAAgB;;;AAG7D;AAEO,MAAMD,aAASO,kBAAG,qBA4BrBC,qBAAc"}
+{"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":["ErrorOverlayFooter","styles","errorCode","footerMessage","footer","className","p","ErrorFeedback","css","feedbackStyles"],"mappings":";;;;;;;;;;;;;;;IASgBA,kBAAkB;eAAlBA;;IAgBHC,MAAM;eAANA;;;;;+BAzBiB;8BAEF;;;;;;;;;;;AAOrB,SAASD,mBAAmB,KAGT;IAHS,IAAA,EACjCE,SAAS,EACTC,aAAa,EACW,GAHS;IAIjC,qBACE,sBAACC;QAAOC,WAAU;;YACfF,8BACC,qBAACG;gBAAED,WAAU;0BAAgCF;iBAC3C;YACHD,0BACC,qBAACK,4BAAa;gBAACF,WAAU;gBAAiBH,WAAWA;iBACnD;;;AAGV;AAEO,MAAMD,aAASO,kBAAG,qBAgCrBC,qBAAc"}

package/dist/client/components/react-dev-overlay/_experimental/internal/container/errors.d.ts

@@ -1,15 +1,12 @@
 import type { DebugInfo } from '../../../types';
 import type { ReadyRuntimeError } from '../helpers/get-error-by-type';
 import type { VersionInfo } from '../../../../../../server/dev/parse-version-info';
-import type { SupportedErrorEvent } from './runtime-error/use-error-hook';
 export type ErrorsProps = {
-    errors: SupportedErrorEvent[];
     readyErrors: ReadyRuntimeError[];
     isTurbopack: boolean;
     versionInfo: VersionInfo;
-    hasStaticIndicator: boolean;
     debugInfo: DebugInfo;
     onClose: () => void;
 };
-export declare function Errors({ errors, readyErrors, debugInfo, versionInfo, isTurbopack, onClose, }: ErrorsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Errors({ readyErrors, debugInfo, versionInfo, isTurbopack, onClose, }: ErrorsProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const styles: string;

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

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