next 15.1.1-canary.11 → 15.1.1-canary.12

package/dist/esm/build/swc/index.js

@@ -11,7 +11,7 @@ import { isDeepStrictEqual } from 'util';
 import { getDefineEnv } from '../webpack/plugins/define-env-plugin';
 import { getReactCompilerLoader } from '../get-babel-loader-config';
 import { TurbopackInternalError } from '../../server/dev/turbopack-utils';
-const nextVersion = "15.1.1-canary.11";
+const nextVersion = "15.1.1-canary.12";
 const ArchName = arch();
 const PlatformName = platform();
 function infoLog(...args) {

package/dist/esm/build/webpack-config.js

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

package/dist/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.1.1-canary.11";
+ */ const version = "15.1.1-canary.12";
 window.next = {
     version,
     appDir: true

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { ShadowPortal } from '../internal/components/ShadowPortal';
+import { BuildError } from '../internal/container/BuildError';
+import { Errors } from '../internal/container/Errors';
+import { StaticIndicator } from '../internal/container/StaticIndicator';
+import { Base } from '../internal/styles/Base';
+import { ComponentStyles } from '../internal/styles/ComponentStyles';
+import { CssReset } from '../internal/styles/CssReset';
+import { RootLayoutMissingTagsError } from '../internal/container/root-layout-missing-tags-error';
+import { RuntimeErrorHandler } from '../internal/helpers/runtime-error-handler';
+class ReactDevOverlay extends React.PureComponent {
+    static getDerivedStateFromError(error) {
+        if (!error.stack) return {
+            isReactError: false
+        };
+        RuntimeErrorHandler.hadRuntimeError = true;
+        return {
+            isReactError: true
+        };
+    }
+    render() {
+        var _state_rootLayoutMissingTags;
+        const { state, children, dispatcher } = this.props;
+        const { isReactError } = this.state;
+        const hasBuildError = state.buildError != null;
+        const hasRuntimeErrors = Boolean(state.errors.length);
+        const hasStaticIndicator = state.staticIndicator;
+        const debugInfo = state.debugInfo;
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                isReactError ? /*#__PURE__*/ _jsxs("html", {
+                    children: [
+                        /*#__PURE__*/ _jsx("head", {}),
+                        /*#__PURE__*/ _jsx("body", {})
+                    ]
+                }) : children,
+                /*#__PURE__*/ _jsxs(ShadowPortal, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CssReset, {}),
+                        /*#__PURE__*/ _jsx(Base, {}),
+                        /*#__PURE__*/ _jsx(ComponentStyles, {}),
+                        ((_state_rootLayoutMissingTags = state.rootLayoutMissingTags) == null ? void 0 : _state_rootLayoutMissingTags.length) ? /*#__PURE__*/ _jsx(RootLayoutMissingTagsError, {
+                            missingTags: state.rootLayoutMissingTags
+                        }) : hasBuildError ? /*#__PURE__*/ _jsx(BuildError, {
+                            message: state.buildError,
+                            versionInfo: state.versionInfo
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                hasRuntimeErrors ? /*#__PURE__*/ _jsx(Errors, {
+                                    isAppDir: true,
+                                    initialDisplayState: isReactError ? 'fullscreen' : 'minimized',
+                                    errors: state.errors,
+                                    versionInfo: state.versionInfo,
+                                    hasStaticIndicator: hasStaticIndicator,
+                                    debugInfo: debugInfo
+                                }) : null,
+                                hasStaticIndicator && /*#__PURE__*/ _jsx(StaticIndicator, {
+                                    dispatcher: dispatcher
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args), this.state = {
+            isReactError: false
+        };
+    }
+}
+export { ReactDevOverlay as default };
+
+//# sourceMappingURL=ReactDevOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/_experimental/app/ReactDevOverlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../shared'\nimport type { Dispatcher } from '../../app/hot-reloader-client'\n\nimport React from 'react'\n\nimport { ShadowPortal } from '../internal/components/ShadowPortal'\nimport { BuildError } from '../internal/container/BuildError'\nimport { Errors } from '../internal/container/Errors'\nimport { StaticIndicator } from '../internal/container/StaticIndicator'\nimport { Base } from '../internal/styles/Base'\nimport { ComponentStyles } from '../internal/styles/ComponentStyles'\nimport { CssReset } from '../internal/styles/CssReset'\nimport { RootLayoutMissingTagsError } from '../internal/container/root-layout-missing-tags-error'\nimport { RuntimeErrorHandler } from '../internal/helpers/runtime-error-handler'\n\ninterface ReactDevOverlayState {\n  isReactError: boolean\n}\nexport default class ReactDevOverlay extends React.PureComponent<\n  {\n    state: OverlayState\n    dispatcher?: Dispatcher\n    children: React.ReactNode\n  },\n  ReactDevOverlayState\n> {\n  state = { isReactError: false }\n\n  static getDerivedStateFromError(error: Error): ReactDevOverlayState {\n    if (!error.stack) return { isReactError: false }\n\n    RuntimeErrorHandler.hadRuntimeError = true\n    return {\n      isReactError: true,\n    }\n  }\n\n  render() {\n    const { state, children, dispatcher } = this.props\n    const { isReactError } = this.state\n\n    const hasBuildError = state.buildError != null\n    const hasRuntimeErrors = Boolean(state.errors.length)\n    const hasStaticIndicator = state.staticIndicator\n    const debugInfo = state.debugInfo\n\n    return (\n      <>\n        {isReactError ? (\n          <html>\n            <head></head>\n            <body></body>\n          </html>\n        ) : (\n          children\n        )}\n        <ShadowPortal>\n          <CssReset />\n          <Base />\n          <ComponentStyles />\n          {state.rootLayoutMissingTags?.length ? (\n            <RootLayoutMissingTagsError\n              missingTags={state.rootLayoutMissingTags}\n            />\n          ) : hasBuildError ? (\n            <BuildError\n              message={state.buildError!}\n              versionInfo={state.versionInfo}\n            />\n          ) : (\n            <>\n              {hasRuntimeErrors ? (\n                <Errors\n                  isAppDir={true}\n                  initialDisplayState={\n                    isReactError ? 'fullscreen' : 'minimized'\n                  }\n                  errors={state.errors}\n                  versionInfo={state.versionInfo}\n                  hasStaticIndicator={hasStaticIndicator}\n                  debugInfo={debugInfo}\n                />\n              ) : null}\n\n              {hasStaticIndicator && (\n                <StaticIndicator dispatcher={dispatcher} />\n              )}\n            </>\n          )}\n        </ShadowPortal>\n      </>\n    )\n  }\n}\n"],"names":["React","ShadowPortal","BuildError","Errors","StaticIndicator","Base","ComponentStyles","CssReset","RootLayoutMissingTagsError","RuntimeErrorHandler","ReactDevOverlay","PureComponent","getDerivedStateFromError","error","stack","isReactError","hadRuntimeError","render","state","children","dispatcher","props","hasBuildError","buildError","hasRuntimeErrors","Boolean","errors","length","hasStaticIndicator","staticIndicator","debugInfo","html","head","body","rootLayoutMissingTags","missingTags","message","versionInfo","isAppDir","initialDisplayState"],"mappings":";AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,sCAAqC;AAClE,SAASC,UAAU,QAAQ,mCAAkC;AAC7D,SAASC,MAAM,QAAQ,+BAA8B;AACrD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,IAAI,QAAQ,0BAAyB;AAC9C,SAASC,eAAe,QAAQ,qCAAoC;AACpE,SAASC,QAAQ,QAAQ,8BAA6B;AACtD,SAASC,0BAA0B,QAAQ,uDAAsD;AACjG,SAASC,mBAAmB,QAAQ,4CAA2C;AAKhE,MAAMC,wBAAwBV,MAAMW,aAAa;IAU9D,OAAOC,yBAAyBC,KAAY,EAAwB;QAClE,IAAI,CAACA,MAAMC,KAAK,EAAE,OAAO;YAAEC,cAAc;QAAM;QAE/CN,oBAAoBO,eAAe,GAAG;QACtC,OAAO;YACLD,cAAc;QAChB;IACF;IAEAE,SAAS;YAuBAC;QAtBP,MAAM,EAAEA,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAE,GAAG,IAAI,CAACC,KAAK;QAClD,MAAM,EAAEN,YAAY,EAAE,GAAG,IAAI,CAACG,KAAK;QAEnC,MAAMI,gBAAgBJ,MAAMK,UAAU,IAAI;QAC1C,MAAMC,mBAAmBC,QAAQP,MAAMQ,MAAM,CAACC,MAAM;QACpD,MAAMC,qBAAqBV,MAAMW,eAAe;QAChD,MAAMC,YAAYZ,MAAMY,SAAS;QAEjC,qBACE;;gBACGf,6BACC,MAACgB;;sCACC,KAACC;sCACD,KAACC;;qBAGHd;8BAEF,MAAClB;;sCACC,KAACM;sCACD,KAACF;sCACD,KAACC;wBACAY,EAAAA,+BAAAA,MAAMgB,qBAAqB,qBAA3BhB,6BAA6BS,MAAM,kBAClC,KAACnB;4BACC2B,aAAajB,MAAMgB,qBAAqB;6BAExCZ,8BACF,KAACpB;4BACCkC,SAASlB,MAAMK,UAAU;4BACzBc,aAAanB,MAAMmB,WAAW;2CAGhC;;gCACGb,iCACC,KAACrB;oCACCmC,UAAU;oCACVC,qBACExB,eAAe,eAAe;oCAEhCW,QAAQR,MAAMQ,MAAM;oCACpBW,aAAanB,MAAMmB,WAAW;oCAC9BT,oBAAoBA;oCACpBE,WAAWA;qCAEX;gCAEHF,oCACC,KAACxB;oCAAgBgB,YAAYA;;;;;;;;IAO3C;;QA1Ea,qBAQbF,QAAQ;YAAEH,cAAc;QAAM;;AAmEhC;AA3EA,SAAqBL,6BA2EpB"}

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Anser from 'next/dist/compiled/anser';
+import * as React from 'react';
+import stripAnsi from 'next/dist/compiled/strip-ansi';
+import { getFrameSource } from '../../helpers/stack-frame';
+import { useOpenInEditor } from '../../helpers/use-open-in-editor';
+import { HotlinkedText } from '../hot-linked-text';
+export const CodeFrame = function CodeFrame(param) {
+    let { stackFrame, codeFrame } = param;
+    // Strip leading spaces out of the code frame:
+    const formattedFrame = React.useMemo(()=>{
+        const lines = codeFrame.split(/\r?\n/g);
+        // Find the minimum length of leading spaces after `|` in the code frame
+        const miniLeadingSpacesLength = lines.map((line)=>/^>? +\d+ +\| [ ]+/.exec(stripAnsi(line)) === null ? null : /^>? +\d+ +\| ( *)/.exec(stripAnsi(line))).filter(Boolean).map((v)=>v.pop()).reduce((c, n)=>isNaN(c) ? n.length : Math.min(c, n.length), NaN);
+        // When the minimum length of leading spaces is greater than 1, remove them
+        // from the code frame to help the indentation looks better when there's a lot leading spaces.
+        if (miniLeadingSpacesLength > 1) {
+            return lines.map((line, a)=>~(a = line.indexOf('|')) ? line.substring(0, a) + line.substring(a).replace("^\\ {" + miniLeadingSpacesLength + "}", '') : line).join('\n');
+        }
+        return lines.join('\n');
+    }, [
+        codeFrame
+    ]);
+    const decoded = React.useMemo(()=>{
+        return Anser.ansiToJson(formattedFrame, {
+            json: true,
+            use_classes: true,
+            remove_empty: true
+        });
+    }, [
+        formattedFrame
+    ]);
+    const open = useOpenInEditor({
+        file: stackFrame.file,
+        lineNumber: stackFrame.lineNumber,
+        column: stackFrame.column
+    });
+    // TODO: make the caret absolute
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-nextjs-codeframe": true,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                children: /*#__PURE__*/ _jsxs("p", {
+                    role: "link",
+                    onClick: open,
+                    tabIndex: 1,
+                    title: "Click to open in your editor",
+                    children: [
+                        /*#__PURE__*/ _jsxs("span", {
+                            children: [
+                                getFrameSource(stackFrame),
+                                " @",
+                                ' ',
+                                /*#__PURE__*/ _jsx(HotlinkedText, {
+                                    text: stackFrame.methodName
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("svg", {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            children: [
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+                                }),
+                                /*#__PURE__*/ _jsx("polyline", {
+                                    points: "15 3 21 3 21 9"
+                                }),
+                                /*#__PURE__*/ _jsx("line", {
+                                    x1: "10",
+                                    y1: "14",
+                                    x2: "21",
+                                    y2: "3"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("pre", {
+                children: decoded.map((entry, index)=>/*#__PURE__*/ _jsx("span", {
+                        style: {
+                            color: entry.fg ? "var(--color-" + entry.fg + ")" : undefined,
+                            ...entry.decoration === 'bold' ? {
+                                fontWeight: 800
+                            } : entry.decoration === 'italic' ? {
+                                fontStyle: 'italic'
+                            } : undefined
+                        },
+                        children: entry.content
+                    }, "frame-" + index))
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=CodeFrame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/CodeFrame.tsx"],"sourcesContent":["import Anser from 'next/dist/compiled/anser'\nimport * as React from 'react'\nimport type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\nimport { getFrameSource } from '../../helpers/stack-frame'\nimport { useOpenInEditor } from '../../helpers/use-open-in-editor'\nimport { HotlinkedText } from '../hot-linked-text'\n\nexport type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }\n\nexport const CodeFrame: React.FC<CodeFrameProps> = function CodeFrame({\n  stackFrame,\n  codeFrame,\n}) {\n  // Strip leading spaces out of the code frame:\n  const formattedFrame = React.useMemo<string>(() => {\n    const lines = codeFrame.split(/\\r?\\n/g)\n\n    // Find the minimum length of leading spaces after `|` in the code frame\n    const miniLeadingSpacesLength = lines\n      .map((line) =>\n        /^>? +\\d+ +\\| [ ]+/.exec(stripAnsi(line)) === null\n          ? null\n          : /^>? +\\d+ +\\| ( *)/.exec(stripAnsi(line))\n      )\n      .filter(Boolean)\n      .map((v) => v!.pop()!)\n      .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)\n\n    // When the minimum length of leading spaces is greater than 1, remove them\n    // from the code frame to help the indentation looks better when there's a lot leading spaces.\n    if (miniLeadingSpacesLength > 1) {\n      return lines\n        .map((line, a) =>\n          ~(a = line.indexOf('|'))\n            ? line.substring(0, a) +\n              line.substring(a).replace(`^\\\\ {${miniLeadingSpacesLength}}`, '')\n            : line\n        )\n        .join('\\n')\n    }\n    return lines.join('\\n')\n  }, [codeFrame])\n\n  const decoded = React.useMemo(() => {\n    return Anser.ansiToJson(formattedFrame, {\n      json: true,\n      use_classes: true,\n      remove_empty: true,\n    })\n  }, [formattedFrame])\n\n  const open = useOpenInEditor({\n    file: stackFrame.file,\n    lineNumber: stackFrame.lineNumber,\n    column: stackFrame.column,\n  })\n\n  // TODO: make the caret absolute\n  return (\n    <div data-nextjs-codeframe>\n      <div>\n        <p\n          role=\"link\"\n          onClick={open}\n          tabIndex={1}\n          title=\"Click to open in your editor\"\n        >\n          <span>\n            {getFrameSource(stackFrame)} @{' '}\n            <HotlinkedText text={stackFrame.methodName} />\n          </span>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path>\n            <polyline points=\"15 3 21 3 21 9\"></polyline>\n            <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\n          </svg>\n        </p>\n      </div>\n      <pre>\n        {decoded.map((entry, index) => (\n          <span\n            key={`frame-${index}`}\n            style={{\n              color: entry.fg ? `var(--color-${entry.fg})` : undefined,\n              ...(entry.decoration === 'bold'\n                ? { fontWeight: 800 }\n                : entry.decoration === 'italic'\n                  ? { fontStyle: 'italic' }\n                  : undefined),\n            }}\n          >\n            {entry.content}\n          </span>\n        ))}\n      </pre>\n    </div>\n  )\n}\n"],"names":["Anser","React","stripAnsi","getFrameSource","useOpenInEditor","HotlinkedText","CodeFrame","stackFrame","codeFrame","formattedFrame","useMemo","lines","split","miniLeadingSpacesLength","map","line","exec","filter","Boolean","v","pop","reduce","c","n","isNaN","length","Math","min","NaN","a","indexOf","substring","replace","join","decoded","ansiToJson","json","use_classes","remove_empty","open","file","lineNumber","column","div","data-nextjs-codeframe","p","role","onClick","tabIndex","title","span","text","methodName","svg","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","path","d","polyline","points","x1","y1","x2","y2","pre","entry","index","style","color","fg","undefined","decoration","fontWeight","fontStyle","content"],"mappings":";AAAA,OAAOA,WAAW,2BAA0B;AAC5C,YAAYC,WAAW,QAAO;AAE9B,OAAOC,eAAe,gCAA+B;AACrD,SAASC,cAAc,QAAQ,4BAA2B;AAC1D,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,aAAa,QAAQ,qBAAoB;AAIlD,OAAO,MAAMC,YAAsC,SAASA,UAAU,KAGrE;IAHqE,IAAA,EACpEC,UAAU,EACVC,SAAS,EACV,GAHqE;IAIpE,8CAA8C;IAC9C,MAAMC,iBAAiBR,MAAMS,OAAO,CAAS;QAC3C,MAAMC,QAAQH,UAAUI,KAAK,CAAC;QAE9B,wEAAwE;QACxE,MAAMC,0BAA0BF,MAC7BG,GAAG,CAAC,CAACC,OACJ,oBAAoBC,IAAI,CAACd,UAAUa,WAAW,OAC1C,OACA,oBAAoBC,IAAI,CAACd,UAAUa,QAExCE,MAAM,CAACC,SACPJ,GAAG,CAAC,CAACK,IAAMA,EAAGC,GAAG,IACjBC,MAAM,CAAC,CAACC,GAAGC,IAAOC,MAAMF,KAAKC,EAAEE,MAAM,GAAGC,KAAKC,GAAG,CAACL,GAAGC,EAAEE,MAAM,GAAIG;QAEnE,2EAA2E;QAC3E,8FAA8F;QAC9F,IAAIf,0BAA0B,GAAG;YAC/B,OAAOF,MACJG,GAAG,CAAC,CAACC,MAAMc,IACV,CAAEA,CAAAA,IAAId,KAAKe,OAAO,CAAC,IAAG,IAClBf,KAAKgB,SAAS,CAAC,GAAGF,KAClBd,KAAKgB,SAAS,CAACF,GAAGG,OAAO,CAAC,AAAC,UAAOnB,0BAAwB,KAAI,MAC9DE,MAELkB,IAAI,CAAC;QACV;QACA,OAAOtB,MAAMsB,IAAI,CAAC;IACpB,GAAG;QAACzB;KAAU;IAEd,MAAM0B,UAAUjC,MAAMS,OAAO,CAAC;QAC5B,OAAOV,MAAMmC,UAAU,CAAC1B,gBAAgB;YACtC2B,MAAM;YACNC,aAAa;YACbC,cAAc;QAChB;IACF,GAAG;QAAC7B;KAAe;IAEnB,MAAM8B,OAAOnC,gBAAgB;QAC3BoC,MAAMjC,WAAWiC,IAAI;QACrBC,YAAYlC,WAAWkC,UAAU;QACjCC,QAAQnC,WAAWmC,MAAM;IAC3B;IAEA,gCAAgC;IAChC,qBACE,MAACC;QAAIC,uBAAqB;;0BACxB,KAACD;0BACC,cAAA,MAACE;oBACCC,MAAK;oBACLC,SAASR;oBACTS,UAAU;oBACVC,OAAM;;sCAEN,MAACC;;gCACE/C,eAAeI;gCAAY;gCAAG;8CAC/B,KAACF;oCAAc8C,MAAM5C,WAAW6C,UAAU;;;;sCAE5C,MAACC;4BACCC,OAAM;4BACNC,SAAQ;4BACRC,MAAK;4BACLC,QAAO;4BACPC,aAAY;4BACZC,eAAc;4BACdC,gBAAe;;8CAEf,KAACC;oCAAKC,GAAE;;8CACR,KAACC;oCAASC,QAAO;;8CACjB,KAACjD;oCAAKkD,IAAG;oCAAKC,IAAG;oCAAKC,IAAG;oCAAKC,IAAG;;;;;;;0BAIvC,KAACC;0BACEnC,QAAQpB,GAAG,CAAC,CAACwD,OAAOC,sBACnB,KAACrB;wBAECsB,OAAO;4BACLC,OAAOH,MAAMI,EAAE,GAAG,AAAC,iBAAcJ,MAAMI,EAAE,GAAC,MAAKC;4BAC/C,GAAIL,MAAMM,UAAU,KAAK,SACrB;gCAAEC,YAAY;4BAAI,IAClBP,MAAMM,UAAU,KAAK,WACnB;gCAAEE,WAAW;4BAAS,IACtBH,SAAS;wBACjB;kCAECL,MAAMS,OAAO;uBAVT,AAAC,WAAQR;;;;AAgB1B,EAAC"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/index.js

@@ -0,0 +1,3 @@
+export { CodeFrame } from './CodeFrame';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/index.tsx"],"sourcesContent":["export { CodeFrame } from './CodeFrame'\n"],"names":["CodeFrame"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAa"}

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

@@ -0,0 +1,15 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+function _templateObject() {
+    const data = _tagged_template_literal_loose([
+        "\n  [data-nextjs-codeframe] {\n    overflow: auto;\n    border-radius: var(--size-gap-half);\n    background-color: var(--color-ansi-bg);\n    color: var(--color-ansi-fg);\n    margin-bottom: var(--size-gap-double);\n  }\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n  [data-nextjs-codeframe] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n    padding: calc(var(--size-gap) + var(--size-gap-half))\n      calc(var(--size-gap-double) + var(--size-gap-half));\n  }\n  [data-nextjs-codeframe] > div {\n    display: inline-block;\n    width: auto;\n    min-width: 100%;\n    border-bottom: 1px solid var(--color-ansi-bright-black);\n  }\n  [data-nextjs-codeframe] > div > p {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    margin: 0;\n  }\n  [data-nextjs-codeframe] > div > p:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-codeframe] div > p > svg {\n    width: auto;\n    height: 1em;\n    margin-left: 8px;\n  }\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+import { noop as css } from '../../helpers/noop-template';
+const styles = css(_templateObject());
+export { styles };
+
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/CodeFrame/styles.tsx"],"sourcesContent":["import { noop as css } from '../../helpers/noop-template'\n\nconst styles = css`\n  [data-nextjs-codeframe] {\n    overflow: auto;\n    border-radius: var(--size-gap-half);\n    background-color: var(--color-ansi-bg);\n    color: var(--color-ansi-fg);\n    margin-bottom: var(--size-gap-double);\n  }\n  [data-nextjs-codeframe]::selection,\n  [data-nextjs-codeframe] *::selection {\n    background-color: var(--color-ansi-selection);\n  }\n  [data-nextjs-codeframe] * {\n    color: inherit;\n    background-color: transparent;\n    font-family: var(--font-stack-monospace);\n  }\n\n  [data-nextjs-codeframe] > * {\n    margin: 0;\n    padding: calc(var(--size-gap) + var(--size-gap-half))\n      calc(var(--size-gap-double) + var(--size-gap-half));\n  }\n  [data-nextjs-codeframe] > div {\n    display: inline-block;\n    width: auto;\n    min-width: 100%;\n    border-bottom: 1px solid var(--color-ansi-bright-black);\n  }\n  [data-nextjs-codeframe] > div > p {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    margin: 0;\n  }\n  [data-nextjs-codeframe] > div > p:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-codeframe] div > p > svg {\n    width: auto;\n    height: 1em;\n    margin-left: 8px;\n  }\n  [data-nextjs-codeframe] div > pre {\n    overflow: hidden;\n    display: inline-block;\n  }\n`\n\nexport { styles }\n"],"names":["noop","css","styles"],"mappings":";;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,8BAA6B;AAEzD,MAAMC,SAASD;AAkDf,SAASC,MAAM,GAAE"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useOnClickOutside } from '../../hooks/use-on-click-outside';
+const Dialog = function Dialog(param) {
+    let { children, type, onClose, ...props } = param;
+    const [dialog, setDialog] = React.useState(null);
+    const [role, setRole] = React.useState(typeof document !== 'undefined' && document.hasFocus() ? 'dialog' : undefined);
+    const onDialog = React.useCallback((node)=>{
+        setDialog(node);
+    }, []);
+    useOnClickOutside(dialog, (e)=>{
+        e.preventDefault();
+        return onClose == null ? void 0 : onClose();
+    });
+    // Make HTMLElements with `role=link` accessible to be triggered by the
+    // keyboard, i.e. [Enter].
+    React.useEffect(()=>{
+        if (dialog == null) {
+            return;
+        }
+        const root = dialog.getRootNode();
+        // Always true, but we do this for TypeScript:
+        if (!(root instanceof ShadowRoot)) {
+            return;
+        }
+        const shadowRoot = root;
+        function handler(e) {
+            const el = shadowRoot.activeElement;
+            if (e.key === 'Enter' && el instanceof HTMLElement && el.getAttribute('role') === 'link') {
+                e.preventDefault();
+                e.stopPropagation();
+                el.click();
+            }
+        }
+        function handleFocus() {
+            // safari will force itself as the active application when a background page triggers any sort of autofocus
+            // this is a workaround to only set the dialog role if the document has focus
+            setRole(document.hasFocus() ? 'dialog' : undefined);
+        }
+        shadowRoot.addEventListener('keydown', handler);
+        window.addEventListener('focus', handleFocus);
+        window.addEventListener('blur', handleFocus);
+        return ()=>{
+            shadowRoot.removeEventListener('keydown', handler);
+            window.removeEventListener('focus', handleFocus);
+            window.removeEventListener('blur', handleFocus);
+        };
+    }, [
+        dialog
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: onDialog,
+        "data-nextjs-dialog": true,
+        tabIndex: -1,
+        role: role,
+        "aria-labelledby": props['aria-labelledby'],
+        "aria-describedby": props['aria-describedby'],
+        "aria-modal": "true",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                "data-nextjs-dialog-banner": true,
+                className: "banner-" + type
+            }),
+            children
+        ]
+    });
+};
+export { Dialog };
+
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useOnClickOutside } from '../../hooks/use-on-click-outside'\n\nexport type DialogProps = {\n  children?: React.ReactNode\n  type: 'error' | 'warning'\n  'aria-labelledby': string\n  'aria-describedby': string\n  onClose?: () => void\n}\n\nconst Dialog: React.FC<DialogProps> = function Dialog({\n  children,\n  type,\n  onClose,\n  ...props\n}) {\n  const [dialog, setDialog] = React.useState<HTMLDivElement | null>(null)\n  const [role, setRole] = React.useState<string | undefined>(\n    typeof document !== 'undefined' && document.hasFocus()\n      ? 'dialog'\n      : undefined\n  )\n  const onDialog = React.useCallback((node: HTMLDivElement | null) => {\n    setDialog(node)\n  }, [])\n  useOnClickOutside(dialog, (e) => {\n    e.preventDefault()\n    return onClose?.()\n  })\n\n  // Make HTMLElements with `role=link` accessible to be triggered by the\n  // keyboard, i.e. [Enter].\n  React.useEffect(() => {\n    if (dialog == null) {\n      return\n    }\n\n    const root = dialog.getRootNode()\n    // Always true, but we do this for TypeScript:\n    if (!(root instanceof ShadowRoot)) {\n      return\n    }\n    const shadowRoot = root\n    function handler(e: KeyboardEvent) {\n      const el = shadowRoot.activeElement\n      if (\n        e.key === 'Enter' &&\n        el instanceof HTMLElement &&\n        el.getAttribute('role') === 'link'\n      ) {\n        e.preventDefault()\n        e.stopPropagation()\n\n        el.click()\n      }\n    }\n\n    function handleFocus() {\n      // safari will force itself as the active application when a background page triggers any sort of autofocus\n      // this is a workaround to only set the dialog role if the document has focus\n      setRole(document.hasFocus() ? 'dialog' : undefined)\n    }\n\n    shadowRoot.addEventListener('keydown', handler as EventListener)\n    window.addEventListener('focus', handleFocus)\n    window.addEventListener('blur', handleFocus)\n    return () => {\n      shadowRoot.removeEventListener('keydown', handler as EventListener)\n      window.removeEventListener('focus', handleFocus)\n      window.removeEventListener('blur', handleFocus)\n    }\n  }, [dialog])\n\n  return (\n    <div\n      ref={onDialog}\n      data-nextjs-dialog\n      tabIndex={-1}\n      role={role}\n      aria-labelledby={props['aria-labelledby']}\n      aria-describedby={props['aria-describedby']}\n      aria-modal=\"true\"\n    >\n      <div data-nextjs-dialog-banner className={`banner-${type}`} />\n      {children}\n    </div>\n  )\n}\n\nexport { Dialog }\n"],"names":["React","useOnClickOutside","Dialog","children","type","onClose","props","dialog","setDialog","useState","role","setRole","document","hasFocus","undefined","onDialog","useCallback","node","e","preventDefault","useEffect","root","getRootNode","ShadowRoot","shadowRoot","handler","el","activeElement","key","HTMLElement","getAttribute","stopPropagation","click","handleFocus","addEventListener","window","removeEventListener","div","ref","data-nextjs-dialog","tabIndex","aria-labelledby","aria-describedby","aria-modal","data-nextjs-dialog-banner","className"],"mappings":";AAAA,YAAYA,WAAW,QAAO;AAC9B,SAASC,iBAAiB,QAAQ,mCAAkC;AAUpE,MAAMC,SAAgC,SAASA,OAAO,KAKrD;IALqD,IAAA,EACpDC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACP,GAAGC,OACJ,GALqD;IAMpD,MAAM,CAACC,QAAQC,UAAU,GAAGR,MAAMS,QAAQ,CAAwB;IAClE,MAAM,CAACC,MAAMC,QAAQ,GAAGX,MAAMS,QAAQ,CACpC,OAAOG,aAAa,eAAeA,SAASC,QAAQ,KAChD,WACAC;IAEN,MAAMC,WAAWf,MAAMgB,WAAW,CAAC,CAACC;QAClCT,UAAUS;IACZ,GAAG,EAAE;IACLhB,kBAAkBM,QAAQ,CAACW;QACzBA,EAAEC,cAAc;QAChB,OAAOd,2BAAAA;IACT;IAEA,uEAAuE;IACvE,0BAA0B;IAC1BL,MAAMoB,SAAS,CAAC;QACd,IAAIb,UAAU,MAAM;YAClB;QACF;QAEA,MAAMc,OAAOd,OAAOe,WAAW;QAC/B,8CAA8C;QAC9C,IAAI,CAAED,CAAAA,gBAAgBE,UAAS,GAAI;YACjC;QACF;QACA,MAAMC,aAAaH;QACnB,SAASI,QAAQP,CAAgB;YAC/B,MAAMQ,KAAKF,WAAWG,aAAa;YACnC,IACET,EAAEU,GAAG,KAAK,WACVF,cAAcG,eACdH,GAAGI,YAAY,CAAC,YAAY,QAC5B;gBACAZ,EAAEC,cAAc;gBAChBD,EAAEa,eAAe;gBAEjBL,GAAGM,KAAK;YACV;QACF;QAEA,SAASC;YACP,2GAA2G;YAC3G,6EAA6E;YAC7EtB,QAAQC,SAASC,QAAQ,KAAK,WAAWC;QAC3C;QAEAU,WAAWU,gBAAgB,CAAC,WAAWT;QACvCU,OAAOD,gBAAgB,CAAC,SAASD;QACjCE,OAAOD,gBAAgB,CAAC,QAAQD;QAChC,OAAO;YACLT,WAAWY,mBAAmB,CAAC,WAAWX;YAC1CU,OAAOC,mBAAmB,CAAC,SAASH;YACpCE,OAAOC,mBAAmB,CAAC,QAAQH;QACrC;IACF,GAAG;QAAC1B;KAAO;IAEX,qBACE,MAAC8B;QACCC,KAAKvB;QACLwB,oBAAkB;QAClBC,UAAU,CAAC;QACX9B,MAAMA;QACN+B,mBAAiBnC,KAAK,CAAC,kBAAkB;QACzCoC,oBAAkBpC,KAAK,CAAC,mBAAmB;QAC3CqC,cAAW;;0BAEX,KAACN;gBAAIO,2BAAyB;gBAACC,WAAW,AAAC,YAASzC;;YACnDD;;;AAGP;AAEA,SAASD,MAAM,GAAE"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogBody.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const DialogBody = function DialogBody(param) {
+    let { children, className } = param;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-nextjs-dialog-body": true,
+        className: className,
+        children: children
+    });
+};
+export { DialogBody };
+
+//# sourceMappingURL=DialogBody.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type DialogBodyProps = {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst DialogBody: React.FC<DialogBodyProps> = function DialogBody({\n  children,\n  className,\n}) {\n  return (\n    <div data-nextjs-dialog-body className={className}>\n      {children}\n    </div>\n  )\n}\n\nexport { DialogBody }\n"],"names":["React","DialogBody","children","className","div","data-nextjs-dialog-body"],"mappings":";AAAA,YAAYA,WAAW,QAAO;AAO9B,MAAMC,aAAwC,SAASA,WAAW,KAGjE;IAHiE,IAAA,EAChEC,QAAQ,EACRC,SAAS,EACV,GAHiE;IAIhE,qBACE,KAACC;QAAIC,yBAAuB;QAACF,WAAWA;kBACrCD;;AAGP;AAEA,SAASD,UAAU,GAAE"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogContent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const DialogContent = function DialogContent(param) {
+    let { children, className } = param;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-nextjs-dialog-content": true,
+        className: className,
+        children: children
+    });
+};
+export { DialogContent };
+
+//# sourceMappingURL=DialogContent.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type DialogContentProps = {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst DialogContent: React.FC<DialogContentProps> = function DialogContent({\n  children,\n  className,\n}) {\n  return (\n    <div data-nextjs-dialog-content className={className}>\n      {children}\n    </div>\n  )\n}\n\nexport { DialogContent }\n"],"names":["React","DialogContent","children","className","div","data-nextjs-dialog-content"],"mappings":";AAAA,YAAYA,WAAW,QAAO;AAO9B,MAAMC,gBAA8C,SAASA,cAAc,KAG1E;IAH0E,IAAA,EACzEC,QAAQ,EACRC,SAAS,EACV,GAH0E;IAIzE,qBACE,KAACC;QAAIC,4BAA0B;QAACF,WAAWA;kBACxCD;;AAGP;AAEA,SAASD,aAAa,GAAE"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogHeader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+const DialogHeader = function DialogHeader(param) {
+    let { children, className } = param;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-nextjs-dialog-header": true,
+        className: className,
+        children: children
+    });
+};
+export { DialogHeader };
+
+//# sourceMappingURL=DialogHeader.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/DialogHeader.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport type DialogHeaderProps = {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst DialogHeader: React.FC<DialogHeaderProps> = function DialogHeader({\n  children,\n  className,\n}) {\n  return (\n    <div data-nextjs-dialog-header className={className}>\n      {children}\n    </div>\n  )\n}\n\nexport { DialogHeader }\n"],"names":["React","DialogHeader","children","className","div","data-nextjs-dialog-header"],"mappings":";AAAA,YAAYA,WAAW,QAAO;AAO9B,MAAMC,eAA4C,SAASA,aAAa,KAGvE;IAHuE,IAAA,EACtEC,QAAQ,EACRC,SAAS,EACV,GAHuE;IAItE,qBACE,KAACC;QAAIC,2BAAyB;QAACF,WAAWA;kBACvCD;;AAGP;AAEA,SAASD,YAAY,GAAE"}

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/Dialog/index.js

@@ -0,0 +1,7 @@
+export { Dialog } from './Dialog';
+export { DialogBody } from './DialogBody';
+export { DialogContent } from './DialogContent';
+export { DialogHeader } from './DialogHeader';
+export { styles } from './styles';
+
+//# sourceMappingURL=index.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/index.ts"],"sourcesContent":["export { Dialog } from './Dialog'\nexport { DialogBody } from './DialogBody'\nexport { DialogContent } from './DialogContent'\nexport { DialogHeader } from './DialogHeader'\nexport { styles } from './styles'\n"],"names":["Dialog","DialogBody","DialogContent","DialogHeader","styles"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAU;AACjC,SAASC,UAAU,QAAQ,eAAc;AACzC,SAASC,aAAa,QAAQ,kBAAiB;AAC/C,SAASC,YAAY,QAAQ,iBAAgB;AAC7C,SAASC,MAAM,QAAQ,WAAU"}

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

@@ -0,0 +1,15 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+function _templateObject() {
+    const data = _tagged_template_literal_loose([
+        "\n  [data-nextjs-dialog] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    margin-right: auto;\n    margin-left: auto;\n    outline: none;\n    background: var(--color-background);\n    border-radius: var(--size-gap);\n    box-shadow: 0 var(--size-gap-half) var(--size-gap-double)\n      rgba(0, 0, 0, 0.25);\n    max-height: calc(100% - 56px);\n    overflow-y: hidden;\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog] {\n      max-width: 540px;\n      box-shadow: 0 var(--size-gap) var(--size-gap-quad) rgba(0, 0, 0, 0.25);\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog] {\n      max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog] {\n      max-width: 960px;\n    }\n  }\n\n  [data-nextjs-dialog-banner] {\n    position: relative;\n  }\n  [data-nextjs-dialog-banner].banner-warning {\n    border-color: var(--color-ansi-yellow);\n  }\n  [data-nextjs-dialog-banner].banner-error {\n    border-color: var(--color-ansi-red);\n  }\n\n  [data-nextjs-dialog-banner]::after {\n    z-index: 2;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    /* banner width: */\n    border-top-width: var(--size-gap-half);\n    border-bottom-width: 0;\n    border-top-style: solid;\n    border-bottom-style: solid;\n    border-top-color: inherit;\n    border-bottom-color: transparent;\n  }\n\n  [data-nextjs-dialog-content] {\n    overflow-y: auto;\n    border: none;\n    margin: 0;\n    /* calc(padding + banner width offset) */\n    padding: calc(var(--size-gap-double) + var(--size-gap-half))\n      var(--size-gap-double);\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    margin-bottom: var(--size-gap-double);\n  }\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+import { noop as css } from '../../helpers/noop-template';
+const styles = css(_templateObject());
+export { styles };
+
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts"],"sourcesContent":["import { noop as css } from '../../helpers/noop-template'\n\nconst styles = css`\n  [data-nextjs-dialog] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    margin-right: auto;\n    margin-left: auto;\n    outline: none;\n    background: var(--color-background);\n    border-radius: var(--size-gap);\n    box-shadow: 0 var(--size-gap-half) var(--size-gap-double)\n      rgba(0, 0, 0, 0.25);\n    max-height: calc(100% - 56px);\n    overflow-y: hidden;\n  }\n\n  @media (max-height: 812px) {\n    [data-nextjs-dialog-overlay] {\n      max-height: calc(100% - 15px);\n    }\n  }\n\n  @media (min-width: 576px) {\n    [data-nextjs-dialog] {\n      max-width: 540px;\n      box-shadow: 0 var(--size-gap) var(--size-gap-quad) rgba(0, 0, 0, 0.25);\n    }\n  }\n\n  @media (min-width: 768px) {\n    [data-nextjs-dialog] {\n      max-width: 720px;\n    }\n  }\n\n  @media (min-width: 992px) {\n    [data-nextjs-dialog] {\n      max-width: 960px;\n    }\n  }\n\n  [data-nextjs-dialog-banner] {\n    position: relative;\n  }\n  [data-nextjs-dialog-banner].banner-warning {\n    border-color: var(--color-ansi-yellow);\n  }\n  [data-nextjs-dialog-banner].banner-error {\n    border-color: var(--color-ansi-red);\n  }\n\n  [data-nextjs-dialog-banner]::after {\n    z-index: 2;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 100%;\n    /* banner width: */\n    border-top-width: var(--size-gap-half);\n    border-bottom-width: 0;\n    border-top-style: solid;\n    border-bottom-style: solid;\n    border-top-color: inherit;\n    border-bottom-color: transparent;\n  }\n\n  [data-nextjs-dialog-content] {\n    overflow-y: auto;\n    border: none;\n    margin: 0;\n    /* calc(padding + banner width offset) */\n    padding: calc(var(--size-gap-double) + var(--size-gap-half))\n      var(--size-gap-double);\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {\n    flex-shrink: 0;\n    margin-bottom: var(--size-gap-double);\n  }\n  [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {\n    position: relative;\n    flex: 1 1 auto;\n  }\n`\n\nexport { styles }\n"],"names":["noop","css","styles"],"mappings":";;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,8BAA6B;AAEzD,MAAMC,SAASD;AAwFf,SAASC,MAAM,GAAE"}

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

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { CloseIcon } from '../../icons/CloseIcon';
+const LeftRightDialogHeader = function LeftRightDialogHeader(param) {
+    let { children, className, previous, next, close } = param;
+    const buttonLeft = React.useRef(null);
+    const buttonRight = React.useRef(null);
+    const buttonClose = React.useRef(null);
+    const [nav, setNav] = React.useState(null);
+    const onNav = React.useCallback((el)=>{
+        setNav(el);
+    }, []);
+    React.useEffect(()=>{
+        if (nav == null) {
+            return;
+        }
+        const root = nav.getRootNode();
+        const d = self.document;
+        function handler(e) {
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                e.stopPropagation();
+                if (buttonLeft.current) {
+                    buttonLeft.current.focus();
+                }
+                previous && previous();
+            } else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                e.stopPropagation();
+                if (buttonRight.current) {
+                    buttonRight.current.focus();
+                }
+                next && next();
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                if (root instanceof ShadowRoot) {
+                    const a = root.activeElement;
+                    if (a && a !== buttonClose.current && a instanceof HTMLElement) {
+                        a.blur();
+                        return;
+                    }
+                }
+                close == null ? void 0 : close();
+            }
+        }
+        root.addEventListener('keydown', handler);
+        if (root !== d) {
+            d.addEventListener('keydown', handler);
+        }
+        return function() {
+            root.removeEventListener('keydown', handler);
+            if (root !== d) {
+                d.removeEventListener('keydown', handler);
+            }
+        };
+    }, [
+        close,
+        nav,
+        next,
+        previous
+    ]);
+    // Unlock focus for browsers like Firefox, that break all user focus if the
+    // currently focused item becomes disabled.
+    React.useEffect(()=>{
+        if (nav == null) {
+            return;
+        }
+        const root = nav.getRootNode();
+        // Always true, but we do this for TypeScript:
+        if (root instanceof ShadowRoot) {
+            const a = root.activeElement;
+            if (previous == null) {
+                if (buttonLeft.current && a === buttonLeft.current) {
+                    buttonLeft.current.blur();
+                }
+            } else if (next == null) {
+                if (buttonRight.current && a === buttonRight.current) {
+                    buttonRight.current.blur();
+                }
+            }
+        }
+    }, [
+        nav,
+        next,
+        previous
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-nextjs-dialog-left-right": true,
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsxs("nav", {
+                ref: onNav,
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        ref: buttonLeft,
+                        type: "button",
+                        disabled: previous == null ? true : undefined,
+                        "aria-disabled": previous == null ? true : undefined,
+                        onClick: previous != null ? previous : undefined,
+                        children: /*#__PURE__*/ _jsxs("svg", {
+                            viewBox: "0 0 14 14",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ _jsx("title", {
+                                    children: "previous"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: "M6.99996 1.16666L1.16663 6.99999L6.99996 12.8333M12.8333 6.99999H1.99996H12.8333Z",
+                                    stroke: "currentColor",
+                                    strokeWidth: "2",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        ref: buttonRight,
+                        type: "button",
+                        disabled: next == null ? true : undefined,
+                        "aria-disabled": next == null ? true : undefined,
+                        onClick: next != null ? next : undefined,
+                        children: /*#__PURE__*/ _jsxs("svg", {
+                            viewBox: "0 0 14 14",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ _jsx("title", {
+                                    children: "next"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: "M6.99996 1.16666L12.8333 6.99999L6.99996 12.8333M1.16663 6.99999H12H1.16663Z",
+                                    stroke: "currentColor",
+                                    strokeWidth: "2",
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round"
+                                })
+                            ]
+                        })
+                    }),
+                    children
+                ]
+            }),
+            close ? /*#__PURE__*/ _jsx("button", {
+                "data-nextjs-errors-dialog-left-right-close-button": true,
+                ref: buttonClose,
+                type: "button",
+                onClick: close,
+                "aria-label": "Close",
+                children: /*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                })
+            }) : null
+        ]
+    });
+};
+export { LeftRightDialogHeader };
+
+//# sourceMappingURL=LeftRightDialogHeader.js.map