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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx"],"sourcesContent":["import { useState, useMemo, useEffect } from 'react'\nimport type { DebugInfo } from '../../../types'\nimport { Overlay } from '../components/overlay'\nimport type { ReadyRuntimeError } from '../helpers/get-error-by-type'\nimport { noop as css } from '../helpers/noop-template'\nimport { RuntimeError } from './runtime-error'\nimport type { VersionInfo } from '../../../../../../server/dev/parse-version-info'\nimport { getErrorSource } from '../../../../../../shared/lib/error-source'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { PseudoHtmlDiff } from './runtime-error/component-stack-pseudo-html'\nimport {\n  type HydrationErrorState,\n  getHydrationWarningType,\n} from '../../../../errors/hydration-error-info'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../../../../errors/console-error'\nimport { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils'\nimport { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport type { SupportedErrorEvent } from './runtime-error/use-error-hook'\n\nexport type ErrorsProps = {\n  errors: SupportedErrorEvent[]\n  readyErrors: ReadyRuntimeError[]\n  isTurbopack: boolean\n  versionInfo: VersionInfo\n  hasStaticIndicator: boolean\n  debugInfo: DebugInfo\n  onClose: () => void\n}\n\ntype ReadyErrorEvent = ReadyRuntimeError\n\nfunction isNextjsLink(text: string): boolean {\n  return text.startsWith('https://nextjs.org')\n}\n\nfunction ErrorDescription({\n  error,\n  hydrationWarning,\n}: {\n  error: Error\n  hydrationWarning: string | null\n}) {\n  const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)\n  const unhandledErrorType = isUnhandledOrReplayError\n    ? getUnhandledErrorType(error)\n    : null\n  const isConsoleErrorStringMessage = unhandledErrorType === 'string'\n  // If the error is:\n  // - hydration warning\n  // - captured console error or unhandled rejection\n  // skip displaying the error name\n  const title =\n    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||\n    hydrationWarning\n      ? ''\n      : error.name + ': '\n\n  // If it's replayed error, display the environment name\n  const environmentName =\n    'environmentName' in error ? error['environmentName'] : ''\n  const envPrefix = environmentName ? `[ ${environmentName} ] ` : ''\n  return (\n    <>\n      {envPrefix}\n      {title}\n      <HotlinkedText\n        text={hydrationWarning || error.message}\n        matcher={isNextjsLink}\n      />\n    </>\n  )\n}\n\nexport function Errors({\n  errors,\n  readyErrors,\n  debugInfo,\n  versionInfo,\n  isTurbopack,\n  onClose,\n}: ErrorsProps) {\n  useEffect(() => {\n    // Close the error overlay when pressing escape\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === 'Escape') {\n        onClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [onClose])\n\n  const isLoading = useMemo<boolean>(() => {\n    return readyErrors.length < 1 && Boolean(errors.length)\n  }, [errors.length, readyErrors.length])\n\n  const [activeIdx, setActiveIndex] = useState<number>(0)\n\n  const activeError = useMemo<ReadyErrorEvent | null>(\n    () => readyErrors[activeIdx] ?? null,\n    [activeIdx, readyErrors]\n  )\n\n  if (isLoading) {\n    // TODO: better loading state\n    return <Overlay />\n  }\n\n  if (!activeError) {\n    return null\n  }\n\n  const error = activeError.error\n  const isServerError = ['server', 'edge-server'].includes(\n    getErrorSource(error) || ''\n  )\n  const isUnhandledError = isUnhandledConsoleOrRejection(error)\n  const errorDetails: HydrationErrorState = (error as any).details || {}\n  const notes = errorDetails.notes || ''\n  const [warningTemplate, serverContent, clientContent] =\n    errorDetails.warning || [null, '', '']\n\n  const hydrationErrorType = getHydrationWarningType(warningTemplate)\n  const hydrationWarning = warningTemplate\n    ? warningTemplate\n        .replace('%s', serverContent)\n        .replace('%s', clientContent)\n        .replace('%s', '') // remove the %s for stack\n        .replace(/%s$/, '') // If there's still a %s at the end, remove it\n        .replace(/^Warning: /, '')\n        .replace(/^Error: /, '')\n    : null\n\n  const errorCode = extractNextErrorCode(error)\n\n  const footerMessage = isServerError\n    ? 'This error happened while generating the page. Any console logs will be displayed in the terminal window.'\n    : undefined\n\n  return (\n    <ErrorOverlayLayout\n      errorCode={errorCode}\n      errorType={\n        isServerError\n          ? 'Runtime Error'\n          : isUnhandledError\n            ? 'Console Error'\n            : 'Unhandled Runtime Error'\n      }\n      errorMessage={\n        <ErrorDescription error={error} hydrationWarning={hydrationWarning} />\n      }\n      onClose={isServerError ? undefined : onClose}\n      debugInfo={debugInfo}\n      error={error}\n      readyErrors={readyErrors}\n      activeIdx={activeIdx}\n      setActiveIndex={setActiveIndex}\n      footerMessage={footerMessage}\n      versionInfo={versionInfo}\n      isTurbopack={isTurbopack}\n    >\n      <div className=\"error-overlay-notes-container\">\n        {notes ? (\n          <>\n            <p\n              id=\"nextjs__container_errors__notes\"\n              className=\"nextjs__container_errors__notes\"\n            >\n              {notes}\n            </p>\n          </>\n        ) : null}\n        {hydrationWarning ? (\n          <p\n            id=\"nextjs__container_errors__link\"\n            className=\"nextjs__container_errors__link\"\n          >\n            <HotlinkedText text=\"See more info here: https://nextjs.org/docs/messages/react-hydration-error\" />\n          </p>\n        ) : null}\n      </div>\n\n      {hydrationWarning &&\n      (activeError.componentStackFrames?.length ||\n        !!errorDetails.reactOutputComponentDiff) ? (\n        <PseudoHtmlDiff\n          className=\"nextjs__container_errors__component-stack\"\n          hydrationMismatchType={hydrationErrorType}\n          componentStackFrames={activeError.componentStackFrames || []}\n          firstContent={serverContent}\n          secondContent={clientContent}\n          reactOutputComponentDiff={errorDetails.reactOutputComponentDiff}\n        />\n      ) : null}\n      <RuntimeError key={activeError.id.toString()} error={activeError} />\n    </ErrorOverlayLayout>\n  )\n}\n\nexport const styles = css`\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  p.nextjs__container_errors__link {\n    color: var(--color-text-color-red-1);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  p.nextjs__container_errors__notes {\n    color: var(--color-stack-notes);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--size-3);\n  }\n  .error-overlay-notes-container {\n    padding: 0 var(--size-4);\n  }\n`\n"],"names":["useState","useMemo","useEffect","Overlay","noop","css","RuntimeError","getErrorSource","HotlinkedText","PseudoHtmlDiff","getHydrationWarningType","getUnhandledErrorType","isUnhandledConsoleOrRejection","extractNextErrorCode","ErrorOverlayLayout","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","unhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","message","matcher","Errors","errors","readyErrors","debugInfo","versionInfo","isTurbopack","onClose","activeError","handleKeyDown","event","key","document","addEventListener","removeEventListener","isLoading","length","Boolean","activeIdx","setActiveIndex","isServerError","includes","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","replace","errorCode","footerMessage","undefined","errorType","errorMessage","div","className","p","id","componentStackFrames","reactOutputComponentDiff","hydrationMismatchType","firstContent","secondContent","toString","styles"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/errors.tsx"],"sourcesContent":["import { useState, useMemo, useEffect } from 'react'\nimport type { DebugInfo } from '../../../types'\nimport { Overlay } from '../components/overlay'\nimport type { ReadyRuntimeError } from '../helpers/get-error-by-type'\nimport { noop as css } from '../helpers/noop-template'\nimport { RuntimeError } from './runtime-error'\nimport type { VersionInfo } from '../../../../../../server/dev/parse-version-info'\nimport { getErrorSource } from '../../../../../../shared/lib/error-source'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { PseudoHtmlDiff } from './runtime-error/component-stack-pseudo-html'\nimport {\n  type HydrationErrorState,\n  getHydrationWarningType,\n} from '../../../../errors/hydration-error-info'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../../../../errors/console-error'\nimport { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils'\nimport { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\n\nexport type ErrorsProps = {\n  readyErrors: ReadyRuntimeError[]\n  isTurbopack: boolean\n  versionInfo: VersionInfo\n  debugInfo: DebugInfo\n  onClose: () => void\n}\n\ntype ReadyErrorEvent = ReadyRuntimeError\n\nfunction isNextjsLink(text: string): boolean {\n  return text.startsWith('https://nextjs.org')\n}\n\nfunction ErrorDescription({\n  error,\n  hydrationWarning,\n}: {\n  error: Error\n  hydrationWarning: string | null\n}) {\n  const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)\n  const unhandledErrorType = isUnhandledOrReplayError\n    ? getUnhandledErrorType(error)\n    : null\n  const isConsoleErrorStringMessage = unhandledErrorType === 'string'\n  // If the error is:\n  // - hydration warning\n  // - captured console error or unhandled rejection\n  // skip displaying the error name\n  const title =\n    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||\n    hydrationWarning\n      ? ''\n      : error.name + ': '\n\n  // If it's replayed error, display the environment name\n  const environmentName =\n    'environmentName' in error ? error['environmentName'] : ''\n  const envPrefix = environmentName ? `[ ${environmentName} ] ` : ''\n  return (\n    <>\n      {envPrefix}\n      {title}\n      <HotlinkedText\n        text={hydrationWarning || error.message}\n        matcher={isNextjsLink}\n      />\n    </>\n  )\n}\n\nexport function Errors({\n  readyErrors,\n  debugInfo,\n  versionInfo,\n  isTurbopack,\n  onClose,\n}: ErrorsProps) {\n  useEffect(() => {\n    // Close the error overlay when pressing escape\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === 'Escape') {\n        onClose()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [onClose])\n\n  const isLoading = useMemo<boolean>(() => {\n    return readyErrors.length < 1\n  }, [readyErrors.length])\n\n  const [activeIdx, setActiveIndex] = useState<number>(0)\n\n  const activeError = useMemo<ReadyErrorEvent | null>(\n    () => readyErrors[activeIdx] ?? null,\n    [activeIdx, readyErrors]\n  )\n\n  if (isLoading) {\n    // TODO: better loading state\n    return <Overlay />\n  }\n\n  if (!activeError) {\n    return null\n  }\n\n  const error = activeError.error\n  const isServerError = ['server', 'edge-server'].includes(\n    getErrorSource(error) || ''\n  )\n  const isUnhandledError = isUnhandledConsoleOrRejection(error)\n  const errorDetails: HydrationErrorState = (error as any).details || {}\n  const notes = errorDetails.notes || ''\n  const [warningTemplate, serverContent, clientContent] =\n    errorDetails.warning || [null, '', '']\n\n  const hydrationErrorType = getHydrationWarningType(warningTemplate)\n  const hydrationWarning = warningTemplate\n    ? warningTemplate\n        .replace('%s', serverContent)\n        .replace('%s', clientContent)\n        .replace('%s', '') // remove the %s for stack\n        .replace(/%s$/, '') // If there's still a %s at the end, remove it\n        .replace(/^Warning: /, '')\n        .replace(/^Error: /, '')\n    : null\n\n  const errorCode = extractNextErrorCode(error)\n\n  const footerMessage = isServerError\n    ? 'This error happened while generating the page. Any console logs will be displayed in the terminal window.'\n    : undefined\n\n  return (\n    <ErrorOverlayLayout\n      errorCode={errorCode}\n      errorType={\n        isServerError\n          ? 'Runtime Error'\n          : isUnhandledError\n            ? 'Console Error'\n            : 'Unhandled Runtime Error'\n      }\n      errorMessage={\n        <ErrorDescription error={error} hydrationWarning={hydrationWarning} />\n      }\n      onClose={isServerError ? undefined : onClose}\n      debugInfo={debugInfo}\n      error={error}\n      readyErrors={readyErrors}\n      activeIdx={activeIdx}\n      setActiveIndex={setActiveIndex}\n      footerMessage={footerMessage}\n      versionInfo={versionInfo}\n      isTurbopack={isTurbopack}\n    >\n      <div className=\"error-overlay-notes-container\">\n        {notes ? (\n          <>\n            <p\n              id=\"nextjs__container_errors__notes\"\n              className=\"nextjs__container_errors__notes\"\n            >\n              {notes}\n            </p>\n          </>\n        ) : null}\n        {hydrationWarning ? (\n          <p\n            id=\"nextjs__container_errors__link\"\n            className=\"nextjs__container_errors__link\"\n          >\n            <HotlinkedText text=\"See more info here: https://nextjs.org/docs/messages/react-hydration-error\" />\n          </p>\n        ) : null}\n      </div>\n\n      {hydrationWarning &&\n      (activeError.componentStackFrames?.length ||\n        !!errorDetails.reactOutputComponentDiff) ? (\n        <PseudoHtmlDiff\n          className=\"nextjs__container_errors__component-stack\"\n          hydrationMismatchType={hydrationErrorType}\n          componentStackFrames={activeError.componentStackFrames || []}\n          firstContent={serverContent}\n          secondContent={clientContent}\n          reactOutputComponentDiff={errorDetails.reactOutputComponentDiff}\n        />\n      ) : null}\n      <RuntimeError key={activeError.id.toString()} error={activeError} />\n    </ErrorOverlayLayout>\n  )\n}\n\nexport const styles = css`\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  p.nextjs__container_errors__link {\n    color: var(--color-text-color-red-1);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  p.nextjs__container_errors__notes {\n    color: var(--color-stack-notes);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: var(--size-3);\n  }\n  .error-overlay-notes-container {\n    padding: 0 var(--size-4);\n  }\n`\n"],"names":["useState","useMemo","useEffect","Overlay","noop","css","RuntimeError","getErrorSource","HotlinkedText","PseudoHtmlDiff","getHydrationWarningType","getUnhandledErrorType","isUnhandledConsoleOrRejection","extractNextErrorCode","ErrorOverlayLayout","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","unhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","message","matcher","Errors","readyErrors","debugInfo","versionInfo","isTurbopack","onClose","activeError","handleKeyDown","event","key","document","addEventListener","removeEventListener","isLoading","length","activeIdx","setActiveIndex","isServerError","includes","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","replace","errorCode","footerMessage","undefined","errorType","errorMessage","div","className","p","id","componentStackFrames","reactOutputComponentDiff","hydrationMismatchType","firstContent","secondContent","toString","styles"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { Errors } from './errors';
 import { withShadowPortal } from '../storybook/with-shadow-portal';
-import { ACTION_UNHANDLED_ERROR } from '../../../shared';
 const meta = {
     component: Errors,
     parameters: {
@@ -11,86 +10,101 @@ const meta = {
     ]
 };
 export default meta;
-const errors = [
+const originalCodeFrame = (message)=>{
+    return "\x1b[0m \x1b[90m 1 \x1b[39m \x1b[36mexport\x1b[39m \x1b[36mdefault\x1b[39m \x1b[36mfunction\x1b[39m \x1b[33mHome\x1b[39m() {\x1b[0m\n\x1b[0m\x1b[31m\x1b[1m>\x1b[22m\x1b[39m\x1b[90m 2 \x1b[39m   \x1b[36mthrow\x1b[39m \x1b[36mnew\x1b[39m \x1b[33mError\x1b[39m(\x1b[32m'" + message + "'\x1b[39m)\x1b[0m\n\x1b[0m \x1b[90m   \x1b[39m         \x1b[31m\x1b[1m^\x1b[22m\x1b[39m\x1b[0m\n\x1b[0m \x1b[90m 3 \x1b[39m   \x1b[36mreturn\x1b[39m \x1b[33m<\x1b[39m\x1b[33mdiv\x1b[39m\x1b[33m>\x1b[39m\x1b[33mHello\x1b[39m \x1b[33mWorld\x1b[39m\x1b[33m<\x1b[39m\x1b[33m/\x1b[39m\x1b[33mdiv\x1b[39m\x1b[33m>\x1b[39m\x1b[0m\n\x1b[0m \x1b[90m 4 \x1b[39m }\x1b[0m\n\x1b[0m \x1b[90m 5 \x1b[39m\x1b[0m";
+};
+const sourceStackFrame = {
+    file: 'app/page.tsx',
+    methodName: 'Home',
+    arguments: [],
+    lineNumber: 2,
+    column: 9
+};
+const originalStackFrame = {
+    file: 'app/page.tsx',
+    methodName: 'Home',
+    arguments: [],
+    lineNumber: 2,
+    column: 9,
+    ignored: false
+};
+const readyErrors = [
     {
         id: 1,
-        event: {
-            type: ACTION_UNHANDLED_ERROR,
-            reason: Object.assign(new Error('First error message'), {
-                __NEXT_ERROR_CODE: 'E001'
-            }),
-            componentStackFrames: [
-                {
-                    file: 'app/page.tsx',
-                    component: 'Home',
-                    lineNumber: 10,
-                    column: 5,
-                    canOpenInEditor: true
-                }
-            ],
-            frames: [
-                {
-                    file: 'app/page.tsx',
-                    methodName: 'Home',
-                    arguments: [],
-                    lineNumber: 10,
-                    column: 5
-                }
-            ]
-        }
+        runtime: true,
+        error: new Error('First error message'),
+        frames: [
+            {
+                error: true,
+                reason: 'First error message',
+                external: false,
+                ignored: false,
+                sourceStackFrame,
+                originalStackFrame,
+                originalCodeFrame: originalCodeFrame('First error message')
+            }
+        ]
     },
     {
         id: 2,
-        event: {
-            type: ACTION_UNHANDLED_ERROR,
-            reason: Object.assign(new Error('Second error message'), {
-                __NEXT_ERROR_CODE: 'E002'
-            }),
-            frames: []
-        }
+        runtime: true,
+        error: new Error('Second error message'),
+        frames: [
+            {
+                error: true,
+                reason: 'Second error message',
+                external: false,
+                ignored: false,
+                sourceStackFrame,
+                originalStackFrame,
+                originalCodeFrame: originalCodeFrame('Second error message')
+            }
+        ]
     },
     {
         id: 3,
-        event: {
-            type: ACTION_UNHANDLED_ERROR,
-            reason: Object.assign(new Error('Third error message'), {
-                __NEXT_ERROR_CODE: 'E003'
-            }),
-            frames: []
-        }
+        runtime: true,
+        error: new Error('Third error message'),
+        frames: [
+            {
+                error: true,
+                reason: 'Third error message',
+                external: false,
+                ignored: false,
+                sourceStackFrame,
+                originalStackFrame,
+                originalCodeFrame: originalCodeFrame('Third error message')
+            }
+        ]
     },
     {
         id: 4,
-        event: {
-            type: ACTION_UNHANDLED_ERROR,
-            reason: Object.assign(new Error('Fourth error message'), {
-                __NEXT_ERROR_CODE: 'E004'
-            }),
-            frames: []
-        }
-    }
-];
-const readyErrors = [
-    {
-        id: 1,
         runtime: true,
-        error: errors[0].event.reason,
-        frames: []
+        error: new Error('Fourth error message'),
+        frames: [
+            {
+                error: true,
+                reason: 'Fourth error message',
+                external: false,
+                ignored: false,
+                sourceStackFrame,
+                originalStackFrame,
+                originalCodeFrame: originalCodeFrame('Fourth error message')
+            }
+        ]
     }
 ];
 export const Default = {
     args: {
-        errors,
         readyErrors,
         versionInfo: {
             installed: '15.0.0',
             staleness: 'fresh'
         },
-        hasStaticIndicator: true,
-        isTurbopack: true,
         debugInfo: {
             devtoolsFrontendUrl: undefined
         },
+        isTurbopack: false,
         onClose: ()=>{}
     }
 };
@@ -107,40 +121,51 @@ export const Minimized = {
 };
 export const WithHydrationWarning = {
     args: {
-        errors: [
+        readyErrors: [
             {
                 id: 1,
-                event: {
-                    type: ACTION_UNHANDLED_ERROR,
-                    reason: Object.assign(new Error('Hydration error'), {
-                        details: {
-                            warning: [
-                                'Text content does not match server-rendered HTML: "%s" !== "%s"',
-                                'Server Content',
-                                'Client Content'
-                            ],
-                            reactOutputComponentDiff: "<MyComponent>\n  <ParentComponent>\n    <div>\n-     <p> hello world </p>\n+     <div> hello world </div>"
+                runtime: true,
+                error: Object.assign(new Error('Hydration error'), {
+                    details: {
+                        warning: [
+                            'Text content does not match server-rendered HTML: "%s" !== "%s"',
+                            'Server Content',
+                            'Client Content'
+                        ],
+                        reactOutputComponentDiff: "<MyComponent>\n  <ParentComponent>\n    <div>\n-     <p> hello world </p>\n+     <div> hello world </div>"
+                    },
+                    componentStackFrames: [
+                        {
+                            component: 'MyComponent',
+                            file: 'app/page.tsx',
+                            lineNumber: 10,
+                            columnNumber: 5
                         },
-                        componentStackFrames: [
-                            {
-                                component: 'MyComponent',
-                                file: 'app/page.tsx',
-                                lineNumber: 10,
-                                columnNumber: 5
-                            },
-                            {
-                                component: 'ParentComponent',
-                                file: 'app/layout.tsx',
-                                lineNumber: 20,
-                                columnNumber: 3
-                            }
-                        ]
-                    }),
-                    frames: []
-                }
+                        {
+                            component: 'ParentComponent',
+                            file: 'app/layout.tsx',
+                            lineNumber: 20,
+                            columnNumber: 3
+                        }
+                    ]
+                }),
+                frames: [
+                    {
+                        error: true,
+                        reason: 'First error message',
+                        external: false,
+                        ignored: false,
+                        sourceStackFrame: {
+                            file: 'app/page.tsx',
+                            methodName: 'Home',
+                            arguments: [],
+                            lineNumber: 10,
+                            column: 5
+                        }
+                    }
+                ]
             }
         ],
-        readyErrors: [],
         debugInfo: {
             devtoolsFrontendUrl: undefined
         },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/errors.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport type { SupportedErrorEvent } from '../../../internal/container/Errors'\nimport type { ReadyRuntimeError } from '../helpers/get-error-by-type'\n\nimport { Errors } from './errors'\nimport { withShadowPortal } from '../storybook/with-shadow-portal'\nimport { ACTION_UNHANDLED_ERROR } from '../../../shared'\n\nconst meta: Meta<typeof Errors> = {\n  component: Errors,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof Errors>\n\nconst errors: SupportedErrorEvent[] = [\n  {\n    id: 1,\n    event: {\n      type: ACTION_UNHANDLED_ERROR,\n      reason: Object.assign(new Error('First error message'), {\n        __NEXT_ERROR_CODE: 'E001',\n      }),\n      componentStackFrames: [\n        {\n          file: 'app/page.tsx',\n          component: 'Home',\n          lineNumber: 10,\n          column: 5,\n          canOpenInEditor: true,\n        },\n      ],\n      frames: [\n        {\n          file: 'app/page.tsx',\n          methodName: 'Home',\n          arguments: [],\n          lineNumber: 10,\n          column: 5,\n        },\n      ],\n    },\n  },\n  {\n    id: 2,\n    event: {\n      type: ACTION_UNHANDLED_ERROR,\n      reason: Object.assign(new Error('Second error message'), {\n        __NEXT_ERROR_CODE: 'E002',\n      }),\n      frames: [],\n    },\n  },\n  {\n    id: 3,\n    event: {\n      type: ACTION_UNHANDLED_ERROR,\n      reason: Object.assign(new Error('Third error message'), {\n        __NEXT_ERROR_CODE: 'E003',\n      }),\n      frames: [],\n    },\n  },\n  {\n    id: 4,\n    event: {\n      type: ACTION_UNHANDLED_ERROR,\n      reason: Object.assign(new Error('Fourth error message'), {\n        __NEXT_ERROR_CODE: 'E004',\n      }),\n      frames: [],\n    },\n  },\n]\n\nconst readyErrors: ReadyRuntimeError[] = [\n  {\n    id: 1,\n    runtime: true,\n    error: errors[0].event.reason,\n    frames: [],\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    errors,\n    readyErrors,\n    versionInfo: {\n      installed: '15.0.0',\n      staleness: 'fresh',\n    },\n    hasStaticIndicator: true,\n    isTurbopack: true,\n    debugInfo: { devtoolsFrontendUrl: undefined },\n    onClose: () => {},\n  },\n}\n\nexport const Turbopack: Story = {\n  args: {\n    ...Default.args,\n    isTurbopack: true,\n  },\n}\n\nexport const Minimized: Story = {\n  args: {\n    ...Default.args,\n  },\n}\n\nexport const WithHydrationWarning: Story = {\n  args: {\n    errors: [\n      {\n        id: 1,\n        event: {\n          type: ACTION_UNHANDLED_ERROR,\n          reason: Object.assign(new Error('Hydration error'), {\n            details: {\n              warning: [\n                'Text content does not match server-rendered HTML: \"%s\" !== \"%s\"',\n                'Server Content',\n                'Client Content',\n              ],\n              reactOutputComponentDiff: `<MyComponent>\n  <ParentComponent>\n    <div>\n-     <p> hello world </p>\n+     <div> hello world </div>`,\n            },\n            componentStackFrames: [\n              {\n                component: 'MyComponent',\n                file: 'app/page.tsx',\n                lineNumber: 10,\n                columnNumber: 5,\n              },\n              {\n                component: 'ParentComponent',\n                file: 'app/layout.tsx',\n                lineNumber: 20,\n                columnNumber: 3,\n              },\n            ],\n          }),\n          frames: [],\n        },\n      },\n    ],\n    readyErrors: [],\n    debugInfo: { devtoolsFrontendUrl: undefined },\n    onClose: () => {},\n  },\n}\n"],"names":["Errors","withShadowPortal","ACTION_UNHANDLED_ERROR","meta","component","parameters","layout","decorators","errors","id","event","type","reason","Object","assign","Error","__NEXT_ERROR_CODE","componentStackFrames","file","lineNumber","column","canOpenInEditor","frames","methodName","arguments","readyErrors","runtime","error","Default","args","versionInfo","installed","staleness","hasStaticIndicator","isTurbopack","debugInfo","devtoolsFrontendUrl","undefined","onClose","Turbopack","Minimized","WithHydrationWarning","details","warning","reactOutputComponentDiff","columnNumber"],"mappings":"AAIA,SAASA,MAAM,QAAQ,WAAU;AACjC,SAASC,gBAAgB,QAAQ,kCAAiC;AAClE,SAASC,sBAAsB,QAAQ,kBAAiB;AAExD,MAAMC,OAA4B;IAChCC,WAAWJ;IACXK,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACN;KAAiB;AAChC;AAEA,eAAeE,KAAI;AAGnB,MAAMK,SAAgC;IACpC;QACEC,IAAI;QACJC,OAAO;YACLC,MAAMT;YACNU,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,wBAAwB;gBACtDC,mBAAmB;YACrB;YACAC,sBAAsB;gBACpB;oBACEC,MAAM;oBACNd,WAAW;oBACXe,YAAY;oBACZC,QAAQ;oBACRC,iBAAiB;gBACnB;aACD;YACDC,QAAQ;gBACN;oBACEJ,MAAM;oBACNK,YAAY;oBACZC,WAAW,EAAE;oBACbL,YAAY;oBACZC,QAAQ;gBACV;aACD;QACH;IACF;IACA;QACEX,IAAI;QACJC,OAAO;YACLC,MAAMT;YACNU,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,yBAAyB;gBACvDC,mBAAmB;YACrB;YACAM,QAAQ,EAAE;QACZ;IACF;IACA;QACEb,IAAI;QACJC,OAAO;YACLC,MAAMT;YACNU,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,wBAAwB;gBACtDC,mBAAmB;YACrB;YACAM,QAAQ,EAAE;QACZ;IACF;IACA;QACEb,IAAI;QACJC,OAAO;YACLC,MAAMT;YACNU,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,yBAAyB;gBACvDC,mBAAmB;YACrB;YACAM,QAAQ,EAAE;QACZ;IACF;CACD;AAED,MAAMG,cAAmC;IACvC;QACEhB,IAAI;QACJiB,SAAS;QACTC,OAAOnB,MAAM,CAAC,EAAE,CAACE,KAAK,CAACE,MAAM;QAC7BU,QAAQ,EAAE;IACZ;CACD;AAED,OAAO,MAAMM,UAAiB;IAC5BC,MAAM;QACJrB;QACAiB;QACAK,aAAa;YACXC,WAAW;YACXC,WAAW;QACb;QACAC,oBAAoB;QACpBC,aAAa;QACbC,WAAW;YAAEC,qBAAqBC;QAAU;QAC5CC,SAAS,KAAO;IAClB;AACF,EAAC;AAED,OAAO,MAAMC,YAAmB;IAC9BV,MAAM;QACJ,GAAGD,QAAQC,IAAI;QACfK,aAAa;IACf;AACF,EAAC;AAED,OAAO,MAAMM,YAAmB;IAC9BX,MAAM;QACJ,GAAGD,QAAQC,IAAI;IACjB;AACF,EAAC;AAED,OAAO,MAAMY,uBAA8B;IACzCZ,MAAM;QACJrB,QAAQ;YACN;gBACEC,IAAI;gBACJC,OAAO;oBACLC,MAAMT;oBACNU,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,oBAAoB;wBAClD2B,SAAS;4BACPC,SAAS;gCACP;gCACA;gCACA;6BACD;4BACDC,0BAA2B;wBAK7B;wBACA3B,sBAAsB;4BACpB;gCACEb,WAAW;gCACXc,MAAM;gCACNC,YAAY;gCACZ0B,cAAc;4BAChB;4BACA;gCACEzC,WAAW;gCACXc,MAAM;gCACNC,YAAY;gCACZ0B,cAAc;4BAChB;yBACD;oBACH;oBACAvB,QAAQ,EAAE;gBACZ;YACF;SACD;QACDG,aAAa,EAAE;QACfU,WAAW;YAAEC,qBAAqBC;QAAU;QAC5CC,SAAS,KAAO;IAClB;AACF,EAAC"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/errors.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport type { ReadyRuntimeError } from '../helpers/get-error-by-type'\n\nimport { Errors } from './errors'\nimport { withShadowPortal } from '../storybook/with-shadow-portal'\n\nconst meta: Meta<typeof Errors> = {\n  component: Errors,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  decorators: [withShadowPortal],\n}\n\nexport default meta\ntype Story = StoryObj<typeof Errors>\n\nconst originalCodeFrame = (message: string) => {\n  return `\\u001b[0m \\u001b[90m 1 \\u001b[39m \\u001b[36mexport\\u001b[39m \\u001b[36mdefault\\u001b[39m \\u001b[36mfunction\\u001b[39m \\u001b[33mHome\\u001b[39m() {\\u001b[0m\n\\u001b[0m\\u001b[31m\\u001b[1m>\\u001b[22m\\u001b[39m\\u001b[90m 2 \\u001b[39m   \\u001b[36mthrow\\u001b[39m \\u001b[36mnew\\u001b[39m \\u001b[33mError\\u001b[39m(\\u001b[32m'${message}'\\u001b[39m)\\u001b[0m\n\\u001b[0m \\u001b[90m   \\u001b[39m         \\u001b[31m\\u001b[1m^\\u001b[22m\\u001b[39m\\u001b[0m\n\\u001b[0m \\u001b[90m 3 \\u001b[39m   \\u001b[36mreturn\\u001b[39m \\u001b[33m<\\u001b[39m\\u001b[33mdiv\\u001b[39m\\u001b[33m>\\u001b[39m\\u001b[33mHello\\u001b[39m \\u001b[33mWorld\\u001b[39m\\u001b[33m<\\u001b[39m\\u001b[33m/\\u001b[39m\\u001b[33mdiv\\u001b[39m\\u001b[33m>\\u001b[39m\\u001b[0m\n\\u001b[0m \\u001b[90m 4 \\u001b[39m }\\u001b[0m\n\\u001b[0m \\u001b[90m 5 \\u001b[39m\\u001b[0m`\n}\n\nconst sourceStackFrame = {\n  file: 'app/page.tsx',\n  methodName: 'Home',\n  arguments: [],\n  lineNumber: 2,\n  column: 9,\n}\n\nconst originalStackFrame = {\n  file: 'app/page.tsx',\n  methodName: 'Home',\n  arguments: [],\n  lineNumber: 2,\n  column: 9,\n  ignored: false,\n}\n\nconst readyErrors: ReadyRuntimeError[] = [\n  {\n    id: 1,\n    runtime: true,\n    error: new Error('First error message'),\n    frames: [\n      {\n        error: true,\n        reason: 'First error message',\n        external: false,\n        ignored: false,\n        sourceStackFrame,\n        originalStackFrame,\n        originalCodeFrame: originalCodeFrame('First error message'),\n      },\n    ],\n  },\n  {\n    id: 2,\n    runtime: true,\n    error: new Error('Second error message'),\n    frames: [\n      {\n        error: true,\n        reason: 'Second error message',\n        external: false,\n        ignored: false,\n        sourceStackFrame,\n        originalStackFrame,\n        originalCodeFrame: originalCodeFrame('Second error message'),\n      },\n    ],\n  },\n  {\n    id: 3,\n    runtime: true,\n    error: new Error('Third error message'),\n    frames: [\n      {\n        error: true,\n        reason: 'Third error message',\n        external: false,\n        ignored: false,\n        sourceStackFrame,\n        originalStackFrame,\n        originalCodeFrame: originalCodeFrame('Third error message'),\n      },\n    ],\n  },\n  {\n    id: 4,\n    runtime: true,\n    error: new Error('Fourth error message'),\n    frames: [\n      {\n        error: true,\n        reason: 'Fourth error message',\n        external: false,\n        ignored: false,\n        sourceStackFrame,\n        originalStackFrame,\n        originalCodeFrame: originalCodeFrame('Fourth error message'),\n      },\n    ],\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    readyErrors,\n    versionInfo: {\n      installed: '15.0.0',\n      staleness: 'fresh',\n    },\n    debugInfo: { devtoolsFrontendUrl: undefined },\n    isTurbopack: false,\n    onClose: () => {},\n  },\n}\n\nexport const Turbopack: Story = {\n  args: {\n    ...Default.args,\n    isTurbopack: true,\n  },\n}\n\nexport const Minimized: Story = {\n  args: {\n    ...Default.args,\n  },\n}\n\nexport const WithHydrationWarning: Story = {\n  args: {\n    readyErrors: [\n      {\n        id: 1,\n        runtime: true,\n        error: Object.assign(new Error('Hydration error'), {\n          details: {\n            warning: [\n              'Text content does not match server-rendered HTML: \"%s\" !== \"%s\"',\n              'Server Content',\n              'Client Content',\n            ],\n            reactOutputComponentDiff: `<MyComponent>\n  <ParentComponent>\n    <div>\n-     <p> hello world </p>\n+     <div> hello world </div>`,\n          },\n          componentStackFrames: [\n            {\n              component: 'MyComponent',\n              file: 'app/page.tsx',\n              lineNumber: 10,\n              columnNumber: 5,\n            },\n            {\n              component: 'ParentComponent',\n              file: 'app/layout.tsx',\n              lineNumber: 20,\n              columnNumber: 3,\n            },\n          ],\n        }),\n        frames: [\n          {\n            error: true,\n            reason: 'First error message',\n            external: false,\n            ignored: false,\n            sourceStackFrame: {\n              file: 'app/page.tsx',\n              methodName: 'Home',\n              arguments: [],\n              lineNumber: 10,\n              column: 5,\n            },\n          },\n        ],\n      },\n    ],\n    debugInfo: { devtoolsFrontendUrl: undefined },\n    onClose: () => {},\n  },\n}\n"],"names":["Errors","withShadowPortal","meta","component","parameters","layout","decorators","originalCodeFrame","message","sourceStackFrame","file","methodName","arguments","lineNumber","column","originalStackFrame","ignored","readyErrors","id","runtime","error","Error","frames","reason","external","Default","args","versionInfo","installed","staleness","debugInfo","devtoolsFrontendUrl","undefined","isTurbopack","onClose","Turbopack","Minimized","WithHydrationWarning","Object","assign","details","warning","reactOutputComponentDiff","componentStackFrames","columnNumber"],"mappings":"AAGA,SAASA,MAAM,QAAQ,WAAU;AACjC,SAASC,gBAAgB,QAAQ,kCAAiC;AAElE,MAAMC,OAA4B;IAChCC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACL;KAAiB;AAChC;AAEA,eAAeC,KAAI;AAGnB,MAAMK,oBAAoB,CAACC;IACzB,OAAO,AAAC,gRAC0JA,UAAQ;AAK5K;AAEA,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,YAAY;IACZC,WAAW,EAAE;IACbC,YAAY;IACZC,QAAQ;AACV;AAEA,MAAMC,qBAAqB;IACzBL,MAAM;IACNC,YAAY;IACZC,WAAW,EAAE;IACbC,YAAY;IACZC,QAAQ;IACRE,SAAS;AACX;AAEA,MAAMC,cAAmC;IACvC;QACEC,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ;YACN;gBACEF,OAAO;gBACPG,QAAQ;gBACRC,UAAU;gBACVR,SAAS;gBACTP;gBACAM;gBACAR,mBAAmBA,kBAAkB;YACvC;SACD;IACH;IACA;QACEW,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ;YACN;gBACEF,OAAO;gBACPG,QAAQ;gBACRC,UAAU;gBACVR,SAAS;gBACTP;gBACAM;gBACAR,mBAAmBA,kBAAkB;YACvC;SACD;IACH;IACA;QACEW,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ;YACN;gBACEF,OAAO;gBACPG,QAAQ;gBACRC,UAAU;gBACVR,SAAS;gBACTP;gBACAM;gBACAR,mBAAmBA,kBAAkB;YACvC;SACD;IACH;IACA;QACEW,IAAI;QACJC,SAAS;QACTC,OAAO,IAAIC,MAAM;QACjBC,QAAQ;YACN;gBACEF,OAAO;gBACPG,QAAQ;gBACRC,UAAU;gBACVR,SAAS;gBACTP;gBACAM;gBACAR,mBAAmBA,kBAAkB;YACvC;SACD;IACH;CACD;AAED,OAAO,MAAMkB,UAAiB;IAC5BC,MAAM;QACJT;QACAU,aAAa;YACXC,WAAW;YACXC,WAAW;QACb;QACAC,WAAW;YAAEC,qBAAqBC;QAAU;QAC5CC,aAAa;QACbC,SAAS,KAAO;IAClB;AACF,EAAC;AAED,OAAO,MAAMC,YAAmB;IAC9BT,MAAM;QACJ,GAAGD,QAAQC,IAAI;QACfO,aAAa;IACf;AACF,EAAC;AAED,OAAO,MAAMG,YAAmB;IAC9BV,MAAM;QACJ,GAAGD,QAAQC,IAAI;IACjB;AACF,EAAC;AAED,OAAO,MAAMW,uBAA8B;IACzCX,MAAM;QACJT,aAAa;YACX;gBACEC,IAAI;gBACJC,SAAS;gBACTC,OAAOkB,OAAOC,MAAM,CAAC,IAAIlB,MAAM,oBAAoB;oBACjDmB,SAAS;wBACPC,SAAS;4BACP;4BACA;4BACA;yBACD;wBACDC,0BAA2B;oBAK7B;oBACAC,sBAAsB;wBACpB;4BACExC,WAAW;4BACXO,MAAM;4BACNG,YAAY;4BACZ+B,cAAc;wBAChB;wBACA;4BACEzC,WAAW;4BACXO,MAAM;4BACNG,YAAY;4BACZ+B,cAAc;wBAChB;qBACD;gBACH;gBACAtB,QAAQ;oBACN;wBACEF,OAAO;wBACPG,QAAQ;wBACRC,UAAU;wBACVR,SAAS;wBACTP,kBAAkB;4BAChBC,MAAM;4BACNC,YAAY;4BACZC,WAAW,EAAE;4BACbC,YAAY;4BACZC,QAAQ;wBACV;oBACF;iBACD;YACH;SACD;QACDgB,WAAW;YAAEC,qBAAqBC;QAAU;QAC5CE,SAAS,KAAO;IAClB;AACF,EAAC"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.js

@@ -17,7 +17,8 @@ function getErrorSignature(ev) {
     return '';
 }
 export function useErrorHook(param) {
-    let { errors, isAppDir } = param;
+    let { state, isAppDir } = param;
+    const { errors, rootLayoutMissingTags, buildError } = state;
     const [lookups, setLookups] = useState({});
     const [readyErrors, nextError] = useMemo(()=>{
         let ready = [];
@@ -74,7 +75,12 @@ export function useErrorHook(param) {
         isAppDir
     ]);
     return {
-        readyErrors
+        readyErrors,
+        // Total number of errors are based on the priority that
+        // will be displayed. Since build error and root layout
+        // missing tags won't be dismissed until resolved, the
+        // total number of errors may be fixed to their length.
+        totalErrorCount: (rootLayoutMissingTags == null ? void 0 : rootLayoutMissingTags.length) ? rootLayoutMissingTags.length : !!buildError ? 1 : errors.length
     };
 }
 

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts"],"sourcesContent":["import type { ReadyRuntimeError } from '../../helpers/get-error-by-type'\nimport type {\n  UnhandledErrorAction,\n  UnhandledRejectionAction,\n} from '../../../../shared'\n\nimport { useMemo, useState, useEffect } from 'react'\nimport { getErrorByType } from '../../helpers/get-error-by-type'\nimport {\n  ACTION_UNHANDLED_ERROR,\n  ACTION_UNHANDLED_REJECTION,\n} from '../../../../shared'\n\nexport type SupportedErrorEvent = {\n  id: number\n  event: UnhandledErrorAction | UnhandledRejectionAction\n}\n\nfunction getErrorSignature(ev: SupportedErrorEvent): string {\n  const { event } = ev\n  switch (event.type) {\n    case ACTION_UNHANDLED_ERROR:\n    case ACTION_UNHANDLED_REJECTION: {\n      return `${event.reason.name}::${event.reason.message}::${event.reason.stack}`\n    }\n    default: {\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const _: never = event as never\n  return ''\n}\n\nexport function useErrorHook({\n  errors,\n  isAppDir,\n}: {\n  errors: SupportedErrorEvent[]\n  isAppDir: boolean\n}) {\n  const [lookups, setLookups] = useState<{\n    [eventId: string]: ReadyRuntimeError\n  }>({})\n  const [readyErrors, nextError] = useMemo<\n    [ReadyRuntimeError[], SupportedErrorEvent | null]\n  >(() => {\n    let ready: ReadyRuntimeError[] = []\n    let next: SupportedErrorEvent | null = null\n\n    // Ensure errors are displayed in the order they occurred in:\n    for (let idx = 0; idx < errors.length; ++idx) {\n      const e = errors[idx]\n      const { id } = e\n      if (id in lookups) {\n        ready.push(lookups[id])\n        continue\n      }\n\n      // Check for duplicate errors\n      if (idx > 0) {\n        const prev = errors[idx - 1]\n        if (getErrorSignature(prev) === getErrorSignature(e)) {\n          continue\n        }\n      }\n\n      next = e\n      break\n    }\n\n    return [ready, next]\n  }, [errors, lookups])\n\n  useEffect(() => {\n    if (nextError == null) {\n      return\n    }\n    let mounted = true\n\n    getErrorByType(nextError, isAppDir).then(\n      (resolved) => {\n        // We don't care if the desired error changed while we were resolving,\n        // thus we're not tracking it using a ref. Once the work has been done,\n        // we'll store it.\n        if (mounted) {\n          setLookups((m) => ({ ...m, [resolved.id]: resolved }))\n        }\n      },\n      () => {\n        // TODO: handle this, though an edge case\n      }\n    )\n\n    return () => {\n      mounted = false\n    }\n  }, [nextError, isAppDir])\n\n  return {\n    readyErrors,\n  }\n}\n"],"names":["useMemo","useState","useEffect","getErrorByType","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","getErrorSignature","ev","event","type","reason","name","message","stack","_","useErrorHook","errors","isAppDir","lookups","setLookups","readyErrors","nextError","ready","next","idx","length","e","id","push","prev","mounted","then","resolved","m"],"mappings":"AAMA,SAASA,OAAO,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,QAAO;AACpD,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SACEC,sBAAsB,EACtBC,0BAA0B,QACrB,qBAAoB;AAO3B,SAASC,kBAAkBC,EAAuB;IAChD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAClB,OAAQC,MAAMC,IAAI;QAChB,KAAKL;QACL,KAAKC;YAA4B;gBAC/B,OAAO,AAAGG,MAAME,MAAM,CAACC,IAAI,GAAC,OAAIH,MAAME,MAAM,CAACE,OAAO,GAAC,OAAIJ,MAAME,MAAM,CAACG,KAAK;YAC7E;QACA;YAAS,CACT;IACF;IAEA,6DAA6D;IAC7D,MAAMC,IAAWN;IACjB,OAAO;AACT;AAEA,OAAO,SAASO,aAAa,KAM5B;IAN4B,IAAA,EAC3BC,MAAM,EACNC,QAAQ,EAIT,GAN4B;IAO3B,MAAM,CAACC,SAASC,WAAW,GAAGlB,SAE3B,CAAC;IACJ,MAAM,CAACmB,aAAaC,UAAU,GAAGrB,QAE/B;QACA,IAAIsB,QAA6B,EAAE;QACnC,IAAIC,OAAmC;QAEvC,6DAA6D;QAC7D,IAAK,IAAIC,MAAM,GAAGA,MAAMR,OAAOS,MAAM,EAAE,EAAED,IAAK;YAC5C,MAAME,IAAIV,MAAM,CAACQ,IAAI;YACrB,MAAM,EAAEG,EAAE,EAAE,GAAGD;YACf,IAAIC,MAAMT,SAAS;gBACjBI,MAAMM,IAAI,CAACV,OAAO,CAACS,GAAG;gBACtB;YACF;YAEA,6BAA6B;YAC7B,IAAIH,MAAM,GAAG;gBACX,MAAMK,OAAOb,MAAM,CAACQ,MAAM,EAAE;gBAC5B,IAAIlB,kBAAkBuB,UAAUvB,kBAAkBoB,IAAI;oBACpD;gBACF;YACF;YAEAH,OAAOG;YACP;QACF;QAEA,OAAO;YAACJ;YAAOC;SAAK;IACtB,GAAG;QAACP;QAAQE;KAAQ;IAEpBhB,UAAU;QACR,IAAImB,aAAa,MAAM;YACrB;QACF;QACA,IAAIS,UAAU;QAEd3B,eAAekB,WAAWJ,UAAUc,IAAI,CACtC,CAACC;YACC,sEAAsE;YACtE,uEAAuE;YACvE,kBAAkB;YAClB,IAAIF,SAAS;gBACXX,WAAW,CAACc,IAAO,CAAA;wBAAE,GAAGA,CAAC;wBAAE,CAACD,SAASL,EAAE,CAAC,EAAEK;oBAAS,CAAA;YACrD;QACF,GACA;QACE,yCAAyC;QAC3C;QAGF,OAAO;YACLF,UAAU;QACZ;IACF,GAAG;QAACT;QAAWJ;KAAS;IAExB,OAAO;QACLG;IACF;AACF"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts"],"sourcesContent":["import type { ReadyRuntimeError } from '../../helpers/get-error-by-type'\nimport type {\n  OverlayState,\n  UnhandledErrorAction,\n  UnhandledRejectionAction,\n} from '../../../../shared'\n\nimport { useMemo, useState, useEffect } from 'react'\nimport { getErrorByType } from '../../helpers/get-error-by-type'\nimport {\n  ACTION_UNHANDLED_ERROR,\n  ACTION_UNHANDLED_REJECTION,\n} from '../../../../shared'\n\nexport type SupportedErrorEvent = {\n  id: number\n  event: UnhandledErrorAction | UnhandledRejectionAction\n}\n\nfunction getErrorSignature(ev: SupportedErrorEvent): string {\n  const { event } = ev\n  switch (event.type) {\n    case ACTION_UNHANDLED_ERROR:\n    case ACTION_UNHANDLED_REJECTION: {\n      return `${event.reason.name}::${event.reason.message}::${event.reason.stack}`\n    }\n    default: {\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const _: never = event as never\n  return ''\n}\n\nexport function useErrorHook({\n  state,\n  isAppDir,\n}: {\n  state: OverlayState\n  isAppDir: boolean\n}) {\n  const { errors, rootLayoutMissingTags, buildError } = state\n\n  const [lookups, setLookups] = useState<{\n    [eventId: string]: ReadyRuntimeError\n  }>({})\n  const [readyErrors, nextError] = useMemo<\n    [ReadyRuntimeError[], SupportedErrorEvent | null]\n  >(() => {\n    let ready: ReadyRuntimeError[] = []\n    let next: SupportedErrorEvent | null = null\n\n    // Ensure errors are displayed in the order they occurred in:\n    for (let idx = 0; idx < errors.length; ++idx) {\n      const e = errors[idx]\n      const { id } = e\n      if (id in lookups) {\n        ready.push(lookups[id])\n        continue\n      }\n\n      // Check for duplicate errors\n      if (idx > 0) {\n        const prev = errors[idx - 1]\n        if (getErrorSignature(prev) === getErrorSignature(e)) {\n          continue\n        }\n      }\n\n      next = e\n      break\n    }\n\n    return [ready, next]\n  }, [errors, lookups])\n\n  useEffect(() => {\n    if (nextError == null) {\n      return\n    }\n    let mounted = true\n\n    getErrorByType(nextError, isAppDir).then(\n      (resolved) => {\n        // We don't care if the desired error changed while we were resolving,\n        // thus we're not tracking it using a ref. Once the work has been done,\n        // we'll store it.\n        if (mounted) {\n          setLookups((m) => ({ ...m, [resolved.id]: resolved }))\n        }\n      },\n      () => {\n        // TODO: handle this, though an edge case\n      }\n    )\n\n    return () => {\n      mounted = false\n    }\n  }, [nextError, isAppDir])\n\n  return {\n    readyErrors,\n    // Total number of errors are based on the priority that\n    // will be displayed. Since build error and root layout\n    // missing tags won't be dismissed until resolved, the\n    // total number of errors may be fixed to their length.\n    totalErrorCount: rootLayoutMissingTags?.length\n      ? rootLayoutMissingTags.length\n      : !!buildError\n        ? 1\n        : errors.length,\n  }\n}\n"],"names":["useMemo","useState","useEffect","getErrorByType","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","getErrorSignature","ev","event","type","reason","name","message","stack","_","useErrorHook","state","isAppDir","errors","rootLayoutMissingTags","buildError","lookups","setLookups","readyErrors","nextError","ready","next","idx","length","e","id","push","prev","mounted","then","resolved","m","totalErrorCount"],"mappings":"AAOA,SAASA,OAAO,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,QAAO;AACpD,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SACEC,sBAAsB,EACtBC,0BAA0B,QACrB,qBAAoB;AAO3B,SAASC,kBAAkBC,EAAuB;IAChD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAClB,OAAQC,MAAMC,IAAI;QAChB,KAAKL;QACL,KAAKC;YAA4B;gBAC/B,OAAO,AAAGG,MAAME,MAAM,CAACC,IAAI,GAAC,OAAIH,MAAME,MAAM,CAACE,OAAO,GAAC,OAAIJ,MAAME,MAAM,CAACG,KAAK;YAC7E;QACA;YAAS,CACT;IACF;IAEA,6DAA6D;IAC7D,MAAMC,IAAWN;IACjB,OAAO;AACT;AAEA,OAAO,SAASO,aAAa,KAM5B;IAN4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EAIT,GAN4B;IAO3B,MAAM,EAAEC,MAAM,EAAEC,qBAAqB,EAAEC,UAAU,EAAE,GAAGJ;IAEtD,MAAM,CAACK,SAASC,WAAW,GAAGrB,SAE3B,CAAC;IACJ,MAAM,CAACsB,aAAaC,UAAU,GAAGxB,QAE/B;QACA,IAAIyB,QAA6B,EAAE;QACnC,IAAIC,OAAmC;QAEvC,6DAA6D;QAC7D,IAAK,IAAIC,MAAM,GAAGA,MAAMT,OAAOU,MAAM,EAAE,EAAED,IAAK;YAC5C,MAAME,IAAIX,MAAM,CAACS,IAAI;YACrB,MAAM,EAAEG,EAAE,EAAE,GAAGD;YACf,IAAIC,MAAMT,SAAS;gBACjBI,MAAMM,IAAI,CAACV,OAAO,CAACS,GAAG;gBACtB;YACF;YAEA,6BAA6B;YAC7B,IAAIH,MAAM,GAAG;gBACX,MAAMK,OAAOd,MAAM,CAACS,MAAM,EAAE;gBAC5B,IAAIrB,kBAAkB0B,UAAU1B,kBAAkBuB,IAAI;oBACpD;gBACF;YACF;YAEAH,OAAOG;YACP;QACF;QAEA,OAAO;YAACJ;YAAOC;SAAK;IACtB,GAAG;QAACR;QAAQG;KAAQ;IAEpBnB,UAAU;QACR,IAAIsB,aAAa,MAAM;YACrB;QACF;QACA,IAAIS,UAAU;QAEd9B,eAAeqB,WAAWP,UAAUiB,IAAI,CACtC,CAACC;YACC,sEAAsE;YACtE,uEAAuE;YACvE,kBAAkB;YAClB,IAAIF,SAAS;gBACXX,WAAW,CAACc,IAAO,CAAA;wBAAE,GAAGA,CAAC;wBAAE,CAACD,SAASL,EAAE,CAAC,EAAEK;oBAAS,CAAA;YACrD;QACF,GACA;QACE,yCAAyC;QAC3C;QAGF,OAAO;YACLF,UAAU;QACZ;IACF,GAAG;QAACT;QAAWP;KAAS;IAExB,OAAO;QACLM;QACA,wDAAwD;QACxD,uDAAuD;QACvD,sDAAsD;QACtD,uDAAuD;QACvDc,iBAAiBlB,CAAAA,yCAAAA,sBAAuBS,MAAM,IAC1CT,sBAAsBS,MAAM,GAC5B,CAAC,CAACR,aACA,IACAF,OAAOU,MAAM;IACrB;AACF"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/helpers/merge-refs.js

@@ -0,0 +1,33 @@
+/**
+ * A function that merges React refs into one.
+ * Supports both functions and ref objects created using createRef() and useRef().
+ *
+ * Usage:
+ * ```tsx
+ * <div ref={mergeRefs(ref1, ref2, ref3)} />
+ * ```
+ *
+ * @param {(React.Ref<T> | undefined)[]} inputRefs Array of refs
+ * @returns {React.Ref<T> | React.RefCallback<T>} Merged refs
+ */ export default function mergeRefs() {
+    for(var _len = arguments.length, inputRefs = new Array(_len), _key = 0; _key < _len; _key++){
+        inputRefs[_key] = arguments[_key];
+    }
+    const filteredInputRefs = inputRefs.filter(Boolean);
+    if (filteredInputRefs.length <= 1) {
+        const firstRef = filteredInputRefs[0];
+        return firstRef || null;
+    }
+    return function mergedRefs(ref) {
+        for (const inputRef of filteredInputRefs){
+            if (typeof inputRef === 'function') {
+                inputRef(ref);
+            } else if (inputRef) {
+                ;
+                inputRef.current = ref;
+            }
+        }
+    };
+}
+
+//# sourceMappingURL=merge-refs.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/helpers/merge-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/helpers/merge-refs.ts"],"sourcesContent":["import type * as React from 'react'\n\n/**\n * A function that merges React refs into one.\n * Supports both functions and ref objects created using createRef() and useRef().\n *\n * Usage:\n * ```tsx\n * <div ref={mergeRefs(ref1, ref2, ref3)} />\n * ```\n *\n * @param {(React.Ref<T> | undefined)[]} inputRefs Array of refs\n * @returns {React.Ref<T> | React.RefCallback<T>} Merged refs\n */\nexport default function mergeRefs<T>(\n  ...inputRefs: (React.Ref<T> | undefined)[]\n): React.Ref<T> | React.RefCallback<T> {\n  const filteredInputRefs = inputRefs.filter(Boolean)\n\n  if (filteredInputRefs.length <= 1) {\n    const firstRef = filteredInputRefs[0]\n\n    return firstRef || null\n  }\n\n  return function mergedRefs(ref) {\n    for (const inputRef of filteredInputRefs) {\n      if (typeof inputRef === 'function') {\n        inputRef(ref)\n      } else if (inputRef) {\n        ;(inputRef as React.MutableRefObject<T | null>).current = ref\n      }\n    }\n  }\n}\n"],"names":["mergeRefs","inputRefs","filteredInputRefs","filter","Boolean","length","firstRef","mergedRefs","ref","inputRef","current"],"mappings":"AAEA;;;;;;;;;;;CAWC,GACD,eAAe,SAASA;IACtB,IAAA,IAAA,OAAA,UAAA,QAAA,AAAGC,YAAH,UAAA,OAAA,OAAA,GAAA,OAAA,MAAA;QAAGA,UAAH,QAAA,SAAA,CAAA,KAA0C;;IAE1C,MAAMC,oBAAoBD,UAAUE,MAAM,CAACC;IAE3C,IAAIF,kBAAkBG,MAAM,IAAI,GAAG;QACjC,MAAMC,WAAWJ,iBAAiB,CAAC,EAAE;QAErC,OAAOI,YAAY;IACrB;IAEA,OAAO,SAASC,WAAWC,GAAG;QAC5B,KAAK,MAAMC,YAAYP,kBAAmB;YACxC,IAAI,OAAOO,aAAa,YAAY;gBAClCA,SAASD;YACX,OAAO,IAAIC,UAAU;;gBACjBA,SAA8CC,OAAO,GAAGF;YAC5D;QACF;IACF;AACF"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/styles/base.js

@@ -1,7 +1,8 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');\n\n        :host {\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-11: 11px;\n          --size-font-smaller: 12px;\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,\n            'Liberation Mono', Menlo, Courier, monospace;\n          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',\n            sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --rounded-none: 0px;\n          --rounded-sm: 0.125rem; /* 2px */\n          --rounded-md: 0.25rem; /* 4px */\n          --rounded-lg: 0.5rem; /* 8px */\n          --rounded-xl: 0.75rem; /* 12px */\n          --rounded-2xl: 1rem; /* 16px */\n          --rounded-3xl: 1.5rem; /* 24px */\n          --rounded-full: 9999px;\n\n          --size-0: 0px;\n          --size-px: 1px;\n          --size-0_5: 0.125rem; /* 2px */\n          --size-1: 0.25rem; /* 4px */\n          --size-1_5: 0.375rem; /* 6px */\n          --size-2: 0.5rem; /* 8px */\n          --size-2_5: 0.625rem; /* 10px */\n          --size-3: 0.75rem; /* 12px */\n          --size-3_5: 0.875rem; /* 14px */\n          --size-4: 1rem; /* 16px */\n          --size-4_5: 1.125rem; /* 18px */\n          --size-5: 1.25rem; /* 20px */\n          --size-5_5: 1.375rem; /* 22px */\n          --size-6: 1.5rem; /* 24px */\n          --size-6_5: 1.625rem; /* 26px */\n          --size-7: 1.75rem; /* 28px */\n          --size-7_5: 1.875rem; /* 30px */\n          --size-8: 2rem; /* 32px */\n          --size-8_5: 2.125rem; /* 34px */\n          --size-9: 2.25rem; /* 36px */\n          --size-9_5: 2.375rem; /* 38px */\n          --size-10: 2.5rem; /* 40px */\n          --size-10_5: 2.625rem; /* 42px */\n          --size-11: 2.75rem; /* 44px */\n          --size-11_5: 2.875rem; /* 46px */\n          --size-12: 3rem; /* 48px */\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      "
+        "\n        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');\n\n        :host {\n          ",
+        "\n\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-11: 11px;\n          --size-font-smaller: 12px;\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,\n            'Liberation Mono', Menlo, Courier, monospace;\n          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',\n            sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --rounded-none: 0px;\n          --rounded-sm: 0.125rem; /* 2px */\n          --rounded-md: 0.25rem; /* 4px */\n          --rounded-lg: 0.5rem; /* 8px */\n          --rounded-xl: 0.75rem; /* 12px */\n          --rounded-2xl: 1rem; /* 16px */\n          --rounded-3xl: 1.5rem; /* 24px */\n          --rounded-full: 9999px;\n\n          --size-0: 0px;\n          --size-px: 1px;\n          --size-0_5: 0.125rem; /* 2px */\n          --size-1: 0.25rem; /* 4px */\n          --size-1_5: 0.375rem; /* 6px */\n          --size-2: 0.5rem; /* 8px */\n          --size-2_5: 0.625rem; /* 10px */\n          --size-3: 0.75rem; /* 12px */\n          --size-3_5: 0.875rem; /* 14px */\n          --size-4: 1rem; /* 16px */\n          --size-4_5: 1.125rem; /* 18px */\n          --size-5: 1.25rem; /* 20px */\n          --size-5_5: 1.375rem; /* 22px */\n          --size-6: 1.5rem; /* 24px */\n          --size-6_5: 1.625rem; /* 26px */\n          --size-7: 1.75rem; /* 28px */\n          --size-7_5: 1.875rem; /* 30px */\n          --size-8: 2rem; /* 32px */\n          --size-8_5: 2.125rem; /* 34px */\n          --size-9: 2.25rem; /* 36px */\n          --size-9_5: 2.375rem; /* 38px */\n          --size-10: 2.5rem; /* 40px */\n          --size-10_5: 2.625rem; /* 42px */\n          --size-11: 2.75rem; /* 44px */\n          --size-11_5: 2.875rem; /* 46px */\n          --size-12: 3rem; /* 48px */\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      "
     ]);
     _templateObject = function() {
         return data;
@@ -13,7 +14,12 @@ import * as React from 'react';
 import { noop as css } from '../helpers/noop-template';
 export function Base() {
     return /*#__PURE__*/ _jsx("style", {
-        children: css(_templateObject())
+        children: css(_templateObject(), // Although the style applied to the shadow host is isolated,
+        // the element that attached the shadow host (i.e. `nextjs-portal`)
+        // is still affected by the parent's style (e.g. `body`). This may
+        // occur style conflicts like `display: flex`, with other children
+        // elements therefore give the shadow host an absolute position.
+        'position: absolute;')
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/styles/base.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../helpers/noop-template'\n\nexport function Base() {\n  return (\n    <style>\n      {css`\n        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');\n\n        :host {\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-11: 11px;\n          --size-font-smaller: 12px;\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,\n            'Liberation Mono', Menlo, Courier, monospace;\n          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',\n            sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --rounded-none: 0px;\n          --rounded-sm: 0.125rem; /* 2px */\n          --rounded-md: 0.25rem; /* 4px */\n          --rounded-lg: 0.5rem; /* 8px */\n          --rounded-xl: 0.75rem; /* 12px */\n          --rounded-2xl: 1rem; /* 16px */\n          --rounded-3xl: 1.5rem; /* 24px */\n          --rounded-full: 9999px;\n\n          --size-0: 0px;\n          --size-px: 1px;\n          --size-0_5: 0.125rem; /* 2px */\n          --size-1: 0.25rem; /* 4px */\n          --size-1_5: 0.375rem; /* 6px */\n          --size-2: 0.5rem; /* 8px */\n          --size-2_5: 0.625rem; /* 10px */\n          --size-3: 0.75rem; /* 12px */\n          --size-3_5: 0.875rem; /* 14px */\n          --size-4: 1rem; /* 16px */\n          --size-4_5: 1.125rem; /* 18px */\n          --size-5: 1.25rem; /* 20px */\n          --size-5_5: 1.375rem; /* 22px */\n          --size-6: 1.5rem; /* 24px */\n          --size-6_5: 1.625rem; /* 26px */\n          --size-7: 1.75rem; /* 28px */\n          --size-7_5: 1.875rem; /* 30px */\n          --size-8: 2rem; /* 32px */\n          --size-8_5: 2.125rem; /* 34px */\n          --size-9: 2.25rem; /* 36px */\n          --size-9_5: 2.375rem; /* 38px */\n          --size-10: 2.5rem; /* 40px */\n          --size-10_5: 2.625rem; /* 42px */\n          --size-11: 2.75rem; /* 44px */\n          --size-11_5: 2.875rem; /* 46px */\n          --size-12: 3rem; /* 48px */\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      `}\n    </style>\n  )\n}\n"],"names":["React","noop","css","Base","style"],"mappings":";;;;;;;;;;;AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,QAAQC,GAAG,QAAQ,2BAA0B;AAEtD,OAAO,SAASC;IACd,qBACE,KAACC;kBACEF;;AAoIP"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/styles/base.tsx"],"sourcesContent":["import * as React from 'react'\nimport { noop as css } from '../helpers/noop-template'\n\nexport function Base() {\n  return (\n    <style>\n      {css`\n        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');\n\n        :host {\n          ${\n            // Although the style applied to the shadow host is isolated,\n            // the element that attached the shadow host (i.e. `nextjs-portal`)\n            // is still affected by the parent's style (e.g. `body`). This may\n            // occur style conflicts like `display: flex`, with other children\n            // elements therefore give the shadow host an absolute position.\n            'position: absolute;'\n          }\n\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-11: 11px;\n          --size-font-smaller: 12px;\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,\n            'Liberation Mono', Menlo, Courier, monospace;\n          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',\n            sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --rounded-none: 0px;\n          --rounded-sm: 0.125rem; /* 2px */\n          --rounded-md: 0.25rem; /* 4px */\n          --rounded-lg: 0.5rem; /* 8px */\n          --rounded-xl: 0.75rem; /* 12px */\n          --rounded-2xl: 1rem; /* 16px */\n          --rounded-3xl: 1.5rem; /* 24px */\n          --rounded-full: 9999px;\n\n          --size-0: 0px;\n          --size-px: 1px;\n          --size-0_5: 0.125rem; /* 2px */\n          --size-1: 0.25rem; /* 4px */\n          --size-1_5: 0.375rem; /* 6px */\n          --size-2: 0.5rem; /* 8px */\n          --size-2_5: 0.625rem; /* 10px */\n          --size-3: 0.75rem; /* 12px */\n          --size-3_5: 0.875rem; /* 14px */\n          --size-4: 1rem; /* 16px */\n          --size-4_5: 1.125rem; /* 18px */\n          --size-5: 1.25rem; /* 20px */\n          --size-5_5: 1.375rem; /* 22px */\n          --size-6: 1.5rem; /* 24px */\n          --size-6_5: 1.625rem; /* 26px */\n          --size-7: 1.75rem; /* 28px */\n          --size-7_5: 1.875rem; /* 30px */\n          --size-8: 2rem; /* 32px */\n          --size-8_5: 2.125rem; /* 34px */\n          --size-9: 2.25rem; /* 36px */\n          --size-9_5: 2.375rem; /* 38px */\n          --size-10: 2.5rem; /* 40px */\n          --size-10_5: 2.625rem; /* 42px */\n          --size-11: 2.75rem; /* 44px */\n          --size-11_5: 2.875rem; /* 46px */\n          --size-12: 3rem; /* 48px */\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      `}\n    </style>\n  )\n}\n"],"names":["React","noop","css","Base","style"],"mappings":";;;;;;;;;;;;AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,QAAQC,GAAG,QAAQ,2BAA0B;AAEtD,OAAO,SAASC;IACd,qBACE,KAACC;kBACEF,uBAKK,6DAA6D;QAC7D,mEAAmE;QACnE,kEAAkE;QAClE,kEAAkE;QAClE,gEAAgE;QAChE;;AAqIZ"}

package/dist/esm/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.js

@@ -14,8 +14,8 @@ import { useErrorHook } from '../internal/container/runtime-error/use-error-hook
 export default function ReactDevOverlay(param) {
     let { children } = param;
     const { isMounted, state, onComponentError, hasRuntimeErrors, hasBuildError } = usePagesReactDevOverlay();
-    const { readyErrors } = useErrorHook({
-        errors: state.errors,
+    const { readyErrors, totalErrorCount } = useErrorHook({
+        state,
         isAppDir: false
     });
     const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true);
@@ -34,7 +34,7 @@ export default function ReactDevOverlay(param) {
                     /*#__PURE__*/ _jsx(ComponentStyles, {}),
                     /*#__PURE__*/ _jsx(DevToolsIndicator, {
                         state: state,
-                        readyErrorsLength: readyErrors.length,
+                        errorCount: totalErrorCount,
                         setIsErrorOverlayOpen: setIsErrorOverlayOpen
                     }),
                     (hasRuntimeErrors || hasBuildError) && /*#__PURE__*/ _jsx(ErrorOverlay, {

package/dist/esm/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useState } from 'react'\nimport { ShadowPortal } from '../internal/components/shadow-portal'\nimport { Base } from '../internal/styles/base'\nimport { ComponentStyles } from '../internal/styles/component-styles'\nimport { CssReset } from '../internal/styles/css-reset'\n\nimport { DevOverlayErrorBoundary } from './error-boundary'\nimport { usePagesReactDevOverlay } from '../../pages/hooks'\nimport { Colors } from '../internal/styles/colors'\nimport { ErrorOverlay } from '../internal/components/errors/error-overlay/error-overlay'\nimport { DevToolsIndicator } from '../internal/components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { useErrorHook } from '../internal/container/runtime-error/use-error-hook'\n\nexport type ErrorType = 'runtime' | 'build'\n\ninterface ReactDevOverlayProps {\n  children?: React.ReactNode\n}\n\nexport default function ReactDevOverlay({ children }: ReactDevOverlayProps) {\n  const {\n    isMounted,\n    state,\n    onComponentError,\n    hasRuntimeErrors,\n    hasBuildError,\n  } = usePagesReactDevOverlay()\n\n  const { readyErrors } = useErrorHook({\n    errors: state.errors,\n    isAppDir: false,\n  })\n\n  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true)\n\n  return (\n    <>\n      <DevOverlayErrorBoundary isMounted={isMounted} onError={onComponentError}>\n        {children ?? null}\n      </DevOverlayErrorBoundary>\n\n      {isMounted && (\n        <ShadowPortal>\n          <CssReset />\n          <Base />\n          <Colors />\n          <ComponentStyles />\n\n          <DevToolsIndicator\n            state={state}\n            readyErrorsLength={readyErrors.length}\n            setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n          />\n\n          {(hasRuntimeErrors || hasBuildError) && (\n            <ErrorOverlay\n              state={state}\n              readyErrors={readyErrors}\n              isErrorOverlayOpen={isErrorOverlayOpen}\n              setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n            />\n          )}\n        </ShadowPortal>\n      )}\n    </>\n  )\n}\n"],"names":["React","useState","ShadowPortal","Base","ComponentStyles","CssReset","DevOverlayErrorBoundary","usePagesReactDevOverlay","Colors","ErrorOverlay","DevToolsIndicator","useErrorHook","ReactDevOverlay","children","isMounted","state","onComponentError","hasRuntimeErrors","hasBuildError","readyErrors","errors","isAppDir","isErrorOverlayOpen","setIsErrorOverlayOpen","onError","readyErrorsLength","length"],"mappings":";AAAA,YAAYA,WAAW,QAAO;AAE9B,SAASC,QAAQ,QAAQ,QAAO;AAChC,SAASC,YAAY,QAAQ,uCAAsC;AACnE,SAASC,IAAI,QAAQ,0BAAyB;AAC9C,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,QAAQ,QAAQ,+BAA8B;AAEvD,SAASC,uBAAuB,QAAQ,mBAAkB;AAC1D,SAASC,uBAAuB,QAAQ,oBAAmB;AAC3D,SAASC,MAAM,QAAQ,4BAA2B;AAClD,SAASC,YAAY,QAAQ,4DAA2D;AACxF,SAASC,iBAAiB,QAAQ,wEAAuE;AACzG,SAASC,YAAY,QAAQ,qDAAoD;AAQjF,eAAe,SAASC,gBAAgB,KAAkC;IAAlC,IAAA,EAAEC,QAAQ,EAAwB,GAAlC;IACtC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,EACd,GAAGX;IAEJ,MAAM,EAAEY,WAAW,EAAE,GAAGR,aAAa;QACnCS,QAAQL,MAAMK,MAAM;QACpBC,UAAU;IACZ;IAEA,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGtB,SAAS;IAE7D,qBACE;;0BACE,KAACK;gBAAwBQ,WAAWA;gBAAWU,SAASR;0BACrDH,mBAAAA,WAAY;;YAGdC,2BACC,MAACZ;;kCACC,KAACG;kCACD,KAACF;kCACD,KAACK;kCACD,KAACJ;kCAED,KAACM;wBACCK,OAAOA;wBACPU,mBAAmBN,YAAYO,MAAM;wBACrCH,uBAAuBA;;oBAGvBN,CAAAA,oBAAoBC,aAAY,mBAChC,KAACT;wBACCM,OAAOA;wBACPI,aAAaA;wBACbG,oBAAoBA;wBACpBC,uBAAuBA;;;;;;AAOrC"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/_experimental/pages/react-dev-overlay.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { useState } from 'react'\nimport { ShadowPortal } from '../internal/components/shadow-portal'\nimport { Base } from '../internal/styles/base'\nimport { ComponentStyles } from '../internal/styles/component-styles'\nimport { CssReset } from '../internal/styles/css-reset'\n\nimport { DevOverlayErrorBoundary } from './error-boundary'\nimport { usePagesReactDevOverlay } from '../../pages/hooks'\nimport { Colors } from '../internal/styles/colors'\nimport { ErrorOverlay } from '../internal/components/errors/error-overlay/error-overlay'\nimport { DevToolsIndicator } from '../internal/components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { useErrorHook } from '../internal/container/runtime-error/use-error-hook'\n\nexport type ErrorType = 'runtime' | 'build'\n\ninterface ReactDevOverlayProps {\n  children?: React.ReactNode\n}\n\nexport default function ReactDevOverlay({ children }: ReactDevOverlayProps) {\n  const {\n    isMounted,\n    state,\n    onComponentError,\n    hasRuntimeErrors,\n    hasBuildError,\n  } = usePagesReactDevOverlay()\n\n  const { readyErrors, totalErrorCount } = useErrorHook({\n    state,\n    isAppDir: false,\n  })\n\n  const [isErrorOverlayOpen, setIsErrorOverlayOpen] = useState(true)\n\n  return (\n    <>\n      <DevOverlayErrorBoundary isMounted={isMounted} onError={onComponentError}>\n        {children ?? null}\n      </DevOverlayErrorBoundary>\n\n      {isMounted && (\n        <ShadowPortal>\n          <CssReset />\n          <Base />\n          <Colors />\n          <ComponentStyles />\n\n          <DevToolsIndicator\n            state={state}\n            errorCount={totalErrorCount}\n            setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n          />\n\n          {(hasRuntimeErrors || hasBuildError) && (\n            <ErrorOverlay\n              state={state}\n              readyErrors={readyErrors}\n              isErrorOverlayOpen={isErrorOverlayOpen}\n              setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n            />\n          )}\n        </ShadowPortal>\n      )}\n    </>\n  )\n}\n"],"names":["React","useState","ShadowPortal","Base","ComponentStyles","CssReset","DevOverlayErrorBoundary","usePagesReactDevOverlay","Colors","ErrorOverlay","DevToolsIndicator","useErrorHook","ReactDevOverlay","children","isMounted","state","onComponentError","hasRuntimeErrors","hasBuildError","readyErrors","totalErrorCount","isAppDir","isErrorOverlayOpen","setIsErrorOverlayOpen","onError","errorCount"],"mappings":";AAAA,YAAYA,WAAW,QAAO;AAE9B,SAASC,QAAQ,QAAQ,QAAO;AAChC,SAASC,YAAY,QAAQ,uCAAsC;AACnE,SAASC,IAAI,QAAQ,0BAAyB;AAC9C,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,QAAQ,QAAQ,+BAA8B;AAEvD,SAASC,uBAAuB,QAAQ,mBAAkB;AAC1D,SAASC,uBAAuB,QAAQ,oBAAmB;AAC3D,SAASC,MAAM,QAAQ,4BAA2B;AAClD,SAASC,YAAY,QAAQ,4DAA2D;AACxF,SAASC,iBAAiB,QAAQ,wEAAuE;AACzG,SAASC,YAAY,QAAQ,qDAAoD;AAQjF,eAAe,SAASC,gBAAgB,KAAkC;IAAlC,IAAA,EAAEC,QAAQ,EAAwB,GAAlC;IACtC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLC,gBAAgB,EAChBC,gBAAgB,EAChBC,aAAa,EACd,GAAGX;IAEJ,MAAM,EAAEY,WAAW,EAAEC,eAAe,EAAE,GAAGT,aAAa;QACpDI;QACAM,UAAU;IACZ;IAEA,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGtB,SAAS;IAE7D,qBACE;;0BACE,KAACK;gBAAwBQ,WAAWA;gBAAWU,SAASR;0BACrDH,mBAAAA,WAAY;;YAGdC,2BACC,MAACZ;;kCACC,KAACG;kCACD,KAACF;kCACD,KAACK;kCACD,KAACJ;kCAED,KAACM;wBACCK,OAAOA;wBACPU,YAAYL;wBACZG,uBAAuBA;;oBAGvBN,CAAAA,oBAAoBC,aAAY,mBAChC,KAACT;wBACCM,OAAOA;wBACPI,aAAaA;wBACbG,oBAAoBA;wBACpBC,uBAAuBA;;;;;;AAOrC"}

package/dist/esm/client/components/react-dev-overlay/internal/styles/Base.js

@@ -1,7 +1,8 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n        :host {\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono',\n            Menlo, Courier, monospace;\n          --font-stack-sans: -apple-system, 'Source Sans Pro', sans-serif;\n\n          --color-ansi-selection: rgba(95, 126, 151, 0.48);\n          --color-ansi-bg: #111111;\n          --color-ansi-fg: #cccccc;\n\n          --color-ansi-white: #777777;\n          --color-ansi-black: #141414;\n          --color-ansi-blue: #00aaff;\n          --color-ansi-cyan: #88ddff;\n          --color-ansi-green: #98ec65;\n          --color-ansi-magenta: #aa88ff;\n          --color-ansi-red: #ff5555;\n          --color-ansi-yellow: #ffcc33;\n          --color-ansi-bright-white: #ffffff;\n          --color-ansi-bright-black: #777777;\n          --color-ansi-bright-blue: #33bbff;\n          --color-ansi-bright-cyan: #bbecff;\n          --color-ansi-bright-green: #b6f292;\n          --color-ansi-bright-magenta: #cebbff;\n          --color-ansi-bright-red: #ff8888;\n          --color-ansi-bright-yellow: #ffd966;\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      "
+        "\n        :host {\n          ",
+        "\n\n          --size-gap-half: 4px;\n          --size-gap: 8px;\n          --size-gap-double: 16px;\n          --size-gap-triple: 24px;\n          --size-gap-quad: 32px;\n\n          --size-font-small: 14px;\n          --size-font: 16px;\n          --size-font-big: 20px;\n          --size-font-bigger: 24px;\n\n          --color-background: white;\n          --color-font: #757575;\n          --color-backdrop: rgba(17, 17, 17, 0.2);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-h6: #222;\n          --color-stack-headline: #666;\n          --color-stack-subline: #999;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --color-text-color-red-1: #ff5555;\n          --color-text-background-red-1: #fff9f9;\n\n          --font-stack-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono',\n            Menlo, Courier, monospace;\n          --font-stack-sans: -apple-system, 'Source Sans Pro', sans-serif;\n\n          --color-ansi-selection: rgba(95, 126, 151, 0.48);\n          --color-ansi-bg: #111111;\n          --color-ansi-fg: #cccccc;\n\n          --color-ansi-white: #777777;\n          --color-ansi-black: #141414;\n          --color-ansi-blue: #00aaff;\n          --color-ansi-cyan: #88ddff;\n          --color-ansi-green: #98ec65;\n          --color-ansi-magenta: #aa88ff;\n          --color-ansi-red: #ff5555;\n          --color-ansi-yellow: #ffcc33;\n          --color-ansi-bright-white: #ffffff;\n          --color-ansi-bright-black: #777777;\n          --color-ansi-bright-blue: #33bbff;\n          --color-ansi-bright-cyan: #bbecff;\n          --color-ansi-bright-green: #b6f292;\n          --color-ansi-bright-magenta: #cebbff;\n          --color-ansi-bright-red: #ff8888;\n          --color-ansi-bright-yellow: #ffd966;\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host {\n            --color-background: rgb(28, 28, 30);\n            --color-font: white;\n            --color-backdrop: rgb(44, 44, 46);\n            --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n            --color-title-color: #fafafa;\n            --color-stack-h6: rgb(200, 200, 204);\n            --color-stack-headline: rgb(99, 99, 102);\n            --color-stack-notes: #a9a9a9;\n            --color-stack-subline: rgb(121, 121, 121);\n\n            --color-accents-3: rgb(118, 118, 118);\n\n            --color-text-background-red-1: #2a1e1e;\n          }\n        }\n\n        .mono {\n          font-family: var(--font-stack-monospace);\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: var(--size-gap);\n          font-weight: 500;\n          line-height: 1.5;\n        }\n      "
     ]);
     _templateObject = function() {
         return data;
@@ -13,7 +14,12 @@ import * as React from 'react';
 import { noop as css } from '../helpers/noop-template';
 export function Base() {
     return /*#__PURE__*/ _jsx("style", {
-        children: css(_templateObject())
+        children: css(_templateObject(), // Although the style applied to the shadow host is isolated,
+        // the element that attached the shadow host (i.e. `nextjs-portal`)
+        // is still affected by the parent's style (e.g. `body`). This may
+        // occur style conflicts like `display: flex`, with other children
+        // elements therefore give the shadow host an absolute position.
+        'position: absolute;')
     });
 }