next 15.3.0-canary.4 → 15.3.0-canary.6

package/dist/build/swc/index.js

@@ -119,7 +119,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const nextVersion = "15.3.0-canary.4";
+const nextVersion = "15.3.0-canary.6";
 const ArchName = (0, _os.arch)();
 const PlatformName = (0, _os.platform)();
 function infoLog(...args) {

package/dist/build/webpack-config.js

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

package/dist/cli/next-build.d.ts

@@ -8,7 +8,7 @@ export type NextBuildOptions = {
     experimentalDebugMemoryUsage: boolean;
     experimentalAppOnly?: boolean;
     experimentalTurbo?: boolean;
-    experimentalBuildMode: 'default' | 'compile' | 'generate';
+    experimentalBuildMode: 'default' | 'compile' | 'generate' | 'generate-env';
     experimentalUploadTrace?: string;
 };
 declare const nextBuild: (options: NextBuildOptions, directory?: string) => Promise<void>;

package/dist/cli/next-build.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/cli/next-build.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport '../server/lib/cpu-profile'\nimport { existsSync } from 'fs'\nimport { italic } from '../lib/picocolors'\nimport build from '../build'\nimport { warn } from '../build/output/log'\nimport { printAndExit } from '../server/lib/utils'\nimport isError from '../lib/is-error'\nimport { getProjectDir } from '../lib/get-project-dir'\nimport { enableMemoryDebuggingMode } from '../lib/memory/startup'\nimport { disableMemoryDebuggingMode } from '../lib/memory/shutdown'\n\nexport type NextBuildOptions = {\n  debug?: boolean\n  profile?: boolean\n  lint: boolean\n  mangling: boolean\n  experimentalDebugMemoryUsage: boolean\n  experimentalAppOnly?: boolean\n  experimentalTurbo?: boolean\n  experimentalBuildMode: 'default' | 'compile' | 'generate'\n  experimentalUploadTrace?: string\n}\n\nconst nextBuild = (options: NextBuildOptions, directory?: string) => {\n  process.on('SIGTERM', () => process.exit(143))\n  process.on('SIGINT', () => process.exit(130))\n\n  const {\n    debug,\n    experimentalDebugMemoryUsage,\n    profile,\n    lint,\n    mangling,\n    experimentalAppOnly,\n    experimentalTurbo,\n    experimentalBuildMode,\n    experimentalUploadTrace,\n  } = options\n\n  let traceUploadUrl: string | undefined\n  if (experimentalUploadTrace && !process.env.NEXT_TRACE_UPLOAD_DISABLED) {\n    traceUploadUrl = experimentalUploadTrace\n  }\n\n  if (!lint) {\n    warn('Linting is disabled.')\n  }\n\n  if (!mangling) {\n    warn(\n      'Mangling is disabled. Note: This may affect performance and should only be used for debugging purposes.'\n    )\n  }\n\n  if (profile) {\n    warn(\n      `Profiling is enabled. ${italic('Note: This may affect performance.')}`\n    )\n  }\n\n  if (experimentalDebugMemoryUsage) {\n    process.env.EXPERIMENTAL_DEBUG_MEMORY_USAGE = '1'\n    enableMemoryDebuggingMode()\n  }\n\n  const dir = getProjectDir(directory)\n\n  if (!existsSync(dir)) {\n    printAndExit(`> No such directory exists as the project root: ${dir}`)\n  }\n\n  if (experimentalTurbo) {\n    process.env.TURBOPACK = '1'\n  }\n\n  return build(\n    dir,\n    profile,\n    debug || Boolean(process.env.NEXT_DEBUG_BUILD),\n    lint,\n    !mangling,\n    experimentalAppOnly,\n    !!process.env.TURBOPACK,\n    experimentalBuildMode,\n    traceUploadUrl\n  )\n    .catch((err) => {\n      if (experimentalDebugMemoryUsage) {\n        disableMemoryDebuggingMode()\n      }\n      console.error('')\n      if (\n        isError(err) &&\n        (err.code === 'INVALID_RESOLVE_ALIAS' ||\n          err.code === 'WEBPACK_ERRORS' ||\n          err.code === 'BUILD_OPTIMIZATION_FAILED' ||\n          err.code === 'NEXT_EXPORT_ERROR' ||\n          err.code === 'NEXT_STATIC_GEN_BAILOUT' ||\n          err.code === 'EDGE_RUNTIME_UNSUPPORTED_API')\n      ) {\n        printAndExit(`> ${err.message}`)\n      } else {\n        console.error('> Build error occurred')\n        printAndExit(err)\n      }\n    })\n    .finally(() => {\n      if (experimentalDebugMemoryUsage) {\n        disableMemoryDebuggingMode()\n      }\n    })\n}\n\nexport { nextBuild }\n"],"names":["nextBuild","options","directory","process","on","exit","debug","experimentalDebugMemoryUsage","profile","lint","mangling","experimentalAppOnly","experimentalTurbo","experimentalBuildMode","experimentalUploadTrace","traceUploadUrl","env","NEXT_TRACE_UPLOAD_DISABLED","warn","italic","EXPERIMENTAL_DEBUG_MEMORY_USAGE","enableMemoryDebuggingMode","dir","getProjectDir","existsSync","printAndExit","TURBOPACK","build","Boolean","NEXT_DEBUG_BUILD","catch","err","disableMemoryDebuggingMode","console","error","isError","code","message","finally"],"mappings":";;;;;+BAmHSA;;;eAAAA;;;QAjHF;oBACoB;4BACJ;8DACL;qBACG;uBACQ;gEACT;+BACU;yBACY;0BACC;;;;;;AAc3C,MAAMA,YAAY,CAACC,SAA2BC;IAC5CC,QAAQC,EAAE,CAAC,WAAW,IAAMD,QAAQE,IAAI,CAAC;IACzCF,QAAQC,EAAE,CAAC,UAAU,IAAMD,QAAQE,IAAI,CAAC;IAExC,MAAM,EACJC,KAAK,EACLC,4BAA4B,EAC5BC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,mBAAmB,EACnBC,iBAAiB,EACjBC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGb;IAEJ,IAAIc;IACJ,IAAID,2BAA2B,CAACX,QAAQa,GAAG,CAACC,0BAA0B,EAAE;QACtEF,iBAAiBD;IACnB;IAEA,IAAI,CAACL,MAAM;QACTS,IAAAA,SAAI,EAAC;IACP;IAEA,IAAI,CAACR,UAAU;QACbQ,IAAAA,SAAI,EACF;IAEJ;IAEA,IAAIV,SAAS;QACXU,IAAAA,SAAI,EACF,CAAC,sBAAsB,EAAEC,IAAAA,kBAAM,EAAC,uCAAuC;IAE3E;IAEA,IAAIZ,8BAA8B;QAChCJ,QAAQa,GAAG,CAACI,+BAA+B,GAAG;QAC9CC,IAAAA,kCAAyB;IAC3B;IAEA,MAAMC,MAAMC,IAAAA,4BAAa,EAACrB;IAE1B,IAAI,CAACsB,IAAAA,cAAU,EAACF,MAAM;QACpBG,IAAAA,mBAAY,EAAC,CAAC,gDAAgD,EAAEH,KAAK;IACvE;IAEA,IAAIV,mBAAmB;QACrBT,QAAQa,GAAG,CAACU,SAAS,GAAG;IAC1B;IAEA,OAAOC,IAAAA,cAAK,EACVL,KACAd,SACAF,SAASsB,QAAQzB,QAAQa,GAAG,CAACa,gBAAgB,GAC7CpB,MACA,CAACC,UACDC,qBACA,CAAC,CAACR,QAAQa,GAAG,CAACU,SAAS,EACvBb,uBACAE,gBAECe,KAAK,CAAC,CAACC;QACN,IAAIxB,8BAA8B;YAChCyB,IAAAA,oCAA0B;QAC5B;QACAC,QAAQC,KAAK,CAAC;QACd,IACEC,IAAAA,gBAAO,EAACJ,QACPA,CAAAA,IAAIK,IAAI,KAAK,2BACZL,IAAIK,IAAI,KAAK,oBACbL,IAAIK,IAAI,KAAK,+BACbL,IAAIK,IAAI,KAAK,uBACbL,IAAIK,IAAI,KAAK,6BACbL,IAAIK,IAAI,KAAK,8BAA6B,GAC5C;YACAX,IAAAA,mBAAY,EAAC,CAAC,EAAE,EAAEM,IAAIM,OAAO,EAAE;QACjC,OAAO;YACLJ,QAAQC,KAAK,CAAC;YACdT,IAAAA,mBAAY,EAACM;QACf;IACF,GACCO,OAAO,CAAC;QACP,IAAI/B,8BAA8B;YAChCyB,IAAAA,oCAA0B;QAC5B;IACF;AACJ"}
+{"version":3,"sources":["../../src/cli/next-build.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport '../server/lib/cpu-profile'\nimport { existsSync } from 'fs'\nimport { italic } from '../lib/picocolors'\nimport build from '../build'\nimport { warn } from '../build/output/log'\nimport { printAndExit } from '../server/lib/utils'\nimport isError from '../lib/is-error'\nimport { getProjectDir } from '../lib/get-project-dir'\nimport { enableMemoryDebuggingMode } from '../lib/memory/startup'\nimport { disableMemoryDebuggingMode } from '../lib/memory/shutdown'\n\nexport type NextBuildOptions = {\n  debug?: boolean\n  profile?: boolean\n  lint: boolean\n  mangling: boolean\n  experimentalDebugMemoryUsage: boolean\n  experimentalAppOnly?: boolean\n  experimentalTurbo?: boolean\n  experimentalBuildMode: 'default' | 'compile' | 'generate' | 'generate-env'\n  experimentalUploadTrace?: string\n}\n\nconst nextBuild = (options: NextBuildOptions, directory?: string) => {\n  process.on('SIGTERM', () => process.exit(143))\n  process.on('SIGINT', () => process.exit(130))\n\n  const {\n    debug,\n    experimentalDebugMemoryUsage,\n    profile,\n    lint,\n    mangling,\n    experimentalAppOnly,\n    experimentalTurbo,\n    experimentalBuildMode,\n    experimentalUploadTrace,\n  } = options\n\n  let traceUploadUrl: string | undefined\n  if (experimentalUploadTrace && !process.env.NEXT_TRACE_UPLOAD_DISABLED) {\n    traceUploadUrl = experimentalUploadTrace\n  }\n\n  if (!lint) {\n    warn('Linting is disabled.')\n  }\n\n  if (!mangling) {\n    warn(\n      'Mangling is disabled. Note: This may affect performance and should only be used for debugging purposes.'\n    )\n  }\n\n  if (profile) {\n    warn(\n      `Profiling is enabled. ${italic('Note: This may affect performance.')}`\n    )\n  }\n\n  if (experimentalDebugMemoryUsage) {\n    process.env.EXPERIMENTAL_DEBUG_MEMORY_USAGE = '1'\n    enableMemoryDebuggingMode()\n  }\n\n  const dir = getProjectDir(directory)\n\n  if (!existsSync(dir)) {\n    printAndExit(`> No such directory exists as the project root: ${dir}`)\n  }\n\n  if (experimentalTurbo) {\n    process.env.TURBOPACK = '1'\n  }\n\n  return build(\n    dir,\n    profile,\n    debug || Boolean(process.env.NEXT_DEBUG_BUILD),\n    lint,\n    !mangling,\n    experimentalAppOnly,\n    !!process.env.TURBOPACK,\n    experimentalBuildMode,\n    traceUploadUrl\n  )\n    .catch((err) => {\n      if (experimentalDebugMemoryUsage) {\n        disableMemoryDebuggingMode()\n      }\n      console.error('')\n      if (\n        isError(err) &&\n        (err.code === 'INVALID_RESOLVE_ALIAS' ||\n          err.code === 'WEBPACK_ERRORS' ||\n          err.code === 'BUILD_OPTIMIZATION_FAILED' ||\n          err.code === 'NEXT_EXPORT_ERROR' ||\n          err.code === 'NEXT_STATIC_GEN_BAILOUT' ||\n          err.code === 'EDGE_RUNTIME_UNSUPPORTED_API')\n      ) {\n        printAndExit(`> ${err.message}`)\n      } else {\n        console.error('> Build error occurred')\n        printAndExit(err)\n      }\n    })\n    .finally(() => {\n      if (experimentalDebugMemoryUsage) {\n        disableMemoryDebuggingMode()\n      }\n    })\n}\n\nexport { nextBuild }\n"],"names":["nextBuild","options","directory","process","on","exit","debug","experimentalDebugMemoryUsage","profile","lint","mangling","experimentalAppOnly","experimentalTurbo","experimentalBuildMode","experimentalUploadTrace","traceUploadUrl","env","NEXT_TRACE_UPLOAD_DISABLED","warn","italic","EXPERIMENTAL_DEBUG_MEMORY_USAGE","enableMemoryDebuggingMode","dir","getProjectDir","existsSync","printAndExit","TURBOPACK","build","Boolean","NEXT_DEBUG_BUILD","catch","err","disableMemoryDebuggingMode","console","error","isError","code","message","finally"],"mappings":";;;;;+BAmHSA;;;eAAAA;;;QAjHF;oBACoB;4BACJ;8DACL;qBACG;uBACQ;gEACT;+BACU;yBACY;0BACC;;;;;;AAc3C,MAAMA,YAAY,CAACC,SAA2BC;IAC5CC,QAAQC,EAAE,CAAC,WAAW,IAAMD,QAAQE,IAAI,CAAC;IACzCF,QAAQC,EAAE,CAAC,UAAU,IAAMD,QAAQE,IAAI,CAAC;IAExC,MAAM,EACJC,KAAK,EACLC,4BAA4B,EAC5BC,OAAO,EACPC,IAAI,EACJC,QAAQ,EACRC,mBAAmB,EACnBC,iBAAiB,EACjBC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGb;IAEJ,IAAIc;IACJ,IAAID,2BAA2B,CAACX,QAAQa,GAAG,CAACC,0BAA0B,EAAE;QACtEF,iBAAiBD;IACnB;IAEA,IAAI,CAACL,MAAM;QACTS,IAAAA,SAAI,EAAC;IACP;IAEA,IAAI,CAACR,UAAU;QACbQ,IAAAA,SAAI,EACF;IAEJ;IAEA,IAAIV,SAAS;QACXU,IAAAA,SAAI,EACF,CAAC,sBAAsB,EAAEC,IAAAA,kBAAM,EAAC,uCAAuC;IAE3E;IAEA,IAAIZ,8BAA8B;QAChCJ,QAAQa,GAAG,CAACI,+BAA+B,GAAG;QAC9CC,IAAAA,kCAAyB;IAC3B;IAEA,MAAMC,MAAMC,IAAAA,4BAAa,EAACrB;IAE1B,IAAI,CAACsB,IAAAA,cAAU,EAACF,MAAM;QACpBG,IAAAA,mBAAY,EAAC,CAAC,gDAAgD,EAAEH,KAAK;IACvE;IAEA,IAAIV,mBAAmB;QACrBT,QAAQa,GAAG,CAACU,SAAS,GAAG;IAC1B;IAEA,OAAOC,IAAAA,cAAK,EACVL,KACAd,SACAF,SAASsB,QAAQzB,QAAQa,GAAG,CAACa,gBAAgB,GAC7CpB,MACA,CAACC,UACDC,qBACA,CAAC,CAACR,QAAQa,GAAG,CAACU,SAAS,EACvBb,uBACAE,gBAECe,KAAK,CAAC,CAACC;QACN,IAAIxB,8BAA8B;YAChCyB,IAAAA,oCAA0B;QAC5B;QACAC,QAAQC,KAAK,CAAC;QACd,IACEC,IAAAA,gBAAO,EAACJ,QACPA,CAAAA,IAAIK,IAAI,KAAK,2BACZL,IAAIK,IAAI,KAAK,oBACbL,IAAIK,IAAI,KAAK,+BACbL,IAAIK,IAAI,KAAK,uBACbL,IAAIK,IAAI,KAAK,6BACbL,IAAIK,IAAI,KAAK,8BAA6B,GAC5C;YACAX,IAAAA,mBAAY,EAAC,CAAC,EAAE,EAAEM,IAAIM,OAAO,EAAE;QACjC,OAAO;YACLJ,QAAQC,KAAK,CAAC;YACdT,IAAAA,mBAAY,EAACM;QACf;IACF,GACCO,OAAO,CAAC;QACP,IAAI/B,8BAA8B;YAChCyB,IAAAA,oCAA0B;QAC5B;IACF;AACJ"}

package/dist/client/app-bootstrap.js

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

package/dist/client/components/react-dev-overlay/ui/components/code-frame/code-frame.d.ts

@@ -4,4 +4,4 @@ export type CodeFrameProps = {
     codeFrame: string;
 };
 export declare function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps): import("react/jsx-runtime").JSX.Element;
