[DevOverlay] Implement New Overlay Layout with Bottom Stacks

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Dialog/styles.ts

@@ -2,16 +2,17 @@ import { noop as css } from '../../helpers/noop-template'
 
 const styles = css`
   [data-nextjs-dialog] {
+    z-index: 50;
     display: flex;
     flex-direction: column;
     width: 100%;
     margin-right: auto;
     margin-left: auto;
     outline: none;
     background: var(--color-background);
-    border-radius: var(--size-gap);
-    box-shadow: 0 var(--size-gap-half) var(--size-gap-double)
-      rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--color-gray-400);
+    border-radius: var(--rounded-xl);
+    box-shadow: var(--shadow-md);
     max-height: calc(100% - 56px);
     overflow-y: hidden;
   }
@@ -25,7 +26,7 @@ const styles = css`
   @media (min-width: 576px) {
     [data-nextjs-dialog] {
       max-width: 540px;
-      box-shadow: 0 var(--size-gap) var(--size-gap-quad) rgba(0, 0, 0, 0.25);
+      box-shadow: var(--shadow-2xl);
     }
   }
 

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/ErrorOverlayLayout/ErrorOverlayLayout.tsx

@@ -6,6 +6,7 @@ import { Overlay } from '../../Overlay'
 import { ErrorPagination } from '../ErrorPagination/ErrorPagination'
 import { ToolButtonsGroup } from '../../ToolButtonsGroup/ToolButtonsGroup'
 import { VersionStalenessInfo } from '../../VersionStalenessInfo'
+import { ErrorOverlayBottomStacks } from '../error-overlay-bottom-stacks/error-overlay-bottom-stacks'
 
 type ErrorOverlayLayoutProps = {
   errorMessage: string | React.ReactNode
@@ -89,6 +90,10 @@ export function ErrorOverlayLayout({
           </DialogBody>
         </DialogContent>
       </Dialog>
+      <ErrorOverlayBottomStacks
+        errorsCount={readyErrors?.length ?? 0}
+        activeIdx={activeIdx ?? 0}
+      />
     </Overlay>
   )
 }

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ErrorOverlayBottomStacks } from './error-overlay-bottom-stacks'
+import { withShadowPortal } from '../../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof ErrorOverlayBottomStacks> = {
+  title: 'ErrorOverlayBottomStacks',
+  component: ErrorOverlayBottomStacks,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorOverlayBottomStacks>
+
+export const SingleStack: Story = {
+  args: {
+    errorsCount: 2,
+    activeIdx: 0,
+  },
+}
+
+export const DoubleStacks: Story = {
+  args: {
+    errorsCount: 3,
+    activeIdx: 0,
+  },
+}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx

@@ -0,0 +1,105 @@
+import { noop as css } from '../../../helpers/noop-template'
+
+export type ErrorOverlayBottomStacksProps = {
+  errorsCount: number
+  activeIdx: number
+}
+
+export function ErrorOverlayBottomStacks({
+  errorsCount,
+  activeIdx,
+}: ErrorOverlayBottomStacksProps) {
+  return (
+    <div className="error-overlay-bottom-stacks-wrapper">
+      {errorsCount > 1 && (
+        <div
+          className={`error-overlay-bottom-stack-1 ${
+            errorsCount - activeIdx > 1 ? '' : 'stack-slide-up'
+          }`}
+          aria-hidden="true"
+        />
+      )}
+
+      {errorsCount > 2 && (
+        <div
+          className={`error-overlay-bottom-stack-2 ${
+            errorsCount - activeIdx > 2 ? '' : 'stack-slide-up'
+          }`}
+          aria-hidden="true"
+        />
+      )}
+    </div>
+  )
+}
+
+export const styles = css`
+  .error-overlay-bottom-stacks-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    outline: none;
+
+    @media (min-width: 576px) {
+      max-width: 540px;
+    }
+
+    @media (min-width: 768px) {
+      max-width: 720px;
+    }
+
+    @media (min-width: 992px) {
+      max-width: 960px;
+    }
+  }
+
+  .error-overlay-bottom-stack-1,
+  .error-overlay-bottom-stack-2 {
+    padding: 0.75rem;
+    align-self: center;
+    border: 1px solid var(--color-gray-400);
+    border-radius: var(--rounded-xl);
+    margin-top: -1rem; /* 16px */
+    box-shadow: var(--shadow-md);
+    background: var(--color-background-200);
+    animation: stack-slide-down 0.3s ease-out forwards;
+    transform-origin: top center;
+  }
+
+  .error-overlay-bottom-stack-1 {
+    z-index: 49;
+    width: calc(100% - 1.5rem); /* 24px */
+  }
+
+  .error-overlay-bottom-stack-2 {
+    z-index: 48;
+    width: calc(100% - 3rem); /* 48px */
+  }
+
+  @keyframes stack-slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-50%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .stack-slide-up {
+    animation: stack-slide-up 0.3s ease-out forwards;
+  }
+
+  @keyframes stack-slide-up {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-50%);
+    }
+  }
+`

packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx

@@ -64,6 +64,28 @@ export function Base() {
           --color-ansi-bright-yellow: #ffd966;
 
           font-family: var(--font-stack-sans);
+
+          /* TODO: Remove replaced ones. */
+          --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
+            0 1px 2px -1px rgb(0 0 0 / 0.1);
+          --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+            0 2px 4px -2px rgb(0 0 0 / 0.1);
+          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+            0 4px 6px -4px rgb(0 0 0 / 0.1);
+          --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+            0 8px 10px -6px rgb(0 0 0 / 0.1);
+          --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+          --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+          --shadow-none: 0 0 #0000;
+
+          --rounded-none: 0px;
+          --rounded-sm: 0.125rem; /* 2px */
+          --rounded-md: 0.25rem; /* 4px */
+          --rounded-lg: 0.5rem; /* 8px */
+          --rounded-xl: 0.75rem; /* 12px */
+          --rounded-2xl: 1rem; /* 16px */
+          --rounded-3xl: 1.5rem; /* 24px */
         }
 
         @media (prefers-color-scheme: dark) {

packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx

@@ -1,5 +1,6 @@
 import { styles as codeFrame } from '../components/CodeFrame/styles'
 import { styles as dialog } from '../components/Dialog'
+import { styles as bottomStacks } from '../components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks'
 import { styles as pagination } from '../components/Errors/ErrorPagination/styles'
 import { styles as overlay } from '../components/Overlay/styles'
 import { styles as terminal } from '../components/Terminal/styles'
@@ -17,6 +18,7 @@ export function ComponentStyles() {
         ${overlay}
         ${toast}
         ${dialog}
+        ${bottomStacks}
         ${pagination}
         ${codeFrame}
         ${terminal}