next 15.2.1-canary.0 → 15.2.1-canary.2

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.2.1-canary.0";
+ */ const version = "15.2.1-canary.2";
 window.next = {
     version,
     appDir: true

package/dist/esm/client/components/react-dev-overlay/server/shared.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/server/shared.ts"],"sourcesContent":["import type { StackFrame } from 'stacktrace-parser'\nimport { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'\nimport isInternal from '../../../../shared/lib/is-internal'\n\nexport type SourcePackage = 'react' | 'next'\n\nexport interface OriginalStackFramesRequest {\n  frames: StackFrame[]\n  isServer: boolean\n  isEdgeServer: boolean\n  isAppDirectory: boolean\n}\n\nexport type OriginalStackFramesResponse = OriginalStackFrameResponseResult[]\n\nexport type OriginalStackFrameResponseResult =\n  PromiseSettledResult<OriginalStackFrameResponse>\n\nexport interface OriginalStackFrameResponse {\n  originalStackFrame?: (StackFrame & { ignored: boolean }) | null\n  originalCodeFrame?: string | null\n  /** We use this to group frames in the error overlay */\n  sourcePackage?: SourcePackage | null\n}\n\n/**\n * It looks up the code frame of the traced source.\n * @note It ignores Next.js/React internals, as these can often be huge bundled files.\n */\nexport function getOriginalCodeFrame(\n  frame: StackFrame,\n  source: string | null,\n  colors: boolean = process.stdout.isTTY\n): string | null {\n  if (!source || isInternal(frame.file)) {\n    return null\n  }\n\n  return codeFrameColumns(\n    source,\n    {\n      start: {\n        // 1-based, but -1 means start line without highlighting\n        line: frame.lineNumber ?? -1,\n        // 1-based, but 0 means whole line without column highlighting\n        column: frame.column ?? 0,\n      },\n    },\n    { forceColor: colors }\n  )\n}\n"],"names":["codeFrameColumns","isInternal","getOriginalCodeFrame","frame","source","colors","process","stdout","isTTY","file","start","line","lineNumber","column","forceColor"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,sCAAqC;AACtE,OAAOC,gBAAgB,qCAAoC;AAuB3D;;;CAGC,GACD,OAAO,SAASC,qBACdC,KAAiB,EACjBC,MAAqB,EACrBC,MAAsC;IAAtCA,IAAAA,mBAAAA,SAAkBC,QAAQC,MAAM,CAACC,KAAK;IAEtC,IAAI,CAACJ,UAAUH,WAAWE,MAAMM,IAAI,GAAG;QACrC,OAAO;IACT;QAOYN,mBAEEA;IAPd,OAAOH,iBACLI,QACA;QACEM,OAAO;YACL,wDAAwD;YACxDC,MAAMR,CAAAA,oBAAAA,MAAMS,UAAU,YAAhBT,oBAAoB,CAAC;YAC3B,8DAA8D;YAC9DU,QAAQV,CAAAA,gBAAAA,MAAMU,MAAM,YAAZV,gBAAgB;QAC1B;IACF,GACA;QAAEW,YAAYT;IAAO;AAEzB"}
+{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/server/shared.ts"],"sourcesContent":["import type { StackFrame } from 'stacktrace-parser'\nimport { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'\nimport isInternal from '../../../../shared/lib/is-internal'\n\nexport interface OriginalStackFramesRequest {\n  frames: StackFrame[]\n  isServer: boolean\n  isEdgeServer: boolean\n  isAppDirectory: boolean\n}\n\nexport type OriginalStackFramesResponse = OriginalStackFrameResponseResult[]\n\nexport type OriginalStackFrameResponseResult =\n  PromiseSettledResult<OriginalStackFrameResponse>\n\nexport interface OriginalStackFrameResponse {\n  originalStackFrame?: (StackFrame & { ignored: boolean }) | null\n  originalCodeFrame?: string | null\n}\n\n/**\n * It looks up the code frame of the traced source.\n * @note It ignores Next.js/React internals, as these can often be huge bundled files.\n */\nexport function getOriginalCodeFrame(\n  frame: StackFrame,\n  source: string | null,\n  colors: boolean = process.stdout.isTTY\n): string | null {\n  if (!source || isInternal(frame.file)) {\n    return null\n  }\n\n  return codeFrameColumns(\n    source,\n    {\n      start: {\n        // 1-based, but -1 means start line without highlighting\n        line: frame.lineNumber ?? -1,\n        // 1-based, but 0 means whole line without column highlighting\n        column: frame.column ?? 0,\n      },\n    },\n    { forceColor: colors }\n  )\n}\n"],"names":["codeFrameColumns","isInternal","getOriginalCodeFrame","frame","source","colors","process","stdout","isTTY","file","start","line","lineNumber","column","forceColor"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,sCAAqC;AACtE,OAAOC,gBAAgB,qCAAoC;AAmB3D;;;CAGC,GACD,OAAO,SAASC,qBACdC,KAAiB,EACjBC,MAAqB,EACrBC,MAAsC;IAAtCA,IAAAA,mBAAAA,SAAkBC,QAAQC,MAAM,CAACC,KAAK;IAEtC,IAAI,CAACJ,UAAUH,WAAWE,MAAMM,IAAI,GAAG;QACrC,OAAO;IACT;QAOYN,mBAEEA;IAPd,OAAOH,iBACLI,QACA;QACEM,OAAO;YACL,wDAAwD;YACxDC,MAAMR,CAAAA,oBAAAA,MAAMS,UAAU,YAAhBT,oBAAoB,CAAC;YAC3B,8DAA8D;YAC9DU,QAAQV,CAAAA,gBAAAA,MAAMU,MAAM,YAAZV,gBAAgB;QAC1B;IACF,GACA;QAAEW,YAAYT;IAAO;AAEzB"}

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.js

@@ -12,6 +12,6 @@ export function ErrorOverlayDialog(param) {
         children: children
     });
 }
-export const DIALOG_STYLES = "\n  .error-overlay-dialog {\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    box-shadow: var(--shadow-menu);\n    position: relative;\n\n    @media (prefers-color-scheme: dark) {\n      border-color: var(--color-gray-400);\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n      ) {\n      border-top-left-radius: 0;\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav]\n          .error-overlay-notch[data-side='right']\n      ) {\n      border-top-right-radius: 0;\n    }\n  }\n";
+export const DIALOG_STYLES = "\n  .error-overlay-dialog {\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    box-shadow: var(--shadow-menu);\n    position: relative;\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n      ) {\n      border-top-left-radius: 0;\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav]\n          .error-overlay-notch[data-side='right']\n      ) {\n      border-top-right-radius: 0;\n    }\n  }\n";
 
 //# sourceMappingURL=dialog.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.tsx"],"sourcesContent":["import { Dialog } from '../../dialog/dialog'\n\ntype ErrorOverlayDialogProps = {\n  children?: React.ReactNode\n  onClose?: () => void\n  dialogResizerRef?: React.RefObject<HTMLDivElement | null>\n}\n\nexport function ErrorOverlayDialog({\n  children,\n  onClose,\n  ...props\n}: ErrorOverlayDialogProps) {\n  return (\n    <Dialog\n      type=\"error\"\n      aria-labelledby=\"nextjs__container_errors_label\"\n      aria-describedby=\"nextjs__container_errors_desc\"\n      onClose={onClose}\n      className=\"error-overlay-dialog\"\n      {...props}\n    >\n      {children}\n    </Dialog>\n  )\n}\n\nexport const DIALOG_STYLES = `\n  .error-overlay-dialog {\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    box-shadow: var(--shadow-menu);\n    position: relative;\n\n    @media (prefers-color-scheme: dark) {\n      border-color: var(--color-gray-400);\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n      ) {\n      border-top-left-radius: 0;\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav]\n          .error-overlay-notch[data-side='right']\n      ) {\n      border-top-right-radius: 0;\n    }\n  }\n`\n"],"names":["Dialog","ErrorOverlayDialog","children","onClose","props","type","aria-labelledby","aria-describedby","className","DIALOG_STYLES"],"mappings":";AAAA,SAASA,MAAM,QAAQ,sBAAqB;AAQ5C,OAAO,SAASC,mBAAmB,KAIT;IAJS,IAAA,EACjCC,QAAQ,EACRC,OAAO,EACP,GAAGC,OACqB,GAJS;IAKjC,qBACE,KAACJ;QACCK,MAAK;QACLC,mBAAgB;QAChBC,oBAAiB;QACjBJ,SAASA;QACTK,WAAU;QACT,GAAGJ,KAAK;kBAERF;;AAGP;AAEA,OAAO,MAAMO,gBAAiB,+tBA4B7B"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.tsx"],"sourcesContent":["import { Dialog } from '../../dialog/dialog'\n\ntype ErrorOverlayDialogProps = {\n  children?: React.ReactNode\n  onClose?: () => void\n  dialogResizerRef?: React.RefObject<HTMLDivElement | null>\n}\n\nexport function ErrorOverlayDialog({\n  children,\n  onClose,\n  ...props\n}: ErrorOverlayDialogProps) {\n  return (\n    <Dialog\n      type=\"error\"\n      aria-labelledby=\"nextjs__container_errors_label\"\n      aria-describedby=\"nextjs__container_errors_desc\"\n      onClose={onClose}\n      className=\"error-overlay-dialog\"\n      {...props}\n    >\n      {children}\n    </Dialog>\n  )\n}\n\nexport const DIALOG_STYLES = `\n  .error-overlay-dialog {\n    overflow-y: auto;\n    -webkit-font-smoothing: antialiased;\n    background: var(--color-background-100);\n    background-clip: padding-box;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    box-shadow: var(--shadow-menu);\n    position: relative;\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav] .error-overlay-notch[data-side='left']\n      ) {\n      border-top-left-radius: 0;\n    }\n\n    &:has(\n        ~ [data-nextjs-error-overlay-nav]\n          .error-overlay-notch[data-side='right']\n      ) {\n      border-top-right-radius: 0;\n    }\n  }\n`\n"],"names":["Dialog","ErrorOverlayDialog","children","onClose","props","type","aria-labelledby","aria-describedby","className","DIALOG_STYLES"],"mappings":";AAAA,SAASA,MAAM,QAAQ,sBAAqB;AAQ5C,OAAO,SAASC,mBAAmB,KAIT;IAJS,IAAA,EACjCC,QAAQ,EACRC,OAAO,EACP,GAAGC,OACqB,GAJS;IAKjC,qBACE,KAACJ;QACCK,MAAK;QACLC,mBAAgB;QAChBC,oBAAiB;QACjBJ,SAASA;QACTK,WAAU;QACT,GAAGJ,KAAK;kBAERF;;AAGP;AAEA,OAAO,MAAMO,gBAAiB,+nBAwB7B"}

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.js

@@ -22,6 +22,6 @@ export function ErrorOverlayBottomStack(param) {
         })
     });
 }
-export const styles = "\n  .error-overlay-bottom-stack-layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .error-overlay-bottom-stack-layer-1 {\n    width: calc(100% - var(--size-24));\n  }\n\n  .error-overlay-bottom-stack-layer-2 {\n    width: calc(100% - var(--size-48));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .error-overlay-bottom-stack-stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-bottom-stack-layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .error-overlay-bottom-stack-layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n";
+export const styles = "\n  .error-overlay-bottom-stack-layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .error-overlay-bottom-stack-layer-1 {\n    width: calc(100% - var(--size-24));\n  }\n\n  .error-overlay-bottom-stack-layer-2 {\n    width: calc(100% - var(--size-48));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .error-overlay-bottom-stack-stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-bottom-stack-layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n";
 
 //# sourceMappingURL=index.js.map

