[Xoppyc]

Summary

Adds an interactive Highlight Updates mode to the Start Devtools dock:

• Surgical Fine-Grained Flashing: Instead of flashing coarse rectangular bounding boxes over entire components (like React DevTools), it visually highlights exact fine-grained DOM mutations. Only the mutating text node or SVG icon flashes, showing Solid's surgical reactivity in real time.
• Frequency-Based Color Progression: Repeated updates to the same node within an 800ms window progress through a Solid-themed color gradient:
  • 1 update: Solid Light Blue (#4483ec)
  • 2–3 updates: Purple (#9333ea)
  • 4–7 updates: Pink (#ec4899)
  • 8+ updates: Red (#ef4444)
• Pixel-Perfect Ghost Overlay: Deep-clones updated elements into a dedicated top-level portal layer with matching computed typography and SVG stroke/fill metrics (!important), guaranteeing 100% pixel alignment and zero layout shift.
• Keyboard Shortcut & Persistence: Toggle with Alt+Shift+H or the toolbar icon; active state persists across reloads via DockState.
• E2E & Unit Test Coverage: Full test suite (Vitest + Playwright) verifying update tracking, frequency escalation, SVG styling, keyboard shortcuts, and state persistence.

Showcase

[Xoppyc]

I didn't know that github draws color preview near HEX codes wow