next 15.2.0-canary.65 → 15.2.0-canary.66

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.js

@@ -0,0 +1,212 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES: null,
+    TurbopackInfo: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES: function() {
+        return DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES;
+    },
+    TurbopackInfo: function() {
+        return TurbopackInfo;
+    }
+});
+const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
+const _jsxruntime = require("react/jsx-runtime");
+const _devtoolsinfo = require("./dev-tools-info");
+const _copybutton = require("../../../copy-button");
+const _nooptemplate = require("../../../../helpers/noop-template");
+function _templateObject() {
+    const data = _tagged_template_literal_loose._([
+        "\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: var(--size-0_5) var(--size-1);\n    margin: 0;\n    font-size: 13px;\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: 12px;\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: var(--size-2);\n    top: var(--size-2);\n    padding: var(--size-1);\n    height: var(--size-6);\n    width: var(--size-6);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 1rem;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function TurbopackInfo(param) {
+    let { isOpen, setIsOpen, setPreviousOpen, ...props } = param;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_devtoolsinfo.DevToolsInfo, {
+        title: "Turbopack",
+        learnMoreLink: "https://nextjs.org/docs/app/api-reference/turbopack",
+        setIsOpen: setIsOpen,
+        setPreviousOpen: setPreviousOpen,
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("article", {
+                className: "dev-tools-info-article",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
+                        className: "dev-tools-info-paragraph",
+                        children: [
+                            "Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js. Turbopack can be used in Next.js in both the",
+                            ' ',
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                                className: "dev-tools-info-code",
+                                children: "pages"
+                            }),
+                            " and",
+                            ' ',
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                                className: "dev-tools-info-code",
+                                children: "app"
+                            }),
+                            " directories for faster local development."
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
+                        className: "dev-tools-info-paragraph",
+                        children: [
+                            "To enable Turbopack, use the",
+                            ' ',
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                                className: "dev-tools-info-code",
+                                children: "--turbopack"
+                            }),
+                            " flag when running the Next.js development server."
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "dev-tools-info-code-block-container",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "dev-tools-info-code-block",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_copybutton.CopyButton, {
+                            actionLabel: "Copy Next.js Turbopack Command",
+                            successLabel: "Next.js Turbopack Command Copied",
+                            content: '--turbopack',
+                            className: "dev-tools-info-copy-button"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                            className: "dev-tools-info-code-block-pre",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '  '
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '{'
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: [
+                                            '  ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"scripts"'
+                                            }),
+                                            ": ",
+                                            '{'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        className: "dev-tools-info-code-block-line dev-tools-info-highlight",
+                                        children: [
+                                            '    ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"dev"'
+                                            }),
+                                            ":",
+                                            ' ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-value",
+                                                children: '"next dev --turbopack"'
+                                            }),
+                                            ","
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: [
+                                            '    ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"build"'
+                                            }),
+                                            ":",
+                                            ' ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-value",
+                                                children: '"next build"'
+                                            }),
+                                            ","
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: [
+                                            '    ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"start"'
+                                            }),
+                                            ":",
+                                            ' ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-value",
+                                                children: '"next start"'
+                                            }),
+                                            ","
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: [
+                                            '    ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"lint"'
+                                            }),
+                                            ":",
+                                            ' ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                className: "dev-tools-info-code-block-json-value",
+                                                children: '"next lint"'
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '  }'
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '}'
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '  '
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = (0, _nooptemplate.noop)(_templateObject());
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=turbopack-info.js.map

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { CopyButton } from '../../../copy-button'\nimport { noop as css } from '../../../../helpers/noop-template'\n\nexport function TurbopackInfo({\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n  style?: React.CSSProperties\n  ref?: React.RefObject<HTMLElement | null>\n}) {\n  return (\n    <DevToolsInfo\n      title=\"Turbopack\"\n      learnMoreLink=\"https://nextjs.org/docs/app/api-reference/turbopack\"\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n      {...props}\n    >\n      <article className=\"dev-tools-info-article\">\n        <p className=\"dev-tools-info-paragraph\">\n          Turbopack is an incremental bundler optimized for JavaScript and\n          TypeScript, written in Rust, and built into Next.js. Turbopack can be\n          used in Next.js in both the{' '}\n          <code className=\"dev-tools-info-code\">pages</code> and{' '}\n          <code className=\"dev-tools-info-code\">app</code> directories for\n          faster local development.\n        </p>\n        <p className=\"dev-tools-info-paragraph\">\n          To enable Turbopack, use the{' '}\n          <code className=\"dev-tools-info-code\">--turbopack</code> flag when\n          running the Next.js development server.\n        </p>\n      </article>\n\n      <div className=\"dev-tools-info-code-block-container\">\n        <div className=\"dev-tools-info-code-block\">\n          <CopyButton\n            actionLabel=\"Copy Next.js Turbopack Command\"\n            successLabel=\"Next.js Turbopack Command Copied\"\n            content={'--turbopack'}\n            className=\"dev-tools-info-copy-button\"\n          />\n          <pre className=\"dev-tools-info-code-block-pre\">\n            <code>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'{'}</div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'  '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"scripts\"\n                </span>\n                : {'{'}\n              </div>\n              <div className=\"dev-tools-info-code-block-line dev-tools-info-highlight\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"dev\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next dev --turbopack\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"build\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next build\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"start\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next start\"\n                </span>\n                ,\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">\n                {'    '}\n                <span className=\"dev-tools-info-code-block-json-key\">\n                  \"lint\"\n                </span>\n                :{' '}\n                <span className=\"dev-tools-info-code-block-json-value\">\n                  \"next lint\"\n                </span>\n              </div>\n              <div className=\"dev-tools-info-code-block-line\">{'  }'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'}'}</div>\n              <div className=\"dev-tools-info-code-block-line\">{'  '}</div>\n            </code>\n          </pre>\n        </div>\n      </div>\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = css`\n  .dev-tools-info-code {\n    background: var(--color-gray-400);\n    color: var(--color-gray-1000);\n    font-family: var(--font-stack-mono);\n    padding: var(--size-0_5) var(--size-1);\n    margin: 0;\n    font-size: 13px;\n    white-space: break-spaces;\n    border-radius: var(--rounded-md-2);\n  }\n\n  .dev-tools-info-code-block-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-code-block {\n    position: relative;\n    background: var(--color-background-200);\n    border: 1px solid var(--color-gray-alpha-400);\n    border-radius: var(--rounded-md-2);\n    min-width: 326px;\n  }\n\n  .dev-tools-info-code-block-pre {\n    margin: 0;\n    font-family: var(--font-stack-mono);\n    font-size: 12px;\n  }\n\n  .dev-tools-info-copy-button {\n    position: absolute;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    right: var(--size-2);\n    top: var(--size-2);\n    padding: var(--size-1);\n    height: var(--size-6);\n    width: var(--size-6);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-100);\n  }\n\n  .dev-tools-info-code-block-line {\n    display: block;\n    line-height: 1.5;\n    padding: 0 1rem;\n  }\n\n  .dev-tools-info-code-block-line.dev-tools-info-highlight {\n    border-left: 2px solid var(--color-blue-900);\n    background: var(--color-blue-400);\n  }\n\n  .dev-tools-info-code-block-json-key {\n    color: var(--color-syntax-keyword);\n  }\n\n  .dev-tools-info-code-block-json-value {\n    color: var(--color-syntax-link);\n  }\n`\n"],"names":["DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","DevToolsInfo","title","learnMoreLink","article","className","p","code","div","CopyButton","actionLabel","successLabel","content","pre","span","css"],"mappings":";;;;;;;;;;;;;;;IAiHaA,oCAAoC;eAApCA;;IA7GGC,aAAa;eAAbA;;;;;8BAJa;4BACF;8BACC;;;;;;;;;;AAErB,SAASA,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,sBAACC,0BAAY;QACXC,OAAM;QACNC,eAAc;QACdL,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,sBAACI;gBAAQC,WAAU;;kCACjB,sBAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,sBAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,qBAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,qBAACG;gBAAIH,WAAU;0BACb,cAAA,sBAACG;oBAAIH,WAAU;;sCACb,qBAACI,sBAAU;4BACTC,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTP,WAAU;;sCAEZ,qBAACQ;4BAAIR,WAAU;sCACb,cAAA,sBAACE;;kDACC,qBAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;4CAEhD;;;kDAGT,sBAACG;wCAAIH,WAAU;;4CACZ;0DACD,qBAACS;gDAAKT,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,qBAACS;gDAAKT,WAAU;0DAAuC;;;;kDAIzD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,qBAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEO,MAAMV,2CAAuCoB,kBAAG"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.d.ts

@@ -2,6 +2,7 @@ interface Props extends React.ComponentProps<'button'> {
     issueCount: number;
     isDevBuilding: boolean;
     isDevRendering: boolean;
+    isBuildError: boolean;
     onTriggerClick: () => void;
     openErrorOverlay: () => void;
 }

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.js

@@ -29,7 +29,8 @@ const _mergerefs = /*#__PURE__*/ _interop_require_default._(require("../../../..
 const _useminimumloadingtimemultiple = require("./use-minimum-loading-time-multiple");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration-long: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);\n            --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);\n            --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale var(--duration-short) var(--timing),\n              width var(--duration-long) var(--timing),\n              box-shadow var(--duration-long) var(--timing),\n              background var(--duration-short) ease;\n\n            &:active[data-error='false'] {\n              scale: 0.95;\n            }\n\n            &[data-animate='true']:not(:hover) {\n              scale: 1.02;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha-error);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-error-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: var(--duration-short);\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: calc(var(--padding) * 2);\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha-error);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 2px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:hover {\n              background: var(--color-hover-alpha-error);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration-long) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            &:hover {\n              background: var(--color-hover-alpha-subtle);\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          [data-issues-count-animation] {\n            display: grid;\n            place-items: center center;\n            font-variant-numeric: tabular-nums;\n\n            &[data-animate='false'] {\n              [data-issues-count-exit],\n              [data-issues-count-enter] {\n                animation-duration: 0ms;\n              }\n            }\n\n            > * {\n              grid-area: 1 / 1;\n            }\n\n            [data-issues-count-exit] {\n              animation: fadeOut 300ms var(--timing) forwards;\n            }\n\n            [data-issues-count-enter] {\n              animation: fadeIn 300ms var(--timing) forwards;\n            }\n          }\n\n          [data-issues-count-plural] {\n            display: inline-block;\n            animation: fadeIn 300ms var(--timing) forwards;\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes fadeIn {\n            0% {\n              opacity: 0;\n              filter: blur(2px);\n              transform: translateY(8px);\n            }\n            100% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n          }\n\n          @keyframes fadeOut {\n            0% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n            100% {\n              opacity: 0;\n              transform: translateY(-12px);\n              filter: blur(2px);\n            }\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n\n          @media (prefers-reduced-motion) {\n            [data-issues-count-exit],\n            [data-issues-count-enter],\n            [data-issues-count-plural] {\n              animation-duration: 0ms !important;\n            }\n          }\n        "
+        "\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration-long: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);\n            --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);\n            --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-disabled-icon] {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding-right: 4px;\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale var(--duration-short) var(--timing),\n              width var(--duration-long) var(--timing),\n              box-shadow var(--duration-long) var(--timing),\n              background var(--duration-short) ease;\n\n            &:active[data-error='false'] {\n              scale: 0.95;\n            }\n\n            &[data-animate='true']:not(:hover) {\n              scale: 1.02;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha-error);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-error-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: var(--duration-short);\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: ",
+        ";\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha-error);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 2px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:hover {\n              background: var(--color-hover-alpha-error);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration-long) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            &:hover {\n              background: var(--color-hover-alpha-subtle);\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          [data-issues-count-animation] {\n            display: grid;\n            place-items: center center;\n            font-variant-numeric: tabular-nums;\n\n            &[data-animate='false'] {\n              [data-issues-count-exit],\n              [data-issues-count-enter] {\n                animation-duration: 0ms;\n              }\n            }\n\n            > * {\n              grid-area: 1 / 1;\n            }\n\n            [data-issues-count-exit] {\n              animation: fadeOut 300ms var(--timing) forwards;\n            }\n\n            [data-issues-count-enter] {\n              animation: fadeIn 300ms var(--timing) forwards;\n            }\n          }\n\n          [data-issues-count-plural] {\n            display: inline-block;\n            animation: fadeIn 300ms var(--timing) forwards;\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes fadeIn {\n            0% {\n              opacity: 0;\n              filter: blur(2px);\n              transform: translateY(8px);\n            }\n            100% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n          }\n\n          @keyframes fadeOut {\n            0% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n            100% {\n              opacity: 0;\n              transform: translateY(-12px);\n              filter: blur(2px);\n            }\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n\n          @media (prefers-reduced-motion) {\n            [data-issues-count-exit],\n            [data-issues-count-enter],\n            [data-issues-count-plural] {\n              animation-duration: 0ms !important;\n            }\n          }\n        "
     ]);
     _templateObject = function() {
         return data;
@@ -74,7 +75,7 @@ const SHORT_DURATION_MS = 150;
     return animatedDep;
 };
 const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, propRef) {
-    let { issueCount, isDevBuilding, isDevRendering, onTriggerClick, openErrorOverlay, ...props } = param;
+    let { disabled, issueCount, isDevBuilding, isDevRendering, isBuildError, onTriggerClick, openErrorOverlay, ...props } = param;
     const hasError = issueCount > 0;
     const [isErrorExpanded, setIsErrorExpanded] = (0, _react.useState)(hasError);
     const newErrorDetected = useAnimated(issueCount, {
@@ -94,11 +95,13 @@ const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, p
         "data-next-badge-root": true,
         style: {
             '--size': "" + SIZE + "px",
-            '--duration-short': "" + SHORT_DURATION_MS + "ms"
+            '--duration-short': "" + SHORT_DURATION_MS + "ms",
+            // if the indicator is disabled and there are no errors, hide the badge
+            display: disabled && !hasError ? 'none' : 'block'
         },
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-                children: (0, _nooptemplate.noop)(_templateObject())
+                children: (0, _nooptemplate.noop)(_templateObject(), disabled || isBuildError ? '8px' : 'calc(var(--padding) * 2)')
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 "data-next-badge": true,
@@ -111,7 +114,7 @@ const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, p
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                     ref: ref,
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                        !disabled && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                             ref: (0, _mergerefs.default)(triggerRef, propRef),
                             "data-next-mark": true,
                             "data-next-mark-loading": isLoading,
@@ -129,6 +132,10 @@ const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, p
                                     "aria-label": "Open issues overlay",
                                     onClick: openErrorOverlay,
                                     children: [
+                                        disabled && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            "data-disabled-icon": true,
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Warning, {})
+                                        }),
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(AnimateCount, {
                                             animate: newErrorDetected,
                                             "data-issues-count-animation": true,
@@ -147,7 +154,7 @@ const NextLogo = /*#__PURE__*/ (0, _react.forwardRef)(function NextLogo(param, p
                                         })
                                     ]
                                 }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                                !disabled && !isBuildError && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                                     "data-issues-collapse": true,
                                     "aria-label": "Collapse issues badge",
                                     onClick: ()=>{
@@ -304,6 +311,21 @@ function NextMark(param) {
         ]
     });
 }
