Dim the preview around the element being annotated

[shaunandrews]

Related issues

• Related to STU-2183
• Extracted from Design Exploration: Improve visual annotation workflows #4411

How AI was used in this PR

Claude Code ported the scrim from #4411 onto trunk's inspector script and wrote the test. Reviewed and tested manually in the Desktop app.

Proposed Changes

• While a preview annotation note is open, the rest of the page dims and only the selected element stays clear, so it is obvious what the note is about.
• The cut-out follows the element on scroll and reflow, and clears when the note is saved, cancelled, or escaped.
• Markers for other saved notes sit under the scrim; the highlight and note popup sit above it.

⚠️ Visual change: needs human review in light + dark mode.

Screenshots

Testing Instructions

• Open a site preview, click Annotate, click an element.
• Everything but that element dims. Scroll and resize the pane; the hole stays on the element.
• Esc, Save, or Cancel restores the page.
• npm test -- apps/ui/src/components/site-preview/inspector-script.test.ts

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

🤖 Generated with Claude Code

[wpmobilebot]

📊 Performance Test Results

Comparing fe0e84d vs trunk

app-size

Metric	trunk	fe0e84d	Diff	Change
App Size (Mac)	1458.21 MB	1458.21 MB	0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	fe0e84d	Diff	Change
load	1186 ms	1214 ms	+28 ms	⚪ 0.0%

site-startup

Metric	trunk	fe0e84d	Diff	Change
siteCreation	7544 ms	7533 ms	11 ms	⚪ 0.0%
siteStartup	3364 ms	3379 ms	+15 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)