Redesign dev overlay: cleaner shell + instant fix-card guidance (#93755)

## Summary

### Error overlay shell
- Clean up nav, dialog frame, footer placement, and button styles across
the overlay
- Remove unused `fader` and notch components
- Tighten layout spacing throughout the dialog

### Instant error guidance (fix cards)
- New data-driven fix-card grid for instant errors: each card has a
`group` (Stream / Cache / Block / Static / Dynamic / Client / Defer /
Measure / Prerender), an icon, a color, and an optional docs link
- Whole card is clickable when a docs link is present, with an
always-visible external-link indicator
- Centralized group metadata (label / color / icon) in
`instant-guidance-data.ts` so cards stay consistent across the overlay
and the docs surface
- Outlined SVG icons live in a dedicated `fix-card-icons.tsx`
- Snippets refined: cache cards trimmed to 3 lines, client sync-IO defer
cards use block-body arrow syntax so longer expressions don't overflow

### Code frame
- Restore the red bar / caret on the errored line (parser previously
only matched storybook synthetic frames)
- Fix caret alignment with `codeFrameColumns` output
- Style inline error code snippets

### Storybook & examples
- Add error examples and instant-error fixtures for development/testing
- Align all 11 instant storybook fixtures with canary factory output and
the matching test-app routes

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>

Author: 3 people

…overlay/storybook/use-overlay-reducer.ts …rybook/decorators/use-overlay-reducer.tspackages/next/src/next-devtools/dev-overlay/storybook/use-overlay-reducer.ts renamed to packages/next/.storybook/decorators/use-overlay-reducer.ts packages/next/src/next-devtools/dev-overlay/storybook/use-overlay-reducer.ts renamed to packages/next/.storybook/decorators/use-overlay-reducer.ts

@@ -1,4 +1,7 @@
-import type { DispatcherEvent, OverlayState } from '../shared'
+import type {
+  DispatcherEvent,
+  OverlayState,
+} from '../../src/next-devtools/dev-overlay/shared'
 
 import { useReducer } from 'react'
 import {
@@ -29,7 +32,7 @@ import {
   ACTION_UNHANDLED_REJECTION,
   ACTION_VERSION_INFO,
   INITIAL_OVERLAY_STATE,
-} from '../shared'
+} from '../../src/next-devtools/dev-overlay/shared'
 
 export const storybookDefaultOverlayState: OverlayState = {
   ...INITIAL_OVERLAY_STATE,

…/storybook/with-dev-overlay-contexts.tsx …decorators/with-dev-overlay-contexts.tsxpackages/next/src/next-devtools/dev-overlay/storybook/with-dev-overlay-contexts.tsx renamed to packages/next/.storybook/decorators/with-dev-overlay-contexts.tsx packages/next/src/next-devtools/dev-overlay/storybook/with-dev-overlay-contexts.tsx renamed to packages/next/.storybook/decorators/with-dev-overlay-contexts.tsx

@@ -2,12 +2,18 @@ import { useRef, useState, type Dispatch, type SetStateAction } from 'react'
 import {
   DevOverlayContext,
   useDevOverlayContext,
-} from '../../dev-overlay.browser'
-import { RenderErrorContext } from '../dev-overlay'
-import { PanelRouterContext, type PanelStateKind } from '../menu/context'
-import { INITIAL_OVERLAY_STATE } from '../shared'
-import type { OverlayState, DispatcherEvent } from '../shared'
-import type { ReadyRuntimeError } from '../utils/get-error-by-type'
+} from '../../src/next-devtools/dev-overlay.browser'
+import { RenderErrorContext } from '../../src/next-devtools/dev-overlay/dev-overlay'
+import {
+  PanelRouterContext,
+  type PanelStateKind,
+} from '../../src/next-devtools/dev-overlay/menu/context'
+import { INITIAL_OVERLAY_STATE } from '../../src/next-devtools/dev-overlay/shared'
+import type {
+  OverlayState,
+  DispatcherEvent,
+} from '../../src/next-devtools/dev-overlay/shared'
+import type { ReadyRuntimeError } from '../../src/next-devtools/dev-overlay/utils/get-error-by-type'
 
 interface WithDevOverlayContextsOptions {
   state?: Partial<OverlayState>

packages/next/.storybook/decorators/with-shadow-portal.tsx

@@ -0,0 +1,10 @@
+import '../../src/next-devtools/dev-overlay/global.css'
+import { ComponentStyles } from '../../src/next-devtools/dev-overlay/styles/component-styles'
+import { ShadowPortal } from '../../src/next-devtools/dev-overlay/components/shadow-portal'
+
+export const withShadowPortal = (Story: any) => (
+  <ShadowPortal>
+    <ComponentStyles />
+    <Story />
+  </ShadowPortal>
+)