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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { DevToolsIndicator } from './dev-tools-indicator'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\nimport type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\nimport type { OverlayState } from '../../../../../shared'\n\nconst meta: Meta<typeof DevToolsIndicator> = {\n  component: DevToolsIndicator,\n  parameters: {\n    layout: 'centered',\n  },\n  argTypes: {\n    position: {\n      control: 'select',\n      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],\n      defaultValue: 'bottom-left',\n    },\n  },\n  decorators: [\n    withShadowPortal,\n    // Test for high z-index\n    (Story) => (\n      <div\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 9999,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          background:\n            'linear-gradient(135deg, rgba(230,240,255,0.8) 0%, rgba(200,220,255,0.6) 100%)',\n        }}\n      >\n        <Story />\n      </div>\n    ),\n  ],\n}\n\nexport default meta\ntype Story = StoryObj<typeof DevToolsIndicator>\n\n// Mock version info for stories\nconst mockVersionInfo: VersionInfo = {\n  installed: '15.1.2',\n  staleness: 'stale-major',\n}\n\nconst state: OverlayState = {\n  nextId: 1,\n  buildError: null,\n  errors: [],\n  refreshState: { type: 'idle' },\n  rootLayoutMissingTags: [],\n  versionInfo: mockVersionInfo,\n  notFound: false,\n  staticIndicator: false,\n  debugInfo: { devtoolsFrontendUrl: undefined },\n}\n\nexport const NoErrors: Story = {\n  args: {\n    errorCount: 0,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const SingleError: Story = {\n  args: {\n    errorCount: 1,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const MultipleErrors: Story = {\n  args: {\n    errorCount: 3,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const WithStaticIndicator: Story = {\n  args: {\n    errorCount: 3,\n    state: {\n      ...state,\n      staticIndicator: true,\n    },\n    setIsErrorOverlayOpen: () => {\n      console.log('setIsErrorOverlayOpen called')\n    },\n  },\n}\n"],"names":["DevToolsIndicator","withShadowPortal","meta","component","parameters","layout","argTypes","position","control","options","defaultValue","decorators","Story","div","style","top","left","width","height","zIndex","display","alignItems","justifyContent","background","mockVersionInfo","installed","staleness","state","nextId","buildError","errors","refreshState","type","rootLayoutMissingTags","versionInfo","notFound","staticIndicator","debugInfo","devtoolsFrontendUrl","undefined","NoErrors","args","errorCount","setIsErrorOverlayOpen","SingleError","MultipleErrors","WithStaticIndicator","console","log"],"mappings":";AACA,SAASA,iBAAiB,QAAQ,wBAAuB;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AAIxE,MAAMC,OAAuC;IAC3CC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,UAAU;QACRC,UAAU;YACRC,SAAS;YACTC,SAAS;gBAAC;gBAAY;gBAAa;gBAAe;aAAe;YACjEC,cAAc;QAChB;IACF;IACAC,YAAY;QACVV;QACA,wBAAwB;QACxB,CAACW,sBACC,KAACC;gBACCC,OAAO;oBACLP,UAAU;oBACVQ,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,QAAQ;oBACRC,QAAQ;oBACRC,SAAS;oBACTC,YAAY;oBACZC,gBAAgB;oBAChBC,YACE;gBACJ;0BAEA,cAAA,KAACX;;KAGN;AACH;AAEA,eAAeV,KAAI;AAGnB,gCAAgC;AAChC,MAAMsB,kBAA+B;IACnCC,WAAW;IACXC,WAAW;AACb;AAEA,MAAMC,QAAsB;IAC1BC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE;IACVC,cAAc;QAAEC,MAAM;IAAO;IAC7BC,uBAAuB,EAAE;IACzBC,aAAaV;IACbW,UAAU;IACVC,iBAAiB;IACjBC,WAAW;QAAEC,qBAAqBC;IAAU;AAC9C;AAEA,OAAO,MAAMC,WAAkB;IAC7BC,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAMC,cAAqB;IAChCH,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAME,iBAAwB;IACnCJ,MAAM;QACJC,YAAY;QACZf;QACAgB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAMG,sBAA6B;IACxCL,MAAM;QACJC,YAAY;QACZf,OAAO;YACL,GAAGA,KAAK;YACRS,iBAAiB;QACnB;QACAO,uBAAuB;YACrBI,QAAQC,GAAG,CAAC;QACd;IACF;AACF,EAAC"}
+{"version":3,"sources":["../../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react'\nimport { DevToolsIndicator } from './dev-tools-indicator'\nimport { withShadowPortal } from '../../../storybook/with-shadow-portal'\nimport type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'\nimport type { OverlayState } from '../../../../../shared'\n\nconst meta: Meta<typeof DevToolsIndicator> = {\n  component: DevToolsIndicator,\n  parameters: {\n    layout: 'centered',\n  },\n  argTypes: {\n    position: {\n      control: 'select',\n      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],\n      defaultValue: 'bottom-left',\n    },\n  },\n  decorators: [\n    withShadowPortal,\n    // Test for high z-index\n    (Story) => (\n      <div\n        style={{\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          zIndex: 9999,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          background:\n            'linear-gradient(135deg, rgba(230,240,255,0.8) 0%, rgba(200,220,255,0.6) 100%)',\n        }}\n      >\n        <Story />\n      </div>\n    ),\n  ],\n}\n\nexport default meta\ntype Story = StoryObj<typeof DevToolsIndicator>\n\n// Mock version info for stories\nconst mockVersionInfo: VersionInfo = {\n  installed: '15.1.2',\n  staleness: 'stale-major',\n}\n\nconst state: OverlayState = {\n  nextId: 1,\n  buildError: null,\n  errors: [],\n  refreshState: { type: 'idle' },\n  disableDevIndicator: false,\n  rootLayoutMissingTags: [],\n  versionInfo: mockVersionInfo,\n  notFound: false,\n  staticIndicator: true,\n  debugInfo: { devtoolsFrontendUrl: undefined },\n}\n\nexport const StaticRoute: Story = {\n  args: {\n    errorCount: 0,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const DynamicRoute: Story = {\n  args: {\n    errorCount: 0,\n    state: {\n      ...state,\n      staticIndicator: false,\n    },\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const SingleError: Story = {\n  args: {\n    errorCount: 1,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n\nexport const MultipleErrors: Story = {\n  args: {\n    errorCount: 3,\n    state,\n    setIsErrorOverlayOpen: () => {},\n  },\n}\n"],"names":["DevToolsIndicator","withShadowPortal","meta","component","parameters","layout","argTypes","position","control","options","defaultValue","decorators","Story","div","style","top","left","width","height","zIndex","display","alignItems","justifyContent","background","mockVersionInfo","installed","staleness","state","nextId","buildError","errors","refreshState","type","disableDevIndicator","rootLayoutMissingTags","versionInfo","notFound","staticIndicator","debugInfo","devtoolsFrontendUrl","undefined","StaticRoute","args","errorCount","setIsErrorOverlayOpen","DynamicRoute","SingleError","MultipleErrors"],"mappings":";AACA,SAASA,iBAAiB,QAAQ,wBAAuB;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AAIxE,MAAMC,OAAuC;IAC3CC,WAAWH;IACXI,YAAY;QACVC,QAAQ;IACV;IACAC,UAAU;QACRC,UAAU;YACRC,SAAS;YACTC,SAAS;gBAAC;gBAAY;gBAAa;gBAAe;aAAe;YACjEC,cAAc;QAChB;IACF;IACAC,YAAY;QACVV;QACA,wBAAwB;QACxB,CAACW,sBACC,KAACC;gBACCC,OAAO;oBACLP,UAAU;oBACVQ,KAAK;oBACLC,MAAM;oBACNC,OAAO;oBACPC,QAAQ;oBACRC,QAAQ;oBACRC,SAAS;oBACTC,YAAY;oBACZC,gBAAgB;oBAChBC,YACE;gBACJ;0BAEA,cAAA,KAACX;;KAGN;AACH;AAEA,eAAeV,KAAI;AAGnB,gCAAgC;AAChC,MAAMsB,kBAA+B;IACnCC,WAAW;IACXC,WAAW;AACb;AAEA,MAAMC,QAAsB;IAC1BC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE;IACVC,cAAc;QAAEC,MAAM;IAAO;IAC7BC,qBAAqB;IACrBC,uBAAuB,EAAE;IACzBC,aAAaX;IACbY,UAAU;IACVC,iBAAiB;IACjBC,WAAW;QAAEC,qBAAqBC;IAAU;AAC9C;AAEA,OAAO,MAAMC,cAAqB;IAChCC,MAAM;QACJC,YAAY;QACZhB;QACAiB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAMC,eAAsB;IACjCH,MAAM;QACJC,YAAY;QACZhB,OAAO;YACL,GAAGA,KAAK;YACRU,iBAAiB;QACnB;QACAO,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAME,cAAqB;IAChCJ,MAAM;QACJC,YAAY;QACZhB;QACAiB,uBAAuB,KAAO;IAChC;AACF,EAAC;AAED,OAAO,MAAMG,iBAAwB;IACnCL,MAAM;QACJC,YAAY;QACZhB;QACAiB,uBAAuB,KAAO;IAChC;AACF,EAAC"}

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

@@ -0,0 +1,52 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+function _templateObject() {
+    const data = _tagged_template_literal_loose([
+        "\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-title {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    line-height: 20px;\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { noop as css } from '../../../../helpers/noop-template';
+export function DevToolsInfo(param) {
+    let { title, children, learnMoreLink, setIsOpen, setPreviousOpen, ...props } = param;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-info-popover": true,
+        ...props,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "dev-tools-info-container",
+            children: [
+                /*#__PURE__*/ _jsx("h1", {
+                    className: "dev-tools-info-title",
+                    children: title
+                }),
+                children,
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "dev-tools-info-button-container",
+                    children: [
+                        /*#__PURE__*/ _jsx("button", {
+                            className: "dev-tools-info-close-button",
+                            onClick: ()=>{
+                                setIsOpen(false);
+                                setPreviousOpen(true);
+                            },
+                            children: "Close"
+                        }),
+                        /*#__PURE__*/ _jsx("a", {
+                            className: "dev-tools-info-learn-more-button",
+                            href: learnMoreLink,
+                            target: "_blank",
+                            rel: "noreferrer noopener",
+                            children: "Learn More"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export const DEV_TOOLS_INFO_STYLES = css(_templateObject());
+
+//# sourceMappingURL=dev-tools-info.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-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/dev-tools-info.tsx"],"sourcesContent":["import { noop as css } from '../../../../helpers/noop-template'\n\nexport function DevToolsInfo({\n  title,\n  children,\n  learnMoreLink,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  title: string\n  children: React.ReactNode\n  learnMoreLink: string\n  setIsOpen: (isOpen: boolean) => void\n  setPreviousOpen: (isOpen: boolean) => void\n}) {\n  return (\n    <div data-info-popover {...props}>\n      <div className=\"dev-tools-info-container\">\n        <h1 className=\"dev-tools-info-title\">{title}</h1>\n        {children}\n        <div className=\"dev-tools-info-button-container\">\n          <button\n            className=\"dev-tools-info-close-button\"\n            onClick={() => {\n              setIsOpen(false)\n              setPreviousOpen(true)\n            }}\n          >\n            Close\n          </button>\n          <a\n            className=\"dev-tools-info-learn-more-button\"\n            href={learnMoreLink}\n            target=\"_blank\"\n            rel=\"noreferrer noopener\"\n          >\n            Learn More\n          </a>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const DEV_TOOLS_INFO_STYLES = css`\n  [data-info-popover] {\n    -webkit-font-smoothing: antialiased;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: var(--color-background-100);\n    border: 1px solid var(--color-gray-alpha-400);\n    background-clip: padding-box;\n    box-shadow: var(--shadow-menu);\n    border-radius: var(--rounded-xl);\n    position: absolute;\n    font-family: var(--font-stack-sans);\n    z-index: 1000;\n    overflow: hidden;\n    opacity: 0;\n    outline: 0;\n    min-width: 350px;\n    transition: opacity var(--animate-out-duration-ms)\n      var(--animate-out-timing-function);\n\n    &[data-rendered='true'] {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  .dev-tools-info-container {\n    padding: var(--size-1_5);\n  }\n\n  .dev-tools-info-title {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .dev-tools-info-article {\n    padding: var(--size-2) var(--size-1_5);\n    color: var(--color-gray-1000);\n    font-size: 14px;\n    line-height: 20px;\n    margin: 0;\n  }\n  .dev-tools-info-paragraph {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .dev-tools-info-button-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: var(--size-2) var(--size-1_5);\n  }\n\n  .dev-tools-info-close-button {\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-gray-1000);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-alpha-400);\n    background: var(--color-background-200);\n  }\n\n  .dev-tools-info-close-button:hover {\n    background: var(--color-gray-400);\n  }\n\n  .dev-tools-info-learn-more-button {\n    align-content: center;\n    padding: 0 var(--size-2);\n    height: 28px;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    transition: background var(--duration-short) ease;\n    color: var(--color-background-100);\n    border-radius: var(--rounded-md-2);\n    border: 1px solid var(--color-gray-1000);\n    background: var(--color-gray-1000);\n  }\n\n  .dev-tools-info-learn-more-button:hover {\n    text-decoration: none;\n    color: var(--color-background-100);\n    opacity: 0.9;\n  }\n`\n"],"names":["noop","css","DevToolsInfo","title","children","learnMoreLink","setIsOpen","setPreviousOpen","props","div","data-info-popover","className","h1","button","onClick","a","href","target","rel","DEV_TOOLS_INFO_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,QAAQC,GAAG,QAAQ,oCAAmC;AAE/D,OAAO,SAASC,aAAa,KAa5B;IAb4B,IAAA,EAC3BC,KAAK,EACLC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAb4B;IAc3B,qBACE,KAACC;QAAIC,mBAAiB;QAAE,GAAGF,KAAK;kBAC9B,cAAA,MAACC;YAAIE,WAAU;;8BACb,KAACC;oBAAGD,WAAU;8BAAwBR;;gBACrCC;8BACD,MAACK;oBAAIE,WAAU;;sCACb,KAACE;4BACCF,WAAU;4BACVG,SAAS;gCACPR,UAAU;gCACVC,gBAAgB;4BAClB;sCACD;;sCAGD,KAACQ;4BACCJ,WAAU;4BACVK,MAAMX;4BACNY,QAAO;4BACPC,KAAI;sCACL;;;;;;;AAOX;AAEA,OAAO,MAAMC,wBAAwBlB,uBAgGpC"}

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

@@ -0,0 +1,130 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+function _templateObject() {
+    const data = _tagged_template_literal_loose([
+        "\n  .dev-tools-info-link {\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DevToolsInfo } from './dev-tools-info';
+import { noop as css } from '../../../../helpers/noop-template';
+function StaticRouteContent() {
+    return /*#__PURE__*/ _jsxs("article", {
+        className: "dev-tools-info-article",
+        children: [
+            /*#__PURE__*/ _jsxs("p", {
+                className: "dev-tools-info-paragraph",
+                children: [
+                    "The path",
+                    ' ',
+                    /*#__PURE__*/ _jsx("code", {
+                        className: "dev-tools-info-code",
+                        children: window.location.pathname
+                    }),
+                    ' ',
+                    'is marked as "static" since it will be prerendered during the build time.'
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                className: "dev-tools-info-paragraph",
+                children: [
+                    "With Static Rendering, routes are rendered at build time, or in the background after",
+                    ' ',
+                    /*#__PURE__*/ _jsx("a", {
+                        className: "dev-tools-info-link",
+                        href: "https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "data revalidation"
+                    }),
+                    "."
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "dev-tools-info-paragraph",
+                children: "Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page."
+            })
+        ]
+    });
+}
+function DynamicRouteContent() {
+    return /*#__PURE__*/ _jsxs("article", {
+        className: "dev-tools-info-article",
+        children: [
+            /*#__PURE__*/ _jsxs("p", {
+                className: "dev-tools-info-paragraph",
+                children: [
+                    "The path",
+                    ' ',
+                    /*#__PURE__*/ _jsx("code", {
+                        className: "dev-tools-info-code",
+                        children: window.location.pathname
+                    }),
+                    ' ',
+                    'is marked as "dynamic" since it will be rendered for each user at',
+                    ' ',
+                    /*#__PURE__*/ _jsx("strong", {
+                        children: "request time"
+                    }),
+                    "."
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "dev-tools-info-paragraph",
+                children: "Dynamic rendering is useful when a route has data that is personalized to the user or has information that can only be known at request time, such as cookies or the URL's search params."
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                className: "dev-tools-info-paragraph",
+                children: [
+                    "During rendering, if a",
+                    ' ',
+                    /*#__PURE__*/ _jsx("a", {
+                        className: "dev-tools-info-link",
+                        href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "Dynamic API"
+                    }),
+                    ' ',
+                    "or a",
+                    ' ',
+                    /*#__PURE__*/ _jsx("a", {
+                        className: "dev-tools-info-link",
+                        href: "https://nextjs.org/docs/app/api-reference/functions/fetch",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "fetch"
+                    }),
+                    ' ',
+                    "option of",
+                    ' ',
+                    /*#__PURE__*/ _jsx("code", {
+                        className: "dev-tools-info-code",
+                        children: "{ cache: 'no-store' }"
+                    }),
+                    ' ',
+                    "is discovered, Next.js will switch to dynamically rendering the whole route."
+                ]
+            })
+        ]
+    });
+}
+export function RouteInfo(param) {
+    let { routeType, isOpen, setIsOpen, setPreviousOpen, ...props } = param;
+    const isStaticRoute = routeType === 'Static';
+    const learnMoreLink = isStaticRoute ? 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default' : 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering';
+    return /*#__PURE__*/ _jsx(DevToolsInfo, {
+        ...props,
+        title: "" + routeType + " Route",
+        learnMoreLink: learnMoreLink,
+        setIsOpen: setIsOpen,
+        setPreviousOpen: setPreviousOpen,
+        children: isStaticRoute ? /*#__PURE__*/ _jsx(StaticRouteContent, {}) : /*#__PURE__*/ _jsx(DynamicRouteContent, {})
+    });
+}
+export const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = css(_templateObject());
+
+//# sourceMappingURL=route-info.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-info/route-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/route-info.tsx"],"sourcesContent":["import { DevToolsInfo } from './dev-tools-info'\nimport { noop as css } from '../../../../helpers/noop-template'\n\nfunction StaticRouteContent() {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"static\" since it will be prerendered during the build\n        time.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        With Static Rendering, routes are rendered at build time, or in the\n        background after{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          data revalidation\n        </a>\n        .\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Static rendering is useful when a route has data that is not\n        personalized to the user and can be known at build time, such as a\n        static blog post or a product page.\n      </p>\n    </article>\n  )\n}\n\nfunction DynamicRouteContent() {\n  return (\n    <article className=\"dev-tools-info-article\">\n      <p className=\"dev-tools-info-paragraph\">\n        The path{' '}\n        <code className=\"dev-tools-info-code\">{window.location.pathname}</code>{' '}\n        is marked as \"dynamic\" since it will be rendered for each user at{' '}\n        <strong>request time</strong>.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        Dynamic rendering is useful when a route has data that is personalized\n        to the user or has information that can only be known at request time,\n        such as cookies or the URL's search params.\n      </p>\n      <p className=\"dev-tools-info-paragraph\">\n        During rendering, if a{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Dynamic API\n        </a>{' '}\n        or a{' '}\n        <a\n          className=\"dev-tools-info-link\"\n          href=\"https://nextjs.org/docs/app/api-reference/functions/fetch\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          fetch\n        </a>{' '}\n        option of{' '}\n        <code className=\"dev-tools-info-code\">{`{ cache: 'no-store' }`}</code>{' '}\n        is discovered, Next.js will switch to dynamically rendering the whole\n        route.\n      </p>\n    </article>\n  )\n}\n\nexport function RouteInfo({\n  routeType,\n  isOpen,\n  setIsOpen,\n  setPreviousOpen,\n  ...props\n}: {\n  routeType: 'Static' | 'Dynamic'\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  const isStaticRoute = routeType === 'Static'\n  const learnMoreLink = isStaticRoute\n    ? 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default'\n    : 'https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering'\n  return (\n    <DevToolsInfo\n      {...props}\n      title={`${routeType} Route`}\n      learnMoreLink={learnMoreLink}\n      setIsOpen={setIsOpen}\n      setPreviousOpen={setPreviousOpen}\n    >\n      {isStaticRoute ? <StaticRouteContent /> : <DynamicRouteContent />}\n    </DevToolsInfo>\n  )\n}\n\nexport const DEV_TOOLS_INFO_ROUTE_INFO_STYLES = css`\n  .dev-tools-info-link {\n  }\n`\n"],"names":["DevToolsInfo","noop","css","StaticRouteContent","article","className","p","code","window","location","pathname","a","href","target","rel","DynamicRouteContent","strong","RouteInfo","routeType","isOpen","setIsOpen","setPreviousOpen","props","isStaticRoute","learnMoreLink","title","DEV_TOOLS_INFO_ROUTE_INFO_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,QAAQC,GAAG,QAAQ,oCAAmC;AAE/D,SAASC;IACP,qBACE,MAACC;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;;;0BAI9E,MAACJ;gBAAED,WAAU;;oBAA2B;oBAErB;kCACjB,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEG;;;0BAGN,KAACR;gBAAED,WAAU;0BAA2B;;;;AAO9C;AAEA,SAASU;IACP,qBACE,MAACX;QAAQC,WAAU;;0BACjB,MAACC;gBAAED,WAAU;;oBAA2B;oBAC7B;kCACT,KAACE;wBAAKF,WAAU;kCAAuBG,OAAOC,QAAQ,CAACC,QAAQ;;oBAAS;oBAAI;oBACV;kCAClE,KAACM;kCAAO;;oBAAqB;;;0BAE/B,KAACV;gBAAED,WAAU;0BAA2B;;0BAKxC,MAACC;gBAAED,WAAU;;oBAA2B;oBACf;kCACvB,KAACM;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACJ;kCACL,KAACH;wBACCN,WAAU;wBACVO,MAAK;wBACLC,QAAO;wBACPC,KAAI;kCACL;;oBAEI;oBAAI;oBACC;kCACV,KAACP;wBAAKF,WAAU;kCAAwB;;oBAA+B;oBAAI;;;;;AAMnF;AAEA,OAAO,SAASY,UAAU,KAazB;IAbyB,IAAA,EACxBC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAQJ,GAbyB;IAcxB,MAAMC,gBAAgBL,cAAc;IACpC,MAAMM,gBAAgBD,gBAClB,+GACA;IACJ,qBACE,KAACvB;QACE,GAAGsB,KAAK;QACTG,OAAO,AAAC,KAAEP,YAAU;QACpBM,eAAeA;QACfJ,WAAWA;QACXC,iBAAiBA;kBAEhBE,8BAAgB,KAACpB,wCAAwB,KAACY;;AAGjD;AAEA,OAAO,MAAMW,mCAAmCxB,uBAG/C"}

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

@@ -0,0 +1,184 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+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;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DevToolsInfo } from './dev-tools-info';
+import { CopyButton } from '../../../copy-button';
+import { noop as css } from '../../../../helpers/noop-template';
+export function TurbopackInfo(param) {
+    let { isOpen, setIsOpen, setPreviousOpen, ...props } = param;
+    return /*#__PURE__*/ _jsxs(DevToolsInfo, {
+        title: "Turbopack",
+        learnMoreLink: "https://nextjs.org/docs/app/api-reference/turbopack",
+        setIsOpen: setIsOpen,
+        setPreviousOpen: setPreviousOpen,
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs("article", {
+                className: "dev-tools-info-article",
+                children: [
+                    /*#__PURE__*/ _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__*/ _jsx("code", {
+                                className: "dev-tools-info-code",
+                                children: "pages"
+                            }),
+                            " and",
+                            ' ',
+                            /*#__PURE__*/ _jsx("code", {
+                                className: "dev-tools-info-code",
+                                children: "app"
+                            }),
+                            " directories for faster local development."
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "dev-tools-info-paragraph",
+                        children: [
+                            "To enable Turbopack, use the",
+                            ' ',
+                            /*#__PURE__*/ _jsx("code", {
+                                className: "dev-tools-info-code",
+                                children: "--turbopack"
+                            }),
+                            " flag when running the Next.js development server."
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "dev-tools-info-code-block-container",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "dev-tools-info-code-block",
+                    children: [
+                        /*#__PURE__*/ _jsx(CopyButton, {
+                            actionLabel: "Copy Next.js Turbopack Command",
+                            successLabel: "Next.js Turbopack Command Copied",
+                            content: '--turbopack',
+                            className: "dev-tools-info-copy-button"
+                        }),
+                        /*#__PURE__*/ _jsx("pre", {
+                            className: "dev-tools-info-code-block-pre",
+                            children: /*#__PURE__*/ _jsxs("code", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '  '
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '{'
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: [
+                                            '  ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"scripts"'
+                                            }),
+                                            ": ",
+                                            '{'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "dev-tools-info-code-block-line dev-tools-info-highlight",
+                                        children: [
+                                            '    ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"dev"'
+                                            }),
+                                            ":",
+                                            ' ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-value",
+                                                children: '"next dev --turbopack"'
+                                            }),
+                                            ","
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: [
+                                            '    ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"build"'
+                                            }),
+                                            ":",
+                                            ' ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-value",
+                                                children: '"next build"'
+                                            }),
+                                            ","
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: [
+                                            '    ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"start"'
+                                            }),
+                                            ":",
+                                            ' ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-value",
+                                                children: '"next start"'
+                                            }),
+                                            ","
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: [
+                                            '    ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-key",
+                                                children: '"lint"'
+                                            }),
+                                            ":",
+                                            ' ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "dev-tools-info-code-block-json-value",
+                                                children: '"next lint"'
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '  }'
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '}'
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "dev-tools-info-code-block-line",
+                                        children: '  '
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = css(_templateObject());
+
+//# sourceMappingURL=turbopack-info.js.map

package/dist/esm/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":["DevToolsInfo","CopyButton","noop","css","TurbopackInfo","isOpen","setIsOpen","setPreviousOpen","props","title","learnMoreLink","article","className","p","code","div","actionLabel","successLabel","content","pre","span","DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES"],"mappings":";;;;;;;;;;;AAAA,SAASA,YAAY,QAAQ,mBAAkB;AAC/C,SAASC,UAAU,QAAQ,uBAAsB;AACjD,SAASC,QAAQC,GAAG,QAAQ,oCAAmC;AAE/D,OAAO,SAASC,cAAc,KAW7B;IAX6B,IAAA,EAC5BC,MAAM,EACNC,SAAS,EACTC,eAAe,EACf,GAAGC,OAOJ,GAX6B;IAY5B,qBACE,MAACR;QACCS,OAAM;QACNC,eAAc;QACdJ,WAAWA;QACXC,iBAAiBA;QAChB,GAAGC,KAAK;;0BAET,MAACG;gBAAQC,WAAU;;kCACjB,MAACC;wBAAED,WAAU;;4BAA2B;4BAGV;0CAC5B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAY;4BAAK;0CACvD,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAU;;;kCAGlD,MAACC;wBAAED,WAAU;;4BAA2B;4BACT;0CAC7B,KAACE;gCAAKF,WAAU;0CAAsB;;4BAAkB;;;;;0BAK5D,KAACG;gBAAIH,WAAU;0BACb,cAAA,MAACG;oBAAIH,WAAU;;sCACb,KAACX;4BACCe,aAAY;4BACZC,cAAa;4BACbC,SAAS;4BACTN,WAAU;;sCAEZ,KAACO;4BAAIP,WAAU;sCACb,cAAA,MAACE;;kDACC,KAACC;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACJ;;;kDAEL,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;4CAEhD;;;kDAGT,MAACG;wCAAIH,WAAU;;4CACZ;0DACD,KAACQ;gDAAKR,WAAU;0DAAqC;;4CAE9C;4CACL;0DACF,KAACQ;gDAAKR,WAAU;0DAAuC;;;;kDAIzD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;kDACjD,KAACG;wCAAIH,WAAU;kDAAkC;;;;;;;;;;AAO/D;AAEA,OAAO,MAAMS,uCAAuClB,uBAgEnD"}

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

@@ -1,7 +1,8 @@
 import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
 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;
@@ -51,7 +52,7 @@ const SHORT_DURATION_MS = 150;
     return animatedDep;
 };
 export const NextLogo = /*#__PURE__*/ 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] = useState(hasError);
     const newErrorDetected = useAnimated(issueCount, {
@@ -71,11 +72,13 @@ export const NextLogo = /*#__PURE__*/ forwardRef(function NextLogo(param, propRe
         "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__*/ _jsx("style", {
-                children: css(_templateObject())
+                children: css(_templateObject(), disabled || isBuildError ? '8px' : 'calc(var(--padding) * 2)')
             }),
             /*#__PURE__*/ _jsx("div", {
                 "data-next-badge": true,
@@ -88,7 +91,7 @@ export const NextLogo = /*#__PURE__*/ forwardRef(function NextLogo(param, propRe
                 children: /*#__PURE__*/ _jsxs("div", {
                     ref: ref,
                     children: [
-                        /*#__PURE__*/ _jsx("button", {
+                        !disabled && /*#__PURE__*/ _jsx("button", {
                             ref: mergeRefs(triggerRef, propRef),
                             "data-next-mark": true,
                             "data-next-mark-loading": isLoading,
@@ -106,6 +109,10 @@ export const NextLogo = /*#__PURE__*/ forwardRef(function NextLogo(param, propRe
                                     "aria-label": "Open issues overlay",
                                     onClick: openErrorOverlay,
                                     children: [
+                                        disabled && /*#__PURE__*/ _jsx("div", {
+                                            "data-disabled-icon": true,
+                                            children: /*#__PURE__*/ _jsx(Warning, {})
+                                        }),
                                         /*#__PURE__*/ _jsx(AnimateCount, {
                                             animate: newErrorDetected,
                                             "data-issues-count-animation": true,
@@ -124,7 +131,7 @@ export const NextLogo = /*#__PURE__*/ forwardRef(function NextLogo(param, propRe
                                         })
                                     ]
                                 }),
-                                /*#__PURE__*/ _jsx("button", {
+                                !disabled && !isBuildError && /*#__PURE__*/ _jsx("button", {
                                     "data-issues-collapse": true,
                                     "aria-label": "Collapse issues badge",
                                     onClick: ()=>{
@@ -281,6 +288,21 @@ function NextMark(param) {
         ]
     });
 }
+function Warning() {
+    return /*#__PURE__*/ _jsx("svg", {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ _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"
+        })
+    });
+}
 export function Cross(props) {
     return /*#__PURE__*/ _jsx("svg", {
         width: "12",