figma-overlay-checklisted

# Figma Overlay Fidelity Check Export one Figma page Frame as PNG. Put the entire comparison overlay implementation in **one temporary source file**, then add **one marked side-effect import** to the browser-executed page entry. The overlay must survive refreshes and remain until `$figma-overlay-cleanup` removes the temporary file, image, and import. ## Required outcome - Create exactly one temporary overlay source file. - Keep all overlay DOM, styles, controls, state, route checks, and listeners in that file. - Change one existing page-entry file only by adding a marked import for the temporary file. - Provide `hidden`, `opacity`, and `difference` modes plus opacity control. - Render the overlay image at exactly the Figma Frame's logical width. - Find the target page canvas by traversing page elements from top to bottom and selecting the page-level element whose authored fixed width and rendered width exactly match the Figma Frame width. - Align the overlay image's rendered left and top edges exactly with the target page canvas's left and top edges. - After the overlay works, inspect the revealed differences and actively fix the application UI before asking the user to confirm. - Repeat compare → fix → refresh → measure until the pass criteria are met or remaining differences are explicitly explained. - Do not add overlay-related files or paths to `.gitignore`; leave them visible for `$figma-overlay-cleanup` to remove. - After completing overlay-guided UI fixes, explicitl