From 487a1501d6af67ba37a0f24f38027aac7c9c7aeb Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 12 Jun 2025 21:12:01 +0200
Subject: [PATCH 1/3] [devtools] port overlay baackdrop out of overlay

---
 .../error-overlay-layout/error-overlay-layout.tsx  |  4 +++-
 .../dev-overlay/components/overlay/index.tsx       |  1 +
 .../components/overlay/overlay-backdrop.tsx        | 14 ++++++++++++++
 .../dev-overlay/components/overlay/overlay.tsx     |  5 -----
 .../next-devtools/dev-overlay/container/errors.tsx |  8 ++++++--
 5 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx

diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.tsx
index 89e8db2248c..350cdc18c0b 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-layout/error-overlay-layout.tsx
@@ -37,6 +37,7 @@ import { EnvironmentNameLabel } from '../environment-name-label/environment-name
 import { useFocusTrap } from '../dev-tools-indicator/utils'
 import { Fader } from '../../fader'
 import { Resizer } from '../../resizer'
+import { OverlayBackdrop } from '../../overlay'
 
 export interface ErrorOverlayLayoutProps extends ErrorBaseProps {
   errorMessage: ErrorMessageType
@@ -109,7 +110,8 @@ export function ErrorOverlayLayout({
   }
 
   return (
-    <ErrorOverlayOverlay fixed={isBuildError} {...animationProps}>
+    <ErrorOverlayOverlay {...animationProps}>
+      <OverlayBackdrop fixed={isBuildError} />
       <div
         data-nextjs-dialog-root
         onTransitionEnd={onTransitionEnd}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/overlay/index.tsx b/packages/next/src/next-devtools/dev-overlay/components/overlay/index.tsx
index 73162459e38..6bae1fb57ec 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/overlay/index.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/overlay/index.tsx
@@ -1 +1,2 @@
 export { Overlay } from './overlay'
+export { OverlayBackdrop } from './overlay-backdrop'
diff --git a/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx b/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx
new file mode 100644
index 00000000000..3dd24fff12f
--- /dev/null
+++ b/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx
@@ -0,0 +1,14 @@
+export type OverlayBackDropProps = {
+  className?: string
+  fixed?: boolean
+}
+
+export function OverlayBackdrop({ fixed, ...props }: OverlayBackDropProps) {
+  return (
+    <div
+      data-nextjs-dialog-backdrop
+      data-nextjs-dialog-backdrop-fixed={fixed ? true : undefined}
+      {...props}
+    />
+  )
+}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay.tsx b/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay.tsx
index 754b1817b56..af79cca04d0 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay.tsx
@@ -10,7 +10,6 @@ export type OverlayProps = {
 const Overlay: React.FC<OverlayProps> = function Overlay({
   className,
   children,
-  fixed,
   ...props
 }) {
   React.useEffect(() => {
@@ -22,10 +21,6 @@ const Overlay: React.FC<OverlayProps> = function Overlay({
 
   return (
     <div data-nextjs-dialog-overlay className={className} {...props}>
-      <div
-        data-nextjs-dialog-backdrop
-        data-nextjs-dialog-backdrop-fixed={fixed ? true : undefined}
-      />
       {children}
     </div>
   )
diff --git a/packages/next/src/next-devtools/dev-overlay/container/errors.tsx b/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
index d2447cc00ee..4adf765c2c8 100644
--- a/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo, useRef, Suspense } from 'react'
 import type { DebugInfo } from '../../shared/types'
-import { Overlay } from '../components/overlay'
+import { Overlay, OverlayBackdrop } from '../components/overlay'
 import { RuntimeError } from './runtime-error'
 import { getErrorSource } from '../../../shared/lib/error-source'
 import { HotlinkedText } from '../components/hot-linked-text'
@@ -139,7 +139,11 @@ export function Errors({
 
   if (isLoading) {
     // TODO: better loading state
-    return <Overlay />
+    return (
+      <Overlay>
+        <OverlayBackdrop />
+      </Overlay>
+    )
   }
 
   if (!activeError) {

From 0097dfebc0528025170d52a150bc66b8df936bfe Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 12 Jun 2025 21:15:37 +0200
Subject: [PATCH 2/3] div props

---
 .../dev-overlay/components/overlay/overlay-backdrop.tsx        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx b/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx
index 3dd24fff12f..07a8b60609b 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx
@@ -1,7 +1,6 @@
 export type OverlayBackDropProps = {
-  className?: string
   fixed?: boolean
-}
+} & React.HTMLAttributes<HTMLDivElement>
 
 export function OverlayBackdrop({ fixed, ...props }: OverlayBackDropProps) {
   return (

From 70dc8c4aa65bb55043c208722900e5d0a7085b14 Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Tue, 17 Jun 2025 17:10:27 +0200
Subject: [PATCH 3/3] OverlayBackDropProps -> OverlayBackdropProps

---
 .../dev-overlay/components/overlay/overlay-backdrop.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx b/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx
index 07a8b60609b..403ed5d17c1 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/overlay/overlay-backdrop.tsx
@@ -1,8 +1,8 @@
-export type OverlayBackDropProps = {
+export type OverlayBackdropProps = {
   fixed?: boolean
 } & React.HTMLAttributes<HTMLDivElement>
 
-export function OverlayBackdrop({ fixed, ...props }: OverlayBackDropProps) {
+export function OverlayBackdrop({ fixed, ...props }: OverlayBackdropProps) {
   return (
     <div
       data-nextjs-dialog-backdrop