♻️ Migrate Storybook & Static-Site SDKs from Puppeteer to Playwright (#193)

## Summary

This PR fixes critical screenshot timeout issues in CI and dramatically
improves performance by migrating both the Storybook and Static-Site
SDKs from Puppeteer to Playwright.

**Root cause:** Puppeteer's new headless mode has known issues with
parallel screenshot capture causing timeouts. Playwright's
BrowserContext provides proper isolation for parallel workers.

**Results:**
- Screenshots now complete in <1 second instead of timing out after 60+
seconds
- Client-side navigation for Storybook provides ~47x speedup (94s → 2s
for 10 screenshots)

## Changes

### Puppeteer → Playwright Migration
- Replace `puppeteer` with `playwright-core` in both SDKs
- Migrate from tab-based pooling to BrowserContext-based pooling for
proper isolation
- Update API calls: `setViewport()` → `setViewportSize()`,
`networkidle2` → `networkidle`
- Fix `page.evaluate()` syntax: Playwright uses object destructuring `({
args }) => {}, { args }`

### Chrome Browser Flags Audit
- Remove deprecated flags causing hangs (`--disable-gpu` +
`--disable-software-rasterizer`)
- Remove flags deprecated since 2017-2019 (`--disable-translate`,
`--safebrowsing-disable-auto-update`)
- Use modern
`--disable-features=Translate,OptimizationHints,MediaRouter` approach
- Add screenshot consistency flags (`--force-color-profile=srgb`,
`--hide-scrollbars`)
- Document flags in `docs/browser-flags.md` with source of truth
references

### Storybook Client-Side Navigation
- Use `__STORYBOOK_PREVIEW__.channel.emit('setCurrentStory')` instead of
full page reloads
- First story per tab: Full page load to initialize Storybook
- Subsequent stories: Client-side navigation + wait for `storyRendered`
event
- Sort tasks by viewport to minimize resize operations

### Plugin System Enhancement
- Support `vizzlyPlugin` field in package.json for plugin registration

### CI Improvements
- Update E2E workflow for Playwright browser installation
- Restructure SDK E2E tests to match real user workflow
- Add proper build steps before E2E tests

## Test plan

- [x] All unit tests pass
- [x] Storybook E2E: 5 screenshots in 0s (TDD mode)
- [x] Storybook E2E: 5 screenshots in 0s (Cloud mode) - previously ALL
timed out
- [x] Static-Site E2E: 5 screenshots in 1s (TDD mode)
- [x] Static-Site E2E: Works (Cloud mode) - previously slow/timing out
- [x] CI passes for all SDK E2E jobs

Author: Robdel12

.github/workflows/sdk-e2e.yml

@@ -145,34 +145,44 @@ jobs:
         working-directory: ./clients/storybook
         run: npm install
 
+      - name: Build Storybook client
+        working-directory: ./clients/storybook
+        run: npm run build
+
       - name: Get Playwright version
         working-directory: ./clients/storybook
         id: playwright-version
-        run: echo "version=$(npx playwright --version | grep -oE '[0-9]+\.[0-9]+\.[0-9]+')" >> $GITHUB_OUTPUT
+        run: echo "version=$(node -p "require('playwright-core/package.json').version")" >> $GITHUB_OUTPUT
 
       - name: Cache Playwright browsers
         uses: actions/cache@v4
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ steps.playwright-version.outputs.version }}-chromium
+          key: playwright-${{ steps.playwright-version.outputs.version }}-storybook-chromium
 
       - name: Install Playwright browsers
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         working-directory: ./clients/storybook
-        run: npx playwright install chromium --with-deps
+        run: npx playwright-core install chromium --with-deps
+
+      - name: Build example-storybook
+        working-directory: ./clients/storybook/example-storybook
+        run: npm install && npm run build-storybook
 
       - name: Run E2E tests (TDD mode)
         working-directory: ./clients/storybook
         run: ../../bin/vizzly.js tdd run "npm run test:e2e"
         env:
           CI: true
+          VIZZLY_LOG_LEVEL: debug
 
       - name: Run E2E tests (Cloud mode)
         working-directory: ./clients/storybook
         run: ../../bin/vizzly.js run "npm run test:e2e"
         env:
           CI: true
+          VIZZLY_LOG_LEVEL: debug
           VIZZLY_TOKEN: ${{ secrets.VIZZLY_STORYBOOK_CLIENT_TOKEN }}
           VIZZLY_COMMIT_MESSAGE: ${{ github.event.pull_request.head.commit.message || github.event.head_commit.message }}
           VIZZLY_COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
@@ -202,22 +212,26 @@ jobs:
         working-directory: ./clients/static-site
         run: npm install
 
+      - name: Build Static-Site client
+        working-directory: ./clients/static-site
+        run: npm run build
+
       - name: Get Playwright version
         working-directory: ./clients/static-site
         id: playwright-version
-        run: echo "version=$(npx playwright --version | grep -oE '[0-9]+\.[0-9]+\.[0-9]+')" >> $GITHUB_OUTPUT
+        run: echo "version=$(node -p "require('playwright-core/package.json').version")" >> $GITHUB_OUTPUT
 
       - name: Cache Playwright browsers
         uses: actions/cache@v4
         id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ steps.playwright-version.outputs.version }}-chromium
+          key: playwright-${{ steps.playwright-version.outputs.version }}-static-site-chromium
 
       - name: Install Playwright browsers
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         working-directory: ./clients/static-site
-        run: npx playwright install chromium --with-deps
+        run: npx playwright-core install chromium --with-deps
 
       - name: Run E2E tests (TDD mode)
         working-directory: ./clients/static-site

clients/static-site/.vizzlyrc.js

@@ -0,0 +1,19 @@
+/**
+ * Vizzly config for Static-Site SDK development
+ *
+ * This config explicitly loads the local plugin since it's not installed
+ * in node_modules during development.
+ */
+export default {
+  // Load the local plugin directly
+  plugins: ['./dist/plugin.js'],
+
+  // Default static-site config for E2E tests
+  staticSite: {
+    viewports: [{ name: 'default', width: 1280, height: 720 }],
+    concurrency: 3,
+    browser: {
+      headless: true,
+    },
+  },
+};