-export declare const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--size-16);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n";
+export declare const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    --code-frame-padding: 12px;\n    --code-frame-line-height: var(--size-16);\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--code-frame-line-height);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: var(--code-frame-padding);\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored=\"true\"] {\n    position: relative;\n\n    > span { \n      position: relative;\n      z-index: 1;\n    }\n\n    &::after {\n      content: \"\";\n      width: calc(100% + var(--code-frame-padding) * 2);\n      height: var(--code-frame-line-height);\n      left: calc(-1 * var(--code-frame-padding));\n      background: var(--color-red-200);\n      box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n      position: absolute;\n    }\n  }\n\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n";

package/dist/client/components/react-dev-overlay/ui/components/code-frame/code-frame.js

@@ -20,40 +20,21 @@ _export(exports, {
         return CodeFrame;
     }
 });
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 const _jsxruntime = require("react/jsx-runtime");
-const _anser = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/anser"));
-const _stripansi = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/strip-ansi"));
 const _react = require("react");
 const _hotlinkedtext = require("../hot-linked-text");
 const _stackframe = require("../../../utils/stack-frame");
 const _useopenineditor = require("../../utils/use-open-in-editor");
 const _external = require("../../icons/external");
 const _file = require("../../icons/file");
+const _parsecodeframe = require("./parse-code-frame");
 function CodeFrame(param) {
     let { stackFrame, codeFrame } = param;
     var _stackFrame_file;
-    // Strip leading spaces out of the code frame:
-    const formattedFrame = (0, _react.useMemo)(()=>{
-        const lines = codeFrame.split(/\r?\n/g);
-        // Find the minimum length of leading spaces after `|` in the code frame
-        const miniLeadingSpacesLength = lines.map((line)=>/^>? +\d+ +\| [ ]+/.exec((0, _stripansi.default)(line)) === null ? null : /^>? +\d+ +\| ( *)/.exec((0, _stripansi.default)(line))).filter(Boolean).map((v)=>v.pop()).reduce((c, n)=>isNaN(c) ? n.length : Math.min(c, n.length), NaN);
-        // When the minimum length of leading spaces is greater than 1, remove them
-        // from the code frame to help the indentation looks better when there's a lot leading spaces.
-        if (miniLeadingSpacesLength > 1) {
-            return lines.map((line, a)=>~(a = line.indexOf('|')) ? line.substring(0, a) + line.substring(a).replace("^\\ {" + miniLeadingSpacesLength + "}", '') : line).join('\n');
-        }
-        return lines.join('\n');
-    }, [
+    const formattedFrame = (0, _react.useMemo)(()=>(0, _parsecodeframe.formatCodeFrame)(codeFrame), [
         codeFrame
     ]);
-    const decoded = (0, _react.useMemo)(()=>{
-        return _anser.default.ansiToJson(formattedFrame, {
-            json: true,
-            use_classes: true,
-            remove_empty: true
-        });
-    }, [
+    const decodedLines = (0, _react.useMemo)(()=>(0, _parsecodeframe.groupCodeFrameLines)(formattedFrame), [
         formattedFrame
     ]);
     const open = (0, _useopenineditor.useOpenInEditor)({
@@ -106,24 +87,37 @@ function CodeFrame(param) {
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
                 className: "code-frame-pre",
-                children: decoded.map((entry, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        style: {
-                            color: entry.fg ? "var(--color-" + entry.fg + ")" : undefined,
-                            ...entry.decoration === 'bold' ? // having longer width than expected on Geist Mono font-weight
-                            // above 600, hence a temporary fix is to use 500 for bold.
-                            {
-                                fontWeight: 500
-                            } : entry.decoration === 'italic' ? {
-                                fontStyle: 'italic'
-                            } : undefined
-                        },
-                        children: entry.content
-                    }, "frame-" + index))
+                children: decodedLines.map((line, lineIndex)=>{
+                    const { lineNumber, isErroredLine } = (0, _parsecodeframe.parseLineNumberFromCodeFrameLine)(line, stackFrame);
+                    const lineNumberProps = {};
+                    if (lineNumber) {
+                        lineNumberProps['data-nextjs-codeframe-line'] = lineNumber;
+                    }
+                    if (isErroredLine) {
+                        lineNumberProps['data-nextjs-codeframe-line--errored'] = true;
+                    }
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        ...lineNumberProps,
+                        children: line.map((entry, entryIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                style: {
+                                    color: entry.fg ? "var(--color-" + entry.fg + ")" : undefined,
+                                    ...entry.decoration === 'bold' ? // having longer width than expected on Geist Mono font-weight
+                                    // above 600, hence a temporary fix is to use 500 for bold.
+                                    {
+                                        fontWeight: 500
+                                    } : entry.decoration === 'italic' ? {
+                                        fontStyle: 'italic'
+                                    } : undefined
+                                },
+                                children: entry.content
+                            }, "frame-" + entryIndex))
+                    }, "line-" + lineIndex);
+                })
             })
         ]
     });
 }
