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/esm/client/app-bootstrap.js CHANGED Viewed

@@ -3,7 +3,7 @@
  * sure the following scripts are executed in the correct order:
  * - Polyfills
  * - next/script with `beforeInteractive` strategy
- */ const version = "15.2.0-canary.70";
+ */ const version = "15.2.0-canary.71";
 window.next = {
     version,
     appDir: true

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

@@ -12,18 +12,18 @@ import { StopIcon } from '../../../icons/stop-icon';
 const INDICATOR_POSITION = process.env.__NEXT_DEV_INDICATOR_POSITION || 'bottom-left';
 export function DevToolsIndicator(param) {
     let { state, errorCount, isBuildError, setIsErrorOverlayOpen, position = INDICATOR_POSITION } = param;
-    const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true);
-    return isDevToolsIndicatorOpen && /*#__PURE__*/ _jsx(DevToolsPopover, {
+    const [isDevToolsIndicatorVisible, setIsDevToolsIndicatorVisible] = useState(true);
+    return /*#__PURE__*/ _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
     });
 }
@@ -140,6 +140,9 @@ function DevToolsPopover(param) {
             setIsErrorOverlayOpen(true);
         }
     }
+    function toggleErrorOverlay() {
+        setIsErrorOverlayOpen((prev)=>!prev);
+    }
     function onTriggerClick() {
         setIsMenuOpen((prev)=>!prev);
     }
