next 15.3.0-canary.5 → 15.3.0-canary.8

package/dist/esm/client/app-bootstrap.js

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

package/dist/esm/client/app-index.js

@@ -167,6 +167,7 @@ function Root(param) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         React.useEffect(()=>{
             window.__NEXT_HYDRATED = true;
+            window.__NEXT_HYDRATED_AT = performance.now();
             window.__NEXT_HYDRATED_CB == null ? void 0 : window.__NEXT_HYDRATED_CB.call(window);
         }, []);
     }

package/dist/esm/client/app-index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/app-index.tsx"],"sourcesContent":["// imports polyfill from `@next/polyfill-module` after build.\nimport '../build/polyfills/polyfill-module'\n\nimport './components/globals/patch-console'\nimport './components/globals/handle-global-errors'\n\nimport ReactDOMClient from 'react-dom/client'\nimport React, { use } from 'react'\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { createFromReadableStream } from 'react-server-dom-webpack/client'\nimport { HeadManagerContext } from '../shared/lib/head-manager-context.shared-runtime'\nimport { onRecoverableError } from './react-client-callbacks/on-recoverable-error'\nimport {\n  onCaughtError,\n  onUncaughtError,\n} from './react-client-callbacks/error-boundary-callbacks'\nimport { callServer } from './app-call-server'\nimport { findSourceMapURL } from './app-find-source-map-url'\nimport {\n  type AppRouterActionQueue,\n  createMutableActionQueue,\n} from '../shared/lib/router/action-queue'\nimport AppRouter from './components/app-router'\nimport type { InitialRSCPayload } from '../server/app-render/types'\nimport { createInitialRouterState } from './components/router-reducer/create-initial-router-state'\nimport { MissingSlotContext } from '../shared/lib/app-router-context.shared-runtime'\nimport { setAppBuildId } from './app-build-id'\nimport { shouldRenderRootLevelErrorOverlay } from './lib/is-error-thrown-while-rendering-rsc'\n\n/// <reference types=\"react-dom/experimental\" />\n\nconst appElement: HTMLElement | Document = document\n\nconst encoder = new TextEncoder()\n\nlet initialServerDataBuffer: (string | Uint8Array)[] | undefined = undefined\nlet initialServerDataWriter: ReadableStreamDefaultController | undefined =\n  undefined\nlet initialServerDataLoaded = false\nlet initialServerDataFlushed = false\n\nlet initialFormStateData: null | any = null\n\ntype FlightSegment =\n  | [isBootStrap: 0]\n  | [isNotBootstrap: 1, responsePartial: string]\n  | [isFormState: 2, formState: any]\n  | [isBinary: 3, responseBase64Partial: string]\n\ntype NextFlight = Omit<Array<FlightSegment>, 'push'> & {\n  push: (seg: FlightSegment) => void\n}\n\ndeclare global {\n  // If you're working in a browser environment\n  interface Window {\n    __next_f: NextFlight\n  }\n}\n\nfunction nextServerDataCallback(seg: FlightSegment): void {\n  if (seg[0] === 0) {\n    initialServerDataBuffer = []\n  } else if (seg[0] === 1) {\n    if (!initialServerDataBuffer)\n      throw new Error('Unexpected server data: missing bootstrap script.')\n\n    if (initialServerDataWriter) {\n      initialServerDataWriter.enqueue(encoder.encode(seg[1]))\n    } else {\n      initialServerDataBuffer.push(seg[1])\n    }\n  } else if (seg[0] === 2) {\n    initialFormStateData = seg[1]\n  } else if (seg[0] === 3) {\n    if (!initialServerDataBuffer)\n      throw new Error('Unexpected server data: missing bootstrap script.')\n\n    // Decode the base64 string back to binary data.\n    const binaryString = atob(seg[1])\n    const decodedChunk = new Uint8Array(binaryString.length)\n    for (var i = 0; i < binaryString.length; i++) {\n      decodedChunk[i] = binaryString.charCodeAt(i)\n    }\n\n    if (initialServerDataWriter) {\n      initialServerDataWriter.enqueue(decodedChunk)\n    } else {\n      initialServerDataBuffer.push(decodedChunk)\n    }\n  }\n}\n\nfunction isStreamErrorOrUnfinished(ctr: ReadableStreamDefaultController) {\n  // If `desiredSize` is null, it means the stream is closed or errored. If it is lower than 0, the stream is still unfinished.\n  return ctr.desiredSize === null || ctr.desiredSize < 0\n}\n\n// There might be race conditions between `nextServerDataRegisterWriter` and\n// `DOMContentLoaded`. The former will be called when React starts to hydrate\n// the root, the latter will be called when the DOM is fully loaded.\n// For streaming, the former is called first due to partial hydration.\n// For non-streaming, the latter can be called first.\n// Hence, we use two variables `initialServerDataLoaded` and\n// `initialServerDataFlushed` to make sure the writer will be closed and\n// `initialServerDataBuffer` will be cleared in the right time.\nfunction nextServerDataRegisterWriter(ctr: ReadableStreamDefaultController) {\n  if (initialServerDataBuffer) {\n    initialServerDataBuffer.forEach((val) => {\n      ctr.enqueue(typeof val === 'string' ? encoder.encode(val) : val)\n    })\n    if (initialServerDataLoaded && !initialServerDataFlushed) {\n      if (isStreamErrorOrUnfinished(ctr)) {\n        ctr.error(\n          new Error(\n            'The connection to the page was unexpectedly closed, possibly due to the stop button being clicked, loss of Wi-Fi, or an unstable internet connection.'\n          )\n        )\n      } else {\n        ctr.close()\n      }\n      initialServerDataFlushed = true\n      initialServerDataBuffer = undefined\n    }\n  }\n\n  initialServerDataWriter = ctr\n}\n\n// When `DOMContentLoaded`, we can close all pending writers to finish hydration.\nconst DOMContentLoaded = function () {\n  if (initialServerDataWriter && !initialServerDataFlushed) {\n    initialServerDataWriter.close()\n    initialServerDataFlushed = true\n    initialServerDataBuffer = undefined\n  }\n  initialServerDataLoaded = true\n}\n\n// It's possible that the DOM is already loaded.\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', DOMContentLoaded, false)\n} else {\n  // Delayed in marco task to ensure it's executed later than hydration\n  setTimeout(DOMContentLoaded)\n}\n\nconst nextServerDataLoadingGlobal = (self.__next_f = self.__next_f || [])\nnextServerDataLoadingGlobal.forEach(nextServerDataCallback)\nnextServerDataLoadingGlobal.push = nextServerDataCallback\n\nconst readable = new ReadableStream({\n  start(controller) {\n    nextServerDataRegisterWriter(controller)\n  },\n})\n\nconst initialServerResponse = createFromReadableStream<InitialRSCPayload>(\n  readable,\n  { callServer, findSourceMapURL }\n)\n\n// React overrides `.then` and doesn't return a new promise chain,\n// so we wrap the action queue in a promise to ensure that its value\n// is defined when the promise resolves.\n// https://github.com/facebook/react/blob/163365a07872337e04826c4f501565d43dbd2fd4/packages/react-client/src/ReactFlightClient.js#L189-L190\nconst pendingActionQueue: Promise<AppRouterActionQueue> = new Promise(\n  (resolve, reject) => {\n    initialServerResponse.then(\n      (initialRSCPayload) => {\n        // setAppBuildId should be called only once, during JS initialization\n        // and before any components have hydrated.\n        setAppBuildId(initialRSCPayload.b)\n\n        resolve(\n          createMutableActionQueue(\n            createInitialRouterState({\n              initialFlightData: initialRSCPayload.f,\n              initialCanonicalUrlParts: initialRSCPayload.c,\n              initialParallelRoutes: new Map(),\n              location: window.location,\n              couldBeIntercepted: initialRSCPayload.i,\n              postponed: initialRSCPayload.s,\n              prerendered: initialRSCPayload.S,\n            })\n          )\n        )\n      },\n      (err: Error) => reject(err)\n    )\n  }\n)\n\nfunction ServerRoot(): React.ReactNode {\n  const initialRSCPayload = use(initialServerResponse)\n  const actionQueue = use<AppRouterActionQueue>(pendingActionQueue)\n\n  const router = (\n    <AppRouter\n      actionQueue={actionQueue}\n      globalErrorComponentAndStyles={initialRSCPayload.G}\n      assetPrefix={initialRSCPayload.p}\n    />\n  )\n\n  if (process.env.NODE_ENV === 'development' && initialRSCPayload.m) {\n    // We provide missing slot information in a context provider only during development\n    // as we log some additional information about the missing slots in the console.\n    return (\n      <MissingSlotContext value={initialRSCPayload.m}>\n        {router}\n      </MissingSlotContext>\n    )\n  }\n\n  return router\n}\n\nconst StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE_APP\n  ? React.StrictMode\n  : React.Fragment\n\nfunction Root({ children }: React.PropsWithChildren<{}>) {\n  if (process.env.__NEXT_TEST_MODE) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      window.__NEXT_HYDRATED = true\n      window.__NEXT_HYDRATED_CB?.()\n    }, [])\n  }\n\n  return children\n}\n\nconst reactRootOptions: ReactDOMClient.RootOptions = {\n  onRecoverableError,\n  onCaughtError,\n  onUncaughtError,\n}\n\nexport function hydrate() {\n  const reactEl = (\n    <StrictModeIfEnabled>\n      <HeadManagerContext.Provider value={{ appDir: true }}>\n        <Root>\n          <ServerRoot />\n        </Root>\n      </HeadManagerContext.Provider>\n    </StrictModeIfEnabled>\n  )\n\n  if (\n    document.documentElement.id === '__next_error__' ||\n    !!window.__next_root_layout_missing_tags?.length\n  ) {\n    let element = reactEl\n    // Server rendering failed, fall back to client-side rendering\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      shouldRenderRootLevelErrorOverlay()\n    ) {\n      const { createRootLevelDevOverlayElement } =\n        require('./components/react-dev-overlay/app/client-entry') as typeof import('./components/react-dev-overlay/app/client-entry')\n\n      // Note this won't cause hydration mismatch because we are doing CSR w/o hydration\n      element = createRootLevelDevOverlayElement(element)\n    }\n\n    ReactDOMClient.createRoot(appElement, reactRootOptions).render(element)\n  } else {\n    React.startTransition(() => {\n      ReactDOMClient.hydrateRoot(appElement, reactEl, {\n        ...reactRootOptions,\n        formState: initialFormStateData,\n      })\n    })\n  }\n\n  // TODO-APP: Remove this logic when Float has GC built-in in development.\n  if (process.env.NODE_ENV !== 'production') {\n    const { linkGc } =\n      require('./app-link-gc') as typeof import('./app-link-gc')\n    linkGc()\n  }\n}\n"],"names":["ReactDOMClient","React","use","createFromReadableStream","HeadManagerContext","onRecoverableError","onCaughtError","onUncaughtError","callServer","findSourceMapURL","createMutableActionQueue","AppRouter","createInitialRouterState","MissingSlotContext","setAppBuildId","shouldRenderRootLevelErrorOverlay","appElement","document","encoder","TextEncoder","initialServerDataBuffer","undefined","initialServerDataWriter","initialServerDataLoaded","initialServerDataFlushed","initialFormStateData","nextServerDataCallback","seg","Error","enqueue","encode","push","binaryString","atob","decodedChunk","Uint8Array","length","i","charCodeAt","isStreamErrorOrUnfinished","ctr","desiredSize","nextServerDataRegisterWriter","forEach","val","error","close","DOMContentLoaded","readyState","addEventListener","setTimeout","nextServerDataLoadingGlobal","self","__next_f","readable","ReadableStream","start","controller","initialServerResponse","pendingActionQueue","Promise","resolve","reject","then","initialRSCPayload","b","initialFlightData","f","initialCanonicalUrlParts","c","initialParallelRoutes","Map","location","window","couldBeIntercepted","postponed","s","prerendered","S","err","ServerRoot","actionQueue","router","globalErrorComponentAndStyles","G","assetPrefix","p","process","env","NODE_ENV","m","value","StrictModeIfEnabled","__NEXT_STRICT_MODE_APP","StrictMode","Fragment","Root","children","__NEXT_TEST_MODE","useEffect","__NEXT_HYDRATED","__NEXT_HYDRATED_CB","reactRootOptions","hydrate","reactEl","Provider","appDir","documentElement","id","__next_root_layout_missing_tags","element","createRootLevelDevOverlayElement","require","createRoot","render","startTransition","hydrateRoot","formState","linkGc"],"mappings":"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"}
+{"version":3,"sources":["../../src/client/app-index.tsx"],"sourcesContent":["// imports polyfill from `@next/polyfill-module` after build.\nimport '../build/polyfills/polyfill-module'\n\nimport './components/globals/patch-console'\nimport './components/globals/handle-global-errors'\n\nimport ReactDOMClient from 'react-dom/client'\nimport React, { use } from 'react'\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { createFromReadableStream } from 'react-server-dom-webpack/client'\nimport { HeadManagerContext } from '../shared/lib/head-manager-context.shared-runtime'\nimport { onRecoverableError } from './react-client-callbacks/on-recoverable-error'\nimport {\n  onCaughtError,\n  onUncaughtError,\n} from './react-client-callbacks/error-boundary-callbacks'\nimport { callServer } from './app-call-server'\nimport { findSourceMapURL } from './app-find-source-map-url'\nimport {\n  type AppRouterActionQueue,\n  createMutableActionQueue,\n} from '../shared/lib/router/action-queue'\nimport AppRouter from './components/app-router'\nimport type { InitialRSCPayload } from '../server/app-render/types'\nimport { createInitialRouterState } from './components/router-reducer/create-initial-router-state'\nimport { MissingSlotContext } from '../shared/lib/app-router-context.shared-runtime'\nimport { setAppBuildId } from './app-build-id'\nimport { shouldRenderRootLevelErrorOverlay } from './lib/is-error-thrown-while-rendering-rsc'\n\n/// <reference types=\"react-dom/experimental\" />\n\nconst appElement: HTMLElement | Document = document\n\nconst encoder = new TextEncoder()\n\nlet initialServerDataBuffer: (string | Uint8Array)[] | undefined = undefined\nlet initialServerDataWriter: ReadableStreamDefaultController | undefined =\n  undefined\nlet initialServerDataLoaded = false\nlet initialServerDataFlushed = false\n\nlet initialFormStateData: null | any = null\n\ntype FlightSegment =\n  | [isBootStrap: 0]\n  | [isNotBootstrap: 1, responsePartial: string]\n  | [isFormState: 2, formState: any]\n  | [isBinary: 3, responseBase64Partial: string]\n\ntype NextFlight = Omit<Array<FlightSegment>, 'push'> & {\n  push: (seg: FlightSegment) => void\n}\n\ndeclare global {\n  // If you're working in a browser environment\n  interface Window {\n    __next_f: NextFlight\n  }\n}\n\nfunction nextServerDataCallback(seg: FlightSegment): void {\n  if (seg[0] === 0) {\n    initialServerDataBuffer = []\n  } else if (seg[0] === 1) {\n    if (!initialServerDataBuffer)\n      throw new Error('Unexpected server data: missing bootstrap script.')\n\n    if (initialServerDataWriter) {\n      initialServerDataWriter.enqueue(encoder.encode(seg[1]))\n    } else {\n      initialServerDataBuffer.push(seg[1])\n    }\n  } else if (seg[0] === 2) {\n    initialFormStateData = seg[1]\n  } else if (seg[0] === 3) {\n    if (!initialServerDataBuffer)\n      throw new Error('Unexpected server data: missing bootstrap script.')\n\n    // Decode the base64 string back to binary data.\n    const binaryString = atob(seg[1])\n    const decodedChunk = new Uint8Array(binaryString.length)\n    for (var i = 0; i < binaryString.length; i++) {\n      decodedChunk[i] = binaryString.charCodeAt(i)\n    }\n\n    if (initialServerDataWriter) {\n      initialServerDataWriter.enqueue(decodedChunk)\n    } else {\n      initialServerDataBuffer.push(decodedChunk)\n    }\n  }\n}\n\nfunction isStreamErrorOrUnfinished(ctr: ReadableStreamDefaultController) {\n  // If `desiredSize` is null, it means the stream is closed or errored. If it is lower than 0, the stream is still unfinished.\n  return ctr.desiredSize === null || ctr.desiredSize < 0\n}\n\n// There might be race conditions between `nextServerDataRegisterWriter` and\n// `DOMContentLoaded`. The former will be called when React starts to hydrate\n// the root, the latter will be called when the DOM is fully loaded.\n// For streaming, the former is called first due to partial hydration.\n// For non-streaming, the latter can be called first.\n// Hence, we use two variables `initialServerDataLoaded` and\n// `initialServerDataFlushed` to make sure the writer will be closed and\n// `initialServerDataBuffer` will be cleared in the right time.\nfunction nextServerDataRegisterWriter(ctr: ReadableStreamDefaultController) {\n  if (initialServerDataBuffer) {\n    initialServerDataBuffer.forEach((val) => {\n      ctr.enqueue(typeof val === 'string' ? encoder.encode(val) : val)\n    })\n    if (initialServerDataLoaded && !initialServerDataFlushed) {\n      if (isStreamErrorOrUnfinished(ctr)) {\n        ctr.error(\n          new Error(\n            'The connection to the page was unexpectedly closed, possibly due to the stop button being clicked, loss of Wi-Fi, or an unstable internet connection.'\n          )\n        )\n      } else {\n        ctr.close()\n      }\n      initialServerDataFlushed = true\n      initialServerDataBuffer = undefined\n    }\n  }\n\n  initialServerDataWriter = ctr\n}\n\n// When `DOMContentLoaded`, we can close all pending writers to finish hydration.\nconst DOMContentLoaded = function () {\n  if (initialServerDataWriter && !initialServerDataFlushed) {\n    initialServerDataWriter.close()\n    initialServerDataFlushed = true\n    initialServerDataBuffer = undefined\n  }\n  initialServerDataLoaded = true\n}\n\n// It's possible that the DOM is already loaded.\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', DOMContentLoaded, false)\n} else {\n  // Delayed in marco task to ensure it's executed later than hydration\n  setTimeout(DOMContentLoaded)\n}\n\nconst nextServerDataLoadingGlobal = (self.__next_f = self.__next_f || [])\nnextServerDataLoadingGlobal.forEach(nextServerDataCallback)\nnextServerDataLoadingGlobal.push = nextServerDataCallback\n\nconst readable = new ReadableStream({\n  start(controller) {\n    nextServerDataRegisterWriter(controller)\n  },\n})\n\nconst initialServerResponse = createFromReadableStream<InitialRSCPayload>(\n  readable,\n  { callServer, findSourceMapURL }\n)\n\n// React overrides `.then` and doesn't return a new promise chain,\n// so we wrap the action queue in a promise to ensure that its value\n// is defined when the promise resolves.\n// https://github.com/facebook/react/blob/163365a07872337e04826c4f501565d43dbd2fd4/packages/react-client/src/ReactFlightClient.js#L189-L190\nconst pendingActionQueue: Promise<AppRouterActionQueue> = new Promise(\n  (resolve, reject) => {\n    initialServerResponse.then(\n      (initialRSCPayload) => {\n        // setAppBuildId should be called only once, during JS initialization\n        // and before any components have hydrated.\n        setAppBuildId(initialRSCPayload.b)\n\n        resolve(\n          createMutableActionQueue(\n            createInitialRouterState({\n              initialFlightData: initialRSCPayload.f,\n              initialCanonicalUrlParts: initialRSCPayload.c,\n              initialParallelRoutes: new Map(),\n              location: window.location,\n              couldBeIntercepted: initialRSCPayload.i,\n              postponed: initialRSCPayload.s,\n              prerendered: initialRSCPayload.S,\n            })\n          )\n        )\n      },\n      (err: Error) => reject(err)\n    )\n  }\n)\n\nfunction ServerRoot(): React.ReactNode {\n  const initialRSCPayload = use(initialServerResponse)\n  const actionQueue = use<AppRouterActionQueue>(pendingActionQueue)\n\n  const router = (\n    <AppRouter\n      actionQueue={actionQueue}\n      globalErrorComponentAndStyles={initialRSCPayload.G}\n      assetPrefix={initialRSCPayload.p}\n    />\n  )\n\n  if (process.env.NODE_ENV === 'development' && initialRSCPayload.m) {\n    // We provide missing slot information in a context provider only during development\n    // as we log some additional information about the missing slots in the console.\n    return (\n      <MissingSlotContext value={initialRSCPayload.m}>\n        {router}\n      </MissingSlotContext>\n    )\n  }\n\n  return router\n}\n\nconst StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE_APP\n  ? React.StrictMode\n  : React.Fragment\n\nfunction Root({ children }: React.PropsWithChildren<{}>) {\n  if (process.env.__NEXT_TEST_MODE) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      window.__NEXT_HYDRATED = true\n      window.__NEXT_HYDRATED_AT = performance.now()\n      window.__NEXT_HYDRATED_CB?.()\n    }, [])\n  }\n\n  return children\n}\n\nconst reactRootOptions: ReactDOMClient.RootOptions = {\n  onRecoverableError,\n  onCaughtError,\n  onUncaughtError,\n}\n\nexport function hydrate() {\n  const reactEl = (\n    <StrictModeIfEnabled>\n      <HeadManagerContext.Provider value={{ appDir: true }}>\n        <Root>\n          <ServerRoot />\n        </Root>\n      </HeadManagerContext.Provider>\n    </StrictModeIfEnabled>\n  )\n\n  if (\n    document.documentElement.id === '__next_error__' ||\n    !!window.__next_root_layout_missing_tags?.length\n  ) {\n    let element = reactEl\n    // Server rendering failed, fall back to client-side rendering\n    if (\n      process.env.NODE_ENV !== 'production' &&\n      shouldRenderRootLevelErrorOverlay()\n    ) {\n      const { createRootLevelDevOverlayElement } =\n        require('./components/react-dev-overlay/app/client-entry') as typeof import('./components/react-dev-overlay/app/client-entry')\n\n      // Note this won't cause hydration mismatch because we are doing CSR w/o hydration\n      element = createRootLevelDevOverlayElement(element)\n    }\n\n    ReactDOMClient.createRoot(appElement, reactRootOptions).render(element)\n  } else {\n    React.startTransition(() => {\n      ReactDOMClient.hydrateRoot(appElement, reactEl, {\n        ...reactRootOptions,\n        formState: initialFormStateData,\n      })\n    })\n  }\n\n  // TODO-APP: Remove this logic when Float has GC built-in in development.\n  if (process.env.NODE_ENV !== 'production') {\n    const { linkGc } =\n      require('./app-link-gc') as typeof import('./app-link-gc')\n    linkGc()\n  }\n}\n"],"names":["ReactDOMClient","React","use","createFromReadableStream","HeadManagerContext","onRecoverableError","onCaughtError","onUncaughtError","callServer","findSourceMapURL","createMutableActionQueue","AppRouter","createInitialRouterState","MissingSlotContext","setAppBuildId","shouldRenderRootLevelErrorOverlay","appElement","document","encoder","TextEncoder","initialServerDataBuffer","undefined","initialServerDataWriter","initialServerDataLoaded","initialServerDataFlushed","initialFormStateData","nextServerDataCallback","seg","Error","enqueue","encode","push","binaryString","atob","decodedChunk","Uint8Array","length","i","charCodeAt","isStreamErrorOrUnfinished","ctr","desiredSize","nextServerDataRegisterWriter","forEach","val","error","close","DOMContentLoaded","readyState","addEventListener","setTimeout","nextServerDataLoadingGlobal","self","__next_f","readable","ReadableStream","start","controller","initialServerResponse","pendingActionQueue","Promise","resolve","reject","then","initialRSCPayload","b","initialFlightData","f","initialCanonicalUrlParts","c","initialParallelRoutes","Map","location","window","couldBeIntercepted","postponed","s","prerendered","S","err","ServerRoot","actionQueue","router","globalErrorComponentAndStyles","G","assetPrefix","p","process","env","NODE_ENV","m","value","StrictModeIfEnabled","__NEXT_STRICT_MODE_APP","StrictMode","Fragment","Root","children","__NEXT_TEST_MODE","useEffect","__NEXT_HYDRATED","__NEXT_HYDRATED_AT","performance","now","__NEXT_HYDRATED_CB","reactRootOptions","hydrate","reactEl","Provider","appDir","documentElement","id","__next_root_layout_missing_tags","element","createRootLevelDevOverlayElement","require","createRoot","render","startTransition","hydrateRoot","formState","linkGc"],"mappings":"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"}