package/dist/esm/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.tsx"],"sourcesContent":["export function ErrorOverlayBottomStack({\n  errorCount,\n  activeIdx,\n}: {\n  errorCount: number\n  activeIdx: number\n}) {\n  // If there are more than 2 errors to navigate, the stack count should remain at 2.\n  const stackCount = Math.min(errorCount - activeIdx - 1, 2)\n  return (\n    <div aria-hidden className=\"error-overlay-bottom-stack\">\n      <div\n        className=\"error-overlay-bottom-stack-stack\"\n        data-stack-count={stackCount}\n      >\n        <div className=\"error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-1\">\n          1\n        </div>\n        <div className=\"error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-2\">\n          2\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const styles = `\n  .error-overlay-bottom-stack-layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .error-overlay-bottom-stack-layer-1 {\n    width: calc(100% - var(--size-24));\n  }\n\n  .error-overlay-bottom-stack-layer-2 {\n    width: calc(100% - var(--size-48));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .error-overlay-bottom-stack-stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-bottom-stack-layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .error-overlay-bottom-stack-layer {\n      border-color: var(--color-gray-400);\n    }\n  }\n`\n"],"names":["ErrorOverlayBottomStack","errorCount","activeIdx","stackCount","Math","min","div","aria-hidden","className","data-stack-count","styles"],"mappings":";AAAA,OAAO,SAASA,wBAAwB,KAMvC;IANuC,IAAA,EACtCC,UAAU,EACVC,SAAS,EAIV,GANuC;IAOtC,mFAAmF;IACnF,MAAMC,aAAaC,KAAKC,GAAG,CAACJ,aAAaC,YAAY,GAAG;IACxD,qBACE,KAACI;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,MAACF;YACCE,WAAU;YACVC,oBAAkBN;;8BAElB,KAACG;oBAAIE,WAAU;8BAAsE;;8BAGrF,KAACF;oBAAIE,WAAU;8BAAsE;;;;;AAM7F;AAEA,OAAO,MAAME,SAAU,ypEAmFtB"}
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.tsx"],"sourcesContent":["export function ErrorOverlayBottomStack({\n  errorCount,\n  activeIdx,\n}: {\n  errorCount: number\n  activeIdx: number\n}) {\n  // If there are more than 2 errors to navigate, the stack count should remain at 2.\n  const stackCount = Math.min(errorCount - activeIdx - 1, 2)\n  return (\n    <div aria-hidden className=\"error-overlay-bottom-stack\">\n      <div\n        className=\"error-overlay-bottom-stack-stack\"\n        data-stack-count={stackCount}\n      >\n        <div className=\"error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-1\">\n          1\n        </div>\n        <div className=\"error-overlay-bottom-stack-layer error-overlay-bottom-stack-layer-2\">\n          2\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const styles = `\n  .error-overlay-bottom-stack-layer {\n    width: 100%;\n    height: var(--stack-layer-height);\n    position: relative;\n    border: 1px solid var(--color-gray-400);\n    border-radius: var(--rounded-xl);\n    background: var(--color-background-200);\n    transition:\n      translate 350ms var(--timing-swift),\n      box-shadow 350ms var(--timing-swift);\n  }\n\n  .error-overlay-bottom-stack-layer-1 {\n    width: calc(100% - var(--size-24));\n  }\n\n  .error-overlay-bottom-stack-layer-2 {\n    width: calc(100% - var(--size-48));\n    z-index: -1;\n  }\n\n  .error-overlay-bottom-stack {\n    width: 100%;\n    position: absolute;\n    bottom: -1px;\n    height: 0;\n    overflow: visible;\n  }\n\n  .error-overlay-bottom-stack-stack {\n    --stack-layer-height: 44px;\n    --stack-layer-height-half: calc(var(--stack-layer-height) / 2);\n    --stack-layer-trim: 13px;\n    --shadow: 0px 0.925px 0.925px 0px rgba(0, 0, 0, 0.02),\n      0px 3.7px 7.4px -3.7px rgba(0, 0, 0, 0.04),\n      0px 14.8px 22.2px -7.4px rgba(0, 0, 0, 0.06);\n\n    display: grid;\n    place-items: center center;\n    width: 100%;\n    position: fixed;\n    overflow: hidden;\n    z-index: -1;\n    max-width: var(--next-dialog-max-width);\n\n    .error-overlay-bottom-stack-layer {\n      grid-area: 1 / 1;\n      /* Hide */\n      translate: 0 calc(var(--stack-layer-height) * -1);\n    }\n\n    &[data-stack-count='1'],\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-1 {\n        translate: 0\n          calc(var(--stack-layer-height-half) * -1 - var(--stack-layer-trim));\n      }\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        translate: 0 calc(var(--stack-layer-trim) * -1 * 2);\n      }\n    }\n\n    /* Only the bottom stack should have the shadow */\n    &[data-stack-count='1'] .error-overlay-bottom-stack-layer-1 {\n      box-shadow: var(--shadow);\n    }\n\n    &[data-stack-count='2'] {\n      .error-overlay-bottom-stack-layer-2 {\n        box-shadow: var(--shadow);\n      }\n    }\n  }\n`\n"],"names":["ErrorOverlayBottomStack","errorCount","activeIdx","stackCount","Math","min","div","aria-hidden","className","data-stack-count","styles"],"mappings":";AAAA,OAAO,SAASA,wBAAwB,KAMvC;IANuC,IAAA,EACtCC,UAAU,EACVC,SAAS,EAIV,GANuC;IAOtC,mFAAmF;IACnF,MAAMC,aAAaC,KAAKC,GAAG,CAACJ,aAAaC,YAAY,GAAG;IACxD,qBACE,KAACI;QAAIC,aAAW;QAACC,WAAU;kBACzB,cAAA,MAACF;YACCE,WAAU;YACVC,oBAAkBN;;8BAElB,KAACG;oBAAIE,WAAU;8BAAsE;;8BAGrF,KAACF;oBAAIE,WAAU;8BAAsE;;;;;AAM7F;AAEA,OAAO,MAAME,SAAU,6gEA6EtB"}

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

@@ -7,6 +7,7 @@ import { Colors } from './styles/colors';
 import { ErrorOverlay } from './components/errors/error-overlay/error-overlay';
 import { DevToolsIndicator } from './components/errors/dev-tools-indicator/dev-tools-indicator';
 import { RenderError } from './container/runtime-error/render-error';
+import { DarkTheme } from './styles/dark-theme';
 export function DevOverlay(param) {
     let { state, isErrorOverlayOpen, setIsErrorOverlayOpen } = param;
     return /*#__PURE__*/ _jsxs(ShadowPortal, {
@@ -15,6 +16,7 @@ export function DevOverlay(param) {
             /*#__PURE__*/ _jsx(Base, {}),
             /*#__PURE__*/ _jsx(Colors, {}),
             /*#__PURE__*/ _jsx(ComponentStyles, {}),
+            /*#__PURE__*/ _jsx(DarkTheme, {}),
             /*#__PURE__*/ _jsx(RenderError, {
                 state: state,
                 isAppDir: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/ui/dev-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../shared'\n\nimport { ShadowPortal } from './components/shadow-portal'\nimport { Base } from './styles/base'\nimport { ComponentStyles } from './styles/component-styles'\nimport { CssReset } from './styles/css-reset'\nimport { Colors } from './styles/colors'\nimport { ErrorOverlay } from './components/errors/error-overlay/error-overlay'\nimport { DevToolsIndicator } from './components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { RenderError } from './container/runtime-error/render-error'\n\nexport function DevOverlay({\n  state,\n  isErrorOverlayOpen,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  isErrorOverlayOpen: boolean\n  setIsErrorOverlayOpen: (\n    isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)\n  ) => void\n}) {\n  return (\n    <ShadowPortal>\n      <CssReset />\n      <Base />\n      <Colors />\n      <ComponentStyles />\n\n      <RenderError state={state} isAppDir={true}>\n        {({ runtimeErrors, totalErrorCount }) => {\n          const isBuildError = runtimeErrors.length === 0\n          return (\n            <>\n              <DevToolsIndicator\n                state={state}\n                errorCount={totalErrorCount}\n                isBuildError={isBuildError}\n                setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n              />\n\n              <ErrorOverlay\n                state={state}\n                runtimeErrors={runtimeErrors}\n                isErrorOverlayOpen={isErrorOverlayOpen}\n                setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n              />\n            </>\n          )\n        }}\n      </RenderError>\n    </ShadowPortal>\n  )\n}\n"],"names":["ShadowPortal","Base","ComponentStyles","CssReset","Colors","ErrorOverlay","DevToolsIndicator","RenderError","DevOverlay","state","isErrorOverlayOpen","setIsErrorOverlayOpen","isAppDir","runtimeErrors","totalErrorCount","isBuildError","length","errorCount"],"mappings":";AAEA,SAASA,YAAY,QAAQ,6BAA4B;AACzD,SAASC,IAAI,QAAQ,gBAAe;AACpC,SAASC,eAAe,QAAQ,4BAA2B;AAC3D,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,SAASC,MAAM,QAAQ,kBAAiB;AACxC,SAASC,YAAY,QAAQ,kDAAiD;AAC9E,SAASC,iBAAiB,QAAQ,8DAA6D;AAC/F,SAASC,WAAW,QAAQ,yCAAwC;AAEpE,OAAO,SAASC,WAAW,KAU1B;IAV0B,IAAA,EACzBC,KAAK,EACLC,kBAAkB,EAClBC,qBAAqB,EAOtB,GAV0B;IAWzB,qBACE,MAACX;;0BACC,KAACG;0BACD,KAACF;0BACD,KAACG;0BACD,KAACF;0BAED,KAACK;gBAAYE,OAAOA;gBAAOG,UAAU;0BAClC;wBAAC,EAAEC,aAAa,EAAEC,eAAe,EAAE;oBAClC,MAAMC,eAAeF,cAAcG,MAAM,KAAK;oBAC9C,qBACE;;0CACE,KAACV;gCACCG,OAAOA;gCACPQ,YAAYH;gCACZC,cAAcA;gCACdJ,uBAAuBA;;0CAGzB,KAACN;gCACCI,OAAOA;gCACPI,eAAeA;gCACfH,oBAAoBA;gCACpBC,uBAAuBA;;;;gBAI/B;;;;AAIR"}
+{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/ui/dev-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../shared'\n\nimport { ShadowPortal } from './components/shadow-portal'\nimport { Base } from './styles/base'\nimport { ComponentStyles } from './styles/component-styles'\nimport { CssReset } from './styles/css-reset'\nimport { Colors } from './styles/colors'\nimport { ErrorOverlay } from './components/errors/error-overlay/error-overlay'\nimport { DevToolsIndicator } from './components/errors/dev-tools-indicator/dev-tools-indicator'\nimport { RenderError } from './container/runtime-error/render-error'\nimport { DarkTheme } from './styles/dark-theme'\n\nexport function DevOverlay({\n  state,\n  isErrorOverlayOpen,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  isErrorOverlayOpen: boolean\n  setIsErrorOverlayOpen: (\n    isErrorOverlayOpen: boolean | ((prev: boolean) => boolean)\n  ) => void\n}) {\n  return (\n    <ShadowPortal>\n      <CssReset />\n      <Base />\n      <Colors />\n      <ComponentStyles />\n      <DarkTheme />\n\n      <RenderError state={state} isAppDir={true}>\n        {({ runtimeErrors, totalErrorCount }) => {\n          const isBuildError = runtimeErrors.length === 0\n          return (\n            <>\n              <DevToolsIndicator\n                state={state}\n                errorCount={totalErrorCount}\n                isBuildError={isBuildError}\n                setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n              />\n\n              <ErrorOverlay\n                state={state}\n                runtimeErrors={runtimeErrors}\n                isErrorOverlayOpen={isErrorOverlayOpen}\n                setIsErrorOverlayOpen={setIsErrorOverlayOpen}\n              />\n            </>\n          )\n        }}\n      </RenderError>\n    </ShadowPortal>\n  )\n}\n"],"names":["ShadowPortal","Base","ComponentStyles","CssReset","Colors","ErrorOverlay","DevToolsIndicator","RenderError","DarkTheme","DevOverlay","state","isErrorOverlayOpen","setIsErrorOverlayOpen","isAppDir","runtimeErrors","totalErrorCount","isBuildError","length","errorCount"],"mappings":";AAEA,SAASA,YAAY,QAAQ,6BAA4B;AACzD,SAASC,IAAI,QAAQ,gBAAe;AACpC,SAASC,eAAe,QAAQ,4BAA2B;AAC3D,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,SAASC,MAAM,QAAQ,kBAAiB;AACxC,SAASC,YAAY,QAAQ,kDAAiD;AAC9E,SAASC,iBAAiB,QAAQ,8DAA6D;AAC/F,SAASC,WAAW,QAAQ,yCAAwC;AACpE,SAASC,SAAS,QAAQ,sBAAqB;AAE/C,OAAO,SAASC,WAAW,KAU1B;IAV0B,IAAA,EACzBC,KAAK,EACLC,kBAAkB,EAClBC,qBAAqB,EAOtB,GAV0B;IAWzB,qBACE,MAACZ;;0BACC,KAACG;0BACD,KAACF;0BACD,KAACG;0BACD,KAACF;0BACD,KAACM;0BAED,KAACD;gBAAYG,OAAOA;gBAAOG,UAAU;0BAClC;wBAAC,EAAEC,aAAa,EAAEC,eAAe,EAAE;oBAClC,MAAMC,eAAeF,cAAcG,MAAM,KAAK;oBAC9C,qBACE;;0CACE,KAACX;gCACCI,OAAOA;gCACPQ,YAAYH;gCACZC,cAAcA;gCACdJ,uBAAuBA;;0CAGzB,KAACP;gCACCK,OAAOA;gCACPI,eAAeA;gCACfH,oBAAoBA;gCACpBC,uBAAuBA;;;;gBAI/B;;;;AAIR"}

package/dist/esm/client/components/react-dev-overlay/ui/storybook/with-shadow-portal.js

@@ -4,12 +4,14 @@ import { Colors } from '../styles/colors';
 import { CssReset } from '../styles/css-reset';
 import { ComponentStyles } from '../styles/component-styles';
 import { ShadowPortal } from '../components/shadow-portal';
+import { DarkTheme } from '../styles/dark-theme';
 export const withShadowPortal = (Story)=>/*#__PURE__*/ _jsxs(ShadowPortal, {
         children: [
             /*#__PURE__*/ _jsx(CssReset, {}),
             /*#__PURE__*/ _jsx(Base, {}),
             /*#__PURE__*/ _jsx(Colors, {}),
             /*#__PURE__*/ _jsx(ComponentStyles, {}),
+            /*#__PURE__*/ _jsx(DarkTheme, {}),
             /*#__PURE__*/ _jsx(Story, {})
         ]
     });

package/dist/esm/client/components/react-dev-overlay/ui/storybook/with-shadow-portal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/storybook/with-shadow-portal.tsx"],"sourcesContent":["import { Base } from '../styles/base'\nimport { Colors } from '../styles/colors'\nimport { CssReset } from '../styles/css-reset'\nimport { ComponentStyles } from '../styles/component-styles'\nimport { ShadowPortal } from '../components/shadow-portal'\n\nexport const withShadowPortal = (Story: any) => (\n  <ShadowPortal>\n    <CssReset />\n    <Base />\n    <Colors />\n    <ComponentStyles />\n    <Story />\n  </ShadowPortal>\n)\n"],"names":["Base","Colors","CssReset","ComponentStyles","ShadowPortal","withShadowPortal","Story"],"mappings":";AAAA,SAASA,IAAI,QAAQ,iBAAgB;AACrC,SAASC,MAAM,QAAQ,mBAAkB;AACzC,SAASC,QAAQ,QAAQ,sBAAqB;AAC9C,SAASC,eAAe,QAAQ,6BAA4B;AAC5D,SAASC,YAAY,QAAQ,8BAA6B;AAE1D,OAAO,MAAMC,mBAAmB,CAACC,sBAC/B,MAACF;;0BACC,KAACF;0BACD,KAACF;0BACD,KAACC;0BACD,KAACE;0BACD,KAACG;;OAEJ"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/storybook/with-shadow-portal.tsx"],"sourcesContent":["import { Base } from '../styles/base'\nimport { Colors } from '../styles/colors'\nimport { CssReset } from '../styles/css-reset'\nimport { ComponentStyles } from '../styles/component-styles'\nimport { ShadowPortal } from '../components/shadow-portal'\nimport { DarkTheme } from '../styles/dark-theme'\n\nexport const withShadowPortal = (Story: any) => (\n  <ShadowPortal>\n    <CssReset />\n    <Base />\n    <Colors />\n    <ComponentStyles />\n    <DarkTheme />\n    <Story />\n  </ShadowPortal>\n)\n"],"names":["Base","Colors","CssReset","ComponentStyles","ShadowPortal","DarkTheme","withShadowPortal","Story"],"mappings":";AAAA,SAASA,IAAI,QAAQ,iBAAgB;AACrC,SAASC,MAAM,QAAQ,mBAAkB;AACzC,SAASC,QAAQ,QAAQ,sBAAqB;AAC9C,SAASC,eAAe,QAAQ,6BAA4B;AAC5D,SAASC,YAAY,QAAQ,8BAA6B;AAC1D,SAASC,SAAS,QAAQ,uBAAsB;AAEhD,OAAO,MAAMC,mBAAmB,CAACC,sBAC/B,MAACH;;0BACC,KAACF;0BACD,KAACF;0BACD,KAACC;0BACD,KAACE;0BACD,KAACE;0BACD,KAACE;;OAEJ"}

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

@@ -1,30 +1,18 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n  --color-font: white;\n  --color-backdrop: rgba(0, 0, 0, 0.8);\n  --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n  --color-title-color: #fafafa;\n  --color-stack-notes: #a9a9a9;\n"
+        "\n        :host {\n          /* \n           * Although the style applied to the shadow host is isolated,\n           * the element that attached the shadow host (i.e. \"nextjs-portal\")\n           * is still affected by the parent's style (e.g. \"body\"). This may\n           * occur style conflicts like \"display: flex\", with other children\n           * elements therefore give the shadow host an absolute position.\n           */\n          position: absolute;\n\n          --color-font: #757575;\n          --color-backdrop: rgba(250, 250, 250, 0.8);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n            'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n            monospace;\n          --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n            'Source Sans Pro', sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --focus-color: var(--color-blue-800);\n          --focus-ring: 2px solid var(--focus-color);\n\n          --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n          --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n          --rounded-none: 0px;\n          --rounded-sm: 2px;\n          --rounded-md: 4px;\n          --rounded-md-2: 6px;\n          --rounded-lg: 8px;\n          --rounded-xl: 12px;\n          --rounded-2xl: 16px;\n          --rounded-3xl: 24px;\n          --rounded-4xl: 32px;\n          --rounded-full: 9999px;\n\n          /* \n            Suffix N of --size-N as px value when the base font size is 16px.\n            Example: --size-1 is 1px, --size-2 is 2px, --size-3 is 3px, etc.\n          */\n          --size-1: 0.0625rem; /* 1px */\n          --size-2: 0.125rem; /* 2px */\n          --size-3: 0.1875rem; /* 3px */\n          --size-4: 0.25rem; /* ...and more */\n          --size-5: 0.3125rem;\n          --size-6: 0.375rem;\n          --size-7: 0.4375rem;\n          --size-8: 0.5rem;\n          --size-9: 0.5625rem;\n          --size-10: 0.625rem;\n          --size-11: 0.6875rem;\n          --size-12: 0.75rem;\n          --size-13: 0.8125rem;\n          --size-14: 0.875rem;\n          --size-15: 0.9375rem;\n          /* If the base font size of the dev overlay changes e.g. 18px, \n          just slide the window and make --size-18 as 1rem. */\n          --size-16: 1rem;\n          --size-17: 1.0625rem;\n          --size-18: 1.125rem;\n          --size-20: 1.25rem;\n          --size-22: 1.375rem;\n          --size-24: 1.5rem;\n          --size-26: 1.625rem;\n          --size-28: 1.75rem;\n          --size-30: 1.875rem;\n          --size-32: 2rem;\n          --size-34: 2.125rem;\n          --size-36: 2.25rem;\n          --size-38: 2.375rem;\n          --size-40: 2.5rem;\n          --size-42: 2.625rem;\n          --size-44: 2.75rem;\n          --size-46: 2.875rem;\n          --size-48: 3rem;\n\n          @media print {\n            display: none;\n          }\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: 8px;\n          font-weight: 500;\n          line-height: 1.5;\n        }\n\n        a {\n          color: var(--color-blue-900);\n          &:hover {\n            color: var(--color-blue-900);\n          }\n          &:focus {\n            outline: var(--focus-ring);\n          }\n        }\n      "
     ]);
     _templateObject = function() {
         return data;
     };
     return data;
 }
-function _templateObject1() {
-    const data = _tagged_template_literal_loose([
-        "\n        :host {\n          /* \n            Although the style applied to the shadow host is isolated,\n            the element that attached the shadow host (i.e. \"nextjs-portal\")\n            is still affected by the parent's style (e.g. \"body\"). This may\n            occur style conflicts like \"display: flex\", with other children\n            elements therefore give the shadow host an absolute position.\n          */\n          position: absolute;\n\n          --color-font: #757575;\n          --color-backdrop: rgba(250, 250, 250, 0.8);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n            'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n            monospace;\n          --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n            'Source Sans Pro', sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --focus-color: var(--color-blue-800);\n          --focus-ring: 2px solid var(--focus-color);\n\n          --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n          --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n          --rounded-none: 0px;\n          --rounded-sm: 2px;\n          --rounded-md: 4px;\n          --rounded-md-2: 6px;\n          --rounded-lg: 8px;\n          --rounded-xl: 12px;\n          --rounded-2xl: 16px;\n          --rounded-3xl: 24px;\n          --rounded-4xl: 32px;\n          --rounded-full: 9999px;\n\n          /* \n            Suffix N of --size-N as px value when the base font size is 16px.\n            Example: --size-1 is 1px, --size-2 is 2px, --size-3 is 3px, etc.\n          */\n          --size-1: 0.0625rem; /* 1px */\n          --size-2: 0.125rem; /* 2px */\n          --size-3: 0.1875rem; /* 3px */\n          --size-4: 0.25rem; /* ...and more */\n          --size-5: 0.3125rem;\n          --size-6: 0.375rem;\n          --size-7: 0.4375rem;\n          --size-8: 0.5rem;\n          --size-9: 0.5625rem;\n          --size-10: 0.625rem;\n          --size-11: 0.6875rem;\n          --size-12: 0.75rem;\n          --size-13: 0.8125rem;\n          --size-14: 0.875rem;\n          --size-15: 0.9375rem;\n          /* If the base font size of the dev overlay changes e.g. 18px, \n          just slide the window and make --size-18 as 1rem. */\n          --size-16: 1rem;\n          --size-17: 1.0625rem;\n          --size-18: 1.125rem;\n          --size-20: 1.25rem;\n          --size-22: 1.375rem;\n          --size-24: 1.5rem;\n          --size-26: 1.625rem;\n          --size-28: 1.75rem;\n          --size-30: 1.875rem;\n          --size-32: 2rem;\n          --size-34: 2.125rem;\n          --size-36: 2.25rem;\n          --size-38: 2.375rem;\n          --size-40: 2.5rem;\n          --size-42: 2.625rem;\n          --size-44: 2.75rem;\n          --size-46: 2.875rem;\n          --size-48: 3rem;\n\n          @media print {\n            display: none;\n          }\n        }\n\n        :host(.dark) {\n          ",
-        "\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host(:not(.light)) {\n            ",
-        "\n          }\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: 8px;\n          font-weight: 500;\n          line-height: 1.5;\n        }\n\n        a {\n          color: var(--color-blue-900);\n          &:hover {\n            color: var(--color-blue-900);\n          }\n          &:focus {\n            outline: var(--focus-ring);\n          }\n        }\n      "
-    ]);
-    _templateObject1 = function() {
-        return data;
-    };
-    return data;
-}
 import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from '../../utils/css';
-const darkTheme = css(_templateObject());
 export function Base() {
     return /*#__PURE__*/ _jsx("style", {
-        children: css(_templateObject1(), darkTheme, darkTheme)
+        children: css(_templateObject())
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/base.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nconst darkTheme = css`\n  --color-font: white;\n  --color-backdrop: rgba(0, 0, 0, 0.8);\n  --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n  --color-title-color: #fafafa;\n  --color-stack-notes: #a9a9a9;\n`\n\nexport function Base() {\n  return (\n    <style>\n      {css`\n        :host {\n          /* \n            Although the style applied to the shadow host is isolated,\n            the element that attached the shadow host (i.e. \"nextjs-portal\")\n            is still affected by the parent's style (e.g. \"body\"). This may\n            occur style conflicts like \"display: flex\", with other children\n            elements therefore give the shadow host an absolute position.\n          */\n          position: absolute;\n\n          --color-font: #757575;\n          --color-backdrop: rgba(250, 250, 250, 0.8);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n            'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n            monospace;\n          --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n            'Source Sans Pro', sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --focus-color: var(--color-blue-800);\n          --focus-ring: 2px solid var(--focus-color);\n\n          --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n          --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n          --rounded-none: 0px;\n          --rounded-sm: 2px;\n          --rounded-md: 4px;\n          --rounded-md-2: 6px;\n          --rounded-lg: 8px;\n          --rounded-xl: 12px;\n          --rounded-2xl: 16px;\n          --rounded-3xl: 24px;\n          --rounded-4xl: 32px;\n          --rounded-full: 9999px;\n\n          /* \n            Suffix N of --size-N as px value when the base font size is 16px.\n            Example: --size-1 is 1px, --size-2 is 2px, --size-3 is 3px, etc.\n          */\n          --size-1: 0.0625rem; /* 1px */\n          --size-2: 0.125rem; /* 2px */\n          --size-3: 0.1875rem; /* 3px */\n          --size-4: 0.25rem; /* ...and more */\n          --size-5: 0.3125rem;\n          --size-6: 0.375rem;\n          --size-7: 0.4375rem;\n          --size-8: 0.5rem;\n          --size-9: 0.5625rem;\n          --size-10: 0.625rem;\n          --size-11: 0.6875rem;\n          --size-12: 0.75rem;\n          --size-13: 0.8125rem;\n          --size-14: 0.875rem;\n          --size-15: 0.9375rem;\n          /* If the base font size of the dev overlay changes e.g. 18px, \n          just slide the window and make --size-18 as 1rem. */\n          --size-16: 1rem;\n          --size-17: 1.0625rem;\n          --size-18: 1.125rem;\n          --size-20: 1.25rem;\n          --size-22: 1.375rem;\n          --size-24: 1.5rem;\n          --size-26: 1.625rem;\n          --size-28: 1.75rem;\n          --size-30: 1.875rem;\n          --size-32: 2rem;\n          --size-34: 2.125rem;\n          --size-36: 2.25rem;\n          --size-38: 2.375rem;\n          --size-40: 2.5rem;\n          --size-42: 2.625rem;\n          --size-44: 2.75rem;\n          --size-46: 2.875rem;\n          --size-48: 3rem;\n\n          @media print {\n            display: none;\n          }\n        }\n\n        :host(.dark) {\n          ${darkTheme}\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host(:not(.light)) {\n            ${darkTheme}\n          }\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: 8px;\n          font-weight: 500;\n          line-height: 1.5;\n        }\n\n        a {\n          color: var(--color-blue-900);\n          &:hover {\n            color: var(--color-blue-900);\n          }\n          &:focus {\n            outline: var(--focus-ring);\n          }\n        }\n      `}\n    </style>\n  )\n}\n"],"names":["css","darkTheme","Base","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,MAAMC,YAAYD;AASlB,OAAO,SAASE;IACd,qBACE,KAACC;kBACEH,wBAgHKC,WAKEA;;AA2Bd"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/base.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nexport function Base() {\n  return (\n    <style>\n      {css`\n        :host {\n          /* \n           * Although the style applied to the shadow host is isolated,\n           * the element that attached the shadow host (i.e. \"nextjs-portal\")\n           * is still affected by the parent's style (e.g. \"body\"). This may\n           * occur style conflicts like \"display: flex\", with other children\n           * elements therefore give the shadow host an absolute position.\n           */\n          position: absolute;\n\n          --color-font: #757575;\n          --color-backdrop: rgba(250, 250, 250, 0.8);\n          --color-border-shadow: rgba(0, 0, 0, 0.145);\n\n          --color-title-color: #1f1f1f;\n          --color-stack-notes: #777;\n\n          --color-accents-1: #808080;\n          --color-accents-2: #222222;\n          --color-accents-3: #404040;\n\n          --font-stack-monospace: '__nextjs-Geist Mono', 'Geist Mono',\n            'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,\n            monospace;\n          --font-stack-sans: '__nextjs-Geist', 'Geist', -apple-system,\n            'Source Sans Pro', sans-serif;\n\n          font-family: var(--font-stack-sans);\n\n          /* TODO: Remove replaced ones. */\n          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),\n            0 1px 2px -1px rgb(0 0 0 / 0.1);\n          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n            0 2px 4px -2px rgb(0 0 0 / 0.1);\n          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),\n            0 4px 6px -4px rgb(0 0 0 / 0.1);\n          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n            0 8px 10px -6px rgb(0 0 0 / 0.1);\n          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n          --shadow-none: 0 0 #0000;\n\n          --shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);\n          --shadow-menu: 0px 1px 1px rgba(0, 0, 0, 0.02),\n            0px 4px 8px -4px rgba(0, 0, 0, 0.04),\n            0px 16px 24px -8px rgba(0, 0, 0, 0.06);\n\n          --focus-color: var(--color-blue-800);\n          --focus-ring: 2px solid var(--focus-color);\n\n          --timing-swift: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n          --timing-overlay: cubic-bezier(0.175, 0.885, 0.32, 1.1);\n\n          --rounded-none: 0px;\n          --rounded-sm: 2px;\n          --rounded-md: 4px;\n          --rounded-md-2: 6px;\n          --rounded-lg: 8px;\n          --rounded-xl: 12px;\n          --rounded-2xl: 16px;\n          --rounded-3xl: 24px;\n          --rounded-4xl: 32px;\n          --rounded-full: 9999px;\n\n          /* \n            Suffix N of --size-N as px value when the base font size is 16px.\n            Example: --size-1 is 1px, --size-2 is 2px, --size-3 is 3px, etc.\n          */\n          --size-1: 0.0625rem; /* 1px */\n          --size-2: 0.125rem; /* 2px */\n          --size-3: 0.1875rem; /* 3px */\n          --size-4: 0.25rem; /* ...and more */\n          --size-5: 0.3125rem;\n          --size-6: 0.375rem;\n          --size-7: 0.4375rem;\n          --size-8: 0.5rem;\n          --size-9: 0.5625rem;\n          --size-10: 0.625rem;\n          --size-11: 0.6875rem;\n          --size-12: 0.75rem;\n          --size-13: 0.8125rem;\n          --size-14: 0.875rem;\n          --size-15: 0.9375rem;\n          /* If the base font size of the dev overlay changes e.g. 18px, \n          just slide the window and make --size-18 as 1rem. */\n          --size-16: 1rem;\n          --size-17: 1.0625rem;\n          --size-18: 1.125rem;\n          --size-20: 1.25rem;\n          --size-22: 1.375rem;\n          --size-24: 1.5rem;\n          --size-26: 1.625rem;\n          --size-28: 1.75rem;\n          --size-30: 1.875rem;\n          --size-32: 2rem;\n          --size-34: 2.125rem;\n          --size-36: 2.25rem;\n          --size-38: 2.375rem;\n          --size-40: 2.5rem;\n          --size-42: 2.625rem;\n          --size-44: 2.75rem;\n          --size-46: 2.875rem;\n          --size-48: 3rem;\n\n          @media print {\n            display: none;\n          }\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-bottom: 8px;\n          font-weight: 500;\n          line-height: 1.5;\n        }\n\n        a {\n          color: var(--color-blue-900);\n          &:hover {\n            color: var(--color-blue-900);\n          }\n          &:focus {\n            outline: var(--focus-ring);\n          }\n        }\n      `}\n    </style>\n  )\n}\n"],"names":["css","Base","style"],"mappings":";;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,OAAO,SAASC;IACd,qBACE,KAACC;kBACEF;;AAsIP"}

package/dist/esm/client/components/react-dev-overlay/ui/styles/colors.js

@@ -1,39 +1,18 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 function _templateObject() {
     const data = _tagged_template_literal_loose([
-        "\n  /* Background Dark */\n  --color-background-100: #0a0a0a;\n  --color-background-200: #000000;\n\n  /* Syntax Dark */\n  --color-syntax-comment: #a0a0a0;\n  --color-syntax-constant: #ededed;\n  --color-syntax-function: #52a9ff;\n  --color-syntax-keyword: #f76e99;\n  --color-syntax-link: #0ac5b2;\n  --color-syntax-parameter: #f1a10d;\n  --color-syntax-punctuation: #ededed;\n  --color-syntax-string: #0ac5b2;\n  --color-syntax-string-expression: #0ac5b2;\n\n  /* Gray Scale Dark */\n  --color-gray-100: #1a1a1a;\n  --color-gray-200: #1f1f1f;\n  --color-gray-300: #292929;\n  --color-gray-400: #2e2e2e;\n  --color-gray-500: #454545;\n  --color-gray-600: #878787;\n  --color-gray-700: #8f8f8f;\n  --color-gray-800: #7d7d7d;\n  --color-gray-900: #a0a0a0;\n  --color-gray-1000: #ededed;\n\n  /* Gray Alpha Scale Dark */\n  --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n  --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n  --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n  --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n  --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n  --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n  --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n  --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n  --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n  --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n  /* Blue Scale Dark */\n  --color-blue-100: #0f1b2d;\n  --color-blue-200: #10243e;\n  --color-blue-300: #0f3058;\n  --color-blue-400: #0d3868;\n  --color-blue-500: #0a4481;\n  --color-blue-600: #0091ff;\n  --color-blue-700: #0070f3;\n  --color-blue-800: #0060d1;\n  --color-blue-900: #52a9ff;\n  --color-blue-1000: #eaf6ff;\n\n  /* Red Scale Dark */\n  --color-red-100: #2a1314;\n  --color-red-200: #3d1719;\n  --color-red-300: #551a1e;\n  --color-red-400: #671e22;\n  --color-red-500: #822025;\n  --color-red-600: #e5484d;\n  --color-red-700: #e5484d;\n  --color-red-800: #da3036;\n  --color-red-900: #ff6369;\n  --color-red-1000: #ffecee;\n\n  /* Amber Scale Dark */\n  --color-amber-100: #271700;\n  --color-amber-200: #341c00;\n  --color-amber-300: #4a2900;\n  --color-amber-400: #573300;\n  --color-amber-500: #693f05;\n  --color-amber-600: #e79c13;\n  --color-amber-700: #ffb224;\n  --color-amber-800: #ff990a;\n  --color-amber-900: #f1a10d;\n  --color-amber-1000: #fef3dd;\n\n  /* Green Scale Dark */\n  --color-green-100: #0b2211;\n  --color-green-200: #0f2c17;\n  --color-green-300: #11351b;\n  --color-green-400: #0c461b;\n  --color-green-500: #126427;\n  --color-green-600: #1a9338;\n  --color-green-700: #46a758;\n  --color-green-800: #388e4a;\n  --color-green-900: #63c174;\n  --color-green-1000: #e5fbeb;\n\n  /* Turbopack Dark - Temporary */\n  --color-turbopack-text-red: #ff6d92;\n  --color-turbopack-text-blue: #45b2ff;\n  --color-turbopack-border-red: #6e293b;\n  --color-turbopack-border-blue: #284f80;\n  --color-turbopack-background-red: #250d12;\n  --color-turbopack-background-blue: #0a1723;\n"
+        '\n        :host {\n          /* \n           * CAUTION: THIS IS A WORKAROUND!\n           * For now, we use @babel/code-frame to parse the code frame which does not support option to change the color.\n           * x-ref: https://github.com/babel/babel/blob/efa52324ff835b794c48080f14877b6caf32cd15/packages/babel-code-frame/src/defs.ts#L40-L54\n           * So, we do a workaround mapping to change the color matching the theme.\n           *\n           * For example, in @babel/code-frame, the "keyword" is mapped to ANSI "cyan".\n           * We want the "keyword" to use the "syntax-keyword" color in the theme.\n           * So, we map the "cyan" to the "syntax-keyword" in the theme.\n           */\n          /* cyan: keyword */\n          --color-ansi-cyan: var(--color-syntax-keyword);\n          /* yellow: capitalized, jsxIdentifier, punctuation */\n          --color-ansi-yellow: var(--color-syntax-function);\n          /* magenta: number, regex */\n          --color-ansi-magenta: var(--color-syntax-keyword);\n          /* green: string */\n          --color-ansi-green: var(--color-syntax-string);\n          /* gray (bright black): comment, gutter */\n          --color-ansi-bright-black: var(--color-syntax-comment);\n\n          /* Ansi - Temporary */\n          --color-ansi-selection: var(--color-gray-alpha-300);\n          --color-ansi-bg: var(--color-background-200);\n          --color-ansi-fg: var(--color-gray-1000);\n\n          --color-ansi-white: var(--color-gray-700);\n          --color-ansi-black: var(--color-gray-200);\n          --color-ansi-blue: var(--color-blue-700);\n          --color-ansi-red: var(--color-red-700);\n          --color-ansi-bright-white: var(--color-gray-1000);\n          --color-ansi-bright-blue: var(--color-blue-800);\n          --color-ansi-bright-cyan: var(--color-blue-800);\n          --color-ansi-bright-green: var(--color-green-800);\n          --color-ansi-bright-magenta: var(--color-blue-800);\n          --color-ansi-bright-red: var(--color-red-800);\n          --color-ansi-bright-yellow: var(--color-amber-900);\n\n          /* Background Light */\n          --color-background-100: #ffffff;\n          --color-background-200: #fafafa;\n\n          /* Syntax Light */\n          --color-syntax-comment: #545454;\n          --color-syntax-constant: #171717;\n          --color-syntax-function: #0054ad;\n          --color-syntax-keyword: #a51850;\n          --color-syntax-link: #066056;\n          --color-syntax-parameter: #8f3e00;\n          --color-syntax-punctuation: #171717;\n          --color-syntax-string: #036157;\n          --color-syntax-string-expression: #066056;\n\n          /* Gray Scale Light */\n          --color-gray-100: #f2f2f2;\n          --color-gray-200: #ebebeb;\n          --color-gray-300: #e6e6e6;\n          --color-gray-400: #eaeaea;\n          --color-gray-500: #c9c9c9;\n          --color-gray-600: #a8a8a8;\n          --color-gray-700: #8f8f8f;\n          --color-gray-800: #7d7d7d;\n          --color-gray-900: #666666;\n          --color-gray-1000: #171717;\n\n          /* Gray Alpha Scale Light */\n          --color-gray-alpha-100: rgba(0, 0, 0, 0.05);\n          --color-gray-alpha-200: rgba(0, 0, 0, 0.081);\n          --color-gray-alpha-300: rgba(0, 0, 0, 0.1);\n          --color-gray-alpha-400: rgba(0, 0, 0, 0.08);\n          --color-gray-alpha-500: rgba(0, 0, 0, 0.21);\n          --color-gray-alpha-600: rgba(0, 0, 0, 0.34);\n          --color-gray-alpha-700: rgba(0, 0, 0, 0.44);\n          --color-gray-alpha-800: rgba(0, 0, 0, 0.51);\n          --color-gray-alpha-900: rgba(0, 0, 0, 0.605);\n          --color-gray-alpha-1000: rgba(0, 0, 0, 0.91);\n\n          /* Blue Scale Light */\n          --color-blue-100: #f0f7ff;\n          --color-blue-200: #edf6ff;\n          --color-blue-300: #e1f0ff;\n          --color-blue-400: #cde7ff;\n          --color-blue-500: #99ceff;\n          --color-blue-600: #52aeff;\n          --color-blue-700: #0070f3;\n          --color-blue-800: #0060d1;\n          --color-blue-900: #0067d6;\n          --color-blue-1000: #0025ad;\n\n          /* Red Scale Light */\n          --color-red-100: #fff0f0;\n          --color-red-200: #ffebeb;\n          --color-red-300: #ffe5e5;\n          --color-red-400: #fdd8d8;\n          --color-red-500: #f8baba;\n          --color-red-600: #f87274;\n          --color-red-700: #e5484d;\n          --color-red-800: #da3036;\n          --color-red-900: #ca2a30;\n          --color-red-1000: #381316;\n\n          /* Amber Scale Light */\n          --color-amber-100: #fff6e5;\n          --color-amber-200: #fff4d5;\n          --color-amber-300: #fef0cd;\n          --color-amber-400: #ffddbf;\n          --color-amber-500: #ffc96b;\n          --color-amber-600: #f5b047;\n          --color-amber-700: #ffb224;\n          --color-amber-800: #ff990a;\n          --color-amber-900: #a35200;\n          --color-amber-1000: #4e2009;\n\n          /* Green Scale Light */\n          --color-green-100: #effbef;\n          --color-green-200: #eafaea;\n          --color-green-300: #dcf6dc;\n          --color-green-400: #c8f1c9;\n          --color-green-500: #99e59f;\n          --color-green-600: #6cda76;\n          --color-green-700: #46a758;\n          --color-green-800: #388e4a;\n          --color-green-900: #297c3b;\n          --color-green-1000: #18311e;\n\n          /* Turbopack Light - Temporary */\n          --color-turbopack-text-red: #ff1e56;\n          --color-turbopack-text-blue: #0096ff;\n          --color-turbopack-border-red: #f0adbe;\n          --color-turbopack-border-blue: #adccea;\n          --color-turbopack-background-red: #fff7f9;\n          --color-turbopack-background-blue: #f6fbff;\n        }\n      '
     ]);
     _templateObject = function() {
         return data;
     };
     return data;
 }
-function _templateObject1() {
-    const data = _tagged_template_literal_loose([
-        "\n        :host {\n          ",
-        "\n          /* cyan: keyword */\n          --color-ansi-cyan: var(--color-syntax-keyword);\n          /* yellow: capitalized, jsxIdentifier, punctuation */\n          --color-ansi-yellow: var(--color-syntax-punctuation);\n          /* magenta: number, regex */\n          --color-ansi-magenta: var(--color-syntax-number);\n          /* green: string */\n          --color-ansi-green: var(--color-syntax-string);\n          /* gray (bright black): comment, gutter */\n          --color-ansi-bright-black: var(--color-syntax-comment);\n\n          /* Ansi - Temporary */\n          --color-ansi-selection: var(--color-gray-alpha-300);\n          --color-ansi-bg: var(--color-background-200);\n          --color-ansi-fg: var(--color-gray-1000);\n\n          --color-ansi-white: var(--color-gray-700);\n          --color-ansi-black: var(--color-gray-200);\n          --color-ansi-blue: var(--color-blue-700);\n          --color-ansi-red: var(--color-red-700);\n          --color-ansi-bright-white: var(--color-gray-1000);\n          --color-ansi-bright-blue: var(--color-blue-800);\n          --color-ansi-bright-cyan: var(--color-blue-800);\n          --color-ansi-bright-green: var(--color-green-800);\n          --color-ansi-bright-magenta: var(--color-blue-800);\n          --color-ansi-bright-red: var(--color-red-800);\n          --color-ansi-bright-yellow: var(--color-amber-900);\n\n          /* Background Light */\n          --color-background-100: #ffffff;\n          --color-background-200: #fafafa;\n\n          /* Syntax Light */\n          --color-syntax-comment: #545454;\n          --color-syntax-constant: #171717;\n          --color-syntax-function: #0054ad;\n          --color-syntax-keyword: #a51850;\n          --color-syntax-link: #066056;\n          --color-syntax-parameter: #8f3e00;\n          --color-syntax-punctuation: #171717;\n          --color-syntax-string: #036157;\n          --color-syntax-string-expression: #066056;\n\n          /* Gray Scale Light */\n          --color-gray-100: #f2f2f2;\n          --color-gray-200: #ebebeb;\n          --color-gray-300: #e6e6e6;\n          --color-gray-400: #eaeaea;\n          --color-gray-500: #c9c9c9;\n          --color-gray-600: #a8a8a8;\n          --color-gray-700: #8f8f8f;\n          --color-gray-800: #7d7d7d;\n          --color-gray-900: #666666;\n          --color-gray-1000: #171717;\n\n          /* Gray Alpha Scale Light */\n          --color-gray-alpha-100: rgba(0, 0, 0, 0.05);\n          --color-gray-alpha-200: rgba(0, 0, 0, 0.081);\n          --color-gray-alpha-300: rgba(0, 0, 0, 0.1);\n          --color-gray-alpha-400: rgba(0, 0, 0, 0.08);\n          --color-gray-alpha-500: rgba(0, 0, 0, 0.21);\n          --color-gray-alpha-600: rgba(0, 0, 0, 0.34);\n          --color-gray-alpha-700: rgba(0, 0, 0, 0.44);\n          --color-gray-alpha-800: rgba(0, 0, 0, 0.51);\n          --color-gray-alpha-900: rgba(0, 0, 0, 0.605);\n          --color-gray-alpha-1000: rgba(0, 0, 0, 0.91);\n\n          /* Blue Scale Light */\n          --color-blue-100: #f0f7ff;\n          --color-blue-200: #edf6ff;\n          --color-blue-300: #e1f0ff;\n          --color-blue-400: #cde7ff;\n          --color-blue-500: #99ceff;\n          --color-blue-600: #52aeff;\n          --color-blue-700: #0070f3;\n          --color-blue-800: #0060d1;\n          --color-blue-900: #0067d6;\n          --color-blue-1000: #0025ad;\n\n          /* Red Scale Light */\n          --color-red-100: #fff0f0;\n          --color-red-200: #ffebeb;\n          --color-red-300: #ffe5e5;\n          --color-red-400: #fdd8d8;\n          --color-red-500: #f8baba;\n          --color-red-600: #f87274;\n          --color-red-700: #e5484d;\n          --color-red-800: #da3036;\n          --color-red-900: #ca2a30;\n          --color-red-1000: #381316;\n\n          /* Amber Scale Light */\n          --color-amber-100: #fff6e5;\n          --color-amber-200: #fff4d5;\n          --color-amber-300: #fef0cd;\n          --color-amber-400: #ffddbf;\n          --color-amber-500: #ffc96b;\n          --color-amber-600: #f5b047;\n          --color-amber-700: #ffb224;\n          --color-amber-800: #ff990a;\n          --color-amber-900: #a35200;\n          --color-amber-1000: #4e2009;\n\n          /* Green Scale Light */\n          --color-green-100: #effbef;\n          --color-green-200: #eafaea;\n          --color-green-300: #dcf6dc;\n          --color-green-400: #c8f1c9;\n          --color-green-500: #99e59f;\n          --color-green-600: #6cda76;\n          --color-green-700: #46a758;\n          --color-green-800: #388e4a;\n          --color-green-900: #297c3b;\n          --color-green-1000: #18311e;\n\n          /* Turbopack Light - Temporary */\n          --color-turbopack-text-red: #ff1e56;\n          --color-turbopack-text-blue: #0096ff;\n          --color-turbopack-border-red: #f0adbe;\n          --color-turbopack-border-blue: #adccea;\n          --color-turbopack-background-red: #fff7f9;\n          --color-turbopack-background-blue: #f6fbff;\n        }\n\n        :host(.dark) {\n          ",
-        "\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host(:not(.light)) {\n            ",
-        "\n          }\n        }\n      "
-    ]);
-    _templateObject1 = function() {
-        return data;
-    };
-    return data;
-}
 import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from '../../utils/css';
-const darkTheme = css(_templateObject());
-// TODO: Replace the existing colors in Base.tsx.
 export function Colors() {
     return /*#__PURE__*/ _jsx("style", {
-        children: css(_templateObject1(), // CAUTION: THIS IS A WORKAROUND!
-        // For now, we use @babel/code-frame to parse the code frame which does not support option to change the color.
-        // x-ref: https://github.com/babel/babel/blob/efa52324ff835b794c48080f14877b6caf32cd15/packages/babel-code-frame/src/defs.ts#L40-L54
-        // So, we do a workaround mapping to change the color matching the theme.
-        // For example, in @babel/code-frame, the `keyword` is mapped to ANSI "cyan".
-        // We want the `keyword` to use the `syntax-keyword` color in the theme.
-        // So, we map the "cyan" to the `syntax-keyword` in the theme.
-        '', darkTheme, darkTheme)
+        children: css(_templateObject())
     });
 }
 

package/dist/esm/client/components/react-dev-overlay/ui/styles/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/colors.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nconst darkTheme = css`\n  /* Background Dark */\n  --color-background-100: #0a0a0a;\n  --color-background-200: #000000;\n\n  /* Syntax Dark */\n  --color-syntax-comment: #a0a0a0;\n  --color-syntax-constant: #ededed;\n  --color-syntax-function: #52a9ff;\n  --color-syntax-keyword: #f76e99;\n  --color-syntax-link: #0ac5b2;\n  --color-syntax-parameter: #f1a10d;\n  --color-syntax-punctuation: #ededed;\n  --color-syntax-string: #0ac5b2;\n  --color-syntax-string-expression: #0ac5b2;\n\n  /* Gray Scale Dark */\n  --color-gray-100: #1a1a1a;\n  --color-gray-200: #1f1f1f;\n  --color-gray-300: #292929;\n  --color-gray-400: #2e2e2e;\n  --color-gray-500: #454545;\n  --color-gray-600: #878787;\n  --color-gray-700: #8f8f8f;\n  --color-gray-800: #7d7d7d;\n  --color-gray-900: #a0a0a0;\n  --color-gray-1000: #ededed;\n\n  /* Gray Alpha Scale Dark */\n  --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n  --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n  --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n  --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n  --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n  --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n  --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n  --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n  --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n  --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n  /* Blue Scale Dark */\n  --color-blue-100: #0f1b2d;\n  --color-blue-200: #10243e;\n  --color-blue-300: #0f3058;\n  --color-blue-400: #0d3868;\n  --color-blue-500: #0a4481;\n  --color-blue-600: #0091ff;\n  --color-blue-700: #0070f3;\n  --color-blue-800: #0060d1;\n  --color-blue-900: #52a9ff;\n  --color-blue-1000: #eaf6ff;\n\n  /* Red Scale Dark */\n  --color-red-100: #2a1314;\n  --color-red-200: #3d1719;\n  --color-red-300: #551a1e;\n  --color-red-400: #671e22;\n  --color-red-500: #822025;\n  --color-red-600: #e5484d;\n  --color-red-700: #e5484d;\n  --color-red-800: #da3036;\n  --color-red-900: #ff6369;\n  --color-red-1000: #ffecee;\n\n  /* Amber Scale Dark */\n  --color-amber-100: #271700;\n  --color-amber-200: #341c00;\n  --color-amber-300: #4a2900;\n  --color-amber-400: #573300;\n  --color-amber-500: #693f05;\n  --color-amber-600: #e79c13;\n  --color-amber-700: #ffb224;\n  --color-amber-800: #ff990a;\n  --color-amber-900: #f1a10d;\n  --color-amber-1000: #fef3dd;\n\n  /* Green Scale Dark */\n  --color-green-100: #0b2211;\n  --color-green-200: #0f2c17;\n  --color-green-300: #11351b;\n  --color-green-400: #0c461b;\n  --color-green-500: #126427;\n  --color-green-600: #1a9338;\n  --color-green-700: #46a758;\n  --color-green-800: #388e4a;\n  --color-green-900: #63c174;\n  --color-green-1000: #e5fbeb;\n\n  /* Turbopack Dark - Temporary */\n  --color-turbopack-text-red: #ff6d92;\n  --color-turbopack-text-blue: #45b2ff;\n  --color-turbopack-border-red: #6e293b;\n  --color-turbopack-border-blue: #284f80;\n  --color-turbopack-background-red: #250d12;\n  --color-turbopack-background-blue: #0a1723;\n`\n\n// TODO: Replace the existing colors in Base.tsx.\nexport function Colors() {\n  return (\n    <style>\n      {css`\n        :host {\n          ${\n            // CAUTION: THIS IS A WORKAROUND!\n            // For now, we use @babel/code-frame to parse the code frame which does not support option to change the color.\n            // x-ref: https://github.com/babel/babel/blob/efa52324ff835b794c48080f14877b6caf32cd15/packages/babel-code-frame/src/defs.ts#L40-L54\n            // So, we do a workaround mapping to change the color matching the theme.\n\n            // For example, in @babel/code-frame, the `keyword` is mapped to ANSI \"cyan\".\n            // We want the `keyword` to use the `syntax-keyword` color in the theme.\n            // So, we map the \"cyan\" to the `syntax-keyword` in the theme.\n            ''\n          }\n          /* cyan: keyword */\n          --color-ansi-cyan: var(--color-syntax-keyword);\n          /* yellow: capitalized, jsxIdentifier, punctuation */\n          --color-ansi-yellow: var(--color-syntax-punctuation);\n          /* magenta: number, regex */\n          --color-ansi-magenta: var(--color-syntax-number);\n          /* green: string */\n          --color-ansi-green: var(--color-syntax-string);\n          /* gray (bright black): comment, gutter */\n          --color-ansi-bright-black: var(--color-syntax-comment);\n\n          /* Ansi - Temporary */\n          --color-ansi-selection: var(--color-gray-alpha-300);\n          --color-ansi-bg: var(--color-background-200);\n          --color-ansi-fg: var(--color-gray-1000);\n\n          --color-ansi-white: var(--color-gray-700);\n          --color-ansi-black: var(--color-gray-200);\n          --color-ansi-blue: var(--color-blue-700);\n          --color-ansi-red: var(--color-red-700);\n          --color-ansi-bright-white: var(--color-gray-1000);\n          --color-ansi-bright-blue: var(--color-blue-800);\n          --color-ansi-bright-cyan: var(--color-blue-800);\n          --color-ansi-bright-green: var(--color-green-800);\n          --color-ansi-bright-magenta: var(--color-blue-800);\n          --color-ansi-bright-red: var(--color-red-800);\n          --color-ansi-bright-yellow: var(--color-amber-900);\n\n          /* Background Light */\n          --color-background-100: #ffffff;\n          --color-background-200: #fafafa;\n\n          /* Syntax Light */\n          --color-syntax-comment: #545454;\n          --color-syntax-constant: #171717;\n          --color-syntax-function: #0054ad;\n          --color-syntax-keyword: #a51850;\n          --color-syntax-link: #066056;\n          --color-syntax-parameter: #8f3e00;\n          --color-syntax-punctuation: #171717;\n          --color-syntax-string: #036157;\n          --color-syntax-string-expression: #066056;\n\n          /* Gray Scale Light */\n          --color-gray-100: #f2f2f2;\n          --color-gray-200: #ebebeb;\n          --color-gray-300: #e6e6e6;\n          --color-gray-400: #eaeaea;\n          --color-gray-500: #c9c9c9;\n          --color-gray-600: #a8a8a8;\n          --color-gray-700: #8f8f8f;\n          --color-gray-800: #7d7d7d;\n          --color-gray-900: #666666;\n          --color-gray-1000: #171717;\n\n          /* Gray Alpha Scale Light */\n          --color-gray-alpha-100: rgba(0, 0, 0, 0.05);\n          --color-gray-alpha-200: rgba(0, 0, 0, 0.081);\n          --color-gray-alpha-300: rgba(0, 0, 0, 0.1);\n          --color-gray-alpha-400: rgba(0, 0, 0, 0.08);\n          --color-gray-alpha-500: rgba(0, 0, 0, 0.21);\n          --color-gray-alpha-600: rgba(0, 0, 0, 0.34);\n          --color-gray-alpha-700: rgba(0, 0, 0, 0.44);\n          --color-gray-alpha-800: rgba(0, 0, 0, 0.51);\n          --color-gray-alpha-900: rgba(0, 0, 0, 0.605);\n          --color-gray-alpha-1000: rgba(0, 0, 0, 0.91);\n\n          /* Blue Scale Light */\n          --color-blue-100: #f0f7ff;\n          --color-blue-200: #edf6ff;\n          --color-blue-300: #e1f0ff;\n          --color-blue-400: #cde7ff;\n          --color-blue-500: #99ceff;\n          --color-blue-600: #52aeff;\n          --color-blue-700: #0070f3;\n          --color-blue-800: #0060d1;\n          --color-blue-900: #0067d6;\n          --color-blue-1000: #0025ad;\n\n          /* Red Scale Light */\n          --color-red-100: #fff0f0;\n          --color-red-200: #ffebeb;\n          --color-red-300: #ffe5e5;\n          --color-red-400: #fdd8d8;\n          --color-red-500: #f8baba;\n          --color-red-600: #f87274;\n          --color-red-700: #e5484d;\n          --color-red-800: #da3036;\n          --color-red-900: #ca2a30;\n          --color-red-1000: #381316;\n\n          /* Amber Scale Light */\n          --color-amber-100: #fff6e5;\n          --color-amber-200: #fff4d5;\n          --color-amber-300: #fef0cd;\n          --color-amber-400: #ffddbf;\n          --color-amber-500: #ffc96b;\n          --color-amber-600: #f5b047;\n          --color-amber-700: #ffb224;\n          --color-amber-800: #ff990a;\n          --color-amber-900: #a35200;\n          --color-amber-1000: #4e2009;\n\n          /* Green Scale Light */\n          --color-green-100: #effbef;\n          --color-green-200: #eafaea;\n          --color-green-300: #dcf6dc;\n          --color-green-400: #c8f1c9;\n          --color-green-500: #99e59f;\n          --color-green-600: #6cda76;\n          --color-green-700: #46a758;\n          --color-green-800: #388e4a;\n          --color-green-900: #297c3b;\n          --color-green-1000: #18311e;\n\n          /* Turbopack Light - Temporary */\n          --color-turbopack-text-red: #ff1e56;\n          --color-turbopack-text-blue: #0096ff;\n          --color-turbopack-border-red: #f0adbe;\n          --color-turbopack-border-blue: #adccea;\n          --color-turbopack-background-red: #fff7f9;\n          --color-turbopack-background-blue: #f6fbff;\n        }\n\n        :host(.dark) {\n          ${darkTheme}\n        }\n\n        @media (prefers-color-scheme: dark) {\n          :host(:not(.light)) {\n            ${darkTheme}\n          }\n        }\n      `}\n    </style>\n  )\n}\n"],"names":["css","darkTheme","Colors","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,MAAMC,YAAYD;AAiGlB,iDAAiD;AACjD,OAAO,SAASE;IACd,qBACE,KAACC;kBACEH,wBAGK,iCAAiC;QACjC,+GAA+G;QAC/G,oIAAoI;QACpI,yEAAyE;QAEzE,6EAA6E;QAC7E,wEAAwE;QACxE,8DAA8D;QAC9D,IA+HAC,WAKEA;;AAMd"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/colors.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nexport function Colors() {\n  return (\n    <style>\n      {css`\n        :host {\n          /* \n           * CAUTION: THIS IS A WORKAROUND!\n           * For now, we use @babel/code-frame to parse the code frame which does not support option to change the color.\n           * x-ref: https://github.com/babel/babel/blob/efa52324ff835b794c48080f14877b6caf32cd15/packages/babel-code-frame/src/defs.ts#L40-L54\n           * So, we do a workaround mapping to change the color matching the theme.\n           *\n           * For example, in @babel/code-frame, the \"keyword\" is mapped to ANSI \"cyan\".\n           * We want the \"keyword\" to use the \"syntax-keyword\" color in the theme.\n           * So, we map the \"cyan\" to the \"syntax-keyword\" in the theme.\n           */\n          /* cyan: keyword */\n          --color-ansi-cyan: var(--color-syntax-keyword);\n          /* yellow: capitalized, jsxIdentifier, punctuation */\n          --color-ansi-yellow: var(--color-syntax-function);\n          /* magenta: number, regex */\n          --color-ansi-magenta: var(--color-syntax-keyword);\n          /* green: string */\n          --color-ansi-green: var(--color-syntax-string);\n          /* gray (bright black): comment, gutter */\n          --color-ansi-bright-black: var(--color-syntax-comment);\n\n          /* Ansi - Temporary */\n          --color-ansi-selection: var(--color-gray-alpha-300);\n          --color-ansi-bg: var(--color-background-200);\n          --color-ansi-fg: var(--color-gray-1000);\n\n          --color-ansi-white: var(--color-gray-700);\n          --color-ansi-black: var(--color-gray-200);\n          --color-ansi-blue: var(--color-blue-700);\n          --color-ansi-red: var(--color-red-700);\n          --color-ansi-bright-white: var(--color-gray-1000);\n          --color-ansi-bright-blue: var(--color-blue-800);\n          --color-ansi-bright-cyan: var(--color-blue-800);\n          --color-ansi-bright-green: var(--color-green-800);\n          --color-ansi-bright-magenta: var(--color-blue-800);\n          --color-ansi-bright-red: var(--color-red-800);\n          --color-ansi-bright-yellow: var(--color-amber-900);\n\n          /* Background Light */\n          --color-background-100: #ffffff;\n          --color-background-200: #fafafa;\n\n          /* Syntax Light */\n          --color-syntax-comment: #545454;\n          --color-syntax-constant: #171717;\n          --color-syntax-function: #0054ad;\n          --color-syntax-keyword: #a51850;\n          --color-syntax-link: #066056;\n          --color-syntax-parameter: #8f3e00;\n          --color-syntax-punctuation: #171717;\n          --color-syntax-string: #036157;\n          --color-syntax-string-expression: #066056;\n\n          /* Gray Scale Light */\n          --color-gray-100: #f2f2f2;\n          --color-gray-200: #ebebeb;\n          --color-gray-300: #e6e6e6;\n          --color-gray-400: #eaeaea;\n          --color-gray-500: #c9c9c9;\n          --color-gray-600: #a8a8a8;\n          --color-gray-700: #8f8f8f;\n          --color-gray-800: #7d7d7d;\n          --color-gray-900: #666666;\n          --color-gray-1000: #171717;\n\n          /* Gray Alpha Scale Light */\n          --color-gray-alpha-100: rgba(0, 0, 0, 0.05);\n          --color-gray-alpha-200: rgba(0, 0, 0, 0.081);\n          --color-gray-alpha-300: rgba(0, 0, 0, 0.1);\n          --color-gray-alpha-400: rgba(0, 0, 0, 0.08);\n          --color-gray-alpha-500: rgba(0, 0, 0, 0.21);\n          --color-gray-alpha-600: rgba(0, 0, 0, 0.34);\n          --color-gray-alpha-700: rgba(0, 0, 0, 0.44);\n          --color-gray-alpha-800: rgba(0, 0, 0, 0.51);\n          --color-gray-alpha-900: rgba(0, 0, 0, 0.605);\n          --color-gray-alpha-1000: rgba(0, 0, 0, 0.91);\n\n          /* Blue Scale Light */\n          --color-blue-100: #f0f7ff;\n          --color-blue-200: #edf6ff;\n          --color-blue-300: #e1f0ff;\n          --color-blue-400: #cde7ff;\n          --color-blue-500: #99ceff;\n          --color-blue-600: #52aeff;\n          --color-blue-700: #0070f3;\n          --color-blue-800: #0060d1;\n          --color-blue-900: #0067d6;\n          --color-blue-1000: #0025ad;\n\n          /* Red Scale Light */\n          --color-red-100: #fff0f0;\n          --color-red-200: #ffebeb;\n          --color-red-300: #ffe5e5;\n          --color-red-400: #fdd8d8;\n          --color-red-500: #f8baba;\n          --color-red-600: #f87274;\n          --color-red-700: #e5484d;\n          --color-red-800: #da3036;\n          --color-red-900: #ca2a30;\n          --color-red-1000: #381316;\n\n          /* Amber Scale Light */\n          --color-amber-100: #fff6e5;\n          --color-amber-200: #fff4d5;\n          --color-amber-300: #fef0cd;\n          --color-amber-400: #ffddbf;\n          --color-amber-500: #ffc96b;\n          --color-amber-600: #f5b047;\n          --color-amber-700: #ffb224;\n          --color-amber-800: #ff990a;\n          --color-amber-900: #a35200;\n          --color-amber-1000: #4e2009;\n\n          /* Green Scale Light */\n          --color-green-100: #effbef;\n          --color-green-200: #eafaea;\n          --color-green-300: #dcf6dc;\n          --color-green-400: #c8f1c9;\n          --color-green-500: #99e59f;\n          --color-green-600: #6cda76;\n          --color-green-700: #46a758;\n          --color-green-800: #388e4a;\n          --color-green-900: #297c3b;\n          --color-green-1000: #18311e;\n\n          /* Turbopack Light - Temporary */\n          --color-turbopack-text-red: #ff1e56;\n          --color-turbopack-text-blue: #0096ff;\n          --color-turbopack-border-red: #f0adbe;\n          --color-turbopack-border-blue: #adccea;\n          --color-turbopack-background-red: #fff7f9;\n          --color-turbopack-background-blue: #f6fbff;\n        }\n      `}\n    </style>\n  )\n}\n"],"names":["css","Colors","style"],"mappings":";;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,OAAO,SAASC;IACd,qBACE,KAACC;kBACEF;;AA0IP"}

package/dist/esm/client/components/react-dev-overlay/ui/styles/dark-theme.js

@@ -0,0 +1,25 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+function _templateObject() {
+    const data = _tagged_template_literal_loose([
+        "\n      :host(.dark) {\n        ",
+        "\n        ",
+        "\n\n      @media (prefers-color-scheme: dark) {\n        :host(:not(.light)) {\n          ",
+        "\n          ",
+        "\n      }\n    "
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '../../utils/css';
+const colors = "\n  /* Background Dark */\n  --color-background-100: #0a0a0a;\n  --color-background-200: #000000;\n\n  /* Syntax Dark */\n  --color-syntax-comment: #a0a0a0;\n  --color-syntax-constant: #ededed;\n  --color-syntax-function: #52a9ff;\n  --color-syntax-keyword: #f76e99;\n  --color-syntax-link: #0ac5b2;\n  --color-syntax-parameter: #f1a10d;\n  --color-syntax-punctuation: #ededed;\n  --color-syntax-string: #0ac5b2;\n  --color-syntax-string-expression: #0ac5b2;\n\n  /* Gray Scale Dark */\n  --color-gray-100: #1a1a1a;\n  --color-gray-200: #1f1f1f;\n  --color-gray-300: #292929;\n  --color-gray-400: #2e2e2e;\n  --color-gray-500: #454545;\n  --color-gray-600: #878787;\n  --color-gray-700: #8f8f8f;\n  --color-gray-800: #7d7d7d;\n  --color-gray-900: #a0a0a0;\n  --color-gray-1000: #ededed;\n\n  /* Gray Alpha Scale Dark */\n  --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n  --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n  --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n  --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n  --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n  --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n  --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n  --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n  --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n  --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n  /* Blue Scale Dark */\n  --color-blue-100: #0f1b2d;\n  --color-blue-200: #10243e;\n  --color-blue-300: #0f3058;\n  --color-blue-400: #0d3868;\n  --color-blue-500: #0a4481;\n  --color-blue-600: #0091ff;\n  --color-blue-700: #0070f3;\n  --color-blue-800: #0060d1;\n  --color-blue-900: #52a9ff;\n  --color-blue-1000: #eaf6ff;\n\n  /* Red Scale Dark */\n  --color-red-100: #2a1314;\n  --color-red-200: #3d1719;\n  --color-red-300: #551a1e;\n  --color-red-400: #671e22;\n  --color-red-500: #822025;\n  --color-red-600: #e5484d;\n  --color-red-700: #e5484d;\n  --color-red-800: #da3036;\n  --color-red-900: #ff6369;\n  --color-red-1000: #ffecee;\n\n  /* Amber Scale Dark */\n  --color-amber-100: #271700;\n  --color-amber-200: #341c00;\n  --color-amber-300: #4a2900;\n  --color-amber-400: #573300;\n  --color-amber-500: #693f05;\n  --color-amber-600: #e79c13;\n  --color-amber-700: #ffb224;\n  --color-amber-800: #ff990a;\n  --color-amber-900: #f1a10d;\n  --color-amber-1000: #fef3dd;\n\n  /* Green Scale Dark */\n  --color-green-100: #0b2211;\n  --color-green-200: #0f2c17;\n  --color-green-300: #11351b;\n  --color-green-400: #0c461b;\n  --color-green-500: #126427;\n  --color-green-600: #1a9338;\n  --color-green-700: #46a758;\n  --color-green-800: #388e4a;\n  --color-green-900: #63c174;\n  --color-green-1000: #e5fbeb;\n\n  /* Turbopack Dark - Temporary */\n  --color-turbopack-text-red: #ff6d92;\n  --color-turbopack-text-blue: #45b2ff;\n  --color-turbopack-border-red: #6e293b;\n  --color-turbopack-border-blue: #284f80;\n  --color-turbopack-background-red: #250d12;\n  --color-turbopack-background-blue: #0a1723;\n";
+const base = "\n  --color-font: white;\n  --color-backdrop: rgba(0, 0, 0, 0.8);\n  --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n  --color-title-color: #fafafa;\n  --color-stack-notes: #a9a9a9;\n";
+export function DarkTheme() {
+    return /*#__PURE__*/ _jsx("style", {
+        children: css(_templateObject(), base, colors, base, colors)
+    });
+}
+
+//# sourceMappingURL=dark-theme.js.map

package/dist/esm/client/components/react-dev-overlay/ui/styles/dark-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/styles/dark-theme.tsx"],"sourcesContent":["import { css } from '../../utils/css'\n\nconst colors = `\n  /* Background Dark */\n  --color-background-100: #0a0a0a;\n  --color-background-200: #000000;\n\n  /* Syntax Dark */\n  --color-syntax-comment: #a0a0a0;\n  --color-syntax-constant: #ededed;\n  --color-syntax-function: #52a9ff;\n  --color-syntax-keyword: #f76e99;\n  --color-syntax-link: #0ac5b2;\n  --color-syntax-parameter: #f1a10d;\n  --color-syntax-punctuation: #ededed;\n  --color-syntax-string: #0ac5b2;\n  --color-syntax-string-expression: #0ac5b2;\n\n  /* Gray Scale Dark */\n  --color-gray-100: #1a1a1a;\n  --color-gray-200: #1f1f1f;\n  --color-gray-300: #292929;\n  --color-gray-400: #2e2e2e;\n  --color-gray-500: #454545;\n  --color-gray-600: #878787;\n  --color-gray-700: #8f8f8f;\n  --color-gray-800: #7d7d7d;\n  --color-gray-900: #a0a0a0;\n  --color-gray-1000: #ededed;\n\n  /* Gray Alpha Scale Dark */\n  --color-gray-alpha-100: rgba(255, 255, 255, 0.066);\n  --color-gray-alpha-200: rgba(255, 255, 255, 0.087);\n  --color-gray-alpha-300: rgba(255, 255, 255, 0.125);\n  --color-gray-alpha-400: rgba(255, 255, 255, 0.145);\n  --color-gray-alpha-500: rgba(255, 255, 255, 0.239);\n  --color-gray-alpha-600: rgba(255, 255, 255, 0.506);\n  --color-gray-alpha-700: rgba(255, 255, 255, 0.54);\n  --color-gray-alpha-800: rgba(255, 255, 255, 0.47);\n  --color-gray-alpha-900: rgba(255, 255, 255, 0.61);\n  --color-gray-alpha-1000: rgba(255, 255, 255, 0.923);\n\n  /* Blue Scale Dark */\n  --color-blue-100: #0f1b2d;\n  --color-blue-200: #10243e;\n  --color-blue-300: #0f3058;\n  --color-blue-400: #0d3868;\n  --color-blue-500: #0a4481;\n  --color-blue-600: #0091ff;\n  --color-blue-700: #0070f3;\n  --color-blue-800: #0060d1;\n  --color-blue-900: #52a9ff;\n  --color-blue-1000: #eaf6ff;\n\n  /* Red Scale Dark */\n  --color-red-100: #2a1314;\n  --color-red-200: #3d1719;\n  --color-red-300: #551a1e;\n  --color-red-400: #671e22;\n  --color-red-500: #822025;\n  --color-red-600: #e5484d;\n  --color-red-700: #e5484d;\n  --color-red-800: #da3036;\n  --color-red-900: #ff6369;\n  --color-red-1000: #ffecee;\n\n  /* Amber Scale Dark */\n  --color-amber-100: #271700;\n  --color-amber-200: #341c00;\n  --color-amber-300: #4a2900;\n  --color-amber-400: #573300;\n  --color-amber-500: #693f05;\n  --color-amber-600: #e79c13;\n  --color-amber-700: #ffb224;\n  --color-amber-800: #ff990a;\n  --color-amber-900: #f1a10d;\n  --color-amber-1000: #fef3dd;\n\n  /* Green Scale Dark */\n  --color-green-100: #0b2211;\n  --color-green-200: #0f2c17;\n  --color-green-300: #11351b;\n  --color-green-400: #0c461b;\n  --color-green-500: #126427;\n  --color-green-600: #1a9338;\n  --color-green-700: #46a758;\n  --color-green-800: #388e4a;\n  --color-green-900: #63c174;\n  --color-green-1000: #e5fbeb;\n\n  /* Turbopack Dark - Temporary */\n  --color-turbopack-text-red: #ff6d92;\n  --color-turbopack-text-blue: #45b2ff;\n  --color-turbopack-border-red: #6e293b;\n  --color-turbopack-border-blue: #284f80;\n  --color-turbopack-background-red: #250d12;\n  --color-turbopack-background-blue: #0a1723;\n`\n\nconst base = `\n  --color-font: white;\n  --color-backdrop: rgba(0, 0, 0, 0.8);\n  --color-border-shadow: rgba(255, 255, 255, 0.145);\n\n  --color-title-color: #fafafa;\n  --color-stack-notes: #a9a9a9;\n`\n\nexport function DarkTheme() {\n  return (\n    <style>{css`\n      :host(.dark) {\n        ${base}\n        ${colors}\n\n      @media (prefers-color-scheme: dark) {\n        :host(:not(.light)) {\n          ${base}\n          ${colors}\n      }\n    `}</style>\n  )\n}\n"],"names":["css","colors","base","DarkTheme","style"],"mappings":";;;;;;;;;;;;;;;AAAA,SAASA,GAAG,QAAQ,kBAAiB;AAErC,MAAMC,SAAU;AAiGhB,MAAMC,OAAQ;AASd,OAAO,SAASC;IACd,qBACE,KAACC;kBAAOJ,uBAEFE,MACAD,QAIEC,MACAD;;AAIZ"}

package/dist/esm/client/components/react-dev-overlay/utils/stack-frame.js

@@ -4,11 +4,11 @@ function getOriginalStackFrame(source, response) {
     async function _getOriginalStackFrame() {
         var _body_originalStackFrame;
         if (response.status === 'rejected') {
-            return Promise.reject(Object.defineProperty(new Error(response.reason), "__NEXT_ERROR_CODE", {
+            throw Object.defineProperty(new Error(response.reason), "__NEXT_ERROR_CODE", {
                 value: "E394",
                 enumerable: false,
                 configurable: true
-            }));
+            });
         }
         const body = response.value;
         return {
@@ -18,7 +18,6 @@ function getOriginalStackFrame(source, response) {
             sourceStackFrame: source,
             originalStackFrame: body.originalStackFrame,
             originalCodeFrame: body.originalCodeFrame || null,
-            sourcePackage: body.sourcePackage,
             ignored: ((_body_originalStackFrame = body.originalStackFrame) == null ? void 0 : _body_originalStackFrame.ignored) || false
         };
     }
@@ -31,7 +30,6 @@ function getOriginalStackFrame(source, response) {
             sourceStackFrame: source,
             originalStackFrame: null,
             originalCodeFrame: null,
-            sourcePackage: null,
             ignored: true
         });
     }
@@ -44,7 +42,6 @@ function getOriginalStackFrame(source, response) {
             sourceStackFrame: source,
             originalStackFrame: null,
             originalCodeFrame: null,
-            sourcePackage: null,
             ignored: false
         };
     });

package/dist/esm/client/components/react-dev-overlay/utils/stack-frame.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/utils/stack-frame.ts"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport type {\n  OriginalStackFrameResponse,\n  OriginalStackFrameResponseResult,\n  OriginalStackFramesRequest,\n} from '../server/shared'\nimport {\n  isWebpackInternalResource,\n  formatFrameSourceFile,\n} from './webpack-module-path'\nexport interface OriginalStackFrame extends OriginalStackFrameResponse {\n  error: boolean\n  reason: string | null\n  external: boolean\n  ignored: boolean\n  sourceStackFrame: StackFrame\n}\n\nfunction getOriginalStackFrame(\n  source: StackFrame,\n  response: OriginalStackFrameResponseResult\n): Promise<OriginalStackFrame> {\n  async function _getOriginalStackFrame(): Promise<OriginalStackFrame> {\n    if (response.status === 'rejected') {\n      return Promise.reject(new Error(response.reason))\n    }\n\n    const body: OriginalStackFrameResponse = response.value\n\n    return {\n      error: false,\n      reason: null,\n      external: false,\n      sourceStackFrame: source,\n      originalStackFrame: body.originalStackFrame,\n      originalCodeFrame: body.originalCodeFrame || null,\n      sourcePackage: body.sourcePackage,\n      ignored: body.originalStackFrame?.ignored || false,\n    }\n  }\n\n  // TODO: merge this section into ignoredList handling\n  if (source.file === 'file://' || source.file?.match(/https?:\\/\\//)) {\n    return Promise.resolve({\n      error: false,\n      reason: null,\n      external: true,\n      sourceStackFrame: source,\n      originalStackFrame: null,\n      originalCodeFrame: null,\n      sourcePackage: null,\n      ignored: true,\n    })\n  }\n\n  return _getOriginalStackFrame().catch((err: Error) => ({\n    error: true,\n    reason: err?.message ?? err?.toString() ?? 'Unknown Error',\n    external: false,\n    sourceStackFrame: source,\n    originalStackFrame: null,\n    originalCodeFrame: null,\n    sourcePackage: null,\n    ignored: false,\n  }))\n}\n\nexport async function getOriginalStackFrames(\n  frames: StackFrame[],\n  type: 'server' | 'edge-server' | null,\n  isAppDir: boolean\n): Promise<OriginalStackFrame[]> {\n  const req: OriginalStackFramesRequest = {\n    frames,\n    isServer: type === 'server',\n    isEdgeServer: type === 'edge-server',\n    isAppDirectory: isAppDir,\n  }\n\n  let res: Response | undefined = undefined\n  let reason: string | undefined = undefined\n  try {\n    res = await fetch('/__nextjs_original-stack-frames', {\n      method: 'POST',\n      body: JSON.stringify(req),\n    })\n  } catch (e) {\n    reason = e + ''\n  }\n\n  // When fails to fetch the original stack frames, we reject here to be\n  // caught at `_getOriginalStackFrame()` and return the stack frames so\n  // that the error overlay can render.\n  if (res && res.ok && res.status !== 204) {\n    const data = await res.json()\n    return Promise.all(\n      frames.map((frame, index) => getOriginalStackFrame(frame, data[index]))\n    )\n  } else {\n    if (res) {\n      reason = await res.text()\n    }\n  }\n  return Promise.all(\n    frames.map((frame) =>\n      getOriginalStackFrame(frame, {\n        status: 'rejected',\n        reason: `Failed to fetch the original stack frames ${reason ? `: ${reason}` : ''}`,\n      })\n    )\n  )\n}\n\nexport function getFrameSource(frame: StackFrame): string {\n  if (!frame.file) return ''\n\n  const isWebpackFrame = isWebpackInternalResource(frame.file)\n\n  let str = ''\n  // Skip URL parsing for webpack internal file paths.\n  if (isWebpackFrame) {\n    str = formatFrameSourceFile(frame.file)\n  } else {\n    try {\n      const u = new URL(frame.file)\n\n      let parsedPath = ''\n      // Strip the origin for same-origin scripts.\n      if (globalThis.location?.origin !== u.origin) {\n        // URLs can be valid without an `origin`, so long as they have a\n        // `protocol`. However, `origin` is preferred.\n        if (u.origin === 'null') {\n          parsedPath += u.protocol\n        } else {\n          parsedPath += u.origin\n        }\n      }\n\n      // Strip query string information as it's typically too verbose to be\n      // meaningful.\n      parsedPath += u.pathname\n      str = formatFrameSourceFile(parsedPath)\n    } catch {\n      str = formatFrameSourceFile(frame.file)\n    }\n  }\n\n  if (!isWebpackInternalResource(frame.file) && frame.lineNumber != null) {\n    if (str) {\n      if (frame.column != null) {\n        str += ` (${frame.lineNumber}:${frame.column})`\n      } else {\n        str += ` (${frame.lineNumber})`\n      }\n    }\n  }\n  return str\n}\n"],"names":["isWebpackInternalResource","formatFrameSourceFile","getOriginalStackFrame","source","response","_getOriginalStackFrame","body","status","Promise","reject","Error","reason","value","error","external","sourceStackFrame","originalStackFrame","originalCodeFrame","sourcePackage","ignored","file","match","resolve","catch","err","message","toString","getOriginalStackFrames","frames","type","isAppDir","req","isServer","isEdgeServer","isAppDirectory","res","undefined","fetch","method","JSON","stringify","e","ok","data","json","all","map","frame","index","text","getFrameSource","isWebpackFrame","str","globalThis","u","URL","parsedPath","location","origin","protocol","pathname","lineNumber","column"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/client/components/react-dev-overlay/utils/stack-frame.ts"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport type {\n  OriginalStackFrameResponse,\n  OriginalStackFrameResponseResult,\n  OriginalStackFramesRequest,\n} from '../server/shared'\nimport {\n  isWebpackInternalResource,\n  formatFrameSourceFile,\n} from './webpack-module-path'\n\nexport interface ResolvedOriginalStackFrame extends OriginalStackFrameResponse {\n  error: false\n  reason: null\n  external: boolean\n  ignored: boolean\n  sourceStackFrame: StackFrame\n}\n\nexport interface RejectedOriginalStackFrame extends OriginalStackFrameResponse {\n  error: true\n  reason: string\n  external: boolean\n  ignored: boolean\n  sourceStackFrame: StackFrame\n}\n\nexport type OriginalStackFrame =\n  | ResolvedOriginalStackFrame\n  | RejectedOriginalStackFrame\n\nfunction getOriginalStackFrame(\n  source: StackFrame,\n  response: OriginalStackFrameResponseResult\n): Promise<OriginalStackFrame> {\n  async function _getOriginalStackFrame(): Promise<ResolvedOriginalStackFrame> {\n    if (response.status === 'rejected') {\n      throw new Error(response.reason)\n    }\n\n    const body: OriginalStackFrameResponse = response.value\n\n    return {\n      error: false,\n      reason: null,\n      external: false,\n      sourceStackFrame: source,\n      originalStackFrame: body.originalStackFrame,\n      originalCodeFrame: body.originalCodeFrame || null,\n      ignored: body.originalStackFrame?.ignored || false,\n    }\n  }\n\n  // TODO: merge this section into ignoredList handling\n  if (source.file === 'file://' || source.file?.match(/https?:\\/\\//)) {\n    return Promise.resolve({\n      error: false,\n      reason: null,\n      external: true,\n      sourceStackFrame: source,\n      originalStackFrame: null,\n      originalCodeFrame: null,\n      ignored: true,\n    })\n  }\n\n  return _getOriginalStackFrame().catch(\n    (err: Error): RejectedOriginalStackFrame => ({\n      error: true,\n      reason: err?.message ?? err?.toString() ?? 'Unknown Error',\n      external: false,\n      sourceStackFrame: source,\n      originalStackFrame: null,\n      originalCodeFrame: null,\n      ignored: false,\n    })\n  )\n}\n\nexport async function getOriginalStackFrames(\n  frames: StackFrame[],\n  type: 'server' | 'edge-server' | null,\n  isAppDir: boolean\n): Promise<OriginalStackFrame[]> {\n  const req: OriginalStackFramesRequest = {\n    frames,\n    isServer: type === 'server',\n    isEdgeServer: type === 'edge-server',\n    isAppDirectory: isAppDir,\n  }\n\n  let res: Response | undefined = undefined\n  let reason: string | undefined = undefined\n  try {\n    res = await fetch('/__nextjs_original-stack-frames', {\n      method: 'POST',\n      body: JSON.stringify(req),\n    })\n  } catch (e) {\n    reason = e + ''\n  }\n\n  // When fails to fetch the original stack frames, we reject here to be\n  // caught at `_getOriginalStackFrame()` and return the stack frames so\n  // that the error overlay can render.\n  if (res && res.ok && res.status !== 204) {\n    const data = await res.json()\n    return Promise.all(\n      frames.map((frame, index) => getOriginalStackFrame(frame, data[index]))\n    )\n  } else {\n    if (res) {\n      reason = await res.text()\n    }\n  }\n  return Promise.all(\n    frames.map((frame) =>\n      getOriginalStackFrame(frame, {\n        status: 'rejected',\n        reason: `Failed to fetch the original stack frames ${reason ? `: ${reason}` : ''}`,\n      })\n    )\n  )\n}\n\nexport function getFrameSource(frame: StackFrame): string {\n  if (!frame.file) return ''\n\n  const isWebpackFrame = isWebpackInternalResource(frame.file)\n\n  let str = ''\n  // Skip URL parsing for webpack internal file paths.\n  if (isWebpackFrame) {\n    str = formatFrameSourceFile(frame.file)\n  } else {\n    try {\n      const u = new URL(frame.file)\n\n      let parsedPath = ''\n      // Strip the origin for same-origin scripts.\n      if (globalThis.location?.origin !== u.origin) {\n        // URLs can be valid without an `origin`, so long as they have a\n        // `protocol`. However, `origin` is preferred.\n        if (u.origin === 'null') {\n          parsedPath += u.protocol\n        } else {\n          parsedPath += u.origin\n        }\n      }\n\n      // Strip query string information as it's typically too verbose to be\n      // meaningful.\n      parsedPath += u.pathname\n      str = formatFrameSourceFile(parsedPath)\n    } catch {\n      str = formatFrameSourceFile(frame.file)\n    }\n  }\n\n  if (!isWebpackInternalResource(frame.file) && frame.lineNumber != null) {\n    if (str) {\n      if (frame.column != null) {\n        str += ` (${frame.lineNumber}:${frame.column})`\n      } else {\n        str += ` (${frame.lineNumber})`\n      }\n    }\n  }\n  return str\n}\n"],"names":["isWebpackInternalResource","formatFrameSourceFile","getOriginalStackFrame","source","response","_getOriginalStackFrame","body","status","Error","reason","value","error","external","sourceStackFrame","originalStackFrame","originalCodeFrame","ignored","file","match","Promise","resolve","catch","err","message","toString","getOriginalStackFrames","frames","type","isAppDir","req","isServer","isEdgeServer","isAppDirectory","res","undefined","fetch","method","JSON","stringify","e","ok","data","json","all","map","frame","index","text","getFrameSource","isWebpackFrame","str","globalThis","u","URL","parsedPath","location","origin","protocol","pathname","lineNumber","column"],"mappings":"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"}

package/dist/esm/client/components/router-reducer/reducers/navigate-reducer.js

@@ -67,7 +67,7 @@ function triggerLazyFetchForLeafSegments(newCache, currentCache, flightSegmentPa
     }
     return appliedPatch;
 }
-function handleNavigationResult(state, mutable, pendingPush, result) {
+function handleNavigationResult(url, state, mutable, pendingPush, result) {
     switch(result.tag){
         case NavigationResultTag.MPA:
             {
@@ -76,8 +76,27 @@ function handleNavigationResult(state, mutable, pendingPush, result) {
                 return handleExternalUrl(state, mutable, newUrl, pendingPush);
             }
         case NavigationResultTag.NoOp:
-            // The server responded with no change to the current page.
-            return handleMutable(state, mutable);
+            {
+                // The server responded with no change to the current page. However, if
+                // the URL changed, we still need to update that.
+                const newCanonicalUrl = result.data.canonicalUrl;
+                mutable.canonicalUrl = newCanonicalUrl;
+                // Check if the only thing that changed was the hash fragment.
+                const oldUrl = new URL(state.canonicalUrl, url);
+                const onlyHashChange = // We don't need to compare the origins, because client-driven
+                // navigations are always same-origin.
+                url.pathname === oldUrl.pathname && url.search === oldUrl.search && url.hash !== oldUrl.hash;
+                if (onlyHashChange) {
+                    // The only updated part of the URL is the hash.
+                    mutable.onlyHashChange = true;
+                    mutable.shouldScroll = result.data.shouldScroll;
+                    mutable.hashFragment = url.hash;
+                    // Setting this to an empty array triggers a scroll for all new and
+                    // updated segments. See `ScrollAndFocusHandler` for more details.
+                    mutable.scrollableSegments = [];
+                }
+                return handleMutable(state, mutable);
+            }
         case NavigationResultTag.Success:
             {
                 // Received a new result.
@@ -86,13 +105,12 @@ function handleNavigationResult(state, mutable, pendingPush, result) {
                 mutable.canonicalUrl = result.data.canonicalUrl;
                 mutable.scrollableSegments = result.data.scrollableSegments;
                 mutable.shouldScroll = result.data.shouldScroll;
-                // TODO: Not yet implemented
-                // mutable.hashFragment = hash
+                mutable.hashFragment = result.data.hash;
                 return handleMutable(state, mutable);
             }
         case NavigationResultTag.Async:
             {
-                return result.data.then((asyncResult)=>handleNavigationResult(state, mutable, pendingPush, asyncResult), // If the navigation failed, return the current state.
+                return result.data.then((asyncResult)=>handleNavigationResult(url, state, mutable, pendingPush, asyncResult), // If the navigation failed, return the current state.
                 // TODO: This matches the current behavior but we need to do something
                 // better here if the network fails.
                 ()=>{
@@ -100,8 +118,10 @@ function handleNavigationResult(state, mutable, pendingPush, result) {
                 });
             }
         default:
-            const _exhaustiveCheck = result;
-            return state;
+            {
+                result;
+                return state;
+            }
     }
 }
 export function navigateReducer(state, action) {
@@ -135,7 +155,7 @@ export function navigateReducer(state, action) {
         // it will return a sync result if the navigation was prefetched. Hence
         // a result type that's more complicated than you might expect.
         const result = navigateUsingSegmentCache(url, state.cache, state.tree, state.nextUrl, shouldScroll);
-        return handleNavigationResult(state, mutable, pendingPush, result);
+        return handleNavigationResult(url, state, mutable, pendingPush, result);
     }
     const prefetchValues = getOrCreatePrefetchCacheEntry({
         url,