@@ -180,7 +183,7 @@ function DevToolsPopover(param) {
                 issueCount: issueCount,
                 onTriggerClick: onTriggerClick,
                 onKeyDown: onTriggerKeydown,
-                openErrorOverlay: openErrorOverlay,
+                toggleErrorOverlay: toggleErrorOverlay,
                 isDevBuilding: useIsDevBuilding(),
                 isDevRendering: useIsDevRendering(),
                 isBuildError: isBuildError

package/dist/esm/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":["useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","TurbopackInfo","RouteInfo","StopIcon","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorOpen","setIsDevToolsIndicatorOpen","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","menuRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","enterDelay","exitDelay","turbopackInfoMounted","turbopackInfoRendered","routeInfoMounted","routeInfoRendered","useFocusTrap","useClickOutside","closeMenu","closeTurbopackInfo","closeRouteInfo","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","onTriggerClick","vertical","horizontal","split","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","svg","xmlns","width","height","fill","path","fillRule","clipRule","d","href","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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"}
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":["useState","useEffect","useRef","createContext","useContext","Toast","NextLogo","useIsDevBuilding","useIsDevRendering","useDelayedRender","TurbopackInfo","RouteInfo","StopIcon","INDICATOR_POSITION","process","env","__NEXT_DEV_INDICATOR_POSITION","DevToolsIndicator","state","errorCount","isBuildError","setIsErrorOverlayOpen","position","isDevToolsIndicatorVisible","setIsDevToolsIndicatorVisible","DevToolsPopover","semver","versionInfo","installed","issueCount","isStaticRoute","staticIndicator","hide","isTurbopack","TURBOPACK","disabled","disableDevIndicator","ANIMATE_OUT_DURATION_MS","ANIMATE_OUT_TIMING_FUNCTION","Context","menuRef","triggerRef","turbopackRef","triggerTurbopackRef","routeInfoRef","triggerRouteInfoRef","isMenuOpen","setIsMenuOpen","isTurbopackInfoOpen","setIsTurbopackInfoOpen","isRouteInfoOpen","setIsRouteInfoOpen","selectedIndex","setSelectedIndex","mounted","menuMounted","rendered","menuRendered","enterDelay","exitDelay","turbopackInfoMounted","turbopackInfoRendered","routeInfoMounted","routeInfoRendered","useFocusTrap","useClickOutside","closeMenu","closeTurbopackInfo","closeRouteInfo","select","index","all","current","querySelectorAll","firstIndex","getAttribute","Number","lastIndex","length","el","querySelector","focus","onMenuKeydown","e","preventDefault","key","next","prev","onTriggerKeydown","setTimeout","openErrorOverlay","toggleErrorOverlay","onTriggerClick","vertical","horizontal","split","data-nextjs-toast","style","boxShadow","zIndex","bottom","left","ref","aria-haspopup","aria-expanded","aria-controls","aria-label","data-nextjs-dev-tools-button","onKeyDown","isDevBuilding","isDevRendering","routeType","isOpen","setIsOpen","setPreviousOpen","data-rendered","div","id","role","dir","aria-orientation","tabIndex","className","Provider","value","MenuItem","label","IssueCount","onClick","data-nextjs-route-type","ChevronRight","data-hide-dev-tools","svg","xmlns","width","height","fill","path","fillRule","clipRule","d","href","props","isInteractive","selected","click","window","open","data-index","data-selected","onMouseMove","undefined","onMouseLeave","span","children","data-has-issues","root","getRootNode","activeElement","ShadowRoot","contains","handleClickOutside","event","getBoundingClientRect","clientX","right","clientY","top","handleKeyDown","document","addEventListener","removeEventListener","DEV_TOOLS_INDICATOR_STYLES"],"mappings":"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"}

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

@@ -52,7 +52,7 @@ const SHORT_DURATION_MS = 150;
     return animatedDep;
 };
 export const NextLogo = /*#__PURE__*/ 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] = useState(hasError);
     const newErrorDetected = useAnimated(issueCount, {
@@ -108,7 +108,7 @@ export const NextLogo = /*#__PURE__*/ forwardRef(function NextLogo(param, propRe
                                 /*#__PURE__*/ _jsxs("button", {
                                     "data-issues-open": true,
                                     "aria-label": "Open issues overlay",
-                                    onClick: openErrorOverlay,
+                                    onClick: toggleErrorOverlay,
                                     children: [
                                         disabled && /*#__PURE__*/ _jsx("div", {
                                             "data-disabled-icon": true,

package/dist/esm/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":["forwardRef","useEffect","useRef","useState","css","mergeRefs","useMinimumLoadingTimeMultiple","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","animatedDep","setAnimatedDep","isInitialRef","current","timeoutId","setTimeout","clearTimeout","NextLogo","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","div","data-next-badge-root","style","display","data-next-badge","data-error","data-error-expanded","data-animate","button","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","Cross","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":["forwardRef","useEffect","useRef","useState","css","mergeRefs","useMinimumLoadingTimeMultiple","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","animatedDep","setAnimatedDep","isInitialRef","current","timeoutId","setTimeout","clearTimeout","NextLogo","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","toggleErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","div","data-next-badge-root","style","display","data-next-badge","data-error","data-error-expanded","data-animate","button","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","Cross","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/esm/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.js CHANGED Viewed

@@ -1,38 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export 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__*/ _jsx("div", {
         "aria-hidden": true,
         className: "error-overlay-bottom-stack",
         children: /*#__PURE__*/ _jsxs("div", {
-            className: "stack",
+            className: "error-overlay-bottom-stack-stack",
             "data-stack-count": stackCount,
             children: [
                 /*#__PURE__*/ _jsx("div", {
-                    className: "layer layer1",
+                    className: "error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-1",
                     children: "1"
                 }),
                 /*#__PURE__*/ _jsx("div", {
-                    className: "layer layer2",
+                    className: "error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-2",
                     children: "2"
                 })
             ]
         })
     });
 }
-export 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 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";
 //# sourceMappingURL=index.js.map

package/dist/esm/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","~~count~~","activeIdx","stackCount","div","aria-hidden","className","data-stack-count","styles"],"mappings":";AAAA,OAAO,SAASA,wBAAwB,KAMvC;IANuC,IAAA,EACtCC,~~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,~~KAACC~~;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,MAACF;~~YAAIE~~,WAAU;~~YAAQC~~,~~oBAAkBJ~~;;~~8BACvC~~,~~KAACC~~;oBAAIE,WAAU;~~8BAAe~~;;~~8BAC9B~~,KAACF;oBAAIE,WAAU;~~8BAAe~~;;;;;~~AAItC~~;AAEA,OAAO,MAAME,SAAU,~~o4DAmFtB~~"}
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","errorCount","activeIdx","stackCount","Math","min","div","aria-hidden","className","data-stack-count","styles"],"mappings":";AAAA,OAAO,SAASA,wBAAwB,KAMvC;IANuC,IAAA,EACtCC,UAAU,EACVC,SAAS,EAIV,GANuC;IAOtC,mFAAmF;IACnF,MAAMC,aAAaC,KAAKC,GAAG,CAACJ,aAAaC,YAAY,GAAG;IACxD,qBACE,KAACI;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,MAACF;YACCE,WAAU;YACVC,oBAAkBN;;8BAElB,KAACG;oBAAIE,WAAU;8BAAsE;;8BAGrF,KAACF;oBAAIE,WAAU;8BAAsE;;;;;AAM7F;AAEA,OAAO,MAAME,SAAU,wpEAmFtB"}

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

@@ -80,7 +80,7 @@ export function ErrorOverlayLayout(param) {
                             })
                         }),
                         /*#__PURE__*/ _jsx(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/esm/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":["DialogContent","DialogFooter","ErrorOverlayToolbar","styles","toolbarStyles","ErrorOverlayFooter","ErrorMessage","errorMessageStyles","ErrorTypeLabel","errorTypeLabelStyles","ErrorOverlayNav","floatingHeaderStyles","ErrorOverlayDialog","DIALOG_STYLES","ErrorOverlayDialogHeader","DIALOG_HEADER_STYLES","ErrorOverlayDialogBody","DIALOG_BODY_STYLES","CALL_STACK_STYLES","OVERLAY_STYLES","ErrorOverlayOverlay","ErrorOverlayBottomStack","EnvironmentNameLabel","ErrorOverlayLayout","errorMessage","errorType","children","errorCode","error","debugInfo","isBuildError","onClose","versionInfo","runtimeErrors","activeIdx","setActiveIndex","footerMessage","isTurbopack","dialogResizerRef","rendered","transitionDurationMs","animationProps","style","hasFooter","Boolean","fixed","div","data-nextjs-dialog-root","data-has-footer","className","data-nextjs-error-code","span","data-nextjs-error-label-group","environmentName","~~count~~","length"],"mappings":";AAIA,SAASA,aAAa,EAAEC,YAAY,QAAQ,eAAc;AAC1D,SACEC,mBAAmB,EACnBC,UAAUC,aAAa,QAClB,iDAAgD;AACvD,SAASC,kBAAkB,QAAQ,+CAA8C;AACjF,SACEC,YAAY,EACZH,UAAUI,kBAAkB,QACvB,iCAAgC;AACvC,SACEC,cAAc,EACdL,UAAUM,oBAAoB,QACzB,uCAAsC;AAC7C,SACEC,eAAe,EACfP,UAAUQ,oBAAoB,QACzB,yCAAwC;AAE/C,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,mBAAkB;AACpE,SACEC,wBAAwB,EACxBC,oBAAoB,QACf,mBAAkB;AACzB,SAASC,sBAAsB,EAAEC,kBAAkB,QAAQ,iBAAgB;AAC3E,SAASC,iBAAiB,QAAQ,2BAA0B;AAC5D,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,qBAAoB;AACxE,SAASC,uBAAuB,QAAQ,gCAA+B;AAGvE,SAASC,oBAAoB,QAAQ,mDAAkD;AAmBvF,OAAO,SAASC,mBAAmB,KAqBT;IArBS,IAAA,EACjCC,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,KAACb;QAAoByB,OAAOf;QAAe,GAAGW,cAAc;kBAC1D,cAAA,MAACK;YAAIC,yBAAuB;YAAE,GAAGN,cAAc;;8BAC7C,MAAC7B;oBACCmB,SAASA;oBACTO,kBAAkBA;oBAClBU,mBAAiBL;;sCAEjB,MAAC3C;;8CACC,MAACc;;sDACC,MAACgC;4CACCG,WAAU;4CACV,8DAA8D;4CAC9DC,0BAAwBvB;;8DAExB,MAACwB;oDAAKC,+BAA6B;;sEACjC,KAAC5C;4DAAeiB,WAAWA;;wDAC1BG,MAAMyB,eAAe,kBACpB,KAAC/B;4DACC+B,iBAAiBzB,MAAMyB,eAAe;;;;8DAI5C,KAACnD;oDAAoB0B,OAAOA;oDAAOC,WAAWA;;;;sDAEhD,KAACvB;4CAAakB,cAAcA;;;;8CAG9B,KAACR;8CAAwBU;;;;wBAE1BiB,2BACC,KAAC1C;sCACC,cAAA,KAACI;gCACC+B,eAAeA;gCACfT,WAAWA;;;sCAIjB,KAACN;4BACCiC,~~OAAOrB~~,CAAAA,wBAAAA,iCAAAA,cAAesB,MAAM,YAArBtB,wBAAyB;~~4BAChCC~~,WAAWA,oBAAAA,YAAa;;;;8BAG5B,KAACxB;oBACCuB,eAAeA;oBACfC,WAAWA;oBACXC,gBAAgBA;oBAChBH,aAAaA;oBACbK,aAAaA;;;;;AAKvB;AAEA,OAAO,MAAMlC,SAAS,AAAC,SACnBgB,iBAAe,SACfN,gBAAc,SACdE,uBAAqB,SACrBE,qBAAmB,WAEnBN,uBAAqB,SACrBF,uBAAqB,SACrBF,qBAAmB,SACnBH,gBAAc,SACdc,oBAAkB,wHAOrB"}
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":["DialogContent","DialogFooter","ErrorOverlayToolbar","styles","toolbarStyles","ErrorOverlayFooter","ErrorMessage","errorMessageStyles","ErrorTypeLabel","errorTypeLabelStyles","ErrorOverlayNav","floatingHeaderStyles","ErrorOverlayDialog","DIALOG_STYLES","ErrorOverlayDialogHeader","DIALOG_HEADER_STYLES","ErrorOverlayDialogBody","DIALOG_BODY_STYLES","CALL_STACK_STYLES","OVERLAY_STYLES","ErrorOverlayOverlay","ErrorOverlayBottomStack","EnvironmentNameLabel","ErrorOverlayLayout","errorMessage","errorType","children","errorCode","error","debugInfo","isBuildError","onClose","versionInfo","runtimeErrors","activeIdx","setActiveIndex","footerMessage","isTurbopack","dialogResizerRef","rendered","transitionDurationMs","animationProps","style","hasFooter","Boolean","fixed","div","data-nextjs-dialog-root","data-has-footer","className","data-nextjs-error-code","span","data-nextjs-error-label-group","environmentName","errorCount","length"],"mappings":";AAIA,SAASA,aAAa,EAAEC,YAAY,QAAQ,eAAc;AAC1D,SACEC,mBAAmB,EACnBC,UAAUC,aAAa,QAClB,iDAAgD;AACvD,SAASC,kBAAkB,QAAQ,+CAA8C;AACjF,SACEC,YAAY,EACZH,UAAUI,kBAAkB,QACvB,iCAAgC;AACvC,SACEC,cAAc,EACdL,UAAUM,oBAAoB,QACzB,uCAAsC;AAC7C,SACEC,eAAe,EACfP,UAAUQ,oBAAoB,QACzB,yCAAwC;AAE/C,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,mBAAkB;AACpE,SACEC,wBAAwB,EACxBC,oBAAoB,QACf,mBAAkB;AACzB,SAASC,sBAAsB,EAAEC,kBAAkB,QAAQ,iBAAgB;AAC3E,SAASC,iBAAiB,QAAQ,2BAA0B;AAC5D,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,qBAAoB;AACxE,SAASC,uBAAuB,QAAQ,gCAA+B;AAGvE,SAASC,oBAAoB,QAAQ,mDAAkD;AAmBvF,OAAO,SAASC,mBAAmB,KAqBT;IArBS,IAAA,EACjCC,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,KAACb;QAAoByB,OAAOf;QAAe,GAAGW,cAAc;kBAC1D,cAAA,MAACK;YAAIC,yBAAuB;YAAE,GAAGN,cAAc;;8BAC7C,MAAC7B;oBACCmB,SAASA;oBACTO,kBAAkBA;oBAClBU,mBAAiBL;;sCAEjB,MAAC3C;;8CACC,MAACc;;sDACC,MAACgC;4CACCG,WAAU;4CACV,8DAA8D;4CAC9DC,0BAAwBvB;;8DAExB,MAACwB;oDAAKC,+BAA6B;;sEACjC,KAAC5C;4DAAeiB,WAAWA;;wDAC1BG,MAAMyB,eAAe,kBACpB,KAAC/B;4DACC+B,iBAAiBzB,MAAMyB,eAAe;;;;8DAI5C,KAACnD;oDAAoB0B,OAAOA;oDAAOC,WAAWA;;;;sDAEhD,KAACvB;4CAAakB,cAAcA;;;;8CAG9B,KAACR;8CAAwBU;;;;wBAE1BiB,2BACC,KAAC1C;sCACC,cAAA,KAACI;gCACC+B,eAAeA;gCACfT,WAAWA;;;sCAIjB,KAACN;4BACCiC,YAAYrB,CAAAA,wBAAAA,iCAAAA,cAAesB,MAAM,YAArBtB,wBAAyB;4BACrCC,WAAWA,oBAAAA,YAAa;;;;8BAG5B,KAACxB;oBACCuB,eAAeA;oBACfC,WAAWA;oBACXC,gBAAgBA;oBAChBH,aAAaA;oBACbK,aAAaA;;;;;AAKvB;AAEA,OAAO,MAAMlC,SAAS,AAAC,SACnBgB,iBAAe,SACfN,gBAAc,SACdE,uBAAqB,SACrBE,qBAAmB,WAEnBN,uBAAqB,SACrBF,uBAAqB,SACrBF,qBAAmB,SACnBH,gBAAc,SACdc,oBAAkB,wHAOrB"}

package/dist/esm/client/components/react-dev-overlay/ui/dev-overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/ui/dev-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../shared'\n\nimport { ShadowPortal } from './components/shadow-portal'\nimport { Base } from './styles/base'\nimport { ComponentStyles } from './styles/component-styles'\nimport { CssReset } from './styles/css-reset'\nimport { Colors } from './styles/colors'\nimport { ErrorOverlay } from './components/errors/error-overlay/error-overlay'\nimport { DevToolsIndicator } from './components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { RenderError } from './container/runtime-error/render-error'\n\nexport function DevOverlay({\n state,\n isErrorOverlayOpen,\n setIsErrorOverlayOpen,\n}: {\n state: OverlayState\n isErrorOverlayOpen: boolean\n setIsErrorOverlayOpen: (isErrorOverlayOpen: boolean) => void\n}) {\n return (\n <ShadowPortal>\n <CssReset />\n <Base />\n <Colors />\n <ComponentStyles />\n\n <RenderError state={state} isAppDir={true}>\n {({ runtimeErrors, totalErrorCount }) => {\n const isBuildError = runtimeErrors.length === 0\n return (\n <>\n <DevToolsIndicator\n state={state}\n errorCount={totalErrorCount}\n isBuildError={isBuildError}\n setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n />\n\n <ErrorOverlay\n state={state}\n runtimeErrors={runtimeErrors}\n isErrorOverlayOpen={isErrorOverlayOpen}\n setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n />\n </>\n )\n }}\n </RenderError>\n </ShadowPortal>\n )\n}\n"],"names":["ShadowPortal","Base","ComponentStyles","CssReset","Colors","ErrorOverlay","DevToolsIndicator","RenderError","DevOverlay","state","isErrorOverlayOpen","setIsErrorOverlayOpen","isAppDir","runtimeErrors","totalErrorCount","isBuildError","length","errorCount"],"mappings":";AAEA,SAASA,YAAY,QAAQ,6BAA4B;AACzD,SAASC,IAAI,QAAQ,gBAAe;AACpC,SAASC,eAAe,QAAQ,4BAA2B;AAC3D,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,SAASC,MAAM,QAAQ,kBAAiB;AACxC,SAASC,YAAY,QAAQ,kDAAiD;AAC9E,SAASC,iBAAiB,QAAQ,8DAA6D;AAC/F,SAASC,WAAW,QAAQ,yCAAwC;AAEpE,OAAO,SAASC,WAAW,~~KAQ1B~~;~~IAR0B~~,IAAA,EACzBC,KAAK,EACLC,kBAAkB,EAClBC,qBAAqB,~~EAKtB~~,~~GAR0B~~;~~IASzB~~,qBACE,MAACX;;0BACC,KAACG;0BACD,KAACF;0BACD,KAACG;0BACD,KAACF;0BAED,KAACK;gBAAYE,OAAOA;gBAAOG,UAAU;0BAClC;wBAAC,EAAEC,aAAa,EAAEC,eAAe,EAAE;oBAClC,MAAMC,eAAeF,cAAcG,MAAM,KAAK;oBAC9C,qBACE;;0CACE,KAACV;gCACCG,OAAOA;gCACPQ,YAAYH;gCACZC,cAAcA;gCACdJ,uBAAuBA;;0CAGzB,KAACN;gCACCI,OAAOA;gCACPI,eAAeA;gCACfH,oBAAoBA;gCACpBC,uBAAuBA;;;;gBAI/B;;;;AAIR"}
1	+ {"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/ui/dev-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../shared'\n\nimport { ShadowPortal } from './components/shadow-portal'\nimport { Base } from './styles/base'\nimport { ComponentStyles } from './styles/component-styles'\nimport { CssReset } from './styles/css-reset'\nimport { Colors } from './styles/colors'\nimport { ErrorOverlay } from './components/errors/error-overlay/error-overlay'\nimport { DevToolsIndicator } from './components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { RenderError } from './container/runtime-error/render-error'\n\nexport function DevOverlay({\n state,\n isErrorOverlayOpen,\n setIsErrorOverlayOpen,\n}: {\n state: OverlayState\n isErrorOverlayOpen: boolean\n setIsErrorOverlayOpen: (\n isErrorOverlayOpen: boolean \| ((prev: boolean) => boolean)\n ) => void\n}) {\n return (\n <ShadowPortal>\n <CssReset />\n <Base />\n <Colors />\n <ComponentStyles />\n\n <RenderError state={state} isAppDir={true}>\n {({ runtimeErrors, totalErrorCount }) => {\n const isBuildError = runtimeErrors.length === 0\n return (\n <>\n <DevToolsIndicator\n state={state}\n errorCount={totalErrorCount}\n isBuildError={isBuildError}\n setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n />\n\n <ErrorOverlay\n state={state}\n runtimeErrors={runtimeErrors}\n isErrorOverlayOpen={isErrorOverlayOpen}\n setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n />\n </>\n )\n }}\n </RenderError>\n </ShadowPortal>\n )\n}\n"],"names":["ShadowPortal","Base","ComponentStyles","CssReset","Colors","ErrorOverlay","DevToolsIndicator","RenderError","DevOverlay","state","isErrorOverlayOpen","setIsErrorOverlayOpen","isAppDir","runtimeErrors","totalErrorCount","isBuildError","length","errorCount"],"mappings":";AAEA,SAASA,YAAY,QAAQ,6BAA4B;AACzD,SAASC,IAAI,QAAQ,gBAAe;AACpC,SAASC,eAAe,QAAQ,4BAA2B;AAC3D,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,SAASC,MAAM,QAAQ,kBAAiB;AACxC,SAASC,YAAY,QAAQ,kDAAiD;AAC9E,SAASC,iBAAiB,QAAQ,8DAA6D;AAC/F,SAASC,WAAW,QAAQ,yCAAwC;AAEpE,OAAO,SAASC,WAAW,KAU1B;IAV0B,IAAA,EACzBC,KAAK,EACLC,kBAAkB,EAClBC,qBAAqB,EAOtB,GAV0B;IAWzB,qBACE,MAACX;;0BACC,KAACG;0BACD,KAACF;0BACD,KAACG;0BACD,KAACF;0BAED,KAACK;gBAAYE,OAAOA;gBAAOG,UAAU;0BAClC;wBAAC,EAAEC,aAAa,EAAEC,eAAe,EAAE;oBAClC,MAAMC,eAAeF,cAAcG,MAAM,KAAK;oBAC9C,qBACE;;0CACE,KAACV;gCACCG,OAAOA;gCACPQ,YAAYH;gCACZC,cAAcA;gCACdJ,uBAAuBA;;0CAGzB,KAACN;gCACCI,OAAOA;gCACPI,eAAeA;gCACfH,oBAAoBA;gCACpBC,uBAAuBA;;;;gBAI/B;;;;AAIR"}

package/dist/esm/client/index.js CHANGED Viewed

@@ -26,7 +26,7 @@ import { SearchParamsContext, PathParamsContext } from '../shared/lib/hooks-clie
 import { onRecoverableError } from './react-client-callbacks/on-recoverable-error';
 import tracer from './tracing/tracer';
 import { isNextRouterError } from './components/is-next-router-error';
-export const version = "15.2.0-canary.70";
+export const version = "15.2.0-canary.71";
 export let router;
 export const emitter = mitt();
 const looseToArray = (input)=>[].slice.call(input);

package/dist/esm/export/index.js CHANGED Viewed

@@ -276,7 +276,10 @@ async function exportAppImpl(dir, options, span) {
             clientSegmentCache: nextConfig.experimental.clientSegmentCache ?? false,
             inlineCss: nextConfig.experimental.inlineCss ?? false,
             authInterrupts: !!nextConfig.experimental.authInterrupts,
-            streamingMetadata: !!nextConfig.experimental.streamingMetadata,
+            streamingMetadata: // Disable streaming metadata when dynamic IO is enabled.
+            // FIXME: remove dynamic IO guard once we fixed the dynamic indicator case.
+            // test/e2e/app-dir/dynamic-io/dynamic-io.test.ts - should not have static indicator on not-found route
+            !nextConfig.experimental.dynamicIO && !!nextConfig.experimental.streamingMetadata,
             htmlLimitedBots: nextConfig.experimental.htmlLimitedBots
         },
         reactMaxHeadersLength: nextConfig.reactMaxHeadersLength