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

package/dist/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":["Errors","styles","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","isUnhandledConsoleOrRejection","unhandledErrorType","getUnhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","HotlinkedText","message","matcher","errors","readyErrors","debugInfo","versionInfo","isTurbopack","onClose","activeError","useEffect","handleKeyDown","event","key","document","addEventListener","removeEventListener","isLoading","useMemo","length","Boolean","activeIdx","setActiveIndex","useState","Overlay","isServerError","includes","getErrorSource","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","getHydrationWarningType","replace","errorCode","extractNextErrorCode","footerMessage","undefined","ErrorOverlayLayout","errorType","errorMessage","div","className","p","id","componentStackFrames","reactOutputComponentDiff","PseudoHtmlDiff","hydrationMismatchType","firstContent","secondContent","RuntimeError","toString","css"],"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":["Errors","styles","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","isUnhandledConsoleOrRejection","unhandledErrorType","getUnhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","HotlinkedText","message","matcher","readyErrors","debugInfo","versionInfo","isTurbopack","onClose","activeError","useEffect","handleKeyDown","event","key","document","addEventListener","removeEventListener","isLoading","useMemo","length","activeIdx","setActiveIndex","useState","Overlay","isServerError","includes","getErrorSource","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","getHydrationWarningType","replace","errorCode","extractNextErrorCode","footerMessage","undefined","ErrorOverlayLayout","errorType","errorMessage","div","className","p","id","componentStackFrames","reactOutputComponentDiff","PseudoHtmlDiff","hydrationMismatchType","firstContent","secondContent","RuntimeError","toString","css"],"mappings":"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"}

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

@@ -34,7 +34,6 @@ _export(exports, {
 });
 const _errors = require("./errors");
 const _withshadowportal = require("../storybook/with-shadow-portal");
-const _shared = require("../../../shared");
 const meta = {
     component: _errors.Errors,
     parameters: {
@@ -45,86 +44,101 @@ const meta = {
     ]
 };
 const _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: _shared.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: _shared.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: _shared.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: _shared.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')
+            }
+        ]
     }
 ];
 const Default = {
     args: {
-        errors,
         readyErrors,
         versionInfo: {
             installed: '15.0.0',
             staleness: 'fresh'
         },
-        hasStaticIndicator: true,
-        isTurbopack: true,
         debugInfo: {
             devtoolsFrontendUrl: undefined
         },
+        isTurbopack: false,
         onClose: ()=>{}
     }
 };