-const CODE_FRAME_STYLES = "\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--size-16);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n";
+const CODE_FRAME_STYLES = '\n  [data-nextjs-codeframe] {\n    --code-frame-padding: 12px;\n    --code-frame-line-height: var(--size-16);\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--code-frame-line-height);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: var(--code-frame-padding);\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored="true"] {\n    position: relative;\n\n    > span { \n      position: relative;\n      z-index: 1;\n    }\n\n    &::after {\n      content: "";\n      width: calc(100% + var(--code-frame-padding) * 2);\n      height: var(--code-frame-line-height);\n      left: calc(-1 * var(--code-frame-padding));\n      background: var(--color-red-200);\n      box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n      position: absolute;\n    }\n  }\n\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon=\'right\'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n';
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/components/code-frame/code-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\n\nimport Anser from 'next/dist/compiled/anser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\n\nimport { useMemo } from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { ExternalIcon } from '../../icons/external'\nimport { FileIcon } from '../../icons/file'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {\n  // Strip leading spaces out of the code frame:\n  const formattedFrame = useMemo<string>(() => {\n    const lines = codeFrame.split(/\\r?\\n/g)\n\n    // Find the minimum length of leading spaces after `|` in the code frame\n    const miniLeadingSpacesLength = lines\n      .map((line) =>\n        /^>? +\\d+ +\\| [ ]+/.exec(stripAnsi(line)) === null\n          ? null\n          : /^>? +\\d+ +\\| ( *)/.exec(stripAnsi(line))\n      )\n      .filter(Boolean)\n      .map((v) => v!.pop()!)\n      .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n    // When the minimum length of leading spaces is greater than 1, remove them\n    // from the code frame to help the indentation looks better when there's a lot leading spaces.\n    if (miniLeadingSpacesLength > 1) {\n      return lines\n        .map((line, a) =>\n          ~(a = line.indexOf('|'))\n            ? line.substring(0, a) +\n              line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n            : line\n        )\n        .join('\\n')\n    }\n    return lines.join('\\n')\n  }, [codeFrame])\n\n  const decoded = useMemo(() => {\n    return Anser.ansiToJson(formattedFrame, {\n      json: true,\n      use_classes: true,\n      remove_empty: true,\n    })\n  }, [formattedFrame])\n\n  const open = useOpenInEditor({\n    file: stackFrame.file,\n    lineNumber: stackFrame.lineNumber,\n    column: stackFrame.column,\n  })\n\n  const fileExtension = stackFrame?.file?.split('.').pop()\n\n  // TODO: make the caret absolute\n  return (\n    <div data-nextjs-codeframe>\n      <div className=\"code-frame-header\">\n        {/* TODO: This is <div> in `Terminal` component.\n        Changing now will require multiple test snapshots updates.\n        Leaving as <div> as is trivial and does not affect the UI.\n        Change when the new redbox matcher `toDisplayRedbox` is used.\n        */}\n        <p className=\"code-frame-link\">\n          <span className=\"code-frame-icon\">\n            <FileIcon lang={fileExtension} />\n          </span>\n          <span data-text>\n            {getFrameSource(stackFrame)} @{' '}\n            <HotlinkedText text={stackFrame.methodName} />\n          </span>\n          <button\n            aria-label=\"Open in editor\"\n            data-with-open-in-editor-link-source-file\n            onClick={open}\n          >\n            <span className=\"code-frame-icon\" data-icon=\"right\">\n              <ExternalIcon width={16} height={16} />\n            </span>\n          </button>\n        </p>\n      </div>\n      <pre className=\"code-frame-pre\">\n        {decoded.map((entry, index) => (\n          <span\n            key={`frame-${index}`}\n            style={{\n              color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n              ...(entry.decoration === 'bold'\n                ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are\n                  // having longer width than expected on Geist Mono font-weight\n                  // above 600, hence a temporary fix is to use 500 for bold.\n                  { fontWeight: 500 }\n                : entry.decoration === 'italic'\n                  ? { fontStyle: 'italic' }\n                  : undefined),\n            }}\n          >\n            {entry.content}\n          </span>\n        ))}\n      </pre>\n    </div>\n  )\n}\n\nexport const CODE_FRAME_STYLES = `\n  [data-nextjs-codeframe] {\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--size-16);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: 12px;\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["CODE_FRAME_STYLES","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","lines","split","miniLeadingSpacesLength","map","line","exec","stripAnsi","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","Anser","ansiToJson","json","use_classes","remove_empty","open","useOpenInEditor","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","className","p","span","FileIcon","lang","data-text","getFrameSource","HotlinkedText","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","ExternalIcon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content"],"mappings":";;;;;;;;;;;;;;;IAiHaA,iBAAiB;eAAjBA;;IAnGGC,SAAS;eAATA;;;;;gEAZE;oEACI;uBAEE;+BACM;4BACC;iCACC;0BACH;sBACJ;AAIlB,SAASA,UAAU,KAAyC;IAAzC,IAAA,EAAEC,UAAU,EAAEC,SAAS,EAAkB,GAAzC;QA6CFD;IA5CtB,8CAA8C;IAC9C,MAAME,iBAAiBC,IAAAA,cAAO,EAAS;QACrC,MAAMC,QAAQH,UAAUI,KAAK,CAAC;QAE9B,wEAAwE;QACxE,MAAMC,0BAA0BF,MAC7BG,GAAG,CAAC,CAACC,OACJ,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,WAAW,OAC1C,OACA,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,QAExCG,MAAM,CAACC,SACPL,GAAG,CAAC,CAACM,IAAMA,EAAGC,GAAG,IACjBC,MAAM,CAAC,CAACC,GAAGC,IAAOC,MAAMF,KAAKC,EAAEE,MAAM,GAAGC,KAAKC,GAAG,CAACL,GAAGC,EAAEE,MAAM,GAAIG;QAEnE,2EAA2E;QAC3E,8FAA8F;QAC9F,IAAIhB,0BAA0B,GAAG;YAC/B,OAAOF,MACJG,GAAG,CAAC,CAACC,MAAMe,IACV,CAAEA,CAAAA,IAAIf,KAAKgB,OAAO,CAAC,IAAG,IAClBhB,KAAKiB,SAAS,CAAC,GAAGF,KAClBf,KAAKiB,SAAS,CAACF,GAAGG,OAAO,CAAC,AAAC,UAAOpB,0BAAwB,KAAI,MAC9DE,MAELmB,IAAI,CAAC;QACV;QACA,OAAOvB,MAAMuB,IAAI,CAAC;IACpB,GAAG;QAAC1B;KAAU;IAEd,MAAM2B,UAAUzB,IAAAA,cAAO,EAAC;QACtB,OAAO0B,cAAK,CAACC,UAAU,CAAC5B,gBAAgB;YACtC6B,MAAM;YACNC,aAAa;YACbC,cAAc;QAChB;IACF,GAAG;QAAC/B;KAAe;IAEnB,MAAMgC,OAAOC,IAAAA,gCAAe,EAAC;QAC3BC,MAAMpC,WAAWoC,IAAI;QACrBC,YAAYrC,WAAWqC,UAAU;QACjCC,QAAQtC,WAAWsC,MAAM;IAC3B;IAEA,MAAMC,gBAAgBvC,+BAAAA,mBAAAA,WAAYoC,IAAI,qBAAhBpC,iBAAkBK,KAAK,CAAC,KAAKS,GAAG;IAEtD,gCAAgC;IAChC,qBACE,sBAAC0B;QAAIC,uBAAqB;;0BACxB,qBAACD;gBAAIE,WAAU;0BAMb,cAAA,sBAACC;oBAAED,WAAU;;sCACX,qBAACE;4BAAKF,WAAU;sCACd,cAAA,qBAACG,cAAQ;gCAACC,MAAMP;;;sCAElB,sBAACK;4BAAKG,WAAS;;gCACZC,IAAAA,0BAAc,EAAChD;gCAAY;gCAAG;8CAC/B,qBAACiD,4BAAa;oCAACC,MAAMlD,WAAWmD,UAAU;;;;sCAE5C,qBAACC;4BACCC,cAAW;4BACXC,2CAAyC;4BACzCC,SAASrB;sCAET,cAAA,qBAACU;gCAAKF,WAAU;gCAAkBc,aAAU;0CAC1C,cAAA,qBAACC,sBAAY;oCAACC,OAAO;oCAAIC,QAAQ;;;;;;;0BAKzC,qBAACC;gBAAIlB,WAAU;0BACZd,QAAQrB,GAAG,CAAC,CAACsD,OAAOC,sBACnB,qBAAClB;wBAECmB,OAAO;4BACLC,OAAOH,MAAMI,EAAE,GAAG,AAAC,iBAAcJ,MAAMI,EAAE,GAAC,MAAKC;4BAC/C,GAAIL,MAAMM,UAAU,KAAK,SAErB,8DAA8D;4BAC9D,2DAA2D;4BAC3D;gCAAEC,YAAY;4BAAI,IAClBP,MAAMM,UAAU,KAAK,WACnB;gCAAEE,WAAW;4BAAS,IACtBH,SAAS;wBACjB;kCAECL,MAAMS,OAAO;uBAbT,AAAC,WAAQR;;;;AAmB1B;AAEO,MAAMhE,oBAAqB"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport { useMemo } from 'react'\nimport { HotlinkedText } from '../hot-linked-text'\nimport { getFrameSource } from '../../../utils/stack-frame'\nimport { useOpenInEditor } from '../../utils/use-open-in-editor'\nimport { ExternalIcon } from '../../icons/external'\nimport { FileIcon } from '../../icons/file'\nimport {\n  formatCodeFrame,\n  groupCodeFrameLines,\n  parseLineNumberFromCodeFrameLine,\n} from './parse-code-frame'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {\n  const formattedFrame = useMemo<string>(\n    () => formatCodeFrame(codeFrame),\n    [codeFrame]\n  )\n  const decodedLines = useMemo(\n    () => groupCodeFrameLines(formattedFrame),\n    [formattedFrame]\n  )\n\n  const open = useOpenInEditor({\n    file: stackFrame.file,\n    lineNumber: stackFrame.lineNumber,\n    column: stackFrame.column,\n  })\n\n  const fileExtension = stackFrame?.file?.split('.').pop()\n\n  // TODO: make the caret absolute\n  return (\n    <div data-nextjs-codeframe>\n      <div className=\"code-frame-header\">\n        {/* TODO: This is <div> in `Terminal` component.\n        Changing now will require multiple test snapshots updates.\n        Leaving as <div> as is trivial and does not affect the UI.\n        Change when the new redbox matcher `toDisplayRedbox` is used.\n        */}\n        <p className=\"code-frame-link\">\n          <span className=\"code-frame-icon\">\n            <FileIcon lang={fileExtension} />\n          </span>\n          <span data-text>\n            {getFrameSource(stackFrame)} @{' '}\n            <HotlinkedText text={stackFrame.methodName} />\n          </span>\n          <button\n            aria-label=\"Open in editor\"\n            data-with-open-in-editor-link-source-file\n            onClick={open}\n          >\n            <span className=\"code-frame-icon\" data-icon=\"right\">\n              <ExternalIcon width={16} height={16} />\n            </span>\n          </button>\n        </p>\n      </div>\n      <pre className=\"code-frame-pre\">\n        {decodedLines.map((line, lineIndex) => {\n          const { lineNumber, isErroredLine } =\n            parseLineNumberFromCodeFrameLine(line, stackFrame)\n\n          const lineNumberProps: Record<string, string | boolean> = {}\n          if (lineNumber) {\n            lineNumberProps['data-nextjs-codeframe-line'] = lineNumber\n          }\n          if (isErroredLine) {\n            lineNumberProps['data-nextjs-codeframe-line--errored'] = true\n          }\n\n          return (\n            <div key={`line-${lineIndex}`} {...lineNumberProps}>\n              {line.map((entry, entryIndex) => (\n                <span\n                  key={`frame-${entryIndex}`}\n                  style={{\n                    color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n                    ...(entry.decoration === 'bold'\n                      ? // TODO(jiwon): This used to be 800, but the symbols like `─┬─` are\n                        // having longer width than expected on Geist Mono font-weight\n                        // above 600, hence a temporary fix is to use 500 for bold.\n                        { fontWeight: 500 }\n                      : entry.decoration === 'italic'\n                        ? { fontStyle: 'italic' }\n                        : undefined),\n                  }}\n                >\n                  {entry.content}\n                </span>\n              ))}\n            </div>\n          )\n        })}\n      </pre>\n    </div>\n  )\n}\n\nexport const CODE_FRAME_STYLES = `\n  [data-nextjs-codeframe] {\n    --code-frame-padding: 12px;\n    --code-frame-line-height: var(--size-16);\n    background-color: var(--color-background-200);\n    overflow: hidden;\n    color: var(--color-gray-1000);\n    text-overflow: ellipsis;\n    border: 1px solid var(--color-gray-400);\n    border-radius: 8px;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: var(--code-frame-line-height);\n    margin: 8px 0;\n\n    svg {\n      width: var(--size-16);\n      height: var(--size-16);\n    }\n  }\n\n  .code-frame-link,\n  .code-frame-pre {\n    padding: var(--code-frame-padding);\n  }\n\n  .code-frame-link svg {\n    flex-shrink: 0;\n  }\n\n  .code-frame-link [data-text] {\n    display: inline-flex;\n    text-align: left;\n    margin: auto 6px;\n  }\n\n  .code-frame-pre {\n    white-space: pre-wrap;\n  }\n\n  .code-frame-header {\n    width: 100%;\n    transition: background 100ms ease-out;\n    border-radius: 8px 8px 0 0;\n    border-bottom: 1px solid var(--color-gray-400);\n  }\n\n  [data-with-open-in-editor-link-source-file] {\n    padding: 4px;\n    margin: -4px 0 -4px auto;\n    border-radius: var(--rounded-full);\n    margin-left: auto;\n\n    &:focus-visible {\n      outline: var(--focus-ring);\n      outline-offset: -2px;\n    }\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n\n  [data-nextjs-codeframe] *:not(a) {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe-line][data-nextjs-codeframe-line--errored=\"true\"] {\n    position: relative;\n\n    > span { \n      position: relative;\n      z-index: 1;\n    }\n\n    &::after {\n      content: \"\";\n      width: calc(100% + var(--code-frame-padding) * 2);\n      height: var(--code-frame-line-height);\n      left: calc(-1 * var(--code-frame-padding));\n      background: var(--color-red-200);\n      box-shadow: 2px 0 0 0 var(--color-red-900) inset;\n      position: absolute;\n    }\n  }\n\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n  }\n\n  .code-frame-link {\n    display: flex;\n    margin: 0;\n    outline: 0;\n  }\n  .code-frame-link [data-icon='right'] {\n    margin-left: auto;\n  }\n\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n\n  [data-nextjs-codeframe] svg {\n    color: var(--color-gray-900);\n  }\n`\n"],"names":["CODE_FRAME_STYLES","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","formatCodeFrame","decodedLines","groupCodeFrameLines","open","useOpenInEditor","file","lineNumber","column","fileExtension","split","pop","div","data-nextjs-codeframe","className","p","span","FileIcon","lang","data-text","getFrameSource","HotlinkedText","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","ExternalIcon","width","height","pre","map","line","lineIndex","isErroredLine","parseLineNumberFromCodeFrameLine","lineNumberProps","entry","entryIndex","style","color","fg","undefined","decoration","fontWeight","fontStyle","content"],"mappings":";;;;;;;;;;;;;;;IAsGaA,iBAAiB;eAAjBA;;IAvFGC,SAAS;eAATA;;;;uBAdQ;+BACM;4BACC;iCACC;0BACH;sBACJ;gCAKlB;AAIA,SAASA,UAAU,KAAyC;IAAzC,IAAA,EAAEC,UAAU,EAAEC,SAAS,EAAkB,GAAzC;QAgBFD;IAftB,MAAME,iBAAiBC,IAAAA,cAAO,EAC5B,IAAMC,IAAAA,+BAAe,EAACH,YACtB;QAACA;KAAU;IAEb,MAAMI,eAAeF,IAAAA,cAAO,EAC1B,IAAMG,IAAAA,mCAAmB,EAACJ,iBAC1B;QAACA;KAAe;IAGlB,MAAMK,OAAOC,IAAAA,gCAAe,EAAC;QAC3BC,MAAMT,WAAWS,IAAI;QACrBC,YAAYV,WAAWU,UAAU;QACjCC,QAAQX,WAAWW,MAAM;IAC3B;IAEA,MAAMC,gBAAgBZ,+BAAAA,mBAAAA,WAAYS,IAAI,qBAAhBT,iBAAkBa,KAAK,CAAC,KAAKC,GAAG;IAEtD,gCAAgC;IAChC,qBACE,sBAACC;QAAIC,uBAAqB;;0BACxB,qBAACD;gBAAIE,WAAU;0BAMb,cAAA,sBAACC;oBAAED,WAAU;;sCACX,qBAACE;4BAAKF,WAAU;sCACd,cAAA,qBAACG,cAAQ;gCAACC,MAAMT;;;sCAElB,sBAACO;4BAAKG,WAAS;;gCACZC,IAAAA,0BAAc,EAACvB;gCAAY;gCAAG;8CAC/B,qBAACwB,4BAAa;oCAACC,MAAMzB,WAAW0B,UAAU;;;;sCAE5C,qBAACC;4BACCC,cAAW;4BACXC,2CAAyC;4BACzCC,SAASvB;sCAET,cAAA,qBAACY;gCAAKF,WAAU;gCAAkBc,aAAU;0CAC1C,cAAA,qBAACC,sBAAY;oCAACC,OAAO;oCAAIC,QAAQ;;;;;;;0BAKzC,qBAACC;gBAAIlB,WAAU;0BACZZ,aAAa+B,GAAG,CAAC,CAACC,MAAMC;oBACvB,MAAM,EAAE5B,UAAU,EAAE6B,aAAa,EAAE,GACjCC,IAAAA,gDAAgC,EAACH,MAAMrC;oBAEzC,MAAMyC,kBAAoD,CAAC;oBAC3D,IAAI/B,YAAY;wBACd+B,eAAe,CAAC,6BAA6B,GAAG/B;oBAClD;oBACA,IAAI6B,eAAe;wBACjBE,eAAe,CAAC,sCAAsC,GAAG;oBAC3D;oBAEA,qBACE,qBAAC1B;wBAA+B,GAAG0B,eAAe;kCAC/CJ,KAAKD,GAAG,CAAC,CAACM,OAAOC,2BAChB,qBAACxB;gCAECyB,OAAO;oCACLC,OAAOH,MAAMI,EAAE,GAAG,AAAC,iBAAcJ,MAAMI,EAAE,GAAC,MAAKC;oCAC/C,GAAIL,MAAMM,UAAU,KAAK,SAErB,8DAA8D;oCAC9D,2DAA2D;oCAC3D;wCAAEC,YAAY;oCAAI,IAClBP,MAAMM,UAAU,KAAK,WACnB;wCAAEE,WAAW;oCAAS,IACtBH,SAAS;gCACjB;0CAECL,MAAMS,OAAO;+BAbT,AAAC,WAAQR;uBAHV,AAAC,UAAOL;gBAqBtB;;;;AAIR;AAEO,MAAMxC,oBAAqB"}

