npm - next - Versions diffs - 15.2.0-canary.65 → 15.2.0-canary.66 - Mend

next 15.2.0-canary.65 → 15.2.0-canary.66

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 (334) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { noop as css } from '../../../../../../internal/helpers/noop-template'\nimport mergeRefs from '../../../../helpers/merge-refs'\nimport { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'\n\ninterface Props extends React.ComponentProps<'button'> {\n issueCount: number\n isDevBuilding: boolean\n isDevRendering: boolean\n onTriggerClick: () => void\n openErrorOverlay: () => void\n}\n\nconst SIZE = 36\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 issueCount,\n isDevBuilding,\n isDevRendering,\n onTriggerClick,\n openErrorOverlay,\n ...props\n }: Props,\n propRef: React.Ref<HTMLButtonElement>\n) {\n const hasError = issueCount > 0\n const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n const 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 } 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-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: 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 <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} />\n </button>\n {isErrorExpanded && (\n <div data-issues>\n <button\n data-issues-open\n aria-label=\"Open issues overlay\"\n onClick={openErrorOverlay}\n >\n <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 <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 </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({ isLoading }: { isLoading?: boolean }) {\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=\"white\" />\n <stop offset=\"0.604072\" stopColor=\"white\" stopOpacity=\"0\" />\n <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_1357_10853\"\n x1=\"11.8222\"\n y1=\"1.40039\"\n x2=\"11.791\"\n y2=\"9.62542\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n </linearGradient>\n <mask id=\"mask0\">\n <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n </mask>\n </defs>\n </svg>\n )\n}\n\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","noop","css","mergeRefs","useMinimumLoadingTimeMultiple","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","animatedDep","setAnimatedDep","isInitialRef","current","timeoutId","setTimeout","clearTimeout","NextLogo","propRef","issueCount","isDevBuilding","isDevRendering","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","div","data-next-badge-root","style","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","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","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/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { noop as css } from '../../../../../../internal/helpers/noop-template'\nimport mergeRefs from '../../../../helpers/merge-refs'\nimport { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'\n\ninterface Props extends React.ComponentProps<'button'> {\n issueCount: number\n isDevBuilding: boolean\n isDevRendering: boolean\n 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} />\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({ isLoading }: { isLoading?: boolean }) {\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=\"white\" />\n <stop offset=\"0.604072\" stopColor=\"white\" stopOpacity=\"0\" />\n <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n </linearGradient>\n <linearGradient\n id=\"paint1_linear_1357_10853\"\n x1=\"11.8222\"\n y1=\"1.40039\"\n x2=\"11.791\"\n y2=\"9.62542\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"white\" />\n <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n </linearGradient>\n <mask id=\"mask0\">\n <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n </mask>\n </defs>\n </svg>\n )\n}\n\nfunction 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","noop","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","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/_experimental/internal/components/errors/error-message/error-message.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    white-space: pre-wrap;\n  }\n"
+        "\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  }\n"
     ]);
     _templateObject = function() {
         return data;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-message/error-message.tsx"],"sourcesContent":["import { noop as css } from '../../../helpers/noop-template'\n\nexport type ErrorMessageType = React.ReactNode\n\ntype ErrorMessageProps = {\n errorMessage: ErrorMessageType\n}\n\nexport function ErrorMessage({ errorMessage }: ErrorMessageProps) {\n return (\n <p\n id=\"nextjs__container_errors_desc\"\n className=\"nextjs__container_errors_desc\"\n >\n {errorMessage}\n </p>\n )\n}\n\nexport const styles = css`\n .nextjs__container_errors_desc {\n margin: 0;\n margin-left: var(--size-1);\n color: var(--color-red-900);\n font-weight: 500;\n font-size: var(--size-font);\n letter-spacing: -0.32px;\n line-height: var(--size-6);\n white-space: pre-wrap;\n }\n`\n"],"names":["noop","css","ErrorMessage","errorMessage","p","id","className","styles"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,iCAAgC;AAQ5D,OAAO,SAASC,aAAa,KAAmC;IAAnC,IAAA,EAAEC,YAAY,EAAqB,GAAnC;IAC3B,qBACE,KAACC;QACCC,IAAG;QACHC,WAAU;kBAETH;;AAGP;AAEA,OAAO,MAAMI,SAASN,~~uBAWrB~~"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-message/error-message.tsx"],"sourcesContent":["import { noop as css } from '../../../helpers/noop-template'\n\nexport type ErrorMessageType = React.ReactNode\n\ntype ErrorMessageProps = {\n errorMessage: ErrorMessageType\n}\n\nexport function ErrorMessage({ errorMessage }: ErrorMessageProps) {\n return (\n <p\n id=\"nextjs__container_errors_desc\"\n className=\"nextjs__container_errors_desc\"\n >\n {errorMessage}\n </p>\n )\n}\n\nexport const styles = css`\n .nextjs__container_errors_desc {\n margin: 0;\n margin-left: var(--size-1);\n color: var(--color-red-900);\n font-weight: 500;\n font-size: var(--size-font);\n letter-spacing: -0.32px;\n line-height: var(--size-6);\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n`\n"],"names":["noop","css","ErrorMessage","errorMessage","p","id","className","styles"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,iCAAgC;AAQ5D,OAAO,SAASC,aAAa,KAAmC;IAAnC,IAAA,EAAEC,YAAY,EAAqB,GAAnC;IAC3B,qBACE,KAACC;QACCC,IAAG;QACHC,WAAU;kBAETH;;AAGP;AAEA,OAAO,MAAMI,SAASN,uBAYrB"}

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

@@ -5,7 +5,7 @@ import { RootLayoutMissingTagsError } from '../../../container/root-layout-missi
 import { useDelayedRender } from '../../../hooks/use-delayed-render';
 const transitionDurationMs = 200;
 export function ErrorOverlay(param) {
-    let { state, readyErrors, isErrorOverlayOpen, setIsErrorOverlayOpen } = param;
+    let { state, runtimeErrors, isErrorOverlayOpen, setIsErrorOverlayOpen } = param;
     var _state_rootLayoutMissingTags;
     const isTurbopack = !!process.env.TURBOPACK;
     // This hook lets us do an exit animation before unmounting the component
@@ -35,7 +35,7 @@ export function ErrorOverlay(param) {
         });
     }
     // No Runtime Errors.
-    if (!readyErrors.length) {
+    if (!runtimeErrors.length) {
         return null;
     }
     if (!mounted) {
@@ -44,7 +44,7 @@ export function ErrorOverlay(param) {
     return /*#__PURE__*/ _jsx(Errors, {
         ...commonProps,
         debugInfo: state.debugInfo,
-        readyErrors: readyErrors,
+        runtimeErrors: runtimeErrors,
         onClose: ()=>{
             setIsErrorOverlayOpen(false);
         }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../../../../shared'\n\nimport { BuildError } from '../../../container/build-error'\nimport { Errors } from '../../../container/errors'\nimport { RootLayoutMissingTagsError } from '../../../container/root-layout-missing-tags-error'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type'\n\nconst transitionDurationMs = 200\n\nexport interface ErrorBaseProps {\n rendered: boolean\n transitionDurationMs: number\n isTurbopack: boolean\n versionInfo: OverlayState['versionInfo']\n}\n\nexport function ErrorOverlay({\n state,\n ~~readyErrors~~,\n isErrorOverlayOpen,\n setIsErrorOverlayOpen,\n}: {\n state: OverlayState\n ~~readyErrors~~: ReadyRuntimeError[]\n isErrorOverlayOpen: boolean\n setIsErrorOverlayOpen: (value: boolean) => void\n}) {\n const isTurbopack = !!process.env.TURBOPACK\n\n // This hook lets us do an exit animation before unmounting the component\n const { mounted, rendered } = useDelayedRender(isErrorOverlayOpen, {\n exitDelay: transitionDurationMs,\n })\n\n const commonProps = {\n rendered,\n transitionDurationMs,\n isTurbopack,\n versionInfo: state.versionInfo,\n }\n\n if (!!state.rootLayoutMissingTags?.length) {\n return (\n <RootLayoutMissingTagsError\n {...commonProps}\n // This is not a runtime error, forcedly display error overlay\n rendered\n missingTags={state.rootLayoutMissingTags}\n />\n )\n }\n\n if (state.buildError !== null) {\n return (\n <BuildError\n {...commonProps}\n message={state.buildError}\n // This is not a runtime error, forcedly display error overlay\n rendered\n />\n )\n }\n\n // No Runtime Errors.\n if (!~~readyErrors~~.length) {\n return null\n }\n\n if (!mounted) {\n return null\n }\n\n return (\n <Errors\n {...commonProps}\n debugInfo={state.debugInfo}\n ~~readyErrors~~={~~readyErrors~~}\n onClose={() => {\n setIsErrorOverlayOpen(false)\n }}\n />\n )\n}\n"],"names":["BuildError","Errors","RootLayoutMissingTagsError","useDelayedRender","transitionDurationMs","ErrorOverlay","state","~~readyErrors~~","isErrorOverlayOpen","setIsErrorOverlayOpen","isTurbopack","process","env","TURBOPACK","mounted","rendered","exitDelay","commonProps","versionInfo","rootLayoutMissingTags","length","missingTags","buildError","message","debugInfo","onClose"],"mappings":";AAEA,SAASA,UAAU,QAAQ,iCAAgC;AAC3D,SAASC,MAAM,QAAQ,4BAA2B;AAClD,SAASC,0BAA0B,QAAQ,oDAAmD;AAC9F,SAASC,gBAAgB,QAAQ,oCAAmC;AAGpE,MAAMC,uBAAuB;AAS7B,OAAO,SAASC,aAAa,KAU5B;IAV4B,IAAA,EAC3BC,KAAK,EACLC,~~WAAW~~,~~EACXC~~,kBAAkB,EAClBC,qBAAqB,EAMtB,GAV4B;QAyBrBH;IAdN,MAAMI,cAAc,CAAC,CAACC,QAAQC,GAAG,CAACC,SAAS;IAE3C,yEAAyE;IACzE,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGZ,iBAAiBK,oBAAoB;QACjEQ,WAAWZ;IACb;IAEA,MAAMa,cAAc;QAClBF;QACAX;QACAM;QACAQ,aAAaZ,MAAMY,WAAW;IAChC;IAEA,IAAI,CAAC,GAACZ,+BAAAA,MAAMa,qBAAqB,qBAA3Bb,6BAA6Bc,MAAM,GAAE;QACzC,qBACE,KAAClB;YACE,GAAGe,WAAW;YACf,8DAA8D;YAC9DF,QAAQ;YACRM,aAAaf,MAAMa,qBAAqB;;IAG9C;IAEA,IAAIb,MAAMgB,UAAU,KAAK,MAAM;QAC7B,qBACE,KAACtB;YACE,GAAGiB,WAAW;YACfM,SAASjB,MAAMgB,UAAU;YACzB,8DAA8D;YAC9DP,QAAQ;;IAGd;IAEA,qBAAqB;IACrB,IAAI,CAACR,~~YAAYa~~,MAAM,EAAE;~~QACvB~~,OAAO;IACT;IAEA,IAAI,CAACN,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,KAACb;QACE,GAAGgB,WAAW;QACfO,WAAWlB,MAAMkB,SAAS;QAC1BjB,~~aAAaA~~;~~QACbkB~~,SAAS;YACPhB,sBAAsB;QACxB;;AAGN"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../../../../shared'\n\nimport { BuildError } from '../../../container/build-error'\nimport { Errors } from '../../../container/errors'\nimport { RootLayoutMissingTagsError } from '../../../container/root-layout-missing-tags-error'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type'\n\nconst transitionDurationMs = 200\n\nexport interface ErrorBaseProps {\n rendered: boolean\n transitionDurationMs: number\n isTurbopack: boolean\n versionInfo: OverlayState['versionInfo']\n}\n\nexport function ErrorOverlay({\n state,\n runtimeErrors,\n isErrorOverlayOpen,\n setIsErrorOverlayOpen,\n}: {\n state: OverlayState\n runtimeErrors: ReadyRuntimeError[]\n isErrorOverlayOpen: boolean\n setIsErrorOverlayOpen: (value: boolean) => void\n}) {\n const isTurbopack = !!process.env.TURBOPACK\n\n // This hook lets us do an exit animation before unmounting the component\n const { mounted, rendered } = useDelayedRender(isErrorOverlayOpen, {\n exitDelay: transitionDurationMs,\n })\n\n const commonProps = {\n rendered,\n transitionDurationMs,\n isTurbopack,\n versionInfo: state.versionInfo,\n }\n\n if (!!state.rootLayoutMissingTags?.length) {\n return (\n <RootLayoutMissingTagsError\n {...commonProps}\n // This is not a runtime error, forcedly display error overlay\n rendered\n missingTags={state.rootLayoutMissingTags}\n />\n )\n }\n\n if (state.buildError !== null) {\n return (\n <BuildError\n {...commonProps}\n message={state.buildError}\n // This is not a runtime error, forcedly display error overlay\n rendered\n />\n )\n }\n\n // No Runtime Errors.\n if (!runtimeErrors.length) {\n return null\n }\n\n if (!mounted) {\n return null\n }\n\n return (\n <Errors\n {...commonProps}\n debugInfo={state.debugInfo}\n runtimeErrors={runtimeErrors}\n onClose={() => {\n setIsErrorOverlayOpen(false)\n }}\n />\n )\n}\n"],"names":["BuildError","Errors","RootLayoutMissingTagsError","useDelayedRender","transitionDurationMs","ErrorOverlay","state","runtimeErrors","isErrorOverlayOpen","setIsErrorOverlayOpen","isTurbopack","process","env","TURBOPACK","mounted","rendered","exitDelay","commonProps","versionInfo","rootLayoutMissingTags","length","missingTags","buildError","message","debugInfo","onClose"],"mappings":";AAEA,SAASA,UAAU,QAAQ,iCAAgC;AAC3D,SAASC,MAAM,QAAQ,4BAA2B;AAClD,SAASC,0BAA0B,QAAQ,oDAAmD;AAC9F,SAASC,gBAAgB,QAAQ,oCAAmC;AAGpE,MAAMC,uBAAuB;AAS7B,OAAO,SAASC,aAAa,KAU5B;IAV4B,IAAA,EAC3BC,KAAK,EACLC,aAAa,EACbC,kBAAkB,EAClBC,qBAAqB,EAMtB,GAV4B;QAyBrBH;IAdN,MAAMI,cAAc,CAAC,CAACC,QAAQC,GAAG,CAACC,SAAS;IAE3C,yEAAyE;IACzE,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGZ,iBAAiBK,oBAAoB;QACjEQ,WAAWZ;IACb;IAEA,MAAMa,cAAc;QAClBF;QACAX;QACAM;QACAQ,aAAaZ,MAAMY,WAAW;IAChC;IAEA,IAAI,CAAC,GAACZ,+BAAAA,MAAMa,qBAAqB,qBAA3Bb,6BAA6Bc,MAAM,GAAE;QACzC,qBACE,KAAClB;YACE,GAAGe,WAAW;YACf,8DAA8D;YAC9DF,QAAQ;YACRM,aAAaf,MAAMa,qBAAqB;;IAG9C;IAEA,IAAIb,MAAMgB,UAAU,KAAK,MAAM;QAC7B,qBACE,KAACtB;YACE,GAAGiB,WAAW;YACfM,SAASjB,MAAMgB,UAAU;YACzB,8DAA8D;YAC9DP,QAAQ;;IAGd;IAEA,qBAAqB;IACrB,IAAI,CAACR,cAAca,MAAM,EAAE;QACzB,OAAO;IACT;IAEA,IAAI,CAACN,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,KAACb;QACE,GAAGgB,WAAW;QACfO,WAAWlB,MAAMkB,SAAS;QAC1BjB,eAAeA;QACfkB,SAAS;YACPhB,sBAAsB;QACxB;;AAGN"}

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

@@ -33,7 +33,7 @@ import { OVERLAY_STYLES, ErrorOverlayOverlay } from '../overlay/overlay';
 import { ErrorOverlayBottomStack } from '../error-overlay-bottom-stack';
 import { EnvironmentNameLabel } from '../environment-name-label/environment-name-label';
 export function ErrorOverlayLayout(param) {
-    let { errorMessage, errorType, children, errorCode, error, debugInfo, isBuildError, onClose, versionInfo, readyErrors, activeIdx, setActiveIndex, footerMessage, isTurbopack, dialogResizerRef, // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)
+    let { errorMessage, errorType, children, errorCode, error, debugInfo, isBuildError, onClose, versionInfo, runtimeErrors, activeIdx, setActiveIndex, footerMessage, isTurbopack, dialogResizerRef, // This prop is used to animate the dialog, it comes from a parent component (<ErrorOverlay>)
     // If it's not being passed, we should just render the component as it is being
     // used without the context of a parent component that controls its state (e.g. Storybook).
     rendered = true, transitionDurationMs } = param;
@@ -44,7 +44,7 @@ export function ErrorOverlayLayout(param) {
         }
     };
     const hasFooter = Boolean(footerMessage || errorCode);
-    var _readyErrors_length;
+    var _runtimeErrors_length;
     return /*#__PURE__*/ _jsx(ErrorOverlayOverlay, {
         fixed: isBuildError,
         ...animationProps,
@@ -100,13 +100,13 @@ export function ErrorOverlayLayout(param) {
                             })
                         }),
                         /*#__PURE__*/ _jsx(ErrorOverlayBottomStack, {
-                            count: (_readyErrors_length = readyErrors == null ? void 0 : readyErrors.length) != null ? _readyErrors_length : 0,
+                            count: (_runtimeErrors_length = runtimeErrors == null ? void 0 : runtimeErrors.length) != null ? _runtimeErrors_length : 0,
                             activeIdx: activeIdx != null ? activeIdx : 0
                         })
                     ]
                 }),
                 /*#__PURE__*/ _jsx(ErrorOverlayNav, {
-                    readyErrors: readyErrors,
+                    runtimeErrors: runtimeErrors,
                     activeIdx: activeIdx,
                     setActiveIndex: setActiveIndex,
                     versionInfo: versionInfo,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/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 { noop as css } from '../../../helpers/noop-template'\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 '../../../../../internal/helpers/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 ~~readyErrors~~?: 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 ~~readyErrors~~,\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={~~readyErrors~~?.length ?? 0}\n activeIdx={activeIdx ?? 0}\n />\n </ErrorOverlayDialog>\n <ErrorOverlayNav\n ~~readyErrors~~={~~readyErrors~~}\n activeIdx={activeIdx}\n setActiveIndex={setActiveIndex}\n versionInfo={versionInfo}\n isTurbopack={isTurbopack}\n />\n </div>\n </ErrorOverlayOverlay>\n )\n}\n\nexport const styles = css`\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","noop","css","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","~~readyErrors~~","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,SAASC,QAAQC,GAAG,QAAQ,iCAAgC;AAC5D,SACEC,YAAY,EACZL,UAAUM,kBAAkB,QACvB,iCAAgC;AACvC,SACEC,cAAc,EACdP,UAAUQ,oBAAoB,QACzB,uCAAsC;AAC7C,SACEC,eAAe,EACfT,UAAUU,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,~~WAAW~~,~~EACXC~~,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,MAAC7C;;8CACC,MAACgB;;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,KAACrD;oDAAoB4B,OAAOA;oDAAOC,WAAWA;;;;sDAEhD,KAACvB;4CAAakB,cAAcA;;;;8CAG9B,KAACR;8CAAwBU;;;;wBAE1BiB,2BACC,KAAC5C;sCACC,cAAA,KAACI;gCACCiC,eAAeA;gCACfT,WAAWA;;;sCAIjB,KAACN;4BACCiC,OAAOrB,CAAAA,~~sBAAAA,+BAAAA~~,~~YAAasB~~,MAAM,~~YAAnBtB~~,~~sBAAuB~~;~~4BAC9BC~~,WAAWA,oBAAAA,YAAa;;;;8BAG5B,KAACxB;oBACCuB,~~aAAaA~~;~~oBACbC~~,WAAWA;oBACXC,gBAAgBA;oBAChBH,aAAaA;oBACbK,aAAaA;;;;;AAKvB;AAEA,OAAO,MAAMpC,SAASI,uBAClBc,gBACAN,eACAE,sBACAE,oBAEAN,sBACAF,sBACAF,oBACAL,eACAgB,mBAOH"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/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 { noop as css } from '../../../helpers/noop-template'\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 '../../../../../internal/helpers/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 = css`\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","noop","css","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,SAASC,QAAQC,GAAG,QAAQ,iCAAgC;AAC5D,SACEC,YAAY,EACZL,UAAUM,kBAAkB,QACvB,iCAAgC;AACvC,SACEC,cAAc,EACdP,UAAUQ,oBAAoB,QACzB,uCAAsC;AAC7C,SACEC,eAAe,EACfT,UAAUU,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,MAAC7C;;8CACC,MAACgB;;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,KAACrD;oDAAoB4B,OAAOA;oDAAOC,WAAWA;;;;sDAEhD,KAACvB;4CAAakB,cAAcA;;;;8CAG9B,KAACR;8CAAwBU;;;;wBAE1BiB,2BACC,KAAC5C;sCACC,cAAA,KAACI;gCACCiC,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,MAAMpC,SAASI,uBAClBc,gBACAN,eACAE,sBACAE,oBAEAN,sBACAF,sBACAF,oBACAL,eACAgB,mBAOH"}

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

@@ -13,14 +13,14 @@ import { ErrorOverlayPagination } from '../error-overlay-pagination/error-overla
 import { VersionStalenessInfo } from '../../version-staleness-info/version-staleness-info';
 import { noop as css } from '../../../helpers/noop-template';
 export function ErrorOverlayNav(param) {
-    let { readyErrors, activeIdx, setActiveIndex, versionInfo, isTurbopack } = param;
+    let { runtimeErrors, activeIdx, setActiveIndex, versionInfo, isTurbopack } = param;
     return /*#__PURE__*/ _jsxs("div", {
         "data-nextjs-error-overlay-nav": true,
         children: [
             /*#__PURE__*/ _jsx(Notch, {
                 side: "left",
                 children: /*#__PURE__*/ _jsx(ErrorOverlayPagination, {
-                    readyErrors: readyErrors != null ? readyErrors : [],
+                    runtimeErrors: runtimeErrors != null ? runtimeErrors : [],
                     activeIdx: activeIdx != null ? activeIdx : 0,
                     onActiveIndexChange: setActiveIndex != null ? setActiveIndex : ()=>{}
                 })

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-nav/error-overlay-nav.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\n\nimport { ErrorOverlayPagination } from '../error-overlay-pagination/error-overlay-pagination'\nimport { VersionStalenessInfo } from '../../version-staleness-info/version-staleness-info'\nimport { noop as css } from '../../../helpers/noop-template'\nimport type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type'\n\ntype ErrorOverlayNavProps = {\n ~~readyErrors~~?: ReadyRuntimeError[]\n activeIdx?: number\n setActiveIndex?: (index: number) => void\n versionInfo?: VersionInfo\n isTurbopack?: boolean\n}\n\nexport function ErrorOverlayNav({\n ~~readyErrors~~,\n activeIdx,\n setActiveIndex,\n versionInfo,\n isTurbopack,\n}: ErrorOverlayNavProps) {\n return (\n <div data-nextjs-error-overlay-nav>\n <Notch side=\"left\">\n {/* TODO: better passing data instead of nullish coalescing /}\n <ErrorOverlayPagination\n ~~readyErrors~~={~~readyErrors~~ ?? []}\n activeIdx={activeIdx ?? 0}\n onActiveIndexChange={setActiveIndex ?? (() => {})}\n />\n </Notch>\n {versionInfo && (\n <Notch side=\"right\">\n <VersionStalenessInfo\n versionInfo={versionInfo}\n isTurbopack={isTurbopack}\n />\n </Notch>\n )}\n </div>\n )\n}\n\nexport const styles = css`\n [data-nextjs-error-overlay-nav] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n width: 100%;\n\n outline: none;\n translate: 1px 1px;\n max-width: var(--next-dialog-max-width);\n\n .error-overlay-notch {\n --stroke-color: var(--color-gray-400);\n --background-color: var(--color-background-100);\n\n translate: -1px 0;\n width: auto;\n height: 42px;\n padding: 12px;\n background: var(--background-color);\n border: 1px solid var(--stroke-color);\n border-bottom: none;\n position: relative;\n\n &[data-side='left'] {\n padding-right: 0;\n border-radius: var(--next-dialog-radius) 0 0 0;\n\n .error-overlay-notch-tail {\n right: -54px;\n }\n\n > :not(.error-overlay-notch-tail) {\n margin-right: -10px;\n }\n }\n\n &[data-side='right'] {\n padding-left: 0;\n border-radius: 0 var(--next-dialog-radius) 0 0;\n\n .error-overlay-notch-tail {\n left: -54px;\n transform: rotateY(180deg);\n }\n\n > *:not(.error-overlay-notch-tail) {\n margin-left: -12px;\n }\n }\n\n .error-overlay-notch-tail {\n position: absolute;\n top: -1px;\n pointer-events: none;\n z-index: -1;\n }\n }\n }\n`\n\nfunction Notch({\n children,\n side = 'left',\n}: {\n children: React.ReactNode\n side?: 'left' \| 'right'\n}) {\n return (\n <div className=\"error-overlay-notch\" data-side={side}>\n {children}\n <Tail />\n </div>\n )\n}\n\nfunction Tail() {\n return (\n <svg\n width=\"60\"\n height=\"42\"\n viewBox=\"0 0 60 42\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"error-overlay-notch-tail\"\n >\n <mask\n id=\"mask0_2667_14687\"\n style={{\n maskType: 'alpha',\n }}\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"-1\"\n width=\"60\"\n height=\"43\"\n >\n <mask\n id=\"path-1-outside-1_2667_14687\"\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"-1\"\n width=\"60\"\n height=\"43\"\n fill=\"black\"\n >\n <rect fill=\"white\" y=\"-1\" width=\"60\" height=\"43\" />\n <path d=\"M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z\" />\n </mask>\n <path\n d=\"M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z\"\n fill=\"white\"\n />\n <path\n d=\"M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z\"\n fill=\"black\"\n mask=\"url(#path-1-outside-1_2667_14687)\"\n />\n </mask>\n <g mask=\"url(#mask0_2667_14687)\">\n <mask\n id=\"path-3-outside-2_2667_14687\"\n maskUnits=\"userSpaceOnUse\"\n x=\"-1\"\n y=\"0.0244141\"\n width=\"60\"\n height=\"43\"\n fill=\"black\"\n >\n <rect fill=\"white\" x=\"-1\" y=\"0.0244141\" width=\"60\" height=\"43\" />\n <path d=\"M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z\" />\n </mask>\n <path\n d=\"M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z\"\n fill=\"var(--background-color)\"\n />\n <path\n d=\"M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z\"\n fill=\"var(--stroke-color)\"\n mask=\"url(#path-3-outside-2_2667_14687)\"\n />\n </g>\n </svg>\n )\n}\n"],"names":["ErrorOverlayPagination","VersionStalenessInfo","noop","css","ErrorOverlayNav","~~readyErrors~~","activeIdx","setActiveIndex","versionInfo","isTurbopack","div","data-nextjs-error-overlay-nav","Notch","side","onActiveIndexChange","styles","children","className","data-side","Tail","svg","width","height","viewBox","fill","xmlns","mask","id","style","maskType","maskUnits","x","y","rect","path","d","g"],"mappings":";;;;;;;;;;;AAEA,SAASA,sBAAsB,QAAQ,uDAAsD;AAC7F,SAASC,oBAAoB,QAAQ,sDAAqD;AAC1F,SAASC,QAAQC,GAAG,QAAQ,iCAAgC;AAW5D,OAAO,SAASC,gBAAgB,KAMT;IANS,IAAA,EAC9BC,~~WAAW~~,~~EACXC~~,SAAS,EACTC,cAAc,EACdC,WAAW,EACXC,WAAW,EACU,GANS;IAO9B,qBACE,MAACC;QAAIC,+BAA6B;;0BAChC,KAACC;gBAAMC,MAAK;0BAEV,cAAA,KAACb;oBACCK,~~aAAaA~~,~~sBAAAA~~,~~cAAe~~,EAAE;~~oBAC9BC~~,WAAWA,oBAAAA,YAAa;oBACxBQ,qBAAqBP,yBAAAA,iBAAmB,KAAO;;;YAGlDC,6BACC,KAACI;gBAAMC,MAAK;0BACV,cAAA,KAACZ;oBACCO,aAAaA;oBACbC,aAAaA;;;;;AAMzB;AAEA,OAAO,MAAMM,SAASZ,uBA4DrB;AAED,SAASS,MAAM,KAMd;IANc,IAAA,EACbI,QAAQ,EACRH,OAAO,MAAM,EAId,GANc;IAOb,qBACE,MAACH;QAAIO,WAAU;QAAsBC,aAAWL;;YAC7CG;0BACD,KAACG;;;AAGP;AAEA,SAASA;IACP,qBACE,MAACC;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACNR,WAAU;;0BAEV,MAACS;gBACCC,IAAG;gBACHC,OAAO;oBACLC,UAAU;gBACZ;gBACAC,WAAU;gBACVC,GAAE;gBACFC,GAAE;gBACFX,OAAM;gBACNC,QAAO;;kCAEP,MAACI;wBACCC,IAAG;wBACHG,WAAU;wBACVC,GAAE;wBACFC,GAAE;wBACFX,OAAM;wBACNC,QAAO;wBACPE,MAAK;;0CAEL,KAACS;gCAAKT,MAAK;gCAAQQ,GAAE;gCAAKX,OAAM;gCAAKC,QAAO;;0CAC5C,KAACY;gCAAKC,GAAE;;;;kCAEV,KAACD;wBACCC,GAAE;wBACFX,MAAK;;kCAEP,KAACU;wBACCC,GAAE;wBACFX,MAAK;wBACLE,MAAK;;;;0BAGT,MAACU;gBAAEV,MAAK;;kCACN,MAACA;wBACCC,IAAG;wBACHG,WAAU;wBACVC,GAAE;wBACFC,GAAE;wBACFX,OAAM;wBACNC,QAAO;wBACPE,MAAK;;0CAEL,KAACS;gCAAKT,MAAK;gCAAQO,GAAE;gCAAKC,GAAE;gCAAYX,OAAM;gCAAKC,QAAO;;0CAC1D,KAACY;gCAAKC,GAAE;;;;kCAEV,KAACD;wBACCC,GAAE;wBACFX,MAAK;;kCAEP,KAACU;wBACCC,GAAE;wBACFX,MAAK;wBACLE,MAAK;;;;;;AAKf"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-nav/error-overlay-nav.tsx"],"sourcesContent":["import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\n\nimport { ErrorOverlayPagination } from '../error-overlay-pagination/error-overlay-pagination'\nimport { VersionStalenessInfo } from '../../version-staleness-info/version-staleness-info'\nimport { noop as css } from '../../../helpers/noop-template'\nimport type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type'\n\ntype ErrorOverlayNavProps = {\n runtimeErrors?: ReadyRuntimeError[]\n activeIdx?: number\n setActiveIndex?: (index: number) => void\n versionInfo?: VersionInfo\n isTurbopack?: boolean\n}\n\nexport function ErrorOverlayNav({\n runtimeErrors,\n activeIdx,\n setActiveIndex,\n versionInfo,\n isTurbopack,\n}: ErrorOverlayNavProps) {\n return (\n <div data-nextjs-error-overlay-nav>\n <Notch side=\"left\">\n {/* TODO: better passing data instead of nullish coalescing /}\n <ErrorOverlayPagination\n runtimeErrors={runtimeErrors ?? []}\n activeIdx={activeIdx ?? 0}\n onActiveIndexChange={setActiveIndex ?? (() => {})}\n />\n </Notch>\n {versionInfo && (\n <Notch side=\"right\">\n <VersionStalenessInfo\n versionInfo={versionInfo}\n isTurbopack={isTurbopack}\n />\n </Notch>\n )}\n </div>\n )\n}\n\nexport const styles = css`\n [data-nextjs-error-overlay-nav] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n width: 100%;\n\n outline: none;\n translate: 1px 1px;\n max-width: var(--next-dialog-max-width);\n\n .error-overlay-notch {\n --stroke-color: var(--color-gray-400);\n --background-color: var(--color-background-100);\n\n translate: -1px 0;\n width: auto;\n height: 42px;\n padding: 12px;\n background: var(--background-color);\n border: 1px solid var(--stroke-color);\n border-bottom: none;\n position: relative;\n\n &[data-side='left'] {\n padding-right: 0;\n border-radius: var(--next-dialog-radius) 0 0 0;\n\n .error-overlay-notch-tail {\n right: -54px;\n }\n\n > :not(.error-overlay-notch-tail) {\n margin-right: -10px;\n }\n }\n\n &[data-side='right'] {\n padding-left: 0;\n border-radius: 0 var(--next-dialog-radius) 0 0;\n\n .error-overlay-notch-tail {\n left: -54px;\n transform: rotateY(180deg);\n }\n\n > *:not(.error-overlay-notch-tail) {\n margin-left: -12px;\n }\n }\n\n .error-overlay-notch-tail {\n position: absolute;\n top: -1px;\n pointer-events: none;\n z-index: -1;\n }\n }\n }\n`\n\nfunction Notch({\n children,\n side = 'left',\n}: {\n children: React.ReactNode\n side?: 'left' \| 'right'\n}) {\n return (\n <div className=\"error-overlay-notch\" data-side={side}>\n {children}\n <Tail />\n </div>\n )\n}\n\nfunction Tail() {\n return (\n <svg\n width=\"60\"\n height=\"42\"\n viewBox=\"0 0 60 42\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"error-overlay-notch-tail\"\n >\n <mask\n id=\"mask0_2667_14687\"\n style={{\n maskType: 'alpha',\n }}\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"-1\"\n width=\"60\"\n height=\"43\"\n >\n <mask\n id=\"path-1-outside-1_2667_14687\"\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"-1\"\n width=\"60\"\n height=\"43\"\n fill=\"black\"\n >\n <rect fill=\"white\" y=\"-1\" width=\"60\" height=\"43\" />\n <path d=\"M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z\" />\n </mask>\n <path\n d=\"M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z\"\n fill=\"white\"\n />\n <path\n d=\"M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z\"\n fill=\"black\"\n mask=\"url(#path-1-outside-1_2667_14687)\"\n />\n </mask>\n <g mask=\"url(#mask0_2667_14687)\">\n <mask\n id=\"path-3-outside-2_2667_14687\"\n maskUnits=\"userSpaceOnUse\"\n x=\"-1\"\n y=\"0.0244141\"\n width=\"60\"\n height=\"43\"\n fill=\"black\"\n >\n <rect fill=\"white\" x=\"-1\" y=\"0.0244141\" width=\"60\" height=\"43\" />\n <path d=\"M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z\" />\n </mask>\n <path\n d=\"M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z\"\n fill=\"var(--background-color)\"\n />\n <path\n d=\"M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z\"\n fill=\"var(--stroke-color)\"\n mask=\"url(#path-3-outside-2_2667_14687)\"\n />\n </g>\n </svg>\n )\n}\n"],"names":["ErrorOverlayPagination","VersionStalenessInfo","noop","css","ErrorOverlayNav","runtimeErrors","activeIdx","setActiveIndex","versionInfo","isTurbopack","div","data-nextjs-error-overlay-nav","Notch","side","onActiveIndexChange","styles","children","className","data-side","Tail","svg","width","height","viewBox","fill","xmlns","mask","id","style","maskType","maskUnits","x","y","rect","path","d","g"],"mappings":";;;;;;;;;;;AAEA,SAASA,sBAAsB,QAAQ,uDAAsD;AAC7F,SAASC,oBAAoB,QAAQ,sDAAqD;AAC1F,SAASC,QAAQC,GAAG,QAAQ,iCAAgC;AAW5D,OAAO,SAASC,gBAAgB,KAMT;IANS,IAAA,EAC9BC,aAAa,EACbC,SAAS,EACTC,cAAc,EACdC,WAAW,EACXC,WAAW,EACU,GANS;IAO9B,qBACE,MAACC;QAAIC,+BAA6B;;0BAChC,KAACC;gBAAMC,MAAK;0BAEV,cAAA,KAACb;oBACCK,eAAeA,wBAAAA,gBAAiB,EAAE;oBAClCC,WAAWA,oBAAAA,YAAa;oBACxBQ,qBAAqBP,yBAAAA,iBAAmB,KAAO;;;YAGlDC,6BACC,KAACI;gBAAMC,MAAK;0BACV,cAAA,KAACZ;oBACCO,aAAaA;oBACbC,aAAaA;;;;;AAMzB;AAEA,OAAO,MAAMM,SAASZ,uBA4DrB;AAED,SAASS,MAAM,KAMd;IANc,IAAA,EACbI,QAAQ,EACRH,OAAO,MAAM,EAId,GANc;IAOb,qBACE,MAACH;QAAIO,WAAU;QAAsBC,aAAWL;;YAC7CG;0BACD,KAACG;;;AAGP;AAEA,SAASA;IACP,qBACE,MAACC;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACNR,WAAU;;0BAEV,MAACS;gBACCC,IAAG;gBACHC,OAAO;oBACLC,UAAU;gBACZ;gBACAC,WAAU;gBACVC,GAAE;gBACFC,GAAE;gBACFX,OAAM;gBACNC,QAAO;;kCAEP,MAACI;wBACCC,IAAG;wBACHG,WAAU;wBACVC,GAAE;wBACFC,GAAE;wBACFX,OAAM;wBACNC,QAAO;wBACPE,MAAK;;0CAEL,KAACS;gCAAKT,MAAK;gCAAQQ,GAAE;gCAAKX,OAAM;gCAAKC,QAAO;;0CAC5C,KAACY;gCAAKC,GAAE;;;;kCAEV,KAACD;wBACCC,GAAE;wBACFX,MAAK;;kCAEP,KAACU;wBACCC,GAAE;wBACFX,MAAK;wBACLE,MAAK;;;;0BAGT,MAACU;gBAAEV,MAAK;;kCACN,MAACA;wBACCC,IAAG;wBACHG,WAAU;wBACVC,GAAE;wBACFC,GAAE;wBACFX,OAAM;wBACNC,QAAO;wBACPE,MAAK;;0CAEL,KAACS;gCAAKT,MAAK;gCAAQO,GAAE;gCAAKC,GAAE;gCAAYX,OAAM;gCAAKC,QAAO;;0CAC1D,KAACY;gCAAKC,GAAE;;;;kCAEV,KAACD;wBACCC,GAAE;wBACFX,MAAK;;kCAEP,KAACU;wBACCC,GAAE;wBACFX,MAAK;wBACLE,MAAK;;;;;;AAKf"}

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

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        readyErrors: [
+        runtimeErrors: [
             {
                 id: 0,
                 runtime: true,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-nav/error-overlay-nav.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { ErrorOverlayNav } from './error-overlay-nav'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\n\nconst meta: Meta<typeof ErrorOverlayNav> = {\n component: ErrorOverlayNav,\n parameters: {\n layout: 'fullscreen',\n },\n decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof ErrorOverlayNav>\n\nexport const Default: Story = {\n args: {\n ~~readyErrors~~: [\n {\n id: 0,\n runtime: true,\n error: new Error('First error message'),\n frames: () => Promise.resolve([]),\n },\n {\n id: 1,\n runtime: true,\n error: new Error('Second error message'),\n frames: () => Promise.resolve([]),\n },\n {\n id: 2,\n runtime: true,\n error: new Error('Third error message'),\n frames: () => Promise.resolve([]),\n },\n ],\n activeIdx: 1,\n versionInfo: {\n installed: '15.0.0',\n staleness: 'stale-major',\n },\n },\n parameters: {\n docs: {\n story: { inline: true },\n },\n },\n decorators: [\n (Story) => (\n // Offset the translateY applied to the floating header.\n <div style={{ paddingTop: 'var(--size-10_5)' }}>\n <Story />\n </div>\n ),\n ],\n}\n"],"names":["ErrorOverlayNav","withShadowPortal","meta","component","parameters","layout","decorators","Default","args","~~readyErrors~~","id","runtime","error","Error","frames","Promise","resolve","activeIdx","versionInfo","installed","staleness","docs","story","inline","Story","div","style","paddingTop"],"mappings":";AACA,SAASA,eAAe,QAAQ,sBAAqB;AACrD,SAASC,gBAAgB,QAAQ,wCAAuC;AAExE,MAAMC,OAAqC;IACzCC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACL;KAAiB;AAChC;AAEA,eAAeC,KAAI;AAGnB,OAAO,MAAMK,UAAiB;IAC5BC,MAAM;QACJC,~~aAAa~~;~~YACX~~;gBACEC,IAAI;gBACJC,SAAS;gBACTC,OAAO,IAAIC,MAAM;gBACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;YAClC;YACA;gBACEN,IAAI;gBACJC,SAAS;gBACTC,OAAO,IAAIC,MAAM;gBACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;YAClC;YACA;gBACEN,IAAI;gBACJC,SAAS;gBACTC,OAAO,IAAIC,MAAM;gBACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;YAClC;SACD;QACDC,WAAW;QACXC,aAAa;YACXC,WAAW;YACXC,WAAW;QACb;IACF;IACAhB,YAAY;QACViB,MAAM;YACJC,OAAO;gBAAEC,QAAQ;YAAK;QACxB;IACF;IACAjB,YAAY;QACV,CAACkB,QACC,wDAAwD;0BACxD,KAACC;gBAAIC,OAAO;oBAAEC,YAAY;gBAAmB;0BAC3C,cAAA,KAACH;;KAGN;AACH,EAAC"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-nav/error-overlay-nav.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { ErrorOverlayNav } from './error-overlay-nav'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\n\nconst meta: Meta<typeof ErrorOverlayNav> = {\n component: ErrorOverlayNav,\n parameters: {\n layout: 'fullscreen',\n },\n decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof ErrorOverlayNav>\n\nexport const Default: Story = {\n args: {\n runtimeErrors: [\n {\n id: 0,\n runtime: true,\n error: new Error('First error message'),\n frames: () => Promise.resolve([]),\n },\n {\n id: 1,\n runtime: true,\n error: new Error('Second error message'),\n frames: () => Promise.resolve([]),\n },\n {\n id: 2,\n runtime: true,\n error: new Error('Third error message'),\n frames: () => Promise.resolve([]),\n },\n ],\n activeIdx: 1,\n versionInfo: {\n installed: '15.0.0',\n staleness: 'stale-major',\n },\n },\n parameters: {\n docs: {\n story: { inline: true },\n },\n },\n decorators: [\n (Story) => (\n // Offset the translateY applied to the floating header.\n <div style={{ paddingTop: 'var(--size-10_5)' }}>\n <Story />\n </div>\n ),\n ],\n}\n"],"names":["ErrorOverlayNav","withShadowPortal","meta","component","parameters","layout","decorators","Default","args","runtimeErrors","id","runtime","error","Error","frames","Promise","resolve","activeIdx","versionInfo","installed","staleness","docs","story","inline","Story","div","style","paddingTop"],"mappings":";AACA,SAASA,eAAe,QAAQ,sBAAqB;AACrD,SAASC,gBAAgB,QAAQ,wCAAuC;AAExE,MAAMC,OAAqC;IACzCC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACL;KAAiB;AAChC;AAEA,eAAeC,KAAI;AAGnB,OAAO,MAAMK,UAAiB;IAC5BC,MAAM;QACJC,eAAe;YACb;gBACEC,IAAI;gBACJC,SAAS;gBACTC,OAAO,IAAIC,MAAM;gBACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;YAClC;YACA;gBACEN,IAAI;gBACJC,SAAS;gBACTC,OAAO,IAAIC,MAAM;gBACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;YAClC;YACA;gBACEN,IAAI;gBACJC,SAAS;gBACTC,OAAO,IAAIC,MAAM;gBACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;YAClC;SACD;QACDC,WAAW;QACXC,aAAa;YACXC,WAAW;YACXC,WAAW;QACb;IACF;IACAhB,YAAY;QACViB,MAAM;YACJC,OAAO;gBAAEC,QAAQ;YAAK;QACxB;IACF;IACAjB,YAAY;QACV,CAACkB,QACC,wDAAwD;0BACxD,KAACC;gBAAIC,OAAO;oBAAEC,YAAY;gBAAmB;0BAC3C,cAAA,KAACH;;KAGN;AACH,EAAC"}

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

@@ -14,7 +14,7 @@ import { noop as css } from '../../../helpers/noop-template';
 import { LeftArrow } from '../../../icons/left-arrow';
 import { RightArrow } from '../../../icons/right-arrow';
 export function ErrorOverlayPagination(param) {
-    let { readyErrors, activeIdx, onActiveIndexChange } = param;
+    let { runtimeErrors, activeIdx, onActiveIndexChange } = param;
     const handlePrevious = useCallback(()=>startTransition(()=>{
             if (activeIdx > 0) {
                 onActiveIndexChange(Math.max(0, activeIdx - 1));
@@ -24,12 +24,12 @@ export function ErrorOverlayPagination(param) {
         onActiveIndexChange
     ]);
     const handleNext = useCallback(()=>startTransition(()=>{
-            if (activeIdx < readyErrors.length - 1) {
-                onActiveIndexChange(Math.max(0, Math.min(readyErrors.length - 1, activeIdx + 1)));
+            if (activeIdx < runtimeErrors.length - 1) {
+                onActiveIndexChange(Math.max(0, Math.min(runtimeErrors.length - 1, activeIdx + 1)));
             }
         }), [
         activeIdx,
-        readyErrors.length,
+        runtimeErrors.length,
         onActiveIndexChange
     ]);
     const buttonLeft = useRef(null);
@@ -84,7 +84,7 @@ export function ErrorOverlayPagination(param) {
                 if (buttonLeft.current && a === buttonLeft.current) {
                     buttonLeft.current.blur();
                 }
-            } else if (activeIdx === readyErrors.length - 1) {
+            } else if (activeIdx === runtimeErrors.length - 1) {
                 if (buttonRight.current && a === buttonRight.current) {
                     buttonRight.current.blur();
                 }
@@ -93,7 +93,7 @@ export function ErrorOverlayPagination(param) {
     }, [
         nav,
         activeIdx,
-        readyErrors.length
+        runtimeErrors.length
     ]);
     return /*#__PURE__*/ _jsxs("nav", {
         className: "error-overlay-pagination dialog-exclude-closing-from-outside-click",
@@ -124,7 +124,7 @@ export function ErrorOverlayPagination(param) {
                     }),
                     /*#__PURE__*/ _jsx("span", {
                         "data-nextjs-dialog-header-total-count": true,
-                        children: readyErrors.length || 1
+                        children: runtimeErrors.length || 1
                     })
                 ]
             }),
@@ -132,8 +132,8 @@ export function ErrorOverlayPagination(param) {
                 ref: buttonRight,
                 type: "button",
                 // If no errors or the last error is active, disable the button.
-                disabled: activeIdx >= readyErrors.length - 1,
-                "aria-disabled": activeIdx >= readyErrors.length - 1,
+                disabled: activeIdx >= runtimeErrors.length - 1,
+                "aria-disabled": activeIdx >= runtimeErrors.length - 1,
                 onClick: handleNext,
                 "data-nextjs-dialog-error-next": true,
                 className: "error-overlay-pagination-button",

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.tsx"],"sourcesContent":["import {\n startTransition,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { noop as css } from '../../../helpers/noop-template'\nimport { LeftArrow } from '../../../icons/left-arrow'\nimport { RightArrow } from '../../../icons/right-arrow'\nimport type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type'\n\ntype ErrorPaginationProps = {\n ~~readyErrors~~: ReadyRuntimeError[]\n activeIdx: number\n onActiveIndexChange: (index: number) => void\n}\n\nexport function ErrorOverlayPagination({\n ~~readyErrors~~,\n activeIdx,\n onActiveIndexChange,\n}: ErrorPaginationProps) {\n const handlePrevious = useCallback(\n () =>\n startTransition(() => {\n if (activeIdx > 0) {\n onActiveIndexChange(Math.max(0, activeIdx - 1))\n }\n }),\n [activeIdx, onActiveIndexChange]\n )\n\n const handleNext = useCallback(\n () =>\n startTransition(() => {\n if (activeIdx < ~~readyErrors~~.length - 1) {\n onActiveIndexChange(\n Math.max(0, Math.min(~~readyErrors~~.length - 1, activeIdx + 1))\n )\n }\n }),\n [activeIdx, ~~readyErrors~~.length, onActiveIndexChange]\n )\n\n const buttonLeft = useRef<HTMLButtonElement \| null>(null)\n const buttonRight = useRef<HTMLButtonElement \| null>(null)\n\n const [nav, setNav] = useState<HTMLElement \| null>(null)\n const onNav = useCallback((el: HTMLElement) => {\n setNav(el)\n }, [])\n\n useEffect(() => {\n if (nav == null) {\n return\n }\n\n const root = nav.getRootNode()\n const d = self.document\n\n function handler(e: KeyboardEvent) {\n if (e.key === 'ArrowLeft') {\n e.preventDefault()\n e.stopPropagation()\n handlePrevious && handlePrevious()\n } else if (e.key === 'ArrowRight') {\n e.preventDefault()\n e.stopPropagation()\n handleNext && handleNext()\n }\n }\n\n root.addEventListener('keydown', handler as EventListener)\n if (root !== d) {\n d.addEventListener('keydown', handler)\n }\n return function () {\n root.removeEventListener('keydown', handler as EventListener)\n if (root !== d) {\n d.removeEventListener('keydown', handler)\n }\n }\n }, [nav, handleNext, handlePrevious])\n\n // Unlock focus for browsers like Firefox, that break all user focus if the\n // currently focused item becomes disabled.\n useEffect(() => {\n if (nav == null) {\n return\n }\n\n const root = nav.getRootNode()\n // Always true, but we do this for TypeScript:\n if (root instanceof ShadowRoot) {\n const a = root.activeElement\n\n if (activeIdx === 0) {\n if (buttonLeft.current && a === buttonLeft.current) {\n buttonLeft.current.blur()\n }\n } else if (activeIdx === ~~readyErrors~~.length - 1) {\n if (buttonRight.current && a === buttonRight.current) {\n buttonRight.current.blur()\n }\n }\n }\n }, [nav, activeIdx, ~~readyErrors~~.length])\n\n return (\n <nav\n className=\"error-overlay-pagination dialog-exclude-closing-from-outside-click\"\n ref={onNav}\n >\n <button\n ref={buttonLeft}\n type=\"button\"\n disabled={activeIdx === 0}\n aria-disabled={activeIdx === 0}\n onClick={handlePrevious}\n data-nextjs-dialog-error-previous\n className=\"error-overlay-pagination-button\"\n >\n <LeftArrow\n title=\"previous\"\n className=\"error-overlay-pagination-button-icon\"\n />\n </button>\n <div className=\"error-overlay-pagination-count\">\n <span data-nextjs-dialog-error-index={activeIdx}>{activeIdx + 1}/</span>\n <span data-nextjs-dialog-header-total-count>\n {/* Display 1 out of 1 if there are no errors (e.g. for build errors). */}\n {~~readyErrors~~.length \|\| 1}\n </span>\n </div>\n <button\n ref={buttonRight}\n type=\"button\"\n // If no errors or the last error is active, disable the button.\n disabled={activeIdx >= ~~readyErrors~~.length - 1}\n aria-disabled={activeIdx >= ~~readyErrors~~.length - 1}\n onClick={handleNext}\n data-nextjs-dialog-error-next\n className=\"error-overlay-pagination-button\"\n >\n <RightArrow\n title=\"next\"\n className=\"error-overlay-pagination-button-icon\"\n />\n </button>\n </nav>\n )\n}\n\nexport const styles = css`\n .error-overlay-pagination {\n -webkit-font-smoothing: antialiased;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n width: fit-content;\n }\n\n .error-overlay-pagination-count {\n color: var(--color-gray-900);\n text-align: center;\n font-size: var(--size-font-small);\n font-weight: 500;\n line-height: 16px;\n font-variant-numeric: tabular-nums;\n }\n\n .error-overlay-pagination-button {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: 24px;\n height: 24px;\n background: var(--color-gray-300);\n flex-shrink: 0;\n\n border: none;\n border-radius: var(--rounded-full);\n\n &:focus-visible {\n outline: var(--focus-ring);\n }\n\n &:not(:disabled):active {\n background: var(--color-gray-500);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n .error-overlay-pagination-button-icon {\n color: var(--color-gray-1000);\n }\n`\n"],"names":["startTransition","useCallback","useEffect","useRef","useState","noop","css","LeftArrow","RightArrow","ErrorOverlayPagination","~~readyErrors~~","activeIdx","onActiveIndexChange","handlePrevious","Math","max","handleNext","length","min","buttonLeft","buttonRight","nav","setNav","onNav","el","root","getRootNode","d","self","document","handler","e","key","preventDefault","stopPropagation","addEventListener","removeEventListener","ShadowRoot","a","activeElement","current","blur","className","ref","button","type","disabled","aria-disabled","onClick","data-nextjs-dialog-error-previous","title","div","span","data-nextjs-dialog-error-index","data-nextjs-dialog-header-total-count","data-nextjs-dialog-error-next","styles"],"mappings":";;;;;;;;;;;AAAA,SACEA,eAAe,EACfC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAO;AACd,SAASC,QAAQC,GAAG,QAAQ,iCAAgC;AAC5D,SAASC,SAAS,QAAQ,4BAA2B;AACrD,SAASC,UAAU,QAAQ,6BAA4B;AASvD,OAAO,SAASC,uBAAuB,KAIhB;IAJgB,IAAA,EACrCC,~~WAAW~~,~~EACXC~~,SAAS,EACTC,mBAAmB,EACE,GAJgB;IAKrC,MAAMC,iBAAiBZ,YACrB,IACED,gBAAgB;YACd,IAAIW,YAAY,GAAG;gBACjBC,oBAAoBE,KAAKC,GAAG,CAAC,GAAGJ,YAAY;YAC9C;QACF,IACF;QAACA;QAAWC;KAAoB;IAGlC,MAAMI,aAAaf,YACjB,IACED,gBAAgB;YACd,IAAIW,YAAYD,~~YAAYO~~,MAAM,GAAG,GAAG;~~gBACtCL~~,oBACEE,KAAKC,GAAG,CAAC,GAAGD,KAAKI,GAAG,CAACR,~~YAAYO~~,MAAM,GAAG,GAAGN,YAAY;~~YAE7D~~;QACF,IACF;QAACA;QAAWD,~~YAAYO~~,MAAM;QAAEL;KAAoB;~~IAGtD~~,MAAMO,aAAahB,OAAiC;IACpD,MAAMiB,cAAcjB,OAAiC;IAErD,MAAM,CAACkB,KAAKC,OAAO,GAAGlB,SAA6B;IACnD,MAAMmB,QAAQtB,YAAY,CAACuB;QACzBF,OAAOE;IACT,GAAG,EAAE;IAELtB,UAAU;QACR,IAAImB,OAAO,MAAM;YACf;QACF;QAEA,MAAMI,OAAOJ,IAAIK,WAAW;QAC5B,MAAMC,IAAIC,KAAKC,QAAQ;QAEvB,SAASC,QAAQC,CAAgB;YAC/B,IAAIA,EAAEC,GAAG,KAAK,aAAa;gBACzBD,EAAEE,cAAc;gBAChBF,EAAEG,eAAe;gBACjBrB,kBAAkBA;YACpB,OAAO,IAAIkB,EAAEC,GAAG,KAAK,cAAc;gBACjCD,EAAEE,cAAc;gBAChBF,EAAEG,eAAe;gBACjBlB,cAAcA;YAChB;QACF;QAEAS,KAAKU,gBAAgB,CAAC,WAAWL;QACjC,IAAIL,SAASE,GAAG;YACdA,EAAEQ,gBAAgB,CAAC,WAAWL;QAChC;QACA,OAAO;YACLL,KAAKW,mBAAmB,CAAC,WAAWN;YACpC,IAAIL,SAASE,GAAG;gBACdA,EAAES,mBAAmB,CAAC,WAAWN;YACnC;QACF;IACF,GAAG;QAACT;QAAKL;QAAYH;KAAe;IAEpC,2EAA2E;IAC3E,2CAA2C;IAC3CX,UAAU;QACR,IAAImB,OAAO,MAAM;YACf;QACF;QAEA,MAAMI,OAAOJ,IAAIK,WAAW;QAC5B,8CAA8C;QAC9C,IAAID,gBAAgBY,YAAY;YAC9B,MAAMC,IAAIb,KAAKc,aAAa;YAE5B,IAAI5B,cAAc,GAAG;gBACnB,IAAIQ,WAAWqB,OAAO,IAAIF,MAAMnB,WAAWqB,OAAO,EAAE;oBAClDrB,WAAWqB,OAAO,CAACC,IAAI;gBACzB;YACF,OAAO,IAAI9B,cAAcD,~~YAAYO~~,MAAM,GAAG,GAAG;~~gBAC/C~~,IAAIG,YAAYoB,OAAO,IAAIF,MAAMlB,YAAYoB,OAAO,EAAE;oBACpDpB,YAAYoB,OAAO,CAACC,IAAI;gBAC1B;YACF;QACF;IACF,GAAG;QAACpB;QAAKV;QAAWD,~~YAAYO~~,MAAM;KAAC;~~IAEvC~~,qBACE,MAACI;QACCqB,WAAU;QACVC,KAAKpB;;0BAEL,KAACqB;gBACCD,KAAKxB;gBACL0B,MAAK;gBACLC,UAAUnC,cAAc;gBACxBoC,iBAAepC,cAAc;gBAC7BqC,SAASnC;gBACToC,mCAAiC;gBACjCP,WAAU;0BAEV,cAAA,KAACnC;oBACC2C,OAAM;oBACNR,WAAU;;;0BAGd,MAACS;gBAAIT,WAAU;;kCACb,MAACU;wBAAKC,kCAAgC1C;;4BAAYA,YAAY;4BAAE;;;kCAChE,KAACyC;wBAAKE,uCAAqC;kCAExC5C,~~YAAYO~~,MAAM,IAAI;;;;~~0BAG3B~~,KAAC2B;gBACCD,KAAKvB;gBACLyB,MAAK;gBACL,gEAAgE;gBAChEC,UAAUnC,aAAaD,~~YAAYO~~,MAAM,GAAG;~~gBAC5C8B~~,iBAAepC,aAAaD,~~YAAYO~~,MAAM,GAAG;~~gBACjD~~+B,SAAShC;gBACTuC,+BAA6B;gBAC7Bb,WAAU;0BAEV,cAAA,KAAClC;oBACC0C,OAAM;oBACNR,WAAU;;;;;AAKpB;AAEA,OAAO,MAAMc,SAASlD,uBAiDrB"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.tsx"],"sourcesContent":["import {\n startTransition,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport { noop as css } from '../../../helpers/noop-template'\nimport { LeftArrow } from '../../../icons/left-arrow'\nimport { RightArrow } from '../../../icons/right-arrow'\nimport type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type'\n\ntype ErrorPaginationProps = {\n runtimeErrors: ReadyRuntimeError[]\n activeIdx: number\n onActiveIndexChange: (index: number) => void\n}\n\nexport function ErrorOverlayPagination({\n runtimeErrors,\n activeIdx,\n onActiveIndexChange,\n}: ErrorPaginationProps) {\n const handlePrevious = useCallback(\n () =>\n startTransition(() => {\n if (activeIdx > 0) {\n onActiveIndexChange(Math.max(0, activeIdx - 1))\n }\n }),\n [activeIdx, onActiveIndexChange]\n )\n\n const handleNext = useCallback(\n () =>\n startTransition(() => {\n if (activeIdx < runtimeErrors.length - 1) {\n onActiveIndexChange(\n Math.max(0, Math.min(runtimeErrors.length - 1, activeIdx + 1))\n )\n }\n }),\n [activeIdx, runtimeErrors.length, onActiveIndexChange]\n )\n\n const buttonLeft = useRef<HTMLButtonElement \| null>(null)\n const buttonRight = useRef<HTMLButtonElement \| null>(null)\n\n const [nav, setNav] = useState<HTMLElement \| null>(null)\n const onNav = useCallback((el: HTMLElement) => {\n setNav(el)\n }, [])\n\n useEffect(() => {\n if (nav == null) {\n return\n }\n\n const root = nav.getRootNode()\n const d = self.document\n\n function handler(e: KeyboardEvent) {\n if (e.key === 'ArrowLeft') {\n e.preventDefault()\n e.stopPropagation()\n handlePrevious && handlePrevious()\n } else if (e.key === 'ArrowRight') {\n e.preventDefault()\n e.stopPropagation()\n handleNext && handleNext()\n }\n }\n\n root.addEventListener('keydown', handler as EventListener)\n if (root !== d) {\n d.addEventListener('keydown', handler)\n }\n return function () {\n root.removeEventListener('keydown', handler as EventListener)\n if (root !== d) {\n d.removeEventListener('keydown', handler)\n }\n }\n }, [nav, handleNext, handlePrevious])\n\n // Unlock focus for browsers like Firefox, that break all user focus if the\n // currently focused item becomes disabled.\n useEffect(() => {\n if (nav == null) {\n return\n }\n\n const root = nav.getRootNode()\n // Always true, but we do this for TypeScript:\n if (root instanceof ShadowRoot) {\n const a = root.activeElement\n\n if (activeIdx === 0) {\n if (buttonLeft.current && a === buttonLeft.current) {\n buttonLeft.current.blur()\n }\n } else if (activeIdx === runtimeErrors.length - 1) {\n if (buttonRight.current && a === buttonRight.current) {\n buttonRight.current.blur()\n }\n }\n }\n }, [nav, activeIdx, runtimeErrors.length])\n\n return (\n <nav\n className=\"error-overlay-pagination dialog-exclude-closing-from-outside-click\"\n ref={onNav}\n >\n <button\n ref={buttonLeft}\n type=\"button\"\n disabled={activeIdx === 0}\n aria-disabled={activeIdx === 0}\n onClick={handlePrevious}\n data-nextjs-dialog-error-previous\n className=\"error-overlay-pagination-button\"\n >\n <LeftArrow\n title=\"previous\"\n className=\"error-overlay-pagination-button-icon\"\n />\n </button>\n <div className=\"error-overlay-pagination-count\">\n <span data-nextjs-dialog-error-index={activeIdx}>{activeIdx + 1}/</span>\n <span data-nextjs-dialog-header-total-count>\n {/* Display 1 out of 1 if there are no errors (e.g. for build errors). */}\n {runtimeErrors.length \|\| 1}\n </span>\n </div>\n <button\n ref={buttonRight}\n type=\"button\"\n // If no errors or the last error is active, disable the button.\n disabled={activeIdx >= runtimeErrors.length - 1}\n aria-disabled={activeIdx >= runtimeErrors.length - 1}\n onClick={handleNext}\n data-nextjs-dialog-error-next\n className=\"error-overlay-pagination-button\"\n >\n <RightArrow\n title=\"next\"\n className=\"error-overlay-pagination-button-icon\"\n />\n </button>\n </nav>\n )\n}\n\nexport const styles = css`\n .error-overlay-pagination {\n -webkit-font-smoothing: antialiased;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n width: fit-content;\n }\n\n .error-overlay-pagination-count {\n color: var(--color-gray-900);\n text-align: center;\n font-size: var(--size-font-small);\n font-weight: 500;\n line-height: 16px;\n font-variant-numeric: tabular-nums;\n }\n\n .error-overlay-pagination-button {\n display: flex;\n justify-content: center;\n align-items: center;\n\n width: 24px;\n height: 24px;\n background: var(--color-gray-300);\n flex-shrink: 0;\n\n border: none;\n border-radius: var(--rounded-full);\n\n &:focus-visible {\n outline: var(--focus-ring);\n }\n\n &:not(:disabled):active {\n background: var(--color-gray-500);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n .error-overlay-pagination-button-icon {\n color: var(--color-gray-1000);\n }\n`\n"],"names":["startTransition","useCallback","useEffect","useRef","useState","noop","css","LeftArrow","RightArrow","ErrorOverlayPagination","runtimeErrors","activeIdx","onActiveIndexChange","handlePrevious","Math","max","handleNext","length","min","buttonLeft","buttonRight","nav","setNav","onNav","el","root","getRootNode","d","self","document","handler","e","key","preventDefault","stopPropagation","addEventListener","removeEventListener","ShadowRoot","a","activeElement","current","blur","className","ref","button","type","disabled","aria-disabled","onClick","data-nextjs-dialog-error-previous","title","div","span","data-nextjs-dialog-error-index","data-nextjs-dialog-header-total-count","data-nextjs-dialog-error-next","styles"],"mappings":"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"}

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

@@ -38,7 +38,7 @@ export const SingleError = {
         const [activeIdx, setActiveIdx] = useState(0);
         return /*#__PURE__*/ _jsx(ErrorOverlayPagination, {
             activeIdx: activeIdx,
-            readyErrors: [
+            runtimeErrors: [
                 mockErrors[0]
             ],
             onActiveIndexChange: setActiveIdx
@@ -50,7 +50,7 @@ export const MultipleErrors = {
         const [activeIdx, setActiveIdx] = useState(1);
         return /*#__PURE__*/ _jsx(ErrorOverlayPagination, {
             activeIdx: activeIdx,
-            readyErrors: mockErrors,
+            runtimeErrors: mockErrors,
             onActiveIndexChange: setActiveIdx
         });
     }
@@ -60,7 +60,7 @@ export const LastError = {
         const [activeIdx, setActiveIdx] = useState(2);
         return /*#__PURE__*/ _jsx(ErrorOverlayPagination, {
             activeIdx: activeIdx,
-            readyErrors: mockErrors,
+            runtimeErrors: mockErrors,
             onActiveIndexChange: setActiveIdx
         });
     }
@@ -70,7 +70,7 @@ export const VeryManyErrors = {
         const [activeIdx, setActiveIdx] = useState(1233);
         return /*#__PURE__*/ _jsx(ErrorOverlayPagination, {
             activeIdx: activeIdx,
-            readyErrors: Array(780).fill(mockErrors).flat(),
+            runtimeErrors: Array(780).fill(mockErrors).flat(),
             onActiveIndexChange: setActiveIdx
         });
     }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { ErrorOverlayPagination } from './error-overlay-pagination'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\nimport { useState } from 'react'\n\nconst meta: Meta<typeof ErrorOverlayPagination> = {\n component: ErrorOverlayPagination,\n parameters: {\n layout: 'centered',\n },\n decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof ErrorOverlayPagination>\n\n// Mock errors for stories\nconst mockErrors = [\n {\n id: 1,\n runtime: true as const,\n error: new Error('First error'),\n frames: () => Promise.resolve([]),\n },\n {\n id: 2,\n runtime: true as const,\n error: new Error('Second error'),\n frames: () => Promise.resolve([]),\n },\n {\n id: 3,\n runtime: true as const,\n error: new Error('Third error'),\n frames: () => Promise.resolve([]),\n },\n]\n\nexport const SingleError: Story = {\n render: function ErrorOverlayPaginationStory() {\n const [activeIdx, setActiveIdx] = useState(0)\n return (\n <ErrorOverlayPagination\n activeIdx={activeIdx}\n ~~readyErrors~~={[mockErrors[0]]}\n onActiveIndexChange={setActiveIdx}\n />\n )\n },\n}\n\nexport const MultipleErrors: Story = {\n render: function ErrorOverlayPaginationStory() {\n const [activeIdx, setActiveIdx] = useState(1)\n return (\n <ErrorOverlayPagination\n activeIdx={activeIdx}\n ~~readyErrors~~={mockErrors}\n onActiveIndexChange={setActiveIdx}\n />\n )\n },\n}\n\nexport const LastError: Story = {\n render: function ErrorOverlayPaginationStory() {\n const [activeIdx, setActiveIdx] = useState(2)\n return (\n <ErrorOverlayPagination\n activeIdx={activeIdx}\n ~~readyErrors~~={mockErrors}\n onActiveIndexChange={setActiveIdx}\n />\n )\n },\n}\n\nexport const VeryManyErrors: Story = {\n render: function ErrorOverlayPaginationStory() {\n const [activeIdx, setActiveIdx] = useState(1233)\n return (\n <ErrorOverlayPagination\n activeIdx={activeIdx}\n ~~readyErrors~~={Array(780).fill(mockErrors).flat()}\n onActiveIndexChange={setActiveIdx}\n />\n )\n },\n}\n"],"names":["ErrorOverlayPagination","withShadowPortal","useState","meta","component","parameters","layout","decorators","mockErrors","id","runtime","error","Error","frames","Promise","resolve","SingleError","render","ErrorOverlayPaginationStory","activeIdx","setActiveIdx","~~readyErrors~~","onActiveIndexChange","MultipleErrors","LastError","VeryManyErrors","Array","fill","flat"],"mappings":";AACA,SAASA,sBAAsB,QAAQ,6BAA4B;AACnE,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,QAAQ,QAAQ,QAAO;AAEhC,MAAMC,OAA4C;IAChDC,WAAWJ;IACXK,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACN;KAAiB;AAChC;AAEA,eAAeE,KAAI;AAGnB,0BAA0B;AAC1B,MAAMK,aAAa;IACjB;QACEC,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;IAClC;IACA;QACEN,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;IAClC;IACA;QACEN,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;IAClC;CACD;AAED,OAAO,MAAMC,cAAqB;IAChCC,QAAQ,SAASC;QACf,MAAM,CAACC,WAAWC,aAAa,GAAGlB,SAAS;QAC3C,qBACE,KAACF;YACCmB,WAAWA;YACXE,~~aAAa~~;gBAACb,UAAU,CAAC,EAAE;aAAC;~~YAC5Bc~~,qBAAqBF;;IAG3B;AACF,EAAC;AAED,OAAO,MAAMG,iBAAwB;IACnCN,QAAQ,SAASC;QACf,MAAM,CAACC,WAAWC,aAAa,GAAGlB,SAAS;QAC3C,qBACE,KAACF;YACCmB,WAAWA;YACXE,~~aAAab~~;~~YACbc~~,qBAAqBF;;IAG3B;AACF,EAAC;AAED,OAAO,MAAMI,YAAmB;IAC9BP,QAAQ,SAASC;QACf,MAAM,CAACC,WAAWC,aAAa,GAAGlB,SAAS;QAC3C,qBACE,KAACF;YACCmB,WAAWA;YACXE,~~aAAab~~;~~YACbc~~,qBAAqBF;;IAG3B;AACF,EAAC;AAED,OAAO,MAAMK,iBAAwB;IACnCR,QAAQ,SAASC;QACf,MAAM,CAACC,WAAWC,aAAa,GAAGlB,SAAS;QAC3C,qBACE,KAACF;YACCmB,WAAWA;YACXE,~~aAAaK~~,MAAM,KAAKC,IAAI,CAACnB,YAAYoB,IAAI;~~YAC7CN~~,qBAAqBF;;IAG3B;AACF,EAAC"}
1	+ {"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-pagination/error-overlay-pagination.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { ErrorOverlayPagination } from './error-overlay-pagination'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\nimport { useState } from 'react'\n\nconst meta: Meta<typeof ErrorOverlayPagination> = {\n component: ErrorOverlayPagination,\n parameters: {\n layout: 'centered',\n },\n decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof ErrorOverlayPagination>\n\n// Mock errors for stories\nconst mockErrors = [\n {\n id: 1,\n runtime: true as const,\n error: new Error('First error'),\n frames: () => Promise.resolve([]),\n },\n {\n id: 2,\n runtime: true as const,\n error: new Error('Second error'),\n frames: () => Promise.resolve([]),\n },\n {\n id: 3,\n runtime: true as const,\n error: new Error('Third error'),\n frames: () => Promise.resolve([]),\n },\n]\n\nexport const SingleError: Story = {\n render: function ErrorOverlayPaginationStory() {\n const [activeIdx, setActiveIdx] = useState(0)\n return (\n <ErrorOverlayPagination\n activeIdx={activeIdx}\n runtimeErrors={[mockErrors[0]]}\n onActiveIndexChange={setActiveIdx}\n />\n )\n },\n}\n\nexport const MultipleErrors: Story = {\n render: function ErrorOverlayPaginationStory() {\n const [activeIdx, setActiveIdx] = useState(1)\n return (\n <ErrorOverlayPagination\n activeIdx={activeIdx}\n runtimeErrors={mockErrors}\n onActiveIndexChange={setActiveIdx}\n />\n )\n },\n}\n\nexport const LastError: Story = {\n render: function ErrorOverlayPaginationStory() {\n const [activeIdx, setActiveIdx] = useState(2)\n return (\n <ErrorOverlayPagination\n activeIdx={activeIdx}\n runtimeErrors={mockErrors}\n onActiveIndexChange={setActiveIdx}\n />\n )\n },\n}\n\nexport const VeryManyErrors: Story = {\n render: function ErrorOverlayPaginationStory() {\n const [activeIdx, setActiveIdx] = useState(1233)\n return (\n <ErrorOverlayPagination\n activeIdx={activeIdx}\n runtimeErrors={Array(780).fill(mockErrors).flat()}\n onActiveIndexChange={setActiveIdx}\n />\n )\n },\n}\n"],"names":["ErrorOverlayPagination","withShadowPortal","useState","meta","component","parameters","layout","decorators","mockErrors","id","runtime","error","Error","frames","Promise","resolve","SingleError","render","ErrorOverlayPaginationStory","activeIdx","setActiveIdx","runtimeErrors","onActiveIndexChange","MultipleErrors","LastError","VeryManyErrors","Array","fill","flat"],"mappings":";AACA,SAASA,sBAAsB,QAAQ,6BAA4B;AACnE,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,SAASC,QAAQ,QAAQ,QAAO;AAEhC,MAAMC,OAA4C;IAChDC,WAAWJ;IACXK,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACN;KAAiB;AAChC;AAEA,eAAeE,KAAI;AAGnB,0BAA0B;AAC1B,MAAMK,aAAa;IACjB;QACEC,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;IAClC;IACA;QACEN,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;IAClC;IACA;QACEN,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ,IAAMC,QAAQC,OAAO,CAAC,EAAE;IAClC;CACD;AAED,OAAO,MAAMC,cAAqB;IAChCC,QAAQ,SAASC;QACf,MAAM,CAACC,WAAWC,aAAa,GAAGlB,SAAS;QAC3C,qBACE,KAACF;YACCmB,WAAWA;YACXE,eAAe;gBAACb,UAAU,CAAC,EAAE;aAAC;YAC9Bc,qBAAqBF;;IAG3B;AACF,EAAC;AAED,OAAO,MAAMG,iBAAwB;IACnCN,QAAQ,SAASC;QACf,MAAM,CAACC,WAAWC,aAAa,GAAGlB,SAAS;QAC3C,qBACE,KAACF;YACCmB,WAAWA;YACXE,eAAeb;YACfc,qBAAqBF;;IAG3B;AACF,EAAC;AAED,OAAO,MAAMI,YAAmB;IAC9BP,QAAQ,SAASC;QACf,MAAM,CAACC,WAAWC,aAAa,GAAGlB,SAAS;QAC3C,qBACE,KAACF;YACCmB,WAAWA;YACXE,eAAeb;YACfc,qBAAqBF;;IAG3B;AACF,EAAC;AAED,OAAO,MAAMK,iBAAwB;IACnCR,QAAQ,SAASC;QACf,MAAM,CAACC,WAAWC,aAAa,GAAGlB,SAAS;QAC3C,qBACE,KAACF;YACCmB,WAAWA;YACXE,eAAeK,MAAM,KAAKC,IAAI,CAACnB,YAAYoB,IAAI;YAC/CN,qBAAqBF;;IAG3B;AACF,EAAC"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/terminal/terminal.js CHANGED Viewed

@@ -96,18 +96,23 @@ export const Terminal = function Terminal(param) {
                 children: /*#__PURE__*/ _jsxs("div", {
                     className: "code-frame-link",
                     children: [
-                        /*#__PURE__*/ _jsxs("span", {
+                        /*#__PURE__*/ _jsx("span", {
                             className: "code-frame-icon",
-                            children: [
-                                /*#__PURE__*/ _jsx(FileIcon, {
-                                    lang: fileExtension
-                                }),
-                                getFrameSource(stackFrame)
-                            ]
+                            children: /*#__PURE__*/ _jsx(FileIcon, {
+                                lang: fileExtension
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            "data-text": true,
+                            children: getFrameSource(stackFrame)
                         }),
-                        /*#__PURE__*/ _jsx(ExternalIcon, {
-                            width: 16,
-                            height: 16
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "code-frame-icon",
+                            "data-icon": "right",
+                            children: /*#__PURE__*/ _jsx(ExternalIcon, {
+                                width: 16,
+                                height: 16
+                            })
                         })
                     ]
                 })