feat(ui-scripts): improve the visual-diff report UX and diff rendering

Land three report improvements:

- Default the status filter to "Changed" (falling back to "All" when nothing
  changed) so reviewers see regressions first, and apply filters on load.
- Close the lightbox on Escape and navigate with the arrow keys.
- Rework the diff image to a Chromatic-style pixel highlight: dim and
  desaturate the actual screenshot into a faint backdrop and paint the exact
  changed pixels (dilated for visibility) in the accent color, replacing the
  coarse bounding boxes. Extracts a tested dilateMask helper.

Also add a TEMP diff-demo fixture and a workflow step that injects it so the
published report always has one "changed" row to preview the new rendering
(this PR's -<theme> screenshot renames leave zero real "changed" rows). Both
are marked for removal before merge.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: balzss

.github/workflows/visual-regression.yml

@@ -77,6 +77,19 @@ jobs:
           mkdir -p regression-test/.actual
           find regression-test/cypress/screenshots -name '*.png' -exec cp {} regression-test/.actual/ \;
 
+      # TEMP (remove before merge): this PR renames every screenshot with a
+      # `-<theme>` suffix, so nothing matches the old baselines and the report
+      # has zero "changed" rows — leaving the new diff visualization impossible
+      # to preview. Inject one synthetic baseline/actual pair that differs in a
+      # few localized spots so the report always has a "changed" example.
+      # Fixtures live in regression-test/cypress/diff-demo/. Delete this step
+      # and that directory to revert.
+      - name: TEMP inject diff-demo fixture
+        run: |
+          mkdir -p regression-test/.baselines regression-test/.actual
+          cp regression-test/cypress/diff-demo/baseline.png regression-test/.baselines/diff-demo.png
+          cp regression-test/cypress/diff-demo/actual.png regression-test/.actual/diff-demo.png
+
       - name: Diff and generate report
         id: diff
         working-directory: regression-test

packages/ui-scripts/lib/__node_tests__/visual-diff.test.ts

@@ -29,7 +29,7 @@ import {
   indexByName,
   sourceLinkFor,
   appUrlFor,
-  boxesFromMask
+  dilateMask
 } from '../commands/visual-diff.ts'
 
 // Build a w*h changed-mask with the given filled rectangles set to 1.
@@ -175,7 +175,10 @@ describe('sourceLinkFor', () => {
 
 describe('appUrlFor', () => {
   const facets = ['canvas', 'light', 'dark']
-  const meta = { 'button-dark': '/button', 'small-components-light': '/small-components' }
+  const meta = {
+    'button-dark': '/button',
+    'small-components-light': '/small-components'
+  }
 
   it('returns an empty string when appPath is not provided', () => {
     expect(appUrlFor('button-dark.png', meta, facets)).toBe('')
@@ -212,54 +215,47 @@ describe('appUrlFor', () => {
   })
 })
 
-describe('boxesFromMask', () => {
-  it('returns no boxes for an unchanged mask', () => {
-    expect(boxesFromMask(mask(32, 32, []), 32, 32)).toEqual([])
-  })
+describe('dilateMask', () => {
+  const countSet = (m: ArrayLike<number>) => {
+    let n = 0
+    for (let i = 0; i < m.length; i++) if (m[i]) n++
+    return n
+  }
 
-  it('wraps a single changed cluster in one box that contains it', () => {
-    const boxes = boxesFromMask(
-      mask(32, 32, [{ x: 4, y: 4, w: 10, h: 10 }]),
-      32,
-      32
-    )
-    expect(boxes).toHaveLength(1)
-    const [b] = boxes
-    // the box must fully contain the changed region
-    expect(b.x).toBeLessThanOrEqual(4)
-    expect(b.y).toBeLessThanOrEqual(4)
-    expect(b.x + b.w).toBeGreaterThanOrEqual(14)
-    expect(b.y + b.h).toBeGreaterThanOrEqual(14)
+  it('leaves an empty mask empty', () => {
+    expect(countSet(dilateMask(mask(16, 16, []), 16, 16))).toBe(0)
   })
 
-  it('separates two distant clusters into two boxes', () => {
-    const boxes = boxesFromMask(
-      mask(64, 64, [
-        { x: 0, y: 0, w: 6, h: 6 },
-        { x: 50, y: 50, w: 6, h: 6 }
-      ]),
-      64,
-      64
-    )
-    expect(boxes).toHaveLength(2)
+  it('grows a single pixel into its 3x3 neighborhood by default', () => {
+    const out = dilateMask(mask(16, 16, [{ x: 8, y: 8, w: 1, h: 1 }]), 16, 16)
+    expect(countSet(out)).toBe(9)
+    // the neighbors around the original pixel are all set
+    for (let dy = -1; dy <= 1; dy++) {
+      for (let dx = -1; dx <= 1; dx++) {
+        expect(out[(8 + dy) * 16 + (8 + dx)]).toBe(1)
+      }
+    }
   })
 
-  it('drops specks smaller than minPixels', () => {
-    // a single changed pixel is below the default minPixels threshold
-    expect(
-      boxesFromMask(mask(32, 32, [{ x: 5, y: 5, w: 1, h: 1 }]), 32, 32)
-    ).toEqual([])
+  it('clamps the dilation at the image edges', () => {
+    // a corner pixel only has 3 in-bounds neighbors besides itself
+    const out = dilateMask(mask(16, 16, [{ x: 0, y: 0, w: 1, h: 1 }]), 16, 16)
+    expect(countSet(out)).toBe(4)
   })
 
-  it('never lets a box exceed the image bounds', () => {
-    const boxes = boxesFromMask(
-      mask(20, 20, [{ x: 0, y: 0, w: 20, h: 20 }]),
-      20,
-      20
+  it('honors a custom radius', () => {
+    const out = dilateMask(
+      mask(16, 16, [{ x: 8, y: 8, w: 1, h: 1 }]),
+      16,
+      16,
+      2
     )
-    expect(boxes).toHaveLength(1)
-    const [b] = boxes
-    expect(b.x + b.w).toBeLessThanOrEqual(20)
-    expect(b.y + b.h).toBeLessThanOrEqual(20)
+    expect(countSet(out)).toBe(25)
+  })
+
+  it('passes the mask through unchanged for radius 0', () => {
+    const src = mask(16, 16, [{ x: 3, y: 3, w: 2, h: 2 }])
+    const out = dilateMask(src, 16, 16, 0)
+    expect(countSet(out)).toBe(countSet(src))
   })
 })