package/dist/esm/client/app-next-dev.js

@@ -1,5 +1,6 @@
 // TODO-APP: hydration warning
 import './app-webpack';
+import '../lib/require-instrumentation-client';
 import { appBootstrap } from './app-bootstrap';
 import { initializeDevBuildIndicatorForAppRouter } from './dev/dev-build-indicator/initialize-for-app-router';
 appBootstrap(()=>{

package/dist/esm/client/app-next-dev.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/app-next-dev.ts"],"sourcesContent":["// TODO-APP: hydration warning\n\nimport './app-webpack'\nimport { appBootstrap } from './app-bootstrap'\nimport { initializeDevBuildIndicatorForAppRouter } from './dev/dev-build-indicator/initialize-for-app-router'\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  hydrate()\n  initializeDevBuildIndicatorForAppRouter()\n})\n"],"names":["appBootstrap","initializeDevBuildIndicatorForAppRouter","hydrate","require"],"mappings":"AAAA,8BAA8B;AAE9B,OAAO,gBAAe;AACtB,SAASA,YAAY,QAAQ,kBAAiB;AAC9C,SAASC,uCAAuC,QAAQ,sDAAqD;AAE7GD,aAAa;IACX,MAAM,EAAEE,OAAO,EAAE,GAAGC,QAAQ;IAC5BD;IACAD;AACF"}
+{"version":3,"sources":["../../src/client/app-next-dev.ts"],"sourcesContent":["// TODO-APP: hydration warning\n\nimport './app-webpack'\nimport '../lib/require-instrumentation-client'\nimport { appBootstrap } from './app-bootstrap'\nimport { initializeDevBuildIndicatorForAppRouter } from './dev/dev-build-indicator/initialize-for-app-router'\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  hydrate()\n  initializeDevBuildIndicatorForAppRouter()\n})\n"],"names":["appBootstrap","initializeDevBuildIndicatorForAppRouter","hydrate","require"],"mappings":"AAAA,8BAA8B;AAE9B,OAAO,gBAAe;AACtB,OAAO,wCAAuC;AAC9C,SAASA,YAAY,QAAQ,kBAAiB;AAC9C,SAASC,uCAAuC,QAAQ,sDAAqD;AAE7GD,aAAa;IACX,MAAM,EAAEE,OAAO,EAAE,GAAGC,QAAQ;IAC5BD;IACAD;AACF"}

package/dist/esm/client/app-next-turbopack.js

@@ -1,4 +1,5 @@
 // TODO-APP: hydration warning
+import '../lib/require-instrumentation-client';
 import { appBootstrap } from './app-bootstrap';
 window.next.version += '-turbo';
 self.__webpack_hash__ = '';

package/dist/esm/client/app-next-turbopack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/app-next-turbopack.ts"],"sourcesContent":["// TODO-APP: hydration warning\n\nimport { appBootstrap } from './app-bootstrap'\n\nwindow.next.version += '-turbo'\n;(self as any).__webpack_hash__ = ''\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  hydrate()\n\n  if (process.env.NODE_ENV !== 'production') {\n    const { initializeDevBuildIndicatorForAppRouter } =\n      require('./dev/dev-build-indicator/initialize-for-app-router') as typeof import('./dev/dev-build-indicator/initialize-for-app-router')\n    initializeDevBuildIndicatorForAppRouter()\n  }\n})\n"],"names":["appBootstrap","window","next","version","self","__webpack_hash__","hydrate","require","process","env","NODE_ENV","initializeDevBuildIndicatorForAppRouter"],"mappings":"AAAA,8BAA8B;AAE9B,SAASA,YAAY,QAAQ,kBAAiB;AAE9CC,OAAOC,IAAI,CAACC,OAAO,IAAI;AACrBC,KAAaC,gBAAgB,GAAG;AAElCL,aAAa;IACX,MAAM,EAAEM,OAAO,EAAE,GAAGC,QAAQ;IAC5BD;IAEA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAM,EAAEC,uCAAuC,EAAE,GAC/CJ,QAAQ;QACVI;IACF;AACF"}
+{"version":3,"sources":["../../src/client/app-next-turbopack.ts"],"sourcesContent":["// TODO-APP: hydration warning\n\nimport '../lib/require-instrumentation-client'\nimport { appBootstrap } from './app-bootstrap'\n\nwindow.next.version += '-turbo'\n;(self as any).__webpack_hash__ = ''\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  hydrate()\n\n  if (process.env.NODE_ENV !== 'production') {\n    const { initializeDevBuildIndicatorForAppRouter } =\n      require('./dev/dev-build-indicator/initialize-for-app-router') as typeof import('./dev/dev-build-indicator/initialize-for-app-router')\n    initializeDevBuildIndicatorForAppRouter()\n  }\n})\n"],"names":["appBootstrap","window","next","version","self","__webpack_hash__","hydrate","require","process","env","NODE_ENV","initializeDevBuildIndicatorForAppRouter"],"mappings":"AAAA,8BAA8B;AAE9B,OAAO,wCAAuC;AAC9C,SAASA,YAAY,QAAQ,kBAAiB;AAE9CC,OAAOC,IAAI,CAACC,OAAO,IAAI;AACrBC,KAAaC,gBAAgB,GAAG;AAElCL,aAAa;IACX,MAAM,EAAEM,OAAO,EAAE,GAAGC,QAAQ;IAC5BD;IAEA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,MAAM,EAAEC,uCAAuC,EAAE,GAC/CJ,QAAQ;QACVI;IACF;AACF"}

package/dist/esm/client/app-next.js

@@ -1,6 +1,7 @@
 // This import must go first because it needs to patch webpack chunk loading
 // before React patches chunk loading.
 import './app-webpack';
+import '../lib/require-instrumentation-client';
 import { appBootstrap } from './app-bootstrap';
 appBootstrap(()=>{
     const { hydrate } = require('./app-index');

package/dist/esm/client/app-next.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/app-next.ts"],"sourcesContent":["// This import must go first because it needs to patch webpack chunk loading\n// before React patches chunk loading.\nimport './app-webpack'\nimport { appBootstrap } from './app-bootstrap'\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  // Include app-router and layout-router in the main chunk\n  require('next/dist/client/components/app-router')\n  require('next/dist/client/components/layout-router')\n  hydrate()\n})\n"],"names":["appBootstrap","hydrate","require"],"mappings":"AAAA,4EAA4E;AAC5E,sCAAsC;AACtC,OAAO,gBAAe;AACtB,SAASA,YAAY,QAAQ,kBAAiB;AAE9CA,aAAa;IACX,MAAM,EAAEC,OAAO,EAAE,GAAGC,QAAQ;IAC5B,yDAAyD;IACzDA,QAAQ;IACRA,QAAQ;IACRD;AACF"}
+{"version":3,"sources":["../../src/client/app-next.ts"],"sourcesContent":["// This import must go first because it needs to patch webpack chunk loading\n// before React patches chunk loading.\nimport './app-webpack'\nimport '../lib/require-instrumentation-client'\nimport { appBootstrap } from './app-bootstrap'\n\nappBootstrap(() => {\n  const { hydrate } = require('./app-index')\n  // Include app-router and layout-router in the main chunk\n  require('next/dist/client/components/app-router')\n  require('next/dist/client/components/layout-router')\n  hydrate()\n})\n"],"names":["appBootstrap","hydrate","require"],"mappings":"AAAA,4EAA4E;AAC5E,sCAAsC;AACtC,OAAO,gBAAe;AACtB,OAAO,wCAAuC;AAC9C,SAASA,YAAY,QAAQ,kBAAiB;AAE9CA,aAAa;IACX,MAAM,EAAEC,OAAO,EAAE,GAAGC,QAAQ;IAC5B,yDAAyD;IACzDA,QAAQ;IACRA,QAAQ;IACRD;AACF"}

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

@@ -1,36 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Anser from 'next/dist/compiled/anser';
-import stripAnsi from 'next/dist/compiled/strip-ansi';
 import { useMemo } from 'react';
 import { HotlinkedText } from '../hot-linked-text';
 import { getFrameSource } from '../../../utils/stack-frame';
 import { useOpenInEditor } from '../../utils/use-open-in-editor';
 import { ExternalIcon } from '../../icons/external';
 import { FileIcon } from '../../icons/file';
+import { formatCodeFrame, groupCodeFrameLines, parseLineNumberFromCodeFrameLine } from './parse-code-frame';
 export function CodeFrame(param) {
     let { stackFrame, codeFrame } = param;
     var _stackFrame_file;
-    // Strip leading spaces out of the code frame:
-    const formattedFrame = 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(stripAnsi(line)) === null ? null : /^>? +\d+ +\| ( *)/.exec(stripAnsi(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 = useMemo(()=>formatCodeFrame(codeFrame), [
         codeFrame
     ]);
-    const decoded = useMemo(()=>{
-        return Anser.ansiToJson(formattedFrame, {
-            json: true,
-            use_classes: true,
-            remove_empty: true
-        });
-    }, [
+    const decodedLines = useMemo(()=>groupCodeFrameLines(formattedFrame), [
         formattedFrame
     ]);
     const open = useOpenInEditor({
@@ -83,23 +65,36 @@ export function CodeFrame(param) {
             }),
             /*#__PURE__*/ _jsx("pre", {
                 className: "code-frame-pre",
-                children: decoded.map((entry, index)=>/*#__PURE__*/ _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 } = parseLineNumberFromCodeFrameLine(line, stackFrame);
+                    const lineNumberProps = {};
+                    if (lineNumber) {
+                        lineNumberProps['data-nextjs-codeframe-line'] = lineNumber;
+                    }
+                    if (isErroredLine) {
+                        lineNumberProps['data-nextjs-codeframe-line--errored'] = true;
+                    }
+                    return /*#__PURE__*/ _jsx("div", {
+                        ...lineNumberProps,
+                        children: line.map((entry, entryIndex)=>/*#__PURE__*/ _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);
+                })
             })
         ]
     });
 }
-export 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 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';
 
 //# sourceMappingURL=code-frame.js.map

package/dist/esm/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":["Anser","stripAnsi","useMemo","HotlinkedText","getFrameSource","useOpenInEditor","ExternalIcon","FileIcon","CodeFrame","stackFrame","codeFrame","formattedFrame","lines","split","miniLeadingSpacesLength","map","line","exec","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","ansiToJson","json","use_classes","remove_empty","open","file","lineNumber","column","fileExtension","div","data-nextjs-codeframe","className","p","span","lang","data-text","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","width","height","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content","CODE_FRAME_STYLES"],"mappings":"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"}
+{"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":["useMemo","HotlinkedText","getFrameSource","useOpenInEditor","ExternalIcon","FileIcon","formatCodeFrame","groupCodeFrameLines","parseLineNumberFromCodeFrameLine","CodeFrame","stackFrame","codeFrame","formattedFrame","decodedLines","open","file","lineNumber","column","fileExtension","split","pop","div","data-nextjs-codeframe","className","p","span","lang","data-text","text","methodName","button","aria-label","data-with-open-in-editor-link-source-file","onClick","data-icon","width","height","pre","map","line","lineIndex","isErroredLine","lineNumberProps","entry","entryIndex","style","color","fg","undefined","decoration","fontWeight","fontStyle","content","CODE_FRAME_STYLES"],"mappings":";AACA,SAASA,OAAO,QAAQ,QAAO;AAC/B,SAASC,aAAa,QAAQ,qBAAoB;AAClD,SAASC,cAAc,QAAQ,6BAA4B;AAC3D,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,YAAY,QAAQ,uBAAsB;AACnD,SAASC,QAAQ,QAAQ,mBAAkB;AAC3C,SACEC,eAAe,EACfC,mBAAmB,EACnBC,gCAAgC,QAC3B,qBAAoB;AAI3B,OAAO,SAASC,UAAU,KAAyC;IAAzC,IAAA,EAAEC,UAAU,EAAEC,SAAS,EAAkB,GAAzC;QAgBFD;IAftB,MAAME,iBAAiBZ,QACrB,IAAMM,gBAAgBK,YACtB;QAACA;KAAU;IAEb,MAAME,eAAeb,QACnB,IAAMO,oBAAoBK,iBAC1B;QAACA;KAAe;IAGlB,MAAME,OAAOX,gBAAgB;QAC3BY,MAAML,WAAWK,IAAI;QACrBC,YAAYN,WAAWM,UAAU;QACjCC,QAAQP,WAAWO,MAAM;IAC3B;IAEA,MAAMC,gBAAgBR,+BAAAA,mBAAAA,WAAYK,IAAI,qBAAhBL,iBAAkBS,KAAK,CAAC,KAAKC,GAAG;IAEtD,gCAAgC;IAChC,qBACE,MAACC;QAAIC,uBAAqB;;0BACxB,KAACD;gBAAIE,WAAU;0BAMb,cAAA,MAACC;oBAAED,WAAU;;sCACX,KAACE;4BAAKF,WAAU;sCACd,cAAA,KAAClB;gCAASqB,MAAMR;;;sCAElB,MAACO;4BAAKE,WAAS;;gCACZzB,eAAeQ;gCAAY;gCAAG;8CAC/B,KAACT;oCAAc2B,MAAMlB,WAAWmB,UAAU;;;;sCAE5C,KAACC;4BACCC,cAAW;4BACXC,2CAAyC;4BACzCC,SAASnB;sCAET,cAAA,KAACW;gCAAKF,WAAU;gCAAkBW,aAAU;0CAC1C,cAAA,KAAC9B;oCAAa+B,OAAO;oCAAIC,QAAQ;;;;;;;0BAKzC,KAACC;gBAAId,WAAU;0BACZV,aAAayB,GAAG,CAAC,CAACC,MAAMC;oBACvB,MAAM,EAAExB,UAAU,EAAEyB,aAAa,EAAE,GACjCjC,iCAAiC+B,MAAM7B;oBAEzC,MAAMgC,kBAAoD,CAAC;oBAC3D,IAAI1B,YAAY;wBACd0B,eAAe,CAAC,6BAA6B,GAAG1B;oBAClD;oBACA,IAAIyB,eAAe;wBACjBC,eAAe,CAAC,sCAAsC,GAAG;oBAC3D;oBAEA,qBACE,KAACrB;wBAA+B,GAAGqB,eAAe;kCAC/CH,KAAKD,GAAG,CAAC,CAACK,OAAOC,2BAChB,KAACnB;gCAECoB,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,UAAOJ;gBAqBtB;;;;AAIR;AAEA,OAAO,MAAMa,oBAAqB,qgFAmHjC"}

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

@@ -0,0 +1,58 @@
+import Anser from 'next/dist/compiled/anser';
+import stripAnsi from 'next/dist/compiled/strip-ansi';
+// Strip leading spaces out of the code frame
+export 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(stripAnsi(line)) === null ? null : /^>? +\d+ +\| ( *)/.exec(stripAnsi(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');
+}
+export function groupCodeFrameLines(formattedFrame) {
+    // Map the decoded lines to a format that can be rendered
+    const decoded = Anser.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;
+}
+export 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())
+    };
+}
+
+//# sourceMappingURL=parse-code-frame.js.map

package/dist/esm/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":["Anser","stripAnsi","formatCodeFrame","codeFrame","lines","split","miniLeadingSpacesLength","map","line","exec","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","groupCodeFrameLines","formattedFrame","decoded","ansiToJson","json","use_classes","remove_empty","token","content","push","parseLineNumberFromCodeFrameLine","stackFrame","lineNumberToken","lineNumber","trim","isErroredLine","toString"],"mappings":"AACA,OAAOA,WAAoC,2BAA0B;AACrE,OAAOC,eAAe,gCAA+B;AAErD,6CAA6C;AAC7C,OAAO,SAASC,gBAAgBC,SAAiB;IAC/C,MAAMC,QAAQD,UAAUE,KAAK,CAAC;IAE9B,wEAAwE;IACxE,MAAMC,0BAA0BF,MAC7BG,GAAG,CAAC,CAACC,OACJ,oBAAoBC,IAAI,CAACR,UAAUO,WAAW,OAC1C,OACA,oBAAoBC,IAAI,CAACR,UAAUO,QAExCE,MAAM,CAACC,SACPJ,GAAG,CAAC,CAACK,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,IAAIf,0BAA0B,GAAG;QAC/B,OAAOF,MACJG,GAAG,CAAC,CAACC,MAAMc,IACV,CAAEA,CAAAA,IAAId,KAAKe,OAAO,CAAC,IAAG,IAClBf,KAAKgB,SAAS,CAAC,GAAGF,KAClBd,KAAKgB,SAAS,CAACF,GAAGG,OAAO,CAAC,AAAC,UAAOnB,0BAAwB,KAAI,MAC9DE,MAELkB,IAAI,CAAC;IACV;IACA,OAAOtB,MAAMsB,IAAI,CAAC;AACpB;AAEA,OAAO,SAASC,oBAAoBC,cAAsB;IACxD,yDAAyD;IACzD,MAAMC,UAAU7B,MAAM8B,UAAU,CAACF,gBAAgB;QAC/CG,MAAM;QACNC,aAAa;QACbC,cAAc;IAChB;IACA,MAAM7B,QAA4B,EAAE;IAEpC,IAAII,OAAuB,EAAE;IAC7B,KAAK,MAAM0B,SAASL,QAAS;QAC3B,IAAIK,MAAMC,OAAO,KAAK,MAAM;YAC1B/B,MAAMgC,IAAI,CAAC5B;YACXA,OAAO,EAAE;QACX,OAAO;YACLA,KAAK4B,IAAI,CAACF;QACZ;IACF;IACA,IAAI1B,KAAKU,MAAM,GAAG,GAAG;QACnBd,MAAMgC,IAAI,CAAC5B;IACb;IAEA,OAAOJ;AACT;AAEA,OAAO,SAASiC,iCACd7B,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,OAAS2B,OAAO,MAAK,OAAO3B,EAAAA,UAAAA,IAAI,CAAC,EAAE,qBAAPA,QAAS2B,OAAO,MAAK,KAAK;YAE3CI,kCAAAA;QADbA,kBAAkB/B,IAAI,CAAC,EAAE;QACzBgC,aAAaD,oCAAAA,2BAAAA,gBAAiBJ,OAAO,sBAAxBI,mCAAAA,yBAA0Bd,OAAO,CAAC,KAAK,wBAAvCc,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/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.js

@@ -178,7 +178,7 @@ export function UserPreferences(param) {
                             className: "preference-header",
                             children: [
                                 /*#__PURE__*/ _jsx("label", {
-                                    htmlFor: "hide-dev-tools",
+                                    id: "hide-dev-tools",
                                     children: "Hide Dev Tools for this session"
                                 }),
                                 /*#__PURE__*/ _jsx("p", {
@@ -190,7 +190,7 @@ export function UserPreferences(param) {
                         /*#__PURE__*/ _jsx("div", {
                             className: "preference-control",
                             children: /*#__PURE__*/ _jsxs("button", {
-                                id: "hide-dev-tools",
+                                "aria-describedby": "hide-dev-tools",
                                 name: "hide-dev-tools",
                                 "data-hide-dev-tools": true,
                                 className: "action-button",

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx"],"sourcesContent":["import { useState, type HTMLProps } from 'react'\nimport { css } from '../../../../../utils/css'\nimport EyeIcon from '../../../../icons/eye-icon'\nimport { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../../shared'\nimport LightIcon from '../../../../icons/light-icon'\nimport DarkIcon from '../../../../icons/dark-icon'\nimport SystemIcon from '../../../../icons/system-icon'\nimport type { DevToolsInfoPropsCore } from './dev-tools-info'\nimport { DevToolsInfo } from './dev-tools-info'\nimport {\n  getInitialTheme,\n  NEXT_DEV_TOOLS_SCALE,\n  type DevToolsIndicatorPosition,\n  type DevToolsScale,\n} from './preferences'\n\nexport function UserPreferences({\n  setPosition,\n  position,\n  hide,\n  scale,\n  setScale,\n  ...props\n}: {\n  setPosition: (position: DevToolsIndicatorPosition) => void\n  position: DevToolsIndicatorPosition\n  scale: DevToolsScale\n  setScale: (value: DevToolsScale) => void\n  hide: () => void\n} & DevToolsInfoPropsCore &\n  Omit<HTMLProps<HTMLDivElement>, 'size'>) {\n  // derive initial theme from system preference\n  const [theme, setTheme] = useState(getInitialTheme())\n\n  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n    const portal = document.querySelector('nextjs-portal')\n    if (!portal) return\n\n    setTheme(e.target.value)\n\n    if (e.target.value === 'system') {\n      portal.classList.remove('dark')\n      portal.classList.remove('light')\n      localStorage.removeItem(STORAGE_KEY_THEME)\n      return\n    }\n\n    if (e.target.value === 'dark') {\n      portal.classList.add('dark')\n      portal.classList.remove('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'dark')\n    } else {\n      portal.classList.remove('dark')\n      portal.classList.add('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'light')\n    }\n  }\n\n  function handlePositionChange(e: React.ChangeEvent<HTMLSelectElement>) {\n    setPosition(e.target.value as DevToolsIndicatorPosition)\n    localStorage.setItem(STORAGE_KEY_POSITION, e.target.value)\n  }\n\n  function handleSizeChange({ target }: React.ChangeEvent<HTMLSelectElement>) {\n    const value = Number(target.value) as DevToolsScale\n    setScale(value)\n  }\n\n  return (\n    <DevToolsInfo title=\"Preferences\" {...props}>\n      <div className=\"preferences-container\">\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"theme\">Theme</label>\n            <p className=\"preference-description\">\n              Select your theme preference.\n            </p>\n          </div>\n          <Select\n            id=\"theme\"\n            name=\"theme\"\n            prefix={<ThemeIcon theme={theme as 'dark' | 'light' | 'system'} />}\n            value={theme}\n            onChange={handleThemeChange}\n          >\n            <option value=\"system\">System</option>\n            <option value=\"light\">Light</option>\n            <option value=\"dark\">Dark</option>\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"position\">Position</label>\n            <p className=\"preference-description\">\n              Adjust the placement of your dev tools.\n            </p>\n          </div>\n          <Select\n            id=\"position\"\n            name=\"position\"\n            value={position}\n            onChange={handlePositionChange}\n          >\n            <option value=\"bottom-left\">Bottom Left</option>\n            <option value=\"bottom-right\">Bottom Right</option>\n            <option value=\"top-left\">Top Left</option>\n            <option value=\"top-right\">Top Right</option>\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"size\">Size</label>\n            <p className=\"preference-description\">\n              Adjust the size of your dev tools.\n            </p>\n          </div>\n          <Select\n            id=\"size\"\n            name=\"size\"\n            value={scale}\n            onChange={handleSizeChange}\n          >\n            {Object.entries(NEXT_DEV_TOOLS_SCALE).map(([key, value]) => {\n              return (\n                <option value={value} key={key}>\n                  {key}\n                </option>\n              )\n            })}\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"hide-dev-tools\">\n              Hide Dev Tools for this session\n            </label>\n            <p className=\"preference-description\">\n              Hide Dev Tools until you restart your dev server, or 1 day.\n            </p>\n          </div>\n          <div className=\"preference-control\">\n            <button\n              id=\"hide-dev-tools\"\n              name=\"hide-dev-tools\"\n              data-hide-dev-tools\n              className=\"action-button\"\n              onClick={hide}\n            >\n              <EyeIcon />\n              <span>Hide</span>\n            </button>\n          </div>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label>Disable Dev Tools for this project</label>\n            <p className=\"preference-description\">\n              To disable this UI completely, set{' '}\n              <code className=\"dev-tools-info-code\">devIndicators: false</code>{' '}\n              in your <code className=\"dev-tools-info-code\">next.config</code>{' '}\n              file.\n            </p>\n          </div>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nfunction Select({\n  children,\n  prefix,\n  ...props\n}: {\n  prefix?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLSelectElement>, 'prefix'>) {\n  return (\n    <div className=\"select-button\">\n      {prefix}\n      <select {...props}>{children}</select>\n      <ChevronDownIcon />\n    </div>\n  )\n}\n\nfunction ThemeIcon({ theme }: { theme: 'dark' | 'light' | 'system' }) {\n  switch (theme) {\n    case 'system':\n      return <SystemIcon />\n    case 'dark':\n      return <DarkIcon />\n    case 'light':\n      return <LightIcon />\n    default:\n      return null\n  }\n}\n\nexport const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`\n  .preferences-container {\n    padding: 8px 6px;\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    .preferences-container {\n      width: 480px;\n    }\n  }\n\n  .preference-section:first-child {\n    padding-top: 0;\n  }\n\n  .preference-section {\n    padding: 12px 0;\n    border-bottom: 1px solid var(--color-gray-400);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n  }\n\n  .preference-section:last-child {\n    border-bottom: none;\n  }\n\n  .preference-header {\n    margin-bottom: 0;\n    flex: 1;\n  }\n\n  .preference-header label {\n    font-size: var(--size-14);\n    font-weight: 500;\n    color: var(--color-gray-1000);\n    margin: 0;\n  }\n\n  .preference-description {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    margin: 0;\n  }\n\n  .select-button,\n  .action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-lg);\n    font-weight: 400;\n    font-size: var(--size-14);\n    color: var(--color-gray-1000);\n    padding: 6px 8px;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .select-button {\n    &:focus-within {\n      outline: var(--focus-ring);\n    }\n\n    select {\n      all: unset;\n    }\n  }\n\n  :global(.icon) {\n    width: 18px;\n    height: 18px;\n    color: #666;\n  }\n`\n\nfunction ChevronDownIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M14.0607 5.49999L13.5303 6.03032L8.7071 10.8535C8.31658 11.2441 7.68341 11.2441 7.29289 10.8535L2.46966 6.03032L1.93933 5.49999L2.99999 4.43933L3.53032 4.96966L7.99999 9.43933L12.4697 4.96966L13 4.43933L14.0607 5.49999Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["useState","css","EyeIcon","STORAGE_KEY_POSITION","STORAGE_KEY_THEME","LightIcon","DarkIcon","SystemIcon","DevToolsInfo","getInitialTheme","NEXT_DEV_TOOLS_SCALE","UserPreferences","setPosition","position","hide","scale","setScale","props","theme","setTheme","handleThemeChange","e","portal","document","querySelector","target","value","classList","remove","localStorage","removeItem","add","setItem","handlePositionChange","handleSizeChange","Number","title","div","className","label","htmlFor","p","Select","id","name","prefix","ThemeIcon","onChange","option","Object","entries","map","key","button","data-hide-dev-tools","onClick","span","code","children","select","ChevronDownIcon","DEV_TOOLS_INFO_USER_PREFERENCES_STYLES","svg","width","height","viewBox","aria-hidden","path","fillRule","clipRule","d","fill"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx"],"sourcesContent":["import { useState, type HTMLProps } from 'react'\nimport { css } from '../../../../../utils/css'\nimport EyeIcon from '../../../../icons/eye-icon'\nimport { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../../shared'\nimport LightIcon from '../../../../icons/light-icon'\nimport DarkIcon from '../../../../icons/dark-icon'\nimport SystemIcon from '../../../../icons/system-icon'\nimport type { DevToolsInfoPropsCore } from './dev-tools-info'\nimport { DevToolsInfo } from './dev-tools-info'\nimport {\n  getInitialTheme,\n  NEXT_DEV_TOOLS_SCALE,\n  type DevToolsIndicatorPosition,\n  type DevToolsScale,\n} from './preferences'\n\nexport function UserPreferences({\n  setPosition,\n  position,\n  hide,\n  scale,\n  setScale,\n  ...props\n}: {\n  setPosition: (position: DevToolsIndicatorPosition) => void\n  position: DevToolsIndicatorPosition\n  scale: DevToolsScale\n  setScale: (value: DevToolsScale) => void\n  hide: () => void\n} & DevToolsInfoPropsCore &\n  Omit<HTMLProps<HTMLDivElement>, 'size'>) {\n  // derive initial theme from system preference\n  const [theme, setTheme] = useState(getInitialTheme())\n\n  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n    const portal = document.querySelector('nextjs-portal')\n    if (!portal) return\n\n    setTheme(e.target.value)\n\n    if (e.target.value === 'system') {\n      portal.classList.remove('dark')\n      portal.classList.remove('light')\n      localStorage.removeItem(STORAGE_KEY_THEME)\n      return\n    }\n\n    if (e.target.value === 'dark') {\n      portal.classList.add('dark')\n      portal.classList.remove('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'dark')\n    } else {\n      portal.classList.remove('dark')\n      portal.classList.add('light')\n      localStorage.setItem(STORAGE_KEY_THEME, 'light')\n    }\n  }\n\n  function handlePositionChange(e: React.ChangeEvent<HTMLSelectElement>) {\n    setPosition(e.target.value as DevToolsIndicatorPosition)\n    localStorage.setItem(STORAGE_KEY_POSITION, e.target.value)\n  }\n\n  function handleSizeChange({ target }: React.ChangeEvent<HTMLSelectElement>) {\n    const value = Number(target.value) as DevToolsScale\n    setScale(value)\n  }\n\n  return (\n    <DevToolsInfo title=\"Preferences\" {...props}>\n      <div className=\"preferences-container\">\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"theme\">Theme</label>\n            <p className=\"preference-description\">\n              Select your theme preference.\n            </p>\n          </div>\n          <Select\n            id=\"theme\"\n            name=\"theme\"\n            prefix={<ThemeIcon theme={theme as 'dark' | 'light' | 'system'} />}\n            value={theme}\n            onChange={handleThemeChange}\n          >\n            <option value=\"system\">System</option>\n            <option value=\"light\">Light</option>\n            <option value=\"dark\">Dark</option>\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"position\">Position</label>\n            <p className=\"preference-description\">\n              Adjust the placement of your dev tools.\n            </p>\n          </div>\n          <Select\n            id=\"position\"\n            name=\"position\"\n            value={position}\n            onChange={handlePositionChange}\n          >\n            <option value=\"bottom-left\">Bottom Left</option>\n            <option value=\"bottom-right\">Bottom Right</option>\n            <option value=\"top-left\">Top Left</option>\n            <option value=\"top-right\">Top Right</option>\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label htmlFor=\"size\">Size</label>\n            <p className=\"preference-description\">\n              Adjust the size of your dev tools.\n            </p>\n          </div>\n          <Select\n            id=\"size\"\n            name=\"size\"\n            value={scale}\n            onChange={handleSizeChange}\n          >\n            {Object.entries(NEXT_DEV_TOOLS_SCALE).map(([key, value]) => {\n              return (\n                <option value={value} key={key}>\n                  {key}\n                </option>\n              )\n            })}\n          </Select>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label id=\"hide-dev-tools\">Hide Dev Tools for this session</label>\n            <p className=\"preference-description\">\n              Hide Dev Tools until you restart your dev server, or 1 day.\n            </p>\n          </div>\n          <div className=\"preference-control\">\n            <button\n              aria-describedby=\"hide-dev-tools\"\n              name=\"hide-dev-tools\"\n              data-hide-dev-tools\n              className=\"action-button\"\n              onClick={hide}\n            >\n              <EyeIcon />\n              <span>Hide</span>\n            </button>\n          </div>\n        </div>\n\n        <div className=\"preference-section\">\n          <div className=\"preference-header\">\n            <label>Disable Dev Tools for this project</label>\n            <p className=\"preference-description\">\n              To disable this UI completely, set{' '}\n              <code className=\"dev-tools-info-code\">devIndicators: false</code>{' '}\n              in your <code className=\"dev-tools-info-code\">next.config</code>{' '}\n              file.\n            </p>\n          </div>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nfunction Select({\n  children,\n  prefix,\n  ...props\n}: {\n  prefix?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLSelectElement>, 'prefix'>) {\n  return (\n    <div className=\"select-button\">\n      {prefix}\n      <select {...props}>{children}</select>\n      <ChevronDownIcon />\n    </div>\n  )\n}\n\nfunction ThemeIcon({ theme }: { theme: 'dark' | 'light' | 'system' }) {\n  switch (theme) {\n    case 'system':\n      return <SystemIcon />\n    case 'dark':\n      return <DarkIcon />\n    case 'light':\n      return <LightIcon />\n    default:\n      return null\n  }\n}\n\nexport const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`\n  .preferences-container {\n    padding: 8px 6px;\n    width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    .preferences-container {\n      width: 480px;\n    }\n  }\n\n  .preference-section:first-child {\n    padding-top: 0;\n  }\n\n  .preference-section {\n    padding: 12px 0;\n    border-bottom: 1px solid var(--color-gray-400);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 24px;\n  }\n\n  .preference-section:last-child {\n    border-bottom: none;\n  }\n\n  .preference-header {\n    margin-bottom: 0;\n    flex: 1;\n  }\n\n  .preference-header label {\n    font-size: var(--size-14);\n    font-weight: 500;\n    color: var(--color-gray-1000);\n    margin: 0;\n  }\n\n  .preference-description {\n    color: var(--color-gray-900);\n    font-size: var(--size-14);\n    margin: 0;\n  }\n\n  .select-button,\n  .action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-lg);\n    font-weight: 400;\n    font-size: var(--size-14);\n    color: var(--color-gray-1000);\n    padding: 6px 8px;\n\n    &:hover {\n      background: var(--color-gray-100);\n    }\n  }\n\n  .select-button {\n    &:focus-within {\n      outline: var(--focus-ring);\n    }\n\n    select {\n      all: unset;\n    }\n  }\n\n  :global(.icon) {\n    width: 18px;\n    height: 18px;\n    color: #666;\n  }\n`\n\nfunction ChevronDownIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M14.0607 5.49999L13.5303 6.03032L8.7071 10.8535C8.31658 11.2441 7.68341 11.2441 7.29289 10.8535L2.46966 6.03032L1.93933 5.49999L2.99999 4.43933L3.53032 4.96966L7.99999 9.43933L12.4697 4.96966L13 4.43933L14.0607 5.49999Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["useState","css","EyeIcon","STORAGE_KEY_POSITION","STORAGE_KEY_THEME","LightIcon","DarkIcon","SystemIcon","DevToolsInfo","getInitialTheme","NEXT_DEV_TOOLS_SCALE","UserPreferences","setPosition","position","hide","scale","setScale","props","theme","setTheme","handleThemeChange","e","portal","document","querySelector","target","value","classList","remove","localStorage","removeItem","add","setItem","handlePositionChange","handleSizeChange","Number","title","div","className","label","htmlFor","p","Select","id","name","prefix","ThemeIcon","onChange","option","Object","entries","map","key","button","aria-describedby","data-hide-dev-tools","onClick","span","code","children","select","ChevronDownIcon","DEV_TOOLS_INFO_USER_PREFERENCES_STYLES","svg","width","height","viewBox","aria-hidden","path","fillRule","clipRule","d","fill"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view';
-export 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 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";
 
 //# sourceMappingURL=component-stack-pseudo-html.js.map

package/dist/esm/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":["PseudoHtmlDiff","PSEUDO_HTML_DIFF_STYLES"],"mappings":"AAAA,SAASA,cAAc,QAAQ,4CAA2C;AAE1E,OAAO,MAAMC,0BAA2B,0rFAwFvC"}
+{"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":["PseudoHtmlDiff","PSEUDO_HTML_DIFF_STYLES"],"mappings":"AAAA,SAASA,cAAc,QAAQ,4CAA2C;AAE1E,OAAO,MAAMC,0BAA2B,mvFAyFvC"}

package/dist/esm/client/index.js

@@ -26,7 +26,7 @@ import { SearchParamsContext, PathParamsContext } from '../shared/lib/hooks-clie
 import { onRecoverableError } from './react-client-callbacks/on-recoverable-error';
 import tracer from './tracing/tracer';
 import { isNextRouterError } from './components/is-next-router-error';
-export const version = "15.3.0-canary.5";
+export const version = "15.3.0-canary.8";
 export let router;
 export const emitter = mitt();
 const looseToArray = (input)=>[].slice.call(input);
@@ -407,6 +407,7 @@ function Root(param) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         React.useEffect(()=>{
             window.__NEXT_HYDRATED = true;
+            window.__NEXT_HYDRATED_AT = performance.now();
             if (window.__NEXT_HYDRATED_CB) {
                 window.__NEXT_HYDRATED_CB();
             }