npm - next - Versions diffs - 15.2.0-canary.70 → 15.2.0-canary.71 - Mend

next 15.2.0-canary.70 → 15.2.0-canary.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of next might be problematic. Click here for more details.

Files changed (285) hide show

package/dist/build/webpack-config.js CHANGED Viewed

@@ -1568,7 +1568,7 @@ async function getBaseWebpackConfig(dir, { buildId, encryptionKey, config, compi
             isClient && new _copyfileplugin.CopyFilePlugin({
                 // file path to build output of `@next/polyfill-nomodule`
                 filePath: require.resolve('./polyfills/polyfill-nomodule'),
-                cacheKey: "15.2.0-canary.70",
+                cacheKey: "15.2.0-canary.71",
                 name: `static/chunks/polyfills${dev ? '' : '-[hash]'}.js`,
                 minimize: false,
                 info: {
@@ -1800,7 +1800,7 @@ async function getBaseWebpackConfig(dir, { buildId, encryptionKey, config, compi
         //  - Next.js location on disk (some loaders use absolute paths and some resolve options depend on absolute paths)
         //  - Next.js version
         //  - next.config.js keys that affect compilation
-        version: `${__dirname}|${"15.2.0-canary.70"}|${configVars}`,
+        version: `${__dirname}|${"15.2.0-canary.71"}|${configVars}`,
         cacheDirectory: _path.default.join(distDir, 'cache', 'webpack'),
         // For production builds, it's more efficient to compress all cache files together instead of compression each one individually.
         // So we disable compression here and allow the build runner to take care of compressing the cache as a whole.

package/dist/client/app-bootstrap.js CHANGED Viewed

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "appBootstrap", {
         return appBootstrap;
     }
 });
-const version = "15.2.0-canary.70";
+const version = "15.2.0-canary.71";
 window.next = {
     version,
     appDir: true

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.d.ts CHANGED Viewed

@@ -5,8 +5,8 @@ export declare function DevToolsIndicator({ state, errorCount, isBuildError, set
     state: OverlayState;
     errorCount: number;
     isBuildError: boolean;
-    setIsErrorOverlayOpen: (isOverlayOpen: boolean) => void;
+    setIsErrorOverlayOpen: (isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)) => void;
     position?: DevToolsIndicatorPosition;
-}): false | import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const DEV_TOOLS_INDICATOR_STYLES = "\n  .dev-tools-indicator-menu {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 248px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-indicator-inner {\n    padding: 6px;\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item {\n    display: flex;\n    align-items: center;\n    padding: 8px 6px;\n    height: 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  .dev-tools-indicator-footer {\n    background: var(--color-background-200);\n    padding: 6px;\n    border-top: 1px solid var(--color-gray-400);\n    width: 100%;\n  }\n\n  .dev-tools-indicator-item[data-selected='true'] {\n    cursor: pointer;\n    background-color: var(--color-gray-200);\n  }\n\n  .dev-tools-indicator-label {\n    font-size: var(--size-font-small);\n    line-height: var(--size-5);\n    color: var(--color-gray-1000);\n  }\n\n  .dev-tools-indicator-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  .dev-tools-indicator-issue-count {\n    --color-primary: var(--color-gray-800);\n    --color-secondary: var(--color-gray-100);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    min-width: 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    .dev-tools-indicator-issue-count-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  .dev-tools-indicator-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";
 export {};

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

@@ -34,18 +34,18 @@ const _stopicon = require("../../../icons/stop-icon");
 const INDICATOR_POSITION = process.env.__NEXT_DEV_INDICATOR_POSITION || 'bottom-left';
 function DevToolsIndicator(param) {
     let { state, errorCount, isBuildError, setIsErrorOverlayOpen, position = INDICATOR_POSITION } = param;
-    const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = (0, _react.useState)(true);
-    return isDevToolsIndicatorOpen && /*#__PURE__*/ (0, _jsxruntime.jsx)(DevToolsPopover, {
+    const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] = (0, _react.useState)(true);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(DevToolsPopover, {
         semver: state.versionInfo.installed,
         issueCount: errorCount,
         isStaticRoute: state.staticIndicator,
         hide: ()=>{
-            setIsDevToolsIndicatorOpen(false);
+            setIsDevToolsIndicatorVisible(false);
         },
         setIsErrorOverlayOpen: setIsErrorOverlayOpen,
         isTurbopack: !!process.env.TURBOPACK,
         position: position,
-        disabled: state.disableDevIndicator,
+        disabled: state.disableDevIndicator || !isDevToolsIndicatorVisible,
         isBuildError: isBuildError
     });
 }
@@ -162,6 +162,9 @@ function DevToolsPopover(param) {
             setIsErrorOverlayOpen(true);
         }
     }
+    function toggleErrorOverlay() {
+        setIsErrorOverlayOpen((prev)=>!prev);
+    }
     function onTriggerClick() {
         setIsMenuOpen((prev)=>!prev);
     }
@@ -202,7 +205,7 @@ function DevToolsPopover(param) {
                 issueCount: issueCount,
                 onTriggerClick: onTriggerClick,
                 onKeyDown: onTriggerKeydown,
-                openErrorOverlay: openErrorOverlay,
+                toggleErrorOverlay: toggleErrorOverlay,
                 isDevBuilding: (0, _initialize.useIsDevBuilding)(),
                 isDevRendering: (0, _devrenderindicator.useIsDevRendering)(),
                 isBuildError: isBuildError

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

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

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ interface Props extends React.ComponentProps<'button'> {
     isDevRendering: boolean;
     isBuildError: boolean;
     onTriggerClick: () => void;
-    openErrorOverlay: () => void;
+    toggleErrorOverlay: () => void;
 }
 export declare const NextLogo: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export declare function Cross(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.js CHANGED Viewed

@@ -75,7 +75,7 @@ const SHORT_DURATION_MS = 150;
     return animatedDep;
 };
 const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, propRef) {
-    let { disabled, issueCount, isDevBuilding, isDevRendering, isBuildError, onTriggerClick, openErrorOverlay, ...props } = param;
+    let { disabled, issueCount, isDevBuilding, isDevRendering, isBuildError, onTriggerClick, toggleErrorOverlay, ...props } = param;
     const hasError = issueCount > 0;
     const [isErrorExpanded, setIsErrorExpanded] = (0, _react.useState)(hasError);
     const newErrorDetected = useAnimated(issueCount, {
@@ -131,7 +131,7 @@ const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, p
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
                                     "data-issues-open": true,
                                     "aria-label": "Open issues overlay",
-                                    onClick: openErrorOverlay,
+                                    onClick: toggleErrorOverlay,
                                     children: [
                                         disabled && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                             "data-disabled-icon": true,

package/dist/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { css } from '../../../../utils/css'\nimport mergeRefs from '../../../utils/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 isBuildError: boolean\n onTriggerClick: () => void\n openErrorOverlay: () => void\n}\n\nconst SIZE = 36\nconst SHORT_DURATION_MS = 150\n\n/*\n A hook that creates an animated state based on changes to a dependency.\n * When the dependency changes and passes the shouldSkip check, it triggers\n * an animation state that lasts for the specified duration.\n \n @param dep The dependency to watch for changes\n * @param config Configuration object containing:\n * - shouldSkip: Function to determine if animation should be skipped\n * - animationDuration: Duration of the animation in milliseconds\n * @returns Boolean indicating if animation is currently active\n /\nconst useAnimated = <T,>(\n dep: T,\n config: { shouldSkip: (dep: T) => boolean; animationDuration: number }\n) => {\n const { shouldSkip: _shouldSkip, animationDuration } = config\n const shouldSkipRef = useRef(_shouldSkip) // ensure stable reference in case it's not\n\n const [animatedDep, setAnimatedDep] = useState(false)\n const isInitialRef = useRef(true)\n\n useEffect(() => {\n if (isInitialRef.current) {\n isInitialRef.current = false\n return\n }\n\n if (shouldSkipRef.current(dep)) {\n return\n }\n\n setAnimatedDep(true)\n const timeoutId = setTimeout(() => {\n setAnimatedDep(false)\n }, animationDuration)\n\n return () => clearTimeout(timeoutId)\n }, [dep, animationDuration])\n\n return animatedDep\n}\n\nexport const NextLogo = forwardRef(function NextLogo(\n {\n disabled,\n issueCount,\n isDevBuilding,\n isDevRendering,\n isBuildError,\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 newErrorDetected = useAnimated(issueCount, {\n shouldSkip: (count) => count === 0,\n animationDuration: SHORT_DURATION_MS,\n })\n\n const triggerRef = useRef<HTMLButtonElement \| null>(null)\n const ref = useRef<HTMLDivElement \| null>(null)\n const width = useMeasureWidth(ref)\n\n const isLoading = useMinimumLoadingTimeMultiple(\n isDevBuilding \|\| isDevRendering\n )\n\n useEffect(() => {\n setIsErrorExpanded(hasError)\n }, [hasError])\n\n return (\n <div\n data-next-badge-root\n style={\n {\n '--size': `${SIZE}px`,\n '--duration-short': `${SHORT_DURATION_MS}ms`,\n // if the indicator is disabled and there are no errors, hide the badge\n display: disabled && !hasError ? 'none' : 'block',\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-long: 250ms;\n --color-outer-border: #171717;\n --color-inner-border: hsla(0, 0%, 100%, 0.14);\n --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);\n --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);\n --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);\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-disabled-icon] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: 4px;\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 var(--duration-short) var(--timing),\n width var(--duration-long) var(--timing),\n box-shadow var(--duration-long) var(--timing),\n background var(--duration-short) ease;\n\n &:active[data-error='false'] {\n scale: 0.95;\n }\n\n &[data-animate='true']:not(:hover) {\n scale: 1.02;\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-error);\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-error-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: var(--duration-short);\n }\n\n [data-issues] {\n display: flex;\n gap: var(--padding);\n align-items: center;\n padding-left: 8px;\n padding-right: ${disabled \|\| isBuildError\n ? '8px'\n : 'calc(var(--padding) * 2)'};\n height: 32px;\n margin: 0 var(--padding);\n border-radius: 9999px;\n transition: background var(--duration-short) ease;\n\n &:has([data-issues-open]:hover) {\n background: var(--color-hover-alpha-error);\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: 2px;\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 var(--duration-short) ease;\n\n &:hover {\n background: var(--color-hover-alpha-error);\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-long) var(--timing);\n\n &:focus-visible {\n outline: 0;\n }\n\n &:hover {\n background: var(--color-hover-alpha-subtle);\n }\n\n svg {\n flex-shrink: 0;\n }\n }\n\n [data-issues-count-animation] {\n display: grid;\n place-items: center center;\n font-variant-numeric: tabular-nums;\n\n &[data-animate='false'] {\n [data-issues-count-exit],\n [data-issues-count-enter] {\n animation-duration: 0ms;\n }\n }\n\n > * {\n grid-area: 1 / 1;\n }\n\n [data-issues-count-exit] {\n animation: fadeOut 300ms var(--timing) forwards;\n }\n\n [data-issues-count-enter] {\n animation: fadeIn 300ms var(--timing) forwards;\n }\n }\n\n [data-issues-count-plural] {\n display: inline-block;\n animation: fadeIn 300ms var(--timing) forwards;\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 fadeIn {\n 0% {\n opacity: 0;\n filter: blur(2px);\n transform: translateY(8px);\n }\n 100% {\n opacity: 1;\n filter: blur(0px);\n transform: translateY(0);\n }\n }\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n filter: blur(0px);\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-12px);\n filter: blur(2px);\n }\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 @media (prefers-reduced-motion) {\n [data-issues-count-exit],\n [data-issues-count-enter],\n [data-issues-count-plural] {\n animation-duration: 0ms !important;\n }\n }\n `}\n </style>\n <div\n data-next-badge\n data-error={hasError}\n data-error-expanded={isErrorExpanded}\n data-animate={newErrorDetected}\n style={{\n width: hasError && width > SIZE ? width : SIZE,\n }}\n >\n <div ref={ref}>\n {/* Children */}\n {!disabled && (\n <button\n ref={mergeRefs(triggerRef, propRef)}\n data-next-mark\n data-next-mark-loading={isLoading}\n onClick={onTriggerClick}\n {...props}\n >\n <NextMark isLoading={isLoading} isDevBuilding={isDevBuilding} />\n </button>\n )}\n {isErrorExpanded && (\n <div data-issues>\n <button\n data-issues-open\n aria-label=\"Open issues overlay\"\n onClick={openErrorOverlay}\n >\n {disabled && (\n <div data-disabled-icon>\n <Warning />\n </div>\n )}\n <AnimateCount\n // Used the key to force a re-render when the count changes.\n key={issueCount}\n animate={newErrorDetected}\n data-issues-count-animation\n >\n {issueCount}\n </AnimateCount>{' '}\n <div>\n Issue\n {issueCount > 1 && (\n <span aria-hidden data-issues-count-plural>\n s\n </span>\n )}\n </div>\n </button>\n {!disabled && !isBuildError && (\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 data-cross />\n </button>\n )}\n </div>\n )}\n </div>\n </div>\n <div aria-hidden data-dot />\n </div>\n )\n})\n\nfunction AnimateCount({\n children: count,\n animate = true,\n ...props\n}: {\n children: number\n animate: boolean\n}) {\n return (\n <div {...props} data-animate={animate}>\n <div aria-hidden data-issues-count-exit>\n {count - 1}\n </div>\n <div data-issues-count data-issues-count-enter>\n {count}\n </div>\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 }, [ref])\n\n return width\n}\n\nfunction NextMark({\n isLoading,\n isDevBuilding,\n}: {\n isLoading?: boolean\n isDevBuilding?: boolean\n}) {\n const strokeColor = isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'\n return (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n data-next-mark-loading={isLoading}\n >\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={strokeColor} />\n <stop offset=\"0.604072\" stopColor={strokeColor} stopOpacity=\"0\" />\n <stop offset=\"1\" stopColor={strokeColor} 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={strokeColor} />\n <stop offset=\"1\" stopColor={strokeColor} 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 Warning() {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3.98071 1.125L1.125 3.98071L1.125 8.01929L3.98071 10.875H8.01929L10.875 8.01929V3.98071L8.01929 1.125H3.98071ZM3.82538 0C3.62647 0 3.4357 0.0790176 3.29505 0.21967L0.21967 3.29505C0.0790176 3.4357 0 3.62647 0 3.82538V8.17462C0 8.37353 0.0790178 8.5643 0.21967 8.70495L3.29505 11.7803C3.4357 11.921 3.62647 12 3.82538 12H8.17462C8.37353 12 8.5643 11.921 8.70495 11.7803L11.7803 8.70495C11.921 8.5643 12 8.37353 12 8.17462V3.82538C12 3.62647 11.921 3.4357 11.7803 3.29505L8.70495 0.21967C8.5643 0.0790177 8.37353 0 8.17462 0H3.82538ZM6.5625 2.8125V3.375V6V6.5625H5.4375V6V3.375V2.8125H6.5625ZM6 9C6.41421 9 6.75 8.66421 6.75 8.25C6.75 7.83579 6.41421 7.5 6 7.5C5.58579 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 5.58579 9 6 9Z\"\n fill=\"#EAEAEA\"\n />\n </svg>\n )\n}\n\nexport function Cross(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\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":["Cross","NextLogo","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","useRef","animatedDep","setAnimatedDep","useState","isInitialRef","useEffect","current","timeoutId","setTimeout","clearTimeout","forwardRef","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","useMinimumLoadingTimeMultiple","div","data-next-badge-root","style","display","css","data-next-badge","data-error","data-error-expanded","data-animate","button","mergeRefs","data-next-mark","data-next-mark-loading","onClick","NextMark","data-issues","data-issues-open","aria-label","data-disabled-icon","Warning","AnimateCount","animate","data-issues-count-animation","span","aria-hidden","data-issues-count-plural","data-issues-collapse","focus","data-cross","data-dot","children","data-issues-count-exit","data-issues-count","data-issues-count-enter","setWidth","el","observer","ResizeObserver","w","getBoundingClientRect","observe","disconnect","strokeColor","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","xmlns","fillRule","clipRule"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { css } from '../../../../utils/css'\nimport mergeRefs from '../../../utils/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 isBuildError: boolean\n onTriggerClick: () => void\n toggleErrorOverlay: () => void\n}\n\nconst SIZE = 36\nconst SHORT_DURATION_MS = 150\n\n/*\n A hook that creates an animated state based on changes to a dependency.\n * When the dependency changes and passes the shouldSkip check, it triggers\n * an animation state that lasts for the specified duration.\n \n @param dep The dependency to watch for changes\n * @param config Configuration object containing:\n * - shouldSkip: Function to determine if animation should be skipped\n * - animationDuration: Duration of the animation in milliseconds\n * @returns Boolean indicating if animation is currently active\n /\nconst useAnimated = <T,>(\n dep: T,\n config: { shouldSkip: (dep: T) => boolean; animationDuration: number }\n) => {\n const { shouldSkip: _shouldSkip, animationDuration } = config\n const shouldSkipRef = useRef(_shouldSkip) // ensure stable reference in case it's not\n\n const [animatedDep, setAnimatedDep] = useState(false)\n const isInitialRef = useRef(true)\n\n useEffect(() => {\n if (isInitialRef.current) {\n isInitialRef.current = false\n return\n }\n\n if (shouldSkipRef.current(dep)) {\n return\n }\n\n setAnimatedDep(true)\n const timeoutId = setTimeout(() => {\n setAnimatedDep(false)\n }, animationDuration)\n\n return () => clearTimeout(timeoutId)\n }, [dep, animationDuration])\n\n return animatedDep\n}\n\nexport const NextLogo = forwardRef(function NextLogo(\n {\n disabled,\n issueCount,\n isDevBuilding,\n isDevRendering,\n isBuildError,\n onTriggerClick,\n toggleErrorOverlay,\n ...props\n }: Props,\n propRef: React.Ref<HTMLButtonElement>\n) {\n const hasError = issueCount > 0\n const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n const newErrorDetected = useAnimated(issueCount, {\n shouldSkip: (count) => count === 0,\n animationDuration: SHORT_DURATION_MS,\n })\n\n const triggerRef = useRef<HTMLButtonElement \| null>(null)\n const ref = useRef<HTMLDivElement \| null>(null)\n const width = useMeasureWidth(ref)\n\n const isLoading = useMinimumLoadingTimeMultiple(\n isDevBuilding \|\| isDevRendering\n )\n\n useEffect(() => {\n setIsErrorExpanded(hasError)\n }, [hasError])\n\n return (\n <div\n data-next-badge-root\n style={\n {\n '--size': `${SIZE}px`,\n '--duration-short': `${SHORT_DURATION_MS}ms`,\n // if the indicator is disabled and there are no errors, hide the badge\n display: disabled && !hasError ? 'none' : 'block',\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-long: 250ms;\n --color-outer-border: #171717;\n --color-inner-border: hsla(0, 0%, 100%, 0.14);\n --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);\n --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);\n --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);\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-disabled-icon] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: 4px;\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 var(--duration-short) var(--timing),\n width var(--duration-long) var(--timing),\n box-shadow var(--duration-long) var(--timing),\n background var(--duration-short) ease;\n\n &:active[data-error='false'] {\n scale: 0.95;\n }\n\n &[data-animate='true']:not(:hover) {\n scale: 1.02;\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-error);\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-error-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: var(--duration-short);\n }\n\n [data-issues] {\n display: flex;\n gap: var(--padding);\n align-items: center;\n padding-left: 8px;\n padding-right: ${disabled \|\| isBuildError\n ? '8px'\n : 'calc(var(--padding) * 2)'};\n height: 32px;\n margin: 0 var(--padding);\n border-radius: 9999px;\n transition: background var(--duration-short) ease;\n\n &:has([data-issues-open]:hover) {\n background: var(--color-hover-alpha-error);\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: 2px;\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 var(--duration-short) ease;\n\n &:hover {\n background: var(--color-hover-alpha-error);\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-long) var(--timing);\n\n &:focus-visible {\n outline: 0;\n }\n\n &:hover {\n background: var(--color-hover-alpha-subtle);\n }\n\n svg {\n flex-shrink: 0;\n }\n }\n\n [data-issues-count-animation] {\n display: grid;\n place-items: center center;\n font-variant-numeric: tabular-nums;\n\n &[data-animate='false'] {\n [data-issues-count-exit],\n [data-issues-count-enter] {\n animation-duration: 0ms;\n }\n }\n\n > * {\n grid-area: 1 / 1;\n }\n\n [data-issues-count-exit] {\n animation: fadeOut 300ms var(--timing) forwards;\n }\n\n [data-issues-count-enter] {\n animation: fadeIn 300ms var(--timing) forwards;\n }\n }\n\n [data-issues-count-plural] {\n display: inline-block;\n animation: fadeIn 300ms var(--timing) forwards;\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 fadeIn {\n 0% {\n opacity: 0;\n filter: blur(2px);\n transform: translateY(8px);\n }\n 100% {\n opacity: 1;\n filter: blur(0px);\n transform: translateY(0);\n }\n }\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n filter: blur(0px);\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-12px);\n filter: blur(2px);\n }\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 @media (prefers-reduced-motion) {\n [data-issues-count-exit],\n [data-issues-count-enter],\n [data-issues-count-plural] {\n animation-duration: 0ms !important;\n }\n }\n `}\n </style>\n <div\n data-next-badge\n data-error={hasError}\n data-error-expanded={isErrorExpanded}\n data-animate={newErrorDetected}\n style={{\n width: hasError && width > SIZE ? width : SIZE,\n }}\n >\n <div ref={ref}>\n {/* Children */}\n {!disabled && (\n <button\n ref={mergeRefs(triggerRef, propRef)}\n data-next-mark\n data-next-mark-loading={isLoading}\n onClick={onTriggerClick}\n {...props}\n >\n <NextMark isLoading={isLoading} isDevBuilding={isDevBuilding} />\n </button>\n )}\n {isErrorExpanded && (\n <div data-issues>\n <button\n data-issues-open\n aria-label=\"Open issues overlay\"\n onClick={toggleErrorOverlay}\n >\n {disabled && (\n <div data-disabled-icon>\n <Warning />\n </div>\n )}\n <AnimateCount\n // Used the key to force a re-render when the count changes.\n key={issueCount}\n animate={newErrorDetected}\n data-issues-count-animation\n >\n {issueCount}\n </AnimateCount>{' '}\n <div>\n Issue\n {issueCount > 1 && (\n <span aria-hidden data-issues-count-plural>\n s\n </span>\n )}\n </div>\n </button>\n {!disabled && !isBuildError && (\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 data-cross />\n </button>\n )}\n </div>\n )}\n </div>\n </div>\n <div aria-hidden data-dot />\n </div>\n )\n})\n\nfunction AnimateCount({\n children: count,\n animate = true,\n ...props\n}: {\n children: number\n animate: boolean\n}) {\n return (\n <div {...props} data-animate={animate}>\n <div aria-hidden data-issues-count-exit>\n {count - 1}\n </div>\n <div data-issues-count data-issues-count-enter>\n {count}\n </div>\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 }, [ref])\n\n return width\n}\n\nfunction NextMark({\n isLoading,\n isDevBuilding,\n}: {\n isLoading?: boolean\n isDevBuilding?: boolean\n}) {\n const strokeColor = isDevBuilding ? 'rgba(255,255,255,0.7)' : 'white'\n return (\n <svg\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n data-next-mark-loading={isLoading}\n >\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={strokeColor} />\n <stop offset=\"0.604072\" stopColor={strokeColor} stopOpacity=\"0\" />\n <stop offset=\"1\" stopColor={strokeColor} 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={strokeColor} />\n <stop offset=\"1\" stopColor={strokeColor} 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 Warning() {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M3.98071 1.125L1.125 3.98071L1.125 8.01929L3.98071 10.875H8.01929L10.875 8.01929V3.98071L8.01929 1.125H3.98071ZM3.82538 0C3.62647 0 3.4357 0.0790176 3.29505 0.21967L0.21967 3.29505C0.0790176 3.4357 0 3.62647 0 3.82538V8.17462C0 8.37353 0.0790178 8.5643 0.21967 8.70495L3.29505 11.7803C3.4357 11.921 3.62647 12 3.82538 12H8.17462C8.37353 12 8.5643 11.921 8.70495 11.7803L11.7803 8.70495C11.921 8.5643 12 8.37353 12 8.17462V3.82538C12 3.62647 11.921 3.4357 11.7803 3.29505L8.70495 0.21967C8.5643 0.0790177 8.37353 0 8.17462 0H3.82538ZM6.5625 2.8125V3.375V6V6.5625H5.4375V6V3.375V2.8125H6.5625ZM6 9C6.41421 9 6.75 8.66421 6.75 8.25C6.75 7.83579 6.41421 7.5 6 7.5C5.58579 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 5.58579 9 6 9Z\"\n fill=\"#EAEAEA\"\n />\n </svg>\n )\n}\n\nexport function Cross(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\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":["Cross","NextLogo","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","useRef","animatedDep","setAnimatedDep","useState","isInitialRef","useEffect","current","timeoutId","setTimeout","clearTimeout","forwardRef","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","toggleErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","useMinimumLoadingTimeMultiple","div","data-next-badge-root","style","display","css","data-next-badge","data-error","data-error-expanded","data-animate","button","mergeRefs","data-next-mark","data-next-mark-loading","onClick","NextMark","data-issues","data-issues-open","aria-label","data-disabled-icon","Warning","AnimateCount","animate","data-issues-count-animation","span","aria-hidden","data-issues-count-plural","data-issues-collapse","focus","data-cross","data-dot","children","data-issues-count-exit","data-issues-count","data-issues-count-enter","setWidth","el","observer","ResizeObserver","w","getBoundingClientRect","observe","disconnect","strokeColor","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","xmlns","fillRule","clipRule"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-export declare function ErrorOverlayBottomStack({ count, activeIdx, }: {
-    count: number;
+export declare function ErrorOverlayBottomStack({ errorCount, activeIdx, }: {
+    errorCount: number;
     activeIdx: number;
 }): import("react/jsx-runtime").JSX.Element;
-export declare const styles = "\n  .layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .layer1 {\n    width: calc(100% - var(--size-6));\n  }\n\n  .layer2 {\n    width: calc(100% - var(--size-12));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .layer1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .layer1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n";
+export declare const styles = "\n  .error-overlay-bottom-stack-layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .error-overlay-bottom-stack-layer-1 {\n    width: calc(100% - var(--size-6));\n  }\n\n  .error-overlay-bottom-stack-layer-2 {\n    width: calc(100% - var(--size-12));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .error-overlay-bottom-stack-stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-bottom-stack-layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .error-overlay-bottom-stack-layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.js CHANGED Viewed

@@ -22,40 +22,29 @@ _export(exports, {
 });
 const _jsxruntime = require("react/jsx-runtime");
 function ErrorOverlayBottomStack(param) {
-    let { count, activeIdx } = param;
-    let stackCount = '0';
-    if (count > 1) {
-        stackCount = '1';
-    }
-    if (count > 2) {
-        stackCount = '2';
-    }
-    if (activeIdx === 1) {
-        stackCount = '1';
-    }
-    if (activeIdx > 1) {
-        stackCount = '0';
-    }
+    let { errorCount, activeIdx } = param;
+    // If there are more than 2 errors to navigate, the stack count should remain at 2.
+    const stackCount = Math.min(errorCount - activeIdx - 1, 2);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         "aria-hidden": true,
         className: "error-overlay-bottom-stack",
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "stack",
+            className: "error-overlay-bottom-stack-stack",
             "data-stack-count": stackCount,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "layer layer1",
+                    className: "error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-1",
                     children: "1"
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "layer layer2",
+                    className: "error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-2",
                     children: "2"
                 })
             ]
         })
     });
 }
-const styles = "\n  .layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .layer1 {\n    width: calc(100% - var(--size-6));\n  }\n\n  .layer2 {\n    width: calc(100% - var(--size-12));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .layer1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .layer1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .layer2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n";
+const styles = "\n  .error-overlay-bottom-stack-layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .error-overlay-bottom-stack-layer-1 {\n    width: calc(100% - var(--size-6));\n  }\n\n  .error-overlay-bottom-stack-layer-2 {\n    width: calc(100% - var(--size-12));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .error-overlay-bottom-stack-stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-bottom-stack-layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .error-overlay-bottom-stack-layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n";
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.tsx"],"sourcesContent":["export function ErrorOverlayBottomStack({\n ~~count~~,\n activeIdx,\n}: {\n ~~count~~: number\n activeIdx: number\n}) {\n ~~let~~ ~~stackCount~~ = ~~'0'\n\n if~~ ~~(count~~ > 1) ~~{\n stackCount~~ = ~~'1'\n }\n\n if~~ (count > 2) ~~{\n stackCount~~ ~~= '~~2'\n ~~}\n\n if~~ ~~(activeIdx === 1) {\n~~ stackCount = ~~'1'\n }\n\n if~~ (activeIdx > 1) {\n ~~stackCount = '0'\n~~ ~~}\n\n~~ return (\n <div aria-hidden className=\"error-overlay-bottom-stack\">\n <div className=\"stack\" data-stack-count={stackCount}>\n <div className=\"layer ~~layer1~~\">1</div>\n <div className=\"layer ~~layer2~~\">2</div>\n </div>\n </div>\n )\n}\n\nexport const styles = `\n .layer {\n width: 100%;\n height: var(--stack-layer-height);\n position: relative;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n background: var(--color-background-200);\n transition:\n translate 350ms var(--timing-swift),\n box-shadow 350ms var(--timing-swift);\n }\n\n .~~layer1~~ {\n width: calc(100% - var(--size-6));\n }\n\n .~~layer2~~ {\n width: calc(100% - var(--size-12));\n z-index: -1;\n }\n\n .error-overlay-bottom-stack {\n width: 100%;\n position: absolute;\n bottom: -1px;\n height: 0;\n overflow: visible;\n }\n\n .stack {\n --stack-layer-height: 44px;\n --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n --stack-layer-trim: 13px;\n --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n 0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n 0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n display: grid;\n place-items: center center;\n width: 100%;\n position: fixed;\n overflow: hidden;\n z-index: -1;\n max-width: var(--next-dialog-max-width);\n\n .layer {\n grid-area: 1 / 1;\n /* Hide /\n translate: 0 calc(var(--stack-layer-height) -1);\n }\n\n &[data-stack-count='1'],\n &[data-stack-count='2'] {\n .~~layer1~~ {\n translate: 0\n calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n }\n }\n\n &[data-stack-count='2'] {\n .~~layer2~~ {\n translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n }\n }\n\n /* Only the bottom stack should have the shadow */\n &[data-stack-count='1'] .~~layer1~~ {\n box-shadow: var(--shadow);\n }\n\n &[data-stack-count='2'] {\n .~~layer2~~ {\n box-shadow: var(--shadow);\n }\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .layer {\n border-color: var(--color-gray-400);\n }\n }\n`\n"],"names":["ErrorOverlayBottomStack","styles","~~count~~","activeIdx","stackCount","div","aria-hidden","className","data-stack-count"],"mappings":";;;;;;;;;;;;;;;IAAgBA,uBAAuB;eAAvBA;;~~IAmCHC~~,MAAM;eAANA;;;;~~AAnCN~~,SAASD,wBAAwB,KAMvC;IANuC,IAAA,EACtCE,~~KAAK~~,~~EACLC~~,SAAS,EAIV,GANuC;IAOtC,~~IAAIC,aAAa~~;~~IAEjB~~,~~IAAIF~~,~~QAAQ~~,~~GAAG;QACbE~~,~~aAAa;IACf;IAEA,IAAIF,QAAQ,~~GAAG~~;QACbE~~,~~aAAa;IACf;IAEA~~,~~IAAID~~,~~cAAc,GAAG;QACnBC,aAAa;IACf;IAEA,IAAID,~~YAAY,GAAG;~~QACjBC~~,~~aAAa;IACf;IAEA,~~qBACE,~~qBAACC~~;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,sBAACF;~~YAAIE~~,WAAU;~~YAAQC~~,~~oBAAkBJ~~;;~~8BACvC~~,~~qBAACC~~;oBAAIE,WAAU;~~8BAAe~~;;~~8BAC9B~~,qBAACF;oBAAIE,WAAU;~~8BAAe~~;;;;;~~AAItC~~;AAEO,~~MAAMN~~,SAAU"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.tsx"],"sourcesContent":["export function ErrorOverlayBottomStack({\n errorCount,\n activeIdx,\n}: {\n errorCount: number\n activeIdx: number\n}) {\n // If there are more than 2 errors to navigate, the stack count should remain at 2.\n const stackCount = Math.min(errorCount - activeIdx - 1, 2)\n return (\n <div aria-hidden className=\"error-overlay-bottom-stack\">\n <div\n className=\"error-overlay-bottom-stack-stack\"\n data-stack-count={stackCount}\n >\n <div className=\"error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-1\">\n 1\n </div>\n <div className=\"error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-2\">\n 2\n </div>\n </div>\n </div>\n )\n}\n\nexport const styles = `\n .error-overlay-bottom-stack-layer {\n width: 100%;\n height: var(--stack-layer-height);\n position: relative;\n border: 1px solid var(--color-gray-400);\n border-radius: var(--rounded-xl);\n background: var(--color-background-200);\n transition:\n translate 350ms var(--timing-swift),\n box-shadow 350ms var(--timing-swift);\n }\n\n .error-overlay-bottom-stack-layer-1 {\n width: calc(100% - var(--size-6));\n }\n\n .error-overlay-bottom-stack-layer-2 {\n width: calc(100% - var(--size-12));\n z-index: -1;\n }\n\n .error-overlay-bottom-stack {\n width: 100%;\n position: absolute;\n bottom: -1px;\n height: 0;\n overflow: visible;\n }\n\n .error-overlay-bottom-stack-stack {\n --stack-layer-height: 44px;\n --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n --stack-layer-trim: 13px;\n --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n 0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n 0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n display: grid;\n place-items: center center;\n width: 100%;\n position: fixed;\n overflow: hidden;\n z-index: -1;\n max-width: var(--next-dialog-max-width);\n\n .error-overlay-bottom-stack-layer {\n grid-area: 1 / 1;\n /* Hide /\n translate: 0 calc(var(--stack-layer-height) -1);\n }\n\n &[data-stack-count='1'],\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-1 {\n translate: 0\n calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n }\n }\n\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-2 {\n translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n }\n }\n\n /* Only the bottom stack should have the shadow */\n &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n box-shadow: var(--shadow);\n }\n\n &[data-stack-count='2'] {\n .error-overlay-bottom-stack-layer-2 {\n box-shadow: var(--shadow);\n }\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .error-overlay-bottom-stack-layer {\n border-color: var(--color-gray-400);\n }\n }\n`\n"],"names":["ErrorOverlayBottomStack","styles","errorCount","activeIdx","stackCount","Math","min","div","aria-hidden","className","data-stack-count"],"mappings":";;;;;;;;;;;;;;;IAAgBA,uBAAuB;eAAvBA;;IA0BHC,MAAM;eAANA;;;;AA1BN,SAASD,wBAAwB,KAMvC;IANuC,IAAA,EACtCE,UAAU,EACVC,SAAS,EAIV,GANuC;IAOtC,mFAAmF;IACnF,MAAMC,aAAaC,KAAKC,GAAG,CAACJ,aAAaC,YAAY,GAAG;IACxD,qBACE,qBAACI;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,sBAACF;YACCE,WAAU;YACVC,oBAAkBN;;8BAElB,qBAACG;oBAAIE,WAAU;8BAAsE;;8BAGrF,qBAACF;oBAAIE,WAAU;8BAAsE;;;;;AAM7F;AAEO,MAAMR,SAAU"}

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.js CHANGED Viewed

@@ -102,7 +102,7 @@ function ErrorOverlayLayout(param) {
                             })
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlaybottomstack.ErrorOverlayBottomStack, {
-                            count: (_runtimeErrors_length = runtimeErrors == null ? void 0 : runtimeErrors.length) != null ? _runtimeErrors_length : 0,
+                            errorCount: (_runtimeErrors_length = runtimeErrors == null ? void 0 : runtimeErrors.length) != null ? _runtimeErrors_length : 0,
                             activeIdx: activeIdx != null ? activeIdx : 0
                         })
                     ]

package/dist/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.tsx"],"sourcesContent":["import type { DebugInfo } from '../../../../types'\nimport type { ErrorMessageType } from '../error-message/error-message'\nimport type { ErrorType } from '../error-type-label/error-type-label'\n\nimport { DialogContent, DialogFooter } from '../../dialog'\nimport {\n ErrorOverlayToolbar,\n styles as toolbarStyles,\n} from '../error-overlay-toolbar/error-overlay-toolbar'\nimport { ErrorOverlayFooter } from '../error-overlay-footer/error-overlay-footer'\nimport {\n ErrorMessage,\n styles as errorMessageStyles,\n} from '../error-message/error-message'\nimport {\n ErrorTypeLabel,\n styles as errorTypeLabelStyles,\n} from '../error-type-label/error-type-label'\nimport {\n ErrorOverlayNav,\n styles as floatingHeaderStyles,\n} from '../error-overlay-nav/error-overlay-nav'\n\nimport { ErrorOverlayDialog, DIALOG_STYLES } from '../dialog/dialog'\nimport {\n ErrorOverlayDialogHeader,\n DIALOG_HEADER_STYLES,\n} from '../dialog/header'\nimport { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body'\nimport { CALL_STACK_STYLES } from '../call-stack/call-stack'\nimport { OVERLAY_STYLES, ErrorOverlayOverlay } from '../overlay/overlay'\nimport { ErrorOverlayBottomStack } from '../error-overlay-bottom-stack'\nimport type { ErrorBaseProps } from '../error-overlay/error-overlay'\nimport type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'\nimport { EnvironmentNameLabel } from '../environment-name-label/environment-name-label'\n\ninterface ErrorOverlayLayoutProps extends ErrorBaseProps {\n errorMessage: ErrorMessageType\n errorType: ErrorType\n children?: React.ReactNode\n errorCode?: string\n error: ReadyRuntimeError['error']\n debugInfo?: DebugInfo\n isBuildError?: boolean\n onClose?: () => void\n // TODO: better handle receiving\n runtimeErrors?: ReadyRuntimeError[]\n activeIdx?: number\n setActiveIndex?: (index: number) => void\n footerMessage?: string\n dialogResizerRef?: React.RefObject<HTMLDivElement \| null>\n}\n\nexport function ErrorOverlayLayout({\n errorMessage,\n errorType,\n children,\n errorCode,\n error,\n debugInfo,\n isBuildError,\n onClose,\n versionInfo,\n runtimeErrors,\n activeIdx,\n setActiveIndex,\n footerMessage,\n isTurbopack,\n dialogResizerRef,\n // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)\n // If it's not being passed, we should just render the component as it is being\n // used without the context of a parent component that controls its state (e.g. Storybook).\n rendered = true,\n transitionDurationMs,\n}: ErrorOverlayLayoutProps) {\n const animationProps = {\n 'data-rendered': rendered,\n style: {\n '--transition-duration': `${transitionDurationMs}ms`,\n } as React.CSSProperties,\n }\n\n const hasFooter = Boolean(footerMessage \|\| errorCode)\n\n return (\n <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>\n <div data-nextjs-dialog-root {...animationProps}>\n <ErrorOverlayDialog\n onClose={onClose}\n dialogResizerRef={dialogResizerRef}\n data-has-footer={hasFooter}\n >\n <DialogContent>\n <ErrorOverlayDialogHeader>\n <div\n className=\"nextjs__container_errors__error_title\"\n // allow assertion in tests before error rating is implemented\n data-nextjs-error-code={errorCode}\n >\n <span data-nextjs-error-label-group>\n <ErrorTypeLabel errorType={errorType} />\n {error.environmentName && (\n <EnvironmentNameLabel\n environmentName={error.environmentName}\n />\n )}\n </span>\n <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />\n </div>\n <ErrorMessage errorMessage={errorMessage} />\n </ErrorOverlayDialogHeader>\n\n <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>\n </DialogContent>\n {hasFooter && (\n <DialogFooter>\n <ErrorOverlayFooter\n footerMessage={footerMessage}\n errorCode={errorCode}\n />\n </DialogFooter>\n )}\n <ErrorOverlayBottomStack\n ~~count~~={runtimeErrors?.length ?? 0}\n activeIdx={activeIdx ?? 0}\n />\n </ErrorOverlayDialog>\n <ErrorOverlayNav\n runtimeErrors={runtimeErrors}\n activeIdx={activeIdx}\n setActiveIndex={setActiveIndex}\n versionInfo={versionInfo}\n isTurbopack={isTurbopack}\n />\n </div>\n </ErrorOverlayOverlay>\n )\n}\n\nexport const styles = `\n ${OVERLAY_STYLES}\n ${DIALOG_STYLES}\n ${DIALOG_HEADER_STYLES}\n ${DIALOG_BODY_STYLES}\n\n ${floatingHeaderStyles}\n ${errorTypeLabelStyles}\n ${errorMessageStyles}\n ${toolbarStyles}\n ${CALL_STACK_STYLES}\n\n [data-nextjs-error-label-group] {\n display: flex;\n align-items: center;\n gap: var(--size-2);\n }\n`\n"],"names":["ErrorOverlayLayout","styles","errorMessage","errorType","children","errorCode","error","debugInfo","isBuildError","onClose","versionInfo","runtimeErrors","activeIdx","setActiveIndex","footerMessage","isTurbopack","dialogResizerRef","rendered","transitionDurationMs","animationProps","style","hasFooter","Boolean","ErrorOverlayOverlay","fixed","div","data-nextjs-dialog-root","ErrorOverlayDialog","data-has-footer","DialogContent","ErrorOverlayDialogHeader","className","data-nextjs-error-code","span","data-nextjs-error-label-group","ErrorTypeLabel","environmentName","EnvironmentNameLabel","ErrorOverlayToolbar","ErrorMessage","ErrorOverlayDialogBody","DialogFooter","ErrorOverlayFooter","ErrorOverlayBottomStack","~~count~~","length","ErrorOverlayNav","OVERLAY_STYLES","DIALOG_STYLES","DIALOG_HEADER_STYLES","DIALOG_BODY_STYLES","floatingHeaderStyles","errorTypeLabelStyles","errorMessageStyles","toolbarStyles","CALL_STACK_STYLES"],"mappings":";;;;;;;;;;;;;;;IAqDgBA,kBAAkB;eAAlBA;;IAsFHC,MAAM;eAANA;;;;wBAvI+B;qCAIrC;oCAC4B;8BAI5B;gCAIA;iCAIA;yBAE2C;wBAI3C;sBACoD;2BACzB;yBACkB;yCACZ;sCAGH;AAmB9B,SAASD,mBAAmB,KAqBT;IArBS,IAAA,EACjCE,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,OAAO,EACPC,WAAW,EACXC,aAAa,EACbC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChB,6FAA6F;IAC7F,+EAA+E;IAC/E,2FAA2F;IAC3FC,WAAW,IAAI,EACfC,oBAAoB,EACI,GArBS;IAsBjC,MAAMC,iBAAiB;QACrB,iBAAiBF;QACjBG,OAAO;YACL,yBAAyB,AAAC,KAAEF,uBAAqB;QACnD;IACF;IAEA,MAAMG,YAAYC,QAAQR,iBAAiBT;~~QAyC1BM~~;~~IAvCjB~~,qBACE,qBAACY,4BAAmB;QAACC,OAAOhB;QAAe,GAAGW,cAAc;kBAC1D,cAAA,sBAACM;YAAIC,yBAAuB;YAAE,GAAGP,cAAc;;8BAC7C,sBAACQ,2BAAkB;oBACjBlB,SAASA;oBACTO,kBAAkBA;oBAClBY,mBAAiBP;;sCAEjB,sBAACQ,qBAAa;;8CACZ,sBAACC,gCAAwB;;sDACvB,sBAACL;4CACCM,WAAU;4CACV,8DAA8D;4CAC9DC,0BAAwB3B;;8DAExB,sBAAC4B;oDAAKC,+BAA6B;;sEACjC,qBAACC,8BAAc;4DAAChC,WAAWA;;wDAC1BG,MAAM8B,eAAe,kBACpB,qBAACC,0CAAoB;4DACnBD,iBAAiB9B,MAAM8B,eAAe;;;;8DAI5C,qBAACE,wCAAmB;oDAAChC,OAAOA;oDAAOC,WAAWA;;;;sDAEhD,qBAACgC,0BAAY;4CAACrC,cAAcA;;;;8CAG9B,qBAACsC,4BAAsB;8CAAEpC;;;;wBAE1BiB,2BACC,qBAACoB,oBAAY;sCACX,cAAA,qBAACC,sCAAkB;gCACjB5B,eAAeA;gCACfT,WAAWA;;;sCAIjB,qBAACsC,gDAAuB;4BACtBC,~~OAAOjC~~,CAAAA,wBAAAA,iCAAAA,cAAekC,MAAM,YAArBlC,wBAAyB;~~4BAChCC~~,WAAWA,oBAAAA,YAAa;;;;8BAG5B,qBAACkC,gCAAe;oBACdnC,eAAeA;oBACfC,WAAWA;oBACXC,gBAAgBA;oBAChBH,aAAaA;oBACbK,aAAaA;;;;;AAKvB;AAEO,MAAMd,SAAS,AAAC,SACnB8C,uBAAc,GAAC,SACfC,sBAAa,GAAC,SACdC,4BAAoB,GAAC,SACrBC,wBAAkB,GAAC,WAEnBC,uBAAoB,GAAC,SACrBC,sBAAoB,GAAC,SACrBC,oBAAkB,GAAC,SACnBC,2BAAa,GAAC,SACdC,4BAAiB,GAAC"}
1	+ {"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.tsx"],"sourcesContent":["import type { DebugInfo } from '../../../../types'\nimport type { ErrorMessageType } from '../error-message/error-message'\nimport type { ErrorType } from '../error-type-label/error-type-label'\n\nimport { DialogContent, DialogFooter } from '../../dialog'\nimport {\n ErrorOverlayToolbar,\n styles as toolbarStyles,\n} from '../error-overlay-toolbar/error-overlay-toolbar'\nimport { ErrorOverlayFooter } from '../error-overlay-footer/error-overlay-footer'\nimport {\n ErrorMessage,\n styles as errorMessageStyles,\n} from '../error-message/error-message'\nimport {\n ErrorTypeLabel,\n styles as errorTypeLabelStyles,\n} from '../error-type-label/error-type-label'\nimport {\n ErrorOverlayNav,\n styles as floatingHeaderStyles,\n} from '../error-overlay-nav/error-overlay-nav'\n\nimport { ErrorOverlayDialog, DIALOG_STYLES } from '../dialog/dialog'\nimport {\n ErrorOverlayDialogHeader,\n DIALOG_HEADER_STYLES,\n} from '../dialog/header'\nimport { ErrorOverlayDialogBody, DIALOG_BODY_STYLES } from '../dialog/body'\nimport { CALL_STACK_STYLES } from '../call-stack/call-stack'\nimport { OVERLAY_STYLES, ErrorOverlayOverlay } from '../overlay/overlay'\nimport { ErrorOverlayBottomStack } from '../error-overlay-bottom-stack'\nimport type { ErrorBaseProps } from '../error-overlay/error-overlay'\nimport type { ReadyRuntimeError } from '../../../../utils/get-error-by-type'\nimport { EnvironmentNameLabel } from '../environment-name-label/environment-name-label'\n\ninterface ErrorOverlayLayoutProps extends ErrorBaseProps {\n errorMessage: ErrorMessageType\n errorType: ErrorType\n children?: React.ReactNode\n errorCode?: string\n error: ReadyRuntimeError['error']\n debugInfo?: DebugInfo\n isBuildError?: boolean\n onClose?: () => void\n // TODO: better handle receiving\n runtimeErrors?: ReadyRuntimeError[]\n activeIdx?: number\n setActiveIndex?: (index: number) => void\n footerMessage?: string\n dialogResizerRef?: React.RefObject<HTMLDivElement \| null>\n}\n\nexport function ErrorOverlayLayout({\n errorMessage,\n errorType,\n children,\n errorCode,\n error,\n debugInfo,\n isBuildError,\n onClose,\n versionInfo,\n runtimeErrors,\n activeIdx,\n setActiveIndex,\n footerMessage,\n isTurbopack,\n dialogResizerRef,\n // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)\n // If it's not being passed, we should just render the component as it is being\n // used without the context of a parent component that controls its state (e.g. Storybook).\n rendered = true,\n transitionDurationMs,\n}: ErrorOverlayLayoutProps) {\n const animationProps = {\n 'data-rendered': rendered,\n style: {\n '--transition-duration': `${transitionDurationMs}ms`,\n } as React.CSSProperties,\n }\n\n const hasFooter = Boolean(footerMessage \|\| errorCode)\n\n return (\n <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>\n <div data-nextjs-dialog-root {...animationProps}>\n <ErrorOverlayDialog\n onClose={onClose}\n dialogResizerRef={dialogResizerRef}\n data-has-footer={hasFooter}\n >\n <DialogContent>\n <ErrorOverlayDialogHeader>\n <div\n className=\"nextjs__container_errors__error_title\"\n // allow assertion in tests before error rating is implemented\n data-nextjs-error-code={errorCode}\n >\n <span data-nextjs-error-label-group>\n <ErrorTypeLabel errorType={errorType} />\n {error.environmentName && (\n <EnvironmentNameLabel\n environmentName={error.environmentName}\n />\n )}\n </span>\n <ErrorOverlayToolbar error={error} debugInfo={debugInfo} />\n </div>\n <ErrorMessage errorMessage={errorMessage} />\n </ErrorOverlayDialogHeader>\n\n <ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>\n </DialogContent>\n {hasFooter && (\n <DialogFooter>\n <ErrorOverlayFooter\n footerMessage={footerMessage}\n errorCode={errorCode}\n />\n </DialogFooter>\n )}\n <ErrorOverlayBottomStack\n errorCount={runtimeErrors?.length ?? 0}\n activeIdx={activeIdx ?? 0}\n />\n </ErrorOverlayDialog>\n <ErrorOverlayNav\n runtimeErrors={runtimeErrors}\n activeIdx={activeIdx}\n setActiveIndex={setActiveIndex}\n versionInfo={versionInfo}\n isTurbopack={isTurbopack}\n />\n </div>\n </ErrorOverlayOverlay>\n )\n}\n\nexport const styles = `\n ${OVERLAY_STYLES}\n ${DIALOG_STYLES}\n ${DIALOG_HEADER_STYLES}\n ${DIALOG_BODY_STYLES}\n\n ${floatingHeaderStyles}\n ${errorTypeLabelStyles}\n ${errorMessageStyles}\n ${toolbarStyles}\n ${CALL_STACK_STYLES}\n\n [data-nextjs-error-label-group] {\n display: flex;\n align-items: center;\n gap: var(--size-2);\n }\n`\n"],"names":["ErrorOverlayLayout","styles","errorMessage","errorType","children","errorCode","error","debugInfo","isBuildError","onClose","versionInfo","runtimeErrors","activeIdx","setActiveIndex","footerMessage","isTurbopack","dialogResizerRef","rendered","transitionDurationMs","animationProps","style","hasFooter","Boolean","ErrorOverlayOverlay","fixed","div","data-nextjs-dialog-root","ErrorOverlayDialog","data-has-footer","DialogContent","ErrorOverlayDialogHeader","className","data-nextjs-error-code","span","data-nextjs-error-label-group","ErrorTypeLabel","environmentName","EnvironmentNameLabel","ErrorOverlayToolbar","ErrorMessage","ErrorOverlayDialogBody","DialogFooter","ErrorOverlayFooter","ErrorOverlayBottomStack","errorCount","length","ErrorOverlayNav","OVERLAY_STYLES","DIALOG_STYLES","DIALOG_HEADER_STYLES","DIALOG_BODY_STYLES","floatingHeaderStyles","errorTypeLabelStyles","errorMessageStyles","toolbarStyles","CALL_STACK_STYLES"],"mappings":";;;;;;;;;;;;;;;IAqDgBA,kBAAkB;eAAlBA;;IAsFHC,MAAM;eAANA;;;;wBAvI+B;qCAIrC;oCAC4B;8BAI5B;gCAIA;iCAIA;yBAE2C;wBAI3C;sBACoD;2BACzB;yBACkB;yCACZ;sCAGH;AAmB9B,SAASD,mBAAmB,KAqBT;IArBS,IAAA,EACjCE,YAAY,EACZC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,OAAO,EACPC,WAAW,EACXC,aAAa,EACbC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChB,6FAA6F;IAC7F,+EAA+E;IAC/E,2FAA2F;IAC3FC,WAAW,IAAI,EACfC,oBAAoB,EACI,GArBS;IAsBjC,MAAMC,iBAAiB;QACrB,iBAAiBF;QACjBG,OAAO;YACL,yBAAyB,AAAC,KAAEF,uBAAqB;QACnD;IACF;IAEA,MAAMG,YAAYC,QAAQR,iBAAiBT;QAyCrBM;IAvCtB,qBACE,qBAACY,4BAAmB;QAACC,OAAOhB;QAAe,GAAGW,cAAc;kBAC1D,cAAA,sBAACM;YAAIC,yBAAuB;YAAE,GAAGP,cAAc;;8BAC7C,sBAACQ,2BAAkB;oBACjBlB,SAASA;oBACTO,kBAAkBA;oBAClBY,mBAAiBP;;sCAEjB,sBAACQ,qBAAa;;8CACZ,sBAACC,gCAAwB;;sDACvB,sBAACL;4CACCM,WAAU;4CACV,8DAA8D;4CAC9DC,0BAAwB3B;;8DAExB,sBAAC4B;oDAAKC,+BAA6B;;sEACjC,qBAACC,8BAAc;4DAAChC,WAAWA;;wDAC1BG,MAAM8B,eAAe,kBACpB,qBAACC,0CAAoB;4DACnBD,iBAAiB9B,MAAM8B,eAAe;;;;8DAI5C,qBAACE,wCAAmB;oDAAChC,OAAOA;oDAAOC,WAAWA;;;;sDAEhD,qBAACgC,0BAAY;4CAACrC,cAAcA;;;;8CAG9B,qBAACsC,4BAAsB;8CAAEpC;;;;wBAE1BiB,2BACC,qBAACoB,oBAAY;sCACX,cAAA,qBAACC,sCAAkB;gCACjB5B,eAAeA;gCACfT,WAAWA;;;sCAIjB,qBAACsC,gDAAuB;4BACtBC,YAAYjC,CAAAA,wBAAAA,iCAAAA,cAAekC,MAAM,YAArBlC,wBAAyB;4BACrCC,WAAWA,oBAAAA,YAAa;;;;8BAG5B,qBAACkC,gCAAe;oBACdnC,eAAeA;oBACfC,WAAWA;oBACXC,gBAAgBA;oBAChBH,aAAaA;oBACbK,aAAaA;;;;;AAKvB;AAEO,MAAMd,SAAS,AAAC,SACnB8C,uBAAc,GAAC,SACfC,sBAAa,GAAC,SACdC,4BAAoB,GAAC,SACrBC,wBAAkB,GAAC,WAEnBC,uBAAoB,GAAC,SACrBC,sBAAoB,GAAC,SACrBC,oBAAkB,GAAC,SACnBC,2BAAa,GAAC,SACdC,4BAAiB,GAAC"}

package/dist/client/components/react-dev-overlay/ui/dev-overlay.d.ts CHANGED Viewed

@@ -2,5 +2,5 @@ import type { OverlayState } from '../shared';
 export declare function DevOverlay({ state, isErrorOverlayOpen, setIsErrorOverlayOpen, }: {
     state: OverlayState;
     isErrorOverlayOpen: boolean;
-    setIsErrorOverlayOpen: (isErrorOverlayOpen: boolean) => void;
+    setIsErrorOverlayOpen: (isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)) => void;
 }): import("react/jsx-runtime").JSX.Element;