next.js

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

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>