package/dist/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.d.ts

@@ -0,0 +1,8 @@
+import type { StackFrame } from 'next/dist/compiled/stacktrace-parser';
+import { type AnserJsonEntry } from 'next/dist/compiled/anser';
+export declare function formatCodeFrame(codeFrame: string): string;
+export declare function groupCodeFrameLines(formattedFrame: string): AnserJsonEntry[][];
+export declare function parseLineNumberFromCodeFrameLine(line: AnserJsonEntry[], stackFrame: StackFrame): {
+    lineNumber: string | undefined;
+    isErroredLine: boolean;
+};

package/dist/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    formatCodeFrame: null,
+    groupCodeFrameLines: null,
+    parseLineNumberFromCodeFrameLine: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    formatCodeFrame: function() {
+        return formatCodeFrame;
+    },
+    groupCodeFrameLines: function() {
+        return groupCodeFrameLines;
+    },
+    parseLineNumberFromCodeFrameLine: function() {
+        return parseLineNumberFromCodeFrameLine;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _anser = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/anser"));
+const _stripansi = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/strip-ansi"));
+function formatCodeFrame(codeFrame) {
+    const lines = codeFrame.split(/\r?\n/g);
+    // Find the minimum length of leading spaces after `|` in the code frame
+    const miniLeadingSpacesLength = lines.map((line)=>/^>? +\d+ +\| [ ]+/.exec((0, _stripansi.default)(line)) === null ? null : /^>? +\d+ +\| ( *)/.exec((0, _stripansi.default)(line))).filter(Boolean).map((v)=>v.pop()).reduce((c, n)=>isNaN(c) ? n.length : Math.min(c, n.length), NaN);
+    // When the minimum length of leading spaces is greater than 1, remove them
+    // from the code frame to help the indentation looks better when there's a lot leading spaces.
+    if (miniLeadingSpacesLength > 1) {
+        return lines.map((line, a)=>~(a = line.indexOf('|')) ? line.substring(0, a) + line.substring(a).replace("^\\ {" + miniLeadingSpacesLength + "}", '') : line).join('\n');
+    }
+    return lines.join('\n');
+}
+function groupCodeFrameLines(formattedFrame) {
+    // Map the decoded lines to a format that can be rendered
+    const decoded = _anser.default.ansiToJson(formattedFrame, {
+        json: true,
+        use_classes: true,
+        remove_empty: true
+    });
+    const lines = [];
+    let line = [];
+    for (const token of decoded){
+        if (token.content === '\n') {
+            lines.push(line);
+            line = [];
+        } else {
+            line.push(token);
+        }
+    }
+    if (line.length > 0) {
+        lines.push(line);
+    }
+    return lines;
+}
+function parseLineNumberFromCodeFrameLine(line, stackFrame) {
+    var _line_, _line_1, _stackFrame_lineNumber;
+    let lineNumberToken;
+    let lineNumber;
+    // parse line number from line first 2 tokens
+    // e.g. ` > 1 | const foo = 'bar'` => `1`, first token is `1 |`
+    // e.g. `  2 | const foo = 'bar'` => `2`. first 2 tokens are ' ' and ' 2 |'
+    // console.log('line', line)
+    if (((_line_ = line[0]) == null ? void 0 : _line_.content) === '>' || ((_line_1 = line[0]) == null ? void 0 : _line_1.content) === ' ') {
+        var _lineNumberToken_content_replace, _lineNumberToken_content;
+        lineNumberToken = line[1];
+        lineNumber = lineNumberToken == null ? void 0 : (_lineNumberToken_content = lineNumberToken.content) == null ? void 0 : (_lineNumberToken_content_replace = _lineNumberToken_content.replace('|', '')) == null ? void 0 : _lineNumberToken_content_replace.trim();
+    }
+    // When the line number is possibly undefined, it can be just the non-source code line
+    // e.g. the ^ sign can also take a line, we skip rendering line number for it
+    return {
+        lineNumber,
+        isErroredLine: lineNumber === ((_stackFrame_lineNumber = stackFrame.lineNumber) == null ? void 0 : _stackFrame_lineNumber.toString())
+    };
+}
+
+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=parse-code-frame.js.map

package/dist/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.ts"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport Anser, { type AnserJsonEntry } from 'next/dist/compiled/anser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\n\n// Strip leading spaces out of the code frame\nexport function formatCodeFrame(codeFrame: string) {\n  const lines = codeFrame.split(/\\r?\\n/g)\n\n  // Find the minimum length of leading spaces after `|` in the code frame\n  const miniLeadingSpacesLength = lines\n    .map((line) =>\n      /^>? +\\d+ +\\| [ ]+/.exec(stripAnsi(line)) === null\n        ? null\n        : /^>? +\\d+ +\\| ( *)/.exec(stripAnsi(line))\n    )\n    .filter(Boolean)\n    .map((v) => v!.pop()!)\n    .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n  // When the minimum length of leading spaces is greater than 1, remove them\n  // from the code frame to help the indentation looks better when there's a lot leading spaces.\n  if (miniLeadingSpacesLength > 1) {\n    return lines\n      .map((line, a) =>\n        ~(a = line.indexOf('|'))\n          ? line.substring(0, a) +\n            line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n          : line\n      )\n      .join('\\n')\n  }\n  return lines.join('\\n')\n}\n\nexport function groupCodeFrameLines(formattedFrame: string) {\n  // Map the decoded lines to a format that can be rendered\n  const decoded = Anser.ansiToJson(formattedFrame, {\n    json: true,\n    use_classes: true,\n    remove_empty: true,\n  })\n  const lines: (typeof decoded)[] = []\n\n  let line: typeof decoded = []\n  for (const token of decoded) {\n    if (token.content === '\\n') {\n      lines.push(line)\n      line = []\n    } else {\n      line.push(token)\n    }\n  }\n  if (line.length > 0) {\n    lines.push(line)\n  }\n\n  return lines\n}\n\nexport function parseLineNumberFromCodeFrameLine(\n  line: AnserJsonEntry[],\n  stackFrame: StackFrame\n) {\n  let lineNumberToken: AnserJsonEntry | undefined\n  let lineNumber: string | undefined\n  // parse line number from line first 2 tokens\n  // e.g. ` > 1 | const foo = 'bar'` => `1`, first token is `1 |`\n  // e.g. `  2 | const foo = 'bar'` => `2`. first 2 tokens are ' ' and ' 2 |'\n  // console.log('line', line)\n  if (line[0]?.content === '>' || line[0]?.content === ' ') {\n    lineNumberToken = line[1]\n    lineNumber = lineNumberToken?.content?.replace('|', '')?.trim()\n  }\n\n  // When the line number is possibly undefined, it can be just the non-source code line\n  // e.g. the ^ sign can also take a line, we skip rendering line number for it\n  return {\n    lineNumber,\n    isErroredLine: lineNumber === stackFrame.lineNumber?.toString(),\n  }\n}\n"],"names":["formatCodeFrame","groupCodeFrameLines","parseLineNumberFromCodeFrameLine","codeFrame","lines","split","miniLeadingSpacesLength","map","line","exec","stripAnsi","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","formattedFrame","decoded","Anser","ansiToJson","json","use_classes","remove_empty","token","content","push","stackFrame","lineNumberToken","lineNumber","trim","isErroredLine","toString"],"mappings":";;;;;;;;;;;;;;;;IAKgBA,eAAe;eAAfA;;IA6BAC,mBAAmB;eAAnBA;;IAyBAC,gCAAgC;eAAhCA;;;;gEA1D2B;oEACrB;AAGf,SAASF,gBAAgBG,SAAiB;IAC/C,MAAMC,QAAQD,UAAUE,KAAK,CAAC;IAE9B,wEAAwE;IACxE,MAAMC,0BAA0BF,MAC7BG,GAAG,CAAC,CAACC,OACJ,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,WAAW,OAC1C,OACA,oBAAoBC,IAAI,CAACC,IAAAA,kBAAS,EAACF,QAExCG,MAAM,CAACC,SACPL,GAAG,CAAC,CAACM,IAAMA,EAAGC,GAAG,IACjBC,MAAM,CAAC,CAACC,GAAGC,IAAOC,MAAMF,KAAKC,EAAEE,MAAM,GAAGC,KAAKC,GAAG,CAACL,GAAGC,EAAEE,MAAM,GAAIG;IAEnE,2EAA2E;IAC3E,8FAA8F;IAC9F,IAAIhB,0BAA0B,GAAG;QAC/B,OAAOF,MACJG,GAAG,CAAC,CAACC,MAAMe,IACV,CAAEA,CAAAA,IAAIf,KAAKgB,OAAO,CAAC,IAAG,IAClBhB,KAAKiB,SAAS,CAAC,GAAGF,KAClBf,KAAKiB,SAAS,CAACF,GAAGG,OAAO,CAAC,AAAC,UAAOpB,0BAAwB,KAAI,MAC9DE,MAELmB,IAAI,CAAC;IACV;IACA,OAAOvB,MAAMuB,IAAI,CAAC;AACpB;AAEO,SAAS1B,oBAAoB2B,cAAsB;IACxD,yDAAyD;IACzD,MAAMC,UAAUC,cAAK,CAACC,UAAU,CAACH,gBAAgB;QAC/CI,MAAM;QACNC,aAAa;QACbC,cAAc;IAChB;IACA,MAAM9B,QAA4B,EAAE;IAEpC,IAAII,OAAuB,EAAE;IAC7B,KAAK,MAAM2B,SAASN,QAAS;QAC3B,IAAIM,MAAMC,OAAO,KAAK,MAAM;YAC1BhC,MAAMiC,IAAI,CAAC7B;YACXA,OAAO,EAAE;QACX,OAAO;YACLA,KAAK6B,IAAI,CAACF;QACZ;IACF;IACA,IAAI3B,KAAKW,MAAM,GAAG,GAAG;QACnBf,MAAMiC,IAAI,CAAC7B;IACb;IAEA,OAAOJ;AACT;AAEO,SAASF,iCACdM,IAAsB,EACtB8B,UAAsB;QAQlB9B,QAA4BA,SASA8B;IAfhC,IAAIC;IACJ,IAAIC;IACJ,6CAA6C;IAC7C,+DAA+D;IAC/D,2EAA2E;IAC3E,4BAA4B;IAC5B,IAAIhC,EAAAA,SAAAA,IAAI,CAAC,EAAE,qBAAPA,OAAS4B,OAAO,MAAK,OAAO5B,EAAAA,UAAAA,IAAI,CAAC,EAAE,qBAAPA,QAAS4B,OAAO,MAAK,KAAK;YAE3CG,kCAAAA;QADbA,kBAAkB/B,IAAI,CAAC,EAAE;QACzBgC,aAAaD,oCAAAA,2BAAAA,gBAAiBH,OAAO,sBAAxBG,mCAAAA,yBAA0Bb,OAAO,CAAC,KAAK,wBAAvCa,iCAA4CE,IAAI;IAC/D;IAEA,sFAAsF;IACtF,6EAA6E;IAC7E,OAAO;QACLD;QACAE,eAAeF,iBAAeF,yBAAAA,WAAWE,UAAU,qBAArBF,uBAAuBK,QAAQ;IAC/D;AACF"}

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.d.ts