+function Warning() {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M3.98071 1.125L1.125 3.98071L1.125 8.01929L3.98071 10.875H8.01929L10.875 8.01929V3.98071L8.01929 1.125H3.98071ZM3.82538 0C3.62647 0 3.4357 0.0790176 3.29505 0.21967L0.21967 3.29505C0.0790176 3.4357 0 3.62647 0 3.82538V8.17462C0 8.37353 0.0790178 8.5643 0.21967 8.70495L3.29505 11.7803C3.4357 11.921 3.62647 12 3.82538 12H8.17462C8.37353 12 8.5643 11.921 8.70495 11.7803L11.7803 8.70495C11.921 8.5643 12 8.37353 12 8.17462V3.82538C12 3.62647 11.921 3.4357 11.7803 3.29505L8.70495 0.21967C8.5643 0.0790177 8.37353 0 8.17462 0H3.82538ZM6.5625 2.8125V3.375V6V6.5625H5.4375V6V3.375V2.8125H6.5625ZM6 9C6.41421 9 6.75 8.66421 6.75 8.25C6.75 7.83579 6.41421 7.5 6 7.5C5.58579 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 5.58579 9 6 9Z",
+            fill: "#EAEAEA"
+        })
+    });
+}
 function Cross(props) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("svg", {
         width: "12",

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { noop as css } from '../../../../../../internal/helpers/noop-template'\nimport mergeRefs from '../../../../helpers/merge-refs'\nimport { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'\n\ninterface Props extends React.ComponentProps<'button'> {\n  issueCount: number\n  isDevBuilding: boolean\n  isDevRendering: boolean\n  onTriggerClick: () => void\n  openErrorOverlay: () => void\n}\n\nconst SIZE = 36\nconst SHORT_DURATION_MS = 150\n\n/**\n * A hook that creates an animated state based on changes to a dependency.\n * When the dependency changes and passes the shouldSkip check, it triggers\n * an animation state that lasts for the specified duration.\n *\n * @param dep The dependency to watch for changes\n * @param config Configuration object containing:\n *               - shouldSkip: Function to determine if animation should be skipped\n *               - animationDuration: Duration of the animation in milliseconds\n * @returns Boolean indicating if animation is currently active\n */\nconst useAnimated = <T,>(\n  dep: T,\n  config: { shouldSkip: (dep: T) => boolean; animationDuration: number }\n) => {\n  const { shouldSkip: _shouldSkip, animationDuration } = config\n  const shouldSkipRef = useRef(_shouldSkip) // ensure stable reference in case it's not\n\n  const [animatedDep, setAnimatedDep] = useState(false)\n  const isInitialRef = useRef(true)\n\n  useEffect(() => {\n    if (isInitialRef.current) {\n      isInitialRef.current = false\n      return\n    }\n\n    if (shouldSkipRef.current(dep)) {\n      return\n    }\n\n    setAnimatedDep(true)\n    const timeoutId = setTimeout(() => {\n      setAnimatedDep(false)\n    }, animationDuration)\n\n    return () => clearTimeout(timeoutId)\n  }, [dep, animationDuration])\n\n  return animatedDep\n}\n\nexport const NextLogo = forwardRef(function NextLogo(\n  {\n    issueCount,\n    isDevBuilding,\n    isDevRendering,\n    onTriggerClick,\n    openErrorOverlay,\n    ...props\n  }: Props,\n  propRef: React.Ref<HTMLButtonElement>\n) {\n  const hasError = issueCount > 0\n  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n  const newErrorDetected = useAnimated(issueCount, {\n    shouldSkip: (count) => count === 0,\n    animationDuration: SHORT_DURATION_MS,\n  })\n\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const width = useMeasureWidth(ref)\n\n  const isLoading = useMinimumLoadingTimeMultiple(\n    isDevBuilding || isDevRendering\n  )\n\n  useEffect(() => {\n    setIsErrorExpanded(hasError)\n  }, [hasError])\n\n  return (\n    <div\n      data-next-badge-root\n      style={\n        {\n          '--size': `${SIZE}px`,\n          '--duration-short': `${SHORT_DURATION_MS}ms`,\n        } as React.CSSProperties\n      }\n    >\n      {/* Styles */}\n      <style>\n        {css`\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration-long: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);\n            --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);\n            --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale var(--duration-short) var(--timing),\n              width var(--duration-long) var(--timing),\n              box-shadow var(--duration-long) var(--timing),\n              background var(--duration-short) ease;\n\n            &:active[data-error='false'] {\n              scale: 0.95;\n            }\n\n            &[data-animate='true']:not(:hover) {\n              scale: 1.02;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha-error);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-error-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: var(--duration-short);\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: calc(var(--padding) * 2);\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha-error);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 2px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:hover {\n              background: var(--color-hover-alpha-error);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration-long) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            &:hover {\n              background: var(--color-hover-alpha-subtle);\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          [data-issues-count-animation] {\n            display: grid;\n            place-items: center center;\n            font-variant-numeric: tabular-nums;\n\n            &[data-animate='false'] {\n              [data-issues-count-exit],\n              [data-issues-count-enter] {\n                animation-duration: 0ms;\n              }\n            }\n\n            > * {\n              grid-area: 1 / 1;\n            }\n\n            [data-issues-count-exit] {\n              animation: fadeOut 300ms var(--timing) forwards;\n            }\n\n            [data-issues-count-enter] {\n              animation: fadeIn 300ms var(--timing) forwards;\n            }\n          }\n\n          [data-issues-count-plural] {\n            display: inline-block;\n            animation: fadeIn 300ms var(--timing) forwards;\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes fadeIn {\n            0% {\n              opacity: 0;\n              filter: blur(2px);\n              transform: translateY(8px);\n            }\n            100% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n          }\n\n          @keyframes fadeOut {\n            0% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n            100% {\n              opacity: 0;\n              transform: translateY(-12px);\n              filter: blur(2px);\n            }\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n\n          @media (prefers-reduced-motion) {\n            [data-issues-count-exit],\n            [data-issues-count-enter],\n            [data-issues-count-plural] {\n              animation-duration: 0ms !important;\n            }\n          }\n        `}\n      </style>\n      <div\n        data-next-badge\n        data-error={hasError}\n        data-error-expanded={isErrorExpanded}\n        data-animate={newErrorDetected}\n        style={{\n          width: hasError && width > SIZE ? width : SIZE,\n        }}\n      >\n        <div ref={ref}>\n          {/* Children */}\n          <button\n            ref={mergeRefs(triggerRef, propRef)}\n            data-next-mark\n            data-next-mark-loading={isLoading}\n            onClick={onTriggerClick}\n            {...props}\n          >\n            <NextMark isLoading={isLoading} />\n          </button>\n          {isErrorExpanded && (\n            <div data-issues>\n              <button\n                data-issues-open\n                aria-label=\"Open issues overlay\"\n                onClick={openErrorOverlay}\n              >\n                <AnimateCount\n                  // Used the key to force a re-render when the count changes.\n                  key={issueCount}\n                  animate={newErrorDetected}\n                  data-issues-count-animation\n                >\n                  {issueCount}\n                </AnimateCount>{' '}\n                <div>\n                  Issue\n                  {issueCount > 1 && (\n                    <span aria-hidden data-issues-count-plural>\n                      s\n                    </span>\n                  )}\n                </div>\n              </button>\n              <button\n                data-issues-collapse\n                aria-label=\"Collapse issues badge\"\n                onClick={() => {\n                  setIsErrorExpanded(false)\n                  // Move focus to the trigger to prevent having it stuck on this element\n                  triggerRef.current?.focus()\n                }}\n              >\n                <Cross data-cross />\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n      <div aria-hidden data-dot />\n    </div>\n  )\n})\n\nfunction AnimateCount({\n  children: count,\n  animate = true,\n  ...props\n}: {\n  children: number\n  animate: boolean\n}) {\n  return (\n    <div {...props} data-animate={animate}>\n      <div aria-hidden data-issues-count-exit>\n        {count - 1}\n      </div>\n      <div data-issues-count data-issues-count-enter>\n        {count}\n      </div>\n    </div>\n  )\n}\n\nfunction useMeasureWidth(ref: React.RefObject<HTMLDivElement | null>) {\n  const [width, setWidth] = useState<number>(0)\n\n  useEffect(() => {\n    const el = ref.current\n\n    if (!el) {\n      return\n    }\n\n    const observer = new ResizeObserver(() => {\n      const { width: w } = el.getBoundingClientRect()\n      setWidth(w)\n    })\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [ref])\n\n  return width\n}\n\nfunction NextMark({ isLoading }: { isLoading?: boolean }) {\n  return (\n    <svg\n      width=\"40\"\n      height=\"40\"\n      viewBox=\"0 0 40 40\"\n      fill=\"none\"\n      data-next-mark-loading={isLoading}\n    >\n      <g transform=\"translate(8.5, 13)\">\n        <path\n          className={isLoading ? 'path0' : 'paused'}\n          d=\"M13.3 15.2 L2.34 1 V12.6\"\n          fill=\"none\"\n          stroke=\"url(#paint0_linear_1357_10853)\"\n          strokeWidth=\"1.86\"\n          mask=\"url(#mask0)\"\n          strokeDasharray=\"29.6\"\n          strokeDashoffset=\"29.6\"\n        />\n        <path\n          className={isLoading ? 'path1' : 'paused'}\n          d=\"M11.825 1.5 V13.1\"\n          strokeWidth=\"1.86\"\n          stroke=\"url(#paint1_linear_1357_10853)\"\n          strokeDasharray=\"11.6\"\n          strokeDashoffset=\"11.6\"\n        />\n      </g>\n      <defs>\n        <linearGradient\n          id=\"paint0_linear_1357_10853\"\n          x1=\"9.95555\"\n          y1=\"11.1226\"\n          x2=\"15.4778\"\n          y2=\"17.9671\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"0.604072\" stopColor=\"white\" stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient\n          id=\"paint1_linear_1357_10853\"\n          x1=\"11.8222\"\n          y1=\"1.40039\"\n          x2=\"11.791\"\n          y2=\"9.62542\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <mask id=\"mask0\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n        </mask>\n      </defs>\n    </svg>\n  )\n}\n\nexport function Cross(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.08889 11.8384L2.62486 12.3024L1.69678 11.3744L2.16082 10.9103L6.07178 6.99937L2.16082 3.08841L1.69678 2.62437L2.62486 1.69629L3.08889 2.16033L6.99986 6.07129L10.9108 2.16033L11.3749 1.69629L12.3029 2.62437L11.8389 3.08841L7.92793 6.99937L11.8389 10.9103L12.3029 11.3744L11.3749 12.3024L10.9108 11.8384L6.99986 7.92744L3.08889 11.8384Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["Cross","NextLogo","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","useRef","animatedDep","setAnimatedDep","useState","isInitialRef","useEffect","current","timeoutId","setTimeout","clearTimeout","forwardRef","propRef","issueCount","isDevBuilding","isDevRendering","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","useMinimumLoadingTimeMultiple","div","data-next-badge-root","style","css","data-next-badge","data-error","data-error-expanded","data-animate","button","mergeRefs","data-next-mark","data-next-mark-loading","onClick","NextMark","data-issues","data-issues-open","aria-label","AnimateCount","animate","data-issues-count-animation","span","aria-hidden","data-issues-count-plural","data-issues-collapse","focus","data-cross","data-dot","children","data-issues-count-exit","data-issues-count","data-issues-count-enter","setWidth","el","observer","ResizeObserver","w","getBoundingClientRect","observe","disconnect","svg","height","viewBox","fill","g","transform","path","className","d","stroke","strokeWidth","mask","strokeDasharray","strokeDashoffset","defs","linearGradient","id","x1","y1","x2","y2","gradientUnits","stop","stopColor","offset","stopOpacity","rect","xmlns","fillRule","clipRule"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/internal/next-logo.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport { noop as css } from '../../../../../../internal/helpers/noop-template'\nimport mergeRefs from '../../../../helpers/merge-refs'\nimport { useMinimumLoadingTimeMultiple } from './use-minimum-loading-time-multiple'\n\ninterface Props extends React.ComponentProps<'button'> {\n  issueCount: number\n  isDevBuilding: boolean\n  isDevRendering: boolean\n  isBuildError: boolean\n  onTriggerClick: () => void\n  openErrorOverlay: () => void\n}\n\nconst SIZE = 36\nconst SHORT_DURATION_MS = 150\n\n/**\n * A hook that creates an animated state based on changes to a dependency.\n * When the dependency changes and passes the shouldSkip check, it triggers\n * an animation state that lasts for the specified duration.\n *\n * @param dep The dependency to watch for changes\n * @param config Configuration object containing:\n *               - shouldSkip: Function to determine if animation should be skipped\n *               - animationDuration: Duration of the animation in milliseconds\n * @returns Boolean indicating if animation is currently active\n */\nconst useAnimated = <T,>(\n  dep: T,\n  config: { shouldSkip: (dep: T) => boolean; animationDuration: number }\n) => {\n  const { shouldSkip: _shouldSkip, animationDuration } = config\n  const shouldSkipRef = useRef(_shouldSkip) // ensure stable reference in case it's not\n\n  const [animatedDep, setAnimatedDep] = useState(false)\n  const isInitialRef = useRef(true)\n\n  useEffect(() => {\n    if (isInitialRef.current) {\n      isInitialRef.current = false\n      return\n    }\n\n    if (shouldSkipRef.current(dep)) {\n      return\n    }\n\n    setAnimatedDep(true)\n    const timeoutId = setTimeout(() => {\n      setAnimatedDep(false)\n    }, animationDuration)\n\n    return () => clearTimeout(timeoutId)\n  }, [dep, animationDuration])\n\n  return animatedDep\n}\n\nexport const NextLogo = forwardRef(function NextLogo(\n  {\n    disabled,\n    issueCount,\n    isDevBuilding,\n    isDevRendering,\n    isBuildError,\n    onTriggerClick,\n    openErrorOverlay,\n    ...props\n  }: Props,\n  propRef: React.Ref<HTMLButtonElement>\n) {\n  const hasError = issueCount > 0\n  const [isErrorExpanded, setIsErrorExpanded] = useState(hasError)\n  const newErrorDetected = useAnimated(issueCount, {\n    shouldSkip: (count) => count === 0,\n    animationDuration: SHORT_DURATION_MS,\n  })\n\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const width = useMeasureWidth(ref)\n\n  const isLoading = useMinimumLoadingTimeMultiple(\n    isDevBuilding || isDevRendering\n  )\n\n  useEffect(() => {\n    setIsErrorExpanded(hasError)\n  }, [hasError])\n\n  return (\n    <div\n      data-next-badge-root\n      style={\n        {\n          '--size': `${SIZE}px`,\n          '--duration-short': `${SHORT_DURATION_MS}ms`,\n          // if the indicator is disabled and there are no errors, hide the badge\n          display: disabled && !hasError ? 'none' : 'block',\n        } as React.CSSProperties\n      }\n    >\n      {/* Styles */}\n      <style>\n        {css`\n          [data-next-badge-root] {\n            --timing: cubic-bezier(0.23, 0.88, 0.26, 0.92);\n            --duration-long: 250ms;\n            --color-outer-border: #171717;\n            --color-inner-border: hsla(0, 0%, 100%, 0.14);\n            --color-hover-alpha-subtle: hsla(0, 0%, 100%, 0.13);\n            --color-hover-alpha-error: hsla(0, 0%, 100%, 0.2);\n            --color-hover-alpha-error-2: hsla(0, 0%, 100%, 0.25);\n            --padding: 2px;\n            --mark-size: calc(var(--size) - var(--padding) * 2);\n\n            --focus-color: var(--color-blue-800);\n            --focus-ring: 2px solid var(--focus-color);\n\n            &:has([data-next-badge][data-error='true']) {\n              --focus-color: #fff;\n            }\n          }\n\n          [data-disabled-icon] {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding-right: 4px;\n          }\n\n          [data-next-badge] {\n            -webkit-font-smoothing: antialiased;\n            width: var(--size);\n            height: var(--size);\n            display: flex;\n            align-items: center;\n            position: relative;\n            background: rgba(0, 0, 0, 0.8);\n            box-shadow:\n              0 0 0 1px var(--color-outer-border),\n              inset 0 0 0 1px var(--color-inner-border),\n              0px 16px 32px -8px rgba(0, 0, 0, 0.24);\n            backdrop-filter: blur(48px);\n            border-radius: 9999px;\n            user-select: none;\n            cursor: pointer;\n            scale: 1;\n            overflow: hidden;\n            will-change: scale, box-shadow, width, background;\n            transition:\n              scale var(--duration-short) var(--timing),\n              width var(--duration-long) var(--timing),\n              box-shadow var(--duration-long) var(--timing),\n              background var(--duration-short) ease;\n\n            &:active[data-error='false'] {\n              scale: 0.95;\n            }\n\n            &[data-animate='true']:not(:hover) {\n              scale: 1.02;\n            }\n\n            &[data-error='false']:has([data-next-mark]:focus-visible) {\n              outline: var(--focus-ring);\n              outline-offset: 3px;\n            }\n\n            &[data-error='true'] {\n              background: #ca2a30;\n              --color-inner-border: #e5484d;\n\n              [data-next-mark] {\n                background: var(--color-hover-alpha-error);\n                outline-offset: 0px;\n\n                &:focus-visible {\n                  outline: var(--focus-ring);\n                  outline-offset: -1px;\n                }\n\n                &:hover {\n                  background: var(--color-hover-alpha-error-2);\n                }\n              }\n            }\n\n            &[data-error-expanded='false'][data-error='true'] ~ [data-dot] {\n              scale: 1;\n            }\n\n            > div {\n              display: flex;\n            }\n          }\n\n          [data-issues-collapse]:focus-visible {\n            outline: var(--focus-ring);\n          }\n\n          [data-issues]:has([data-issues-open]:focus-visible) {\n            outline: var(--focus-ring);\n            outline-offset: -1px;\n          }\n\n          [data-dot] {\n            content: '';\n            width: 8px;\n            height: 8px;\n            background: #fff;\n            box-shadow: 0 0 0 1px var(--color-outer-border);\n            border-radius: 50%;\n            position: absolute;\n            top: 2px;\n            right: 0px;\n            scale: 0;\n            pointer-events: none;\n            transition: scale 200ms var(--timing);\n            transition-delay: var(--duration-short);\n          }\n\n          [data-issues] {\n            display: flex;\n            gap: var(--padding);\n            align-items: center;\n            padding-left: 8px;\n            padding-right: ${disabled || isBuildError\n              ? '8px'\n              : 'calc(var(--padding) * 2)'};\n            height: 32px;\n            margin: 0 var(--padding);\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:has([data-issues-open]:hover) {\n              background: var(--color-hover-alpha-error);\n            }\n\n            [data-cross] {\n              translate: 0px -1px;\n            }\n          }\n\n          [data-issues-open] {\n            font-size: 13px;\n            color: white;\n            width: fit-content;\n            height: 100%;\n            display: flex;\n            gap: 2px;\n            align-items: center;\n            margin: 0;\n            line-height: 36px;\n            font-weight: 500;\n            z-index: 2;\n            white-space: nowrap;\n\n            &:focus-visible {\n              outline: 0;\n            }\n          }\n\n          [data-issues-collapse] {\n            width: 24px;\n            height: 24px;\n            border-radius: 9999px;\n            transition: background var(--duration-short) ease;\n\n            &:hover {\n              background: var(--color-hover-alpha-error);\n            }\n          }\n\n          [data-cross] {\n            color: #fff;\n          }\n\n          [data-next-mark] {\n            width: var(--mark-size);\n            height: var(--mark-size);\n            margin-left: var(--padding);\n            display: flex;\n            align-items: center;\n            border-radius: 9999px;\n            transition: background var(--duration-long) var(--timing);\n\n            &:focus-visible {\n              outline: 0;\n            }\n\n            &:hover {\n              background: var(--color-hover-alpha-subtle);\n            }\n\n            svg {\n              flex-shrink: 0;\n            }\n          }\n\n          [data-issues-count-animation] {\n            display: grid;\n            place-items: center center;\n            font-variant-numeric: tabular-nums;\n\n            &[data-animate='false'] {\n              [data-issues-count-exit],\n              [data-issues-count-enter] {\n                animation-duration: 0ms;\n              }\n            }\n\n            > * {\n              grid-area: 1 / 1;\n            }\n\n            [data-issues-count-exit] {\n              animation: fadeOut 300ms var(--timing) forwards;\n            }\n\n            [data-issues-count-enter] {\n              animation: fadeIn 300ms var(--timing) forwards;\n            }\n          }\n\n          [data-issues-count-plural] {\n            display: inline-block;\n            animation: fadeIn 300ms var(--timing) forwards;\n          }\n\n          .path0 {\n            animation: draw0 1.5s ease-in-out infinite;\n          }\n\n          .path1 {\n            animation: draw1 1.5s ease-out infinite;\n            animation-delay: 0.3s;\n          }\n\n          .paused {\n            stroke-dashoffset: 0;\n          }\n\n          @keyframes fadeIn {\n            0% {\n              opacity: 0;\n              filter: blur(2px);\n              transform: translateY(8px);\n            }\n            100% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n          }\n\n          @keyframes fadeOut {\n            0% {\n              opacity: 1;\n              filter: blur(0px);\n              transform: translateY(0);\n            }\n            100% {\n              opacity: 0;\n              transform: translateY(-12px);\n              filter: blur(2px);\n            }\n          }\n\n          @keyframes draw0 {\n            0%,\n            25% {\n              stroke-dashoffset: -29.6;\n            }\n            25%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 29.6;\n            }\n          }\n\n          @keyframes draw1 {\n            0%,\n            20% {\n              stroke-dashoffset: -11.6;\n            }\n            20%,\n            50% {\n              stroke-dashoffset: 0;\n            }\n            50%,\n            75% {\n              stroke-dashoffset: 0;\n            }\n            75%,\n            100% {\n              stroke-dashoffset: 11.6;\n            }\n          }\n\n          @media (prefers-reduced-motion) {\n            [data-issues-count-exit],\n            [data-issues-count-enter],\n            [data-issues-count-plural] {\n              animation-duration: 0ms !important;\n            }\n          }\n        `}\n      </style>\n      <div\n        data-next-badge\n        data-error={hasError}\n        data-error-expanded={isErrorExpanded}\n        data-animate={newErrorDetected}\n        style={{\n          width: hasError && width > SIZE ? width : SIZE,\n        }}\n      >\n        <div ref={ref}>\n          {/* Children */}\n          {!disabled && (\n            <button\n              ref={mergeRefs(triggerRef, propRef)}\n              data-next-mark\n              data-next-mark-loading={isLoading}\n              onClick={onTriggerClick}\n              {...props}\n            >\n              <NextMark isLoading={isLoading} />\n            </button>\n          )}\n          {isErrorExpanded && (\n            <div data-issues>\n              <button\n                data-issues-open\n                aria-label=\"Open issues overlay\"\n                onClick={openErrorOverlay}\n              >\n                {disabled && (\n                  <div data-disabled-icon>\n                    <Warning />\n                  </div>\n                )}\n                <AnimateCount\n                  // Used the key to force a re-render when the count changes.\n                  key={issueCount}\n                  animate={newErrorDetected}\n                  data-issues-count-animation\n                >\n                  {issueCount}\n                </AnimateCount>{' '}\n                <div>\n                  Issue\n                  {issueCount > 1 && (\n                    <span aria-hidden data-issues-count-plural>\n                      s\n                    </span>\n                  )}\n                </div>\n              </button>\n              {!disabled && !isBuildError && (\n                <button\n                  data-issues-collapse\n                  aria-label=\"Collapse issues badge\"\n                  onClick={() => {\n                    setIsErrorExpanded(false)\n                    // Move focus to the trigger to prevent having it stuck on this element\n                    triggerRef.current?.focus()\n                  }}\n                >\n                  <Cross data-cross />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n      <div aria-hidden data-dot />\n    </div>\n  )\n})\n\nfunction AnimateCount({\n  children: count,\n  animate = true,\n  ...props\n}: {\n  children: number\n  animate: boolean\n}) {\n  return (\n    <div {...props} data-animate={animate}>\n      <div aria-hidden data-issues-count-exit>\n        {count - 1}\n      </div>\n      <div data-issues-count data-issues-count-enter>\n        {count}\n      </div>\n    </div>\n  )\n}\n\nfunction useMeasureWidth(ref: React.RefObject<HTMLDivElement | null>) {\n  const [width, setWidth] = useState<number>(0)\n\n  useEffect(() => {\n    const el = ref.current\n\n    if (!el) {\n      return\n    }\n\n    const observer = new ResizeObserver(() => {\n      const { width: w } = el.getBoundingClientRect()\n      setWidth(w)\n    })\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [ref])\n\n  return width\n}\n\nfunction NextMark({ isLoading }: { isLoading?: boolean }) {\n  return (\n    <svg\n      width=\"40\"\n      height=\"40\"\n      viewBox=\"0 0 40 40\"\n      fill=\"none\"\n      data-next-mark-loading={isLoading}\n    >\n      <g transform=\"translate(8.5, 13)\">\n        <path\n          className={isLoading ? 'path0' : 'paused'}\n          d=\"M13.3 15.2 L2.34 1 V12.6\"\n          fill=\"none\"\n          stroke=\"url(#paint0_linear_1357_10853)\"\n          strokeWidth=\"1.86\"\n          mask=\"url(#mask0)\"\n          strokeDasharray=\"29.6\"\n          strokeDashoffset=\"29.6\"\n        />\n        <path\n          className={isLoading ? 'path1' : 'paused'}\n          d=\"M11.825 1.5 V13.1\"\n          strokeWidth=\"1.86\"\n          stroke=\"url(#paint1_linear_1357_10853)\"\n          strokeDasharray=\"11.6\"\n          strokeDashoffset=\"11.6\"\n        />\n      </g>\n      <defs>\n        <linearGradient\n          id=\"paint0_linear_1357_10853\"\n          x1=\"9.95555\"\n          y1=\"11.1226\"\n          x2=\"15.4778\"\n          y2=\"17.9671\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"0.604072\" stopColor=\"white\" stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient\n          id=\"paint1_linear_1357_10853\"\n          x1=\"11.8222\"\n          y1=\"1.40039\"\n          x2=\"11.791\"\n          y2=\"9.62542\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop stopColor=\"white\" />\n          <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <mask id=\"mask0\">\n          <rect width=\"100%\" height=\"100%\" fill=\"white\" />\n          <rect width=\"5\" height=\"1.5\" fill=\"black\" />\n        </mask>\n      </defs>\n    </svg>\n  )\n}\n\nfunction Warning() {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.98071 1.125L1.125 3.98071L1.125 8.01929L3.98071 10.875H8.01929L10.875 8.01929V3.98071L8.01929 1.125H3.98071ZM3.82538 0C3.62647 0 3.4357 0.0790176 3.29505 0.21967L0.21967 3.29505C0.0790176 3.4357 0 3.62647 0 3.82538V8.17462C0 8.37353 0.0790178 8.5643 0.21967 8.70495L3.29505 11.7803C3.4357 11.921 3.62647 12 3.82538 12H8.17462C8.37353 12 8.5643 11.921 8.70495 11.7803L11.7803 8.70495C11.921 8.5643 12 8.37353 12 8.17462V3.82538C12 3.62647 11.921 3.4357 11.7803 3.29505L8.70495 0.21967C8.5643 0.0790177 8.37353 0 8.17462 0H3.82538ZM6.5625 2.8125V3.375V6V6.5625H5.4375V6V3.375V2.8125H6.5625ZM6 9C6.41421 9 6.75 8.66421 6.75 8.25C6.75 7.83579 6.41421 7.5 6 7.5C5.58579 7.5 5.25 7.83579 5.25 8.25C5.25 8.66421 5.58579 9 6 9Z\"\n        fill=\"#EAEAEA\"\n      />\n    </svg>\n  )\n}\n\nexport function Cross(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M3.08889 11.8384L2.62486 12.3024L1.69678 11.3744L2.16082 10.9103L6.07178 6.99937L2.16082 3.08841L1.69678 2.62437L2.62486 1.69629L3.08889 2.16033L6.99986 6.07129L10.9108 2.16033L11.3749 1.69629L12.3029 2.62437L11.8389 3.08841L7.92793 6.99937L11.8389 10.9103L12.3029 11.3744L11.3749 12.3024L10.9108 11.8384L6.99986 7.92744L3.08889 11.8384Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n"],"names":["Cross","NextLogo","SIZE","SHORT_DURATION_MS","useAnimated","dep","config","shouldSkip","_shouldSkip","animationDuration","shouldSkipRef","useRef","animatedDep","setAnimatedDep","useState","isInitialRef","useEffect","current","timeoutId","setTimeout","clearTimeout","forwardRef","propRef","disabled","issueCount","isDevBuilding","isDevRendering","isBuildError","onTriggerClick","openErrorOverlay","props","hasError","isErrorExpanded","setIsErrorExpanded","newErrorDetected","count","triggerRef","ref","width","useMeasureWidth","isLoading","useMinimumLoadingTimeMultiple","div","data-next-badge-root","style","display","css","data-next-badge","data-error","data-error-expanded","data-animate","button","mergeRefs","data-next-mark","data-next-mark-loading","onClick","NextMark","data-issues","data-issues-open","aria-label","data-disabled-icon","Warning","AnimateCount","animate","data-issues-count-animation","span","aria-hidden","data-issues-count-plural","data-issues-collapse","focus","data-cross","data-dot","children","data-issues-count-exit","data-issues-count","data-issues-count-enter","setWidth","el","observer","ResizeObserver","w","getBoundingClientRect","observe","disconnect","svg","height","viewBox","fill","g","transform","path","className","d","stroke","strokeWidth","mask","strokeDasharray","strokeDashoffset","defs","linearGradient","id","x1","y1","x2","y2","gradientUnits","stop","stopColor","offset","stopOpacity","rect","xmlns","fillRule","clipRule"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/error-message/error-message.js

@@ -25,7 +25,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _nooptemplate = require("../../../helpers/noop-template");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    white-space: pre-wrap;\n  }\n"
+        "\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  }\n"
     ]);
     _templateObject = function() {
         return data;

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/error-message/error-message.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-message/error-message.tsx"],"sourcesContent":["import { noop as css } from '../../../helpers/noop-template'\n\nexport type ErrorMessageType = React.ReactNode\n\ntype ErrorMessageProps = {\n  errorMessage: ErrorMessageType\n}\n\nexport function ErrorMessage({ errorMessage }: ErrorMessageProps) {\n  return (\n    <p\n      id=\"nextjs__container_errors_desc\"\n      className=\"nextjs__container_errors_desc\"\n    >\n      {errorMessage}\n    </p>\n  )\n}\n\nexport const styles = css`\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    white-space: pre-wrap;\n  }\n`\n"],"names":["ErrorMessage","styles","errorMessage","p","id","className","css"],"mappings":";;;;;;;;;;;;;;;IAQgBA,YAAY;eAAZA;;IAWHC,MAAM;eAANA;;;;;8BAnBe;;;;;;;;;;AAQrB,SAASD,aAAa,KAAmC;IAAnC,IAAA,EAAEE,YAAY,EAAqB,GAAnC;IAC3B,qBACE,qBAACC;QACCC,IAAG;QACHC,WAAU;kBAETH;;AAGP;AAEO,MAAMD,aAASK,kBAAG"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-message/error-message.tsx"],"sourcesContent":["import { noop as css } from '../../../helpers/noop-template'\n\nexport type ErrorMessageType = React.ReactNode\n\ntype ErrorMessageProps = {\n  errorMessage: ErrorMessageType\n}\n\nexport function ErrorMessage({ errorMessage }: ErrorMessageProps) {\n  return (\n    <p\n      id=\"nextjs__container_errors_desc\"\n      className=\"nextjs__container_errors_desc\"\n    >\n      {errorMessage}\n    </p>\n  )\n}\n\nexport const styles = css`\n  .nextjs__container_errors_desc {\n    margin: 0;\n    margin-left: var(--size-1);\n    color: var(--color-red-900);\n    font-weight: 500;\n    font-size: var(--size-font);\n    letter-spacing: -0.32px;\n    line-height: var(--size-6);\n    overflow-wrap: break-word;\n    white-space: pre-wrap;\n  }\n`\n"],"names":["ErrorMessage","styles","errorMessage","p","id","className","css"],"mappings":";;;;;;;;;;;;;;;IAQgBA,YAAY;eAAZA;;IAWHC,MAAM;eAANA;;;;;8BAnBe;;;;;;;;;;AAQrB,SAASD,aAAa,KAAmC;IAAnC,IAAA,EAAEE,YAAY,EAAqB,GAAnC;IAC3B,qBACE,qBAACC;QACCC,IAAG;QACHC,WAAU;kBAETH;;AAGP;AAEO,MAAMD,aAASK,kBAAG"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.d.ts

@@ -6,9 +6,9 @@ export interface ErrorBaseProps {
     isTurbopack: boolean;
     versionInfo: OverlayState['versionInfo'];
 }
-export declare function ErrorOverlay({ state, readyErrors, isErrorOverlayOpen, setIsErrorOverlayOpen, }: {
+export declare function ErrorOverlay({ state, runtimeErrors, isErrorOverlayOpen, setIsErrorOverlayOpen, }: {
     state: OverlayState;
-    readyErrors: ReadyRuntimeError[];
+    runtimeErrors: ReadyRuntimeError[];
     isErrorOverlayOpen: boolean;
     setIsErrorOverlayOpen: (value: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element | null;

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

@@ -15,7 +15,7 @@ const _rootlayoutmissingtagserror = require("../../../container/root-layout-miss
 const _usedelayedrender = require("../../../hooks/use-delayed-render");
 const transitionDurationMs = 200;
 function ErrorOverlay(param) {
-    let { state, readyErrors, isErrorOverlayOpen, setIsErrorOverlayOpen } = param;
+    let { state, runtimeErrors, isErrorOverlayOpen, setIsErrorOverlayOpen } = param;
     var _state_rootLayoutMissingTags;
     const isTurbopack = !!process.env.TURBOPACK;
     // This hook lets us do an exit animation before unmounting the component
@@ -45,7 +45,7 @@ function ErrorOverlay(param) {
         });
     }
     // No Runtime Errors.
-    if (!readyErrors.length) {
+    if (!runtimeErrors.length) {
         return null;
     }
     if (!mounted) {
@@ -54,7 +54,7 @@ function ErrorOverlay(param) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_errors.Errors, {
         ...commonProps,
         debugInfo: state.debugInfo,
-        readyErrors: readyErrors,
+        runtimeErrors: runtimeErrors,
         onClose: ()=>{
             setIsErrorOverlayOpen(false);
         }

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../../../../shared'\n\nimport { BuildError } from '../../../container/build-error'\nimport { Errors } from '../../../container/errors'\nimport { RootLayoutMissingTagsError } from '../../../container/root-layout-missing-tags-error'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type'\n\nconst transitionDurationMs = 200\n\nexport interface ErrorBaseProps {\n  rendered: boolean\n  transitionDurationMs: number\n  isTurbopack: boolean\n  versionInfo: OverlayState['versionInfo']\n}\n\nexport function ErrorOverlay({\n  state,\n  readyErrors,\n  isErrorOverlayOpen,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  readyErrors: ReadyRuntimeError[]\n  isErrorOverlayOpen: boolean\n  setIsErrorOverlayOpen: (value: boolean) => void\n}) {\n  const isTurbopack = !!process.env.TURBOPACK\n\n  // This hook lets us do an exit animation before unmounting the component\n  const { mounted, rendered } = useDelayedRender(isErrorOverlayOpen, {\n    exitDelay: transitionDurationMs,\n  })\n\n  const commonProps = {\n    rendered,\n    transitionDurationMs,\n    isTurbopack,\n    versionInfo: state.versionInfo,\n  }\n\n  if (!!state.rootLayoutMissingTags?.length) {\n    return (\n      <RootLayoutMissingTagsError\n        {...commonProps}\n        // This is not a runtime error, forcedly display error overlay\n        rendered\n        missingTags={state.rootLayoutMissingTags}\n      />\n    )\n  }\n\n  if (state.buildError !== null) {\n    return (\n      <BuildError\n        {...commonProps}\n        message={state.buildError}\n        // This is not a runtime error, forcedly display error overlay\n        rendered\n      />\n    )\n  }\n\n  // No Runtime Errors.\n  if (!readyErrors.length) {\n    return null\n  }\n\n  if (!mounted) {\n    return null\n  }\n\n  return (\n    <Errors\n      {...commonProps}\n      debugInfo={state.debugInfo}\n      readyErrors={readyErrors}\n      onClose={() => {\n        setIsErrorOverlayOpen(false)\n      }}\n    />\n  )\n}\n"],"names":["ErrorOverlay","transitionDurationMs","state","readyErrors","isErrorOverlayOpen","setIsErrorOverlayOpen","isTurbopack","process","env","TURBOPACK","mounted","rendered","useDelayedRender","exitDelay","commonProps","versionInfo","rootLayoutMissingTags","length","RootLayoutMissingTagsError","missingTags","buildError","BuildError","message","Errors","debugInfo","onClose"],"mappings":";;;;+BAiBgBA;;;eAAAA;;;;4BAfW;wBACJ;4CACoB;kCACV;AAGjC,MAAMC,uBAAuB;AAStB,SAASD,aAAa,KAU5B;IAV4B,IAAA,EAC3BE,KAAK,EACLC,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EAMtB,GAV4B;QAyBrBH;IAdN,MAAMI,cAAc,CAAC,CAACC,QAAQC,GAAG,CAACC,SAAS;IAE3C,yEAAyE;IACzE,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,kCAAgB,EAACR,oBAAoB;QACjES,WAAWZ;IACb;IAEA,MAAMa,cAAc;QAClBH;QACAV;QACAK;QACAS,aAAab,MAAMa,WAAW;IAChC;IAEA,IAAI,CAAC,GAACb,+BAAAA,MAAMc,qBAAqB,qBAA3Bd,6BAA6Be,MAAM,GAAE;QACzC,qBACE,qBAACC,sDAA0B;YACxB,GAAGJ,WAAW;YACf,8DAA8D;YAC9DH,QAAQ;YACRQ,aAAajB,MAAMc,qBAAqB;;IAG9C;IAEA,IAAId,MAAMkB,UAAU,KAAK,MAAM;QAC7B,qBACE,qBAACC,sBAAU;YACR,GAAGP,WAAW;YACfQ,SAASpB,MAAMkB,UAAU;YACzB,8DAA8D;YAC9DT,QAAQ;;IAGd;IAEA,qBAAqB;IACrB,IAAI,CAACR,YAAYc,MAAM,EAAE;QACvB,OAAO;IACT;IAEA,IAAI,CAACP,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,qBAACa,cAAM;QACJ,GAAGT,WAAW;QACfU,WAAWtB,MAAMsB,SAAS;QAC1BrB,aAAaA;QACbsB,SAAS;YACPpB,sBAAsB;QACxB;;AAGN"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx"],"sourcesContent":["import type { OverlayState } from '../../../../../shared'\n\nimport { BuildError } from '../../../container/build-error'\nimport { Errors } from '../../../container/errors'\nimport { RootLayoutMissingTagsError } from '../../../container/root-layout-missing-tags-error'\nimport { useDelayedRender } from '../../../hooks/use-delayed-render'\nimport type { ReadyRuntimeError } from '../../../../../internal/helpers/get-error-by-type'\n\nconst transitionDurationMs = 200\n\nexport interface ErrorBaseProps {\n  rendered: boolean\n  transitionDurationMs: number\n  isTurbopack: boolean\n  versionInfo: OverlayState['versionInfo']\n}\n\nexport function ErrorOverlay({\n  state,\n  runtimeErrors,\n  isErrorOverlayOpen,\n  setIsErrorOverlayOpen,\n}: {\n  state: OverlayState\n  runtimeErrors: ReadyRuntimeError[]\n  isErrorOverlayOpen: boolean\n  setIsErrorOverlayOpen: (value: boolean) => void\n}) {\n  const isTurbopack = !!process.env.TURBOPACK\n\n  // This hook lets us do an exit animation before unmounting the component\n  const { mounted, rendered } = useDelayedRender(isErrorOverlayOpen, {\n    exitDelay: transitionDurationMs,\n  })\n\n  const commonProps = {\n    rendered,\n    transitionDurationMs,\n    isTurbopack,\n    versionInfo: state.versionInfo,\n  }\n\n  if (!!state.rootLayoutMissingTags?.length) {\n    return (\n      <RootLayoutMissingTagsError\n        {...commonProps}\n        // This is not a runtime error, forcedly display error overlay\n        rendered\n        missingTags={state.rootLayoutMissingTags}\n      />\n    )\n  }\n\n  if (state.buildError !== null) {\n    return (\n      <BuildError\n        {...commonProps}\n        message={state.buildError}\n        // This is not a runtime error, forcedly display error overlay\n        rendered\n      />\n    )\n  }\n\n  // No Runtime Errors.\n  if (!runtimeErrors.length) {\n    return null\n  }\n\n  if (!mounted) {\n    return null\n  }\n\n  return (\n    <Errors\n      {...commonProps}\n      debugInfo={state.debugInfo}\n      runtimeErrors={runtimeErrors}\n      onClose={() => {\n        setIsErrorOverlayOpen(false)\n      }}\n    />\n  )\n}\n"],"names":["ErrorOverlay","transitionDurationMs","state","runtimeErrors","isErrorOverlayOpen","setIsErrorOverlayOpen","isTurbopack","process","env","TURBOPACK","mounted","rendered","useDelayedRender","exitDelay","commonProps","versionInfo","rootLayoutMissingTags","length","RootLayoutMissingTagsError","missingTags","buildError","BuildError","message","Errors","debugInfo","onClose"],"mappings":";;;;+BAiBgBA;;;eAAAA;;;;4BAfW;wBACJ;4CACoB;kCACV;AAGjC,MAAMC,uBAAuB;AAStB,SAASD,aAAa,KAU5B;IAV4B,IAAA,EAC3BE,KAAK,EACLC,aAAa,EACbC,kBAAkB,EAClBC,qBAAqB,EAMtB,GAV4B;QAyBrBH;IAdN,MAAMI,cAAc,CAAC,CAACC,QAAQC,GAAG,CAACC,SAAS;IAE3C,yEAAyE;IACzE,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,kCAAgB,EAACR,oBAAoB;QACjES,WAAWZ;IACb;IAEA,MAAMa,cAAc;QAClBH;QACAV;QACAK;QACAS,aAAab,MAAMa,WAAW;IAChC;IAEA,IAAI,CAAC,GAACb,+BAAAA,MAAMc,qBAAqB,qBAA3Bd,6BAA6Be,MAAM,GAAE;QACzC,qBACE,qBAACC,sDAA0B;YACxB,GAAGJ,WAAW;YACf,8DAA8D;YAC9DH,QAAQ;YACRQ,aAAajB,MAAMc,qBAAqB;;IAG9C;IAEA,IAAId,MAAMkB,UAAU,KAAK,MAAM;QAC7B,qBACE,qBAACC,sBAAU;YACR,GAAGP,WAAW;YACfQ,SAASpB,MAAMkB,UAAU;YACzB,8DAA8D;YAC9DT,QAAQ;;IAGd;IAEA,qBAAqB;IACrB,IAAI,CAACR,cAAcc,MAAM,EAAE;QACzB,OAAO;IACT;IAEA,IAAI,CAACP,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,qBAACa,cAAM;QACJ,GAAGT,WAAW;QACfU,WAAWtB,MAAMsB,SAAS;QAC1BrB,eAAeA;QACfsB,SAAS;YACPpB,sBAAsB;QACxB;;AAGN"}

package/dist/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay-layout/error-overlay-layout.d.ts

@@ -12,12 +12,12 @@ interface ErrorOverlayLayoutProps extends ErrorBaseProps {
     debugInfo?: DebugInfo;
     isBuildError?: boolean;
     onClose?: () => void;
-    readyErrors?: ReadyRuntimeError[];
+    runtimeErrors?: ReadyRuntimeError[];
     activeIdx?: number;
     setActiveIndex?: (index: number) => void;
     footerMessage?: string;
     dialogResizerRef?: React.RefObject<HTMLDivElement | null>;
 }
-export declare function ErrorOverlayLayout({ errorMessage, errorType, children, errorCode, error, debugInfo, isBuildError, onClose, versionInfo, readyErrors, activeIdx, setActiveIndex, footerMessage, isTurbopack, dialogResizerRef, rendered, transitionDurationMs, }: ErrorOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorOverlayLayout({ errorMessage, errorType, children, errorCode, error, debugInfo, isBuildError, onClose, versionInfo, runtimeErrors, activeIdx, setActiveIndex, footerMessage, isTurbopack, dialogResizerRef, rendered, transitionDurationMs, }: ErrorOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
 export declare const styles: string;
 export {};