Make visual-compare diagnostics region-aware and semantic

[chubes4]

Problem

wordpress.visual-compare captures the first 160 visible DOM elements, matches source and candidate by exact generated path, omits pseudo-elements, and ranks rectangle overlap rather than mismatched pixels. Gutenberg wrapper changes therefore turn corresponding elements into added/removed rows and late-page mismatch regions lose actionable element attribution.

Observed in Static Site Importer fixture 15-saas: only 2 flow elements matched while 158 were reported added and 158 removed; both 160-element snapshots were truncated. The pixel diff clearly showed navigation, button, text, and pseudo-element paint drift that the explanation did not rank explicitly.

Required outcome

• Match elements semantically when wrappers and :nth-of-type() paths differ, with deterministic confidence and ambiguity handling.
• Capture visible ::before and ::after paint/style evidence under their host element.
• Augment bounded snapshots with elements intersecting top mismatch regions, including late-page elements.
• Rank attributed elements by mismatched-pixel impact rather than rectangle overlap alone.
• Preserve explicit selector capture and bounded output with exact selection/truncation metadata.

Acceptance

• Wrapper insertion does not collapse semantic matching.
• A pseudo-element paint mismatch is named in the explanation.
• An element after the initial document-order budget is captured when it intersects a top mismatch region.
• A large unchanged wrapper ranks below a smaller element covering actual mismatch pixels.
• Deterministic tests cover all behaviors.