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

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ComponentStackFrameRow", {
+    enumerable: true,
+    get: function() {
+        return ComponentStackFrameRow;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+const _useopenineditor = require("../../helpers/use-open-in-editor");
+const _hotlinkedtext = require("../../components/hot-linked-text");
+function EditorLink(param) {
+    let { children, componentStackFrame: { file, column, lineNumber } } = param;
+    const open = (0, _useopenineditor.useOpenInEditor)({
+        file,
+        column,
+        lineNumber
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        tabIndex: 10,
+        role: 'link',
+        onClick: open,
+        title: 'Click to open in your editor',
+        children: [
+            children,
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                        d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("polyline", {
+                        points: "15 3 21 3 21 9"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("line", {
+                        x1: "10",
+                        y1: "14",
+                        x2: "21",
+                        y2: "3"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function formatLineNumber(lineNumber, column) {
+    if (!column) {
+        return lineNumber;
+    }
+    return lineNumber + ":" + column;
+}
+function LocationLine(param) {
+    let { componentStackFrame } = param;
+    const { file, lineNumber, column } = componentStackFrame;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            file,
+            " ",
+            lineNumber ? "(" + formatLineNumber(lineNumber, column) + ")" : ''
+        ]
+    });
+}
+function SourceLocation(param) {
+    let { componentStackFrame } = param;
+    const { file, canOpenInEditor } = componentStackFrame;
+    if (file && canOpenInEditor) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(EditorLink, {
+            componentStackFrame: componentStackFrame,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(LocationLine, {
+                    componentStackFrame: componentStackFrame
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(LocationLine, {
+            componentStackFrame: componentStackFrame
+        })
+    });
+}
+function ComponentStackFrameRow(param) {
+    let { componentStackFrame } = param;
+    const { component } = componentStackFrame;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-nextjs-component-stack-frame": true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("h3", {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_hotlinkedtext.HotlinkedText, {
+                    text: component
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(SourceLocation, {
+                componentStackFrame: componentStackFrame
+            })
+        ]
+    });
+}
+
+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=ComponentStackFrameRow.js.map

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.tsx"],"sourcesContent":["import React from 'react'\nimport type { ComponentStackFrame } from '../../helpers/parse-component-stack'\nimport { useOpenInEditor } from '../../helpers/use-open-in-editor'\nimport { HotlinkedText } from '../../components/hot-linked-text'\n\nfunction EditorLink({\n  children,\n  componentStackFrame: { file, column, lineNumber },\n}: {\n  children: React.ReactNode\n  componentStackFrame: ComponentStackFrame\n}) {\n  const open = useOpenInEditor({\n    file,\n    column,\n    lineNumber,\n  })\n\n  return (\n    <div\n      tabIndex={10} // match CallStackFrame\n      role={'link'}\n      onClick={open}\n      title={'Click to open in your editor'}\n    >\n      {children}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path>\n        <polyline points=\"15 3 21 3 21 9\"></polyline>\n        <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\n      </svg>\n    </div>\n  )\n}\n\nfunction formatLineNumber(lineNumber: number, column: number | undefined) {\n  if (!column) {\n    return lineNumber\n  }\n\n  return `${lineNumber}:${column}`\n}\n\nfunction LocationLine({\n  componentStackFrame,\n}: {\n  componentStackFrame: ComponentStackFrame\n}) {\n  const { file, lineNumber, column } = componentStackFrame\n  return (\n    <>\n      {file} {lineNumber ? `(${formatLineNumber(lineNumber, column)})` : ''}\n    </>\n  )\n}\n\nfunction SourceLocation({\n  componentStackFrame,\n}: {\n  componentStackFrame: ComponentStackFrame\n}) {\n  const { file, canOpenInEditor } = componentStackFrame\n\n  if (file && canOpenInEditor) {\n    return (\n      <EditorLink componentStackFrame={componentStackFrame}>\n        <span>\n          <LocationLine componentStackFrame={componentStackFrame} />\n        </span>\n      </EditorLink>\n    )\n  }\n\n  return (\n    <div>\n      <LocationLine componentStackFrame={componentStackFrame} />\n    </div>\n  )\n}\n\nexport function ComponentStackFrameRow({\n  componentStackFrame,\n}: {\n  componentStackFrame: ComponentStackFrame\n}) {\n  const { component } = componentStackFrame\n\n  return (\n    <div data-nextjs-component-stack-frame>\n      <h3>\n        <HotlinkedText text={component} />\n      </h3>\n      <SourceLocation componentStackFrame={componentStackFrame} />\n    </div>\n  )\n}\n"],"names":["ComponentStackFrameRow","EditorLink","children","componentStackFrame","file","column","lineNumber","open","useOpenInEditor","div","tabIndex","role","onClick","title","svg","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","path","d","polyline","points","line","x1","y1","x2","y2","formatLineNumber","LocationLine","SourceLocation","canOpenInEditor","span","component","data-nextjs-component-stack-frame","h3","HotlinkedText","text"],"mappings":";;;;+BAwFgBA;;;eAAAA;;;;;gEAxFE;iCAEc;+BACF;AAE9B,SAASC,WAAW,KAMnB;IANmB,IAAA,EAClBC,QAAQ,EACRC,qBAAqB,EAAEC,IAAI,EAAEC,MAAM,EAAEC,UAAU,EAAE,EAIlD,GANmB;IAOlB,MAAMC,OAAOC,IAAAA,gCAAe,EAAC;QAC3BJ;QACAC;QACAC;IACF;IAEA,qBACE,sBAACG;QACCC,UAAU;QACVC,MAAM;QACNC,SAASL;QACTM,OAAO;;YAENX;0BACD,sBAACY;gBACCC,OAAM;gBACNC,SAAQ;gBACRC,MAAK;gBACLC,QAAO;gBACPC,aAAY;gBACZC,eAAc;gBACdC,gBAAe;;kCAEf,qBAACC;wBAAKC,GAAE;;kCACR,qBAACC;wBAASC,QAAO;;kCACjB,qBAACC;wBAAKC,IAAG;wBAAKC,IAAG;wBAAKC,IAAG;wBAAKC,IAAG;;;;;;AAIzC;AAEA,SAASC,iBAAiBzB,UAAkB,EAAED,MAA0B;IACtE,IAAI,CAACA,QAAQ;QACX,OAAOC;IACT;IAEA,OAAO,AAAGA,aAAW,MAAGD;AAC1B;AAEA,SAAS2B,aAAa,KAIrB;IAJqB,IAAA,EACpB7B,mBAAmB,EAGpB,GAJqB;IAKpB,MAAM,EAAEC,IAAI,EAAEE,UAAU,EAAED,MAAM,EAAE,GAAGF;IACrC,qBACE;;YACGC;YAAK;YAAEE,aAAa,AAAC,MAAGyB,iBAAiBzB,YAAYD,UAAQ,MAAK;;;AAGzE;AAEA,SAAS4B,eAAe,KAIvB;IAJuB,IAAA,EACtB9B,mBAAmB,EAGpB,GAJuB;IAKtB,MAAM,EAAEC,IAAI,EAAE8B,eAAe,EAAE,GAAG/B;IAElC,IAAIC,QAAQ8B,iBAAiB;QAC3B,qBACE,qBAACjC;YAAWE,qBAAqBA;sBAC/B,cAAA,qBAACgC;0BACC,cAAA,qBAACH;oBAAa7B,qBAAqBA;;;;IAI3C;IAEA,qBACE,qBAACM;kBACC,cAAA,qBAACuB;YAAa7B,qBAAqBA;;;AAGzC;AAEO,SAASH,uBAAuB,KAItC;IAJsC,IAAA,EACrCG,mBAAmB,EAGpB,GAJsC;IAKrC,MAAM,EAAEiC,SAAS,EAAE,GAAGjC;IAEtB,qBACE,sBAACM;QAAI4B,mCAAiC;;0BACpC,qBAACC;0BACC,cAAA,qBAACC,4BAAa;oBAACC,MAAMJ;;;0BAEvB,qBAACH;gBAAe9B,qBAAqBA;;;;AAG3C"}

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.d.ts

@@ -0,0 +1,56 @@
+import type { ComponentStackFrame } from '../../helpers/parse-component-stack';
+/**
+ *
+ * Format component stack into pseudo HTML
+ * component stack is an array of strings, e.g.: ['p', 'p', 'Page', ...]
+ *
+ * For html tags mismatch, it will render it for the code block
+ *
+ * ```
+ * <pre>
+ *  <code>{`
+ *    <Page>
+ *       <p red>
+ *         <p red>
+ *  `}</code>
+ * </pre>
+ * ```
+ *
+ * For text mismatch, it will render it for the code block
+ *
+ * ```
+ * <pre>
+ * <code>{`
+ *   <Page>
+ *     <p>
+ *       "Server Text" (green)
+ *       "Client Text" (red)
+ *     </p>
+ *   </Page>
+ * `}</code>
+ * ```
+ *
+ * For bad text under a tag it will render it for the code block,
+ * e.g. "Mismatched Text" under <p>
+ *
+ * ```
+ * <pre>
+ * <code>{`
+ *   <Page>
+ *     <div>
+ *       <p>
+ *         "Mismatched Text" (red)
+ *      </p>
+ *     </div>
+ *   </Page>
+ * `}</code>
+ * ```
+ *
+ */
+export declare function PseudoHtmlDiff({ componentStackFrames, firstContent, secondContent, hydrationMismatchType, reactOutputComponentDiff, ...props }: {
+    componentStackFrames: ComponentStackFrame[];
+    firstContent: string;
+    secondContent: string;
+    reactOutputComponentDiff: string | undefined;
+    hydrationMismatchType: 'tag' | 'text' | 'text-in-tag';
+} & React.HTMLAttributes<HTMLPreElement>): import("react/jsx-runtime").JSX.Element;

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.js

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PseudoHtmlDiff", {
+    enumerable: true,
+    get: function() {
+        return PseudoHtmlDiff;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _CollapseIcon = require("../../icons/CollapseIcon");
+function getAdjacentProps(isAdj) {
+    return {
+        'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj
+    };
+}
+function PseudoHtmlDiff(param) {
+    let { componentStackFrames, firstContent, secondContent, hydrationMismatchType, reactOutputComponentDiff, ...props } = param;
+    const isHtmlTagsWarning = hydrationMismatchType === 'tag';
+    const isReactHydrationDiff = !!reactOutputComponentDiff;
+    // For text mismatch, mismatched text will take 2 rows, so we display 4 rows of component stack
+    const MAX_NON_COLLAPSED_FRAMES = isHtmlTagsWarning ? 6 : 4;
+    const [isHtmlCollapsed, toggleCollapseHtml] = (0, _react.useState)(true);
+    const htmlComponents = (0, _react.useMemo)(()=>{
+        const componentStacks = [];
+        // React 19 unified mismatch
+        if (isReactHydrationDiff) {
+            let currentComponentIndex = componentStackFrames.length - 1;
+            const reactComponentDiffLines = reactOutputComponentDiff.split('\n');
+            const diffHtmlStack = [];
+            reactComponentDiffLines.forEach((line, index)=>{
+                let trimmedLine = line.trim();
+                const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-';
+                const spaces = ' '.repeat(Math.max(componentStacks.length * 2, 1));
+                if (isDiffLine) {
+                    const sign = trimmedLine[0];
+                    trimmedLine = trimmedLine.slice(1).trim() // trim spaces after sign
+                    ;
+                    diffHtmlStack.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                        "data-nextjs-container-errors-pseudo-html--diff": sign === '+' ? 'add' : 'remove',
+                        children: [
+                            sign,
+                            spaces,
+                            trimmedLine,
+                            '\n'
+                        ]
+                    }, 'comp-diff' + index));
+                } else if (currentComponentIndex >= 0) {
+                    const isUserLandComponent = trimmedLine.startsWith('<' + componentStackFrames[currentComponentIndex].component);
+                    // If it's matched userland component or it's ... we will keep the component stack in diff
+                    if (isUserLandComponent || trimmedLine === '...') {
+                        currentComponentIndex--;
+                        componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                            children: [
+                                spaces,
+                                trimmedLine,
+                                '\n'
+                            ]
+                        }, 'comp-diff' + index));
+                    } else if (!isHtmlCollapsed) {
+                        componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                            children: [
+                                spaces,
+                                trimmedLine,
+                                '\n'
+                            ]
+                        }, 'comp-diff' + index));
+                    }
+                } else if (!isHtmlCollapsed) {
+                    // In general, if it's not collapsed, show the whole diff
+                    componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                        children: [
+                            spaces,
+                            trimmedLine,
+                            '\n'
+                        ]
+                    }, 'comp-diff' + index));
+                }
+            });
+            return componentStacks.concat(diffHtmlStack);
+        }
+        const nestedHtmlStack = [];
+        const tagNames = isHtmlTagsWarning ? [
+            firstContent.replace(/<|>/g, ''),
+            secondContent.replace(/<|>/g, '')
+        ] : [];
+        let lastText = '';
+        const componentStack = componentStackFrames.map((frame)=>frame.component).reverse();
+        // [child index, parent index]
+        const matchedIndex = [
+            -1,
+            -1
+        ];
+        if (isHtmlTagsWarning) {
+            // Reverse search for the child tag
+            for(let i = componentStack.length - 1; i >= 0; i--){
+                if (componentStack[i] === tagNames[0]) {
+                    matchedIndex[0] = i;
+                    break;
+                }
+            }
+            // Start searching parent tag from child tag above
+            for(let i = matchedIndex[0] - 1; i >= 0; i--){
+                if (componentStack[i] === tagNames[1]) {
+                    matchedIndex[1] = i;
+                    break;
+                }
+            }
+        }
+        componentStack.forEach((component, index, componentList)=>{
+            const spaces = ' '.repeat(nestedHtmlStack.length * 2);
+            // When component is the server or client tag name, highlight it
+            const isHighlightedTag = isHtmlTagsWarning ? index === matchedIndex[0] || index === matchedIndex[1] : tagNames.includes(component);
+            const isAdjacentTag = isHighlightedTag || Math.abs(index - matchedIndex[0]) <= 1 || Math.abs(index - matchedIndex[1]) <= 1;
+            const isLastFewFrames = !isHtmlTagsWarning && index >= componentList.length - 6;
+            const adjProps = getAdjacentProps(isAdjacentTag);
+            if (isHtmlTagsWarning && isAdjacentTag || isLastFewFrames) {
+                const codeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                    children: [
+                        spaces,
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            ...adjProps,
+                            ...isHighlightedTag ? {
+                                'data-nextjs-container-errors-pseudo-html--tag-error': true
+                            } : undefined,
+                            children: "<" + component + ">\n"
+                        })
+                    ]
+                });
+                lastText = component;
+                const wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                    children: [
+                        codeLine,
+                        isHighlightedTag && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            "data-nextjs-container-errors-pseudo-html--hint": true,
+                            children: spaces + '^'.repeat(component.length + 2) + '\n'
+                        })
+                    ]
+                }, nestedHtmlStack.length);
+                nestedHtmlStack.push(wrappedCodeLine);
+            } else {
+                if (nestedHtmlStack.length >= MAX_NON_COLLAPSED_FRAMES && isHtmlCollapsed) {
+                    return;
+                }
+                if (!isHtmlCollapsed || isLastFewFrames) {
+                    nestedHtmlStack.push(/*#__PURE__*/ (0, _react.createElement)("span", {
+                        ...adjProps,
+                        key: nestedHtmlStack.length,
+                        children: [
+                            spaces,
+                            '<' + component + '>\n'
+                        ]
+                    }));
+                } else if (isHtmlCollapsed && lastText !== '...') {
+                    lastText = '...';
+                    nestedHtmlStack.push(/*#__PURE__*/ (0, _react.createElement)("span", {
+                        ...adjProps,
+                        key: nestedHtmlStack.length,
+                        children: [
+                            spaces,
+                            '...\n'
+                        ]
+                    }));
+                }
+            }
+        });
+        // Hydration mismatch: text or text-tag
+        if (!isHtmlTagsWarning) {
+            const spaces = ' '.repeat(nestedHtmlStack.length * 2);
+            let wrappedCodeLine;
+            if (hydrationMismatchType === 'text') {
+                // hydration type is "text", represent [server content, client content]
+                wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            "data-nextjs-container-errors-pseudo-html--diff": "remove",
+                            children: spaces + ('"' + firstContent + '"\n')
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            "data-nextjs-container-errors-pseudo-html--diff": "add",
+                            children: spaces + ('"' + secondContent + '"\n')
+                        })
+                    ]
+                }, nestedHtmlStack.length);
+            } else if (hydrationMismatchType === 'text-in-tag') {
+                // hydration type is "text-in-tag", represent [parent tag, mismatch content]
+                wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            "data-nextjs-container-errors-pseudo-html--tag-adjacent": true,
+                            children: spaces + ("<" + secondContent + ">\n")
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            "data-nextjs-container-errors-pseudo-html--diff": "remove",
+                            children: spaces + ('  "' + firstContent + '"\n')
+                        })
+                    ]
+                }, nestedHtmlStack.length);
+            }
+            nestedHtmlStack.push(wrappedCodeLine);
+        }
+        return nestedHtmlStack;
+    }, [
+        componentStackFrames,
+        isHtmlCollapsed,
+        firstContent,
+        secondContent,
+        isHtmlTagsWarning,
+        hydrationMismatchType,
+        MAX_NON_COLLAPSED_FRAMES,
+        isReactHydrationDiff,
+        reactOutputComponentDiff
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-nextjs-container-errors-pseudo-html": true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                tabIndex: 10,
+                "data-nextjs-container-errors-pseudo-html-collapse": true,
+                onClick: ()=>toggleCollapseHtml(!isHtmlCollapsed),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollapseIcon.CollapseIcon, {
+                    collapsed: isHtmlCollapsed
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
+                    children: htmlComponents
+                })
+            })
+        ]
+    });
+}
+
+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=component-stack-pseudo-html.js.map

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/component-stack-pseudo-html.tsx"],"sourcesContent":["import { useMemo, Fragment, useState } from 'react'\nimport type { ComponentStackFrame } from '../../helpers/parse-component-stack'\nimport { CollapseIcon } from '../../icons/CollapseIcon'\n\nfunction getAdjacentProps(isAdj: boolean) {\n  return { 'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj }\n}\n\n/**\n *\n * Format component stack into pseudo HTML\n * component stack is an array of strings, e.g.: ['p', 'p', 'Page', ...]\n *\n * For html tags mismatch, it will render it for the code block\n *\n * ```\n * <pre>\n *  <code>{`\n *    <Page>\n *       <p red>\n *         <p red>\n *  `}</code>\n * </pre>\n * ```\n *\n * For text mismatch, it will render it for the code block\n *\n * ```\n * <pre>\n * <code>{`\n *   <Page>\n *     <p>\n *       \"Server Text\" (green)\n *       \"Client Text\" (red)\n *     </p>\n *   </Page>\n * `}</code>\n * ```\n *\n * For bad text under a tag it will render it for the code block,\n * e.g. \"Mismatched Text\" under <p>\n *\n * ```\n * <pre>\n * <code>{`\n *   <Page>\n *     <div>\n *       <p>\n *         \"Mismatched Text\" (red)\n *      </p>\n *     </div>\n *   </Page>\n * `}</code>\n * ```\n *\n */\nexport function PseudoHtmlDiff({\n  componentStackFrames,\n  firstContent,\n  secondContent,\n  hydrationMismatchType,\n  reactOutputComponentDiff,\n  ...props\n}: {\n  componentStackFrames: ComponentStackFrame[]\n  firstContent: string\n  secondContent: string\n  reactOutputComponentDiff: string | undefined\n  hydrationMismatchType: 'tag' | 'text' | 'text-in-tag'\n} & React.HTMLAttributes<HTMLPreElement>) {\n  const isHtmlTagsWarning = hydrationMismatchType === 'tag'\n  const isReactHydrationDiff = !!reactOutputComponentDiff\n\n  // For text mismatch, mismatched text will take 2 rows, so we display 4 rows of component stack\n  const MAX_NON_COLLAPSED_FRAMES = isHtmlTagsWarning ? 6 : 4\n  const [isHtmlCollapsed, toggleCollapseHtml] = useState(true)\n\n  const htmlComponents = useMemo(() => {\n    const componentStacks: React.ReactNode[] = []\n    // React 19 unified mismatch\n    if (isReactHydrationDiff) {\n      let currentComponentIndex = componentStackFrames.length - 1\n      const reactComponentDiffLines = reactOutputComponentDiff.split('\\n')\n      const diffHtmlStack: React.ReactNode[] = []\n      reactComponentDiffLines.forEach((line, index) => {\n        let trimmedLine = line.trim()\n        const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-'\n        const spaces = ' '.repeat(Math.max(componentStacks.length * 2, 1))\n\n        if (isDiffLine) {\n          const sign = trimmedLine[0]\n          trimmedLine = trimmedLine.slice(1).trim() // trim spaces after sign\n          diffHtmlStack.push(\n            <span\n              key={'comp-diff' + index}\n              data-nextjs-container-errors-pseudo-html--diff={\n                sign === '+' ? 'add' : 'remove'\n              }\n            >\n              {sign}\n              {spaces}\n              {trimmedLine}\n              {'\\n'}\n            </span>\n          )\n        } else if (currentComponentIndex >= 0) {\n          const isUserLandComponent = trimmedLine.startsWith(\n            '<' + componentStackFrames[currentComponentIndex].component\n          )\n          // If it's matched userland component or it's ... we will keep the component stack in diff\n          if (isUserLandComponent || trimmedLine === '...') {\n            currentComponentIndex--\n            componentStacks.push(\n              <span key={'comp-diff' + index}>\n                {spaces}\n                {trimmedLine}\n                {'\\n'}\n              </span>\n            )\n          } else if (!isHtmlCollapsed) {\n            componentStacks.push(\n              <span key={'comp-diff' + index}>\n                {spaces}\n                {trimmedLine}\n                {'\\n'}\n              </span>\n            )\n          }\n        } else if (!isHtmlCollapsed) {\n          // In general, if it's not collapsed, show the whole diff\n          componentStacks.push(\n            <span key={'comp-diff' + index}>\n              {spaces}\n              {trimmedLine}\n              {'\\n'}\n            </span>\n          )\n        }\n      })\n      return componentStacks.concat(diffHtmlStack)\n    }\n\n    const nestedHtmlStack: React.ReactNode[] = []\n    const tagNames = isHtmlTagsWarning\n      ? // tags could have < or > in the name, so we always remove them to match\n        [firstContent.replace(/<|>/g, ''), secondContent.replace(/<|>/g, '')]\n      : []\n\n    let lastText = ''\n\n    const componentStack = componentStackFrames\n      .map((frame) => frame.component)\n      .reverse()\n\n    // [child index, parent index]\n    const matchedIndex = [-1, -1]\n    if (isHtmlTagsWarning) {\n      // Reverse search for the child tag\n      for (let i = componentStack.length - 1; i >= 0; i--) {\n        if (componentStack[i] === tagNames[0]) {\n          matchedIndex[0] = i\n          break\n        }\n      }\n      // Start searching parent tag from child tag above\n      for (let i = matchedIndex[0] - 1; i >= 0; i--) {\n        if (componentStack[i] === tagNames[1]) {\n          matchedIndex[1] = i\n          break\n        }\n      }\n    }\n\n    componentStack.forEach((component, index, componentList) => {\n      const spaces = ' '.repeat(nestedHtmlStack.length * 2)\n\n      // When component is the server or client tag name, highlight it\n      const isHighlightedTag = isHtmlTagsWarning\n        ? index === matchedIndex[0] || index === matchedIndex[1]\n        : tagNames.includes(component)\n      const isAdjacentTag =\n        isHighlightedTag ||\n        Math.abs(index - matchedIndex[0]) <= 1 ||\n        Math.abs(index - matchedIndex[1]) <= 1\n\n      const isLastFewFrames =\n        !isHtmlTagsWarning && index >= componentList.length - 6\n\n      const adjProps = getAdjacentProps(isAdjacentTag)\n\n      if ((isHtmlTagsWarning && isAdjacentTag) || isLastFewFrames) {\n        const codeLine = (\n          <span>\n            {spaces}\n            <span\n              {...adjProps}\n              {...{\n                ...(isHighlightedTag\n                  ? {\n                      'data-nextjs-container-errors-pseudo-html--tag-error':\n                        true,\n                    }\n                  : undefined),\n              }}\n            >\n              {`<${component}>\\n`}\n            </span>\n          </span>\n        )\n        lastText = component\n\n        const wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            {codeLine}\n            {/* Add ^^^^ to the target tags used for snapshots but not displayed for users */}\n            {isHighlightedTag && (\n              <span data-nextjs-container-errors-pseudo-html--hint>\n                {spaces + '^'.repeat(component.length + 2) + '\\n'}\n              </span>\n            )}\n          </Fragment>\n        )\n        nestedHtmlStack.push(wrappedCodeLine)\n      } else {\n        if (\n          nestedHtmlStack.length >= MAX_NON_COLLAPSED_FRAMES &&\n          isHtmlCollapsed\n        ) {\n          return\n        }\n\n        if (!isHtmlCollapsed || isLastFewFrames) {\n          nestedHtmlStack.push(\n            <span {...adjProps} key={nestedHtmlStack.length}>\n              {spaces}\n              {'<' + component + '>\\n'}\n            </span>\n          )\n        } else if (isHtmlCollapsed && lastText !== '...') {\n          lastText = '...'\n          nestedHtmlStack.push(\n            <span {...adjProps} key={nestedHtmlStack.length}>\n              {spaces}\n              {'...\\n'}\n            </span>\n          )\n        }\n      }\n    })\n    // Hydration mismatch: text or text-tag\n    if (!isHtmlTagsWarning) {\n      const spaces = ' '.repeat(nestedHtmlStack.length * 2)\n      let wrappedCodeLine\n      if (hydrationMismatchType === 'text') {\n        // hydration type is \"text\", represent [server content, client content]\n        wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            <span data-nextjs-container-errors-pseudo-html--diff=\"remove\">\n              {spaces + `\"${firstContent}\"\\n`}\n            </span>\n            <span data-nextjs-container-errors-pseudo-html--diff=\"add\">\n              {spaces + `\"${secondContent}\"\\n`}\n            </span>\n          </Fragment>\n        )\n      } else if (hydrationMismatchType === 'text-in-tag') {\n        // hydration type is \"text-in-tag\", represent [parent tag, mismatch content]\n        wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            <span data-nextjs-container-errors-pseudo-html--tag-adjacent>\n              {spaces + `<${secondContent}>\\n`}\n            </span>\n            <span data-nextjs-container-errors-pseudo-html--diff=\"remove\">\n              {spaces + `  \"${firstContent}\"\\n`}\n            </span>\n          </Fragment>\n        )\n      }\n      nestedHtmlStack.push(wrappedCodeLine)\n    }\n\n    return nestedHtmlStack\n  }, [\n    componentStackFrames,\n    isHtmlCollapsed,\n    firstContent,\n    secondContent,\n    isHtmlTagsWarning,\n    hydrationMismatchType,\n    MAX_NON_COLLAPSED_FRAMES,\n    isReactHydrationDiff,\n    reactOutputComponentDiff,\n  ])\n\n  return (\n    <div data-nextjs-container-errors-pseudo-html>\n      <button\n        tabIndex={10} // match CallStackFrame\n        data-nextjs-container-errors-pseudo-html-collapse\n        onClick={() => toggleCollapseHtml(!isHtmlCollapsed)}\n      >\n        <CollapseIcon collapsed={isHtmlCollapsed} />\n      </button>\n      <pre {...props}>\n        <code>{htmlComponents}</code>\n      </pre>\n    </div>\n  )\n}\n"],"names":["PseudoHtmlDiff","getAdjacentProps","isAdj","componentStackFrames","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","props","isHtmlTagsWarning","isReactHydrationDiff","MAX_NON_COLLAPSED_FRAMES","isHtmlCollapsed","toggleCollapseHtml","useState","htmlComponents","useMemo","componentStacks","currentComponentIndex","length","reactComponentDiffLines","split","diffHtmlStack","forEach","line","index","trimmedLine","trim","isDiffLine","spaces","repeat","Math","max","sign","slice","push","span","data-nextjs-container-errors-pseudo-html--diff","isUserLandComponent","startsWith","component","concat","nestedHtmlStack","tagNames","replace","lastText","componentStack","map","frame","reverse","matchedIndex","i","componentList","isHighlightedTag","includes","isAdjacentTag","abs","isLastFewFrames","adjProps","codeLine","undefined","wrappedCodeLine","Fragment","data-nextjs-container-errors-pseudo-html--hint","key","data-nextjs-container-errors-pseudo-html--tag-adjacent","div","data-nextjs-container-errors-pseudo-html","button","tabIndex","data-nextjs-container-errors-pseudo-html-collapse","onClick","CollapseIcon","collapsed","pre","code"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.d.ts

@@ -0,0 +1,6 @@
+import type { ReadyRuntimeError } from '../../helpers/get-error-by-type';
+export type RuntimeErrorProps = {
+    error: ReadyRuntimeError;
+};
+export declare function RuntimeError({ error }: RuntimeErrorProps): import("react/jsx-runtime").JSX.Element;
+export declare const styles: string;

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    RuntimeError: null,
+    styles: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    RuntimeError: function() {
+        return RuntimeError;
+    },
+    styles: function() {
+        return styles;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _CodeFrame = require("../../components/CodeFrame");
+const _nooptemplate = require("../../helpers/noop-template");
+const _CallStackFrame = require("./CallStackFrame");
+function _templateObject() {
+    const data = _tagged_template_literal_loose._([
+        "\n  [data-nextjs-call-stack-frame]:not(:last-child),\n  [data-nextjs-component-stack-frame]:not(:last-child) {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-expand-ignore-button]:focus:not(:focus-visible),\n  [data-expand-ignore-button] {\n    background: none;\n    border: none;\n    color: var(--color-font);\n    cursor: pointer;\n    font-size: var(--size-font);\n    margin: var(--size-gap) 0;\n    padding: 0;\n    text-decoration: underline;\n    outline: none;\n  }\n\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n\n  [data-nextjs-call-stack-frame] > h3,\n  [data-nextjs-component-stack-frame] > h3 {\n    margin-top: 0;\n    margin-bottom: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font);\n  }\n  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n    color: #666;\n    display: inline-block;\n  }\n  [data-nextjs-call-stack-frame] > div,\n  [data-nextjs-component-stack-frame] > div {\n    display: flex;\n    align-items: center;\n    padding-left: calc(var(--size-gap) + var(--size-gap-half));\n    font-size: var(--size-font-small);\n    color: #999;\n  }\n  [data-nextjs-call-stack-frame] > div > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n    flex-shrink: 0;\n    display: none;\n  }\n\n  [data-nextjs-call-stack-frame] > div[data-has-source],\n  [data-nextjs-component-stack-frame] > [role='link'] {\n    cursor: pointer;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n  [data-nextjs-component-stack-frame] > [role='link']:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    display: unset;\n  }\n\n  [data-nextjs-call-stack-framework-icon] {\n    margin-right: var(--size-gap);\n  }\n  [data-nextjs-call-stack-framework-icon='next'] > mask {\n    mask-type: alpha;\n  }\n  [data-nextjs-call-stack-framework-icon='react'] {\n    color: rgb(20, 158, 202);\n  }\n  [data-nextjs-collapsed-call-stack-details][open]\n    [data-nextjs-call-stack-chevron-icon] {\n    transform: rotate(90deg);\n  }\n  [data-nextjs-collapsed-call-stack-details] summary {\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--size-gap);\n    list-style: none;\n  }\n  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n    display: none;\n  }\n\n  [data-nextjs-collapsed-call-stack-details] h3 {\n    color: #666;\n  }\n  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse] {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    color: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    color: var(--color-ansi-green);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    color: var(--color-ansi-red);\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\n  }\n  /* hide but text are still accessible in DOM */\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function RuntimeError(param) {
+    let { error } = param;
+    const [isIgnoredExpanded, setIsIgnoredExpanded] = _react.useState(false);
+    const { firstFrame, allLeadingFrames, trailingCallStackFrames, displayedFramesCount } = _react.useMemo(()=>{
+        const filteredFrames = error.frames.filter((frame)=>isIgnoredExpanded ? true : !frame.ignored);
+        const firstFirstPartyFrameIndex = filteredFrames.findIndex((entry)=>!entry.ignored && Boolean(entry.originalCodeFrame) && Boolean(entry.originalStackFrame));
+        var _filteredFrames_firstFirstPartyFrameIndex;
+        return {
+            displayedFramesCount: filteredFrames.length,
+            firstFrame: (_filteredFrames_firstFirstPartyFrameIndex = filteredFrames[firstFirstPartyFrameIndex]) != null ? _filteredFrames_firstFirstPartyFrameIndex : null,
+            allLeadingFrames: firstFirstPartyFrameIndex < 0 ? [] : filteredFrames.slice(0, firstFirstPartyFrameIndex),
+            trailingCallStackFrames: filteredFrames.slice(firstFirstPartyFrameIndex + 1)
+        };
+    }, [
+        error.frames,
+        isIgnoredExpanded
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
+        children: [
+            firstFrame ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
+                        children: "Source"
+                    }),
+                    allLeadingFrames.map((frame, frameIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_CallStackFrame.CallStackFrame, {
+                            frame: frame
+                        }, "call-stack-leading-" + frameIndex)),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_CodeFrame.CodeFrame, {
+                        stackFrame: firstFrame.originalStackFrame,
+                        codeFrame: firstFrame.originalCodeFrame
+                    })
+                ]
+            }) : undefined,
+            trailingCallStackFrames.map((frame, frameIndex)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_CallStackFrame.CallStackFrame, {
+                    frame: frame
+                }, "call-stack-leading-" + frameIndex)),
+            // if the default displayed ignored frames count is equal equal to the total frames count, hide the button
+            displayedFramesCount === error.frames.length && !isIgnoredExpanded ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                "data-expand-ignore-button": isIgnoredExpanded,
+                onClick: ()=>setIsIgnoredExpanded(!isIgnoredExpanded),
+                children: "" + (isIgnoredExpanded ? 'Hide' : 'Show') + " ignored frames"
+            })
+        ]
+    });
+}
+const 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=index.js.map

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { CodeFrame } from '../../components/CodeFrame'\nimport type { ReadyRuntimeError } from '../../helpers/get-error-by-type'\nimport { noop as css } from '../../helpers/noop-template'\nimport { CallStackFrame } from './CallStackFrame'\n\nexport type RuntimeErrorProps = { error: ReadyRuntimeError }\n\nexport function RuntimeError({ error }: RuntimeErrorProps) {\n  const [isIgnoredExpanded, setIsIgnoredExpanded] = React.useState(false)\n  const {\n    firstFrame,\n    allLeadingFrames,\n    trailingCallStackFrames,\n    displayedFramesCount,\n  } = React.useMemo(() => {\n    const filteredFrames = error.frames.filter((frame) =>\n      isIgnoredExpanded ? true : !frame.ignored\n    )\n\n    const firstFirstPartyFrameIndex = filteredFrames.findIndex(\n      (entry) =>\n        !entry.ignored &&\n        Boolean(entry.originalCodeFrame) &&\n        Boolean(entry.originalStackFrame)\n    )\n\n    return {\n      displayedFramesCount: filteredFrames.length,\n      firstFrame: filteredFrames[firstFirstPartyFrameIndex] ?? null,\n      allLeadingFrames:\n        firstFirstPartyFrameIndex < 0\n          ? []\n          : filteredFrames.slice(0, firstFirstPartyFrameIndex),\n      trailingCallStackFrames: filteredFrames.slice(\n        firstFirstPartyFrameIndex + 1\n      ),\n    }\n  }, [error.frames, isIgnoredExpanded])\n\n  return (\n    <React.Fragment>\n      {firstFrame ? (\n        <>\n          <h2>Source</h2>\n          {allLeadingFrames.map((frame, frameIndex) => (\n            <CallStackFrame\n              key={`call-stack-leading-${frameIndex}`}\n              frame={frame}\n            />\n          ))}\n          <CodeFrame\n            stackFrame={firstFrame.originalStackFrame!}\n            codeFrame={firstFrame.originalCodeFrame!}\n          />\n        </>\n      ) : undefined}\n\n      {trailingCallStackFrames.map((frame, frameIndex) => (\n        <CallStackFrame\n          key={`call-stack-leading-${frameIndex}`}\n          frame={frame}\n        />\n      ))}\n      {\n        // if the default displayed ignored frames count is equal equal to the total frames count, hide the button\n        displayedFramesCount === error.frames.length &&\n        !isIgnoredExpanded ? null : (\n          <button\n            data-expand-ignore-button={isIgnoredExpanded}\n            onClick={() => setIsIgnoredExpanded(!isIgnoredExpanded)}\n          >\n            {`${isIgnoredExpanded ? 'Hide' : 'Show'} ignored frames`}\n          </button>\n        )\n      }\n    </React.Fragment>\n  )\n}\n\nexport const styles = css`\n  [data-nextjs-call-stack-frame]:not(:last-child),\n  [data-nextjs-component-stack-frame]:not(:last-child) {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-expand-ignore-button]:focus:not(:focus-visible),\n  [data-expand-ignore-button] {\n    background: none;\n    border: none;\n    color: var(--color-font);\n    cursor: pointer;\n    font-size: var(--size-font);\n    margin: var(--size-gap) 0;\n    padding: 0;\n    text-decoration: underline;\n    outline: none;\n  }\n\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n\n  [data-nextjs-call-stack-frame] > h3,\n  [data-nextjs-component-stack-frame] > h3 {\n    margin-top: 0;\n    margin-bottom: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font);\n  }\n  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n    color: #666;\n    display: inline-block;\n  }\n  [data-nextjs-call-stack-frame] > div,\n  [data-nextjs-component-stack-frame] > div {\n    display: flex;\n    align-items: center;\n    padding-left: calc(var(--size-gap) + var(--size-gap-half));\n    font-size: var(--size-font-small);\n    color: #999;\n  }\n  [data-nextjs-call-stack-frame] > div > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n    flex-shrink: 0;\n    display: none;\n  }\n\n  [data-nextjs-call-stack-frame] > div[data-has-source],\n  [data-nextjs-component-stack-frame] > [role='link'] {\n    cursor: pointer;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n  [data-nextjs-component-stack-frame] > [role='link']:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    display: unset;\n  }\n\n  [data-nextjs-call-stack-framework-icon] {\n    margin-right: var(--size-gap);\n  }\n  [data-nextjs-call-stack-framework-icon='next'] > mask {\n    mask-type: alpha;\n  }\n  [data-nextjs-call-stack-framework-icon='react'] {\n    color: rgb(20, 158, 202);\n  }\n  [data-nextjs-collapsed-call-stack-details][open]\n    [data-nextjs-call-stack-chevron-icon] {\n    transform: rotate(90deg);\n  }\n  [data-nextjs-collapsed-call-stack-details] summary {\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--size-gap);\n    list-style: none;\n  }\n  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n    display: none;\n  }\n\n  [data-nextjs-collapsed-call-stack-details] h3 {\n    color: #666;\n  }\n  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse] {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    color: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    color: var(--color-ansi-green);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    color: var(--color-ansi-red);\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\n  }\n  /* hide but text are still accessible in DOM */\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n`\n"],"names":["RuntimeError","styles","error","isIgnoredExpanded","setIsIgnoredExpanded","React","useState","firstFrame","allLeadingFrames","trailingCallStackFrames","displayedFramesCount","useMemo","filteredFrames","frames","filter","frame","ignored","firstFirstPartyFrameIndex","findIndex","entry","Boolean","originalCodeFrame","originalStackFrame","length","slice","Fragment","h2","map","frameIndex","CallStackFrame","CodeFrame","stackFrame","codeFrame","undefined","button","data-expand-ignore-button","onClick","css"],"mappings":";;;;;;;;;;;;;;;IAQgBA,YAAY;eAAZA;;IAwEHC,MAAM;eAANA;;;;;;iEAhFU;2BACG;8BAEE;gCACG;;;;;;;;;;AAIxB,SAASD,aAAa,KAA4B;IAA5B,IAAA,EAAEE,KAAK,EAAqB,GAA5B;IAC3B,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,OAAMC,QAAQ,CAAC;IACjE,MAAM,EACJC,UAAU,EACVC,gBAAgB,EAChBC,uBAAuB,EACvBC,oBAAoB,EACrB,GAAGL,OAAMM,OAAO,CAAC;QAChB,MAAMC,iBAAiBV,MAAMW,MAAM,CAACC,MAAM,CAAC,CAACC,QAC1CZ,oBAAoB,OAAO,CAACY,MAAMC,OAAO;QAG3C,MAAMC,4BAA4BL,eAAeM,SAAS,CACxD,CAACC,QACC,CAACA,MAAMH,OAAO,IACdI,QAAQD,MAAME,iBAAiB,KAC/BD,QAAQD,MAAMG,kBAAkB;YAKtBV;QAFd,OAAO;YACLF,sBAAsBE,eAAeW,MAAM;YAC3ChB,YAAYK,CAAAA,4CAAAA,cAAc,CAACK,0BAA0B,YAAzCL,4CAA6C;YACzDJ,kBACES,4BAA4B,IACxB,EAAE,GACFL,eAAeY,KAAK,CAAC,GAAGP;YAC9BR,yBAAyBG,eAAeY,KAAK,CAC3CP,4BAA4B;QAEhC;IACF,GAAG;QAACf,MAAMW,MAAM;QAAEV;KAAkB;IAEpC,qBACE,sBAACE,OAAMoB,QAAQ;;YACZlB,2BACC;;kCACE,qBAACmB;kCAAG;;oBACHlB,iBAAiBmB,GAAG,CAAC,CAACZ,OAAOa,2BAC5B,qBAACC,8BAAc;4BAEbd,OAAOA;2BADF,AAAC,wBAAqBa;kCAI/B,qBAACE,oBAAS;wBACRC,YAAYxB,WAAWe,kBAAkB;wBACzCU,WAAWzB,WAAWc,iBAAiB;;;iBAGzCY;YAEHxB,wBAAwBkB,GAAG,CAAC,CAACZ,OAAOa,2BACnC,qBAACC,8BAAc;oBAEbd,OAAOA;mBADF,AAAC,wBAAqBa;YAK7B,0GAA0G;YAC1GlB,yBAAyBR,MAAMW,MAAM,CAACU,MAAM,IAC5C,CAACpB,oBAAoB,qBACnB,qBAAC+B;gBACCC,6BAA2BhC;gBAC3BiC,SAAS,IAAMhC,qBAAqB,CAACD;0BAEpC,AAAC,KAAEA,CAAAA,oBAAoB,SAAS,MAAK,IAAE;;;;AAMpD;AAEO,MAAMF,aAASoC,kBAAG"}

package/dist/client/components/react-dev-overlay/_experimental/internal/container/StaticIndicator.d.ts

@@ -0,0 +1,4 @@
+import type { Dispatcher } from '../../../app/hot-reloader-client';
+export declare function StaticIndicator({ dispatcher }: {
+    dispatcher?: Dispatcher;
+}): import("react/jsx-runtime").JSX.Element;