test: add visual regression coverage for Modal variants

[TaprootFreak]

Context — the bug this PR prevents

In April 2026, PR #1048 (compliance improvements) silently changed the <Modal> component's default rendering:

- <div className="absolute inset-0 z-50 bg-white p-4 ...">      // fullscreen white panel
+ <div className="fixed inset-0 z-50 bg-black/40 ..."            // centered card on dark backdrop
+      onClick={(e) => e.target === e.currentTarget && onClose?.()}>

The author needed a dialog-style overlay for new compliance flows and changed the Modal's default behavior instead of introducing a variant. The PR was merged because no test asserted the visual contract — every fullscreen modal in production (KYC, Safe Deposit, Buy / Sell, recall, recall details, ConfirmDialog, etc.) suddenly rendered as a centered card on a dim backdrop. The regression sat in production for 26 days until PR #1090 reintroduced an explicit variant: 'fullscreen' | 'dialog' prop and restored the original layout.

This PR adds the missing safety net so the same class of regression cannot reach production again — using only tooling that lives inside this repository.

Approach — self-hosted Visual Regression

Visual Regression Testing (VRT) is the industry-standard answer for layout/style regressions in shared UI components. This PR brings VRT to the repo without any external SaaS dependency:

• Storybook 8 isolates <Modal> from routing, auth and layout dependencies so each variant renders deterministically.
• Playwright drives a headless Chromium against the built Storybook, captures screenshots and pixel-diffs them against PNG baselines committed in the repo.
• GitHub Actions runs the whole thing on ubuntu-latest; nothing leaves the GitHub infrastructure.

Files

Path	Purpose
.storybook/main.ts, preview.tsx	Storybook 8 setup with @storybook/preset-create-react-app. Strips ForkTsCheckerWebpackPlugin so the Storybook build mirrors react-app-rewired build's CI=false behaviour. Global decorator provides a LayoutContextProvider with real DOM refs so Modal's createPortal resolves.
src/components/modal.stories.tsx	Three stories: Default (no variant — the exact configuration that broke in #1048), Fullscreen, Dialog.
playwright.storybook.config.ts	Standalone Playwright config; separate webServer (serve storybook-static) and __snapshots__/ location so it never clashes with the existing app-level e2e config.
e2e/storybook/modal-visual.spec.ts	Renders every story × {375 px, 1280 px} and asserts toHaveScreenshot.
.github/workflows/visual-regression.yml	PR gate: builds Storybook, installs Chromium, runs the spec. On failure uploads the diff plus a pre-shaped baseline-candidates/ directory so first-run baselines can be committed without manual renaming.
npm scripts	storybook, build-storybook, test:visual.
tsconfig.json / tsconfig.build.json	Stories included in the type-check graph, excluded from the library publish output.

Why the Default story is the actual regression guard

Default renders <Modal isOpen> with no variant prop — the exact code path every existing caller relied on before #1048. If a future PR flips the default again, Default's baseline will diverge from Fullscreen's and the CI check fails. Impossible to merge without an explicit human accept (rebase + commit new baselines).

How the gate works

1. PR opens or updates → visual-regression.yml runs.
2. Job builds Storybook, serves it on localhost:6006, runs the 6 screenshot tests (3 stories × 2 viewports).
3. Each screenshot is pixel-diffed against the baseline in e2e/storybook/__snapshots__/. maxDiffPixelRatio: 0.01 tolerates Chromium subpixel drift, fails on real layout regressions.
4. If anything differs:
   • Job exits non-zero, PR check turns red.
   • Diff PNGs + actual PNGs are uploaded as artifact visual-regression-diff.
   • Reviewer downloads the artifact, inspects the diff and either fixes the regression or copies the new baselines into e2e/storybook/__snapshots__/ and commits.
5. PR cannot merge until the check is green.

The original #1048 regression would have produced an immediate diff on Default: white fullscreen panel → dark overlay with a centered card.

One-time setup: seed the initial baselines

The PR ships without baselines because they must be generated on Linux (CI's chromium-linux); generating them on macOS would create -darwin filenames that CI ignores. The first CI run on this PR is therefore expected to fail — that failure produces the baselines:

1. First Visual Regression run on this PR finishes red.
2. Open the run → Artifacts → download visual-regression-diff.zip.
3. Inside the zip, baseline-candidates/modal-visual.spec.ts/*.png are already named exactly as Playwright expects.
4. Extract that directory into e2e/storybook/__snapshots__/modal-visual.spec.ts/.
5. Commit & push → second run is green and the gate is live.

After that the gate is self-sustaining; every future PR that changes the Modal layout will trip the check.

Validated locally

• npm ci (strict, matches CI exactly) clean.
• npm run lint clean.
• npm run test — 276/276 passing.
• npm run build:dev — app build unchanged.
• npm run build-storybook — Storybook compiles.
• npx playwright test --config=playwright.storybook.config.ts --list — 6 tests discovered.
• First CI run intended to fail (no baselines yet — see setup above).

Out of scope (intentionally)

• Stories for other shared components — harness is in place; adding more is a few lines per component.
• Making variant required at the type level. Complementary structural guard, better as a separate PR once the visual layer is established.