@@ -1,2 +1,2 @@
 export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view';
-export declare const PSEUDO_HTML_DIFF_STYLES = "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-md-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: 12px;\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  \n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 120px;\n    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n    padding-bottom: 40px;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n";
+export declare const PSEUDO_HTML_DIFF_STYLES = "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-md-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    box-shadow: 2px 0 0 0 var(--color-amber-900) inset;\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: 12px;\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  \n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 120px;\n    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n    padding-bottom: 40px;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n";

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.js

@@ -21,7 +21,7 @@ _export(exports, {
     }
 });
 const _diffview = require("../../components/hydration-diff/diff-view");
-const PSEUDO_HTML_DIFF_STYLES = "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-md-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: 12px;\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  \n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 120px;\n    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n    padding-bottom: 40px;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n";
+const PSEUDO_HTML_DIFF_STYLES = "\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-md-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    box-shadow: 2px 0 0 0 var(--color-amber-900) inset;\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: 12px;\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  \n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 120px;\n    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n    padding-bottom: 40px;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n";
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.tsx"],"sourcesContent":["export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view'\n\nexport const PSEUDO_HTML_DIFF_STYLES = `\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-md-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: 12px;\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  ${/* hide but text are still accessible in DOM */ ''}\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 120px;\n    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n    padding-bottom: 40px;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n`\n"],"names":["PSEUDO_HTML_DIFF_STYLES","PseudoHtmlDiff"],"mappings":";;;;;;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IAFJC,cAAc;eAAdA,wBAAc;;;0BAAQ;AAExB,MAAMD,0BAA2B"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.tsx"],"sourcesContent":["export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view'\n\nexport const PSEUDO_HTML_DIFF_STYLES = `\n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-md-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    box-shadow: 2px 0 0 0 var(--color-amber-900) inset;\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: 12px;\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  ${/* hide but text are still accessible in DOM */ ''}\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 120px;\n    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n    padding-bottom: 40px;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n`\n"],"names":["PSEUDO_HTML_DIFF_STYLES","PseudoHtmlDiff"],"mappings":";;;;;;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IAFJC,cAAc;eAAdA,wBAAc;;;0BAAQ;AAExB,MAAMD,0BAA2B"}