@@ -141,40 +155,51 @@ const Minimized = {
 };
 const WithHydrationWarning = {
     args: {
-        errors: [
+        readyErrors: [
             {
                 id: 1,
-                event: {
-                    type: _shared.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/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":["Default","Minimized","Turbopack","WithHydrationWarning","meta","component","Errors","parameters","layout","decorators","withShadowPortal","errors","id","event","type","ACTION_UNHANDLED_ERROR","reason","Object","assign","Error","__NEXT_ERROR_CODE","componentStackFrames","file","lineNumber","column","canOpenInEditor","frames","methodName","arguments","readyErrors","runtime","error","args","versionInfo","installed","staleness","hasStaticIndicator","isTurbopack","debugInfo","devtoolsFrontendUrl","undefined","onClose","details","warning","reactOutputComponentDiff","columnNumber"],"mappings":";;;;;;;;;;;;;;;;;;IAwFaA,OAAO;eAAPA;;IAsBAC,SAAS;eAATA;;IAPAC,SAAS;eAATA;;IAaAC,oBAAoB;eAApBA;;IApGb,OAAmB;eAAnB;;;wBAZuB;kCACU;wBACM;AAEvC,MAAMC,OAA4B;IAChCC,WAAWC,cAAM;IACjBC,YAAY;QACVC,QAAQ;IACV;IACAC,YAAY;QAACC,kCAAgB;KAAC;AAChC;MAEA,WAAeN;AAGf,MAAMO,SAAgC;IACpC;QACEC,IAAI;QACJC,OAAO;YACLC,MAAMC,8BAAsB;YAC5BC,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,wBAAwB;gBACtDC,mBAAmB;YACrB;YACAC,sBAAsB;gBACpB;oBACEC,MAAM;oBACNjB,WAAW;oBACXkB,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;QACEZ,IAAI;QACJC,OAAO;YACLC,MAAMC,8BAAsB;YAC5BC,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,yBAAyB;gBACvDC,mBAAmB;YACrB;YACAM,QAAQ,EAAE;QACZ;IACF;IACA;QACEd,IAAI;QACJC,OAAO;YACLC,MAAMC,8BAAsB;YAC5BC,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,wBAAwB;gBACtDC,mBAAmB;YACrB;YACAM,QAAQ,EAAE;QACZ;IACF;IACA;QACEd,IAAI;QACJC,OAAO;YACLC,MAAMC,8BAAsB;YAC5BC,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,yBAAyB;gBACvDC,mBAAmB;YACrB;YACAM,QAAQ,EAAE;QACZ;IACF;CACD;AAED,MAAMG,cAAmC;IACvC;QACEjB,IAAI;QACJkB,SAAS;QACTC,OAAOpB,MAAM,CAAC,EAAE,CAACE,KAAK,CAACG,MAAM;QAC7BU,QAAQ,EAAE;IACZ;CACD;AAEM,MAAM1B,UAAiB;IAC5BgC,MAAM;QACJrB;QACAkB;QACAI,aAAa;YACXC,WAAW;YACXC,WAAW;QACb;QACAC,oBAAoB;QACpBC,aAAa;QACbC,WAAW;YAAEC,qBAAqBC;QAAU;QAC5CC,SAAS,KAAO;IAClB;AACF;AAEO,MAAMvC,YAAmB;IAC9B8B,MAAM;QACJ,GAAGhC,QAAQgC,IAAI;QACfK,aAAa;IACf;AACF;AAEO,MAAMpC,YAAmB;IAC9B+B,MAAM;QACJ,GAAGhC,QAAQgC,IAAI;IACjB;AACF;AAEO,MAAM7B,uBAA8B;IACzC6B,MAAM;QACJrB,QAAQ;YACN;gBACEC,IAAI;gBACJC,OAAO;oBACLC,MAAMC,8BAAsB;oBAC5BC,QAAQC,OAAOC,MAAM,CAAC,IAAIC,MAAM,oBAAoB;wBAClDuB,SAAS;4BACPC,SAAS;gCACP;gCACA;gCACA;6BACD;4BACDC,0BAA2B;wBAK7B;wBACAvB,sBAAsB;4BACpB;gCACEhB,WAAW;gCACXiB,MAAM;gCACNC,YAAY;gCACZsB,cAAc;4BAChB;4BACA;gCACExC,WAAW;gCACXiB,MAAM;gCACNC,YAAY;gCACZsB,cAAc;4BAChB;yBACD;oBACH;oBACAnB,QAAQ,EAAE;gBACZ;YACF;SACD;QACDG,aAAa,EAAE;QACfS,WAAW;YAAEC,qBAAqBC;QAAU;QAC5CC,SAAS,KAAO;IAClB;AACF"}
+{"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":["Default","Minimized","Turbopack","WithHydrationWarning","meta","component","Errors","parameters","layout","decorators","withShadowPortal","originalCodeFrame","message","sourceStackFrame","file","methodName","arguments","lineNumber","column","originalStackFrame","ignored","readyErrors","id","runtime","error","Error","frames","reason","external","args","versionInfo","installed","staleness","debugInfo","devtoolsFrontendUrl","undefined","isTurbopack","onClose","Object","assign","details","warning","reactOutputComponentDiff","componentStackFrames","columnNumber"],"mappings":"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"}

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

@@ -1,12 +1,13 @@
 import type { ReadyRuntimeError } from '../../helpers/get-error-by-type';
-import type { UnhandledErrorAction, UnhandledRejectionAction } from '../../../../shared';
+import type { OverlayState, UnhandledErrorAction, UnhandledRejectionAction } from '../../../../shared';
 export type SupportedErrorEvent = {
     id: number;
     event: UnhandledErrorAction | UnhandledRejectionAction;
 };
-export declare function useErrorHook({ errors, isAppDir, }: {
-    errors: SupportedErrorEvent[];
+export declare function useErrorHook({ state, isAppDir, }: {
+    state: OverlayState;
     isAppDir: boolean;
 }): {
     readyErrors: ReadyRuntimeError[];
+    totalErrorCount: number;
 };

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

@@ -27,7 +27,8 @@ function getErrorSignature(ev) {
     return '';
 }
 function useErrorHook(param) {
-    let { errors, isAppDir } = param;
+    let { state, isAppDir } = param;
+    const { errors, rootLayoutMissingTags, buildError } = state;
     const [lookups, setLookups] = (0, _react.useState)({});
     const [readyErrors, nextError] = (0, _react.useMemo)(()=>{
         let ready = [];
@@ -84,7 +85,12 @@ 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/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":["useErrorHook","getErrorSignature","ev","event","type","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","reason","name","message","stack","_","errors","isAppDir","lookups","setLookups","useState","readyErrors","nextError","useMemo","ready","next","idx","length","e","id","push","prev","useEffect","mounted","getErrorByType","then","resolved","m"],"mappings":";;;;+BAkCgBA;;;eAAAA;;;uBA5B6B;gCACd;wBAIxB;AAOP,SAASC,kBAAkBC,EAAuB;IAChD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAClB,OAAQC,MAAMC,IAAI;QAChB,KAAKC,8BAAsB;QAC3B,KAAKC,kCAA0B;YAAE;gBAC/B,OAAO,AAAGH,MAAMI,MAAM,CAACC,IAAI,GAAC,OAAIL,MAAMI,MAAM,CAACE,OAAO,GAAC,OAAIN,MAAMI,MAAM,CAACG,KAAK;YAC7E;QACA;YAAS,CACT;IACF;IAEA,6DAA6D;IAC7D,MAAMC,IAAWR;IACjB,OAAO;AACT;AAEO,SAASH,aAAa,KAM5B;IAN4B,IAAA,EAC3BY,MAAM,EACNC,QAAQ,EAIT,GAN4B;IAO3B,MAAM,CAACC,SAASC,WAAW,GAAGC,IAAAA,eAAQ,EAEnC,CAAC;IACJ,MAAM,CAACC,aAAaC,UAAU,GAAGC,IAAAA,cAAO,EAEtC;QACA,IAAIC,QAA6B,EAAE;QACnC,IAAIC,OAAmC;QAEvC,6DAA6D;QAC7D,IAAK,IAAIC,MAAM,GAAGA,MAAMV,OAAOW,MAAM,EAAE,EAAED,IAAK;YAC5C,MAAME,IAAIZ,MAAM,CAACU,IAAI;YACrB,MAAM,EAAEG,EAAE,EAAE,GAAGD;YACf,IAAIC,MAAMX,SAAS;gBACjBM,MAAMM,IAAI,CAACZ,OAAO,CAACW,GAAG;gBACtB;YACF;YAEA,6BAA6B;YAC7B,IAAIH,MAAM,GAAG;gBACX,MAAMK,OAAOf,MAAM,CAACU,MAAM,EAAE;gBAC5B,IAAIrB,kBAAkB0B,UAAU1B,kBAAkBuB,IAAI;oBACpD;gBACF;YACF;YAEAH,OAAOG;YACP;QACF;QAEA,OAAO;YAACJ;YAAOC;SAAK;IACtB,GAAG;QAACT;QAAQE;KAAQ;IAEpBc,IAAAA,gBAAS,EAAC;QACR,IAAIV,aAAa,MAAM;YACrB;QACF;QACA,IAAIW,UAAU;QAEdC,IAAAA,8BAAc,EAACZ,WAAWL,UAAUkB,IAAI,CACtC,CAACC;YACC,sEAAsE;YACtE,uEAAuE;YACvE,kBAAkB;YAClB,IAAIH,SAAS;gBACXd,WAAW,CAACkB,IAAO,CAAA;wBAAE,GAAGA,CAAC;wBAAE,CAACD,SAASP,EAAE,CAAC,EAAEO;oBAAS,CAAA;YACrD;QACF,GACA;QACE,yCAAyC;QAC3C;QAGF,OAAO;YACLH,UAAU;QACZ;IACF,GAAG;QAACX;QAAWL;KAAS;IAExB,OAAO;QACLI;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":["useErrorHook","getErrorSignature","ev","event","type","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","reason","name","message","stack","_","state","isAppDir","errors","rootLayoutMissingTags","buildError","lookups","setLookups","useState","readyErrors","nextError","useMemo","ready","next","idx","length","e","id","push","prev","useEffect","mounted","getErrorByType","then","resolved","m","totalErrorCount"],"mappings":";;;;+BAmCgBA;;;eAAAA;;;uBA5B6B;gCACd;wBAIxB;AAOP,SAASC,kBAAkBC,EAAuB;IAChD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAClB,OAAQC,MAAMC,IAAI;QAChB,KAAKC,8BAAsB;QAC3B,KAAKC,kCAA0B;YAAE;gBAC/B,OAAO,AAAGH,MAAMI,MAAM,CAACC,IAAI,GAAC,OAAIL,MAAMI,MAAM,CAACE,OAAO,GAAC,OAAIN,MAAMI,MAAM,CAACG,KAAK;YAC7E;QACA;YAAS,CACT;IACF;IAEA,6DAA6D;IAC7D,MAAMC,IAAWR;IACjB,OAAO;AACT;AAEO,SAASH,aAAa,KAM5B;IAN4B,IAAA,EAC3BY,KAAK,EACLC,QAAQ,EAIT,GAN4B;IAO3B,MAAM,EAAEC,MAAM,EAAEC,qBAAqB,EAAEC,UAAU,EAAE,GAAGJ;IAEtD,MAAM,CAACK,SAASC,WAAW,GAAGC,IAAAA,eAAQ,EAEnC,CAAC;IACJ,MAAM,CAACC,aAAaC,UAAU,GAAGC,IAAAA,cAAO,EAEtC;QACA,IAAIC,QAA6B,EAAE;QACnC,IAAIC,OAAmC;QAEvC,6DAA6D;QAC7D,IAAK,IAAIC,MAAM,GAAGA,MAAMX,OAAOY,MAAM,EAAE,EAAED,IAAK;YAC5C,MAAME,IAAIb,MAAM,CAACW,IAAI;YACrB,MAAM,EAAEG,EAAE,EAAE,GAAGD;YACf,IAAIC,MAAMX,SAAS;gBACjBM,MAAMM,IAAI,CAACZ,OAAO,CAACW,GAAG;gBACtB;YACF;YAEA,6BAA6B;YAC7B,IAAIH,MAAM,GAAG;gBACX,MAAMK,OAAOhB,MAAM,CAACW,MAAM,EAAE;gBAC5B,IAAIxB,kBAAkB6B,UAAU7B,kBAAkB0B,IAAI;oBACpD;gBACF;YACF;YAEAH,OAAOG;YACP;QACF;QAEA,OAAO;YAACJ;YAAOC;SAAK;IACtB,GAAG;QAACV;QAAQG;KAAQ;IAEpBc,IAAAA,gBAAS,EAAC;QACR,IAAIV,aAAa,MAAM;YACrB;QACF;QACA,IAAIW,UAAU;QAEdC,IAAAA,8BAAc,EAACZ,WAAWR,UAAUqB,IAAI,CACtC,CAACC;YACC,sEAAsE;YACtE,uEAAuE;YACvE,kBAAkB;YAClB,IAAIH,SAAS;gBACXd,WAAW,CAACkB,IAAO,CAAA;wBAAE,GAAGA,CAAC;wBAAE,CAACD,SAASP,EAAE,CAAC,EAAEO;oBAAS,CAAA;YACrD;QACF,GACA;QACE,yCAAyC;QAC3C;QAGF,OAAO;YACLH,UAAU;QACZ;IACF,GAAG;QAACX;QAAWR;KAAS;IAExB,OAAO;QACLO;QACA,wDAAwD;QACxD,uDAAuD;QACvD,sDAAsD;QACtD,uDAAuD;QACvDiB,iBAAiBtB,CAAAA,yCAAAA,sBAAuBW,MAAM,IAC1CX,sBAAsBW,MAAM,GAC5B,CAAC,CAACV,aACA,IACAF,OAAOY,MAAM;IACrB;AACF"}

package/dist/client/components/react-dev-overlay/_experimental/internal/helpers/merge-refs.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+/**
+ * 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<T>(...inputRefs: (React.Ref<T> | undefined)[]): React.Ref<T> | React.RefCallback<T>;

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, /**
+ * 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
+ */ "default", {
+    enumerable: true,
+    get: function() {
+        return mergeRefs;
+    }
+});
+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;
+            }
+        }
+    };
+}
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=merge-refs.js.map

package/dist/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":";;;;+BAEA;;;;;;;;;;;CAWC,GACD;;;eAAwBA;;;AAAT,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/client/components/react-dev-overlay/_experimental/internal/styles/base.js

@@ -15,7 +15,8 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _nooptemplate = require("../helpers/noop-template");
 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;
@@ -24,7 +25,12 @@ function _templateObject() {
 }
 function Base() {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-        children: (0, _nooptemplate.noop)(_templateObject())
+        children: (0, _nooptemplate.noop)(_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/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":["Base","style","css"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;;;iEAHO;8BACK;;;;;;;;;;AAErB,SAASA;IACd,qBACE,qBAACC;sBACEC,kBAAG;;AAoIV"}
+{"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":["Base","style","css"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;;;iEAHO;8BACK;;;;;;;;;;;AAErB,SAASA;IACd,qBACE,qBAACC;sBACEC,kBAAG,qBAKE,6DAA6D;QAC7D,mEAAmE;QACnE,kEAAkE;QAClE,kEAAkE;QAClE,gEAAgE;QAChE;;AAqIZ"}

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

@@ -24,8 +24,8 @@ const _useerrorhook = require("../internal/container/runtime-error/use-error-hoo
 function ReactDevOverlay(param) {
     let { children } = param;
     const { isMounted, state, onComponentError, hasRuntimeErrors, hasBuildError } = (0, _hooks.usePagesReactDevOverlay)();
-    const { readyErrors } = (0, _useerrorhook.useErrorHook)({
-        errors: state.errors,
+    const { readyErrors, totalErrorCount } = (0, _useerrorhook.useErrorHook)({
+        state,
         isAppDir: false
     });
     const [isErrorOverlayOpen, setIsErrorOverlayOpen] = (0, _react.useState)(true);
@@ -44,7 +44,7 @@ function ReactDevOverlay(param) {
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_componentstyles.ComponentStyles, {}),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_devtoolsindicator.DevToolsIndicator, {
                         state: state,
-                        readyErrorsLength: readyErrors.length,
+                        errorCount: totalErrorCount,
                         setIsErrorOverlayOpen: setIsErrorOverlayOpen
                     }),
                     (hasRuntimeErrors || hasBuildError) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlay.ErrorOverlay, {