feat(tools): add Image Comparison / Diff Viewer

[rishima17]

Description
A visual tool for developers to compare two images (e.g., "Original Mockup" vs "Current Screenshot") to identify pixel-level differences.

Rationale
Manual "eyeballing" of UI differences is imprecise. A specialized tool with overlay and flicker modes makes visual regression testing easier.

Expected Behavior
Double file upload (Image A and Image B).
Comparison Modes:
Side-by-side: Horizontal/Vertical split.
Slider: A draggable vertical line revealing one image over the other.
Onion Skin: Opacity slider for Image B over Image A.
Difference: Highlighted pixels that differ between the two.
Implementation Tasks
Create imageDiffViewer.tsx.
Implement canvas-based image comparison for the "Difference" mode.
Create UI controls for the various viewing modes.

[Shalini828]

Hi, I’d like to work on this issue. Please assign it to me.

[SyedFahad7]

Sure, assigning this to you @Shalini828

Let’s split this into phases to keep things manageable and review friendly.

Phase 1 scope:
Implement only the first three modes:

• Side by side
• Slider
• Onion skin

Please raise a PR covering only these three modes.

Focus on:

• Clean, modular React structure
• Reusable component design
• Proper state management
• Handling different image dimensions gracefully
• Clean UI controls separated from rendering logic

Keep it lightweight and polished.

The Difference mode will be handled separately.
Once Phase 1 is reviewed and approved, we’ll open a dedicated issue for Difference mode and assign it after this LGTM.

Let me know if anything is unclear before you start.