Let annotations pick between the elements stacked under the click

[shaunandrews]

Related issues

• Related to STU-2183
• Extracted from Design Exploration: Improve visual annotation workflows #4411. Stacked on Dim the preview around the element being annotated #4825 (needs the scrim's target-rect helper); merge that first.

How AI was used in this PR

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

Proposed Changes

• Clicking an element during annotation often hits a wrapper, a link, or an overlay rather than the thing you meant. The note now collects every element stacked under the click point and shows ‹ 1/N › in its header.
• Stepping through the layers moves the outline, the scrim cut-out, and the element line in the note; the typed comment is kept.
• Candidates come from the hit-test stack plus a bounded scan for elements behind pointer-events:none overlays, capped at 30 and ~20ms.
• The note header now keeps the viewport size and layer controls tucked to the right regardless of selector length.

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

Screenshots

After stepping ‹ once: the wrapping <h3> behind the link is selected, showing 2/8.

Testing Instructions

• Open a site preview, click Annotate, click a headline inside a section or a link inside a card.
• The note header shows ‹ 1/N ›. Click ‹ to select the element behind; the outline and dimmed area move to it, and the <tag> line updates.
• Type a note, switch layers, confirm the text stays.
• 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