comments-ux: figma bubble pins, floating panel, seen/reactions/mentions UI, theme follow (0001 A–E + 0002)

- GAL pin = one closed polygon: round body, squared-off bottom-left corner
  ON the anchor; PIN gains unread (accent ring); tuner knobs; shipped
  defaults r9/ring4/alpha.9. DOM hit/highlight sized+offset from a LIVE
  pin-geometry radius store the tuner feeds.
- Floating comments panel: draggable (shared useDraggablePanel with
  always-onscreen restore; overlay FAB retrofitted), collapsible to header,
  header carries add/show-hide/mark-all; unread badges (rose on mention).
- Reactions (emoji-mart lazy, quick-row) + @-mention autocomplete
  (MentionInput; backend roster with presence/author fallback).
- Theme: ?theme= > storage > OS, no-flash boot, toggles (HomePage + overlay
  View row), boot-seeded pcbjam-dark schematic colors + kicadSetColorTheme /
  kicadSetDarkChrome bridges (canvas + wx chrome live flip), light/dark
  variants across all overlay surfaces.
- e2e: panel/seen/reactions/mentions/theme specs + resize-spec geometry;
  bumps pcbjam-shared (flat-key seen/reactions + listCollaborators) and
  wxwidgets (dark chrome) pointers.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HLwn1toiNKi1MgxGKnZTes

tests/web/comments-viewport-resize.spec.ts

@@ -67,8 +67,13 @@ async function pinDelta(page: Page): Promise<{ dx: number; dy: number }> {
     const r = gl.getBoundingClientRect();
     const ratio = r.width / vp.w;
     const world = win.__pcbjamComments.threads()[0].world;
-    const truthX = r.x + ((world.x - vp.cx) * vp.scale + vp.w / 2) * ratio;
-    const truthY = r.y + ((world.y - vp.cy) * vp.scale + vp.h / 2) * ratio;
+    // Bubble-pin geometry (comments-ux 0001 A): the DOM target centers on the
+    // bubble BODY at anchor + (r, -r) — the anchored point is the bubble's
+    // sharp bottom-left corner. Keep in sync with standalone
+    // src/wasm/collab/pin-geometry.ts (PIN_RADIUS_PX).
+    const bubbleR = 9 * ratio;
+    const truthX = r.x + ((world.x - vp.cx) * vp.scale + vp.w / 2) * ratio + bubbleR;
+    const truthY = r.y + ((world.y - vp.cy) * vp.scale + vp.h / 2) * ratio - bubbleR;
     const pin = document.querySelector('[data-testid="comment-pin"]') as HTMLElement;
     const pr = pin.getBoundingClientRect();
     return { dx: pr.x + pr.width / 2 - truthX, dy: pr.y + pr.height / 2 - truthY };