Fix compare-screenshots failure on Deno 2.8.3: pngjs -> fast-png

[Nateowami]

This has started to cause all PRs to fail.

This change is 

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 80.67%. Comparing base (cdef970) to head (d6e9468).
⚠️ Report is 2 commits behind head on master.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3945   +/-   ##
=======================================
  Coverage   80.67%   80.67%           
=======================================
  Files         634      634           
  Lines       40995    40995           
  Branches     6650     6650           
=======================================
  Hits        33073    33073           
  Misses       6884     6884           
  Partials     1038     1038           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

[RaymondLuong3]

@RaymondLuong3 reviewed 1 file and all commit messages, and made 2 comments.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on Nateowami).

---

scripts/storybook-screenshots/compare-screenshots.mts line 39 at r1 (raw file):

import { join } from 'node:path';
// fast-png uses fflate (pure JS) for decompression. pngjs uses Node's zlib, which broke under a
// Deno 2.x update that tightened type-checking in its Node compat zlib binding.

Is that supposed to be node compact?

Code quote:

type-checking in its Node compat 

---

scripts/storybook-screenshots/compare-screenshots.mts line 106 at r1 (raw file):

function countDifferingPixels(a: DecodedPng, b: DecodedPng, threshold: number): number {
  if (a.width !== b.width || a.height !== b.height || a.channels !== b.channels) return -1;
  const ch = a.channels;

It looks like we don't expect the image to have 3 or 4 channels. Why is that so? It looks like it was a change in how the PNG is decoded.

Code quote:

  const ch = a.channels;

[Nateowami]

@Nateowami made 2 comments.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on RaymondLuong3).

---

scripts/storybook-screenshots/compare-screenshots.mts line 39 at r1 (raw file):

Previously, RaymondLuong3 (Raymond Luong) wrote…

Is that supposed to be node compact?

Deno has a compatibility layer to work with Node bindings.

---

scripts/storybook-screenshots/compare-screenshots.mts line 106 at r1 (raw file):

Previously, RaymondLuong3 (Raymond Luong) wrote…

It looks like we don't expect the image to have 3 or 4 channels. Why is that so? It looks like it was a change in how the PNG is decoded.

We expect image a and image b to have the same number of channels. If they don't, it's hard to meaningfully compare.

[Nateowami]

@Nateowami made 1 comment.
Reviewable status: 0 of 1 files reviewed, 2 unresolved discussions (waiting on RaymondLuong3).

---

scripts/storybook-screenshots/compare-screenshots.mts line 39 at r1 (raw file):

Previously, Nateowami wrote…

Deno has a compatibility layer to work with Node bindings.

Historical not is probably not really warranted. Removed.

[Nateowami]

@Nateowami made 1 comment.
Reviewable status: 0 of 1 files reviewed, 2 unresolved discussions (waiting on RaymondLuong3).

---

scripts/storybook-screenshots/compare-screenshots.mts line 39 at r1 (raw file):

Previously, Nateowami wrote…

Historical not is probably not really warranted. Removed.

*Historical note

[RaymondLuong3]

@RaymondLuong3 reviewed 1 file and all commit messages, and resolved 2 discussions.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on Nateowami).