package/dist/client/components/react-dev-overlay/ui/container/runtime-error/index.d.ts

@@ -4,4 +4,4 @@ export type RuntimeErrorProps = {
     dialogResizerRef: React.RefObject<HTMLDivElement | null>;
 };
 export declare function RuntimeError({ error, dialogResizerRef }: RuntimeErrorProps): import("react/jsx-runtime").JSX.Element;
-export declare const styles = "\n  \n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-md-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: 12px;\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  \n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 120px;\n    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n    padding-bottom: 40px;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n\n";
+export declare const styles = "\n  \n  [data-nextjs-container-errors-pseudo-html] {\n    padding: 8px 0;\n    margin: 8px 0;\n    border: 1px solid var(--color-gray-400);\n    background: var(--color-background-200);\n    color: var(--color-syntax-constant);\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-12);\n    line-height: 1.33em; /* 16px in 12px font size */\n    border-radius: var(--rounded-md-2);\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: 40px;\n    line-height: calc(5 / 3);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error'] {\n    background: var(--color-amber-100);\n    box-shadow: 2px 0 0 0 var(--color-amber-900) inset;\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    all: unset;\n    margin-left: 12px;\n    &:focus {\n      outline: none;\n    }\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    background: var(--color-green-300);\n  }\n  [data-nextjs-container-errors-pseudo-html-line-sign] {\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-green-900);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    background: var(--color-red-300);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-red-900);\n    margin-left: calc(24px * -1);\n    margin-right: 24px;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='error']\n    [data-nextjs-container-errors-pseudo-html-line-sign] {\n    color: var(--color-amber-900);\n  }\n  \n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n    height: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n  .nextjs__container_errors__component-stack {\n    margin: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 120px;\n    mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n    padding-bottom: 40px;\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff] {\n    scroll-snap-align: center;\n  }\n  .error-overlay-hydration-error-diff-plus-icon {\n    color: var(--color-green-900);\n  }\n  .error-overlay-hydration-error-diff-minus-icon {\n    color: var(--color-red-900);\n  }\n\n";

package/dist/client/index.js

@@ -61,7 +61,7 @@ const _hooksclientcontextsharedruntime = require("../shared/lib/hooks-client-con
 const _onrecoverableerror = require("./react-client-callbacks/on-recoverable-error");
 const _tracer = /*#__PURE__*/ _interop_require_default._(require("./tracing/tracer"));
 const _isnextroutererror = require("./components/is-next-router-error");
-const version = "15.3.0-canary.4";
+const version = "15.3.0-canary.6";
 let router;
 const emitter = (0, _mitt.default)();
 const looseToArray = (input)=>[].slice.call(input);