[Error Overlay] Comprehensive refinement (#75471)

This PR adds a lot of polish to the experimental Error Overlay:


https://github.com/user-attachments/assets/2540b966-c61d-43eb-b816-5ef25f3ecb11

### Motion
- Stacked layers transition smoothly when switching between errors
- Height transition for the dialog panel to complement the stacked
layers transition
- Dialog contents and the backdrop fade in as per Geist Motion
Guidelines (`scale`, `opacity`)

### Design
- New language icon based on file extension à la (`app.tsx`)
- Shadows are clipped with translucent borders to visually be more crisp
- Use `backdrop-filter: blur()` for backdrop to blend with application
content
- Use `font-variant-numeric: tabular-nums` for ←→ switcher to avoid
layout shift
- Misc alignment improvements

### Interactions
- Focus is now trapped in the dialog, <kbd>Escape</kbd> will un-trap and
re-focus the last `root.activeElement`
- Focus states for all interactive elements
- Fluid reveal & collapse of ignored Call Stack items ↓




https://github.com/user-attachments/assets/59a81cea-24ec-4fe4-be00-b911ab484757

Closes NDX-711
Closes NDX-744

---------

Co-authored-by: devjiwonchoi <[email protected]>
Co-authored-by: Zack Tanner <[email protected]>

Author: 3 people

packages/next/.storybook/preview.ts

@@ -13,7 +13,7 @@ const preview: Preview = {
     },
     backgrounds: {
       values: [
-        { name: 'backdrop', value: 'rgb(44, 44, 46);' },
+        { name: 'backdrop', value: 'rgba(250, 250, 250, 0.80)' },
         { name: 'background-100-light', value: '#ffffff' },
         { name: 'background-200-light', value: '#fafafa' },
         { name: 'background-100-dark', value: '#0a0a0a' },

packages/next/src/client/components/react-dev-overlay/_experimental/app/app.png

@@ -4,6 +4,9 @@ import type { OverlayState } from '../../shared'
 import ReactDevOverlay from './react-dev-overlay'
 import { ACTION_UNHANDLED_ERROR } from '../../shared'
 
+// @ts-expect-error
+import imgApp from './app.png'
+
 const meta: Meta<typeof ReactDevOverlay> = {
   component: ReactDevOverlay,
   parameters: {
@@ -80,6 +83,17 @@ const state: OverlayState = {
 export const Default: Story = {
   args: {
     state,
-    children: <div>Application Content</div>,
+    children: (
+      <div>
+        <img
+          src={imgApp}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+          }}
+        />
+      </div>
+    ),
   },
 }

packages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.stories.tsx

@@ -9,7 +9,8 @@ import { noop as css } from '../../helpers/noop-template'
 
 export const CallStackFrame: React.FC<{
   frame: OriginalStackFrame
-}> = function CallStackFrame({ frame }) {
+  index: number
+}> = function CallStackFrame({ frame, index }) {
   // TODO: ability to expand resolved frames
   // TODO: render error or external indicator
 
@@ -32,19 +33,32 @@ export const CallStackFrame: React.FC<{
   // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,
   // we'll skip rendering the frame in this case.
   const fileSource = getFrameSource(f)
+
   if (!fileSource) {
     return null
   }
 
+  const props = {
+    ...(hasSource && {
+      role: 'button',
+      tabIndex: 0,
+      'aria-label': 'Click to open in your editor',
+      title: 'Click to open in your editor',
+      onClick: open,
+    }),
+  }
+
   return (
     <div
       data-nextjs-call-stack-frame
       data-nextjs-call-stack-frame-ignored={!hasSource}
-      onClick={hasSource ? open : undefined}
-      role="button"
-      tabIndex={0}
-      aria-label={hasSource ? 'Click to open in your editor' : undefined}
-      title={hasSource ? 'Click to open in your editor' : undefined}
+      data-animate={frame.ignored}
+      {...props}
+      style={
+        {
+          '--index': index,
+        } as React.CSSProperties
+      }
     >
       <span
         data-nextjs-frame-expanded={!frame.ignored}
@@ -86,18 +100,25 @@ export const CALL_STACK_FRAME_STYLES = css`
     margin-bottom: var(--size-1);
 
     border-radius: var(--rounded-lg);
+    transition: background 100ms ease-out;
+
+    &[data-animate='true'] {
+      filter: blur(4px);
+      animation: fadeIn 250ms var(--timing-swift) forwards
+        calc(var(--index) * 25ms);
+    }
 
-    &:not(:disabled):hover {
+    &:not(:disabled)[role='button']:hover {
       background: var(--color-gray-alpha-100);
       cursor: pointer;
     }
 
-    &:not(:disabled):active {
+    &:not(:disabled)[role='button']:active {
       background: var(--color-gray-alpha-200);
     }
 
-    &:focus {
-      outline: none;
+    &:focus-visible {
+      outline: var(--focus-ring);
     }
   }
 
@@ -107,6 +128,7 @@ export const CALL_STACK_FRAME_STYLES = css`
     gap: var(--size-1);
 
     margin-bottom: var(--size-1);
+    font-family: var(--font-stack-monospace);
 
     color: var(--color-gray-1000);
     font-size: var(--size-font-small);
@@ -119,4 +141,10 @@ export const CALL_STACK_FRAME_STYLES = css`
     font-size: var(--size-font-small);
     line-height: var(--size-5);
   }
+
+  @keyframes fadeIn {
+    to {
+      filter: blur(0px);
+    }
+  }
 `

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx

@@ -58,25 +58,26 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
     column: stackFrame.column,
   })
 
+  const fileExtension = stackFrame?.file?.split('.').pop()
+
   // TODO: make the caret absolute
   return (
     <div data-nextjs-codeframe>
-      <div className="code-frame-header">
-        <p
-          role="link"
-          onClick={open}
-          tabIndex={1}
-          title="Click to open in your editor"
-        >
-          <span>
-            <FileIcon />
+      <button
+        aria-label="Open error location in editor"
+        className="code-frame-header"
+        onClick={open}
+      >
+        <p className="code-frame-link">
+          <span className="code-frame-icon">
+            <FileIcon lang={fileExtension} />
             {getFrameSource(stackFrame)} @{' '}
             <HotlinkedText text={stackFrame.methodName} />
           </span>
           <ExternalIcon width={16} height={16} />
         </p>
-      </div>
-      <pre>
+      </button>
+      <pre className="code-frame-pre">
         {decoded.map((entry, index) => (
           <span
             key={`frame-${index}`}
@@ -99,11 +100,6 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
 
 export const CODE_FRAME_STYLES = css`
   [data-nextjs-codeframe] {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    flex: 1 0 0;
-
     background-color: var(--color-background-200);
     overflow: hidden;
     color: var(--color-gray-1000);
@@ -116,12 +112,35 @@ export const CODE_FRAME_STYLES = css`
     border-radius: var(--size-2);
   }
 
-  [data-nextjs-codeframe] pre {
+  .code-frame-link,
+  .code-frame-pre {
+    padding: 12px;
+  }
+
+  .code-frame-pre {
     white-space: pre-wrap;
   }
 
   .code-frame-header {
+    width: 100%;
+    cursor: pointer;
     border-bottom: 1px solid var(--color-gray-400);
+    transition: background 100ms ease-out;
+
+    &:focus-visible {
+      outline: var(--focus-ring);
+      outline-offset: -2px;
+    }
+
+    &:hover {
+      background: var(--color-gray-100);
+    }
+  }
+
+  .code-frame-icon {
+    display: flex;
+    align-items: center;
+    gap: 6px;
   }
 
   [data-nextjs-codeframe]::selection,
@@ -137,27 +156,22 @@ export const CODE_FRAME_STYLES = css`
 
   [data-nextjs-codeframe] > * {
     margin: 0;
-    padding: calc(var(--size-gap) + var(--size-gap-half))
-      calc(var(--size-gap-double) + var(--size-gap-half));
   }
 
-  [data-nextjs-codeframe] > div > p {
+  .code-frame-link {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    cursor: pointer;
     margin: 0;
+    outline: 0;
   }
-  [data-nextjs-codeframe] > div > p:hover {
-    text-decoration: underline dotted;
-  }
+
   [data-nextjs-codeframe] div > pre {
     overflow: hidden;
     display: inline-block;
   }
 
   [data-nextjs-codeframe] svg {
     color: var(--color-gray-900);
-    margin-right: 6px;
   }
 `

packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/code-frame/code-frame.tsx

@@ -252,10 +252,6 @@ export const COPY_BUTTON_STYLES = css`
   .nextjs-data-runtime-error-copy-button--initial:hover {
     cursor: pointer;
   }
-  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
   .nextjs-data-runtime-error-copy-button--error,
   .nextjs-data-runtime-error-copy-button--error:hover {
     color: var(--color-ansi-red);