fix(flow): construct SGCR from painted geometry

[ivanmkc]

Summary

• make the visible SGCR path wait for a complete browser-measured snapshot of painted node cards and SVG edge labels
• construct label-channel pitch and emitted label boxes from those exact measurements, with no visible estimate-backed fallback
• measure the painted custom-node child instead of React Flow's undersized wrapper
• reject unsupported labeled self-loop/ring modes synchronously with a visible render error instead of silently dropping labels
• extend unit, DOM, resize, and painted-overlap regression coverage for the reproduced ngrok dataflow

Root cause

React Flow reported a 73px wrapper for a custom card whose painted child was about 89px high. SGCR proved the edge label clear of the wrapper, while the browser painted the label into the overflowing card. Edge-label dimensions were also estimated independently from SVG text rendering.

The visible layout now has one geometry authority: browser-measured painted boxes in flow coordinates. The hidden graph is measurement scaffolding only; the measured layout is installed and revealed atomically.

Before / after

Before and after screenshots are attached to this PR.

Verification

• env NODE_OPTIONS=--localstorage-file=/private/tmp/termchart-vitest-localstorage npm test — 1,037 passed, 18 skipped
• npm run build --workspace @ivanmkc/termchart-viewer — passed
• npm run test:overlap:nobuild --workspace @ivanmkc/termchart-viewer — 27/32 clean, 5 known baseline cases, 0 regressions
• local ngrok fixture on :8080 — painted HTTPS + termchart token label has 13px clearance from the painted remote-cli card; rectangles do not intersect
• independent code review — no remaining Critical or Important findings

Refs #154
Related #303

[ivanmkc]

Before

React Flow's wrapper was shorter than the painted card, so HTTPS + termchart token overlapped it.

After

The visible layout now uses painted card and SVG-label measurements. The same label has 13px clearance.